mirror of
https://github.com/th-ch/youtube-music.git
synced 2026-01-12 02:51:46 +00:00
feat: migrate to new plugin api
Co-authored-by: Su-Yong <simssy2205@gmail.com>
This commit is contained in:
JellyBrick
@ -1,12 +1,12 @@
|
||||
#main-panel.ytmusic-player-page {
|
||||
.video-toggle-custom-mode #main-panel.ytmusic-player-page {
|
||||
align-items: unset !important;
|
||||
}
|
||||
|
||||
#main-panel {
|
||||
.video-toggle-custom-mode #main-panel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-switch-button {
|
||||
.video-toggle-custom-mode .video-switch-button {
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
@ -24,7 +24,7 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.video-switch-button:before {
|
||||
.video-toggle-custom-mode .video-switch-button:before {
|
||||
content: "Video";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -38,7 +38,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox {
|
||||
.video-toggle-custom-mode .video-switch-button-checkbox {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -50,16 +50,16 @@
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.video-switch-button-label-span {
|
||||
.video-toggle-custom-mode .video-switch-button-label-span {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox:checked + .video-switch-button-label:before {
|
||||
.video-toggle-custom-mode .video-switch-button-checkbox:checked + .video-switch-button-label:before {
|
||||
transform: translateX(10rem);
|
||||
transition: transform 300ms linear;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox + .video-switch-button-label {
|
||||
.video-toggle-custom-mode .video-switch-button-checkbox + .video-switch-button-label {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
display: block;
|
||||
@ -67,7 +67,7 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.video-switch-button-checkbox + .video-switch-button-label:before {
|
||||
.video-toggle-custom-mode .video-switch-button-checkbox + .video-switch-button-label:before {
|
||||
content: "";
|
||||
background: rgba(60, 60, 60, 0.4);
|
||||
height: 100%;
|
||||
@ -81,6 +81,6 @@
|
||||
}
|
||||
|
||||
/* disable the native toggler */
|
||||
#av-id {
|
||||
.video-toggle-custom-mode #av-id {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
/* Hide the video player */
|
||||
#main-panel {
|
||||
.video-toggle-force-hide #main-panel {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Make the side-panel full width */
|
||||
.side-panel.ytmusic-player-page {
|
||||
.video-toggle-force-hide .side-panel.ytmusic-player-page {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
|
||||
36
src/plugins/video-toggle/index.ts
Normal file
36
src/plugins/video-toggle/index.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import forceHideStyle from './force-hide.css?inline';
|
||||
import buttonSwitcherStyle from './button-switcher.css?inline';
|
||||
|
||||
import { createPluginBuilder } from '../utils/builder';
|
||||
|
||||
export type VideoTogglePluginConfig = {
|
||||
enabled: boolean;
|
||||
hideVideo: boolean;
|
||||
mode: 'custom' | 'native' | 'disabled';
|
||||
forceHide: boolean;
|
||||
align: 'left' | 'middle' | 'right';
|
||||
}
|
||||
|
||||
const builder = createPluginBuilder('video-toggle', {
|
||||
name: 'Video Toggle',
|
||||
restartNeeded: true,
|
||||
config: {
|
||||
enabled: false,
|
||||
hideVideo: false,
|
||||
mode: 'custom',
|
||||
forceHide: false,
|
||||
align: 'left',
|
||||
} as VideoTogglePluginConfig,
|
||||
styles: [
|
||||
buttonSwitcherStyle,
|
||||
forceHideStyle,
|
||||
],
|
||||
});
|
||||
|
||||
export default builder;
|
||||
|
||||
declare global {
|
||||
interface PluginBuilderList {
|
||||
[builder.id]: typeof builder;
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import { BrowserWindow } from 'electron';
|
||||
|
||||
import forceHideStyle from './force-hide.css';
|
||||
import buttonSwitcherStyle from './button-switcher.css';
|
||||
|
||||
import { injectCSS } from '../utils/main';
|
||||
|
||||
import type { ConfigType } from '../../config/dynamic';
|
||||
|
||||
export default (win: BrowserWindow, options: ConfigType<'video-toggle'>) => {
|
||||
if (options.forceHide) {
|
||||
injectCSS(win.webContents, forceHideStyle);
|
||||
} else if (!options.mode || options.mode === 'custom') {
|
||||
injectCSS(win.webContents, buttonSwitcherStyle);
|
||||
}
|
||||
};
|
||||
@ -1,83 +1,74 @@
|
||||
import { BrowserWindow } from 'electron';
|
||||
import builder from './index';
|
||||
|
||||
import { setMenuOptions } from '../../config/plugins';
|
||||
export default builder.createMenu(async ({ getConfig, setConfig }) => {
|
||||
const config = await getConfig();
|
||||
|
||||
import { MenuTemplate } from '../../menu';
|
||||
|
||||
import type { ConfigType } from '../../config/dynamic';
|
||||
|
||||
export default (win: BrowserWindow, options: ConfigType<'video-toggle'>): MenuTemplate => [
|
||||
{
|
||||
label: 'Mode',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Custom toggle',
|
||||
type: 'radio',
|
||||
checked: options.mode === 'custom',
|
||||
click() {
|
||||
options.mode = 'custom';
|
||||
setMenuOptions('video-toggle', options);
|
||||
return [
|
||||
{
|
||||
label: 'Mode',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Custom toggle',
|
||||
type: 'radio',
|
||||
checked: config.mode === 'custom',
|
||||
click() {
|
||||
setConfig({ mode: 'custom' });
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Native toggle',
|
||||
type: 'radio',
|
||||
checked: options.mode === 'native',
|
||||
click() {
|
||||
options.mode = 'native';
|
||||
setMenuOptions('video-toggle', options);
|
||||
{
|
||||
label: 'Native toggle',
|
||||
type: 'radio',
|
||||
checked: config.mode === 'native',
|
||||
click() {
|
||||
setConfig({ mode: 'native' });
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Disabled',
|
||||
type: 'radio',
|
||||
checked: options.mode === 'disabled',
|
||||
click() {
|
||||
options.mode = 'disabled';
|
||||
setMenuOptions('video-toggle', options);
|
||||
{
|
||||
label: 'Disabled',
|
||||
type: 'radio',
|
||||
checked: config.mode === 'disabled',
|
||||
click() {
|
||||
setConfig({ mode: 'disabled' });
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Alignment',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Left',
|
||||
type: 'radio',
|
||||
checked: options.align === 'left',
|
||||
click() {
|
||||
options.align = 'left';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Middle',
|
||||
type: 'radio',
|
||||
checked: options.align === 'middle',
|
||||
click() {
|
||||
options.align = 'middle';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
type: 'radio',
|
||||
checked: options.align === 'right',
|
||||
click() {
|
||||
options.align = 'right';
|
||||
setMenuOptions('video-toggle', options);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Force Remove Video Tab',
|
||||
type: 'checkbox',
|
||||
checked: options.forceHide,
|
||||
click(item) {
|
||||
options.forceHide = item.checked;
|
||||
setMenuOptions('video-toggle', options);
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
{
|
||||
label: 'Alignment',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Left',
|
||||
type: 'radio',
|
||||
checked: config.align === 'left',
|
||||
click() {
|
||||
setConfig({ align: 'left' });
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Middle',
|
||||
type: 'radio',
|
||||
checked: config.align === 'middle',
|
||||
click() {
|
||||
setConfig({ align: 'middle' });
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Right',
|
||||
type: 'radio',
|
||||
checked: config.align === 'right',
|
||||
click() {
|
||||
setConfig({ align: 'right' });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Force Remove Video Tab',
|
||||
type: 'checkbox',
|
||||
checked: config.forceHide,
|
||||
click(item) {
|
||||
setConfig({ forceHide: item.checked });
|
||||
},
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
@ -1,191 +1,210 @@
|
||||
import buttonTemplate from './templates/button_template.html?raw';
|
||||
|
||||
import builder, { type VideoTogglePluginConfig } from './index';
|
||||
|
||||
import { ElementFromHtml } from '../utils/renderer';
|
||||
|
||||
// import { moveVolumeHud as preciseVolumeMoveVolumeHud } from '../precise-volume/renderer';
|
||||
import { moveVolumeHud as preciseVolumeMoveVolumeHud } from '../precise-volume/renderer';
|
||||
|
||||
import { YoutubePlayer } from '../../types/youtube-player';
|
||||
import { ThumbnailElement } from '../../types/get-player-response';
|
||||
|
||||
import type { ConfigType } from '../../config/dynamic';
|
||||
|
||||
// const moveVolumeHud = window.mainConfig.plugins.isEnabled('precise-volume') ? preciseVolumeMoveVolumeHud : () => {};
|
||||
const moveVolumeHud = () => {};
|
||||
export default builder.createRenderer(({ getConfig }) => {
|
||||
const moveVolumeHud = window.mainConfig.plugins.isEnabled('precise-volume') ?
|
||||
preciseVolumeMoveVolumeHud as (_: boolean) => void
|
||||
: (() => {});
|
||||
|
||||
function $<E extends Element = Element>(selector: string): E | null {
|
||||
return document.querySelector<E>(selector);
|
||||
}
|
||||
let config: VideoTogglePluginConfig = builder.config;
|
||||
let player: HTMLElement & { videoMode_: boolean } | null;
|
||||
let video: HTMLVideoElement | null;
|
||||
let api: YoutubePlayer;
|
||||
|
||||
let options: ConfigType<'video-toggle'>;
|
||||
let player: HTMLElement & { videoMode_: boolean } | null;
|
||||
let video: HTMLVideoElement | null;
|
||||
let api: YoutubePlayer;
|
||||
const switchButtonDiv = ElementFromHtml(buttonTemplate);
|
||||
|
||||
const switchButtonDiv = ElementFromHtml(buttonTemplate);
|
||||
function setup(e: CustomEvent<YoutubePlayer>) {
|
||||
api = e.detail;
|
||||
player = document.querySelector<(HTMLElement & { videoMode_: boolean; })>('ytmusic-player');
|
||||
video = document.querySelector<HTMLVideoElement>('video');
|
||||
|
||||
export default (_options: ConfigType<'video-toggle'>) => {
|
||||
if (_options.forceHide) {
|
||||
return;
|
||||
}
|
||||
document.querySelector<HTMLVideoElement>('#player')?.prepend(switchButtonDiv);
|
||||
|
||||
switch (_options.mode) {
|
||||
case 'native': {
|
||||
$('ytmusic-player-page')?.setAttribute('has-av-switcher', '');
|
||||
$('ytmusic-player')?.setAttribute('has-av-switcher', '');
|
||||
return;
|
||||
setVideoState(!config.hideVideo);
|
||||
forcePlaybackMode();
|
||||
// Fix black video
|
||||
if (video) {
|
||||
video.style.height = 'auto';
|
||||
}
|
||||
|
||||
case 'disabled': {
|
||||
$('ytmusic-player-page')?.removeAttribute('has-av-switcher');
|
||||
$('ytmusic-player')?.removeAttribute('has-av-switcher');
|
||||
return;
|
||||
}
|
||||
//Prevents bubbling to the player which causes it to stop or resume
|
||||
switchButtonDiv.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
default:
|
||||
case 'custom': {
|
||||
options = _options;
|
||||
document.addEventListener('apiLoaded', setup, { once: true, passive: true });
|
||||
// Button checked = show video
|
||||
switchButtonDiv.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
|
||||
setVideoState(target.checked);
|
||||
});
|
||||
|
||||
video?.addEventListener('srcChanged', videoStarted);
|
||||
|
||||
observeThumbnail();
|
||||
|
||||
switch (config.align) {
|
||||
case 'right': {
|
||||
switchButtonDiv.style.left = 'calc(100% - 240px)';
|
||||
return;
|
||||
}
|
||||
|
||||
case 'middle': {
|
||||
switchButtonDiv.style.left = 'calc(50% - 120px)';
|
||||
return;
|
||||
}
|
||||
|
||||
default:
|
||||
case 'left': {
|
||||
switchButtonDiv.style.left = '0px';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function setup(e: CustomEvent<YoutubePlayer>) {
|
||||
api = e.detail;
|
||||
player = $<(HTMLElement & { videoMode_: boolean; })>('ytmusic-player');
|
||||
video = $<HTMLVideoElement>('video');
|
||||
function setVideoState(showVideo: boolean) {
|
||||
config.hideVideo = !showVideo;
|
||||
window.mainConfig.plugins.setOptions('video-toggle', config);
|
||||
|
||||
$<HTMLVideoElement>('#player')?.prepend(switchButtonDiv);
|
||||
const checkbox = document.querySelector<HTMLInputElement>('.video-switch-button-checkbox'); // custom mode
|
||||
if (checkbox) checkbox.checked = !config.hideVideo;
|
||||
|
||||
setVideoState(!options.hideVideo);
|
||||
forcePlaybackMode();
|
||||
// Fix black video
|
||||
if (video) {
|
||||
video.style.height = 'auto';
|
||||
}
|
||||
if (player) {
|
||||
player.style.margin = showVideo ? '' : 'auto 0px';
|
||||
player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
|
||||
|
||||
//Prevents bubbling to the player which causes it to stop or resume
|
||||
switchButtonDiv.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
document.querySelector<HTMLElement>('#song-video.ytmusic-player')!.style.display = showVideo ? 'block' : 'none';
|
||||
document.querySelector<HTMLElement>('#song-image')!.style.display = showVideo ? 'none' : 'block';
|
||||
|
||||
// Button checked = show video
|
||||
switchButtonDiv.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (showVideo && video && !video.style.top) {
|
||||
video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
|
||||
}
|
||||
|
||||
setVideoState(target.checked);
|
||||
});
|
||||
|
||||
video?.addEventListener('srcChanged', videoStarted);
|
||||
|
||||
observeThumbnail();
|
||||
|
||||
switch (options.align) {
|
||||
case 'right': {
|
||||
switchButtonDiv.style.left = 'calc(100% - 240px)';
|
||||
return;
|
||||
}
|
||||
|
||||
case 'middle': {
|
||||
switchButtonDiv.style.left = 'calc(50% - 120px)';
|
||||
return;
|
||||
}
|
||||
|
||||
default:
|
||||
case 'left': {
|
||||
switchButtonDiv.style.left = '0px';
|
||||
moveVolumeHud(showVideo);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setVideoState(showVideo: boolean) {
|
||||
options.hideVideo = !showVideo;
|
||||
window.mainConfig.plugins.setOptions('video-toggle', options);
|
||||
|
||||
const checkbox = $<HTMLInputElement>('.video-switch-button-checkbox'); // custom mode
|
||||
if (checkbox) checkbox.checked = !options.hideVideo;
|
||||
|
||||
if (player) {
|
||||
player.style.margin = showVideo ? '' : 'auto 0px';
|
||||
player.setAttribute('playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED');
|
||||
|
||||
$<HTMLElement>('#song-video.ytmusic-player')!.style.display = showVideo ? 'block' : 'none';
|
||||
$<HTMLElement>('#song-image')!.style.display = showVideo ? 'none' : 'block';
|
||||
|
||||
if (showVideo && video && !video.style.top) {
|
||||
video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`;
|
||||
}
|
||||
|
||||
moveVolumeHud(showVideo);
|
||||
}
|
||||
}
|
||||
|
||||
function videoStarted() {
|
||||
if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_ATV') {
|
||||
// Video doesn't exist -> switch to song mode
|
||||
setVideoState(false);
|
||||
// Hide toggle button
|
||||
switchButtonDiv.style.display = 'none';
|
||||
} else {
|
||||
const songImage = $<HTMLImageElement>('#song-image img');
|
||||
if (!songImage) {
|
||||
return;
|
||||
}
|
||||
// Switch to high-res thumbnail
|
||||
forceThumbnail(songImage);
|
||||
// Show toggle button
|
||||
switchButtonDiv.style.display = 'initial';
|
||||
// Change display to video mode if video exist & video is hidden & option.hideVideo = false
|
||||
if (!options.hideVideo && $<HTMLElement>('#song-video.ytmusic-player')?.style.display === 'none') {
|
||||
setVideoState(true);
|
||||
function videoStarted() {
|
||||
if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_ATV') {
|
||||
// Video doesn't exist -> switch to song mode
|
||||
setVideoState(false);
|
||||
// Hide toggle button
|
||||
switchButtonDiv.style.display = 'none';
|
||||
} else {
|
||||
moveVolumeHud(!options.hideVideo);
|
||||
const songImage = document.querySelector<HTMLImageElement>('#song-image img');
|
||||
if (!songImage) {
|
||||
return;
|
||||
}
|
||||
// Switch to high-res thumbnail
|
||||
forceThumbnail(songImage);
|
||||
// Show toggle button
|
||||
switchButtonDiv.style.display = 'initial';
|
||||
// Change display to video mode if video exist & video is hidden & option.hideVideo = false
|
||||
if (!config.hideVideo && document.querySelector<HTMLElement>('#song-video.ytmusic-player')?.style.display === 'none') {
|
||||
setVideoState(true);
|
||||
} else {
|
||||
moveVolumeHud(!config.hideVideo);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// On load, after a delay, the page overrides the playback-mode to 'OMV_PREFERRED' which causes weird aspect ratio in the image container
|
||||
// this function fix the problem by overriding that override :)
|
||||
function forcePlaybackMode() {
|
||||
if (player) {
|
||||
const playbackModeObserver = new MutationObserver((mutations) => {
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.target instanceof HTMLElement) {
|
||||
const target = mutation.target;
|
||||
if (target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
|
||||
playbackModeObserver.disconnect();
|
||||
target.setAttribute('playback-mode', 'ATV_PREFERRED');
|
||||
function forcePlaybackMode() {
|
||||
if (player) {
|
||||
const playbackModeObserver = new MutationObserver((mutations) => {
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.target instanceof HTMLElement) {
|
||||
const target = mutation.target;
|
||||
if (target.getAttribute('playback-mode') !== 'ATV_PREFERRED') {
|
||||
playbackModeObserver.disconnect();
|
||||
target.setAttribute('playback-mode', 'ATV_PREFERRED');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
playbackModeObserver.observe(player, { attributeFilter: ['playback-mode'] });
|
||||
}
|
||||
}
|
||||
|
||||
function observeThumbnail() {
|
||||
const playbackModeObserver = new MutationObserver((mutations) => {
|
||||
if (!player?.videoMode_) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.target instanceof HTMLImageElement) {
|
||||
const target = mutation.target;
|
||||
if (!target.src.startsWith('data:')) {
|
||||
continue;
|
||||
}
|
||||
|
||||
forceThumbnail(target);
|
||||
}
|
||||
}
|
||||
});
|
||||
playbackModeObserver.observe(player, { attributeFilter: ['playback-mode'] });
|
||||
playbackModeObserver.observe(document.querySelector('#song-image img')!, { attributeFilter: ['src'] });
|
||||
}
|
||||
}
|
||||
|
||||
function observeThumbnail() {
|
||||
const playbackModeObserver = new MutationObserver((mutations) => {
|
||||
if (!player?.videoMode_) {
|
||||
return;
|
||||
function forceThumbnail(img: HTMLImageElement) {
|
||||
const thumbnails: ThumbnailElement[] = (document.querySelector('#movie_player') as unknown as YoutubePlayer).getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails ?? [];
|
||||
if (thumbnails && thumbnails.length > 0) {
|
||||
const thumbnail = thumbnails.at(-1)?.url.split('?')[0];
|
||||
if (typeof thumbnail === 'string') img.src = thumbnail;
|
||||
}
|
||||
}
|
||||
|
||||
for (const mutation of mutations) {
|
||||
if (mutation.target instanceof HTMLImageElement) {
|
||||
const target = mutation.target;
|
||||
if (!target.src.startsWith('data:')) {
|
||||
continue;
|
||||
const applyStyleClass = (config: VideoTogglePluginConfig) => {
|
||||
if (config.forceHide) {
|
||||
document.body.classList.add('video-toggle-force-hide');
|
||||
document.body.classList.remove('video-toggle-custom-mode');
|
||||
} else if (!config.mode || config.mode === 'custom') {
|
||||
document.body.classList.add('video-toggle-custom-mode');
|
||||
document.body.classList.remove('video-toggle-force-hide');
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
async onLoad() {
|
||||
config = await getConfig();
|
||||
applyStyleClass(config);
|
||||
|
||||
if (config.forceHide) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (config.mode) {
|
||||
case 'native': {
|
||||
document.querySelector('ytmusic-player-page')?.setAttribute('has-av-switcher', '');
|
||||
document.querySelector('ytmusic-player')?.setAttribute('has-av-switcher', '');
|
||||
return;
|
||||
}
|
||||
|
||||
forceThumbnail(target);
|
||||
}
|
||||
}
|
||||
});
|
||||
playbackModeObserver.observe($('#song-image img')!, { attributeFilter: ['src'] });
|
||||
}
|
||||
case 'disabled': {
|
||||
document.querySelector('ytmusic-player-page')?.removeAttribute('has-av-switcher');
|
||||
document.querySelector('ytmusic-player')?.removeAttribute('has-av-switcher');
|
||||
return;
|
||||
}
|
||||
|
||||
function forceThumbnail(img: HTMLImageElement) {
|
||||
const thumbnails: ThumbnailElement[] = ($('#movie_player') as unknown as YoutubePlayer).getPlayerResponse()?.videoDetails?.thumbnail?.thumbnails ?? [];
|
||||
if (thumbnails && thumbnails.length > 0) {
|
||||
const thumbnail = thumbnails.at(-1)?.url.split('?')[0];
|
||||
if (typeof thumbnail === 'string') img.src = thumbnail;
|
||||
}
|
||||
}
|
||||
default:
|
||||
case 'custom': {
|
||||
document.addEventListener('apiLoaded', setup, { once: true, passive: true });
|
||||
}
|
||||
}
|
||||
},
|
||||
onConfigChange(newConfig) {
|
||||
config = newConfig;
|
||||
|
||||
applyStyleClass(newConfig);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user