mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-15 04:11:47 +00:00
chore: improve readability
This commit is contained in:
Su-Yong
@ -2,11 +2,11 @@ import { singleton } from './decorators';
|
||||
|
||||
import { LikeType, type GetState } from '@/types/datahost-get-state';
|
||||
|
||||
import type { YoutubePlayer } from '@/types/youtube-player';
|
||||
import type { MusicPlayer } from '@/types/music-player';
|
||||
import type {
|
||||
AlbumDetails,
|
||||
PlayerOverlays,
|
||||
VideoDataChangeValue,
|
||||
VideoDataChangeValue
|
||||
} from '@/types/player-api-events';
|
||||
|
||||
import type { SongInfo } from './song-info';
|
||||
@ -18,19 +18,19 @@ let songInfo: SongInfo = {} as SongInfo;
|
||||
export const getSongInfo = () => songInfo;
|
||||
|
||||
window.ipcRenderer.on(
|
||||
'ytmd:update-song-info',
|
||||
'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/th-ch/youtube-music/issues/473)
|
||||
const srcChangedEvent = new CustomEvent('ytmd:src-changed');
|
||||
// Used because 'loadeddata' or 'loadedmetadata' weren't firing on song start for some users (https://github.com/pear-devs/pear-music/issues/473)
|
||||
const srcChangedEvent = new CustomEvent('peard:src-changed');
|
||||
|
||||
export const setupSeekedListener = singleton(() => {
|
||||
document.querySelector('video')?.addEventListener('seeked', (v) => {
|
||||
if (v.target instanceof HTMLVideoElement) {
|
||||
window.ipcRenderer.send('ytmd:seeked', v.target.currentTime);
|
||||
window.ipcRenderer.send('peard:seeked', v.target.currentTime);
|
||||
}
|
||||
});
|
||||
});
|
||||
@ -40,7 +40,7 @@ export const setupTimeChangedListener = singleton(() => {
|
||||
for (const mutation of mutations) {
|
||||
const target = mutation.target as Node & { value: string };
|
||||
const numberValue = Number(target.value);
|
||||
window.ipcRenderer.send('ytmd:time-changed', numberValue);
|
||||
window.ipcRenderer.send('peard:time-changed', numberValue);
|
||||
songInfo.elapsedSeconds = numberValue;
|
||||
}
|
||||
});
|
||||
@ -52,33 +52,33 @@ export const setupTimeChangedListener = singleton(() => {
|
||||
|
||||
export const setupRepeatChangedListener = singleton(() => {
|
||||
const repeatObserver = new MutationObserver((mutations) => {
|
||||
// provided by YouTube Music
|
||||
// provided by Pear Desktop
|
||||
window.ipcRenderer.send(
|
||||
'ytmd:repeat-changed',
|
||||
'peard:repeat-changed',
|
||||
(
|
||||
mutations[0].target as Node & {
|
||||
__dataHost: {
|
||||
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.
|
||||
// provided by YouTube Music
|
||||
// provided by Pear Desktop
|
||||
window.ipcRenderer.send(
|
||||
'ytmd:repeat-changed',
|
||||
'peard:repeat-changed',
|
||||
document
|
||||
.querySelector<
|
||||
HTMLElement & {
|
||||
getState: () => GetState;
|
||||
}
|
||||
getState: () => GetState;
|
||||
}
|
||||
>('ytmusic-player-bar')
|
||||
?.getState().queue.repeatMode,
|
||||
?.getState().queue.repeatMode
|
||||
);
|
||||
});
|
||||
|
||||
@ -92,41 +92,41 @@ const LIKE_STATUS_ATTRIBUTE = 'like-status';
|
||||
export const setupLikeChangedListener = singleton(() => {
|
||||
const likeDislikeObserver = new MutationObserver((mutations) => {
|
||||
window.ipcRenderer.send(
|
||||
'ytmd:like-changed',
|
||||
'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(
|
||||
'ytmd:like-changed',
|
||||
mapLikeStatus(likeButtonRenderer.getAttribute?.(LIKE_STATUS_ATTRIBUTE)),
|
||||
'peard:like-changed',
|
||||
mapLikeStatus(likeButtonRenderer.getAttribute?.(LIKE_STATUS_ATTRIBUTE))
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export const setupVolumeChangedListener = singleton((api: YoutubePlayer) => {
|
||||
export const setupVolumeChangedListener = singleton((api: MusicPlayer) => {
|
||||
document.querySelector('video')?.addEventListener('volumechange', () => {
|
||||
window.ipcRenderer.send('ytmd:volume-changed', {
|
||||
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('ytmd:volume-changed', {
|
||||
window.ipcRenderer.send('peard:volume-changed', {
|
||||
state: api.getVolume(),
|
||||
isMuted: api.isMuted(),
|
||||
isMuted: api.isMuted()
|
||||
});
|
||||
});
|
||||
|
||||
@ -134,14 +134,14 @@ export const setupShuffleChangedListener = singleton(() => {
|
||||
const playerBar = document.querySelector('ytmusic-player-bar');
|
||||
|
||||
if (!playerBar) {
|
||||
window.ipcRenderer.send('ytmd:shuffle-changed-supported', false);
|
||||
window.ipcRenderer.send('peard:shuffle-changed-supported', false);
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
window.ipcRenderer.send(
|
||||
'ytmd:shuffle-changed',
|
||||
(playerBar?.attributes.getNamedItem('shuffle-on') ?? null) !== null,
|
||||
'peard:shuffle-changed',
|
||||
(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
|
||||
});
|
||||
});
|
||||
|
||||
@ -157,15 +157,15 @@ export const setupFullScreenChangedListener = singleton(() => {
|
||||
const playerBar = document.querySelector('ytmusic-player-bar');
|
||||
|
||||
if (!playerBar) {
|
||||
window.ipcRenderer.send('ytmd:fullscreen-changed-supported', false);
|
||||
window.ipcRenderer.send('peard:fullscreen-changed-supported', false);
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(() => {
|
||||
window.ipcRenderer.send(
|
||||
'ytmd:fullscreen-changed',
|
||||
'peard:fullscreen-changed',
|
||||
(playerBar?.attributes.getNamedItem('player-fullscreened') ?? null) !==
|
||||
null,
|
||||
null
|
||||
);
|
||||
});
|
||||
|
||||
@ -173,56 +173,56 @@ 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(() => {
|
||||
window.ipcRenderer.send('ytmd:autoplay-changed');
|
||||
window.ipcRenderer.send('peard:autoplay-changed');
|
||||
});
|
||||
|
||||
observer.observe(autoplaySlider!, {
|
||||
attributes: true,
|
||||
childList: false,
|
||||
subtree: false,
|
||||
subtree: false
|
||||
});
|
||||
});
|
||||
|
||||
export const setupSongInfo = (api: YoutubePlayer) => {
|
||||
window.ipcRenderer.on('ytmd:setup-time-changed-listener', () => {
|
||||
export const setupSongInfo = (api: MusicPlayer) => {
|
||||
window.ipcRenderer.on('peard:setup-time-changed-listener', () => {
|
||||
setupTimeChangedListener();
|
||||
});
|
||||
|
||||
window.ipcRenderer.on('ytmd:setup-like-changed-listener', () => {
|
||||
window.ipcRenderer.on('peard:setup-like-changed-listener', () => {
|
||||
setupLikeChangedListener();
|
||||
});
|
||||
|
||||
window.ipcRenderer.on('ytmd:setup-repeat-changed-listener', () => {
|
||||
window.ipcRenderer.on('peard:setup-repeat-changed-listener', () => {
|
||||
setupRepeatChangedListener();
|
||||
});
|
||||
|
||||
window.ipcRenderer.on('ytmd:setup-volume-changed-listener', () => {
|
||||
window.ipcRenderer.on('peard:setup-volume-changed-listener', () => {
|
||||
setupVolumeChangedListener(api);
|
||||
});
|
||||
|
||||
window.ipcRenderer.on('ytmd:setup-shuffle-changed-listener', () => {
|
||||
window.ipcRenderer.on('peard:setup-shuffle-changed-listener', () => {
|
||||
setupShuffleChangedListener();
|
||||
});
|
||||
|
||||
window.ipcRenderer.on('ytmd:setup-fullscreen-changed-listener', () => {
|
||||
window.ipcRenderer.on('peard:setup-fullscreen-changed-listener', () => {
|
||||
setupFullScreenChangedListener();
|
||||
});
|
||||
|
||||
window.ipcRenderer.on('ytmd:setup-autoplay-changed-listener', () => {
|
||||
window.ipcRenderer.on('peard:setup-autoplay-changed-listener', () => {
|
||||
setupAutoPlayChangedListener();
|
||||
});
|
||||
|
||||
window.ipcRenderer.on('ytmd:setup-seeked-listener', () => {
|
||||
window.ipcRenderer.on('peard:setup-seeked-listener', () => {
|
||||
setupSeekedListener();
|
||||
});
|
||||
|
||||
@ -231,27 +231,27 @@ export const setupSongInfo = (api: YoutubePlayer) => {
|
||||
e.target instanceof HTMLVideoElement &&
|
||||
Math.round(e.target.currentTime) > 0
|
||||
) {
|
||||
window.ipcRenderer.send('ytmd:play-or-paused', {
|
||||
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: YoutubePlayer) => {
|
||||
title,
|
||||
author,
|
||||
video_id: videoId,
|
||||
list: playlistId,
|
||||
list: playlistId
|
||||
} = api.getVideoData();
|
||||
|
||||
const watchNextResponse = api.getWatchNextResponse();
|
||||
@ -326,7 +326,7 @@ export const setupSongInfo = (api: YoutubePlayer) => {
|
||||
lengthSeconds: video.duration,
|
||||
loading: true,
|
||||
|
||||
ytmdWatchNextResponse: watchNextResponse,
|
||||
ytmdWatchNextResponse: watchNextResponse
|
||||
} satisfies VideoDataChangeValue);
|
||||
}
|
||||
}
|
||||
@ -339,7 +339,7 @@ export const setupSongInfo = (api: YoutubePlayer) => {
|
||||
if (!videoData.ytmdWatchNextResponse) {
|
||||
playerOverlay = (
|
||||
Object.entries(videoData).find(
|
||||
([, value]) => value && Object.hasOwn(value, 'playerOverlays'),
|
||||
([, value]) => value && Object.hasOwn(value, 'playerOverlays')
|
||||
) as [string, AlbumDetails | undefined]
|
||||
)?.[1]?.playerOverlays;
|
||||
} else {
|
||||
@ -347,11 +347,11 @@ export const setupSongInfo = (api: YoutubePlayer) => {
|
||||
}
|
||||
data.videoDetails.album =
|
||||
playerOverlay?.playerOverlayRenderer?.browserMediaSession?.browserMediaSessionRenderer?.album?.runs?.at(
|
||||
0,
|
||||
0
|
||||
)?.text;
|
||||
data.videoDetails.elapsedSeconds = 0;
|
||||
data.videoDetails.isPaused = false;
|
||||
|
||||
window.ipcRenderer.send('ytmd:video-src-changed', data);
|
||||
window.ipcRenderer.send('peard:video-src-changed', data);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user