feat(api-server): send shuffle state over websocket (#3837)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

src/i18n/resources/ko.json

@@ -421,6 +421,19 @@
         }
       }
     },
+    "custom-output-device": {
+      "description": "미디어 출력 장치 구성",
+      "menu": {
+        "device-selector": "장치 선택"
+      },
+      "name": "출력 장치 커스텀",
+      "prompt": {
+        "device-selector": {
+          "label": "사용할 미디어 출력 장치를 선택하세요",
+          "title": "출력 장치 선택"
+        }
+      }
+    },
     "disable-autoplay": {
       "description": "노래를 '일시 정지' 모드로 시작하게 합니다",
       "menu": {
@@ -444,7 +457,15 @@
         "hide-duration-left": "남은 재생 시간 숨기기",
         "hide-github-button": "GitHub 링크 버튼 숨기기",
         "play-on-youtube-music": "유튜브 뮤직에서 재생",
-        "set-inactivity-timeout": "비활성 시간 제한 설정"
+        "set-inactivity-timeout": "비활성 시간 제한 설정",
+        "set-status-display-type": {
+          "label": "상태 텍스트",
+          "submenu": {
+            "artist": "{아티스트} 듣는 중",
+            "title": "{곡 제목} 듣는 중",
+            "youtube-music": "YouTube Music 듣는 중"
+          }
+        }
       },
       "name": "디스코드 활동 상태",
       "prompt": {
@@ -736,6 +757,7 @@
         "listenbrainz": {
           "token": "ListenBrainz 유저 토큰 입력"
         },
+        "scrobble-alternative-artist": "대체 아티스트 명 사용",
         "scrobble-alternative-title": "대체 제목 사용하기",
         "scrobble-other-media": "다른 미디어 스크로블하기"
       },
@@ -853,6 +875,27 @@
       "description": "macOS 사용자를 위한 TouchBar 위젯을 추가합니다",
       "name": "TouchBar"
     },
+    "transparent-player": {
+      "description": "애플리케이션 창을 투명하게 만듭니다",
+      "menu": {
+        "opacity": {
+          "label": "불투명도",
+          "submenu": {
+            "percent": "{{opacity}}%"
+          }
+        },
+        "type": {
+          "label": "종류",
+          "submenu": {
+            "acrylic": "아크릴",
+            "mica": "미카",
+            "none": "없음",
+            "tabbed": "탭"
+          }
+        }
+      },
+      "name": "투명 플레이어"
+    },
     "tuna-obs": {
       "description": "OBS의 확장인 Tuna와의 통합을 활성화합니다",
       "name": "Tuna OBS"

src/i18n/resources/ru.json

@@ -757,6 +757,7 @@
         "listenbrainz": {
           "token": "Введите токен пользователя ListenBrainz"
         },
+        "scrobble-alternative-artist": "Использовать альтернативных исполнителей",
         "scrobble-alternative-title": "Использовать альтернативные названия",
         "scrobble-other-media": "Скробблинг других медиа"
       },
@@ -874,6 +875,27 @@
       "description": "Добавляет виджет тачбара для пользователей macOS",
       "name": "Тачбар"
     },
+    "transparent-player": {
+      "description": "Делает окно приложения прозрачным",
+      "menu": {
+        "opacity": {
+          "label": "Непрозрачность",
+          "submenu": {
+            "percent": "{{opacity}}%"
+          }
+        },
+        "type": {
+          "label": "Тип",
+          "submenu": {
+            "acrylic": "Acrylic",
+            "mica": "Mica",
+            "none": "Отключено",
+            "tabbed": "Tabbed"
+          }
+        }
+      },
+      "name": "Прозрачный плеер"
+    },
     "tuna-obs": {
       "description": "Интеграция с плагином Tuna от OBS",
       "name": "Tuna OBS"

src/i18n/resources/tr.json

@@ -421,6 +421,19 @@
         }
       }
     },
