smueller/youtube-music
1
0
Fork 0
mirror of https://github.com/th-ch/youtube-music.git synced 2026-01-16 12:42:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/video-toggle/button-switcher.css
View File

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

33
plugins/video-toggle/front.ts
View File

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