diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index a264ba05..d36a813d 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -77,6 +77,7 @@ let playerCurrentPlaybackState = $state(false); let playerCurrentTime = $state(0); + let playerMaxKnownTime = $state(0); let playerIsSeeking = $state(false); let playerIsBuffering = $state(false); let playerVolume = $state(0); @@ -739,6 +740,18 @@ playerElement.currentTime += frameTime; }); + const volumeContainer = document.getElementById('volume-slider'); + volumeContainer?.addEventListener('mousewheel', (event) => { + event.preventDefault(); + const delta = Math.sign((event as any).deltaY); + const newVolume = Math.max( + 0, + Math.min(1, (playerElement as HTMLMediaElement).volume - delta * 0.05) + ); + (playerElement as HTMLMediaElement).volume = newVolume; + playerVolume = newVolume; + }); + playerElement?.addEventListener('pause', async () => { playerCurrentPlaybackState = false; playerIsBuffering = false; @@ -764,6 +777,10 @@ playerElement?.addEventListener('timeupdate', () => { if (playerIsSeeking) return; playerCurrentTime = playerElement?.currentTime ?? 0; + + if (playerMaxKnownTime === 0 || playerCurrentTime > playerMaxKnownTime) { + playerMaxKnownTime = Number(playerElement?.currentTime); + } }); try { @@ -935,7 +952,7 @@ type="range" min="0" bind:value={playerCurrentTime} - max={data.video.lengthSeconds} + max={data.video.liveNow ? playerMaxKnownTime : data.video.lengthSeconds} /> @@ -983,18 +1000,27 @@ class="chip" style="background-color: var(--secondary-container) !important;color: var(--on-secondary-container) !important" > - {videoLength(playerCurrentTime)} / {videoLength(data.video.lengthSeconds)} + {#if data.video.liveNow} + {$_('thumbnail.live')} + {:else} + {videoLength(playerCurrentTime)} / {videoLength(data.video.lengthSeconds)} + {/if}

- {#if playerTextTracks && playerTextTracks.length > 0} + {#if playerTextTracks && playerTextTracks.length > 0 && !data.video.liveNow} + @@ -1190,6 +1238,8 @@ justify-content: center; } + #player-container:focus-within #player-controls, + #player-container:active #player-controls, #player-container:hover #player-controls { opacity: 1; transition: opacity 0.3s ease; diff --git a/materialious/src/lib/css/global.css b/materialious/src/lib/css/global.css index b2e700f1..a89612ca 100644 --- a/materialious/src/lib/css/global.css +++ b/materialious/src/lib/css/global.css @@ -79,7 +79,7 @@ menu { @media screen and (max-width: 1000px) { menu.mobile { position: fixed !important; - top: 20% !important; + bottom: 0% !important; height: 100vh !important; width: 100% !important; z-index: 99999;