From b7b5edabb0ebf2ba9d04e1b875102fe5e1cab757 Mon Sep 17 00:00:00 2001 From: Fornax Date: Tue, 3 May 2022 16:38:48 +0200 Subject: [PATCH] Add custom branding links --- svelte/src/file_viewer/CustomBanner.svelte | 9 ++- svelte/src/file_viewer/FileViewer.svelte | 12 +++- svelte/src/user_home/SharingSettings.svelte | 78 +++++++++++++++------ 3 files changed, 76 insertions(+), 23 deletions(-) diff --git a/svelte/src/file_viewer/CustomBanner.svelte b/svelte/src/file_viewer/CustomBanner.svelte index 78d57ec..7c10590 100644 --- a/svelte/src/file_viewer/CustomBanner.svelte +++ b/svelte/src/file_viewer/CustomBanner.svelte @@ -1,11 +1,18 @@ {#if src}
- User-provided banner + {#if link} + + User-provided banner + + {:else} + User-provided banner + {/if}
{/if} diff --git a/svelte/src/file_viewer/FileViewer.svelte b/svelte/src/file_viewer/FileViewer.svelte index 2273d14..dcb2a6f 100644 --- a/svelte/src/file_viewer/FileViewer.svelte +++ b/svelte/src/file_viewer/FileViewer.svelte @@ -228,8 +228,10 @@ const toggle_gallery = () => { // any change let file_preview_background let custom_header = "" +let custom_header_link = "" let custom_background = "" let custom_footer = "" +let custom_footer_link = "" const apply_customizations = file => { if (!file.branding) { return @@ -237,9 +239,15 @@ const apply_customizations = file => { if (file.branding.header_image) { custom_header = window.api_endpoint+"/file/"+file.branding.header_image } + if (file.branding.header_link) { + custom_header_link = file.branding.header_link + } if (file.branding.footer_image) { custom_footer = window.api_endpoint+"/file/"+file.branding.footer_image } + if (file.branding.footer_link) { + custom_footer_link = file.branding.footer_link + } if (file.branding.background_image) { custom_background = window.api_endpoint+"/file/"+file.branding.background_image @@ -410,7 +418,7 @@ const keyboard_event = evt => { {/if} - +
@@ -581,7 +589,7 @@ const keyboard_event = evt => { {#if ads_enabled} {:else if custom_footer} - + {/if} {details_visible = e.detail}} title="File details" width="1200px"> diff --git a/svelte/src/user_home/SharingSettings.svelte b/svelte/src/user_home/SharingSettings.svelte index c277049..c82ec15 100644 --- a/svelte/src/user_home/SharingSettings.svelte +++ b/svelte/src/user_home/SharingSettings.svelte @@ -13,8 +13,10 @@ let currently_selecting = "" // header, background or footer let theme = "" let header_image = "" +let header_link = "" let background_image = "" let footer_image = "" +let footer_link = "" let select_file = t => { currently_selecting = t @@ -47,31 +49,42 @@ let save = async () => { const form = new FormData() form.append("theme", theme) form.append("header_image", header_image) + form.append("header_link", header_link) form.append("background_image", background_image) form.append("footer_image", footer_image) + form.append("footer_link", footer_link) - const resp = await fetch( - window.api_endpoint+"/user/file_customization", - { method: "PUT", body: form } - ); - if(resp.status >= 400) { - let json = await resp.json() - console.debug(json) - success_message.set(false, json.message) - return + try { + const resp = await fetch( + window.api_endpoint+"/user/file_customization", + { method: "PUT", body: form } + ); + if(resp.status >= 400) { + let json = await resp.json() + console.debug(json) + throw json.message + } + + success_message.set(true, "Changes saved") + } catch(err) { + success_message.set(false, err) + } finally { + loading = false } - success_message.set(true, "Changes saved") - loading = false } onMount(() => { + // The fields are undefined when they're empty. So we need to check if each + // field is defined before converting to a string 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 : "" + header_link = b.header_link ? b.header_link : "" background_image = b.background_image ? b.background_image : "" footer_image = b.footer_image ? b.footer_image : "" + footer_link = b.footer_link ? b.footer_link : "" } }) @@ -80,20 +93,19 @@ onMount(() => {
-

File viewer branding

{#if !window.user.subscription.file_viewer_branding}
- File viewer branding is not available for your account. Subscribe to - the Persistence plan or higher to enable this feature. + Sharing settings are not available for your account. Subscribe to + the Persistence plan or higher to enable these features.
{:else if !window.user.hotlinking_enabled}
- To use the branding feature bandwidth sharing needs to be enabled. - Without this the custom images will not be able to load. Enable - bandwidth sharing on the + To use the sharing settings bandwidth sharing needs to be enabled. + Enable bandwidth sharing on the subscription page.
{/if} +

File viewer branding

You can change the appearance of your file viewer pages. The images you @@ -120,7 +132,8 @@ onMount(() => {

Header image

Will be shown above the file. Maximum height is 90px. Will be shrunk if - larger. + larger. You can also add a link to open when the visitor clicks the + image. The link need to start with 'https://'.

+
+
+ Header image link: + + +
+ {#if header_image}
- + {#if header_link} + + + + {:else} + + {/if}
{/if} @@ -170,9 +196,21 @@ onMount(() => { close Remove +
+
+ Footer image link: + + +
{#if footer_image}
- + {#if footer_link} + + + + {:else} + + {/if}
{/if}