From 947b3d94e6f6c01e1eaf81a6350efc8ac69053fc Mon Sep 17 00:00:00 2001 From: ward Date: Mon, 23 Jun 2025 14:13:26 +1200 Subject: [PATCH] Improvements to tv watch page --- .../src/lib/components/ContentColumn.svelte | 2 +- materialious/src/lib/components/Player.svelte | 35 ++--- .../src/lib/components/Thumbnail.svelte | 10 +- .../src/lib/components/Watch/Author.svelte | 62 ++++++++ .../lib/components/Watch/Description.svelte | 42 ++++++ .../lib/components/Watch/LikesDislikes.svelte | 29 ++++ materialious/src/lib/i18n/locales/en.json | 2 + materialious/src/lib/misc.ts | 7 + .../routes/(app)/watch/[slug]/+page.svelte | 121 ++------------- .../(no-layout)/tv/[slug]/+page@.svelte | 140 +++++++++++++++++- 10 files changed, 309 insertions(+), 141 deletions(-) create mode 100644 materialious/src/lib/components/Watch/Author.svelte create mode 100644 materialious/src/lib/components/Watch/Description.svelte create mode 100644 materialious/src/lib/components/Watch/LikesDislikes.svelte diff --git a/materialious/src/lib/components/ContentColumn.svelte b/materialious/src/lib/components/ContentColumn.svelte index 54016dce..556588c7 100644 --- a/materialious/src/lib/components/ContentColumn.svelte +++ b/materialious/src/lib/components/ContentColumn.svelte @@ -10,7 +10,7 @@ async function checkWidth() { if ($isAndroidTvStore) { - mediumCol = '4'; + mediumCol = '3'; } else if (innerWidth <= 1750) { largeCol = '4'; } else { diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index 654a4f97..3fb18b93 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -525,18 +525,20 @@ return false; }); - Mousetrap.bind('right', () => { - if (!playerElement) return; - playerElement.currentTime = playerElement.currentTime + 10; - return false; - }); + if (!$isAndroidTvStore) { + Mousetrap.bind('right', () => { + if (!playerElement) return; + playerElement.currentTime = playerElement.currentTime + 10; + return false; + }); - Mousetrap.bind('left', () => { - if (!playerElement) return; + Mousetrap.bind('left', () => { + if (!playerElement) return; - playerElement.currentTime = playerElement.currentTime - 10; - return false; - }); + playerElement.currentTime = playerElement.currentTime - 10; + return false; + }); + } Mousetrap.bind('c', () => { const isVisible = player.isTextTrackVisible(); @@ -580,17 +582,6 @@ return false; }); - if ($isAndroidTvStore) { - Mousetrap.bind('enter', () => { - if (playerElement?.paused) { - playerElement?.play(); - } else { - playerElement?.pause(); - } - return false; - }); - } - playerElement.addEventListener('ended', async () => { if (!data.playlistId) { if ($playerAutoplayNextByDefaultStore) { @@ -761,7 +752,7 @@ id="player" poster={getBestThumbnail(data.video.videoThumbnails, 9999, 9999)} > - {#if isEmbed} + {#if isEmbed && !isAndroidTvStore}
{data.video.title}
diff --git a/materialious/src/lib/components/Thumbnail.svelte b/materialious/src/lib/components/Thumbnail.svelte index efd285d5..6a7c2aa5 100644 --- a/materialious/src/lib/components/Thumbnail.svelte +++ b/materialious/src/lib/components/Thumbnail.svelte @@ -33,7 +33,9 @@ let placeholderHeight: number = $state(0); - let watchUrl = new URL(`${location.origin}/watch/${video.videoId}`); + let watchUrl = new URL( + `${location.origin}/${$isAndroidTvStore ? 'tv' : 'watch'}/${video.videoId}` + ); if (playlistId !== '') { watchUrl.searchParams.set('playlist', playlistId); @@ -139,7 +141,7 @@ function calcThumbnailPlaceholderHeight() { if ($isAndroidTvStore) { - placeholderHeight = 400; + placeholderHeight = 100; return; } if (!sideways) { @@ -163,9 +165,7 @@ tabindex="0" role="button" onclick={async () => { - if ($isAndroidTvStore) { - goto(`${location.origin}/tv/${video.videoId}`); - } + goto(watchUrl); }} >
diff --git a/materialious/src/lib/components/Watch/Author.svelte b/materialious/src/lib/components/Watch/Author.svelte new file mode 100644 index 00000000..5b822426 --- /dev/null +++ b/materialious/src/lib/components/Watch/Author.svelte @@ -0,0 +1,62 @@ + + + diff --git a/materialious/src/lib/components/Watch/Description.svelte b/materialious/src/lib/components/Watch/Description.svelte new file mode 100644 index 00000000..9c777111 --- /dev/null +++ b/materialious/src/lib/components/Watch/Description.svelte @@ -0,0 +1,42 @@ + + +
+ + + +
+
+
+ {@html description} +
+
+ + +
diff --git a/materialious/src/lib/components/Watch/LikesDislikes.svelte b/materialious/src/lib/components/Watch/LikesDislikes.svelte new file mode 100644 index 00000000..2ab61085 --- /dev/null +++ b/materialious/src/lib/components/Watch/LikesDislikes.svelte @@ -0,0 +1,29 @@ + + +{#await returnYTDislikes then returnYTDislikes} + {#if returnYTDislikes} + + {:else} + + {/if} +{/await} diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index e4577f83..d3213ce4 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/materialious/src/lib/i18n/locales/en.json @@ -5,6 +5,8 @@ "loadMore": "Load more", "views": "views", "login": "Login", + "recommendedVideos": "Recommended Videos", + "playlistVideos": "Playlist Videos", "invidiousLogin": "Please log in with your Invidious account", "invalidInstance": "Please verify the URL. If it's correct, the instance may be down or may not support third-party clients.", "invidiousBlockWarning": "Invidious is currently being blocked by Google. If videos aren't loading for this instance, please use this instance on Materialious on {android} or {desktop} to get around this with local video fallback.", diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts index 77a53dc2..57b1c901 100644 --- a/materialious/src/lib/misc.ts +++ b/materialious/src/lib/misc.ts @@ -106,3 +106,10 @@ export function excludeDuplicateFeeds(currentItems: feedItems, newItems: feedIte return [...nonDuplicatedNewItems, ...currentItems]; } + +export function expandSummery(id: string) { + const element = document.getElementById(id); + if (element) { + element.click(); + } +} diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte index 1b7e45ea..3edcfc25 100644 --- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte +++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte @@ -1,10 +1,8 @@ + +{#if showInfo} +
+
{letterCase(data.video.title)}
+ +
+ +
+ +
+ + {#if data.playlistId && data.playlistId in $playlistCacheStore} +
{$_('playlistVideos')}
+ +
+ {#each $playlistCacheStore[data.playlistId].videos as playlistVideo} + +
+ {#key playlistVideo.videoId} + + {/key} +
+ + {/each} +
+ {/if} +
{$_('recommendedVideos')}
+
+ {#each data.video.recommendedVideos as recommendedVideo} + +
+ {#key recommendedVideo.videoId} + + {/key} +
+ + {/each} +
+
+{/if} + +