From 64d0b364ba4b5db9a18f3302b742ba5c81587734 Mon Sep 17 00:00:00 2001
From: Fornax <wim@fornaxian.tech>
Date: Tue, 25 Oct 2022 12:13:50 +0200
Subject: [PATCH] Use flexbox to center images  and video

---
 svelte/src/file_viewer/FileViewer.svelte      |  1 +
 svelte/src/file_viewer/viewers/Audio.svelte   | 19 ++++++++++------
 .../file_viewer/viewers/FilePreview.svelte    |  5 +++--
 svelte/src/file_viewer/viewers/Image.svelte   |  9 ++------
 svelte/src/file_viewer/viewers/Video.svelte   | 22 +++++++++++--------
 5 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte
index 48902e9..bbbba41 100644
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/svelte/src/file_viewer/FileViewer.svelte
@@ -569,6 +569,7 @@ const keyboard_event = evt => {
 			{#if view === "file"}
 				<FilePreview
 					bind:this={file_preview}
+					is_list={is_list}
 					on:download={downloader.download_file}
 					on:prev={() => { if (list_navigator) { list_navigator.prev() }}}
 					on:next={() => { if (list_navigator) { list_navigator.next() }}}
diff --git a/svelte/src/file_viewer/viewers/Audio.svelte b/svelte/src/file_viewer/viewers/Audio.svelte
index 2362eb7..d93bff8 100644
--- a/svelte/src/file_viewer/viewers/Audio.svelte
+++ b/svelte/src/file_viewer/viewers/Audio.svelte
@@ -3,7 +3,8 @@ import { createEventDispatcher, tick } from "svelte";
 import BandwidthUsage from "./BandwidthUsage.svelte";
 let dispatch = createEventDispatcher()
 
-export let file = {
+export let is_list = false
+let file = {
 	id: "",
 	name: "",
 	mime_type: "",
@@ -53,9 +54,11 @@ const toggle_play = () => playing ? player.pause() : player.play()
 <div class="container">
 	<h1>{file.name}</h1>
 
-	<button on:click={() => dispatch("prev") }>
-		<i class="icon">skip_previous</i>
-	</button>
+	{#if is_list}
+		<button on:click={() => dispatch("prev") }>
+			<i class="icon">skip_previous</i>
+		</button>
+	{/if}
 	<button on:click={() => player.currentTime -= 10 }>
 		<i class="icon">replay_10</i>
 	</button>
@@ -69,9 +72,11 @@ const toggle_play = () => playing ? player.pause() : player.play()
 	<button on:click={() => player.currentTime += 10 }>
 		<i class="icon">forward_10</i>
 	</button>
-	<button on:click={() => dispatch("next") }>
-		<i class="icon">skip_next</i>
-	</button>
+	{#if is_list}
+		<button on:click={() => dispatch("next") }>
+			<i class="icon">skip_next</i>
+		</button>
+	{/if}
 	<br/><br/>
 
 	{#if file.id && !audio_reload}
diff --git a/svelte/src/file_viewer/viewers/FilePreview.svelte b/svelte/src/file_viewer/viewers/FilePreview.svelte
index f64e708..b7ffc8c 100644
--- a/svelte/src/file_viewer/viewers/FilePreview.svelte
+++ b/svelte/src/file_viewer/viewers/FilePreview.svelte
@@ -15,6 +15,7 @@ import SpeedLimit from "./SpeedLimit.svelte";
 
 let viewer
 let viewer_type = "loading"
+export let is_list = false
 
 export const set_file = async file => {
 	if (file.id === "") {
@@ -54,9 +55,9 @@ export const set_file = async file => {
 {:else if viewer_type === "image"}
 	<Image bind:this={viewer} on:loading></Image>
 {:else if viewer_type === "video"}
-	<Video bind:this={viewer} on:loading on:download on:prev on:next on:reload></Video>
+	<Video bind:this={viewer} is_list={is_list} on:loading on:download on:prev on:next on:reload></Video>
 {:else if viewer_type === "audio"}
-	<Audio bind:this={viewer} on:loading on:prev on:next on:reload></Audio>
+	<Audio bind:this={viewer} is_list={is_list} on:loading on:prev on:next on:reload></Audio>
 {:else if viewer_type === "pdf"}
 	<PDF bind:this={viewer}></PDF>
 {:else if viewer_type === "text"}
diff --git a/svelte/src/file_viewer/viewers/Image.svelte b/svelte/src/file_viewer/viewers/Image.svelte
index aa800e9..a21c778 100644
--- a/svelte/src/file_viewer/viewers/Image.svelte
+++ b/svelte/src/file_viewer/viewers/Image.svelte
@@ -67,10 +67,10 @@ const mouseup = (e) => {
 
 <style>
 .container {
-	display: block;
+	display: flex;
+	justify-content: center;
 	height: 100%;
 	width: 100%;
-	text-align: center;
 	overflow: hidden;
 }
 .container.zoom {
@@ -82,16 +82,11 @@ const mouseup = (e) => {
 	margin: auto;
 	max-width: 100%;
 	max-height: 100%;
-	top: 50%;
 	cursor: pointer;
-	transform: translateY(-50%);
-	box-shadow: 0 0 4px var(--shadow_color);
 }
 .image.zoom {
 	max-width: none;
 	max-height: none;
-	top: 0;
 	cursor: move;
-	transform: none;
 }
 </style>
diff --git a/svelte/src/file_viewer/viewers/Video.svelte b/svelte/src/file_viewer/viewers/Video.svelte
index e3f5ec3..759be29 100644
--- a/svelte/src/file_viewer/viewers/Video.svelte
+++ b/svelte/src/file_viewer/viewers/Video.svelte
@@ -4,6 +4,7 @@ import BandwidthUsage from "./BandwidthUsage.svelte";
 import TextBlock from "./TextBlock.svelte";
 let dispatch = createEventDispatcher()
 
+export let is_list = false
 let file = {
 	id: "",
 	size: 0,
@@ -112,9 +113,11 @@ const fullscreen = () => {
 
 			<div class="controls">
 				<div class="spacer"></div>
-				<button on:click={() => dispatch("prev") }>
-					<i class="icon">skip_previous</i>
-				</button>
+				{#if is_list}
+					<button on:click={() => dispatch("prev") }>
+						<i class="icon">skip_previous</i>
+					</button>
+				{/if}
 				<button on:click={() => seek_relative(-10)}>
 					<i class="icon">replay_10</i>
 				</button>
@@ -128,9 +131,11 @@ const fullscreen = () => {
 				<button on:click={() => seek_relative(10)}>
 					<i class="icon">forward_10</i>
 				</button>
-				<button on:click={() => dispatch("next") }>
-					<i class="icon">skip_next</i>
-				</button>
+				{#if is_list}
+					<button on:click={() => dispatch("next") }>
+						<i class="icon">skip_next</i>
+					</button>
+				{/if}
 				<div style="width: 16px; height: 8px;"></div>
 				<button on:click={mute} class:button_red={player && player.muted}>
 					{#if player && player.muted}
@@ -186,6 +191,8 @@ h1 {
 }
 .player {
 	flex: 1 1 auto;
+	display: flex;
+	justify-content: center;
 	text-align: center;
 	overflow: hidden;
 }
@@ -209,9 +216,6 @@ h1 {
 	margin: auto;
 	max-width: 100%;
 	max-height: 100%;
-	top: 50%;
-	transform: translateY(-50%);
-	box-shadow: 0 0 4px var(--shadow_color);
 }
 .video_icon {
 	display: inline-block;