From c4553524a6fe04060214802871163a178d5d956d Mon Sep 17 00:00:00 2001 From: Fornax Date: Thu, 14 Apr 2022 18:55:30 +0200 Subject: [PATCH] Update branding options --- svelte/src/file_viewer/CustomBanner.svelte | 7 +- svelte/src/file_viewer/FileViewer.svelte | 27 ++-- svelte/src/file_viewer/IntroPopup.svelte | 4 +- svelte/src/file_viewer/UkraineModal.svelte | 135 ++++++++++++++++++++ svelte/src/user_home/AccountSettings.svelte | 65 +++++----- webcontroller/file_viewer.go | 4 +- 6 files changed, 196 insertions(+), 46 deletions(-) create mode 100644 svelte/src/file_viewer/UkraineModal.svelte diff --git a/svelte/src/file_viewer/CustomBanner.svelte b/svelte/src/file_viewer/CustomBanner.svelte index efff08a..78d57ec 100644 --- 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; + } +} diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte index 3859d2a..8b14231 100644 --- 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} - {#if ads_enabled} + {#if is_list && view === "file"} { - - + + {/if} diff --git a/svelte/src/file_viewer/IntroPopup.svelte b/svelte/src/file_viewer/IntroPopup.svelte index 4ea99b9..879c339 100644 --- a/svelte/src/file_viewer/IntroPopup.svelte +++ b/svelte/src/file_viewer/IntroPopup.svelte @@ -37,7 +37,7 @@ onMount(() => { {#if visible}
Upload your own files here -

+

With pixeldrain you can share your files anywhere on the web. The sky is the limit!

@@ -52,7 +52,7 @@ onMount(() => { position: absolute; top: 0; left: 0; - width: 360px; + width: 380px; max-width: 80%; height: auto; padding: 8px; diff --git a/svelte/src/file_viewer/UkraineModal.svelte b/svelte/src/file_viewer/UkraineModal.svelte new file mode 100644 index 0000000..2aa31f1 --- /dev/null +++ b/svelte/src/file_viewer/UkraineModal.svelte @@ -0,0 +1,135 @@ + + + + + + +
+ + {#if language === "EN"} + +
+

+ 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. +

+

+ Ukraine is not governed by nazis. The Ukrainian parliament and + president were democratically elected. It is a peaceful nation. +

+

+ 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. +

+
+ {:else if language === "RU"} + +
+

+ НСзависимоС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ агСнтство попросило мСня ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ это + Π²ΠΈΠ΄Π΅ΠΎ ΠΌΠΎΠΈΠΌ российским посСтитСлям. ЦСль состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ + ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ распространСниС Π΄Π΅Π·ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. РоссийскиС + ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ агСнтства Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡŽΡ‚ ΠΏΡ€ΠΎΠΏΠ°Π³Π°Π½Π΄Ρƒ, ΠΈΠΌ нСльзя + Π΄ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ. +

+

+ Π£ΠΊΡ€Π°ΠΈΠ½Π° Π½Π΅ управляСтся нацистами. Украинский ΠΏΠ°Ρ€Π»Π°ΠΌΠ΅Π½Ρ‚ ΠΈ + ΠΏΡ€Π΅Π·ΠΈΠ΄Π΅Π½Ρ‚ Π±Ρ‹Π»ΠΈ ΠΈΠ·Π±Ρ€Π°Π½Ρ‹ дСмократичСским ΠΏΡƒΡ‚Π΅ΠΌ. Π­Ρ‚ΠΎ ΠΌΠΈΡ€ΠΎΠ»ΡŽΠ±ΠΈΠ²Π°Ρ + нация. +

+

+ Российская армия Π±ΠΎΠΌΠ±ΠΈΡ‚ Π³ΠΎΡ€ΠΎΠ΄Π° ΠΈ ΡΠΎΠ²Π΅Ρ€ΡˆΠ°Π΅Ρ‚ Π³Π΅Π½ΠΎΡ†ΠΈΠ΄ Ρ‡Π΅Ρ€Π΅Π· всю + страну. Высячи ΠΌΠΈΡ€Π½Ρ‹Ρ… ΠΆΠΈΡ‚Π΅Π»Π΅ΠΉ Π±Ρ‹Π»ΠΈ звСрски ΡƒΠ±ΠΈΡ‚Ρ‹. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ + ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ скорСС. +

+
+ {/if} + + + + + + diff --git a/svelte/src/user_home/AccountSettings.svelte b/svelte/src/user_home/AccountSettings.svelte index 0bb290e..3cfe438 100644 --- a/svelte/src/user_home/AccountSettings.svelte +++ b/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 footer_image_id = "" + +let theme = "" +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("file_header", header_image_id) - form.append("file_background", background_image_id) - form.append("file_footer", footer_image_id) + form.append("theme", theme) + form.append("header_image", header_image) + form.append("background_image", background_image) + 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 - header_image_id = window.user.custom_file_header - background_image_id = window.user.custom_file_background - footer_image_id = window.user.custom_file_footer + if (window.user.file_viewer_branding) { + let b = window.user.file_viewer_branding + theme = b.theme ? b.theme : "" + header_image = b.header_image ? b.header_image : "" + background_image = b.background_image ? b.background_image : "" + footer_image = b.footer_image ? b.footer_image : "" + } }) @@ -251,24 +256,27 @@ onMount(() => { theme preference of the person viewing the file. Set to 'None' to let the viewer choose their own theme.

- {theme = e.detail; changes_made = true}}> + {theme = e.detail; changes_made = true}}> +

Header image

- 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.

- - {#if header_image_id} + {#if header_image}
- +
{/if} @@ -283,38 +291,37 @@ onMount(() => { add_photo_alternate Select background image - - {#if background_image_id} + {#if background_image}
- Custom file viewer background + Custom file viewer background
{/if}

Footer image

- 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.

- - {#if footer_image_id} + {#if footer_image}
- +
{/if}
- @@ -326,7 +333,7 @@ onMount(() => {