update to v1.8.0

use electron-builder's static AppImage runtime (#1816 )
electron-builder added compatibility with the AppImage Type2 runtime (i.e. FUSE-less runtime). However, this is - for now anyway - an opt-in feature, which this commit enables.
2026-05-07 12:30:12 +02:00 · 2026-03-09 21:53:26 -07:00 · 2026-03-09 21:52:48 -07:00 · 2026-03-09 20:58:02 -07:00 · 2026-03-09 20:49:02 -07:00 · 2026-03-09 20:49:02 -07:00
32 changed files with 616 additions and 975 deletions
@@ -1,11 +1,13 @@
 name: Publish (PR)

 on:
+    workflow_dispatch:
    pull_request:
        branches:
            - development
        paths:
            - 'src/**'
+            - 'electron-builder*.yml'

 jobs:
    wait-for-lint:
@@ -20,7 +20,7 @@ COPY --chown=nginx:nginx --from=builder /app/out/web /usr/share/nginx/html
 COPY ./settings.js.template /etc/nginx/templates/settings.js.template
 COPY ng.conf.template /etc/nginx/templates/default.conf.template

-ENV SERVER_LOCK=false SERVER_NAME="" SERVER_TYPE="" SERVER_URL=""
+ENV SERVER_LOCK=false SERVER_NAME="" SERVER_TYPE="" SERVER_URL="" REMOTE_URL=""
 ENV LEGACY_AUTHENTICATION="" ANALYTICS_DISABLED="" PUBLIC_PATH="/"

 EXPOSE 9180
@@ -114,6 +114,7 @@ services:
            - SERVER_LOCK=true # When true AND name/type/url are set, only username/password can be toggled
            - SERVER_TYPE=jellyfin # the allowed types are: jellyfin, navidrome, subsonic. These values are case insensitive
            - SERVER_URL= # http://address:port or https://address:port
+            = REMOTE_URL= # http://address or https://address
            - LEGACY_AUTHENTICATION=false # When SERVER_LOCK is true, sets the legacy (plaintext) authentication flag for Subsonic/OpenSubsonic servers
            - ANALYTICS_DISABLED=true # Set to true to disable Umami analytics tracking
        ports:
@@ -134,9 +135,11 @@ services:

 4. _Optional_ - To hard code the server url, pass the following environment variables: `SERVER_NAME`, `SERVER_TYPE` (one of `jellyfin` or `navidrome` or `subsonic`), `SERVER_URL`. To prevent users from changing these settings, pass `SERVER_LOCK=true`. This can only be set if all three of the previous values are set. When `SERVER_LOCK=true`, you can also set `LEGACY_AUTHENTICATION=true` or `LEGACY_AUTHENTICATION=false` to configure the legacy authentication flag for the server (only applicable for Subsonic/OpenSubsonic servers).

-5. _Optional_ - To disable Umami analytics tracking in the Docker/web version, set the environment variable `ANALYTICS_DISABLED=true`. When enabled, the analytics script will not be loaded and all tracking will be disabled.
+5. _Optional_ - If your server uses a separate public-facing URL than what integrating applications use internally to communicate with your server, such as a separate Navidrome `ShareURL`, set `REMOTE_URL` to said public-facing URL.
+ 
+6. _Optional_ - To disable Umami analytics tracking in the Docker/web version, set the environment variable `ANALYTICS_DISABLED=true`. When enabled, the analytics script will not be loaded and all tracking will be disabled.

-6. _Optional_ - App settings (theme, language, sidebar options, etc.) can be overridden with environment variables on first run. The variables use the `FS_` prefix (e.g. `FS_GENERAL_THEME=defaultDark`, `FS_GENERAL_LANGUAGE=de`). See [the settings environment variable documentation](docs/ENV_SETTINGS.md) for the full list.
+7. _Optional_ - App settings (theme, language, sidebar options, etc.) can be overridden with environment variables on first run. The variables use the `FS_` prefix (e.g. `FS_GENERAL_THEME=defaultDark`, `FS_GENERAL_LANGUAGE=de`). See [the settings environment variable documentation](docs/ENV_SETTINGS.md) for the full list.

 ## FAQ

@@ -8,6 +8,7 @@ services:
            - SERVER_LOCK=false # When true AND name/type/url are set, only username/password can be toggled
            - SERVER_TYPE=jellyfin # the allowed types are: jellyfin, navidrome, subsonic. These values are case insensitive
            - SERVER_URL=http://localhost:8096 # http://address:port or https://address:port
+            # - REMOTE_URL=http://share.localhost # Used for compatibility with external functionality, such as custom sharing URLs on Navidrome
            - LEGACY_AUTHENTICATION=false # When SERVER_LOCK is true, sets the legacyauth flag for server authentication (true or false)
            - ANALYTICS_DISABLED=false # Set to true to disable Umami analytics tracking
        ports:
@@ -60,6 +60,9 @@ linux:
    icon: assets/icons/icon.png
    artifactName: ${productName}-${os}-${arch}.${ext}

+toolsets:
+    appimage: "1.0.2"
+
 npmRebuild: false

 publish:
@@ -59,6 +59,9 @@ linux:
    icon: assets/icons/icon.png
    artifactName: ${productName}-${os}-${arch}.${ext}

+toolsets:
+    appimage: "1.0.2"
+
 npmRebuild: false
 publish:
    provider: github
@@ -59,6 +59,9 @@ linux:
    icon: assets/icons/icon.png
    artifactName: ${productName}-${os}-${arch}.${ext}

+toolsets:
+    appimage: "1.0.2"
+
 npmRebuild: false
 afterAllArtifactBuild: scripts/after-all-artifact-build.mjs
 publish:
