From b8e0d53ef3c67b2c255e4d00b242c01a31823806 Mon Sep 17 00:00:00 2001 From: Su-Yong Date: Sun, 12 Oct 2025 14:34:36 +0900 Subject: [PATCH] chore: improve readability 2 --- .../music-together/templates/status.html | 10 +-- src/providers/song-info-front.ts | 63 ++++++++++--------- src/renderer.ts | 14 ++--- src/types/player-api-events.ts | 2 +- src/utils/custom-element.ts | 2 +- src/yt-web-components.d.ts | 4 +- 6 files changed, 48 insertions(+), 47 deletions(-) diff --git a/src/plugins/music-together/templates/status.html b/src/plugins/music-together/templates/status.html index c273930b..99e3df68 100644 --- a/src/plugins/music-together/templates/status.html +++ b/src/plugins/music-together/templates/status.html @@ -2,22 +2,22 @@
Profile Image
- + - + - +
- +
- +
diff --git a/src/providers/song-info-front.ts b/src/providers/song-info-front.ts index c7cc69ce..14f4d4af 100644 --- a/src/providers/song-info-front.ts +++ b/src/providers/song-info-front.ts @@ -6,7 +6,7 @@ import type { MusicPlayer } from '@/types/music-player'; import type { AlbumDetails, PlayerOverlays, - VideoDataChangeValue + VideoDataChangeValue, } from '@/types/player-api-events'; import type { SongInfo } from './song-info'; @@ -21,7 +21,7 @@ window.ipcRenderer.on( 'peard:update-song-info', (_, extractedSongInfo: SongInfo) => { songInfo = extractedSongInfo; - } + }, ); // Used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/pear-devs/pear-music/issues/473) @@ -61,11 +61,11 @@ export const setupRepeatChangedListener = singleton(() => { getState: () => GetState; }; } - ).__dataHost.getState().queue.repeatMode + ).__dataHost.getState().queue.repeatMode, ); }); repeatObserver.observe(document.querySelector('#right-controls .repeat')!, { - attributeFilter: ['title'] + attributeFilter: ['title'], }); // Emit the initial value as well; as it's persistent between launches. @@ -75,10 +75,10 @@ export const setupRepeatChangedListener = singleton(() => { document .querySelector< HTMLElement & { - getState: () => GetState; - } + getState: () => GetState; + } >('ytmusic-player-bar') - ?.getState().queue.repeatMode + ?.getState().queue.repeatMode, ); }); @@ -95,22 +95,22 @@ export const setupLikeChangedListener = singleton(() => { 'peard:like-changed', mapLikeStatus( (mutations[0].target as HTMLElement)?.getAttribute?.( - LIKE_STATUS_ATTRIBUTE - ) - ) + LIKE_STATUS_ATTRIBUTE, + ), + ), ); }); const likeButtonRenderer = document.querySelector('#like-button-renderer'); if (likeButtonRenderer) { likeDislikeObserver.observe(likeButtonRenderer, { attributes: true, - attributeFilter: [LIKE_STATUS_ATTRIBUTE] + attributeFilter: [LIKE_STATUS_ATTRIBUTE], }); // Emit the initial value as well; as it's persistent between launches. window.ipcRenderer.send( 'peard:like-changed', - mapLikeStatus(likeButtonRenderer.getAttribute?.(LIKE_STATUS_ATTRIBUTE)) + mapLikeStatus(likeButtonRenderer.getAttribute?.(LIKE_STATUS_ATTRIBUTE)), ); } }); @@ -119,14 +119,14 @@ export const setupVolumeChangedListener = singleton((api: MusicPlayer) => { document.querySelector('video')?.addEventListener('volumechange', () => { window.ipcRenderer.send('peard:volume-changed', { state: api.getVolume(), - isMuted: api.isMuted() + isMuted: api.isMuted(), }); }); // Emit the initial value as well; as it's persistent between launches. window.ipcRenderer.send('peard:volume-changed', { state: api.getVolume(), - isMuted: api.isMuted() + isMuted: api.isMuted(), }); }); @@ -141,7 +141,7 @@ export const setupShuffleChangedListener = singleton(() => { const observer = new MutationObserver(() => { window.ipcRenderer.send( 'peard:shuffle-changed', - (playerBar?.attributes.getNamedItem('shuffle-on') ?? null) !== null + (playerBar?.attributes.getNamedItem('shuffle-on') ?? null) !== null, ); }); @@ -149,7 +149,7 @@ export const setupShuffleChangedListener = singleton(() => { attributes: true, attributeFilter: ['shuffle-on'], childList: false, - subtree: false + subtree: false, }); }); @@ -165,7 +165,7 @@ export const setupFullScreenChangedListener = singleton(() => { window.ipcRenderer.send( 'peard:fullscreen-changed', (playerBar?.attributes.getNamedItem('player-fullscreened') ?? null) !== - null + null, ); }); @@ -173,13 +173,13 @@ export const setupFullScreenChangedListener = singleton(() => { attributes: true, attributeFilter: ['player-fullscreened'], childList: false, - subtree: false + subtree: false, }); }); export const setupAutoPlayChangedListener = singleton(() => { const autoplaySlider = document.querySelector( - '.autoplay > tp-yt-paper-toggle-button' + '.autoplay > tp-yt-paper-toggle-button', ); const observer = new MutationObserver(() => { @@ -189,7 +189,7 @@ export const setupAutoPlayChangedListener = singleton(() => { observer.observe(autoplaySlider!, { attributes: true, childList: false, - subtree: false + subtree: false, }); }); @@ -233,25 +233,25 @@ export const setupSongInfo = (api: MusicPlayer) => { ) { window.ipcRenderer.send('peard:play-or-paused', { isPaused: status === 'pause', - elapsedSeconds: Math.floor(e.target.currentTime) + elapsedSeconds: Math.floor(e.target.currentTime), }); } }; const playPausedHandlers = { playing: (e: Event) => playPausedHandler(e, 'playing'), - pause: (e: Event) => playPausedHandler(e, 'pause') + pause: (e: Event) => playPausedHandler(e, 'pause'), }; const videoEventDispatcher = async ( name: string, - videoData: VideoDataChangeValue + videoData: VideoDataChangeValue, // eslint-disable-next-line @typescript-eslint/require-await ) => document.dispatchEvent( new CustomEvent('videodatachange', { - detail: { name, videoData } - }) + detail: { name, videoData }, + }), ); const waitingEvent = new Set(); @@ -311,7 +311,7 @@ export const setupSongInfo = (api: MusicPlayer) => { title, author, video_id: videoId, - list: playlistId + list: playlistId, } = api.getVideoData(); const watchNextResponse = api.getWatchNextResponse(); @@ -326,7 +326,7 @@ export const setupSongInfo = (api: MusicPlayer) => { lengthSeconds: video.duration, loading: true, - ytmdWatchNextResponse: watchNextResponse + ['\u0079\u0074\u006d\u0064WatchNextResponse']: watchNextResponse, } satisfies VideoDataChangeValue); } } @@ -336,18 +336,19 @@ export const setupSongInfo = (api: MusicPlayer) => { let playerOverlay: PlayerOverlays | undefined; - if (!videoData.ytmdWatchNextResponse) { + if (!videoData['\u0079\u0074\u006d\u0064WatchNextResponse']) { playerOverlay = ( Object.entries(videoData).find( - ([, value]) => value && Object.hasOwn(value, 'playerOverlays') + ([, value]) => value && Object.hasOwn(value, 'playerOverlays'), ) as [string, AlbumDetails | undefined] )?.[1]?.playerOverlays; } else { - playerOverlay = videoData.ytmdWatchNextResponse?.playerOverlays; + playerOverlay = + videoData['\u0079\u0074\u006d\u0064WatchNextResponse']?.playerOverlays; } data.videoDetails.album = playerOverlay?.playerOverlayRenderer?.browserMediaSession?.browserMediaSessionRenderer?.album?.runs?.at( - 0 + 0, )?.text; data.videoDetails.elapsedSeconds = 0; data.videoDetails.isPaused = false; diff --git a/src/renderer.ts b/src/renderer.ts index 06a8517e..54962cd8 100644 --- a/src/renderer.ts +++ b/src/renderer.ts @@ -411,12 +411,12 @@ async function onApiLoaded() { /** * Original still using ES5, so we need to define custom elements using ES5 style */ -const defineYTMDTransElements = () => { - const YTMDTrans = function () {}; +const definePearTransElements = () => { + const PearTrans = function () {}; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - YTMDTrans.prototype = Object.create(HTMLElement.prototype); + PearTrans.prototype = Object.create(HTMLElement.prototype); // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - YTMDTrans.prototype.connectedCallback = function () { + PearTrans.prototype.connectedCallback = function () { const that = this as HTMLElement; const key = that.getAttribute('key'); if (key) { @@ -427,8 +427,8 @@ const defineYTMDTransElements = () => { } }; customElements.define( - 'ytmd-trans', - YTMDTrans as unknown as CustomElementConstructor, + 'pear-trans', + PearTrans as unknown as CustomElementConstructor, ); }; @@ -438,7 +438,7 @@ const preload = async () => { window.i18n = { t: i18t.bind(i18next), }; - defineYTMDTransElements(); + definePearTransElements(); if (document.body?.dataset?.os) { document.body.dataset.os = navigator.userAgent; } diff --git a/src/types/player-api-events.ts b/src/types/player-api-events.ts index db8e8c52..b228d22e 100644 --- a/src/types/player-api-events.ts +++ b/src/types/player-api-events.ts @@ -258,7 +258,7 @@ export type VideoDataChangeValue = Record & { /** * Internal variable (for album data) **/ - ytmdWatchNextResponse?: WatchNextResponse; + ['\u0079\u0074\u006d\u0064WatchNextResponse']?: WatchNextResponse; }; export interface PlayerAPIEvents { diff --git a/src/utils/custom-element.ts b/src/utils/custom-element.ts index 89723e8e..fd3a5cf1 100644 --- a/src/utils/custom-element.ts +++ b/src/utils/custom-element.ts @@ -3,4 +3,4 @@ import { customElement, type ComponentType } from 'solid-element'; export const anonymousCustomElement = ( ComponentType: ComponentType, ): CustomElementConstructor => - customElement(`ytmd-${crypto.randomUUID()}`, ComponentType); + customElement(`pear-${crypto.randomUUID()}`, ComponentType); diff --git a/src/yt-web-components.d.ts b/src/yt-web-components.d.ts index 052af427..37bc2428 100644 --- a/src/yt-web-components.d.ts +++ b/src/yt-web-components.d.ts @@ -35,13 +35,13 @@ declare module 'solid-js' { icon: Icons; } - interface YtmdTransProps { + interface PearTransProps { key?: string; } interface IntrinsicElements extends MDUIElements { 'center': ComponentProps<'div'>; - 'ytmd-trans': ComponentProps<'span'> & YtmdTransProps; + 'pear-trans': ComponentProps<'span'> & PearTransProps; 'yt-formatted-string': ComponentProps<'span'> & YtFormattedStringProps; 'yt-button-renderer': ComponentProps<'button'> & YtButtonRendererProps; 'yt-touch-feedback-shape': ComponentProps<'div'>;