feat(music-together): Add new plugin Music Together (#1562)

* feat(music-together): test `peerjs` * feat(music-together): replace `prompt` to `custom-electron-prompt` * fix(music-together): fix * test fix * wow * test * feat(music-together): improve `onStart` * fix: adblocker * fix(adblock): fix crash with `peerjs` * feat(music-together): add host UI * feat(music-together): implement addSong, removeSong, syncQueue * feat(music-together): inject panel * feat(music-together): redesign music together panel * feat(music-together): sync queue, profile * feat(music-together): sync progress, song, state * fix(music-together): fix some bug * fix(music-together): fix sync queue * feat(music-together): support i18n * feat(music-together): improve sync queue * feat(music-together): add profile in music item * refactor(music-together): refactor structure * feat(music-together): add permission * fix(music-together): fix queue sync bug * fix(music-together): fix some bugs * fix(music-together): fix permission not working on guest mode * fix(music-together): fix queue sync relate bugs * fix(music-together): fix automix items not append using music together * fix(music-together): fix * feat(music-together): improve video injection * fix(music-together): fix injection code * fix(music-together): fix broadcast guest * feat(music-together): add more permission * fix(music-together): fix injector * fix(music-together): fix guest add song logic * feat(music-together): add popup close listener * fix(music-together): fix connection issue * fix(music-together): fix connection issue 2 * feat(music-together): reserve playlist * fix(music-together): exclude automix songs * fix(music-together): fix playlist index sync bug * fix(music-together): fix connection failed error and sync index * fix(music-together): fix host set index bug * fix: apply fix from eslint * feat(util): add `ImageElementFromSrc` * chore(util): update jsdoc * feat(music-together): add owner name * chore(music-together): add translation * feat(music-together): add progress sync * chore(music-together): remove `console.log` --------- Co-authored-by: JellyBrick <shlee1503@naver.com>
2026-01-16 12:42:06 +00:00 · 2023-12-31 13:52:15 +09:00
parent 5f9b522307
commit ee0c512529
34 changed files with 2383 additions and 30 deletions
--- a/src/plugins/music-together/ui/status.ts
+++ b/src/plugins/music-together/ui/status.ts
@ -0,0 +1,82 @@
+import { ElementFromHtml } from '@/plugins/utils/renderer';
+import statusHTML from '../templates/status.html?raw';
+import { t } from '@/i18n';
+import type { Permission, Profile } from '../types';
+
+export const createStatus = () => {
+  const element = ElementFromHtml(statusHTML);
+  const icon = document.querySelector<HTMLImageElement>('ytmusic-settings-button > tp-yt-paper-icon-button > tp-yt-iron-icon#icon img');
+
+  const profile = element.querySelector<HTMLImageElement>('.music-together-profile')!;
+  const statusLabel = element.querySelector<HTMLSpanElement>('#music-together-status-label')!;
+  const permissionLabel = element.querySelector<HTMLSpanElement>('#music-together-permission-label')!;
+
+  profile.src = icon?.src ?? '';
+
+  const setStatus = (status: 'disconnected' | 'host' | 'guest') => {
+    if (status === 'disconnected') {
+      statusLabel.textContent = t('plugins.music-together.menu.status.disconnected');
+      statusLabel.style.color = 'rgba(255, 255, 255, 0.5)';
+    }
+
+    if (status === 'host') {
+      statusLabel.textContent = t('plugins.music-together.menu.status.host');
+      statusLabel.style.color = 'rgba(255, 0, 0, 1)';
+    }
+
+    if (status === 'guest') {
+      statusLabel.textContent = t('plugins.music-together.menu.status.guest');
+      statusLabel.style.color = 'rgba(255, 255, 255, 1)';
+    }
+  };
+
+  const setPermission = (permission: Permission) => {
+    if (permission === 'host-only') {
+      permissionLabel.textContent = t('plugins.music-together.menu.permission.host-only');
+      permissionLabel.style.color = 'rgba(255, 255, 255, 0.5)';
+    }
+
+    if (permission === 'playlist') {
+      permissionLabel.textContent = t('plugins.music-together.menu.permission.playlist');
+      permissionLabel.style.color = 'rgba(255, 255, 255, 0.75)';
+    }
+
+    if (permission === 'all') {
+      permissionLabel.textContent = t('plugins.music-together.menu.permission.all');
+      permissionLabel.style.color = 'rgba(255, 255, 255, 1)';
+    }
+  };
+
+  const setProfile = (src: string) => {
+    profile.src = src;
+  };
+
+  const setUsers = (users: Profile[]) => {
+    const container = element.querySelector<HTMLDivElement>('.music-together-user-container')!;
+    const empty = element.querySelector<HTMLElement>('.music-together-empty')!;
+    for (const child of Array.from(container.children)) {
+      if (child !== empty) child.remove();
+    }
+
+    if (users.length === 0) empty.style.display = 'block';
+    else empty.style.display = 'none';
+
+    for (const user of users) {
+      const img = document.createElement('img');
+      img.classList.add('music-together-profile');
+      img.src = user.thumbnail ?? '';
+      img.title = user.name;
+      img.alt = `${user.name} (${user.id})`;
+
+      container.append(img);
+    }
+  };
+
+  return {
+    element,
+    setStatus,
+    setUsers,
+    setProfile,
+    setPermission,
+  };
+};