@@ -1,6 +1,6 @@
 {
    "name": "feishin",
-    "version": "1.7.0",
+    "version": "1.8.0",
    "description": "A modern self-hosted music player.",
    "keywords": [
        "subsonic",
@@ -127,7 +127,6 @@
        "react-error-boundary": "^5.0.0",
        "react-i18next": "^16.3.3",
        "react-icons": "^5.5.0",
-        "react-image": "^4.1.0",
        "react-player": "^2.16.0",
        "react-router": "^7.13.1",
        "react-split-pane": "^3.0.4",
@@ -158,7 +157,7 @@
        "concurrently": "^9.2.1",
        "cross-env": "^10.1.0",
        "electron": "^39.4.0",
-        "electron-builder": "^26.8.1",
+        "electron-builder": "^26.8.2",
        "electron-devtools-installer": "^4.0.0",
        "electron-vite": "^4.0.1",
        "eslint": "^9.24.0",
@@ -1,6 +1,7 @@
 "use strict";

 window.SERVER_URL = "${SERVER_URL}";
+window.REMOTE_URL = "${REMOTE_URL}";
 window.SERVER_NAME = "${SERVER_NAME}";
 window.SERVER_TYPE = "${SERVER_TYPE}";
 window.SERVER_LOCK = "${SERVER_LOCK}";
@@ -578,7 +578,8 @@
        "example": "příklad",
        "filter_single": "jeden",
        "filter_multiple": "několik",
-        "rename": "přejmenovat"
+        "rename": "přejmenovat",
+        "newVersionAvailable": "je dostupná nová verze"
    },
    "table": {
        "config": {
@@ -578,7 +578,8 @@
        "example": "Ejemplo",
        "filter_single": "simple",
        "filter_multiple": "multi",
-        "rename": "Renombrar"
+        "rename": "Renombrar",
+        "newVersionAvailable": "Una nueva versión está disponible"
    },
    "error": {
        "remotePortWarning": "reiniciar el servidor para aplicar el nuevo puerto",
@@ -855,7 +855,11 @@
        "sidebarPlaylistSorting": "tri des listes de lecture dans la barre latérale",
        "sidebarPlaylistListFilterRegex_description": "masquer les listes de lecture dans la barre latérale qui correspondent à cette expression régulière",
        "sidebarPlaylistListFilterRegex_placeholder": "ex. ^Mix Journalier*",
-        "sidebarPlaylistListFilterRegex": "filtre d'expression régulière de liste de lecture"
+        "sidebarPlaylistListFilterRegex": "filtre d'expression régulière de liste de lecture",
+        "autosave": "sauvegarder automatiquement la file d'attente",
+        "autosave_description": "activez la sauvegarde automatique de la file d'attente de lecture sur votre serveur. Cette fonction est uniquement disponible avec Navidrome/Subsonic et ne permet pas d'utiliser une file d'attente mixte.",
+        "autosaveCount": "fréquence de sauvegarde automatique de la file d'attente",
+        "autosaveCount_description": "nombre de changement de piste avant la sauvegarde de la file d'attente. 1 (minimum) signifie chaque changement de titre"
    },
    "form": {
        "deletePlaylist": {
@@ -75,7 +75,7 @@
        "forward": "前进",
        "delete": "删除",
        "cancel": "取消",
-        "forceRestartRequired": "重启应用使更改生效…关闭通知即可重启",
+        "forceRestartRequired": "重启应用以使更改生效…关闭通知即可重启",
        "setting_other": "设置",
        "version": "版本",
        "title": "标题",
@@ -108,7 +108,7 @@
        "duration": "时长",
        "ok": "好",
        "no": "否",
-        "playerMustBePaused": "播放器必须暂停",
+        "playerMustBePaused": "播放器必须先暂停",
        "channel_other": "频道",
        "none": "无",
        "disc": "碟片",
@@ -156,7 +156,8 @@
        "filter_single": "单项",
        "mood": "氛围",
        "rename": "重命名",
-        "filter_multiple": "多项"
+        "filter_multiple": "多项",
+        "newVersionAvailable": "a new version is available"
    },
    "entity": {
        "albumArtist_other": "专辑艺术家",
@@ -1210,13 +1211,27 @@
        "miscellaneousSettings": "杂项设置",
        "options": {
            "channelLayout": {
-                "single": "单项"
+                "single": "单项",
+                "dualCombined": "Dual-Combined",
+                "dualHorizontal": "Dual-Horizontal",
+                "dualVertical": "Dual-Vertical"
            },
            "mode": {
-                "0": "[0] 离散频率"
+                "0": "[0] 离散频率",
+                "1": "[1] 1/24th octave / 240 bands",
+                "2": "[2] 1/12th octave / 120 bands",
+                "3": "[3] 1/8th octave / 80 bands",
+                "4": "[4] 1/6th octave / 60 bands",
+                "5": "[5] 1/4th octave / 40 bands",
+                "6": "[6] 1/3rd octave / 30 bands",
+                "7": "[7] Half octave / 20 bands",
+                "8": "[8] Full octave / 10 bands",
+                "10": "[10] Line / Area graph"
            },
            "colorMode": {
-                "gradient": "渐变"
+                "gradient": "渐变",
+                "barIndex": "Bar-Index",
+                "barLevel": "Bar-Level"
            },
            "gradient": {
                "classic": "经典",
@@ -1226,7 +1241,11 @@
                "orangered": "橙红色"
            },
            "frequencyScale": {
-                "none": "无"
+                "none": "无",
+                "bark": "Bark Scale",
+                "linear": "Linear Scale",
+                "log": "Log Scale",
+                "mel": "Mel Scale"
            },
            "weightingFilter": {
                "none": "无",
@@ -1284,7 +1303,14 @@
        "splitGradient": "渐变分割",
        "showScaleX": "显示比例尺 X",
        "noteLabels": "笔记标签",
-        "showScaleY": "显示比例尺 Y"
+        "showScaleY": "显示比例尺 Y",
+        "alphaBars": "Alpha Bars",
+        "ansiBands": "ANSI Bands",
+        "ledBars": "LED Bars",
+        "trueLeds": "True LEDs",
+        "lumiBars": "Lumi Bars",
+        "outlineBars": "Outline Bars",
+        "roundBars": "Round Bars"
    },
    "queryBuilder": {
        "standardTags": "标准标签",
@@ -12,7 +12,7 @@
        "delete": "刪除",
        "descending": "降冪",
        "description": "描述",
-        "forceRestartRequired": "重新啟動應用程式使更改生效…關閉通知即可重啟",
+        "forceRestartRequired": "重新啟動應用程式以使更改生效…關閉通知後即可重啟",
        "menu": "選單",
        "action_other": "操作",
        "add": "新增",
@@ -39,7 +39,7 @@
        "ok": "好",
        "owner": "所有者",
        "path": "路徑",
-        "playerMustBePaused": "播放器必須被暫停",
+        "playerMustBePaused": "播放器必須先暫停",
        "previousSong": "上一首$t(entity.track, {\"count\": 1})",
        "quit": "退出",
        "random": "隨機",
@@ -64,8 +64,8 @@
        "cancel": "取消",
        "center": "中央",
        "channel_other": "聲道",
-        "configure": "配置",
-        "create": "創建",
+        "configure": "設定",
+        "create": "建立",
        "currentSong": "目前$t(entity.track, {\"count\": 1})",
        "minimize": "最小化",
        "modified": "已修改",
@@ -78,7 +78,7 @@
        "newVersion": "已安裝新版本 ({{version}})",
        "viewReleaseNotes": "查看發行註記",
        "albumGain": "專輯增益",
-        "albumPeak": "專輯peak",
+        "albumPeak": "專輯峰值",
        "bitDepth": "位元深度",
        "close": "關閉",
        "codec": "編碼",
@@ -115,7 +115,8 @@
        "rename": "重新命名",
        "itemsMore": "{{count}} 更多",
        "filter_single": "單選",
-        "filter_multiple": "複選"
+        "filter_multiple": "複選",
+        "newVersionAvailable": "有新的版本可供使用"
    },
    "error": {
        "endpointNotImplementedError": "{{serverType}} 尚未實現端點 {{endpoint}}",
@@ -124,13 +125,13 @@
        "authenticationFailed": "驗證失敗",
        "credentialsRequired": "需要憑證",
        "genericError": "發生了錯誤",
-        "invalidServer": "無效的服務器",
+        "invalidServer": "無效的伺服器",
        "localFontAccessDenied": "無法取得本地字體",
-        "loginRateError": "登錄請求嘗試次數過多，請稍後再試",
+        "loginRateError": "登入請求嘗試次數過多，請稍後再試",
        "remoteDisableError": "$t(common.disable)遠端伺服器時出現錯誤",
        "remoteEnableError": "$t(common.enable)遠端伺服器時出現錯誤",
-        "remotePortError": "設定遠端伺服器端口時發生錯誤",
-        "remotePortWarning": "重啟伺服器使新端口生效",
+        "remotePortError": "設定遠端伺服器連接埠時發生錯誤",
+        "remotePortWarning": "重啟伺服器使新連接埠生效",
        "serverRequired": "需要伺服器",
        "sessionExpiredError": "工作階段已過期",
        "systemFontError": "嘗試取得系統字體時出現錯誤",
@@ -138,13 +139,13 @@
        "mpvRequired": "需要 MPV",
        "playbackError": "無法播放媒體",
        "badAlbum": "您看到此頁面是因為這首歌不是專輯的一部分。如果您的音樂資料夾頂層有一首歌，則很可能會看到此問題。 Jellyfin 僅將資料夾中的曲目分組",
-        "badValue": "無效選項“{{value}}”。該值不再存在",
+        "badValue": "無效選項「{{value}}」。該值不再存在",
        "networkError": "發生網路錯誤",
        "notificationDenied": "通知權限被拒絕。此設定無效",
        "openError": "無法開啟檔案",
        "multipleServerSaveQueueError": "播放佇列中包含不是來自目前伺服器的歌曲，此操作不受支援",
        "saveQueueFailed": "儲存播放佇列失敗",
-        "settingsSyncError": "偵測到渲染器與主程序之間的設定不一致，請重新啟動應用程式以套用變更",
+        "settingsSyncError": "偵測到渲染器與主程式之間的設定不一致，請重新啟動應用程式以套用變更",
        "noNetwork": "伺服器無法連線",
        "noNetworkDescription": "無法連接到此伺服器",
        "invalidJson": "無效的 JSON",
@@ -198,7 +199,7 @@
            "genres": "$t(entity.genre, {\"count\": 2})"
        },
        "appMenu": {
-            "openBrowserDevtools": "打開瀏覽器開發者工具",
+            "openBrowserDevtools": "開啟瀏覽器開發者工具",
            "collapseSidebar": "折疊側邊欄",
            "expandSidebar": "展開側邊欄",
            "goBack": "返回",
@@ -429,8 +430,8 @@
        "applicationHotkeys_description": "設定應用程式快捷鍵。切換勾選框來設為全域快捷鍵（僅桌面端）",
        "audioDevice": "音訊設備",
        "audioDevice_description": "選擇用於播放的音訊設備",
-        "audioExclusiveMode": "音訊獨占模式",
-        "audioExclusiveMode_description": "啟用獨占輸出模式。在此模式下，系統通常被鎖定，只有 mpv 能夠輸出音訊",
+        "audioExclusiveMode": "音訊獨佔模式",
+        "audioExclusiveMode_description": "啟用獨佔輸出模式。在此模式下，系統通常被鎖定，只有 mpv 能夠輸出音訊",
        "audioPlayer": "音訊播放器",
        "crossfadeDuration": "淡入淡出持續時間",
        "crossfadeDuration_description": "設定淡入淡出持續時間",
@@ -503,7 +504,7 @@
        "playButtonBehavior_description": "設定歌曲新增到佇列時播放按鈕的預設動作",
        "playButtonBehavior_optionAddLast": "$t(player.addLast)",
        "playButtonBehavior_optionAddNext": "$t(player.addNext)",
-        "remotePort": "遠端控制伺服器端口",
+        "remotePort": "遠端控制伺服器連接埠",
        "remoteUsername": "遠端控制伺服器使用者名稱",
        "replayGainClipping": "{{ReplayGain}}削波",
        "replayGainFallback": "{{ReplayGain}}後備替代",
@@ -517,7 +518,7 @@
        "replayGainPreamp_description": "調整使用在{{ReplayGain}}值上的前置放大增益",
        "savePlayQueue": "儲存播放佇列",
        "sampleRate_description": "如果選擇的取樣率與目前媒體的取樣率不同，請選擇要使用的輸出取樣率。小於 8000 的值將使用預設頻率",
-        "savePlayQueue_description": "當應用程式關閉時儲存播放佇列，並在應用程式打開時恢複它",
+        "savePlayQueue_description": "當應用程式關閉時儲存播放佇列，並在應用程式開啟時恢複它",
        "scrobble": "記錄播放資訊（Scrobble）",
        "scrobble_description": "在你的媒體伺服器中記錄播放資訊",
        "showSkipButton": "顯示跳過按鈕",
@@ -529,13 +530,13 @@
        "sidebarConfiguration_description": "選擇側邊欄包含的項目與順序",
        "sidebarPlaylistList_description": "顯示或隱藏側邊欄歌單清單",
        "sidePlayQueueStyle": "側邊播放佇列樣式",
-        "sidePlayQueueStyle_description": "設置側邊播放佇列樣式",
+        "sidePlayQueueStyle_description": "設定側邊播放佇列樣式",
        "sidePlayQueueStyle_optionAttached": "吸附",
        "sidePlayQueueStyle_optionDetached": "分離",
        "skipDuration": "跳過時長",
-        "skipDuration_description": "設置每次按下跳過按鈕將會跳過的時長",
+        "skipDuration_description": "設定每次按下跳過按鈕將會跳過的時長",
        "skipPlaylistPage": "跳過播放清單頁面",
-        "skipPlaylistPage_description": "打開播放清單時，直接查看歌曲列表而非查看預設頁面",
+        "skipPlaylistPage_description": "開啟播放清單時，直接查看歌曲列表而非查看預設頁面",
        "theme": "主題",
        "themeDark": "主題（深色）",
        "useSystemTheme_description": "使用系統定義的淺色或深色主題",
@@ -563,25 +564,25 @@
        "playButtonBehavior_optionPlay": "$t(player.play)",
        "remotePassword": "遠端控制伺服器密碼",
        "remotePassword_description": "設定遠端控制伺服器的密碼。這些憑證預設以不安全的方式傳輸，因此您應該使用一個您不在意的唯一密碼",
-        "remotePort_description": "設定遠端控制伺服器的端口",
-        "remoteUsername_description": "設定遠端控制伺服器的使用者名稱。如果使用者名稱和密碼都為空，則身份驗證將被禁用",
+        "remotePort_description": "設定遠端控制伺服器的連接埠",
+        "remoteUsername_description": "設定遠端控制伺服器的使用者名稱。如果使用者名稱和密碼都為空，則身分驗證將被禁用",
        "replayGainClipping_description": "自動降低增益以防止{{ReplayGain}}造成削波",
        "showSkipButtons": "顯示跳過按鈕",
        "themeDark_description": "應用程式將使用深色主題",
-        "clearQueryCache_description": "Feishin的“軟清除”。這將會刷新播放清單、曲目標籤並重置儲存的歌詞。會保留設定、伺服器憑證和暫存圖片",
+        "clearQueryCache_description": "Feishin的「軟清除」。這將會刷新播放清單、曲目標籤並重置儲存的歌詞。會保留設定、伺服器憑證和暫存圖片",
        "clearCache": "清除瀏覽器快取",
-        "clearCache_description": "Feishin的“硬清除”。除了清除Feishin的快取、清除瀏覽器快取（儲存的圖片和其他資源）。會保留伺服器憑證和設定",
+        "clearCache_description": "Feishin的「硬清除」。除了清除Feishin的快取、清除瀏覽器快取（儲存的圖片和其他資源）。會保留伺服器憑證和設定",
        "clearQueryCache": "清除Feishin快取",
        "buttonSize": "播放器欄按鈕大小",
        "buttonSize_description": "播放器欄按鈕大小",
        "albumBackground": "專輯背景圖片",
        "albumBackground_description": "為包含專輯封面的專輯頁面新增背景圖片",
        "albumBackgroundBlur": "專輯背景圖片模糊大小",
-        "albumBackgroundBlur_description": "調整應用於專輯背景圖片的模糊量",
+        "albumBackgroundBlur_description": "調整應用程式於專輯背景圖片的模糊量",
        "artistConfiguration": "專輯藝人頁面設定",
        "artistConfiguration_description": "設定專輯藝人頁面中顯示的項目及排序",
        "clearCacheSuccess": "成功清除快取",
-        "contextMenu": "右鍵選單配置",
+        "contextMenu": "右鍵選單設定",
        "contextMenu_description": "允許您隱藏在右鍵選單項目時顯示的項目。未選取的項目將被隱藏",
        "customCssEnable": "啟用自訂CSS",
        "customCssEnable_description": "允許撰寫自訂CSS",
@@ -598,8 +599,8 @@
        "externalLinks_description": "在藝人/專輯頁面顯示外部連結(Last.fm, MusicBrainz)",
        "preferLocalLyrics": "偏好本地歌詞",
        "preferLocalLyrics_description": "優先選擇本地歌詞，而不是遠端歌詞（如果可用）",
-        "homeConfiguration": "首頁配置",
-        "homeConfiguration_description": "配置在首頁上顯示哪些項目以及顯示順序",
+        "homeConfiguration": "首頁設定",
+        "homeConfiguration_description": "設定在首頁上顯示哪些項目以及顯示順序",
        "homeFeature": "首頁特色輪播",
        "homeFeature_description": "控制是否在首頁上顯示大型特色輪播",
        "imageAspectRatio": "使用原生封面照長寬比",
@@ -621,14 +622,14 @@
        "startMinimized": "啟動時最小化",
        "startMinimized_description": "在系統匣中啟動應用程式",
        "transcode_description": "啟用轉碼到不同格式",
-        "transcodeBitrate": "要轉碼的比特率",
-        "transcodeBitrate_description": "選擇要轉碼的比特率。 0 表示讓伺服器選擇",
+        "transcodeBitrate": "要轉碼的位元率",
+        "transcodeBitrate_description": "選擇要轉碼的位元率。 0 表示讓伺服器選擇",
        "transcodeFormat": "轉碼的格式",
        "transcodeFormat_description": "選擇要轉碼的格式。留空來讓伺服器決定",
        "translationApiProvider": "翻譯API提供者",
        "translationApiProvider_description": "翻譯API的提供者",
        "translationApiKey": "翻譯API金鑰",
-        "translationApiKey_description": "翻譯的API金鑰（僅限全域服務端點）",
+        "translationApiKey_description": "翻譯的API金鑰（僅限全域伺服端點）",
        "translationTargetLanguage": "目標翻譯語言",
        "translationTargetLanguage_description": "翻譯的目標語言",
        "trayEnabled": "顯示系統匣",
@@ -771,7 +772,7 @@
        "primaryShade": "主要色調",
        "primaryShade_description": "覆蓋按鈕、連結及其他主色調元素所使用的主色調(0–9)",
        "playerItemConfiguration_description": "設定全螢幕播放器顯示的項目及排列順序",
-        "playerItemConfiguration": "播放器項目配置",
+        "playerItemConfiguration": "播放器項目設定",
        "autosave": "自動儲存播放佇列",
        "autosave_description": "啟用自動將播放佇列儲存到您的伺服器。這只有在使用Navidrome/Subsonic時才可使用，並且您不能有混合播放佇列。",
        "autosaveCount": "自動播放佇列儲存頻率",
@@ -784,7 +785,7 @@
                "gap": "$t(common.gap)",
                "size": "$t(common.size)",
                "tableColumns": "列",
-                "autoFitColumns": "列寬自適應",
+                "autoFitColumns": "自動調整列寬",
                "followCurrentSong": "跟隨目前歌曲",
                "itemGap": "項目間隔 (px)",
                "itemSize": "項目大小 (px)",
@@ -862,7 +863,7 @@
            "albumCount": "$t(entity.album, {\"count\": 2})",
            "artist": "$t(entity.artist, {\"count\": 1})",
            "biography": "簡介",
-            "bitrate": "比特率",
+            "bitrate": "位元率",
            "channels": "$t(common.channel, {\"count\": 2})",
            "comment": "評論",
            "dateAdded": "新增日期",
@@ -889,7 +890,7 @@
    "action": {
        "addToFavorites": "新增到$t(entity.favorite, {\"count\": 2})",
        "clearQueue": "清空播放佇列",
-        "createPlaylist": "創建$t(entity.playlist, {\"count\": 1})",
+        "createPlaylist": "建立$t(entity.playlist, {\"count\": 1})",
        "deletePlaylist": "刪除$t(entity.playlist, {\"count\": 1})",
        "addToPlaylist": "新增到$t(entity.playlist, {\"count\": 1})",
        "deselectAll": "取消全選",
@@ -919,7 +920,7 @@
        "moveDown": "向下移動",
        "holdToMoveToTop": "按住以移動至頂部",
        "holdToMoveToBottom": "按住以移動至底部",
-        "createRadioStation": "創建 $t(entity.radioStation, {\"count\": 1})",
+        "createRadioStation": "建立 $t(entity.radioStation, {\"count\": 1})",
        "deleteRadioStation": "刪除 $t(entity.radioStation, {\"count\": 1})",
        "openApplicationDirectory": "開啟應用程式目錄",
        "addOrRemoveFromSelection": "新增或移除選取項目",
@@ -953,7 +954,7 @@
        "albumCount": "$t(entity.album, {\"count\": 2})數",
        "artist": "$t(entity.artist, {\"count\": 1})",
        "biography": "個人簡介",
-        "bitrate": "比特率",
+        "bitrate": "位元率",
        "bpm": "bpm",
        "channels": "$t(common.channel, {\"count\": 2})",
        "comment": "評論",
@@ -1011,7 +1012,7 @@
            "ignoreCors": "忽略 cors $t(common.restartRequired)",
            "ignoreSsl": "忽略 ssl $t(common.restartRequired)",
            "input_preferInstantMix": "偏好即時混音",
-            "input_preferInstantMixDescription": "僅使用即時混音功能來獲取相似歌曲。若您擁有能修改此行為的外掛，此功能將相當實用",
+            "input_preferInstantMixDescription": "僅使用即時混音功能來取得相似歌曲。若您擁有能修改此行為的外掛，此功能將相當實用",
            "input_preferRemoteUrl": "優先使用公開網址",
            "input_remoteUrl": "公開網址",
            "input_remoteUrlPlaceholder": "選用：對外功能的公開網址"
@@ -1021,7 +1022,7 @@
            "input_skipDuplicates": "跳過重複",
            "success": "新增 $t(entity.trackWithCount, {\"count\": {{message}} }) 到 $t(entity.playlistWithCount, {\"count\": {{numOfPlaylists}} })",
            "title": "新增到$t(entity.playlist, {\"count\": 1})",
-            "create": "創建 $t(entity.playlist, {\"count\": 1}) {{playlist}}",
+            "create": "建立 $t(entity.playlist, {\"count\": 1}) {{playlist}}",
            "searchOrCreate": "搜尋$t(entity.playlist, {\"count\": 2}) 或輸入內容以建立新項目"
        },
        "createPlaylist": {
@@ -1029,8 +1030,8 @@
            "input_name": "$t(common.name)",
            "input_owner": "$t(common.owner)",
            "input_public": "公開",
-            "success": "已成功創建 $t(entity.playlist, {\"count\": 1})",
-            "title": "創建$t(entity.playlist, {\"count\": 1})"
+            "success": "已成功建立 $t(entity.playlist, {\"count\": 1})",
+            "title": "建立$t(entity.playlist, {\"count\": 1})"
        },
        "lyricSearch": {
            "input_name": "$t(common.name)",
@@ -1092,8 +1093,8 @@
            "input_played_optionPlayed": "僅播放過的曲目"
        },
        "createRadioStation": {
-            "success": "電台創建成功",
-            "title": "創建電台",
+            "success": "電台建立成功",
+            "title": "建立電台",
            "input_homepageUrl": "首頁連結",
            "input_name": "名稱",
            "input_streamUrl": "串流網址"
@@ -1202,8 +1203,8 @@
        "channelLayout": "聲道佈局",
        "maxFPS": "最大幀率",
        "opacity": "不透明度",
-        "customGradients": "自定義漸層",
-        "addCustomGradient": "新增自定義漸層",
+        "customGradients": "自訂漸層",
+        "addCustomGradient": "新增自訂漸層",
        "gradientName": "漸層名稱",
        "gradientNamePlaceholder": "漸層名稱",
        "vertical": "垂直",
@@ -8,6 +8,7 @@ declare global {
        electron: ElectronAPI;
        LEGACY_AUTHENTICATION?: boolean;
        queryLocalFonts?: () => Promise<Font[]>;
+        REMOTE_URL?: string;
        SERVER_LOCK?: boolean;
        SERVER_NAME?: string;
        SERVER_TYPE?: ServerType;
@@ -74,6 +74,7 @@ const env = {
        SERVER_TYPE !== null
            ? process.env.LEGACY_AUTHENTICATION?.toLocaleLowerCase() === 'true'
            : false,
+    REMOTE_URL: process.env.REMOTE_URL ?? '',
    SERVER_LOCK:
        SERVER_TYPE !== null ? process.env.SERVER_LOCK?.toLocaleLowerCase() === 'true' : false,
    SERVER_NAME: process.env.SERVER_NAME ?? '',
@@ -442,6 +442,25 @@ export const controller: GeneralController = {
            }),
        );
    },
+    getImageRequest(args) {
+        const server = getServerById(args.apiClientProps.serverId);
+
+        if (!server) {
+            return null;
+        }
+
+        return (
+            apiController(
+                'getImageRequest',
+                server.type,
+            )?.(
+                addContext({
+                    ...args,
+                    apiClientProps: { ...args.apiClientProps, server },
+                }),
+            ) || null
+        );
+    },
    getImageUrl(args) {
        const server = getServerById(args.apiClientProps.serverId);

@@ -4,7 +4,7 @@ import filter from 'lodash/filter';
 import orderBy from 'lodash/orderBy';
 import { z } from 'zod';

-import { jfApiClient } from '/@/renderer/api/jellyfin/jellyfin-api';
+import { createAuthHeader, jfApiClient } from '/@/renderer/api/jellyfin/jellyfin-api';
 import { useRadioStore } from '/@/renderer/features/radio/store/radio-store';
 import { getServerUrl } from '/@/renderer/utils/normalize-server-url';
 import { jfNormalize } from '/@/shared/api/jellyfin/jellyfin-normalize';
@@ -15,10 +15,13 @@ import {
    albumListSortMap,
    Folder,
    genreListSortMap,
+    ImageArgs,
+    ImageRequest,
    InternalControllerEndpoint,
    LibraryItem,
    Played,
    playlistListSortMap,
+    ReplaceApiClientProps,
    ServerType,
    Song,
    SongListSort,
@@ -29,6 +32,33 @@ import {
 } from '/@/shared/types/domain-types';
 import { ServerFeature } from '/@/shared/types/features-types';

+const getJellyfinImageRequest = ({
+    apiClientProps: { server },
+    baseUrl,
+    query,
+}: ReplaceApiClientProps<ImageArgs>): ImageRequest | null => {
+    const { id, size } = query;
+    const imageSize = size;
+
+    if (!server) {
+        return null;
+    }
+
+    const url = baseUrl || getServerUrl(server);
+
+    if (!url) {
+        return null;
+    }
+
+    return {
+        cacheKey: ['jellyfin', server.id, baseUrl || '', id, imageSize || ''].join(':'),
+        headers: server.credential
+            ? { Authorization: createAuthHeader().concat(`, Token="${server.credential}"`) }
+            : { Authorization: createAuthHeader() },
+        url: `${url}/Items/${id}/Images/Primary?quality=96${imageSize ? `&width=${imageSize}` : ''}`,
+    };
+};
+
 const formatCommaDelimitedString = (value: string[]) => {
    return value.join(',');
 };
@@ -789,23 +819,8 @@ export const JellyfinController: InternalControllerEndpoint = {
            totalRecordCount: res.body?.TotalRecordCount || 0,
        };
    },
-    getImageUrl: ({ apiClientProps: { server }, baseUrl, query }) => {
-        const { id, size } = query;
-        const imageSize = size;
-        const url = baseUrl || getServerUrl(server);
-
-        if (!url) {
-            return null;
-        }
-
-        // For Jellyfin, we construct the URL pattern
-        // The server will return a 404 or placeholder if no image exists
-        const imageUrl = `${url}/Items/${id}/Images/Primary?quality=96${imageSize ? `&width=${imageSize}` : ''}`;
-
-        // For songs, we might want to fall back to album art, but we don't have albumId here
-        // The caller can handle this if needed
-        return imageUrl;
-    },
+    getImageRequest: getJellyfinImageRequest,
+    getImageUrl: (args) => getJellyfinImageRequest(args)?.url || null,
    getInternetRadioStations: async (args) => {
        const { apiClientProps } = args;

@@ -545,6 +545,7 @@ export const NavidromeController: InternalControllerEndpoint = {
            totalRecordCount: Number(res.body.headers.get('x-total-count') || 0),
        };
    },
+    getImageRequest: SubsonicController.getImageRequest,
    getImageUrl: SubsonicController.getImageUrl,
    getInternetRadioStations: SubsonicController.getInternetRadioStations,
    getLyrics: SubsonicController.getLyrics,
@@ -20,9 +20,12 @@ import { hasFeature, sortAlbumArtistList, sortAlbumList, sortSongList } from '/@
 import {
    AlbumListSort,
    GenreListSort,
+    ImageArgs,
+    ImageRequest,
    InternalControllerEndpoint,
    LibraryItem,
    PlaylistListSort,
+    ReplaceApiClientProps,
    ServerType,
    Song,
    SongListSort,
@@ -30,6 +33,36 @@ import {
 } from '/@/shared/types/domain-types';
 import { ServerFeature, ServerFeatures } from '/@/shared/types/features-types';

+const getSubsonicImageRequest = ({
+    apiClientProps: { server },
+    baseUrl,
+    query,
+}: ReplaceApiClientProps<ImageArgs>): ImageRequest | null => {
+    const { id, size } = query;
+    const imageSize = size;
+    const url = baseUrl || getServerUrl(server);
+
+    if (!url || !server?.credential) {
+        return null;
+    }
+
+    // Check for default placeholder image ID
+    if (id.match('2a96cbd8b46e442fc41c2b86b821562f')) {
+        return null;
+    }
+
+    return {
+        cacheKey: ['subsonic', server.id, baseUrl || '', id, imageSize || ''].join(':'),
+        url:
+            `${url}/rest/getCoverArt.view` +
+            `?id=${id}` +
+            `&${server.credential}` +
+            '&v=1.13.0' +
+            '&c=Feishin' +
+            (imageSize ? `&size=${imageSize}` : ''),
+    };
+};
+
 const ALBUM_LIST_SORT_MAPPING: Record<AlbumListSort, AlbumListSortType | undefined> = {
    [AlbumListSort.ALBUM_ARTIST]: AlbumListSortType.ALPHABETICAL_BY_ARTIST,
    [AlbumListSort.ARTIST]: undefined,
@@ -952,29 +985,8 @@ export const SubsonicController: InternalControllerEndpoint = {
            startIndex: query.startIndex,
        });
    },
-    getImageUrl: ({ apiClientProps: { server }, baseUrl, query }) => {
-        const { id, size } = query;
-        const imageSize = size;
-        const url = baseUrl || getServerUrl(server);
-
-        if (!url || !server?.credential) {
-            return null;
-        }
-
-        // Check for default placeholder image ID
-        if (id.match('2a96cbd8b46e442fc41c2b86b821562f')) {
-            return null;
-        }
-
-        return (
-            `${url}/rest/getCoverArt.view` +
-            `?id=${id}` +
-            `&${server.credential}` +
-            '&v=1.13.0' +
-            '&c=Feishin' +
-            (imageSize ? `&size=${imageSize}` : '')
-        );
-    },
+    getImageRequest: getSubsonicImageRequest,
+    getImageUrl: (args) => getSubsonicImageRequest(args)?.url || null,
    getInternetRadioStations: async (args) => {
        const { apiClientProps } = args;

@@ -12,7 +12,7 @@ import {
    useSettingsStore,
 } from '/@/renderer/store';
 import { BaseImage, ImageProps } from '/@/shared/components/image/image';
-import { ExplicitStatus, LibraryItem } from '/@/shared/types/domain-types';
+import { ExplicitStatus, ImageRequest, LibraryItem } from '/@/shared/types/domain-types';

 const getUnloaderIcon = (itemType: LibraryItem) => {
    switch (itemType) {
@@ -54,10 +54,19 @@ const BaseItemImage = (
        type: props.type,
    });

+    const imageRequest = useItemImageRequest({
+        id: props.id,
+        imageUrl: src,
+        itemType: props.itemType,
+        serverId: serverId || undefined,
+        type: props.type,
+    });
+
    const isExplicit = blurExplicitImages && explicitStatus === ExplicitStatus.EXPLICIT;

    return (
        <BaseImage
+            imageRequest={imageRequest}
            isExplicit={isExplicit}
            src={imageUrl}
            unloaderIcon={getUnloaderIcon(props.itemType)}
@@ -113,6 +122,79 @@ export const useItemImageUrl = (args: UseItemImageUrlProps) => {
    }, [args.serverId, id, imageUrl, itemType, serverId, size, sizeByType, useRemoteUrl]);
 };

+export const useItemImageRequest = (args: UseItemImageUrlProps) => {
+    const { id, imageUrl, itemType, size, type, useRemoteUrl } = args;
+    const serverId = useCurrentServerId();
+
+    const imageRes = useImageRes();
+    const sizeByType: number | undefined = type ? imageRes[type] : undefined;
+
+    return useMemo(() => {
+        if (imageUrl) {
+            return {
+                cacheKey: imageUrl,
+                url: imageUrl,
+            } satisfies ImageRequest;
+        }
+
+        if (!id) {
+            return undefined;
+        }
+
+        const targetServerId = args.serverId || serverId;
+        let baseUrl: string | undefined;
+
+        if (useRemoteUrl) {
+            const server = getServerById(targetServerId);
+            baseUrl = server?.remoteUrl || server?.url;
+        }
+
+        return (
+            api.controller.getImageRequest({
+                apiClientProps: { serverId: targetServerId },
+                baseUrl,
+                query: { id, itemType, size: size ?? sizeByType },
+            }) || undefined
+        );
+    }, [args.serverId, id, imageUrl, itemType, serverId, size, sizeByType, useRemoteUrl]);
+};
+
+export function getItemImageRequest(args: UseItemImageUrlProps) {
+    const { id, imageUrl, itemType, size, type, useRemoteUrl } = args;
+    const authStore = useAuthStore.getState();
+    const currentServerId = authStore.currentServer?.id;
+    const serverId = (args.serverId || currentServerId) as string;
+
+    const imageRes = useSettingsStore.getState().general.imageRes;
+    const sizeByType: number | undefined = type ? imageRes[type] : undefined;
+
+    if (imageUrl) {
+        return {
+            cacheKey: imageUrl,
+            url: imageUrl,
+        } satisfies ImageRequest;
+    }
+
+    if (!id) {
+        return undefined;
+    }
+
+    let baseUrl: string | undefined;
+
+    if (useRemoteUrl) {
+        const server = getServerById(serverId);
+        baseUrl = server?.remoteUrl || server?.url;
+    }
+
+    return (
+        api.controller.getImageRequest({
+            apiClientProps: { serverId },
+            baseUrl,
+            query: { id, itemType, size: size ?? sizeByType },
+        }) || undefined
+    );
+}
+
 export function getItemImageUrl(args: UseItemImageUrlProps) {
    const { id, imageUrl, itemType, size, type, useRemoteUrl } = args;
    const authStore = useAuthStore.getState();
@@ -30,6 +30,7 @@ import {
 } from '/@/renderer/features/shared/components/list-config-menu';
 import {
    CLIENT_SIDE_ALBUM_FILTERS,
+    CLIENT_SIDE_SONG_FILTERS,
    ListSortByDropdownControlled,
 } from '/@/renderer/features/shared/components/list-sort-by-dropdown';
 import { ListSortOrderToggleButtonControlled } from '/@/renderer/features/shared/components/list-sort-order-toggle-button';
@@ -57,7 +58,7 @@ import {
    useSettingsStore,
 } from '/@/renderer/store/settings.store';
 import { sanitize } from '/@/renderer/utils/sanitize';
-import { sortAlbumList } from '/@/shared/api/utils';
+import { sortAlbumList, sortSongList } from '/@/shared/api/utils';
 import { ActionIcon, ActionIconGroup } from '/@/shared/components/action-icon/action-icon';
 import { Badge } from '/@/shared/components/badge/badge';
 import { Button } from '/@/shared/components/button/button';
@@ -86,6 +87,7 @@ import {
    RelatedArtist,
    ServerType,
    Song,
+    SongListSort,
    SortOrder,
 } from '/@/shared/types/domain-types';
 import { ItemListKey, ListDisplayType, Play } from '/@/shared/types/types';
@@ -615,6 +617,14 @@ const AlbumArtistMetadataFavoriteSongs = ({
    const { t } = useTranslation();
    const [searchTerm, setSearchTerm] = useState('');
    const [debouncedSearchTerm] = useDebouncedValue(searchTerm, 300);
+    const albumArtistDetailFavoriteSongsSort = useAppStore(
+        (state) => state.albumArtistDetailFavoriteSongsSort,
+    );
+    const setAlbumArtistDetailFavoriteSongsSort = useAppStore(
+        (state) => state.actions.setAlbumArtistDetailFavoriteSongsSort,
+    );
+    const sortBy = albumArtistDetailFavoriteSongsSort.sortBy;
+    const sortOrder = albumArtistDetailFavoriteSongsSort.sortOrder;
    const tableConfig = useSettingsStore((state) => state.lists[ItemListKey.SONG]?.table);
    const currentSong = usePlayerSong();
    const player = usePlayer();
@@ -639,8 +649,12 @@ const AlbumArtistMetadataFavoriteSongs = ({
    }, [tableConfig?.columns]);

    const filteredSongs = useMemo(() => {
-        return searchLibraryItems(songs, debouncedSearchTerm, LibraryItem.SONG);
-    }, [songs, debouncedSearchTerm]);
+        return sortSongList(
+            searchLibraryItems(songs, debouncedSearchTerm, LibraryItem.SONG),
+            sortBy,
+            sortOrder,
+        );
+    }, [songs, debouncedSearchTerm, sortBy, sortOrder]);

    const { handleColumnReordered } = useItemListColumnReorder({
        itemListKey: ItemListKey.SONG,
@@ -798,6 +812,26 @@ const AlbumArtistMetadataFavoriteSongs = ({
                                    }}
                                    value={searchTerm}
                                />
+                                <ListSortByDropdownControlled
+                                    filters={CLIENT_SIDE_SONG_FILTERS}
+                                    itemType={LibraryItem.SONG}
+                                    setSortBy={(value) =>
+                                        setAlbumArtistDetailFavoriteSongsSort(
+                                            value as SongListSort,
+                                            sortOrder,
+                                        )
+                                    }
+                                    sortBy={sortBy}
+                                />
+                                <ListSortOrderToggleButtonControlled
+                                    setSortOrder={(value) =>
+                                        setAlbumArtistDetailFavoriteSongsSort(
+                                            sortBy,
+                                            value as SortOrder,
+                                        )
+                                    }
+                                    sortOrder={sortOrder}
+                                />
                                <ListConfigMenu
                                    displayTypes={[
                                        { hidden: true, value: ListDisplayType.GRID },
@@ -192,10 +192,10 @@ export const AlbumArtistDetailHeader = forwardRef<HTMLDivElement, AlbumArtistDet

        return (
            <LibraryHeader
-                imageUrl={selectedImageUrl || alternateImageUrl}
+                imageUrl={alternateImageUrl || selectedImageUrl}
                item={{
                    imageId: detailQuery.data?.imageId,
-                    imageUrl: detailQuery.data?.imageUrl,
+                    imageUrl: alternateImageUrl || detailQuery.data?.imageUrl,
                    route: AppRoute.LIBRARY_ALBUM_ARTISTS,
                    type: LibraryItem.ALBUM_ARTIST,
                }}
@@ -65,6 +65,7 @@ const LoginRoute = () => {
    const serverType = window.SERVER_TYPE ? toServerType(window.SERVER_TYPE) : null;
    const serverName = window.SERVER_NAME || '';
    const serverUrl = window.SERVER_URL || '';
+    const remoteUrl = window.REMOTE_URL || '';
    const legacyAuth = serverLock && isLegacyAuth();

    const config = [
@@ -88,6 +89,11 @@ const LoginRoute = () => {
            key: 'SERVER_URL',
            value: serverUrl,
        },
+        {
+            isValid: remoteUrl !== '',
+            key: 'REMOTE_URL',
+            value: remoteUrl,
+        },
    ];

    const form = useForm({
@@ -150,6 +156,7 @@ const LoginRoute = () => {
            }

            const normalizedUrl = normalizeUrl(serverUrl);
+            const normalizedRemoteURL = normalizeUrl(remoteUrl);
            const existingServer =
                serverLock &&
                Object.values(serverList).find((s) => normalizeUrl(s.url) === normalizedUrl);
@@ -159,6 +166,7 @@ const LoginRoute = () => {
                id: nanoid(),
                isAdmin: data.isAdmin,
                name: serverName,
+                remoteUrl: normalizedRemoteURL,
                type: serverType as ServerType,
                url: normalizedUrl,
                userId: data.userId,
@@ -1,6 +1,6 @@
 import { closeAllModals, openModal } from '@mantine/modals';
 import clsx from 'clsx';
-import { forwardRef, ReactNode, Ref, useCallback, useState } from 'react';
+import { forwardRef, ReactNode, Ref, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';

@@ -64,13 +64,8 @@ export const LibraryHeader = forwardRef(
        ref: Ref<HTMLDivElement>,
    ) => {
        const { t } = useTranslation();
-        const [isImageError, setIsImageError] = useState<boolean | null>(false);
        const { blurExplicitImages } = useGeneralSettings();

-        const onImageError = () => {
-            setIsImageError(true);
-        };
-
        const itemTypeString = (): string => {
            switch (item.type) {
                case LibraryItem.ALBUM:
@@ -161,21 +156,18 @@ export const LibraryHeader = forwardRef(
                    style={{ cursor: 'pointer' }}
                    tabIndex={0}
                >
-                    {!isImageError && (
-                        <ItemImage
-                            className={styles.image}
-                            containerClassName={styles.image}
-                            enableDebounce={false}
-                            enableViewport={false}
-                            explicitStatus={item.explicitStatus ?? null}
-                            fetchPriority="high"
-                            id={item.imageId}
-                            itemType={item.type as LibraryItem}
-                            onError={onImageError}
-                            src={imageUrl || ''}
-                            type="header"
-                        />
-                    )}
+                    <ItemImage
+                        className={styles.image}
+                        containerClassName={styles.image}
+                        enableDebounce={false}
+                        enableViewport={false}
+                        explicitStatus={item.explicitStatus ?? null}
+                        fetchPriority="high"
+                        id={item.imageId}
+                        itemType={item.type as LibraryItem}
+                        src={imageUrl || ''}
+                        type="header"
+                    />
                </div>
                {title && (
                    <div className={styles.metadataSection}>
@@ -74,6 +74,7 @@ declare global {
        FS_PLAYBACK_TRANSCODE_ENABLED?: string;
        FS_PLAYBACK_WEB_AUDIO?: string;
        LEGACY_AUTHENTICATION?: boolean | string;
+        REMOTE_URL?: string;
        SERVER_LOCK?: boolean | string;
        SERVER_NAME?: string;
        SERVER_TYPE?: string;
@@ -6,11 +6,12 @@ import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { createWithEqualityFn } from 'zustand/traditional';

-import { AlbumListSort, SortOrder } from '/@/shared/types/domain-types';
+import { AlbumListSort, SongListSort, SortOrder } from '/@/shared/types/domain-types';
 import { Platform } from '/@/shared/types/types';

 export interface AppSlice extends AppState {
    actions: {
+        setAlbumArtistDetailFavoriteSongsSort: (sortBy: SongListSort, sortOrder: SortOrder) => void;
        setAlbumArtistDetailGroupingType: (groupingType: 'all' | 'primary') => void;
        setAlbumArtistDetailSort: (sortBy: AlbumListSort, sortOrder: SortOrder) => void;
        setAlbumArtistIdsMode: (mode: 'and' | 'or') => void;
@@ -30,6 +31,10 @@ export interface AppSlice extends AppState {
 }

 export interface AppState {
+    albumArtistDetailFavoriteSongsSort: {
+        sortBy: SongListSort;
+        sortOrder: SortOrder;
+    };
    albumArtistDetailSort: {
        groupingType: 'all' | 'primary';
        sortBy: AlbumListSort;
@@ -83,6 +88,14 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
        devtools(
            immer((set, get) => ({
                actions: {
+                    setAlbumArtistDetailFavoriteSongsSort: (sortBy, sortOrder) => {
+                        set((state) => {
+                            state.albumArtistDetailFavoriteSongsSort = {
+                                sortBy,
+                                sortOrder,
+                            };
+                        });
+                    },
                    setAlbumArtistDetailGroupingType: (groupingType) => {
                        set((state) => {
                            state.albumArtistDetailSort.groupingType = groupingType;
@@ -161,6 +174,10 @@ export const useAppStore = createWithEqualityFn<AppSlice>()(
                        });
                    },
                },
+                albumArtistDetailFavoriteSongsSort: {
+                    sortBy: SongListSort.ID,
+                    sortOrder: SortOrder.ASC,
+                },
                albumArtistDetailSort: {
                    groupingType: 'primary',
                    sortBy: AlbumListSort.RELEASE_DATE,
@@ -6,16 +6,19 @@ import {
    type ImgHTMLAttributes,
    memo,
    ReactNode,
-    useRef,
+    useEffect,
+    useMemo,
+    useState,
 } from 'react';
-import { Img } from 'react-image';

 import styles from './image.module.css';
+import { useNativeImage } from './use-native-image';

 import { AppIcon, Icon } from '/@/shared/components/icon/icon';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { useDebouncedValue } from '/@/shared/hooks/use-debounced-value';
 import { useInViewport } from '/@/shared/hooks/use-in-viewport';
+import { ImageRequest } from '/@/shared/types/domain-types';

 export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
    containerClassName?: string;
@@ -24,11 +27,11 @@ export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 's
    enableViewport?: boolean;
    fetchPriority?: 'auto' | 'high' | 'low';
    imageContainerProps?: Omit<ImageContainerProps, 'children'>;
+    imageRequest?: ImageRequest;
    includeLoader?: boolean;
    includeUnloader?: boolean;
    isExplicit?: boolean;
    src: string | undefined;
-    thumbHash?: string;
    unloaderIcon?: keyof typeof AppIcon;
 }

@@ -53,230 +56,62 @@ export function BaseImage({
    className,
    containerClassName,
    enableAnimation = false,
-    enableDebounce = true,
+    enableDebounce = false,
    enableViewport = true,
    fetchPriority,
    imageContainerProps,
+    imageRequest,
    includeLoader = true,
    includeUnloader = true,
    isExplicit = false,
+    onError,
+    onLoad,
    src,
    unloaderIcon = 'emptyImage',
    ...props
 }: ImageProps) {
-    if (enableDebounce) {
-        return (
-            <ImageWithDebounce
-                className={className}
-                containerClassName={containerClassName}
-                enableAnimation={enableAnimation}
-                enableViewport={enableViewport}
-                imageContainerProps={imageContainerProps}
-                includeLoader={includeLoader}
-                includeUnloader={includeUnloader}
-                isExplicit={isExplicit}
-                src={src}
-                unloaderIcon={unloaderIcon}
-                {...props}
-            />
-        );
-    }
-
-    if (enableViewport) {
-        return (
-            <ImageWithViewport
-                className={className}
-                containerClassName={containerClassName}
-                enableAnimation={enableAnimation}
-                imageContainerProps={imageContainerProps}
-                includeLoader={includeLoader}
-                includeUnloader={includeUnloader}
-                isExplicit={isExplicit}
-                src={src}
-                unloaderIcon={unloaderIcon}
-                {...props}
-            />
-        );
-    }
-
-    const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
-
-    return (
-        <ImageContainer
-            className={clsx(containerClassName, containerPropsClassName)}
-            isExplicit={isExplicit}
-            {...restContainerProps}
-        >
-            {src ? (
-                <Img
-                    className={clsx(styles.image, className, {
-                        [styles.animated]: enableAnimation,
-                    })}
-                    decoding="async"
-                    fetchPriority={fetchPriority}
-                    loader={includeLoader ? <ImageLoader className={className} /> : null}
-                    src={src}
-                    unloader={
-                        includeUnloader ? (
-                            <ImageUnloader className={className} icon={unloaderIcon} />
-                        ) : null
-                    }
-                    {...props}
-                />
-            ) : (
-                <ImageUnloader className={className} icon={unloaderIcon} />
-            )}
-        </ImageContainer>
-    );
-}
-
-function ImageWithDebounce({
-    className,
-    containerClassName,
-    enableAnimation,
-    enableViewport,
-    fetchPriority,
-    imageContainerProps,
-    includeLoader,
-    includeUnloader,
-    isExplicit = false,
-    src,
-    unloaderIcon,
-    ...props
-}: ImageProps) {
-    const [debouncedSrc] = useDebouncedValue(src, 100, { waitForInitial: true });
    const viewport = useInViewport();
    const { inViewport, ref } = enableViewport ? viewport : { inViewport: true, ref: undefined };
    const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};

-    const hasBeenInViewportRef = useRef(false);
-    const prevDebouncedSrcRef = useRef(debouncedSrc);
+    const rawImageRequest = useMemo(
+        () => imageRequest ?? (src ? { cacheKey: src, url: src } : undefined),
+        [imageRequest, src],
+    );
+    const [debouncedImageRequest] = useDebouncedValue(rawImageRequest, 100, {
+        waitForInitial: true,
+    });
+    const effectiveImageRequest = enableDebounce ? debouncedImageRequest : rawImageRequest;

-    const srcInDisplayedCache = isInDisplayedCache(src);
+    const [hasLoadedInInstance, setHasLoadedInInstance] = useState(false);

-    if (srcInDisplayedCache) {
-        hasBeenInViewportRef.current = true;
-    }
+    useEffect(() => {
+        setHasLoadedInInstance(false);
+    }, [effectiveImageRequest?.cacheKey]);

-    if (prevDebouncedSrcRef.current !== debouncedSrc) {
-        prevDebouncedSrcRef.current = debouncedSrc;
-        if (!srcInDisplayedCache) hasBeenInViewportRef.current = false;
-    }
+    const shouldLoadImage = Boolean(
+        effectiveImageRequest && (!enableViewport || inViewport || hasLoadedInInstance),
+    );

-    if (inViewport && debouncedSrc) {
-        hasBeenInViewportRef.current = true;
-    }
+    const nativeImage = useNativeImage({
+        enabled: shouldLoadImage,
+        fetchPriority,
+        onFetchError: src
+            ? () => {
+                  (onError as ((event: undefined) => void) | undefined)?.(undefined);
+              }
+            : undefined,
+        request: effectiveImageRequest,
+    });

-    const effectiveSrc = debouncedSrc ?? (srcInDisplayedCache ? src : undefined);
-    const shouldShowImage = enableViewport
-        ? (inViewport || hasBeenInViewportRef.current) && effectiveSrc
-        : effectiveSrc;
-
-    if (enableViewport) {
-        if (shouldShowImage && effectiveSrc) {
-            addToDisplayedCache(effectiveSrc);
+    useEffect(() => {
+        if (!nativeImage.isLoaded || !effectiveImageRequest?.cacheKey) {
+            return;
        }

-        return (
-            <ImageContainer
-                className={clsx(containerClassName, containerPropsClassName)}
-                isExplicit={isExplicit}
-                ref={ref}
-                {...restContainerProps}
-            >
-                {shouldShowImage && effectiveSrc ? (
-                    <Img
-                        className={clsx(styles.image, className, {
-                            [styles.animated]: enableAnimation,
-                        })}
-                        decoding="async"
-                        fetchPriority={fetchPriority}
-                        loader={includeLoader ? <ImageLoader className={className} /> : null}
-                        src={effectiveSrc}
-                        unloader={
-                            includeUnloader ? (
-                                <ImageUnloader className={className} icon={unloaderIcon} />
-                            ) : null
-                        }
-                        {...props}
-                    />
-                ) : !src ? (
-                    <ImageUnloader className={className} icon={unloaderIcon} />
-                ) : (
-                    <ImageLoader className={className} />
-                )}
-            </ImageContainer>
-        );
-    }
+        setHasLoadedInInstance(true);
+    }, [effectiveImageRequest?.cacheKey, nativeImage.isLoaded]);

-    if (effectiveSrc) addToDisplayedCache(effectiveSrc);
-    return (
-        <ImageContainer
-            className={clsx(containerClassName, containerPropsClassName)}
-            isExplicit={isExplicit}
-            {...restContainerProps}
-        >
-            {effectiveSrc ? (
-                <Img
-                    className={clsx(styles.image, className, {
-                        [styles.animated]: enableAnimation,
-                    })}
-                    decoding="async"
-                    fetchPriority={fetchPriority}
-                    loader={includeLoader ? <ImageLoader className={className} /> : null}
-                    src={effectiveSrc}
-                    unloader={
-                        includeUnloader ? (
-                            <ImageUnloader className={className} icon={unloaderIcon} />
-                        ) : null
-                    }
-                    {...props}
-                />
-            ) : !src ? (
-                <ImageUnloader className={className} icon={unloaderIcon} />
-            ) : (
-                <ImageLoader className={className} />
-            )}
-        </ImageContainer>
-    );
-}
-
-function ImageWithViewport({
-    className,
-    containerClassName,
-    enableAnimation,
-    fetchPriority,
-    imageContainerProps,
-    includeLoader,
-    includeUnloader,
-    isExplicit = false,
-    src,
-    unloaderIcon,
-    ...props
-}: ImageProps) {
-    const { inViewport, ref } = useInViewport();
-    const { className: containerPropsClassName, ...restContainerProps } = imageContainerProps || {};
-
-    const hasBeenInViewportRef = useRef(false);
-    const prevSrcRef = useRef(src);
-
-    const srcInDisplayedCache = isInDisplayedCache(src);
-    if (srcInDisplayedCache) {
-        hasBeenInViewportRef.current = true;
-    }
-
-    if (prevSrcRef.current !== src) {
-        prevSrcRef.current = src;
-        if (!srcInDisplayedCache) hasBeenInViewportRef.current = false;
-    }
-
-    if (inViewport && src) {
-        hasBeenInViewportRef.current = true;
-    }
-
-    const shouldShowImage = (inViewport || hasBeenInViewportRef.current) && src;
-
-    if (shouldShowImage && src) addToDisplayedCache(src);
    return (
        <ImageContainer
            className={clsx(containerClassName, containerPropsClassName)}
@@ -284,71 +119,31 @@ function ImageWithViewport({
            ref={ref}
            {...restContainerProps}
        >
-            {shouldShowImage ? (
-                <Img
+            {nativeImage.displaySrc ? (
+                <img
                    className={clsx(styles.image, className, {
                        [styles.animated]: enableAnimation,
                    })}
                    decoding="async"
                    fetchPriority={fetchPriority}
-                    loader={includeLoader ? <ImageLoader className={className} /> : null}
-                    src={src}
-                    unloader={
-                        includeUnloader ? (
-                            <ImageUnloader className={className} icon={unloaderIcon} />
-                        ) : null
-                    }
+                    onError={onError}
+                    onLoad={onLoad}
+                    src={nativeImage.displaySrc}
                    {...props}
                />
            ) : !src ? (
                <ImageUnloader className={className} icon={unloaderIcon} />
-            ) : (
+            ) : nativeImage.isError ? (
+                includeUnloader ? (
+                    <ImageUnloader className={className} icon={unloaderIcon} />
+                ) : null
+            ) : includeLoader ? (
                <ImageLoader className={className} />
-            )}
+            ) : null}
        </ImageContainer>
    );
 }

-const DISPLAYED_SRC_CACHE_KEY = 'feishin-displayed-src-cache';
-const MAX_DISPLAYED_SRC_CACHE = 500;
-
-function addToDisplayedCache(src: string | undefined) {
-    if (!src) return;
-    try {
-        const cache = getDisplayedSrcCache();
-        if (cache.includes(src)) {
-            return;
-        }
-
-        while (cache.length >= MAX_DISPLAYED_SRC_CACHE) {
-            cache.shift();
-        }
-
-        cache.push(src);
-        sessionStorage.setItem(DISPLAYED_SRC_CACHE_KEY, JSON.stringify(cache));
-    } catch {
-        // ignore error if sessionStorage is unavailable
-    }
-}
-
-function getDisplayedSrcCache(): string[] {
-    try {
-        const raw = sessionStorage.getItem(DISPLAYED_SRC_CACHE_KEY);
-        return raw ? (JSON.parse(raw) as string[]) : [];
-    } catch {
-        return [];
-    }
-}
-
-function isInDisplayedCache(src: string | undefined): boolean {
-    if (!src) return false;
-    try {
-        return getDisplayedSrcCache().includes(src);
-    } catch {
-        return false;
-    }
-}
-
 export const Image = memo(BaseImage);

 const ImageContainer = forwardRef(
@@ -0,0 +1,159 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { ImageRequest } from '/@/shared/types/domain-types';
+
+type FetchPriority = 'auto' | 'high' | 'low';
+
+interface NativeImageState {
+    displaySrc?: string;
+    status: 'error' | 'idle' | 'loaded' | 'loading';
+}
+
+interface UseNativeImageArgs {
+    enabled: boolean;
+    fetchPriority?: FetchPriority;
+    onFetchError?: () => void;
+    request?: ImageRequest | null;
+}
+
+export function useNativeImage({
+    enabled,
+    fetchPriority,
+    onFetchError,
+    request,
+}: UseNativeImageArgs) {
+    const abortControllerRef = useRef<AbortController | null>(null);
+    const loadedRequestSignatureRef = useRef<null | string>(null);
+    const objectUrlRef = useRef<null | string>(null);
+    const onFetchErrorRef = useRef(onFetchError);
+    const [state, setState] = useState<NativeImageState>({ status: 'idle' });
+
+    const requestSignature = useMemo(() => {
+        if (!request) {
+            return null;
+        }
+
+        return JSON.stringify({
+            cacheKey: request.cacheKey,
+            credentials: request.credentials,
+            headers: request.headers,
+            url: request.url,
+        });
+    }, [request]);
+
+    onFetchErrorRef.current = onFetchError;
+
+    useEffect(() => {
+        const abortCurrentRequest = () => {
+            abortControllerRef.current?.abort();
+            abortControllerRef.current = null;
+        };
+
+        const revokeObjectUrl = () => {
+            if (!objectUrlRef.current) {
+                return;
+            }
+
+            URL.revokeObjectURL(objectUrlRef.current);
+            objectUrlRef.current = null;
+            loadedRequestSignatureRef.current = null;
+        };
+
+        if (!request || !requestSignature) {
+            abortCurrentRequest();
+            revokeObjectUrl();
+            setState({ status: 'idle' });
+            return;
+        }
+
+        if (!enabled) {
+            abortCurrentRequest();
+            setState((currentState) =>
+                currentState.displaySrc
+                    ? { ...currentState, status: 'loaded' }
+                    : { status: 'idle' },
+            );
+            return;
+        }
+
+        if (loadedRequestSignatureRef.current === requestSignature && objectUrlRef.current) {
+            setState({ displaySrc: objectUrlRef.current, status: 'loaded' });
+            return;
+        }
+
+        abortCurrentRequest();
+        revokeObjectUrl();
+        setState({ status: 'loading' });
+
+        const abortController = new AbortController();
+        abortControllerRef.current = abortController;
+
+        void (async () => {
+            try {
+                const init = {
+                    credentials: request.credentials,
+                    headers: request.headers,
+                    signal: abortController.signal,
+                } as RequestInit & { priority?: FetchPriority };
+
+                if (fetchPriority) {
+                    init.priority = fetchPriority;
+                }
+
+                const response = await fetch(request.url, init);
+
+                if (!response.ok) {
+                    throw new Error(`Failed to load image: ${response.status}`);
+                }
+
+                const blob = await response.blob();
+
+                if (abortController.signal.aborted) {
+                    return;
+                }
+
+                const objectUrl = URL.createObjectURL(blob);
+                objectUrlRef.current = objectUrl;
+                loadedRequestSignatureRef.current = requestSignature;
+                setState({ displaySrc: objectUrl, status: 'loaded' });
+            } catch {
+                if (abortController.signal.aborted) {
+                    return;
+                }
+
+                revokeObjectUrl();
+                setState({ status: 'error' });
+                onFetchErrorRef.current?.();
+            } finally {
+                if (abortControllerRef.current === abortController) {
+                    abortControllerRef.current = null;
+                }
+            }
+        })();
+
+        return () => {
+            abortController.abort();
+
+            if (abortControllerRef.current === abortController) {
+                abortControllerRef.current = null;
+            }
+        };
+    }, [enabled, fetchPriority, request, requestSignature]);
+
+    useEffect(() => {
+        return () => {
+            abortControllerRef.current?.abort();
+
+            if (objectUrlRef.current) {
+                URL.revokeObjectURL(objectUrlRef.current);
+            }
+        };
+    }, []);
+
+    return {
+        displaySrc: state.displaySrc,
+        isError: state.status === 'error',
+        isLoaded: state.status === 'loaded',
+        isLoading: state.status === 'loading',
+    };
+}
@@ -25,7 +25,7 @@ export function BaseSkeleton({
    containerClassName,
    count = 1,
    direction = 'ltr',
-    enableAnimation = false,
+    enableAnimation = true,
    height,
    inline,
    isCentered,
@@ -1397,6 +1397,7 @@ export type ControllerEndpoint = {
    getDownloadUrl: (args: DownloadArgs) => string;
    getFolder: (args: FolderArgs) => Promise<FolderResponse>;
    getGenreList: (args: GenreListArgs) => Promise<GenreListResponse>;
+    getImageRequest: (args: ImageArgs) => ImageRequest | null;
    getImageUrl: (args: ImageArgs) => null | string;
    getInternetRadioStations: (
        args: GetInternetRadioStationsArgs,
@@ -1477,6 +1478,13 @@ export type ImageQuery = {
    size?: number;
 };

+export type ImageRequest = {
+    cacheKey: string;
+    credentials?: RequestCredentials;
+    headers?: Record<string, string>;
+    url: string;
+};
+
 export type InternalControllerEndpoint = {
    addToPlaylist: (
        args: ReplaceApiClientProps<AddToPlaylistArgs>,
@@ -1523,6 +1531,7 @@ export type InternalControllerEndpoint = {
    getDownloadUrl: (args: ReplaceApiClientProps<DownloadArgs>) => string;
    getFolder: (args: ReplaceApiClientProps<FolderArgs>) => Promise<FolderResponse>;
    getGenreList: (args: ReplaceApiClientProps<GenreListArgs>) => Promise<GenreListResponse>;
+    getImageRequest: (args: ReplaceApiClientProps<ImageArgs>) => ImageRequest | null;
    getImageUrl: (args: ReplaceApiClientProps<ImageArgs>) => null | string;
    getInternetRadioStations: (
        args: ReplaceApiClientProps<GetInternetRadioStationsArgs>,
Author	SHA1	Message	Date
jeffvli	ecda918b46	update to v1.8.0	2026-03-09 21:53:26 -07:00
Tarulia	93834788b5	use electron-builder's static AppImage runtime (#1816 ) electron-builder added compatibility with the AppImage Type2 runtime (i.e. FUSE-less runtime). However, this is - for now anyway - an opt-in feature, which this commit enables.	2026-03-09 21:52:48 -07:00
jeffvli	66e7b44d75	add client-side sort to artist favorite songs (#1691 )	2026-03-09 20:58:02 -07:00
jeffvli	8825fc1e84	unhide image on error on libraryheader	2026-03-09 20:49:02 -07:00
jeffvli	ac0cc19c04	prefer artistInfo artist image	2026-03-09 20:49:02 -07:00
jeffvli	de29465b1f	enable skeleton animations by default	2026-03-09 20:49:02 -07:00
jeffvli	31a201ca32	rewrite Image component - remove react-image dependency - use manual blob load - abort load when exiting viewport	2026-03-09 20:49:02 -07:00
Hosted Weblate	3644ea2969	Update translation files Updated by "Remove blank strings" hook in Weblate. Translated using Weblate Currently translated at 100.0% (1175 of 1175 strings) (Czech) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/cs/ Translated using Weblate Currently translated at 100.0% (1175 of 1175 strings) (Spanish) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/es/ Translated using Weblate Currently translated at 98.2% (1155 of 1175 strings) (French) Translate-URL: https://hosted.weblate.org/projects/feishin/translation/fr/ Co-authored-by: Fjuro <fjuro@users.noreply.hosted.weblate.org> Co-authored-by: Fordas <fordas15@gmail.com> Co-authored-by: Hosted Weblate <hosted@weblate.org> Co-authored-by: KosmoMoustache <kosmomoustache@users.noreply.hosted.weblate.org> Translate-URL: https://hosted.weblate.org/projects/feishin/translation/ Translation: feishin/Translation	2026-03-10 03:08:35 +01:00
ashe	e46c61e026	Remote URL hardcoding compatibility (#1810 ) * Remote URL compatibility --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>	2026-03-09 19:08:28 -07:00
Oliver Tzeng	3873218e94	fix translated zh-Hant and zh-Hans (#1807 )	2026-03-09 17:08:07 -07:00
Jeff	b4a61cbd6e	use ad-hoc code signing for macOS build, disable hardenedRuntime (#1815 )	2026-03-09 17:05:12 -07:00
jeffvli	accc6e53f0	bump electron-builder for pnpm v10.3 ( #1796 )	2026-03-09 12:54:32 -07:00
jeffvli	adf48decc4	run PR publish on electron-builder config changes	2026-03-09 09:52:42 -07:00