From a48f489709732f390937f96888c6e9ffad4a4834 Mon Sep 17 00:00:00 2001 From: Enoughsdv Date: Thu, 18 Sep 2025 22:23:34 -0500 Subject: [PATCH 1/9] improve toggle video --- src/plugins/video-toggle/button-switcher.css | 94 +++++------- src/plugins/video-toggle/index.tsx | 134 +++++++++++------- .../templates/video-switch-button.tsx | 75 ++++++---- 3 files changed, 163 insertions(+), 140 deletions(-) diff --git a/src/plugins/video-toggle/button-switcher.css b/src/plugins/video-toggle/button-switcher.css index 3a9796888e..86a4000280 100644 --- a/src/plugins/video-toggle/button-switcher.css +++ b/src/plugins/video-toggle/button-switcher.css @@ -9,84 +9,56 @@ .video-toggle-custom-mode .video-switch-button { z-index: 999; box-sizing: border-box; - padding: 0; - margin-top: 20px; - margin-left: 10px; - background: rgba(33, 33, 33, 0.4); - border-radius: 30px; + padding: 12px; + margin: 20px 10px 0px 10px; + background: rgba(33, 33, 33, 0.7); + border-radius: 50%; overflow: hidden; - width: 20rem; + width: 48px; + height: 48px; text-align: center; - font-size: 18px; - letter-spacing: 1px; color: #fff; - padding-right: 10rem; position: absolute; -} - -.video-toggle-custom-mode .video-switch-button:before { - content: attr(data-video-button-text); - position: absolute; - top: 0; - bottom: 0; - right: 0; - width: 10rem; + cursor: pointer; display: flex; align-items: center; justify-content: center; - z-index: 3; - pointer-events: none; + transition: all 0.2s ease; } -.video-toggle-custom-mode .video-switch-button-checkbox { - cursor: pointer; - position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 100%; - height: 100%; - opacity: 0; - z-index: 2; +.video-toggle-custom-mode .video-switch-button:hover { + background: rgba(33, 33, 33, 0.9); + transform: scale(1.1); } -.video-toggle-custom-mode .video-switch-button-label-span { - position: relative; +.video-toggle-custom-mode .video-toggle-icon { + width: 20px; + height: 20px; + color: #fff; + stroke: currentColor; + fill: none; + pointer-events: none; } -.video-toggle-custom-mode - .video-switch-button-checkbox:checked - + .video-switch-button-label:before { - transform: translateX(10rem); - transition: transform 300ms linear; +.video-toggle-custom-mode #av-id { + display: none; } -.video-toggle-custom-mode - .video-switch-button-checkbox - + .video-switch-button-label { - position: relative; - padding: 15px 0; - display: block; - user-select: none; - pointer-events: none; +.video-toggle-custom-mode #song-video.ytmusic-player, +.video-toggle-custom-mode #song-image { + position: relative !important; + margin: auto !important; + transition: none !important; } -.video-toggle-custom-mode - .video-switch-button-checkbox - + .video-switch-button-label:before { - content: ''; - background: rgba(60, 60, 60, 0.4); - height: 100%; - width: 100%; - position: absolute; - left: 0; - top: 0; - border-radius: 30px; - transform: translateX(0); - transition: transform 300ms; +.video-toggle-custom-mode ytmusic-player { + margin: auto 0px !important; } -/* disable the native toggler */ -.video-toggle-custom-mode #av-id { - display: none; +.video-toggle-custom-mode #song-image img { + max-width: 100% !important; + max-height: 100% !important; + object-fit: cover !important; + display: block !important; + margin: auto !important; } diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index 4ca9eeb199..a61fc5683f 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -1,5 +1,4 @@ import { render } from 'solid-js/web'; - import { createSignal, Show } from 'solid-js'; import forceHideStyle from './force-hide.css?inline'; @@ -108,6 +107,7 @@ export default createPlugin({ renderer: { config: null as VideoTogglePluginConfig | null, + setVideoVisible: null as ((visible: boolean) => void) | null, applyStyleClass: (config: VideoTogglePluginConfig) => { if (config.forceHide) { document.body.classList.add('video-toggle-force-hide'); @@ -119,6 +119,7 @@ export default createPlugin({ }, async start({ getConfig }) { const config = await getConfig(); + this.config = config; this.applyStyleClass(config); if (config.forceHide) { @@ -155,9 +156,14 @@ export default createPlugin({ }, async onPlayerApiReady(api, { getConfig }) { const [showButton, setShowButton] = createSignal(true); + const [videoVisible, setVideoVisible] = createSignal(true); const config = await getConfig(); this.config = config; + + setVideoVisible(!config.hideVideo); + + this.setVideoVisible = setVideoVisible; const moveVolumeHud = (await window.mainConfig.plugins.isEnabled( 'precise-volume', @@ -177,14 +183,11 @@ export default createPlugin({ () => ( { - const target = e.target as HTMLInputElement; - - setVideoState(target.checked); + initialVideoVisible={videoVisible()} + onVideoToggle={(showVideo) => { + setVideoVisible(showVideo); + setVideoState(showVideo); }} - onClick={(e) => e.stopPropagation()} - songButtonText={t('plugins.video-toggle.templates.button-song')} - videoButtonText={t('plugins.video-toggle.templates.button-video')} /> ), @@ -206,28 +209,32 @@ export default createPlugin({ } window.mainConfig.plugins.setOptions('video-toggle', this.config); - const checkbox = document.querySelector( - '.video-switch-button-checkbox', - ); // custom mode - if (checkbox) checkbox.checked = !this.config?.hideVideo; - if (player) { - player.style.margin = showVideo ? '' : 'auto 0px'; player.setAttribute( 'playback-mode', showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED', ); - document.querySelector( - '#song-video.ytmusic-player', - )!.style.display = showVideo ? 'block' : 'none'; - document.querySelector('#song-image')!.style.display = - showVideo ? 'none' : 'block'; - - if (showVideo && video && !video.style.top) { - video.style.top = `${ - (player.clientHeight - video.clientHeight) / 2 - }px`; + const videoElement = document.querySelector('#song-video.ytmusic-player'); + const imageElement = document.querySelector('#song-image'); + + if (videoElement && imageElement) { + if (showVideo) { + videoElement.style.display = 'block'; + imageElement.style.display = 'none'; + + if (video && !video.style.top) { + video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`; + } + } else { + videoElement.style.display = 'none'; + imageElement.style.display = 'block'; + + imageElement.style.position = 'relative'; + imageElement.style.width = '100%'; + imageElement.style.height = '100%'; + imageElement.style.margin = 'auto'; + } } moveVolumeHud(showVideo); @@ -314,42 +321,63 @@ export default createPlugin({ }; if (config.mode !== 'native' && config.mode != 'disabled') { - setTimeout(() => { - const playerSelector = - document.querySelector('#player'); - if (!playerSelector) return; - - playerSelector.prepend(switchButtonContainer); - setVideoState(!config.hideVideo); - forcePlaybackMode(); - if (video) { - video.style.height = 'auto'; + const playerSelector = + document.querySelector('#player'); + if (!playerSelector) return; + + const initializeConsistentStyling = () => { + const videoElement = document.querySelector('#song-video.ytmusic-player'); + const imageElement = document.querySelector('#song-image'); + + if (videoElement && imageElement) { + videoElement.style.position = 'relative'; + videoElement.style.margin = 'auto'; + imageElement.style.position = 'relative'; + imageElement.style.margin = 'auto'; } - video?.addEventListener('ytmd:src-changed', videoStarted); - observeThumbnail(); - videoStarted(); - switch (config.align) { - case 'right': { - switchButtonContainer.style.justifyContent = 'flex-end'; - return; - } - - case 'middle': { - switchButtonContainer.style.justifyContent = 'center'; - return; - } - - default: - case 'left': { - switchButtonContainer.style.justifyContent = 'flex-start'; - } + }; + + playerSelector.prepend(switchButtonContainer); + initializeConsistentStyling(); + setVideoState(!config.hideVideo); + forcePlaybackMode(); + if (video) { + video.style.height = 'auto'; + } + video?.addEventListener('ytmd:src-changed', videoStarted); + observeThumbnail(); + videoStarted(); + + if (this.config) { + const container = document.getElementById('ytmd-video-toggle-switch-button-container'); + if (container) { + const alignmentMap = { + right: 'flex-end', + middle: 'center', + left: 'flex-start' + }; + container.style.justifyContent = alignmentMap[this.config.align]; } - }, 0); + } } }, onConfigChange(newConfig) { this.config = newConfig; this.applyStyleClass(newConfig); + + const container = document.getElementById('ytmd-video-toggle-switch-button-container'); + if (container) { + const alignmentMap = { + right: 'flex-end', + middle: 'center', + left: 'flex-start' + }; + container.style.justifyContent = alignmentMap[newConfig.align]; + } + + if (this.setVideoVisible) { + this.setVideoVisible(!newConfig.hideVideo); + } }, }, }); diff --git a/src/plugins/video-toggle/templates/video-switch-button.tsx b/src/plugins/video-toggle/templates/video-switch-button.tsx index c996bb9c3f..602761ab11 100644 --- a/src/plugins/video-toggle/templates/video-switch-button.tsx +++ b/src/plugins/video-toggle/templates/video-switch-button.tsx @@ -1,28 +1,51 @@ -export interface VideoSwitchButtonProps { - onClick?: (event: MouseEvent) => void; - onChange?: (event: Event) => void; - songButtonText: string; - videoButtonText: string; +import { createSignal, createEffect } from 'solid-js'; + +interface VideoSwitchButtonProps { + initialVideoVisible?: boolean; + onVideoToggle?: (showVideo: boolean) => void; } -export const VideoSwitchButton = (props: VideoSwitchButtonProps) => ( -
props.onClick?.(e)} - onChange={(e) => props.onChange?.(e)} - > - - -
-); +export const VideoSwitchButton = (props: VideoSwitchButtonProps) => { + const [isVideoVisible, setIsVideoVisible] = createSignal(props.initialVideoVisible ?? true); + + createEffect(() => { + if (props.initialVideoVisible !== undefined) { + setIsVideoVisible(props.initialVideoVisible); + } + }); + + const toggleVideo = (e: MouseEvent) => { + const newState = !isVideoVisible(); + setIsVideoVisible(newState); + props.onVideoToggle?.(newState); + e.stopPropagation(); + }; + + return ( +
+ + + + + + + +
+ ); +}; From 41894853247b19d5db5c085dd50ca0e32189f9e1 Mon Sep 17 00:00:00 2001 From: Alic <67561225+Enoughsdv@users.noreply.github.com> Date: Thu, 18 Sep 2025 22:33:08 -0500 Subject: [PATCH 2/9] Update src/plugins/video-toggle/index.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- src/plugins/video-toggle/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index a61fc5683f..aaa462708d 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -162,7 +162,6 @@ export default createPlugin({ this.config = config; setVideoVisible(!config.hideVideo); - this.setVideoVisible = setVideoVisible; const moveVolumeHud = (await window.mainConfig.plugins.isEnabled( From 0132ac695e9ed86572bc937c19a398c626a762a7 Mon Sep 17 00:00:00 2001 From: Alic <67561225+Enoughsdv@users.noreply.github.com> Date: Thu, 18 Sep 2025 22:33:18 -0500 Subject: [PATCH 3/9] Update src/plugins/video-toggle/index.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- src/plugins/video-toggle/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index aaa462708d..78a6e94c9b 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -160,7 +160,6 @@ export default createPlugin({ const config = await getConfig(); this.config = config; - setVideoVisible(!config.hideVideo); this.setVideoVisible = setVideoVisible; From 2c704970d287c8de917780d908e1809e2819e91a Mon Sep 17 00:00:00 2001 From: Alic <67561225+Enoughsdv@users.noreply.github.com> Date: Thu, 18 Sep 2025 22:33:25 -0500 Subject: [PATCH 4/9] Update src/plugins/video-toggle/index.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- src/plugins/video-toggle/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index 78a6e94c9b..9d3c990151 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -213,7 +213,9 @@ export default createPlugin({ showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED', ); - const videoElement = document.querySelector('#song-video.ytmusic-player'); + const videoElement = document.querySelector( + '#song-video.ytmusic-player', + ); const imageElement = document.querySelector('#song-image'); if (videoElement && imageElement) { From e6f94a7ed090501ed632c12a603f6bcc2b46034b Mon Sep 17 00:00:00 2001 From: Alic <67561225+Enoughsdv@users.noreply.github.com> Date: Thu, 18 Sep 2025 22:33:30 -0500 Subject: [PATCH 5/9] Update src/plugins/video-toggle/index.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- src/plugins/video-toggle/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index 9d3c990151..05443981ab 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -216,7 +216,8 @@ export default createPlugin({ const videoElement = document.querySelector( '#song-video.ytmusic-player', ); - const imageElement = document.querySelector('#song-image'); + const imageElement = + document.querySelector('#song-image'); if (videoElement && imageElement) { if (showVideo) { From d86304e6450865762d58a74e9f1c9bfdb9591e76 Mon Sep 17 00:00:00 2001 From: Alic <67561225+Enoughsdv@users.noreply.github.com> Date: Thu, 18 Sep 2025 22:33:35 -0500 Subject: [PATCH 6/9] Update src/plugins/video-toggle/index.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- src/plugins/video-toggle/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index 05443981ab..a3ed3e950a 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -218,7 +218,6 @@ export default createPlugin({ ); const imageElement = document.querySelector('#song-image'); - if (videoElement && imageElement) { if (showVideo) { videoElement.style.display = 'block'; From 1c97c25d7b7c1dd8ae578bbd6dc0a80088a89a1c Mon Sep 17 00:00:00 2001 From: Alic <67561225+Enoughsdv@users.noreply.github.com> Date: Thu, 18 Sep 2025 22:33:46 -0500 Subject: [PATCH 7/9] Update src/plugins/video-toggle/templates/video-switch-button.tsx Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- src/plugins/video-toggle/templates/video-switch-button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/video-toggle/templates/video-switch-button.tsx b/src/plugins/video-toggle/templates/video-switch-button.tsx index 602761ab11..e725112f99 100644 --- a/src/plugins/video-toggle/templates/video-switch-button.tsx +++ b/src/plugins/video-toggle/templates/video-switch-button.tsx @@ -29,7 +29,7 @@ export const VideoSwitchButton = (props: VideoSwitchButtonProps) => { xmlns="http://www.w3.org/2000/svg" width="24" height="24" - viewBox="0 0 24 24" + viewBox="0 0 24 24" fill="none" > From ddb457f6770aea4d8105dd7ae74d5477463bcb78 Mon Sep 17 00:00:00 2001 From: Enoughsdv Date: Thu, 18 Sep 2025 22:41:51 -0500 Subject: [PATCH 8/9] refactor(video-toggle): clean up code formatting and improve readability --- src/plugins/touchbar/index.ts | 3 +- src/plugins/video-toggle/index.tsx | 44 ++++++++++------ .../templates/video-switch-button.tsx | 52 +++++++++++++------ 3 files changed, 65 insertions(+), 34 deletions(-) diff --git a/src/plugins/touchbar/index.ts b/src/plugins/touchbar/index.ts index 7b5ce5f79a..f393f99a5b 100644 --- a/src/plugins/touchbar/index.ts +++ b/src/plugins/touchbar/index.ts @@ -1,11 +1,12 @@ import { nativeImage, type NativeImage, TouchBar } from 'electron'; +import youtubeMusicIcon from '@assets/youtube-music.png?asset&asarUnpack'; + import { createPlugin } from '@/utils'; import { getSongControls } from '@/providers/song-controls'; import { registerCallback, SongInfoEvent } from '@/providers/song-info'; import { t } from '@/i18n'; -import youtubeMusicIcon from '@assets/youtube-music.png?asset&asarUnpack'; import { Platform } from '@/types/plugins'; export default createPlugin({ diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index a61fc5683f..c2cf8d424a 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -160,9 +160,9 @@ export default createPlugin({ const config = await getConfig(); this.config = config; - + setVideoVisible(!config.hideVideo); - + this.setVideoVisible = setVideoVisible; const moveVolumeHud = (await window.mainConfig.plugins.isEnabled( @@ -215,21 +215,24 @@ export default createPlugin({ showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED', ); - const videoElement = document.querySelector('#song-video.ytmusic-player'); - const imageElement = document.querySelector('#song-image'); - + const videoElement = document.querySelector( + '#song-video.ytmusic-player', + ); + const imageElement = + document.querySelector('#song-image'); + if (videoElement && imageElement) { if (showVideo) { videoElement.style.display = 'block'; imageElement.style.display = 'none'; - + if (video && !video.style.top) { video.style.top = `${(player.clientHeight - video.clientHeight) / 2}px`; } } else { videoElement.style.display = 'none'; imageElement.style.display = 'block'; - + imageElement.style.position = 'relative'; imageElement.style.width = '100%'; imageElement.style.height = '100%'; @@ -326,9 +329,12 @@ export default createPlugin({ if (!playerSelector) return; const initializeConsistentStyling = () => { - const videoElement = document.querySelector('#song-video.ytmusic-player'); - const imageElement = document.querySelector('#song-image'); - + const videoElement = document.querySelector( + '#song-video.ytmusic-player', + ); + const imageElement = + document.querySelector('#song-image'); + if (videoElement && imageElement) { videoElement.style.position = 'relative'; videoElement.style.margin = 'auto'; @@ -347,14 +353,16 @@ export default createPlugin({ video?.addEventListener('ytmd:src-changed', videoStarted); observeThumbnail(); videoStarted(); - + if (this.config) { - const container = document.getElementById('ytmd-video-toggle-switch-button-container'); + const container = document.getElementById( + 'ytmd-video-toggle-switch-button-container', + ); if (container) { const alignmentMap = { right: 'flex-end', middle: 'center', - left: 'flex-start' + left: 'flex-start', }; container.style.justifyContent = alignmentMap[this.config.align]; } @@ -364,17 +372,19 @@ export default createPlugin({ onConfigChange(newConfig) { this.config = newConfig; this.applyStyleClass(newConfig); - - const container = document.getElementById('ytmd-video-toggle-switch-button-container'); + + const container = document.getElementById( + 'ytmd-video-toggle-switch-button-container', + ); if (container) { const alignmentMap = { right: 'flex-end', middle: 'center', - left: 'flex-start' + left: 'flex-start', }; container.style.justifyContent = alignmentMap[newConfig.align]; } - + if (this.setVideoVisible) { this.setVideoVisible(!newConfig.hideVideo); } diff --git a/src/plugins/video-toggle/templates/video-switch-button.tsx b/src/plugins/video-toggle/templates/video-switch-button.tsx index 602761ab11..16009a7651 100644 --- a/src/plugins/video-toggle/templates/video-switch-button.tsx +++ b/src/plugins/video-toggle/templates/video-switch-button.tsx @@ -6,7 +6,9 @@ interface VideoSwitchButtonProps { } export const VideoSwitchButton = (props: VideoSwitchButtonProps) => { - const [isVideoVisible, setIsVideoVisible] = createSignal(props.initialVideoVisible ?? true); + const [isVideoVisible, setIsVideoVisible] = createSignal( + props.initialVideoVisible ?? true, + ); createEffect(() => { if (props.initialVideoVisible !== undefined) { @@ -23,28 +25,46 @@ export const VideoSwitchButton = (props: VideoSwitchButtonProps) => { return (
- - - + + - - +
); From 907b6067e58801ef5035702f904f0a08167dc35d Mon Sep 17 00:00:00 2001 From: Enoughsdv Date: Thu, 18 Sep 2025 22:45:03 -0500 Subject: [PATCH 9/9] refactor(video-toggle): improve code formatting and readability in video toggle components --- src/plugins/video-toggle/index.tsx | 13 ++++++++----- .../templates/video-switch-button.tsx | 18 +++++++++++++++--- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/plugins/video-toggle/index.tsx b/src/plugins/video-toggle/index.tsx index 4755c6b62f..c2cf8d424a 100644 --- a/src/plugins/video-toggle/index.tsx +++ b/src/plugins/video-toggle/index.tsx @@ -160,9 +160,9 @@ export default createPlugin({ const config = await getConfig(); this.config = config; - + setVideoVisible(!config.hideVideo); - + this.setVideoVisible = setVideoVisible; const moveVolumeHud = (await window.mainConfig.plugins.isEnabled( @@ -215,9 +215,12 @@ export default createPlugin({ showVideo ? 'OMV_PREFERRED' : 'ATV_PREFERRED', ); - const videoElement = document.querySelector('#song-video.ytmusic-player'); - const imageElement = document.querySelector('#song-image'); - + const videoElement = document.querySelector( + '#song-video.ytmusic-player', + ); + const imageElement = + document.querySelector('#song-image'); + if (videoElement && imageElement) { if (showVideo) { videoElement.style.display = 'block'; diff --git a/src/plugins/video-toggle/templates/video-switch-button.tsx b/src/plugins/video-toggle/templates/video-switch-button.tsx index 883fa36529..16009a7651 100644 --- a/src/plugins/video-toggle/templates/video-switch-button.tsx +++ b/src/plugins/video-toggle/templates/video-switch-button.tsx @@ -25,7 +25,7 @@ export const VideoSwitchButton = (props: VideoSwitchButtonProps) => { return (
- { width="24" xmlns="http://www.w3.org/2000/svg" > - - + +