From c526b70a6c344fda556c4cbd2064d853c041dc68 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 13 Apr 2024 19:16:05 +1200
Subject: [PATCH] Minor improvements

---
 materialious/src/lib/Player.svelte    | 31 +++++++++++++++++++--------
 materialious/src/lib/Thumbnail.svelte | 19 ++++++++++++----
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index 12f354ce..fb17910b 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -27,6 +27,7 @@
 
 	let src: PlayerSrc = [];
 	let categoryBeingSkipped = '';
+	let playerIsLive = false;
 
 	export function seekTo(time: number) {
 		if (typeof player !== 'undefined') {
@@ -38,6 +39,7 @@
 
 	onMount(async () => {
 		if (!data.video.hlsUrl) {
+			playerIsLive = false;
 			if (data.video.captions) {
 				data.video.captions.forEach(async (caption) => {
 					player.textTracks.add({
@@ -109,6 +111,10 @@
 			}
 
 			if (get(playerDash)) {
+				player.addEventListener('dash-can-play', () => {
+					loadPlayerPos();
+				});
+
 				src = [{ src: data.video.dashUrl + '?local=true', type: 'application/dash+xml' }];
 			} else {
 				let formattedSrc;
@@ -126,17 +132,11 @@
 						width: Number(quality[0])
 					};
 				});
-			}
 
-			if (get(playerSavePlaybackPosition)) {
-				try {
-					const playerPos = localStorage.getItem(`v_${data.video.videoId}`);
-					if (playerPos) {
-						player.currentTime = Number(playerPos);
-					}
-				} catch {}
+				loadPlayerPos();
 			}
 		} else {
+			playerIsLive = true;
 			src = [
 				{
 					src: data.video.hlsUrl + '?local=true',
@@ -177,7 +177,20 @@
 		document.documentElement.style.setProperty('--audio-bg', currentTheme['--surface']);
 	});
 
+	function loadPlayerPos() {
+		if (get(playerSavePlaybackPosition)) {
+			try {
+				const playerPos = localStorage.getItem(`v_${data.video.videoId}`);
+				if (playerPos) {
+					player.currentTime = Number(playerPos);
+				}
+			} catch {}
+		}
+	}
+
 	function savePlayerPos() {
+		if (data.video.hlsUrl) return;
+
 		try {
 			if (get(playerSavePlaybackPosition) && player.currentTime) {
 				if (player.currentTime < player.duration - 10 && player.currentTime > 10) {
@@ -204,7 +217,7 @@
 	autoPlay={$playerAutoPlay && !isSyncing}
 	loop={$playerAlwaysLoop}
 	title={data.video.title}
-	streamType={data.video.hlsUrl ? 'live' : 'on-demand'}
+	streamType={playerIsLive ? 'live' : 'on-demand'}
 	viewType={audioMode ? 'audio' : 'video'}
 	keep-alive
 	{src}
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index e5af7ad7..6bb08a03 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -12,7 +12,7 @@
 	} from '../store';
 	import { getDeArrow, getThumbnail, getVideo } from './Api';
 	import type { Notification, PlaylistPageVideo, Video, VideoBase, VideoPlay } from './Api/model';
-	import { cleanNumber, proxyVideoUrl, truncate, videoLength } from './misc';
+	import { cleanNumber, proxyVideoUrl, videoLength } from './misc';
 	import type { PlayerEvents } from './player';
 
 	export let video: VideoBase | Video | Notification | PlaylistPageVideo;
@@ -150,6 +150,10 @@
 		showVideoPreview = true;
 		try {
 			videoPreview = await getVideo(video.videoId, get(playerProxyVideos));
+			if (videoPreview.hlsUrl) {
+				showVideoPreview = false;
+				videoPreview = null;
+			}
 		} catch {
 			showVideoPreview = true;
 		}
@@ -178,11 +182,12 @@
 						style="max-width: 100%; max-height: 200px;"
 						autoplay
 						poster={img.src}
+						width="100%"
+						height="100%"
 						muted={videoPreviewMuted}
 						volume={0.5}
 						src={videoPreview.formatStreams[0].url}
 					>
-						<track label="" kind="subtitles" srclang="" src="" default />
 					</video>
 				</div>
 			{:else}
@@ -240,8 +245,14 @@
 <div class="small-padding">
 	<nav class="no-margin">
 		<div class="max">
-			<a href={watchUrl.toString()}><div class="bold">{truncate(video.title)}</div></a>
-			<div>
+			<a
+				href={watchUrl.toString()}
+				style="display: flex; justify-content:flex-start; position: absolute; width: 100%;"
+				><div class="bold" style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
+					{video.title}
+				</div></a
+			>
+			<div style="margin-top: 1.4em;">
 				<a href={`/channel/${video.authorId}`}>{video.author}</a
 				>{#if !('publishedText' in video) && 'viewCountText' in video}
 					&nbsp;• {video.viewCountText}{/if}