diff --git a/materialious/src/lib/components/Thumbnail.svelte b/materialious/src/lib/components/Thumbnail.svelte index 5a4d9703..51785c7c 100644 --- a/materialious/src/lib/components/Thumbnail.svelte +++ b/materialious/src/lib/components/Thumbnail.svelte @@ -6,7 +6,7 @@ import { _ } from 'svelte-i18n'; import { get } from 'svelte/store'; import { getChannel, getDeArrow, getThumbnail, getVideo, getVideoProgress } from '../api'; - import type { Notification, PlaylistPageVideo, Video, VideoBase, VideoPlay } from '../api/model'; + import type { Notification, PlaylistPageVideo, Video, VideoBase } from '../api/model'; import { proxyVideoUrl, truncate } from '../misc'; import type { PlayerEvents } from '../player'; import { @@ -15,8 +15,6 @@ deArrowTitlesOnly, interfaceDisplayThumbnailAvatars, interfaceLowBandwidthMode, - interfacePreviewVideoOnHoverStore, - playerProxyVideosStore, playerSavePlaybackPositionStore, syncPartyConnectionsStore, syncPartyPeerStore, @@ -35,16 +33,9 @@ let { video = $bindable(), playlistId = '', sideways = $bindable(false) }: Props = $props(); let thumbnailHidden: boolean = $state(false); - let showVideoPreview: boolean = $state(false); - let videoPreview: VideoPlay | null = $state(null); - let videoPreviewMuted: boolean = $state(true); - let videoPreviewVolume: number = $state(0.4); - let imgHeight: number = $state(0); let authorImg: HTMLImageElement | undefined = $state(); - let proxyVideos = get(playerProxyVideosStore); - let placeholderHeight: number = $state(0); let watchUrl = new URL(`${location.origin}/watch/${video.videoId}`); @@ -232,32 +223,6 @@ } } - async function previewVideo() { - if (!get(interfacePreviewVideoOnHoverStore)) return; - - showVideoPreview = true; - try { - videoPreview = await getVideo(video.videoId); - if (videoPreview.hlsUrl || videoPreview.formatStreams.length === 0) { - showVideoPreview = false; - videoPreview = null; - } else { - try { - const vidstackDetails = localStorage.getItem('video-player'); - if (vidstackDetails) { - const vidstackDetailsParsed = JSON.parse(vidstackDetails); - if ('volume' in vidstackDetailsParsed) - videoPreviewVolume = vidstackDetailsParsed.volume; - } - } catch {} - } - } catch { - showVideoPreview = false; - } - - imgHeight = document.getElementById('thumbnail-container')?.clientHeight as number; - } - function calcThumbnailPlaceholderHeight() { if (!sideways) { if (innerWidth < 1000) { @@ -277,13 +242,7 @@ {#if !thumbnailHidden}
-
(showVideoPreview = false)} - onfocus={() => {}} - id="thumbnail-container" - role="region" - > +
{}} id="thumbnail-container" role="region">
- {:else if loaded} - {#if showVideoPreview && videoPreview && img} -
- -
- {:else if img} - Thumbnail for video - {/if} + {:else if loaded && img} + Thumbnail for video {:else}

{$_('thumbnail.failedToLoadImage')}

{/if} @@ -352,23 +291,6 @@

{$_('thumbnail.live')}

{/if}
- {#if showVideoPreview && videoPreview} - - {/if}
@@ -434,10 +356,6 @@ width: 200px; } - #video-preview[poster] { - object-fit: contain; - } - .video-title { word-wrap: break-word; overflow: hidden;