fix: Update changelog script in package.json

Currently translated at 100.0% (456 of 456 strings)

Translation: th-ch/youtube-music/i18n
Translate-URL: https://hosted.weblate.org/projects/youtube-music/i18n/ko/

electron.vite.config.mts

@@ -45,7 +45,7 @@ export default defineConfig({
           formats: ['es'],
         },
         outDir: 'dist/main',
-        rollupOptions: {
+        rolldownOptions: {
           external: ['electron', 'custom-electron-prompt', ...builtinModules],
           input: './src/index.ts',
         },
@@ -96,7 +96,7 @@ export default defineConfig({
         commonjsOptions: {
           ignoreDynamicRequires: true,
         },
-        rollupOptions: {
+        rolldownOptions: {
           external: ['electron', 'custom-electron-prompt', ...builtinModules],
           input: './src/preload.ts',
         },
@@ -149,7 +149,7 @@ export default defineConfig({
           name: 'renderer',
         },
         outDir: 'dist/renderer',
-        rollupOptions: {
+        rolldownOptions: {
           external: ['electron', ...builtinModules],
           input: './src/index.html',
         },

package.json

@@ -2,7 +2,7 @@
   "name": "youtube-music",
   "desktopName": "com.github.th_ch.youtube_music",
   "productName": "YouTube Music",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "YouTube Music Desktop App - including custom plugins",
   "main": "./dist/main/index.js",
   "type": "module",
@@ -20,8 +20,8 @@
     "vite:inspect": "pnpm clean && electron-vite build --mode development && pnpm exec serve .vite-inspect",
     "start": "pnpm electron-vite preview",
     "start:debug": "pnpm cross-env ELECTRON_ENABLE_LOGGING=1 pnpm start",
-    "dev": "pnpm cross-env NODE_OPTIONS=--enable-source-maps electron-vite dev --watch",
+    "dev": "pnpm cross-env NODE_ENV=development NODE_OPTIONS=--enable-source-maps electron-vite dev --watch",
-    "dev:renderer": "pnpm cross-env NODE_OPTIONS=--enable-source-maps electron-vite dev",
+    "dev:renderer": "pnpm cross-env NODE_ENV=development NODE_OPTIONS=--enable-source-maps electron-vite dev",
     "dev:debug": "pnpm cross-env ELECTRON_ENABLE_LOGGING=1 pnpm dev",
     "clean": "pnpm del-cli dist && pnpm del-cli pack && pnpm del-cli .vite-inspect",
     "dist": "pnpm clean && pnpm build && pnpm electron-builder --win --mac --linux -p never",
@@ -33,7 +33,7 @@
     "dist:win": "pnpm clean && pnpm build && pnpm electron-builder --win -p never",
     "dist:win:x64": "pnpm clean && pnpm build && pnpm electron-builder --win nsis-web:x64 -p never",
     "lint": "pnpm eslint ./src",
-    "changelog": "pnpm dlx --yes auto-changelog",
+    "changelog": "pnpm dlx auto-changelog",
     "release:linux": "pnpm clean && pnpm build && pnpm electron-builder --linux -p always -c.snap.publish=github",
     "release:mac": "pnpm clean && pnpm build && pnpm electron-builder --mac -p always",
     "release:win": "pnpm clean && pnpm build && pnpm electron-builder --win -p always",

src/i18n/resources/en.json

@@ -813,6 +813,14 @@
         "not-found": "⚠️ No lyrics found for this song."
       },
       "menu": {
+        "preferred-provider": {
+          "label": "Preferred Provider",
+          "tooltip": "Choose the default provider to use",
+          "none": {
+            "label": "None",
+            "tooltip": "No preferred provider"
+          }
+        },
         "default-text-string": {
           "label": "Default character between lyrics",
           "tooltip": "Choose the default character to use for the gap between lyrics"

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": "다른 미디어 스크로블하기"
       },
@@ -821,6 +843,14 @@
           "label": "가사를 최대한 정교하게 동기화",
           "tooltip": "다음 줄의 표시를 밀리초 단위로 계산합니다 (성능에 약간의 영향을 미칠 수 있음)"
         },
+        "preferred-provider": {
+          "label": "선호하는 가사 제공자",
+          "none": {
+            "label": "없음",
+            "tooltip": "선호하는 가사 제공자 없음"
+          },
+          "tooltip": "사용할 기본 가사 제공자를 선택하세요"
+        },
         "romanization": {
           "label": "가사 로마자 변환",
           "tooltip": "가사가 영어가 아닌 언어로 되어있는 경우, 로마자 표기를 표시합니다."
@@ -853,6 +883,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(
@@ -69,6 +70,7 @@ export const backend = createBackend<BackendType, APIServerConfig>({
   // Custom
   init(backendCtx) {
     this.app = new Hono();
+
     const ws = createNodeWebSocket({
       app: this.app,
     });
@@ -120,7 +122,7 @@ export const backend = createBackend<BackendType, APIServerConfig>({
       () => this.volumeState,
     );
     registerAuth(this.app, backendCtx);
-    registerWebsocket(this.app, ws);
+    registerWebsocket(this.app, backendCtx, ws);
 
     // swagger
     this.app.openAPIRegistry.registerComponent(

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

@@ -1,4 +1,3 @@
-import { ipcMain } from 'electron';
 import { createRoute } from '@hono/zod-openapi';
 
 import { type NodeWebSocket } from '@hono/node-ws';
@@ -15,6 +14,8 @@ import type { WSContext } from 'hono/ws';
 import type { Context, Next } from 'hono';
 import type { RepeatMode, VolumeState } from '@/types/datahost-get-state';
 import type { HonoApp } from '../types';
+import type { BackendContext } from '@/types/contexts';
+import type { APIServerConfig } from '@/plugins/api-server/config';
 
 enum DataTypes {
   PlayerInfo = 'PLAYER_INFO',
@@ -23,6 +24,7 @@ enum DataTypes {
   PositionChanged = 'POSITION_CHANGED',
   VolumeChanged = 'VOLUME_CHANGED',
   RepeatChanged = 'REPEAT_CHANGED',
+  ShuffleChanged = 'SHUFFLE_CHANGED',
 }
 
 type PlayerState = {
@@ -32,11 +34,17 @@ type PlayerState = {
   position: number;
   volume: number;
   repeat: RepeatMode;
+  shuffle: boolean;
 };
 
-export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
+export const register = (
+  app: HonoApp,
+  { ipc }: BackendContext<APIServerConfig>,
+  { upgradeWebSocket }: 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 +59,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 +72,7 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
     position: songInfo?.elapsedSeconds ?? 0,
     volume: volumeState?.state ?? 100,
     repeat,
+    shuffle,
   });
 
   registerCallback((songInfo, event) => {
@@ -83,7 +94,7 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
     lastSongInfo = { ...songInfo };
   });
 
-  ipcMain.on('ytmd:volume-changed', (_, newVolumeState: VolumeState) => {
+  ipc.on('ytmd:volume-changed', (newVolumeState: VolumeState) => {
     volumeState = newVolumeState;
     send(DataTypes.VolumeChanged, {
       volume: volumeState.state,
@@ -91,15 +102,20 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
     });
   });
 
-  ipcMain.on('ytmd:repeat-changed', (_, mode: RepeatMode) => {
+  ipc.on('ytmd:repeat-changed', (mode: RepeatMode) => {
     repeat = mode;
     send(DataTypes.RepeatChanged, { repeat });
   });
 
-  ipcMain.on('ytmd:seeked', (_, t: number) => {
+  ipc.on('ytmd:seeked', (t: number) => {
     send(DataTypes.PositionChanged, { position: t });
   });
 
+  ipc.on('ytmd:shuffle-changed', (newShuffle: boolean) => {
+    shuffle = newShuffle;
+    send(DataTypes.ShuffleChanged, { shuffle });
+  });
+
   app.openapi(
     createRoute({
       method: 'get',
@@ -112,7 +128,7 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
         },
       },
     }),
-    nodeWebSocket.upgradeWebSocket(() => ({
+    upgradeWebSocket(() => ({
       onOpen(_, ws) {
         // "Unsafe argument of type `WSContext<WebSocket>` assigned to a parameter of type `WSContext<WebSocket>`. (@typescript-eslint/no-unsafe-argument)" ????? what?
         sockets.add(ws as WSContext<WebSocket>);
@@ -124,6 +140,7 @@ export const register = (app: HonoApp, nodeWebSocket: NodeWebSocket) => {
               songInfo: lastSongInfo,
               volumeState,
               repeat,
+              shuffle,
             }),
           }),
         );

src/plugins/synced-lyrics/menu.ts

@@ -1,5 +1,7 @@
 import { t } from '@/i18n';
 
+import { providerNames } from './providers';
+
 import type { MenuItemConstructorOptions } from 'electron';
 import type { MenuContext } from '@/types/contexts';
 import type { SyncedLyricsPluginConfig } from './types';
@@ -10,6 +12,35 @@ export const menu = async (
   const config = await ctx.getConfig();
 
   return [
+    {
+      label: t('plugins.synced-lyrics.menu.preferred-provider.label'),
+      toolTip: t('plugins.synced-lyrics.menu.preferred-provider.tooltip'),
+      type: 'submenu',
+      submenu: [
+        {
+          label: t('plugins.synced-lyrics.menu.preferred-provider.none.label'),
+          toolTip: t(
+            'plugins.synced-lyrics.menu.preferred-provider.none.tooltip',
+          ),
+          type: 'radio',
+          checked: config.preferredProvider === undefined,
+          click() {
+            ctx.setConfig({ preferredProvider: undefined });
+          },
+        },
+        ...providerNames.map(
+          (provider) =>
+            ({
+              label: provider,
+              type: 'radio',
+              checked: config.preferredProvider === provider,
+              click() {
+                ctx.setConfig({ preferredProvider: provider });
+              },
+            }) as const,
+        ),
+      ],
+    },
     {
       label: t('plugins.synced-lyrics.menu.precise-timing.label'),
       toolTip: t('plugins.synced-lyrics.menu.precise-timing.tooltip'),
@@ -93,47 +124,23 @@ export const menu = async (
       toolTip: t('plugins.synced-lyrics.menu.default-text-string.tooltip'),
       type: 'submenu',
       submenu: [
-        {
+        { label: '♪', value: '♪' },
-          label: '♪',
+        { label: '" "', value: ' ' },
-          type: 'radio',
+        { label: '...', value: ['.', '..', '...'] },
-          checked: config.defaultTextString === '♪',
+        { label: '•••', value: ['•', '••', '•••'] },
-          click() {
+        { label: '———', value: '———' },
-            ctx.setConfig({
+      ].map(({ label, value }) => ({
-              defaultTextString: '♪',
+        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/providers/index.ts

@@ -1,191 +1,21 @@
-import { createStore } from 'solid-js/store';
+import * as z from 'zod';
 
-import { createMemo } from 'solid-js';
+import type { LyricResult } from '../types';
 
-import { LRCLib } from './LRCLib';
+export enum ProviderNames {
-import { LyricsGenius } from './LyricsGenius';
+  YTMusic = 'YTMusic',
-import { MusixMatch } from './MusixMatch';
+  LRCLib = 'LRCLib',
-import { YTMusic } from './YTMusic';
+  MusixMatch = 'MusixMatch',
+  LyricsGenius = 'LyricsGenius',
+  // Megalobiz = 'Megalobiz',
+}
 
-import { getSongInfo } from '@/providers/song-info-front';
+export const ProviderNameSchema = z.enum(ProviderNames);
-
+export type ProviderName = z.infer<typeof ProviderNameSchema>;
-import type { LyricProvider, LyricResult } from '../types';
+export const providerNames = ProviderNameSchema.options;
-import type { SongInfo } from '@/providers/song-info';
-
-export const providers = {
-  YTMusic: new YTMusic(),
-  LRCLib: new LRCLib(),
-  MusixMatch: new MusixMatch(),
-  LyricsGenius: new LyricsGenius(),
-  // Megalobiz: new Megalobiz(), // Disabled because it is too unstable and slow
-} as const;
-
-export type ProviderName = keyof typeof providers;
-export const providerNames = Object.keys(providers) as ProviderName[];
 
 export type ProviderState = {
   state: 'fetching' | 'done' | 'error';
   data: LyricResult | null;
   error: Error | null;
 };
-
-type LyricsStore = {
-  provider: ProviderName;
-  current: ProviderState;
-  lyrics: Record<ProviderName, ProviderState>;
-};
-
-const initialData = () =>
-  providerNames.reduce(
-    (acc, name) => {
-      acc[name] = { state: 'fetching', data: null, error: null };
-      return acc;
-    },
-    {} as LyricsStore['lyrics'],
-  );
-
-export const [lyricsStore, setLyricsStore] = createStore<LyricsStore>({
-  provider: providerNames[0],
-  lyrics: initialData(),
-  get current(): ProviderState {
-    return this.lyrics[this.provider];
-  },
-});
-
-export const currentLyrics = createMemo(() => {
-  const provider = lyricsStore.provider;
-  return lyricsStore.lyrics[provider];
-});
-
-type VideoId = string;
-
-type SearchCacheData = Record<ProviderName, ProviderState>;
-interface SearchCache {
-  state: 'loading' | 'done';
-  data: SearchCacheData;
-}
-
-// TODO: Maybe use localStorage for the cache.
-const searchCache = new Map<VideoId, SearchCache>();
-export const fetchLyrics = (info: SongInfo) => {
-  if (searchCache.has(info.videoId)) {
-    const cache = searchCache.get(info.videoId)!;
-
-    if (cache.state === 'loading') {
-      setTimeout(() => {
-        fetchLyrics(info);
-      });
-      return;
-    }
-
-    if (getSongInfo().videoId === info.videoId) {
-      setLyricsStore('lyrics', () => {
-        // weird bug with solid-js
-        return JSON.parse(JSON.stringify(cache.data)) as typeof cache.data;
-      });
-    }
-
-    return;
-  }
-
-  const cache: SearchCache = {
-    state: 'loading',
-    data: initialData(),
-  };
-
-  searchCache.set(info.videoId, cache);
-  if (getSongInfo().videoId === info.videoId) {
-    setLyricsStore('lyrics', () => {
-      // weird bug with solid-js
-      return JSON.parse(JSON.stringify(cache.data)) as typeof cache.data;
-    });
-  }
-
-  const tasks: Promise<void>[] = [];
-
-  // prettier-ignore
-  for (
-    const [providerName, provider] of Object.entries(providers) as [
-      ProviderName,
-      LyricProvider,
-    ][]
-  ) {
-    const pCache = cache.data[providerName];
-
-    tasks.push(
-      provider
-        .search(info)
-        .then((res) => {
-          pCache.state = 'done';
-          pCache.data = res;
-
-          if (getSongInfo().videoId === info.videoId) {
-            setLyricsStore('lyrics', (old) => {
-              return {
-                ...old,
-                [providerName]: {
-                  state: 'done',
-                  data: res ? { ...res } : null,
-                  error: null,
-                },
-              };
-            });
-          }
-        })
-        .catch((error: Error) => {
-          pCache.state = 'error';
-          pCache.error = error;
-
-          console.error(error);
-
-          if (getSongInfo().videoId === info.videoId) {
-            setLyricsStore('lyrics', (old) => {
-              return {
-                ...old,
-                [providerName]: { state: 'error', error, data: null },
-              };
-            });
-          }
-        }),
-    );
-  }
-
-  Promise.allSettled(tasks).then(() => {
-    cache.state = 'done';
-    searchCache.set(info.videoId, cache);
-  });
-};
-
-export const retrySearch = (provider: ProviderName, info: SongInfo) => {
-  setLyricsStore('lyrics', (old) => {
-    const pCache = {
-      state: 'fetching',
-      data: null,
-      error: null,
-    };
-
-    return {
-      ...old,
-      [provider]: pCache,
-    };
-  });
-
-  providers[provider]
-    .search(info)
-    .then((res) => {
-      setLyricsStore('lyrics', (old) => {
-        return {
-          ...old,
-          [provider]: { state: 'done', data: res, error: null },
-        };
-      });
-    })
-    .catch((error) => {
-      setLyricsStore('lyrics', (old) => {
-        return {
-          ...old,
-          [provider]: { state: 'error', data: null, error },
-        };
-      });
-    });
-};

src/plugins/synced-lyrics/providers/renderer.ts

@@ -0,0 +1,13 @@
+import { ProviderNames } from './index';
+import { YTMusic } from './YTMusic';
+import { LRCLib } from './LRCLib';
+import { MusixMatch } from './MusixMatch';
+import { LyricsGenius } from './LyricsGenius';
+
+export const providers = {
+  [ProviderNames.YTMusic]: new YTMusic(),
+  [ProviderNames.LRCLib]: new LRCLib(),
+  [ProviderNames.MusixMatch]: new MusixMatch(),
+  [ProviderNames.LyricsGenius]: new LyricsGenius(),
+  // [ProviderNames.Megalobiz]: new Megalobiz(), // Disabled because it is too unstable and slow
+} as const;

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

@@ -2,7 +2,7 @@ import { t } from '@/i18n';
 
 import { getSongInfo } from '@/providers/song-info-front';
 
-import { lyricsStore, retrySearch } from '../../providers';
+import { lyricsStore, retrySearch } from '../store';
 
 interface ErrorDisplayProps {
   error: Error;

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

@@ -11,18 +11,24 @@ import {
   Switch,
 } from 'solid-js';
 
+import * as z from 'zod';
+
 import {
-  currentLyrics,
-  lyricsStore,
   type ProviderName,
   providerNames,
+  ProviderNameSchema,
   type ProviderState,
-  setLyricsStore,
 } from '../../providers';
-
+import { currentLyrics, lyricsStore, setLyricsStore } from '../store';
 import { _ytAPI } from '../index';
+import { config } from '../renderer';
 
 import type { YtIcons } from '@/types/icons';
+import type { PlayerAPIEvents } from '@/types/player-api-events';
+
+const LocalStorageSchema = z.object({
+  provider: ProviderNameSchema,
+});
 
 export const providerIdx = createMemo(() =>
   providerNames.indexOf(lyricsStore.provider),
@@ -45,11 +51,19 @@ const providerBias = (p: ProviderName) =>
   (lyricsStore.lyrics[p].data?.lyrics ? 1 : -1);
 
 const pickBestProvider = () => {
+  const preferred = config()?.preferredProvider;
+  if (preferred) {
+    const data = lyricsStore.lyrics[preferred].data;
+    if (Array.isArray(data?.lines) || data?.lyrics) {
+      return { provider: preferred, force: true };
+    }
+  }
+
   const providers = Array.from(providerNames);
 
   providers.sort((a, b) => providerBias(b) - providerBias(a));
 
-  return providers[0];
+  return { provider: providers[0], force: false };
 };
 
 const [hasManuallySwitchedProvider, setHasManuallySwitchedProvider] =
@@ -58,34 +72,91 @@ const [hasManuallySwitchedProvider, setHasManuallySwitchedProvider] =
 export const LyricsPicker = (props: {
   setStickRef: Setter<HTMLElement | null>;
 }) => {
+  const [videoId, setVideoId] = createSignal<string | null>(null);
+  const [starredProvider, setStarredProvider] =
+    createSignal<ProviderName | null>(null);
+
+  createEffect(() => {
+    const id = videoId();
+    if (id === null) {
+      setStarredProvider(null);
+      return;
+    }
+
+    const key = `ytmd-sl-starred-${id}`;
+    const value = localStorage.getItem(key);
+    if (!value) {
+      setStarredProvider(null);
+      return;
+    }
+
+    const parseResult = LocalStorageSchema.safeParse(JSON.parse(value));
+    if (parseResult.success) {
+      setLyricsStore('provider', parseResult.data.provider);
+      setStarredProvider(parseResult.data.provider);
+    } else {
+      setStarredProvider(null);
+    }
+  });
+
+  const toggleStar = () => {
+    const id = videoId();
+    if (id === null) return;
+
+    const key = `ytmd-sl-starred-${id}`;
+
+    setStarredProvider((starredProvider) => {
+      if (lyricsStore.provider === starredProvider) {
+        localStorage.removeItem(key);
+        return null;
+      }
+
+      const provider = lyricsStore.provider;
+      localStorage.setItem(key, JSON.stringify({ provider }));
+
+      return provider;
+    });
+  };
+
+  const videoDataChangeHandler = (
+    name: string,
+    { videoId }: PlayerAPIEvents['videodatachange']['value'],
+  ) => {
+    setVideoId(videoId);
+
+    if (name !== 'dataloaded') return;
+    setHasManuallySwitchedProvider(false);
+  };
+
+  // prettier-ignore
+  {
+    onMount(() => _ytAPI?.addEventListener('videodatachange', videoDataChangeHandler));
+    onCleanup(() => _ytAPI?.removeEventListener('videodatachange', videoDataChangeHandler));
+  }
+
   createEffect(() => {
-    // fallback to the next source, if the current one has an error
     if (!hasManuallySwitchedProvider()) {
-      const bestProvider = pickBestProvider();
+      const starred = starredProvider();
+      if (starred !== null) {
+        setLyricsStore('provider', starred);
+        return;
+      }
 
       const allProvidersFailed = providerNames.every((p) =>
         shouldSwitchProvider(lyricsStore.lyrics[p]),
       );
       if (allProvidersFailed) return;
 
-      if (providerBias(lyricsStore.provider) < providerBias(bestProvider)) {
+      const { provider, force } = pickBestProvider();
-        setLyricsStore('provider', bestProvider);
+      if (
+        force ||
+        providerBias(lyricsStore.provider) < providerBias(provider)
+      ) {
+        setLyricsStore('provider', provider);
       }
     }
   });
 
-  onMount(() => {
-    const videoDataChangeHandler = (name: string) => {
-      if (name !== 'dataloaded') return;
-      setHasManuallySwitchedProvider(false);
-    };
-
-    _ytAPI?.addEventListener('videodatachange', videoDataChangeHandler);
-    onCleanup(() =>
-      _ytAPI?.removeEventListener('videodatachange', videoDataChangeHandler),
-    );
-  });
-
   const next = () => {
     setHasManuallySwitchedProvider(true);
     setLyricsStore('provider', (prevProvider) => {
@@ -176,9 +247,9 @@ export const LyricsPicker = (props: {
                     />
                   </Match>
                   <Match when={currentLyrics().state === 'error'}>
-                    <yt-icon-button
+                    <yt-icon
                       icon={errorIcon}
-                      style={{ padding: '5px', transform: 'scale(0.5)' }}
+                      style={{ padding: '5px', transform: 'scale(0.8)' }}
                       tabindex="-1"
                     />
                   </Match>
@@ -189,9 +260,9 @@ export const LyricsPicker = (props: {
                         currentLyrics().data?.lyrics)
                     }
                   >
-                    <yt-icon-button
+                    <yt-icon
                       icon={successIcon}
-                      style={{ padding: '5px', transform: 'scale(0.5)' }}
+                      style={{ padding: '5px', transform: 'scale(0.8)' }}
                       tabindex="-1"
                     />
                   </Match>
@@ -202,9 +273,9 @@ export const LyricsPicker = (props: {
                       !currentLyrics().data?.lyrics
                     }
                   >
-                    <yt-icon-button
+                    <yt-icon
                       icon={notFoundIcon}
-                      style={{ padding: '5px', transform: 'scale(0.5)' }}
+                      style={{ padding: '5px', transform: 'scale(0.8)' }}
                       tabindex="-1"
                     />
                   </Match>
@@ -213,6 +284,20 @@ export const LyricsPicker = (props: {
                   class="description ytmusic-description-shelf-renderer"
                   text={{ runs: [{ text: provider() }] }}
                 />
+                <yt-icon
+                  icon={
+                    starredProvider() === provider()
+                      ? 'yt-sys-icons:star-filled'
+                      : 'yt-sys-icons:star'
+                  }
+                  onClick={toggleStar}
+                  style={{
+                    padding: '5px',
+                    transform: 'scale(0.8)',
+                    cursor: 'pointer',
+                  }}
+                  tabindex="-1"
+                />
               </div>
             )}
           </Index>

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 EmptyLine = (props: SyncedLineProps) => {
-  const text = createMemo(() => {
+  const states = createMemo(() => {
-    if (!props.line.text.trim()) {
+    const defaultText = config()?.defaultTextString ?? '';
-      return config()?.defaultTextString ?? '';
+    return Array.isArray(defaultText) ? defaultText : [defaultText];
-    }
-
-    return props.line.text;
   });
 
-  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
+    <Show fallback={<EmptyLine {...props} />} when={text()}>
-      fallback={
-        <yt-formatted-string
-          text={{
-            runs: [{ text: '' }],
-          }}
-        />
-      }
-      when={text()}
-    >
       <div
         class={`synced-line ${props.status}`}
         onClick={() => {

src/plugins/synced-lyrics/renderer/index.ts

@@ -3,8 +3,7 @@ import { waitForElement } from '@/utils/wait-for-element';
 
 import { selectors, tabStates } from './utils';
 import { setConfig, setCurrentTime } from './renderer';
-
+import { fetchLyrics } from './store';
-import { fetchLyrics } from '../providers';
 
 import type { RendererContext } from '@/types/contexts';
 import type { YoutubePlayer } from '@/types/youtube-player';

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

@@ -20,7 +20,7 @@ import {
   PlainLyrics,
 } from './components';
 
-import { currentLyrics } from '../providers';
+import { currentLyrics } from './store';
 
 import type { LineLyrics, SyncedLyricsPluginConfig } from '../types';
 

src/plugins/synced-lyrics/renderer/store.ts

@@ -0,0 +1,175 @@
+import { createStore } from 'solid-js/store';
+import { createMemo } from 'solid-js';
+
+import { getSongInfo } from '@/providers/song-info-front';
+
+import {
+  type ProviderName,
+  providerNames,
+  type ProviderState,
+} from '../providers';
+import { providers } from '../providers/renderer';
+
+import type { LyricProvider } from '../types';
+import type { SongInfo } from '@/providers/song-info';
+
+type LyricsStore = {
+  provider: ProviderName;
+  current: ProviderState;
+  lyrics: Record<ProviderName, ProviderState>;
+};
+
+const initialData = () =>
+  providerNames.reduce(
+    (acc, name) => {
+      acc[name] = { state: 'fetching', data: null, error: null };
+      return acc;
+    },
+    {} as LyricsStore['lyrics'],
+  );
+
+export const [lyricsStore, setLyricsStore] = createStore<LyricsStore>({
+  provider: providerNames[0],
+  lyrics: initialData(),
+  get current(): ProviderState {
+    return this.lyrics[this.provider];
+  },
+});
+
+export const currentLyrics = createMemo(() => {
+  const provider = lyricsStore.provider;
+  return lyricsStore.lyrics[provider];
+});
+
+type VideoId = string;
+
+type SearchCacheData = Record<ProviderName, ProviderState>;
+interface SearchCache {
+  state: 'loading' | 'done';
+  data: SearchCacheData;
+}
+
+// TODO: Maybe use localStorage for the cache.
+const searchCache = new Map<VideoId, SearchCache>();
+export const fetchLyrics = (info: SongInfo) => {
+  if (searchCache.has(info.videoId)) {
+    const cache = searchCache.get(info.videoId)!;
+
+    if (cache.state === 'loading') {
+      setTimeout(() => {
+        fetchLyrics(info);
+      });
+      return;
+    }
+
+    if (getSongInfo().videoId === info.videoId) {
+      setLyricsStore('lyrics', () => {
+        // weird bug with solid-js
+        return JSON.parse(JSON.stringify(cache.data)) as typeof cache.data;
+      });
+    }
+
+    return;
+  }
+
+  const cache: SearchCache = {
+    state: 'loading',
+    data: initialData(),
+  };
+
+  searchCache.set(info.videoId, cache);
+  if (getSongInfo().videoId === info.videoId) {
+    setLyricsStore('lyrics', () => {
+      // weird bug with solid-js
+      return JSON.parse(JSON.stringify(cache.data)) as typeof cache.data;
+    });
+  }
+
+  const tasks: Promise<void>[] = [];
+
+  // prettier-ignore
+  for (
+    const [providerName, provider] of Object.entries(providers) as [
+    ProviderName,
+    LyricProvider,
+  ][]
+    ) {
+    const pCache = cache.data[providerName];
+
+    tasks.push(
+      provider
+        .search(info)
+        .then((res) => {
+          pCache.state = 'done';
+          pCache.data = res;
+
+          if (getSongInfo().videoId === info.videoId) {
+            setLyricsStore('lyrics', (old) => {
+              return {
+                ...old,
+                [providerName]: {
+                  state: 'done',
+                  data: res ? { ...res } : null,
+                  error: null,
+                },
+              };
+            });
+          }
+        })
+        .catch((error: Error) => {
+          pCache.state = 'error';
+          pCache.error = error;
+
+          console.error(error);
+
+          if (getSongInfo().videoId === info.videoId) {
+            setLyricsStore('lyrics', (old) => {
+              return {
+                ...old,
+                [providerName]: { state: 'error', error, data: null },
+              };
+            });
+          }
+        }),
+    );
+  }
+
+  Promise.allSettled(tasks).then(() => {
+    cache.state = 'done';
+    searchCache.set(info.videoId, cache);
+  });
+};
+
+export const retrySearch = (provider: ProviderName, info: SongInfo) => {
+  setLyricsStore('lyrics', (old) => {
+    const pCache = {
+      state: 'fetching',
+      data: null,
+      error: null,
+    };
+
+    return {
+      ...old,
+      [provider]: pCache,
+    };
+  });
+
+  providers[provider]
+    .search(info)
+    .then((res) => {
+      setLyricsStore('lyrics', (old) => {
+        return {
+          ...old,
+          [provider]: { state: 'done', data: res, error: null },
+        };
+      });
+    })
+    .catch((error) => {
+      setLyricsStore('lyrics', (old) => {
+        return {
+          ...old,
+          [provider]: { state: 'error', data: null, error },
+        };
+      });
+    });
+};

src/plugins/synced-lyrics/types.ts

@@ -1,10 +1,12 @@
 import type { SongInfo } from '@/providers/song-info';
+import type { ProviderName } from './providers';
 
 export type SyncedLyricsPluginConfig = {
   enabled: boolean;
+  preferredProvider?: ProviderName;
   preciseTiming: boolean;
   showTimeCodes: boolean;
-  defaultTextString: string;
+  defaultTextString: string | string[];
   showLyricsEvenIfInexact: boolean;
   lineEffect: LineEffect;
   romanization: boolean;

src/plugins/transparent-player/index.ts

@@ -20,7 +20,7 @@ const typeList = Object.values(MaterialType);
 export default createPlugin({
   name: () => t('plugins.transparent-player.name'),
   description: () => t('plugins.transparent-player.description'),
-  addedVersion: '3.10.x',
+  addedVersion: '3.11.x',
   restartNeeded: true,
   platform: Platform.Windows,
   config: defaultConfig,

src/providers/song-info-front.ts

@@ -12,6 +12,8 @@ import type {
 import type { SongInfo } from './song-info';
 import type { VideoDataChanged } from '@/types/video-data-changed';
 
+const DATAUPDATED_FALLBACK_TIMEOUT_MS = 1500;
+
 let songInfo: SongInfo = {} as SongInfo;
 export const getSongInfo = () => songInfo;
 
@@ -145,6 +147,7 @@ export const setupShuffleChangedListener = singleton(() => {
 
   observer.observe(playerBar, {
     attributes: true,
+    attributeFilter: ['shuffle-on'],
     childList: false,
     subtree: false,
   });
@@ -168,6 +171,7 @@ export const setupFullScreenChangedListener = singleton(() => {
 
   observer.observe(playerBar, {
     attributes: true,
+    attributeFilter: ['player-fullscreened'],
     childList: false,
     subtree: false,
   });
@@ -251,12 +255,25 @@ export const setupSongInfo = (api: YoutubePlayer) => {
     );
 
   const waitingEvent = new Set<string>();
+  const waitingTimeouts = new Map<string, NodeJS.Timeout>();
+
+  const clearVideoTimeout = (videoId: string) => {
+    const timeoutId = waitingTimeouts.get(videoId);
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      waitingTimeouts.delete(videoId);
+    }
+  };
+
   // Name = "dataloaded" and abit later "dataupdated"
+  // Sometimes "dataupdated" is not fired, so we need to fallback to "dataloaded"
   api.addEventListener('videodatachange', (name, videoData) => {
     videoEventDispatcher(name, videoData);
 
     if (name === 'dataupdated' && waitingEvent.has(videoData.videoId)) {
       waitingEvent.delete(videoData.videoId);
+      clearVideoTimeout(videoData.videoId);
       sendSongInfo(videoData);
     } else if (name === 'dataloaded') {
       const video = document.querySelector<HTMLVideoElement>('video');
@@ -267,7 +284,18 @@ export const setupSongInfo = (api: YoutubePlayer) => {
         video?.addEventListener(status, playPausedHandlers[status]);
       }
 
+      clearVideoTimeout(videoData.videoId);
       waitingEvent.add(videoData.videoId);
+
+      const timeoutId = setTimeout(() => {
+        if (waitingEvent.has(videoData.videoId)) {
+          waitingEvent.delete(videoData.videoId);
+          waitingTimeouts.delete(videoData.videoId);
+          sendSongInfo(videoData);
+        }
+      }, DATAUPDATED_FALLBACK_TIMEOUT_MS);
+
+      waitingTimeouts.set(videoData.videoId, timeoutId);
     }
   });
 

src/yt-web-components.d.ts

@@ -48,8 +48,8 @@ declare module 'solid-js' {
       'tp-yt-paper-icon-button': ComponentProps<'div'> &
         TpYtPaperIconButtonProps;
       'yt-icon-button': ComponentProps<'div'> & TpYtPaperIconButtonProps;
-      'tp-yt-iron-icon': ComponentProps<'div'>;
+      'tp-yt-iron-icon': ComponentProps<'div'> & TpYtPaperIconButtonProps;
-      'yt-icon': ComponentProps<'div'>;
+      'yt-icon': ComponentProps<'div'> & TpYtPaperIconButtonProps;
       // input type="range" slider component
       'tp-yt-paper-slider': ComponentProps<'input'> & {
         'value'?: number | string;