Add header image to branding options

svelte/src/filesystem/viewers/Audio.svelte

@@ -1,6 +1,7 @@
 <script>
 import { createEventDispatcher, onMount } from 'svelte'
 import { fs_path_url } from '../FilesystemUtil';
+import FileTitle from '../../file_viewer/viewers/FileTitle.svelte';
 let dispatch = createEventDispatcher()
 
 export let state
@@ -37,7 +38,9 @@ onMount(() => {
 })
 </script>
 
+<slot></slot>
 <div class="container">
+	<FileTitle title={state.base.name}/>
 	<button on:click={() => dispatch("open_sibling", -1) }><i class="icon">skip_previous</i></button>
 	<button on:click={() => player.currentTime -= 10 }><i class="icon">replay_10</i></button>
 	<button on:click={toggle_play}>
@@ -65,7 +68,6 @@ onMount(() => {
 
 <style>
 .container {
-	margin: 50px 0 0 0;
 	padding: 0;
 	overflow-y: auto;
 	text-align: center;

svelte/src/filesystem/viewers/CustomBanner.svelte

@@ -0,0 +1,50 @@
+<script>
+export let path = []
+
+let image_uri
+let image_link
+$: update_links(path)
+const update_links = (path) => {
+	image_uri = null
+	image_link = null
+	for (let node of path) {
+		if (node.properties && node.properties.branding_enabled === "true") {
+			if (node.properties.brand_header_image) {
+				image_uri = "/api/filesystem/"+node.properties.brand_header_image
+			}
+			if (node.properties.brand_header_link) {
+				image_link = node.properties.brand_header_link
+			}
+		}
+	}
+}
+</script>
+
+{#if image_uri}
+	<div class="container">
+		{#if image_link}
+			<a class="link" href={image_link} target="_blank" rel="noreferrer">
+				<img class="image" src="{image_uri}" alt="User-provided banner"/>
+			</a>
+		{:else}
+			<img class="image" src="{image_uri}" alt="User-provided banner"/>
+		{/if}
+	</div>
+{/if}
+
+<style>
+.container {
+	margin: 6px 0;
+	text-align: center;
+}
+.link {
+	display: inline-block;
+}
+.image {
+	display: inline-block;
+	margin: auto;
+	max-height: 90px;
+	max-width: 100%;
+	border-radius: 6px;
+}
+</style>

svelte/src/filesystem/viewers/File.svelte

@@ -7,6 +7,8 @@ let dispatch = createEventDispatcher()
 export let state
 </script>
 
+<slot></slot>
+
 <h1>{state.base.name}</h1>
 
 <IconBlock icon_href={fs_thumbnail_url(state.base.path, 256, 256)}>

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -11,6 +11,7 @@ import Text from "./Text.svelte";
 import Video from "./Video.svelte";
 import Torrent from "./Torrent.svelte";
 import Zip from "./Zip.svelte";
+import CustomBanner from "./CustomBanner.svelte";
 
 export let fs_navigator
 export let edit_window
@@ -51,9 +52,13 @@ const state_update = async (base) => {
 		edit_window={edit_window}
 		on:loading
 		on:upload_picker
-	/>
+	>
+		<CustomBanner path={state.path}/>
+	</FileManager>
 {:else if viewer_type === "audio"}
-	<Audio state={state} on:open_sibling/>
+	<Audio state={state} on:open_sibling>
+		<CustomBanner path={state.path}/>
+	</Audio>
 {:else if viewer_type === "image"}
 	<Image state={state} on:open_sibling/>
 {:else if viewer_type === "video"}
@@ -61,13 +66,21 @@ const state_update = async (base) => {
 {:else if viewer_type === "pdf"}
 	<Pdf state={state}/>
 {:else if viewer_type === "text"}
-	<Text state={state}/>
+	<Text state={state}>
+		<CustomBanner path={state.path}/>
+	</Text>
 {:else if viewer_type === "torrent"}
-	<Torrent state={state} bind:this={viewer} on:loading on:download/>
+	<Torrent state={state} bind:this={viewer} on:loading on:download>
+		<CustomBanner path={state.path}/>
+	</Torrent>
 {:else if viewer_type === "zip"}
-	<Zip state={state} bind:this={viewer} on:loading on:download />
+	<Zip state={state} bind:this={viewer} on:loading on:download>
+		<CustomBanner path={state.path}/>
+	</Zip>
 {:else}
-	<File state={state} on:download/>
+	<File state={state} on:download>
+		<CustomBanner path={state.path}/>
+	</File>
 {/if}
 
 <style>

svelte/src/filesystem/viewers/Image.svelte

@@ -75,6 +75,7 @@ const mouseup = (e) => {
 	max-width: 100%;
 	max-height: 100%;
 	cursor: pointer;
+	box-shadow: 1px 1px 4px 0px var(--shadow_color);
 }
 .image.zoom {
 	max-width: none;

svelte/src/filesystem/viewers/Text.svelte

@@ -27,6 +27,7 @@ export const set_file = file => {
 
 
 <div class="container">
+	<slot></slot>
 	<pre bind:this={text_pre}>
 		Loading...
 	</pre>

svelte/src/filesystem/viewers/Torrent.svelte

@@ -73,6 +73,8 @@ const copy_magnet = () => {
 }
 </script>
 
+<slot></slot>
+
 <h1>{state.base.name}</h1>
 
 <IconBlock icon_href={fs_node_icon(state.base, 256, 256)}>

svelte/src/filesystem/viewers/Zip.svelte

@@ -59,6 +59,8 @@ const recursive_size = (file) => {
 }
 </script>
 
+<slot></slot>
+
 <h1>{state.base.name}</h1>
 
 <IconBlock icon_href={fs_node_icon(state.base, 256, 256)}>