Added caption support

README.md

@@ -20,7 +20,6 @@ Modern material design for Invidious
 - Audio only mode.
 
 ## Todo
-- Port to [vidstack](https://www.vidstack.io/) once dash is supported.
 - Complete channel view.
 - Add different search filters.
 - Playlist support.

materialious/src/lib/Api/index.ts

@@ -1,9 +1,9 @@
 import { get } from 'svelte/store';
-import { auth, invidiousInstance, returnYTDislikesInstance } from '../../store';
+import { auth, returnYTDislikesInstance } from '../../store';
 import type { Channel, Comments, ReturnYTDislikes, SearchSuggestion, Subscription, Video, VideoPlay } from './model';
 
 export function buildPath(path: string): string {
-  return `${get(invidiousInstance)}/api/v1/${path}`;
+  return `${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}/api/v1/${path}`;
 }
 
 export function buildAuthHeaders(): { headers: { Authorization: string; }; } {

materialious/src/lib/Api/model.ts

@@ -69,7 +69,7 @@ export interface FormatStreams {
 
 export interface Captions {
   label: string;
-  languageCode: string;
+  language_code: string;
   url: string;
 };
 

materialious/src/lib/Player.svelte

@@ -6,8 +6,6 @@
 	import { get } from 'svelte/store';
 	import type { MediaTimeUpdateEvent, PlayerSrc } from 'vidstack';
 	import type { MediaPlayerElement } from 'vidstack/elements';
-	import { MediaQualityRadioGroupElement, defineCustomElement } from 'vidstack/elements';
-	import 'vidstack/icons';
 	import {
 		playerAlwaysLoop,
 		playerAutoPlay,
@@ -19,8 +17,6 @@
 	} from '../store';
 	import type { VideoPlay } from './Api/model';
 
-	defineCustomElement(MediaQualityRadioGroupElement);
-
 	export let data: { video: VideoPlay };
 	export let currentTime: number = 0;
 	export let audioMode = false;
@@ -28,6 +24,7 @@
 	let player: MediaPlayerElement;
 	let src: PlayerSrc = [];
 	let categoryBeingSkipped = '';
+	let captions: { label: string; srcLang: string; src: string }[] = [];
 
 	export function seekTo(time: number) {
 		if (typeof player !== 'undefined') {
@@ -39,6 +36,17 @@
 
 	onMount(async () => {
 		if (!data.video.hlsUrl) {
+			if (data.video.captions) {
+				data.video.captions.forEach(async (caption) => {
+					player.textTracks.add({
+						label: caption.label,
+						kind: 'captions',
+						language: caption.language_code,
+						src: `${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}${caption.url}`
+					});
+				});
+			}
+
 			player.addEventListener('time-update', () => {
 				currentTime = player.currentTime;
 			});
@@ -141,14 +149,17 @@
 	{src}
 >
 	<media-provider>
-		<media-poster class="vds-poster" src={data.video.videoThumbnails[0].url}></media-poster>
+		{#if !audioMode}
+			<media-poster class="vds-poster" src={data.video.videoThumbnails[0].url}></media-poster>
+		{/if}
 	</media-provider>
 	<media-audio-layout></media-audio-layout>
-	<media-video-layout></media-video-layout>
 	{#if data.video.storyboards && data.video.storyboards.length > 3}
 		<media-video-layout
 			thumbnails={`${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}${data.video.storyboards[3].url}`}
 		></media-video-layout>
+	{:else}
+		<media-video-layout></media-video-layout>
 	{/if}
 </media-player>
 

materialious/src/store.ts

@@ -1,7 +1,6 @@
 import { persisted } from 'svelte-persisted-store';
 import { writable, type Writable } from 'svelte/store';
 
-export const invidiousInstance = persisted('invidiousInstance', import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE);
 export const returnYTDislikesInstance = persisted('returnYTDislikesInstance', import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE);
 export const darkMode: Writable<null | boolean> = persisted("darkMode", null);
 export const themeColor: Writable<null | string> = persisted("themeColor", null);