fix(video-toggle): fix video config not load config

resolve #16
This commit is contained in:
Su-Yong
2023-10-03 18:03:13 +09:00
parent 16a32d1946
commit 399c6e37ce
2 changed files with 20 additions and 21 deletions

View File

@ -15,12 +15,12 @@
background: rgba(33, 33, 33, 0.4);
border-radius: 30px;
overflow: hidden;
width: 240px;
width: 20rem;
text-align: center;
font-size: 18px;
letter-spacing: 1px;
color: #fff;
padding-right: 120px;
padding-right: 10rem;
position: absolute;
}
@ -30,7 +30,7 @@
top: 0;
bottom: 0;
right: 0;
width: 120px;
width: 10rem;
display: flex;
align-items: center;
justify-content: center;
@ -55,7 +55,7 @@
}
.video-switch-button-checkbox:checked + .video-switch-button-label:before {
transform: translateX(120px);
transform: translateX(10rem);
transition: transform 300ms linear;
}

View File

@ -56,17 +56,11 @@ function setup(e: CustomEvent<YoutubePlayer>) {
$<HTMLVideoElement>('#player')?.prepend(switchButtonDiv);
if (options.hideVideo) {
const checkbox = $<HTMLInputElement>('.video-switch-button-checkbox');
if (checkbox) {
checkbox.checked = false;
}
changeDisplay(false);
forcePlaybackMode();
// Fix black video
if (video) {
video.style.height = 'auto';
}
setVideoState(!options.hideVideo);
forcePlaybackMode();
// Fix black video
if (video) {
video.style.height = 'auto';
}
//Prevents bubbling to the player which causes it to stop or resume
@ -77,9 +71,8 @@ function setup(e: CustomEvent<YoutubePlayer>) {
// Button checked = show video
switchButtonDiv.addEventListener('change', (e) => {
const target = e.target as HTMLInputElement;
options.hideVideo = target.checked;
changeDisplay(target.checked);
setOptions('video-toggle', options);
setVideoState(target.checked);
});
video?.addEventListener('srcChanged', videoStarted);
@ -104,7 +97,13 @@ function setup(e: CustomEvent<YoutubePlayer>) {
}
}
function changeDisplay(showVideo: boolean) {
function setVideoState(showVideo: boolean) {
options.hideVideo = !showVideo;
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');
@ -123,7 +122,7 @@ function changeDisplay(showVideo: boolean) {
function videoStarted() {
if (api.getPlayerResponse().videoDetails.musicVideoType === 'MUSIC_VIDEO_TYPE_ATV') {
// Video doesn't exist -> switch to song mode
changeDisplay(false);
setVideoState(false);
// Hide toggle button
switchButtonDiv.style.display = 'none';
} else {
@ -137,7 +136,7 @@ function videoStarted() {
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') {
changeDisplay(true);
setVideoState(true);
} else {
moveVolumeHud(!options.hideVideo);
}