diff --git a/public/app.js b/public/app.js index 18e433e..2064388 100644 --- a/public/app.js +++ b/public/app.js @@ -111,13 +111,22 @@ function setWatchCollapsed(collapsed) { } function toggleWatchCollapsed() { + const wasCollapsed = stage.classList.contains("is-watch-collapsed"); if (!stage.classList.contains("is-watch-collapsed")) { const height = Math.round(watchPanel.getBoundingClientRect().height); if (height > 0) { localStorage.setItem(watchHeightStorageKey, String(height)); } } - setWatchCollapsed(!stage.classList.contains("is-watch-collapsed")); + setWatchCollapsed(!wasCollapsed); + if (wasCollapsed) { + requestAnimationFrame(() => { + ensureCurrentYoutubeVideoLoaded().catch((error) => { + console.error(error); + setStatus("Could not load the paused YouTube video."); + }); + }); + } } function setStatus(message) { @@ -462,6 +471,37 @@ function requestYoutubePlayback(player, videoId, position, allowStartPrompt = fa }, 900); } +async function ensureCurrentYoutubeVideoLoaded() { + if (!currentYoutubeVideoId) return; + + const position = currentYoutubeSnapshot(savedPositionForVideo(currentYoutubeVideoId)).position; + youtubeShell.classList.add("is-active"); + const player = await ensureYoutubePlayer({ + videoId: currentYoutubeVideoId, + position, + autoplay: desiredYoutubePlaying + }); + await whenYoutubeReady(); + if (!currentYoutubeVideoId) return; + + const loadedVideoId = player.getVideoData?.().video_id; + const playerState = player.getPlayerState?.(); + if (desiredYoutubePlaying) { + requestYoutubePlayback(player, currentYoutubeVideoId, position); + return; + } + + if ( + loadedVideoId !== currentYoutubeVideoId || + [YT.PlayerState.UNSTARTED, YT.PlayerState.CUED].includes(playerState) + ) { + player.cueVideoById(currentYoutubeVideoId, position); + } else { + player.pauseVideo?.(); + player.seekTo?.(position, true); + } +} + async function sendWatchState({ videoId = currentYoutubeVideoId, position = 0, diff --git a/public/styles.css b/public/styles.css index aeb6483..4c84c4d 100644 --- a/public/styles.css +++ b/public/styles.css @@ -615,7 +615,7 @@ button[aria-pressed="false"] { min-width: 238px; } -.self-mic-control label { +.self-mic-control > label { display: grid; grid-template-rows: 12px 18px; gap: 5px;