Removed video preview feature

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}
 	<div class:sideways-root={sideways}>
-		<div
-			onmouseover={previewVideo}
-			onmouseleave={() => (showVideoPreview = false)}
-			onfocus={() => {}}
-			id="thumbnail-container"
-			role="region"
-		>
+		<div onfocus={() => {}} id="thumbnail-container" role="region">
 			<a
 				class="wave thumbnail"
 				href={watchUrl.toString()}
@@ -296,28 +255,8 @@
 							class="secondary-container"
 							style="width: 100%;height: {placeholderHeight}px;"
 						></div>
-					{:else if loaded}
-						{#if showVideoPreview && videoPreview && img}
-							<div style="max-width: 100%; max-height: {imgHeight}px;">
-								<video
-									id="video-preview"
-									style="max-width: 100%; max-height: {imgHeight}px;"
-									autoplay
-									poster={img.src}
-									width="100%"
-									height="100%"
-									muted={videoPreviewMuted}
-									controls={false}
-									volume={videoPreviewVolume}
-									src={proxyVideos
-										? proxyVideoUrl(videoPreview.formatStreams[0].url)
-										: videoPreview.formatStreams[0].url}
-								>
-								</video>
-							</div>
-						{:else if img}
-							<img class="responsive" src={img.src} alt="Thumbnail for video" />
-						{/if}
+					{:else if loaded && img}
+						<img class="responsive" src={img.src} alt="Thumbnail for video" />
 					{:else}
 						<p>{$_('thumbnail.failedToLoadImage')}</p>
 					{/if}
@@ -352,23 +291,6 @@
 					<h3>{$_('thumbnail.live')}</h3>
 				{/if}
 			</a>
-			{#if showVideoPreview && videoPreview}
-				<button
-					class="no-padding"
-					style="position: absolute; bottom: 10px; left: 10px; width: 30px; height: 30px;"
-					onclick={() => {
-						videoPreviewMuted = !videoPreviewMuted;
-					}}
-				>
-					<i>
-						{#if videoPreviewMuted}
-							volume_off
-						{:else}
-							volume_up
-						{/if}
-					</i>
-				</button>
-			{/if}
 		</div>
 
 		<div class="thumbnail-details video-title">
@@ -434,10 +356,6 @@
 		width: 200px;
 	}
 
-	#video-preview[poster] {
-		object-fit: contain;
-	}
-
 	.video-title {
 		word-wrap: break-word;
 		overflow: hidden;