Update branding options

svelte/src/file_viewer/CustomBanner.svelte

@@ -16,7 +16,12 @@ export let border_top = false;
 .image {
 	display: block;
 	margin: auto;
-	max-height: 100px;
+	max-height: 90px;
 	max-width: 100%;
 }
+@media(max-height: 600px) {
+	.image {
+		max-height: 60px;
+	}
+}
 </style>

svelte/src/file_viewer/FileViewer.svelte

@@ -20,7 +20,7 @@ import GalleryView from "./GalleryView.svelte";
 import Spinner from "../util/Spinner.svelte";
 import Downloader from "./Downloader.svelte";
 import CustomBanner from "./CustomBanner.svelte";
-import UkrainePopup from "./UkrainePopup.svelte";
+import UkraineModal from "./UkraineModal.svelte";
 
 let loading = true
 let embedded = false
@@ -232,15 +232,18 @@ let custom_header = ""
 let custom_background = ""
 let custom_footer = ""
 const apply_customizations = file => {
-	if (file.custom_header) {
+	if (!file.branding) {
-		custom_header = window.api_endpoint+"/file/"+file.custom_header
+		return
 	}
-	if (file.custom_footer) {
+	if (file.branding.header_image) {
-		custom_footer = window.api_endpoint+"/file/"+file.custom_footer
+		custom_header = window.api_endpoint+"/file/"+file.branding.header_image
+	}
+	if (file.branding.footer_image) {
+		custom_footer = window.api_endpoint+"/file/"+file.branding.footer_image
 	}
 
-	if (file.custom_background) {
+	if (file.branding.background_image) {
-		custom_background = window.api_endpoint+"/file/"+file.custom_background
+		custom_background = window.api_endpoint+"/file/"+file.branding.background_image
 		file_preview_background.style.backgroundImage = "url('"+custom_background+"')"
 	} else {
 		file_preview_background.style.backgroundImage = ""
@@ -401,9 +404,9 @@ const keyboard_event = evt => {
 		{/if}
 	</div>
 
-	{#if ads_enabled}
+	<!-- {#if ads_enabled}
 		<UkrainePopup></UkrainePopup>
-	{/if}
+	{/if} -->
 
 	{#if is_list && view === "file"}
 		<ListNavigator
@@ -609,10 +612,10 @@ const keyboard_event = evt => {
 		<ReportWindow file={file} list={list}></ReportWindow>
 	</Modal>
 
-	<!-- Disabled to reduce clutter while the Ukraine banner is live -->
+	{#if ads_enabled}
-	<!-- {#if ads_enabled}
 		<IntroPopup target={button_home}></IntroPopup>
-	{/if} -->
+		<UkraineModal></UkraineModal>
+	{/if}
 
 	<Downloader bind:this={downloader} file={file} list={list}></Downloader>
 </div>

svelte/src/file_viewer/IntroPopup.svelte

@@ -37,7 +37,7 @@ onMount(() => {
 {#if visible}
 	<div bind:this={popup} in:fade out:fade class="intro_popup">
 		<span class="light">Upload your own files here</span>
-		<p>
+		<p style="margin: 0.4em 0;">
 			With pixeldrain you can share your files anywhere on the web. The
 			sky is the limit!
 		</p>
@@ -52,7 +52,7 @@ onMount(() => {
 	position: absolute;
 	top: 0;
 	left: 0;
-	width: 360px;
+	width: 380px;
 	max-width: 80%;
 	height: auto;
 	padding: 8px;

svelte/src/file_viewer/UkraineModal.svelte

@@ -0,0 +1,135 @@
+<script>
+import { onMount, tick } from "svelte";
+import Modal from "../util/Modal.svelte";
+
+let modal
+
+const close = () => {
+	localStorage.setItem("ukraine_modal_dismissed", "🇺🇦")
+	modal.hide()
+}
+onMount(async () => {
+	if (localStorage.getItem("ukraine_modal_dismissed") === "🇺🇦") {
+		return
+	}
+
+	let country = localStorage.getItem("country_code")
+	if (country === null) {
+		try {
+			const resp = await fetch(window.api_endpoint+"/misc/geo_ip")
+			if(resp.status >= 400) {
+				throw new Error(await resp.text())
+			}
+			country = (await resp.json()).country.iso_code;
+			localStorage.setItem("country_code", country)
+		} catch (err) {
+			console.log("Failed to get geo IP data: ", err)
+			return
+		}
+	}
+
+	if (country === "RU" || country === "BY") {
+		modal.show()
+		await tick()
+		resize()
+	}
+})
+
+let video
+const resize = () => {
+	video.style.height = (video.clientWidth*0.56)+"px"
+}
+
+let language = "RU"
+</script>
+
+<svelte:window on:resize={resize} />
+
+<Modal bind:this={modal} title="Vladimir Putin is lying to you!" width="1000px">
+	<iframe bind:this={video}
+		style="width: 100%; height: 562px;"
+		src="https://www.youtube-nocookie.com/embed/Y0IobS_JDww?start=1996"
+		title="YouTube video player"
+		frameborder="0"
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+		allowfullscreen
+	>
+	</iframe>
+	<br/>
+
+	{#if language === "EN"}
+		<div style="text-align: center; font-size: 1.4em;">
+			<a href="https://www.youtube.com/watch?v=Y0IobS_JDww&t=1996s" class="button" target="_blank">
+				<i class="icon">play_circle</i>
+				Watch on YouTube
+			</a>
+			<a href="https://pixeldrain.com/u/JZ9D7RFC" class="button" target="_blank">
+				<i class="icon">play_circle</i>
+				Watch on Pixeldrain
+			</a>
+		</div>
+		<div class="indent">
+			<p>
+				An independent news agency asked me to show this video to my
+				Russian visitors. The goal is to prevent the spread of
+				misinformation. Russian news agencies are spreading propaganda,
+				they cannot be trusted.
+			</p>
+			<p>
+				Ukraine is not governed by nazis. The Ukrainian parliament and
+				president were democratically elected. It is a peaceful nation.
+			</p>
+			<p>
+				The Russian army is bombing cities and committing genocide
+				across the country. Thousands of civilians have been brutally
+				murdered. This has to stop as soon as possible.
+			</p>
+		</div>
+	{:else if language === "RU"}
+		<div style="text-align: center; font-size: 1.4em;">
+			<a href="https://www.youtube.com/watch?v=Y0IobS_JDww&t=1996s" class="button" target="_blank">
+				<i class="icon">play_circle</i>
+				Смотреть на YouTube
+			</a>
+			<a href="https://pixeldrain.com/u/JZ9D7RFC" class="button" target="_blank">
+				<i class="icon">play_circle</i>
+				Смотреть на Pixeldrain
+			</a>
+		</div>
+		<div class="indent">
+			<p>
+				Независимое информационное агентство попросило меня показать это
+				видео моим российским посетителям. Цель состоит в том, чтобы
+				предотвратить распространение дезинформации. Российские
+				информационные агентства распространяют пропаганду, им нельзя
+				доверять.
+			</p>
+			<p>
+				Украина не управляется нацистами. Украинский парламент и
+				президент были избраны демократическим путем. Это миролюбивая
+				нация.
+			</p>
+			<p>
+				Российская армия бомбит города и совершает геноцид через всю
+				страну. Тысячи мирных жителей были зверски убиты. Это должно
+				прекратиться как можно скорее.
+			</p>
+		</div>
+	{/if}
+
+	<button on:click={() => language = "RU"} class:button_highlight={language === "RU"} style="float: left; margin: 8px; margin-right: 0;">
+		<i class="icon">translate</i> RU
+	</button>
+	<button on:click={() => language = "EN"} class:button_highlight={language === "EN"} style="float: left; margin: 8px;">
+		<i class="icon">translate</i> EN
+	</button>
+
+	<button style="float: right; margin: 8px;" on:click={close}>
+		<i class="icon">close</i>
+		{#if language === "EN"}
+			Don't show this again
+		{:else if language === "RU"}
+			Не показывать это снова
+		{/if}
+	</button>
+</Modal>

svelte/src/user_home/AccountSettings.svelte

@@ -144,11 +144,13 @@ let success_message
 let changes_made = false
 
 let file_picker
-let theme = ""
 let currently_selecting = "" // header, background or footer
-let header_image_id = ""
+
-let background_image_id = ""
+let theme = ""
-let footer_image_id = ""
+let header_image = ""
+let background_image = ""
+let footer_image = ""
+
 let select_file = t => {
 	currently_selecting = t
 	file_picker.open()
@@ -165,21 +167,21 @@ let add_file = files => {
 	}
 
 	if (currently_selecting === "header") {
-		header_image_id = files[0].id
+		header_image = files[0].id
 	} else if (currently_selecting === "background") {
-		background_image_id = files[0].id
+		background_image = files[0].id
 	} else if (currently_selecting === "footer") {
-		footer_image_id = files[0].id
+		footer_image = files[0].id
 	}
 
 	changes_made = true
 }
 let save = async () => {
 	const form = new FormData()
-	form.append("file_theme", theme)
+	form.append("theme", theme)
-	form.append("file_header", header_image_id)
+	form.append("header_image", header_image)
-	form.append("file_background", background_image_id)
+	form.append("background_image", background_image)
-	form.append("file_footer", footer_image_id)
+	form.append("footer_image", footer_image)
 
 	const resp = await fetch(
 		window.api_endpoint+"/user/file_customization",
@@ -197,10 +199,13 @@ let save = async () => {
 }
 
 onMount(() => {
-	theme = window.user.custom_file_theme
+	if (window.user.file_viewer_branding) {
-	header_image_id = window.user.custom_file_header
+		let b = window.user.file_viewer_branding
-	background_image_id = window.user.custom_file_background
+		theme = b.theme ? b.theme : ""
-	footer_image_id = window.user.custom_file_footer
+		header_image = b.header_image ? b.header_image : ""
+		background_image = b.background_image ? b.background_image : ""
+		footer_image = b.footer_image ? b.footer_image : ""
+	}
 })
 
 </script>
@@ -251,24 +256,27 @@ onMount(() => {
 		theme preference of the person viewing the file. Set to 'None' to let
 		the viewer choose their own theme.
 	</p>
-	<ThemePicker theme={theme} on:theme_change={e => {theme = e.detail; changes_made = true}}></ThemePicker>
+	<ThemePicker
+		theme={theme}
+		on:theme_change={e => {theme = e.detail; changes_made = true}}>
+	</ThemePicker>
 
 	<h3>Header image</h3>
 	<p>
-		Will be shown above the file. Maximum height is 100px. Will be shrunk if
+		Will be shown above the file. Maximum height is 90px. Will be shrunk if
 		larger.
 	</p>
 	<button on:click={() => {select_file("header")}}>
 		<i class="icon">add_photo_alternate</i>
 		Select header image
 	</button>
-	<button on:click={() => {header_image_id = ""}}>
+	<button on:click={() => {header_image = ""}}>
 		<i class="icon">close</i>
 		Remove
 	</button>
-	{#if header_image_id}
+	{#if header_image}
 		<div class="highlight_shaded">
-			<img class="banner_preview" src="/api/file/{header_image_id}" alt="Custom file viewer header"/>
+			<img class="banner_preview" src="/api/file/{header_image}" alt="Custom file viewer header"/>
 		</div>
 	{/if}
 
@@ -283,38 +291,37 @@ onMount(() => {
 		<i class="icon">add_photo_alternate</i>
 		Select background image
 	</button>
-	<button on:click={() => {background_image_id = ""}}>
+	<button on:click={() => {background_image = ""}}>
 		<i class="icon">close</i>
 		Remove
 	</button>
-	{#if background_image_id}
+	{#if background_image}
 		<div class="highlight_shaded">
-			<img class="background_preview" src="/api/file/{background_image_id}" alt="Custom file viewer background"/>
+			<img class="background_preview" src="/api/file/{background_image}" alt="Custom file viewer background"/>
 		</div>
 	{/if}
 
 	<h3>Footer image</h3>
 	<p>
-		Will be shown below the file. Maximum height is 100px. Will be shrunk if
+		Will be shown below the file. Maximum height is 90px. Will be shrunk if
 		larger.
 	</p>
 	<button on:click={() => {select_file("footer")}}>
 		<i class="icon">add_photo_alternate</i>
 		Select footer image
 	</button>
-	<button on:click={() => {footer_image_id = ""}}>
+	<button on:click={() => {footer_image = ""}}>
 		<i class="icon">close</i>
 		Remove
 	</button>
-	{#if footer_image_id}
+	{#if footer_image}
 		<div class="highlight_shaded">
-			<img class="banner_preview" src="/api/file/{footer_image_id}" alt="Custom file viewer footer"/>
+			<img class="banner_preview" src="/api/file/{footer_image}" alt="Custom file viewer footer"/>
 		</div>
 	{/if}
 
 	<hr/>
 
-
 	<button on:click={save} class:button_highlight={changes_made}>
 		<i class="icon">save</i> Save
 	</button>
@@ -326,7 +333,7 @@ onMount(() => {
 
 <style>
 .banner_preview {
-	max-height: 100px;
+	max-height: 90px;
 	max-width: 100%;
 	display: block;
 	margin: auto;

webcontroller/file_viewer.go

@@ -184,8 +184,8 @@ func fileStyleOverride(td *TemplateData, files []pixelapi.ListFile) {
 		return
 	}
 
-	if files[0].CustomTheme != "" {
+	if files[0].Branding != nil && files[0].Branding["theme"] != "" {
-		td.setStyle(userStyle(files[0].CustomTheme))
+		td.setStyle(userStyle(files[0].Branding["theme"]))
 	}
 }