smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-09 17:51:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: improve readability 2

Browse Source
This commit is contained in:
Su-Yong
2025-10-12 14:34:36 +09:00
parent ffa61687bf
commit b8e0d53ef3
6 changed files with 48 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/plugins/music-together/templates/status.html
View File

@ -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>

63
src/providers/song-info-front.ts
View File

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

14
src/renderer.ts
View File

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

2
src/types/player-api-events.ts
View File

@ -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 {

2
src/utils/custom-element.ts
View File

@ -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);

4
src/yt-web-components.d.ts vendored
View File

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