Fix: Performance bottlenecks, large library handling, and time formatting

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+dist
+build
+coverage
+.expo
+.idea
+.vscode
+package-lock.json
+assets
+android
+ios

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "printWidth": 230,
+  "endOfLine": "lf"
+}

.vscode/extensions.json

@@ -1 +1 @@
-{ "recommendations": ["expo.vscode-expo-tools"] }
+{ "recommendations": ["expo.vscode-expo-tools", "esbenp.prettier-vscode"] }

.vscode/settings.json

@@ -1,7 +1,20 @@
 {
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
-    "source.organizeImports": "explicit",
-    "source.sortMembers": "explicit"
-  }
-}
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "files.eol": "\n"
+}

README.md

@@ -8,12 +8,12 @@ It includes real-time playback updates, playlist browsing, now playing controls,
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178C6?style=flat&logo=typescript)](https://www.typescriptlang.org)
 [![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 
-| Home | Player | Extra Info |
-| :---: | :---: | :---: |
+|                                           Home                                           |                                           Player                                           |                                           Extra Info                                           |
+| :--------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------: |
 | ![Home](https://github.com/user-attachments/assets/214523d4-9677-44c7-8fcb-57cfd67f07c2) | ![Player](https://github.com/user-attachments/assets/d94276e6-2820-4187-94c0-4fc3679947bd) | ![Extra Info](https://github.com/user-attachments/assets/11bf50d7-a6b7-4aa9-a03d-7c7edc37a9a2) |
 
-| Settings | Playlist Details |
-| :---: | :---: |
+|                                           Settings                                           |                                           Playlist Details                                           |
+| :------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: |
 | ![Settings](https://github.com/user-attachments/assets/2813abbd-a7e6-4a0f-a463-0656fef92fd6) | ![Playlist Details](https://github.com/user-attachments/assets/c0dcf099-6cbc-4b21-8c16-ade8955dd2fc) |
 
 ## ✨ Features
@@ -58,51 +58,51 @@ This app requires the **AIMP Web Control Plugin** running on your PC. The plugin
 
 #### 🎵 Track Information
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/track/info` | GET | Get current track metadata (title, artist, album, etc.) |
-| `/track/cover` | GET | Get album artwork for current track |
-| `/track/position` | GET | Get current playback position |
-| `/track/position` | POST | Set playback position (seek) |
-| `/track/duration` | GET | Get track duration |
+| Endpoint          | Method | Description                                             |
+| ----------------- | ------ | ------------------------------------------------------- |
+| `/track/info`     | GET    | Get current track metadata (title, artist, album, etc.) |
+| `/track/cover`    | GET    | Get album artwork for current track                     |
+| `/track/position` | GET    | Get current playback position                           |
+| `/track/position` | POST   | Set playback position (seek)                            |
+| `/track/duration` | GET    | Get track duration                                      |
 
 #### ▶️ Player Controls
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/playerstate` | GET | Get player state (playing/paused/stopped) |
-| `/playpause` | GET | Toggle play/pause |
-| `/next` | GET | Skip to next track |
-| `/previous` | GET | Go to previous track |
+| Endpoint       | Method | Description                               |
+| -------------- | ------ | ----------------------------------------- |
+| `/playerstate` | GET    | Get player state (playing/paused/stopped) |
+| `/playpause`   | GET    | Toggle play/pause                         |
+| `/next`        | GET    | Skip to next track                        |
+| `/previous`    | GET    | Go to previous track                      |
 
 #### 🔊 Audio Controls
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/volume` | GET | Get current volume level |
-| `/volume` | POST | Set volume level |
-| `/mute` | GET | Get mute state |
-| `/mute` | POST | Toggle mute on/off |
+| Endpoint  | Method | Description              |
+| --------- | ------ | ------------------------ |
+| `/volume` | GET    | Get current volume level |
+| `/volume` | POST   | Set volume level         |
+| `/mute`   | GET    | Get mute state           |
+| `/mute`   | POST   | Toggle mute on/off       |
 
 #### 🔀 Playback Modes
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/track/repeat` | GET | Get repeat mode |
-| `/track/repeat` | POST | Set repeat mode |
-| `/shuffle` | GET | Get shuffle state |
-| `/shuffle` | POST | Toggle shuffle on/off |
+| Endpoint        | Method | Description           |
+| --------------- | ------ | --------------------- |
+| `/track/repeat` | GET    | Get repeat mode       |
+| `/track/repeat` | POST   | Set repeat mode       |
+| `/shuffle`      | GET    | Get shuffle state     |
+| `/shuffle`      | POST   | Toggle shuffle on/off |
 
 #### 📋 Playlists
 
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/playlist` | GET | Get all playlists |
-| `/playlist/current` | GET | Get currently active playlist |
-| `/playlist/items` | GET | Get tracks from a specific playlist |
-| `/playlist/info` | GET | Get basic playlist information |
-| `/playlist/stats` | GET | Get playlist statistics |
-| `/playlist/play` | GET | Play a specific track from playlist |
+| Endpoint            | Method | Description                         |
+| ------------------- | ------ | ----------------------------------- |
+| `/playlist`         | GET    | Get all playlists                   |
+| `/playlist/current` | GET    | Get currently active playlist       |
+| `/playlist/items`   | GET    | Get tracks from a specific playlist |
+| `/playlist/info`    | GET    | Get basic playlist information      |
+| `/playlist/stats`   | GET    | Get playlist statistics             |
+| `/playlist/play`    | GET    | Play a specific track from playlist |
 
 #### 🔌 WebSocket Events
 
@@ -127,17 +127,20 @@ Connect to `ws://<server-ip>:3554` for real-time updates:
 ## 🚀 Installation
 
 1. Clone the repository:
+
    ```bash
    git clone https://github.com/yourusername/aimp-remote.git
    cd aimp-remote
    ```
 
 2. Install dependencies:
+
    ```bash
    npm install
    ```
 
 3. Start the app:
+
    ```bash
    npm run start
    ```
@@ -244,6 +247,7 @@ Current communication is **LAN-oriented** and uses HTTP/WebSocket without encryp
 ⚠️ **Not recommended for production or internet-facing deployments**
 
 For non-local or production-grade scenarios, consider:
+
 - Implementing HTTPS/WSS with valid certificates
 - Adding authentication (API keys, OAuth)
 - Implementing rate limiting

app.json

@@ -3,14 +3,18 @@
     "name": "AIMP Remote Control",
     "slug": "aimp-remote",
     "version": "1.1.0",
-    "orientation": "portrait",
+    "orientation": "default",
     "icon": "./assets/icons/adaptive-icon-color.png",
     "scheme": "aimpremote",
     "userInterfaceStyle": "automatic",
     "ios": {
+      "infoPlist": {
+        "NSCameraUsageDescription": "This app uses the camera to scan QR codes to connect to the AIMP server."
+      },
       "supportsTablet": true
     },
     "android": {
+      "permissions": ["CAMERA"],
       "adaptiveIcon": {
         "backgroundColor": "#363636",
         "foregroundImage": "./assets/icons/adaptive-icon-color.png",
@@ -42,13 +46,7 @@
       [
         "expo-font",
         {
-          "fonts": [
-            "./assets/fonts/MPLUS-Bold.ttf",
-            "./assets/fonts/MPLUS-ExtraBold.ttf",
-            "./assets/fonts/MPLUS-Regular.ttf",
-            "./assets/fonts/MPLUS-Medium.ttf",
-            "./assets/fonts/MPLUS-Thin.ttf"
-          ]
+          "fonts": ["./assets/fonts/MPLUS-Bold.ttf", "./assets/fonts/MPLUS-ExtraBold.ttf", "./assets/fonts/MPLUS-Regular.ttf", "./assets/fonts/MPLUS-Medium.ttf", "./assets/fonts/MPLUS-Thin.ttf"]
         }
       ],
       [
@@ -67,14 +65,12 @@
     "extra": {
       "router": {},
       "eas": {
-        "projectId": "cca8de19-da90-4dff-bdec-f261cd0abbda"
+        "projectId": "031e69da-7b3f-4e59-9000-d375c17424ec"
       }
     },
     "runtimeVersion": {
       "policy": "appVersion"
     },
-    "updates": {
-      "url": "https://u.expo.dev/cca8de19-da90-4dff-bdec-f261cd0abbda"
-    }
+    "owner": "mahmoudwalid"
   }
 }

eslint.config.js

@@ -1,10 +1,12 @@
 // https://docs.expo.dev/guides/using-eslint/
 const { defineConfig } = require('eslint/config');
 const expoConfig = require('eslint-config-expo/flat');
+const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
 
 module.exports = defineConfig([
   expoConfig,
+  eslintPluginPrettierRecommended,
   {
-    ignores: ['dist/*'],
+    ignores: ['dist/*', '.expo/*'],
   },
 ]);