From 3e7d798faf5de8b4023175d977e5526269fead3e Mon Sep 17 00:00:00 2001 From: WardPearce Date: Thu, 29 May 2025 15:45:19 +1200 Subject: [PATCH] Fixes to mobile video setting passthrough issues --- materialious/electron/package-lock.json | 4 +- .../src/lib/components/Transcript.svelte | 6 +- materialious/src/lib/css/global.css | 7 +- .../src/lib/css/shaka-player-theme.css | 81 +++++++++++++++++-- .../routes/(app)/watch/[slug]/+page.svelte | 5 +- 5 files changed, 81 insertions(+), 22 deletions(-) diff --git a/materialious/electron/package-lock.json b/materialious/electron/package-lock.json index dab28881..a15d4a25 100644 --- a/materialious/electron/package-lock.json +++ b/materialious/electron/package-lock.json @@ -1,12 +1,12 @@ { "name": "Materialious", - "version": "1.8.3", + "version": "1.8.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "Materialious", - "version": "1.8.3", + "version": "1.8.4", "license": "MIT", "dependencies": { "@capacitor-community/electron": "^5.0.0", diff --git a/materialious/src/lib/components/Transcript.svelte b/materialious/src/lib/components/Transcript.svelte index 347b932c..eb69d6c2 100644 --- a/materialious/src/lib/components/Transcript.svelte +++ b/materialious/src/lib/components/Transcript.svelte @@ -116,7 +116,7 @@ onclick={() => (playerElement.currentTime = cue.startTime)} class:secondary-container={currentTime >= cue.startTime && currentTime <= cue.endTime} > -

{videoLength(cue.startTime)}

+

{videoLength(cue.startTime)}

{decodeHtmlCharCodes(cue.text.replace(/<[^>]+>/g, ''))}

{/each} @@ -145,8 +145,4 @@ .transcript-text { margin-left: 1em; } - - .transcript-line .chip { - padding: 0 1.5em; - } diff --git a/materialious/src/lib/css/global.css b/materialious/src/lib/css/global.css index ba4ae4ec..402e29be 100644 --- a/materialious/src/lib/css/global.css +++ b/materialious/src/lib/css/global.css @@ -17,10 +17,6 @@ main.root { overflow-y: auto; } -article, dialog { - border-radius: .25rem !important; -} - .row { padding: 1em !important; } @@ -79,6 +75,5 @@ button.row:hover { position: fixed !important; top: 20% !important; width: 100% !important; - background-color: var(--surface-variant) !important; } -} \ No newline at end of file +} diff --git a/materialious/src/lib/css/shaka-player-theme.css b/materialious/src/lib/css/shaka-player-theme.css index e9195df6..18b7bb4e 100644 --- a/materialious/src/lib/css/shaka-player-theme.css +++ b/materialious/src/lib/css/shaka-player-theme.css @@ -123,7 +123,8 @@ transition: none !important; opacity: 1 !important; visibility: visible !important; - z-index: 9999 !important; + z-index: 99999999 !important; + pointer-events: auto !important; pointer-events: auto !important; } @@ -157,10 +158,18 @@ padding-left: 0.3125rem; /* 5px */ } +.shaka-overflow-menu * { + z-index: 99999999 !important; + pointer-events: auto !important; +} + .youtube-theme .shaka-overflow-menu button, .youtube-theme .shaka-settings-menu button { padding: 0; margin-bottom: 0.5em; + visibility: visible !important; + z-index: 99999999 !important; + pointer-events: auto !important; } .youtube-theme .shaka-overflow-menu button i { @@ -174,6 +183,10 @@ outline: none; height: 2.5rem; /* 40px */ flex: 0 0 100%; + visibility: visible !important; + z-index: 99999999 !important; + pointer-events: auto !important; + pointer-events: auto !important; } .shaka-settings-menu { @@ -264,11 +277,65 @@ @media screen and (max-width: 650px) { .youtube-theme .shaka-overflow-menu, .youtube-theme .shaka-settings-menu { - min-width: 100%; - position: fixed; - top: 75%; - left: 50%; - height: 50vh; - transform: translate(-50%, -50%); + width: 100% !important; + min-width: 100% !important; + position: fixed !important; + top: 100% !important; + left: 50% !important; + height: 50vh !important; + transform: translate(-50%, -50%) !important; + pointer-events: all !important; + z-index: 99999999 !important; + pointer-events: auto !important; + opacity: 1 !important; + visibility: visible !important; + padding: 1rem !important; + box-shadow: var(--elevate2); + background-color: var(--surface-container); + z-index: 11; + inset: auto auto 0 0; + inline-size: 100%; + max-block-size: 50vh; + max-inline-size: none !important; + overflow-x: hidden; + overflow-y: auto; + font-size: 0.875rem; + font-weight: 400; + text-transform: none; + color: var(--on-surface); + line-height: normal; + text-align: start; + border-radius: 0.25rem; + transition: + all var(--speed2), + 0s background-color; + } + + .youtube-theme .shaka-overflow-menu::before, + .youtube-theme .shaka-settings-menu::before { + content: '' !important; + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100vw !important; + height: 100vh !important; + background: transparent !important; + z-index: 99999998 !important; + pointer-events: auto !important; + } + + .youtube-theme .shaka-overflow-menu:hover, + .youtube-theme .shaka-settings-menu:hover { + z-index: 99999998 !important; + pointer-events: auto !important; + opacity: 1 !important; + visibility: visible !important; + } + + #shaka-container { + z-index: 99999998 !important; + pointer-events: auto !important; + opacity: 1 !important; + visibility: visible !important; } } diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte index 2d924d25..167083de 100644 --- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte +++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte @@ -238,10 +238,11 @@ if (playerElement) { playerElement.addEventListener('timeupdate', () => { + if (!playerElement) return; playerCurrentTime = playerElement.currentTime; }); - playerElement.addEventListener('end', async () => { + playerElement.addEventListener('ended', async () => { if (playlistVideos.length === 0) { if ($playerAutoplayNextByDefaultStore) { goto(`/watch/${data.video.recommendedVideos[0].videoId}`); @@ -504,7 +505,7 @@ width_wide
{$_('player.theatreMode')}
- {#if data.video.lengthSeconds > 60 && !data.video.hlsUrl} + {#if data.video.lengthSeconds > 360 && !data.video.hlsUrl}