('#song-image');
+
+ if (videoElement && imageElement) {
+ videoElement.style.position = 'relative';
+ videoElement.style.margin = 'auto';
+ imageElement.style.position = 'relative';
+ imageElement.style.margin = 'auto';
+ }
+ };
+
+ playerSelector.prepend(switchButtonContainer);
+ initializeConsistentStyling();
+ setVideoState(!config.hideVideo);
+ forcePlaybackMode();
+ if (video) {
+ video.style.height = 'auto';
+ }
+ video?.addEventListener('ytmd:src-changed', videoStarted);
+ observeThumbnail();
+ videoStarted();
- default:
- case 'left': {
- switchButtonContainer.style.justifyContent = 'flex-start';
- }
+ 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..16009a7651 100644
--- a/src/plugins/video-toggle/templates/video-switch-button.tsx
+++ b/src/plugins/video-toggle/templates/video-switch-button.tsx
@@ -1,28 +1,71 @@
-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 (
+
+ );
+};