mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 12:30:12 +02:00
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e6cfafc442 | |||
| 4e45e60e29 | |||
| ecda918b46 | |||
| 93834788b5 | |||
| 66e7b44d75 | |||
| 8825fc1e84 | |||
| ac0cc19c04 | |||
| de29465b1f | |||
| 31a201ca32 | |||
| 3644ea2969 | |||
| e46c61e026 | |||
| 3873218e94 | |||
| b4a61cbd6e | |||
| accc6e53f0 | |||
| adf48decc4 |
@@ -1,14 +1,17 @@
|
||||
name: Publish (PR)
|
||||
|
||||
on:
|
||||
workflow_dispatch:
|
||||
pull_request:
|
||||
branches:
|
||||
- development
|
||||
paths:
|
||||
- 'src/**'
|
||||
- 'electron-builder*.yml'
|
||||
|
||||
jobs:
|
||||
wait-for-lint:
|
||||
if: github.event_name == 'pull_request'
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Wait for Test workflow to complete
|
||||
@@ -22,6 +25,7 @@ jobs:
|
||||
|
||||
publish:
|
||||
needs: wait-for-lint
|
||||
if: always() && (needs.wait-for-lint.result == 'success' || needs.wait-for-lint.result == 'skipped')
|
||||
runs-on: ${{ matrix.os }}
|
||||
|
||||
strategy:
|
||||
|
||||
+1
-1
@@ -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:
|
||||
|
||||
@@ -32,18 +32,22 @@ nsis:
|
||||
|
||||
mac:
|
||||
target:
|
||||
target: default
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
- target: dmg
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
- target: zip
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
icon: assets/icons/icon.icns
|
||||
type: distribution
|
||||
hardenedRuntime: true
|
||||
entitlements: assets/entitlements.mac.plist
|
||||
entitlementsInherit: assets/entitlements.mac.plist
|
||||
hardenedRuntime: false
|
||||
identity: "-"
|
||||
gatekeeperAssess: false
|
||||
notarize: false
|
||||
|
||||
|
||||
dmg:
|
||||
contents: [{ x: 130, y: 220 }, { x: 410, y: 220, type: link, path: /Applications }]
|
||||
|
||||
@@ -56,6 +60,9 @@ linux:
|
||||
icon: assets/icons/icon.png
|
||||
artifactName: ${productName}-${os}-${arch}.${ext}
|
||||
|
||||
toolsets:
|
||||
appimage: "1.0.2"
|
||||
|
||||
npmRebuild: false
|
||||
|
||||
publish:
|
||||
|
||||
@@ -32,15 +32,18 @@ nsis:
|
||||
|
||||
mac:
|
||||
target:
|
||||
target: default
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
- target: dmg
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
- target: zip
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
icon: assets/icons/icon.icns
|
||||
type: distribution
|
||||
hardenedRuntime: true
|
||||
entitlements: assets/entitlements.mac.plist
|
||||
entitlementsInherit: assets/entitlements.mac.plist
|
||||
hardenedRuntime: false
|
||||
identity: "-"
|
||||
gatekeeperAssess: false
|
||||
notarize: false
|
||||
|
||||
@@ -56,6 +59,9 @@ linux:
|
||||
icon: assets/icons/icon.png
|
||||
artifactName: ${productName}-${os}-${arch}.${ext}
|
||||
|
||||
toolsets:
|
||||
appimage: "1.0.2"
|
||||
|
||||
npmRebuild: false
|
||||
publish:
|
||||
provider: github
|
||||
|
||||
+13
-7
@@ -32,15 +32,18 @@ nsis:
|
||||
|
||||
mac:
|
||||
target:
|
||||
target: default
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
- target: dmg
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
- target: zip
|
||||
arch:
|
||||
- arm64
|
||||
- x64
|
||||
icon: assets/icons/icon.icns
|
||||
type: distribution
|
||||
hardenedRuntime: true
|
||||
entitlements: assets/entitlements.mac.plist
|
||||
entitlementsInherit: assets/entitlements.mac.plist
|
||||
hardenedRuntime: false
|
||||
identity: "-"
|
||||
gatekeeperAssess: false
|
||||
notarize: false
|
||||
|
||||
@@ -56,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
-2
@@ -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",
|
||||
|
||||
Generated
-16
@@ -182,9 +182,6 @@ importers:
|
||||
react-icons:
|
||||
specifier: ^5.5.0
|
||||
version: 5.5.0(react@19.1.0)
|
||||
react-image:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0(@babel/runtime@7.28.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
react-player:
|
||||
specifier: ^2.16.0
|
||||
version: 2.16.0(react@19.1.0)
|
||||
@@ -4734,13 +4731,6 @@ packages:
|
||||
peerDependencies:
|
||||
react: '*'
|
||||
|
||||
react-image@4.1.0:
|
||||
resolution: {integrity: sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==}
|
||||
peerDependencies:
|
||||
'@babel/runtime': '>=7'
|
||||
react: '>=16.8'
|
||||
react-dom: '>=16.8'
|
||||
|
||||
react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
@@ -11094,12 +11084,6 @@ snapshots:
|
||||
dependencies:
|
||||
react: 19.1.0
|
||||
|
||||
react-image@4.1.0(@babel/runtime@7.28.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
|
||||
dependencies:
|
||||
'@babel/runtime': 7.28.4
|
||||
react: 19.1.0
|
||||
react-dom: 19.1.0(react@19.1.0)
|
||||
|
||||
react-is@16.13.1: {}
|
||||
|
||||
react-number-format@5.4.4(react-dom@19.1.0(react@19.1.0))(react@19.1.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": "垂直",
|
||||
|
||||
Vendored
+1
@@ -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}>
|
||||
|
||||
Vendored
+1
@@ -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>,
|
||||
|
||||
Reference in New Issue
Block a user