+    "custom-output-device": {
+      "description": "Şarkılar için özel bir medya çıkış aygıtı ayarlayın",
+      "menu": {
+        "device-selector": "Aygıt Seçin"
+      },
+      "name": "Özel Çıkış Aygıtı",
+      "prompt": {
+        "device-selector": {
+          "label": "Kullanılacak medya çıkış aygıtını seçin",
+          "title": "Çıkış Aygıtını Seçin"
+        }
+      }
+    },
     "disable-autoplay": {
       "description": "Şarkıların otomatik olarak duraklatılmasını sağlar",
       "menu": {
@@ -444,7 +457,15 @@
         "hide-duration-left": "Kalan süreyi gizle",
         "hide-github-button": "GitHub bağlantısını gizle",
         "play-on-youtube-music": "YouTube Music de oynat",
-        "set-inactivity-timeout": "Hareketsizlik zaman aşımını ayarla"
+        "set-inactivity-timeout": "Hareketsizlik zaman aşımını ayarla",
+        "set-status-display-type": {
+          "label": "Durum metni",
+          "submenu": {
+            "artist": "{artist} Dinleniyor",
+            "title": "{song title} Dinleniyor",
+            "youtube-music": "YouTube Müzik Dinleniyor"
+          }
+        }
       },
       "name": "Discord Etkinlik Durumu",
       "prompt": {
@@ -736,6 +757,7 @@
         "listenbrainz": {
           "token": "ListenBrainz kullanıcı kimliğinizi girin"
         },
+        "scrobble-alternative-artist": "Alternatif sanatçıları kullan",
         "scrobble-alternative-title": "Alternatif başlıklar kullan",
         "scrobble-other-media": "Diğer medya ortamlarında listele"
       },
@@ -853,6 +875,27 @@
       "description": "macOS kullanıcıları için bir TouchBar widget'ı ekler",
       "name": "TouchBar"
     },
+    "transparent-player": {
+      "description": "Uygulama penceresini şeffaf yapar",
+      "menu": {
+        "opacity": {
+          "label": "Opaklık",
+          "submenu": {
+            "percent": "%{{opacity}}"
+          }
+        },
+        "type": {
+          "label": "Tür",
+          "submenu": {
+            "acrylic": "Akrilik",
+            "mica": "Mika",
+            "none": "Hiçbiri",
+            "tabbed": "Sekmeli"
+          }
+        }
+      },
+      "name": "Şeffaf Oynatıcı"
+    },
     "tuna-obs": {
       "description": "OBS eklentisi Tuna ile entegrasyon sağlar",
       "name": "Tuna OBS"

src/i18n/resources/vi.json

@@ -421,6 +421,19 @@
         }
       }
     },
+    "custom-output-device": {
+      "description": "Cài đặt cho thiết bị đầu ra tùy chỉnh cho bài hát",
+      "menu": {
+        "device-selector": "Chọn thiết bị"
+      },
+      "name": "Thiết bị đầu ra tùy chỉnh",
+      "prompt": {
+        "device-selector": {
+          "label": "Chọn thiết bị phát làm đầu ra để dùng",
+          "title": "Chọn thiết bị đầu ra"
+        }
+      }
+    },
     "disable-autoplay": {
       "description": "Làm nhạc bắt đầu ở chế độ \"tạm dừng\". Ngoài ra có thể dừng nhạc khi khởi động ứng dụng (nếu có bật tính năng \"Tiếp tục bài hát cuối cùng khi ứng dụng khởi động\")",
       "menu": {
@@ -444,9 +457,17 @@
         "hide-duration-left": "Ẩn thời lượng còn lại",
         "hide-github-button": "Ẩn nút liên kết GitHub",
         "play-on-youtube-music": "Phát trong Youtube Music",
-        "set-inactivity-timeout": "Đặt thời gian chờ không hoạt động"
+        "set-inactivity-timeout": "Đặt thời gian chờ không hoạt động",
+        "set-status-display-type": {
+          "label": "Văn bản trạng thái",
+          "submenu": {
+            "artist": "Đang nghe nhạc của {artist}",
+            "title": "Đang nghe nhạc {song title}",
+            "youtube-music": "Đang nghe Youtube Music"
+          }
+        }
       },
-      "name": "Discord Rich Presence",
+      "name": "Tích hợp trạng thái Discord",
       "prompt": {
         "set-inactivity-timeout": {
           "label": "Nhập thời gian chờ không hoạt động tính bằng giây:",
@@ -736,6 +757,7 @@
         "listenbrainz": {
           "token": "Nhập mã người dùng ListenBrainz"
         },
+        "scrobble-alternative-artist": "Dùng nghệ sĩ thay thế",
         "scrobble-alternative-title": "Dùng tiêu đề thay thế",
         "scrobble-other-media": "Scrobber nội dung khác"
       },
@@ -853,6 +875,27 @@
       "description": "Thêm tiện ích TouchBar cho người dùng macOS",
       "name": "TouchBar"
     },
+    "transparent-player": {
+      "description": "Làm cho cửa sổ ứng dụng có hiệu ứng trong suốt",
+      "menu": {
+        "opacity": {
+          "label": "Độ mờ",
+          "submenu": {
+            "percent": "{{opacity}}%"
+          }
+        },
+        "type": {
+          "label": "Kiểu nền",
+          "submenu": {
+            "acrylic": "Acrylic",
+            "mica": "Mica",
+            "none": "Không có",
+            "tabbed": "Tabbed"
+          }
+        }
+      },
+      "name": "Trình phát trong suốt"
+    },
     "tuna-obs": {
       "description": "Tích hợp với plugin Tuna của OBS",
       "name": "Tuna OBS"

src/i18n/resources/zh-CN.json

@@ -421,6 +421,19 @@
         }
       }
     },
