diff --git a/src/lib/components/Utils/Spinner.svelte b/src/lib/components/Utils/Spinner.svelte
new file mode 100644
index 0000000..6b78121
--- /dev/null
+++ b/src/lib/components/Utils/Spinner.svelte
@@ -0,0 +1,26 @@
+<svg
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	class={$$restProps.class}
+	><style>
+		.spinner_ajPY {
+			transform-origin: center;
+			animation: spinner_AtaB 1.5s infinite linear;
+		}
+		@keyframes spinner_AtaB {
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+	</style><path
+		d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+		opacity=".25"
+		style="fill: currentColor"
+	/><path
+		d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+		class="spinner_ajPY"
+		style="fill: currentColor"
+	/></svg
+>
diff --git a/src/lib/components/VideoPlayer/VideoElement.svelte b/src/lib/components/VideoPlayer/VideoElement.svelte
index e16e623..328a040 100644
--- a/src/lib/components/VideoPlayer/VideoElement.svelte
+++ b/src/lib/components/VideoPlayer/VideoElement.svelte
@@ -14,13 +14,19 @@
 	export let muted = false;
 	export let volume = 1;
 	export let videoDidLoad = false;
+	export let buffering = false;
 
 	export let video: HTMLVideoElement;
 
+	// let hls: Hls | undefined;
+
 	$: playbackInfo && loadPlaybackInfo(playbackInfo);
 
 	function loadPlaybackInfo(playbackInfo: PlaybackInfo) {
 		videoDidLoad = false;
+		// video.src = '';
+		// video.srcObject = null;
+		// hls?.destroy();
 
 		const { playbackUrl, directPlay, backdrop, startTime } = playbackInfo;
 
@@ -30,6 +36,7 @@
 
 		if (!directPlay) {
 			if (Hls.isSupported()) {
+				console.log('HLS is supported, loading HLS.js');
 				const hls = new Hls();
 
 				hls.loadSource(playbackUrl);
@@ -94,6 +101,8 @@
 		videoDidLoad = true;
 		console.log('Video loaded');
 	}}
+	on:waiting={() => (buffering = true)}
+	on:playing={() => (buffering = false)}
 	on:dblclick
 	on:click={togglePlay}
 	autoplay
diff --git a/src/lib/components/VideoPlayer/VideoPlayer.svelte b/src/lib/components/VideoPlayer/VideoPlayer.svelte
index 926751d..006f4d1 100644
--- a/src/lib/components/VideoPlayer/VideoPlayer.svelte
+++ b/src/lib/components/VideoPlayer/VideoPlayer.svelte
@@ -8,9 +8,10 @@
 	import type { Selectable } from '../../selectable';
 	import { modalStack } from '../Modal/modal.store';
 	import SelectSubtitlesModal from './SelectSubtitlesModal.svelte';
-	import { ChatBubble, TextAlignLeft } from 'radix-icons-svelte';
+	import { ChatBubble, TextAlignLeft, Update } from 'radix-icons-svelte';
 	import IconButton from './IconButton.svelte';
 	import SelectAudioModal from './SelectAudioModal.svelte';
+	import Spinner from '../Utils/Spinner.svelte';
 
 	export let playbackInfo: PlaybackInfo | undefined;
 	export let subtitleInfo: SubtitleInfo | undefined;
@@ -26,6 +27,7 @@
 	export let muted = false;
 	export let volume = 1;
 	export let videoDidLoad = false;
+	let buffering = false;
 
 	export let video: HTMLVideoElement;
 
@@ -76,6 +78,27 @@
 		else console.error('No playback info when selecting audio stream');
 	}
 
+	function handleShortcuts(e: KeyboardEvent) {
+		if (e.key === ' ' || e.key === 'k') {
+			e.preventDefault();
+			if (paused) video.play();
+			else video.pause();
+		} else if (e.key === 'm') {
+			e.preventDefault();
+			video.muted = !video.muted;
+		} else if (e.key === 'f') {
+			e.preventDefault();
+			if (document.fullscreenElement) document.exitFullscreen();
+			else video.requestFullscreen();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			video.volume = Math.min(video.volume + 0.1, 1);
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			video.volume = Math.max(video.volume - 0.1, 0);
+		}
+	}
+
 	onDestroy(() => {
 		clearTimeout(showInterfaceTimeout);
 		clearTimeout(hideInterfaceTimeout);
@@ -105,6 +128,7 @@
 		bind:volume
 		bind:videoDidLoad
 		bind:video
+		bind:buffering
 	/>
 	<Container
 		class={classNames('absolute inset-x-12 top-8 transition-opacity', {
@@ -113,6 +137,11 @@
 	>
 		Title
 	</Container>
+	{#if buffering || !videoDidLoad}
+		<div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+			<Spinner class="w-12 h-12" />
+		</div>
+	{/if}
 	<Container
 		class={classNames('absolute inset-x-12 bottom-8 transition-opacity flex flex-col', {
 			'opacity-0': !showInterface
@@ -170,3 +199,5 @@
 		/>
 	</Container>
 </Container>
+
+<svelte:window on:keypress={handleShortcuts} />