feat: Subtitles and switching audio tracks

src/lib/components/VideoPlayer/VideoPlayer.svelte

@@ -1,14 +1,23 @@
 <script lang="ts">
 	import Container from '../../../Container.svelte';
 	import VideoElement from './VideoElement.svelte';
-	import type { PlaybackInfo } from './VideoPlayer';
+	import type { PlaybackInfo, SubtitleInfo, Subtitles } from './VideoPlayer';
 	import classNames from 'classnames';
 	import ProgressBar from './ProgressBar.svelte';
 	import { onDestroy } from 'svelte';
 	import type { Selectable } from '../../selectable';
+	import { modalStack } from '../Modal/modal.store';
+	import SelectSubtitlesModal from './SelectSubtitlesModal.svelte';
+	import { ChatBubble, TextAlignLeft } from 'radix-icons-svelte';
+	import IconButton from './IconButton.svelte';
+	import SelectAudioModal from './SelectAudioModal.svelte';
 
 	export let playbackInfo: PlaybackInfo | undefined;
+	export let subtitleInfo: SubtitleInfo | undefined;
 
+	export let modalHidden = false;
+
+	// Bindings
 	export let paused = false;
 	export let seeking = false;
 	export let totalTime = 0;
@@ -25,13 +34,16 @@
 	let hideInterfaceTimeout: ReturnType<typeof setTimeout>;
 	let container: Selectable;
 
+	$: if (modalHidden) video?.pause();
+	else video?.play();
+	$: if (!seeking && !modalHidden) handleShowInterface();
+
 	function handleShowInterface() {
 		showInterface = true;
 		clearTimeout(showInterfaceTimeout);
 		showInterfaceTimeout = setTimeout(() => {
-			if (seeking) handleShowInterface();
-			else handleHideInterface();
-		}, 5000);
+			if (!seeking && !modalHidden) handleHideInterface();
+		}, 4000);
 	}
 
 	function handleHideInterface() {
@@ -42,6 +54,28 @@
 		}, 200);
 	}
 
+	function selectSubtitles(subtitles?: Subtitles) {
+		if (subtitleInfo) {
+			if (subtitles)
+				subtitleInfo = {
+					...subtitleInfo,
+					subtitles
+				};
+			else
+				subtitleInfo = {
+					...subtitleInfo,
+					subtitles: undefined
+				};
+		} else {
+			console.error('No subtitle info when selecting subtitles');
+		}
+	}
+
+	function selectAudioStream(index: number) {
+		if (playbackInfo) playbackInfo.selectAudioTrack(index);
+		else console.error('No playback info when selecting audio stream');
+	}
+
 	onDestroy(() => {
 		clearTimeout(showInterfaceTimeout);
 		clearTimeout(hideInterfaceTimeout);
@@ -61,6 +95,7 @@
 >
 	<VideoElement
 		bind:playbackInfo
+		bind:subtitleInfo
 		bind:paused
 		bind:seeking
 		bind:totalTime
@@ -93,8 +128,35 @@
 					handleHideInterface();
 				}
 			}}
+			class="flex justify-between p-2"
 		>
-			Buttons
+			<div />
+			<div class="flex space-x-2">
+				<IconButton
+					on:clickOrSelect={() => {
+						// video.pause();
+						modalStack.create(SelectSubtitlesModal, {
+							subtitleInfo,
+							selectSubtitles
+						});
+					}}
+				>
+					<TextAlignLeft size={19} />
+				</IconButton>
+				<IconButton
+					on:clickOrSelect={() => {
+						// video.pause();
+						modalStack.create(SelectAudioModal, {
+							selectedAudioStreamIndex: playbackInfo?.audioStreamIndex || -1,
+							audioTracks: playbackInfo?.audioTracks || [],
+							selectAudioStream
+							// onClose: () => video.play()
+						});
+					}}
+				>
+					<ChatBubble size={19} />
+				</IconButton>
+			</div>
 		</Container>
 		<ProgressBar
 			bind:seeking