Fix layout in horizontal video orientation

svelte/src/file_viewer/viewers/Video.svelte

@@ -62,11 +62,6 @@ const download = () => { dispatch("download", {}) }
 
 const toggle_play = () => playing ? player.pause() : player.play()
 
-// let video_seeker
-// const seek = () => {
-// 	player.fastSeek(player.duration * (video_seeker.value/1000))
-// }
-
 const seek_relative = delta => {
 	if (player.fastSeek) {
 		player.fastSeek(player.currentTime + delta)
@@ -75,17 +70,10 @@ const seek_relative = delta => {
 	}
 }
 
-// let volume_seeker
-// const volume_seek = () => {
-// 	player.volume = volume_seeker.value/100
-// }
-
 const mute = () => {
 	if (player.muted) {
-		// volume_seeker.disabled = false
 		player.muted = false
 	} else {
-		// volume_seeker.disabled = true
 		player.muted = true
 	}
 }
@@ -111,6 +99,7 @@ const fullscreen = () => {
 				</div>
 			{/if}
 
+			<div class="player_and_controls">
 				<div class="player">
 					<!-- svelte-ignore a11y-media-has-caption -->
 					<video
@@ -119,7 +108,7 @@ const fullscreen = () => {
 						playsinline
 						autoplay
 						loop={loop}
-					class="video drop_shadow"
+						class="video"
 						on:pause={() => playing = false }
 						on:play={() => playing = true }
 						on:ended={() => dispatch("next", {})}
@@ -167,6 +156,7 @@ const fullscreen = () => {
 					<div class="spacer"></div>
 				</div>
 			</div>
+		</div>
 
 	{/if}
 {:else}
@@ -202,6 +192,12 @@ h1 {
 	height: 100%;
 	width: 100%;
 }
+.player_and_controls {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+}
 .player {
 	flex: 1 1 auto;
 	display: flex;
@@ -231,7 +227,7 @@ h1 {
 	max-height: 100%;
 }
 @media(max-height: 500px) {
-	.container {
+	.player_and_controls {
 		flex-direction: row;
 	}
 	.controls {

svelte/src/filesystem/viewers/Video.svelte

@@ -60,10 +60,8 @@ const seek_relative = delta => {
 
 const mute = () => {
 	if (player.muted) {
-		// volume_seeker.disabled = false
 		player.muted = false
 	} else {
-		// volume_seeker.disabled = true
 		player.muted = true
 	}
 }
@@ -85,7 +83,7 @@ const fullscreen = () => {
 			the video and watching it locally.
 		</div>
 	{/if}
-
+	<div class="player_and_controls">
 		<div class="player">
 			{#if loaded}
 				<!-- svelte-ignore a11y-media-has-caption -->
@@ -95,7 +93,7 @@ const fullscreen = () => {
 					playsinline
 					autoplay
 					loop={loop}
-					class="video drop_shadow"
+					class="video"
 					on:pause={() => playing = false }
 					on:play={() => playing = true }
 					on:ended={() => dispatch("next", {})}
@@ -139,6 +137,7 @@ const fullscreen = () => {
 			</button>
 			<div class="spacer"></div>
 		</div>
+	</div>
 </div>
 
 <style>
@@ -148,6 +147,12 @@ const fullscreen = () => {
 	height: 100%;
 	width: 100%;
 }
+.player_and_controls {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+}
 .player {
 	flex: 1 1 auto;
 	display: flex;
@@ -177,7 +182,7 @@ const fullscreen = () => {
 	max-height: 100%;
 }
 @media(max-height: 500px) {
-	.container {
+	.player_and_controls {
 		flex-direction: row;
 	}
 	.controls {