+    "custom-output-device": {
+      "description": "配置歌曲的自定义输出媒体设备",
+      "menu": {
+        "device-selector": "选择设备"
+      },
+      "name": "自定义输出设备",
+      "prompt": {
+        "device-selector": {
+          "label": "选择要使用的输出媒体设备",
+          "title": "选择输出设备"
+        }
+      }
+    },
     "disable-autoplay": {
       "description": "让曲目开始时处于 “暂停” 模式",
       "menu": {
@@ -444,7 +457,15 @@
         "hide-duration-left": "隐藏剩余时长",
         "hide-github-button": "隐藏 GitHub 链接按钮",
         "play-on-youtube-music": "转至 YouTube Music 播放",
-        "set-inactivity-timeout": "设置非活跃时长"
+        "set-inactivity-timeout": "设置非活跃时长",
+        "set-status-display-type": {
+          "label": "状态文本",
+          "submenu": {
+            "artist": "在听 {artist}",
+            "title": "在听 {song title}",
+            "youtube-music": "在听 YouTube Music"
+          }
+        }
       },
       "name": "Discord Rich Presence 状态显示",
       "prompt": {
@@ -736,6 +757,7 @@
         "listenbrainz": {
           "token": "输入 ListenBrainz 用户令牌"
         },
+        "scrobble-alternative-artist": "使用替代艺术家",
         "scrobble-alternative-title": "使用替代标题",
         "scrobble-other-media": "记录其他媒体文件"
       },
@@ -853,6 +875,27 @@
       "description": "为 macOS 用户启用 TouchBar 支持",
       "name": "TouchBar"
     },
