Update branding options

2022-04-14 18:55:30 +02:00
parent 7bfc9cb9f3
commit c4553524a6
6 changed files with 196 additions and 46 deletions
--- a/svelte/src/file_viewer/CustomBanner.svelte
+++ b/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>
--- a/svelte/src/file_viewer/FileViewer.svelte
+++ b/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) {
-		custom_header = window.api_endpoint+"/file/"+file.custom_header
+	if (!file.branding) {
+		return
 	}
-	if (file.custom_footer) {
-		custom_footer = window.api_endpoint+"/file/"+file.custom_footer
+	if (file.branding.header_image) {
+		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) {
-		custom_background = window.api_endpoint+"/file/"+file.custom_background
+	if (file.branding.background_image) {
+		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>
--- a/svelte/src/file_viewer/IntroPopup.svelte
+++ b/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;
--- a/svelte/src/file_viewer/UkraineModal.svelte
+++ b/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>