Add file viewer branding options

svelte/src/file_viewer/CustomBanner.svelte

@@ -0,0 +1,22 @@
+<script>
+export let src = ""
+export let border_top = false;
+</script>
+
+{#if src}
+	<div class:border_top>
+		<img class="image" src="{src}" alt="User-provided banner"/>
+	</div>
+{/if}
+
+<style>
+.border_top {
+	border-top: solid 1px var(--layer_2_color_border);
+}
+.image {
+	display: block;
+	margin: auto;
+	max-height: 100px;
+	max-width: 100%;
+}
+</style>

svelte/src/file_viewer/EmbedWindow.svelte

@@ -1,4 +1,5 @@
 <script>
+import ThemePicker from "../util/ThemePicker.svelte";
 import { copy_text, domain_url } from "../util/Util.svelte";
 import { file_type } from "./FileUtilities.svelte";
 
@@ -33,6 +34,7 @@ let style = ""
 let set_style = s => {
 	style = s
 	embed_iframe()
+	update_example()
 }
 
 let embed_iframe = () => {
@@ -95,8 +97,17 @@ const copy = () => {
 	}
 }
 
-const example = () => {
-	preview_area.innerHTML = embed_html
+let example = false
+const toggle_example = () => {
+	example = !example
+	update_example()
+}
+const update_example = () => {
+	if (example) {
+		preview_area.innerHTML = embed_html
+	} else {
+		preview_area.innerHTML = ""
+	}
 }
 </script>
 
@@ -142,38 +153,8 @@ const example = () => {
 				You can change the pixeldrain theme for your embedded file. Try the
 				available themes <a href="/appearance">here</a>.
 			</p>
-			<div class="center">
-				<button class:button_highlight={style===""} on:click={() => {set_style("")}}>
-					Default
-				</button>
-				<button class:button_highlight={style==="classic"} on:click={() => {set_style("classic")}}>
-					Classic
-				</button>
-				<button class:button_highlight={style==="solarized_dark"} on:click={() => {set_style("solarized_dark")}}>
-					Solarized
-				</button>
-				<button class:button_highlight={style==="maroon"} on:click={() => {set_style("maroon")}}>
-					Maroon
-				</button>
-				<button class:button_highlight={style==="hacker"} on:click={() => {set_style("hacker")}}>
-					Hacker
-				</button>
-				<button class:button_highlight={style==="canta"} on:click={() => {set_style("canta")}}>
-					Canta
-				</button>
-				<button class:button_highlight={style==="nord"} on:click={() => {set_style("nord")}}>
-					Nord
-				</button>
-				<button class:button_highlight={style==="snowstorm"} on:click={() => {set_style("snowstorm")}}>
-					Snowstorm
-				</button>
-				<button class:button_highlight={style==="deepsea"} on:click={() => {set_style("deepsea")}}>
-					Deep sea
-				</button>
-				<button class:button_highlight={style==="skeuos"} on:click={() => {set_style("skeuos")}}>
-					Skeuos
-				</button>
-			</div>
+
+			<ThemePicker on:theme_change={e => set_style(e.detail)}></ThemePicker>
 		{:else}
 			<h3>Direct link</h3>
 			<p>
@@ -201,7 +182,7 @@ const example = () => {
 					Copy HTML
 				{/if}
 			</button>
-			<button on:click={example}>
+			<button on:click={toggle_example} class:button_highlight={example}>
 				<i class="icon">visibility</i> Show example
 			</button>
 		</div>

svelte/src/file_viewer/FilePicker.svelte

@@ -5,6 +5,7 @@ import DirectoryElement from "../user_file_manager/DirectoryElement.svelte";
 import Modal from "../util/Modal.svelte";
 let dispatch = createEventDispatcher()
 
+export let multi_select = true
 let modal;
 let directory_element;
 let input_search;
@@ -92,7 +93,7 @@ const keydown = (e) => {
 		</button>
 	</div>
 	<div class="dir_container">
-		<DirectoryElement bind:this={directory_element}></DirectoryElement>
+		<DirectoryElement bind:this={directory_element} multi_select={multi_select}></DirectoryElement>
 	</div>
 </Modal>
 

svelte/src/file_viewer/FileViewer.svelte

@@ -19,6 +19,7 @@ import Sharebar from "./Sharebar.svelte";
 import GalleryView from "./GalleryView.svelte";
 import Spinner from "../util/Spinner.svelte";
 import Downloader from "./Downloader.svelte";
+import CustomBanner from "./CustomBanner.svelte";
 
 let loading = true
 let embedded = false
@@ -145,6 +146,10 @@ const open_list = l => {
 	// correct file is opened
 	is_list = true
 
+	if (l.files.length !== 0) {
+		apply_customizations(l.files[0])
+	}
+
 	hash_change()
 }
 const hash_change = () => {
@@ -200,6 +205,8 @@ const open_file_index = async index => {
 		document.title = file.name+" ~ pixeldrain"
 	}
 
+	apply_customizations(file)
+
 	// Register a file view
 	fetch(window.api_endpoint + "/file/" + file.id + "/view", {
 		method: "POST",
@@ -215,6 +222,30 @@ const toggle_gallery = () => {
 	}
 }
 
+// Premium page customizations. In the gallery view we will use the
+// customizations for the first file in the list, else we simply use the
+// selected file. In most cases they are all the same so the user won't notice
+// any change
+let file_preview_background
+let custom_header = ""
+let custom_background = ""
+let custom_footer = ""
+const apply_customizations = file => {
+	if (file.custom_header) {
+		custom_header = window.api_endpoint+"/file/"+file.custom_header
+	}
+	if (file.custom_footer) {
+		custom_footer = window.api_endpoint+"/file/"+file.custom_footer
+	}
+
+	if (file.custom_background) {
+		custom_background = window.api_endpoint+"/file/"+file.custom_background
+		file_preview_background.style.backgroundImage = "url('"+custom_background+"')"
+	} else {
+		file_preview_background.style.backgroundImage = ""
+	}
+}
+
 let supports_fullscreen = !!document.documentElement.requestFullscreen
 let fullscreen = false
 const toggle_fullscreen = () => {
@@ -378,6 +409,8 @@ const keyboard_event = evt => {
 		</ListNavigator>
 	{/if}
 
+	<CustomBanner src={custom_header} border_top={true}></CustomBanner>
+
 	<div id="file_preview_window" class="file_preview_window">
 		<div id="toolbar" class="toolbar" class:toolbar_visible><div><div>
 			{#if view === "file"}
@@ -523,7 +556,13 @@ const keyboard_event = evt => {
 			<br/>
 		</div></div></div>
 
-		<div id="file_preview" class="file_preview checkers" class:toolbar_visible class:skyscraper_visible>
+		<div bind:this={file_preview_background}
+			class="file_preview_container"
+			class:checkers={!custom_background}
+			class:custom_background={!!custom_background}
+			class:toolbar_visible
+			class:skyscraper_visible
+		>
 			{#if view === "file"}
 				<FilePreview
 					bind:this={file_preview}
@@ -550,6 +589,8 @@ const keyboard_event = evt => {
 
 	{#if ads_enabled}
 		<AdLeaderboard></AdLeaderboard>
+	{:else if custom_footer}
+		<CustomBanner src={custom_footer}></CustomBanner>
 	{:else if !window.viewer_data.user_ads_enabled && !embedded}
 		<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
 			Thank you for supporting pixeldrain!
@@ -660,7 +701,7 @@ const keyboard_event = evt => {
 	height: auto;
 	margin: 0;
 }
-.file_preview {
+.file_preview_container {
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -676,6 +717,12 @@ const keyboard_event = evt => {
 	box-shadow: inset 2px 2px 10px 2px var(--shadow_color);
 	border-radius: 16px;
 }
+.file_preview_container.toolbar_visible { left: 8em; }
+.file_preview_container.skyscraper_visible { right: 160px; }
+.file_preview_container.custom_background {
+	background-size: cover;
+	background-position: center;
+}
 
 /* Toolbars */
 .toolbar {
@@ -692,8 +739,6 @@ const keyboard_event = evt => {
 	z-index: 1;
 }
 .toolbar.toolbar_visible { left: 0; }
-.file_preview.toolbar_visible { left: 8em; }
-.file_preview.skyscraper_visible { right: 160px; }
 
 /* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
 .toolbar > div {

svelte/src/file_viewer/GalleryView.svelte

@@ -156,7 +156,7 @@ const drop = (e, index) => {
 	{/if}
 </div>
 
-<FilePicker bind:this={file_picker} on:files={e => {add_files(e.detail)}}></FilePicker>
+<FilePicker bind:this={file_picker} on:files={e => {add_files(e.detail)}} multi_select={true}></FilePicker>
 
 <style>
 .gallery{

svelte/src/file_viewer/viewers/Torrent.svelte

@@ -91,7 +91,6 @@ const copy_magnet = () => {
 		</a>
 		<button
 			on:click={copy_magnet}
-			class="button"
 			class:button_highlight={copy_magnet_status === "copied"}
 			class:button_red={copy_magnet_status === "error"}
 		>