+    "transparent-player": {
+      "description": "把应用窗口变透明",
+      "menu": {
+        "opacity": {
+          "label": "不透明",
+          "submenu": {
+            "percent": "{{opacity}}%"
+          }
+        },
+        "type": {
+          "label": "类型",
+          "submenu": {
+            "acrylic": "亚克力",
+            "mica": "云母",
+            "none": "无",
+            "tabbed": "标签"
+          }
+        }
+      },
+      "name": "透明播放器"
+    },
     "tuna-obs": {
       "description": "与 OBS 的 Tuna 插件集成",
       "name": "Tuna OBS"

src/plugins/api-server/backend/main.ts

@@ -35,6 +35,7 @@ export const backend = createBackend<BackendType, APIServerConfig>({
       ctx.ipc.send('ytmd:setup-repeat-changed-listener');
       ctx.ipc.send('ytmd:setup-like-changed-listener');
       ctx.ipc.send('ytmd:setup-volume-changed-listener');
+      ctx.ipc.send('ytmd:setup-shuffle-changed-listener');
     });
 
     ctx.ipc.on(

src/plugins/api-server/backend/routes/websocket.ts

@@ -23,6 +23,7 @@ enum DataTypes {
   PositionChanged = 'POSITION_CHANGED',
   VolumeChanged = 'VOLUME_CHANGED',
   RepeatChanged = 'REPEAT_CHANGED',
+  ShuffleChanged = 'SHUFFLE_CHANGED',
 }
 
 type PlayerState = {
@@ -32,11 +33,13 @@ type PlayerState = {
   position: number;
   volume: number;
   repeat: RepeatMode;
+  shuffle: boolean;
 };
 
 export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
   let volumeState: VolumeState | undefined = undefined;
   let repeat: RepeatMode = 'NONE';
+  let shuffle = false;
   let lastSongInfo: SongInfo | undefined = undefined;
 
   const sockets = new Set<WSContext<WebSocket>>();
@@ -51,10 +54,12 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
     songInfo,
     volumeState,
     repeat,
+    shuffle,
   }: {
     songInfo?: SongInfo;
     volumeState?: VolumeState;
     repeat: RepeatMode;
+    shuffle: boolean;
   }): PlayerState => ({
     song: songInfo,
     isPlaying: songInfo ? !songInfo.isPaused : false,
@@ -62,6 +67,7 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
     position: songInfo?.elapsedSeconds ?? 0,
     volume: volumeState?.state ?? 100,
     repeat,
+    shuffle,
   });
 
   registerCallback((songInfo, event) => {
@@ -100,6 +106,11 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
     send(DataTypes.PositionChanged, { position: t });
   });
 
+  ipcMain.on('ytmd:shuffle-changed', (_, newShuffle: boolean) => {
+    shuffle = newShuffle;
+    send(DataTypes.ShuffleChanged, { shuffle });
+  });
+
   app.openapi(
     createRoute({
       method: 'get',
@@ -124,6 +135,7 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
               songInfo: lastSongInfo,
               volumeState,
               repeat,
+              shuffle,
             }),
           }),
         );

src/plugins/synced-lyrics/menu.ts

