Added live stream support

materialious/src/lib/Player.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Plyr, { type PlyrEvent, type Track } from 'plyr';
 	// Needed to overwrite Beercss styles.
+	import Hls from 'hls.js';
 	import 'plyr/dist/plyr.css';
 	import { SponsorBlock, type Category } from 'sponsorblock-api';
 	import { onDestroy, onMount } from 'svelte';
@@ -25,7 +26,9 @@
 	onMount(async () => {
 		const playerPos = localStorage.getItem(data.video.videoId);
 
-		player = new Plyr('#player');
+		const videoElement = document.getElementById('player') as HTMLMediaElement;
+
+		player = new Plyr(videoElement);
 
 		const currentCategories = get(sponsorBlockCategories);
 
@@ -67,6 +70,10 @@
 		for (const caption of data.video.captions) {
 			// Have to preload captions, due to cors issue with how plyr
 			// grabs captions
+			if (!caption) {
+				continue;
+			}
+
 			const captions = await fetch(`${get(invidiousInstance)}${caption.url}`);
 			if (captions.status === 200) {
 				tracks.push({
@@ -85,11 +92,19 @@
 			},
 			poster: data.video.videoThumbnails[0].url,
 			tracks: tracks,
-			sources: data.video.formatStreams.map((format) => {
-				return { src: format.url, size: Number(format.size.split('x')[1]), type: format.type };
-			})
+			sources: []
 		};
 
+		if (!data.video.hlsUrl) {
+			player.source.sources = data.video.formatStreams.map((format) => {
+				return { src: format.url, size: Number(format.size.split('x')[1]), type: format.type };
+			});
+		} else {
+			const hls = new Hls();
+			hls.loadSource(data.video.hlsUrl + '?local=true');
+			hls.attachMedia(videoElement);
+		}
+
 		const currentTheme = await getDynamicTheme();
 
 		document.documentElement.style.setProperty('--plyr-color-main', currentTheme['--primary']);

materialious/src/lib/Thumbnail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import type { Video, VideoBase } from './Api/model';
+	import type { Notification, Video, VideoBase } from './Api/model';
 	import { cleanNumber, truncate } from './misc';
 
 	export let video: VideoBase | Video | Notification;
@@ -22,8 +22,8 @@
 		img.src = video.videoThumbnails[3].url;
 
 		img.onload = () => {
-			loading = false;
 			loaded = true;
+			loading = false;
 		};
 		img.onerror = () => {
 			loading = false;
@@ -76,7 +76,8 @@
 			{#if 'publishedText' in video}
 				<div>
 					{cleanNumber(video.viewCount)} • {video.publishedText}
-				</div>{/if}
+				</div>
+			{/if}
 		</div>
 	</nav>
 </div>

materialious/src/routes/watch/[slug]/+page.svelte

@@ -120,7 +120,7 @@
 			</article>
 
 			<div class="space"></div>
-			{#if data.comments.comments}
+			{#if data.comments}
 				<h6>{numberWithCommas(data.comments.commentCount)} comments</h6>
 				{#each data.comments.comments as comment}
 					<div class="comment">

materialious/src/routes/watch/[slug]/+page.ts

@@ -10,7 +10,7 @@ export async function load({ params }) {
   return {
     video: video,
     returnYTDislikes: await getDislikes(params.slug),
-    comments: await getComments(params.slug, { sort_by: "top", source: "youtube" }),
+    comments: video.liveNow ? null : await getComments(params.slug, { sort_by: "top", source: "youtube" }),
     subscribed: await amSubscribed(video.authorId)
   };
 };