diff --git a/common/views/Player/Player.svelte b/common/views/Player/Player.svelte index 152bced..6498931 100644 --- a/common/views/Player/Player.svelte +++ b/common/views/Player/Player.svelte @@ -15,6 +15,7 @@ import { w2gEmitter, state } from '../WatchTogether/WatchTogether.svelte' import Keybinds, { loadWithDefaults, condition } from 'svelte-keybinds' import { SUPPORTS } from '@/modules/support.js' + import 'rvfc-polyfill' const emit = createEventDispatcher() @@ -601,11 +602,13 @@ } function resetImmerse () { - if (immerseTimeout) { - clearTimeout(immerseTimeout) - } + clearTimeout(immerseTimeout) immersed = false - immerseTimeout = setTimeout(immersePlayer, (paused ? 8 : 1) * 1000) + immerseTimeout = setTimeout(immersePlayer, (paused ? 5 : 1) * 1000) + } + + function toggleImmerse () { + immersed = !immersed } function hideBuffering () { @@ -639,17 +642,15 @@ let stats = null let requestCallback = null function toggleStats () { - if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) { - if (requestCallback) { - stats = null - video.cancelVideoFrameCallback(requestCallback) - requestCallback = null - } else { - requestCallback = video.requestVideoFrameCallback((a, b) => { - stats = {} - handleStats(a, b, b) - }) - } + if (requestCallback) { + stats = null + video.cancelVideoFrameCallback(requestCallback) + requestCallback = null + } else { + requestCallback = video.requestVideoFrameCallback((a, b) => { + stats = {} + handleStats(a, b, b) + }) } } async function handleStats (now, metadata, lastmeta) { @@ -901,12 +902,11 @@ class:pointer={miniplayer} class:miniplayer class:pip - class:immersed={immersed && !paused} + class:immersed={immersed} class:buffering={src && buffering} bind:this={container} role='none' - on:mousemove={resetImmerse} - on:touchmove={resetImmerse} + on:pointermove={resetImmerse} on:keypress={resetImmerse} on:keydown={resetImmerse} on:mouseleave={immersePlayer}> @@ -944,6 +944,7 @@ on:timeupdate={checkSkippableChapters} on:waiting={showBuffering} on:loadeddata={hideBuffering} + on:pause={() => { immersed = false }} on:canplay={hideBuffering} on:playing={hideBuffering} on:loadedmetadata={hideBuffering} @@ -990,7 +991,9 @@
-
{ if (page === 'player') playPause(); page = 'player' }} /> +
{ if (page === 'player') playPause(); page = 'player' }} /> + +
{ page = 'player' }} /> skip_previous fast_rewind {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} @@ -1410,6 +1413,9 @@ font-size: 2rem !important; } + .toggle-immerse:focus-visible { + background: hsla(209, 100%, 55%, 0.3); + } @media (pointer: none), (pointer: coarse) { .bottom .ctrl[data-name='playPause'], .bottom .ctrl[data-name='playNext'], @@ -1421,6 +1427,12 @@ padding-top: max(var(--safe-area-top), env(safe-area-inset-top, 0)) !important; } } + .toggle-immerse { + display: block !important; + } + .toggle-fullscreen { + display: none !important; + } }