@@ -93,47 +93,23 @@ export const menu = async (
       toolTip: t('plugins.synced-lyrics.menu.default-text-string.tooltip'),
       type: 'submenu',
       submenu: [
-        {
-          label: '♪',
-          type: 'radio',
-          checked: config.defaultTextString === '♪',
-          click() {
-            ctx.setConfig({
-              defaultTextString: '♪',
-            });
-          },
+        { label: '♪', value: '♪' },
+        { label: '" "', value: ' ' },
+        { label: '...', value: ['.', '..', '...'] },
+        { label: '•••', value: ['•', '••', '•••'] },
+        { label: '———', value: '———' },
+      ].map(({ label, value }) => ({
+        label,
+        type: 'radio',
+        checked:
+          typeof value === 'string'
+            ? config.defaultTextString === value
+            : JSON.stringify(config.defaultTextString) ===
+              JSON.stringify(value),
+        click() {
+          ctx.setConfig({ defaultTextString: value });
         },
-        {
-          label: '" "',
-          type: 'radio',
-          checked: config.defaultTextString === ' ',
-          click() {
-            ctx.setConfig({
-              defaultTextString: ' ',
-            });
-          },
-        },
-        {
-          label: '...',
-          type: 'radio',
-          checked: config.defaultTextString === '...',
-          click() {
-            ctx.setConfig({
-              defaultTextString: '...',
-            });
-          },
-        },
-        {
-          label: '———',
-          type: 'radio',
-          checked: config.defaultTextString === '———',
-          click() {
-            ctx.setConfig({
-              defaultTextString: '———',
-            });
-          },
-        },
-      ],
+      })),
     },
     {
       label: t('plugins.synced-lyrics.menu.romanization.label'),

src/plugins/synced-lyrics/renderer/components/SyncedLine.tsx

@@ -1,10 +1,10 @@
-import { createEffect, createMemo, For, Show, createSignal } from 'solid-js';
+import { createEffect, For, Show, createSignal, createMemo } from 'solid-js';
 
 import { type VirtualizerHandle } from 'virtua/solid';
 
 import { type LineLyrics } from '@/plugins/synced-lyrics/types';
 
-import { config } from '../renderer';
+import { config, currentTime } from '../renderer';
 import { _ytAPI } from '..';
 
 import { canonicalize, romanize, simplifyUnicode } from '../utils';
@@ -17,37 +17,84 @@ interface SyncedLineProps {
   status: 'upcoming' | 'current' | 'previous';
 }
 
-export const SyncedLine = (props: SyncedLineProps) => {
-  const text = createMemo(() => {
-    if (!props.line.text.trim()) {
-      return config()?.defaultTextString ?? '';
-    }
-
-    return props.line.text;
+const EmptyLine = (props: SyncedLineProps) => {
+  const states = createMemo(() => {
+    const defaultText = config()?.defaultTextString ?? '';
+    return Array.isArray(defaultText) ? defaultText : [defaultText];
   });
 
-  const [romanization, setRomanization] = createSignal('');
+  const index = createMemo(() => {
+    const progress = currentTime() - props.line.timeInMs;
+    const total = props.line.duration;
 
+    const percentage = Math.min(1, progress / total);
+    return Math.max(0, Math.floor((states().length - 1) * percentage));
+  });
+
+  return (
+    <div
+      class={`synced-line ${props.status}`}
+      onClick={() => {
+        _ytAPI?.seekTo((props.line.timeInMs + 10) / 1000);
+      }}
+    >
+      <div class="description ytmusic-description-shelf-renderer" dir="auto">
+        <yt-formatted-string
+          text={{
+            runs: [
+              {
+                text: config()?.showTimeCodes ? `[${props.line.time}] ` : '',
+              },
+            ],
+          }}
+        />
+
+        <div class="text-lyrics">
+          <span>
+            <span>
+              <Show
+                fallback={
+                  <yt-formatted-string
+                    text={{ runs: [{ text: states()[0] }] }}
+                  />
+                }
+                when={states().length > 1}
+              >
+                <yt-formatted-string
+                  text={{
+                    runs: [
+                      {
+                        text: states().at(
+                          props.status === 'current' ? index() : -1,
+                        )!,
+                      },
+                    ],
+                  }}
+                />
+              </Show>
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const SyncedLine = (props: SyncedLineProps) => {
+  const text = createMemo(() => props.line.text.trim());
+
+  const [romanization, setRomanization] = createSignal('');
   createEffect(() => {
+    const input = canonicalize(text());
     if (!config()?.romanization) return;
 
-    const input = canonicalize(text());
     romanize(input).then((result) => {
       setRomanization(canonicalize(result));
     });
   });
 
   return (
-    <Show
-      fallback={
-        <yt-formatted-string
-          text={{
-            runs: [{ text: '' }],
-          }}
-        />
-      }
-      when={text()}
-    >
+    <Show fallback={<EmptyLine {...props} />} when={text()}>
       <div
         class={`synced-line ${props.status}`}
         onClick={() => {

src/plugins/synced-lyrics/types.ts

@@ -4,7 +4,7 @@ export type SyncedLyricsPluginConfig = {
   enabled: boolean;
   preciseTiming: boolean;
   showTimeCodes: boolean;
-  defaultTextString: string;
+  defaultTextString: string | string[];
   showLyricsEvenIfInexact: boolean;
   lineEffect: LineEffect;
   romanization: boolean;

src/providers/song-info-front.ts

@@ -145,6 +145,7 @@ export const setupShuffleChangedListener = singleton(() => {
 
   observer.observe(playerBar, {
     attributes: true,
+    attributeFilter: ['shuffle-on'],
     childList: false,
     subtree: false,
   });
@@ -168,6 +169,7 @@ export const setupFullScreenChangedListener = singleton(() => {
 
   observer.observe(playerBar, {
     attributes: true,
+    attributeFilter: ['player-fullscreened'],
     childList: false,
     subtree: false,
   });