chore: improve readability 2

Author: Su-Yong

src/plugins/music-together/templates/status.html

@@ -2,22 +2,22 @@
   <div class="music-together-status-container">
     <img class="music-together-profile big" alt="Profile Image">
     <div class="music-together-status-item">
-      <ytmd-trans key="plugins.music-together.name"></ytmd-trans>
+      <pear-trans key="plugins.music-together.name"></pear-trans>
       <span id="music-together-status-label">
-        <ytmd-trans key="plugins.music-together.menu.status.disconnected"></ytmd-trans>
+        <pear-trans key="plugins.music-together.menu.status.disconnected"></pear-trans>
       </span>
       <marquee id="music-together-permission-label">
-        <ytmd-trans key="plugins.music-together.menu.permission.playlist" style="color: rgba(255, 255, 255, 0.75)"></ytmd-trans>
+        <pear-trans key="plugins.music-together.menu.permission.playlist" style="color: rgba(255, 255, 255, 0.75)"></pear-trans>
       </marquee>
     </div>
   </div>
   <div class="music-together-divider horizontal" style="margin: 16px 0;"></div>
   <div class="music-together-status-item">
-    <ytmd-trans key="plugins.music-together.menu.connected-users"></ytmd-trans>
+    <pear-trans key="plugins.music-together.menu.connected-users"></pear-trans>
   </div>
   <div class="music-together-user-container">
     <span class="music-together-empty">
-      <ytmd-trans key="plugins.music-together.menu.empty-user"></ytmd-trans>
+      <pear-trans key="plugins.music-together.menu.empty-user"></pear-trans>
     </span>
   </div>
 </div>

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,15 +141,15 @@ 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,
     );
   });
 
   observer.observe(playerBar, {
     attributes: true,
     attributeFilter: ['shuffle-on'],
     childList: false,
-    subtree: false
+    subtree: false,
   });
 });
 
@@ -165,21 +165,21 @@ export const setupFullScreenChangedListener = singleton(() => {
     window.ipcRenderer.send(
       'peard:fullscreen-changed',
       (playerBar?.attributes.getNamedItem('player-fullscreened') ?? null) !==
-      null
+        null,
     );
   });
 
   observer.observe(playerBar, {
     attributes: true,
     attributeFilter: ['player-fullscreened'],
     childList: false,
-    subtree: false
+    subtree: false,
   });
 });
 
 export const setupAutoPlayChangedListener = singleton(() => {
   const autoplaySlider = document.querySelector<HTMLInputElement>(
-    '.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<VideoDataChanged>('videodatachange', {
-        detail: { name, videoData }
-      })
+        detail: { name, videoData },
+      }),
     );
 
   const waitingEvent = new Set<string>();
@@ -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;

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;
   }

src/types/player-api-events.ts

@@ -258,7 +258,7 @@ export type VideoDataChangeValue = Record<string, unknown> & {
   /**
    * Internal variable (for album data)
    **/
-  ytmdWatchNextResponse?: WatchNextResponse;
+  ['\u0079\u0074\u006d\u0064WatchNextResponse']?: WatchNextResponse;
 };
 
 export interface PlayerAPIEvents {

src/utils/custom-element.ts

@@ -3,4 +3,4 @@ import { customElement, type ComponentType } from 'solid-element';
 export const anonymousCustomElement = <T extends object>(
   ComponentType: ComponentType<T>,
 ): CustomElementConstructor =>
-  customElement(`ytmd-${crypto.randomUUID()}`, ComponentType);
+  customElement(`pear-${crypto.randomUUID()}`, ComponentType);

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'>;