pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add file viewer branding options

Browse Source
This commit is contained in:
Fornax
2022-02-07 12:00:22 +01:00
parent 1de3bb49c5
commit af82d45c6e
20 changed files with 477 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
svelte/src/user_home/AccountSettings.svelte
View File

@@ -1,4 +1,8 @@
<script>
import { onMount } from "svelte";
import FilePicker from "../file_viewer/FilePicker.svelte";
import SuccessMessage from "../util/SuccessMessage.svelte";
import ThemePicker from "../util/ThemePicker.svelte";
import Form from "./../util/Form.svelte";
let password_change = {
@@ -6,7 +10,7 @@ let password_change = {
fields: [
{
name: "old_password",
label: "Old password",
label: "Current password",
type: "current_password",
}, {
name: "new_password",
@@ -135,26 +139,195 @@ let delete_account = {
return {success: true, message: "Success! Your account has been scheduled for deletion in 7 days"}
},
}
let success_message
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 select_file = t => {
currently_selecting = t
file_picker.open()
}
let add_file = files => {
let type = files[0].type
if (type != "image/png" && type != "image/jpeg" && type != "image/gif" && type != "image/webp") {
success_message.set(false, "File must be an image type")
return
}
if (files[0].size > 10e6) {
success_message.set(false, "Files larger than 10 MB are not allowed. Recommended size is below 1 MB")
return
}
if (currently_selecting === "header") {
header_image_id = files[0].id
} else if (currently_selecting === "background") {
background_image_id = files[0].id
} else if (currently_selecting === "footer") {
footer_image_id = files[0].id
}
}
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)
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
}
success_message.set(true, "Changes saved")
}
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
})
</script>
<section>
<h2>Change password</h2>
<div class="highlight_dark">
<Form config={password_change}></Form>
</div>
<h2>Account settings</h2>
<h3>Change password</h3>
<Form config={password_change}></Form>
<h2>Change e-mail address</h2>
<div class="highlight_dark">
<Form config={email_change}></Form>
</div>
<h3>Change e-mail address</h3>
<Form config={email_change}></Form>
<h2>Change name</h2>
<div class="highlight_dark">
<Form config={name_change}></Form>
</div>
<h3>Change name</h3>
<Form config={name_change}></Form>
<h2>Delete account</h2>
<div class="highlight_dark">
<Form config={delete_account}></Form>
</div>
<h3>Delete account</h3>
<Form config={delete_account}></Form>
<h2>File viewer branding</h2>
{#if !window.user.subscription.file_viewer_branding}
<div class="highlight_red">
File viewer branding is not available for your account. Subscribe to
the Persistence plan or higher to enable this feature.
</div>
{:else if !window.user.hotlinking_enabled}
<div class="highlight_red">
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
<a href="/user/subscription">subscription page</a>.
</div>
{/if}
<SuccessMessage bind:this={success_message}></SuccessMessage>
<p>
You can change the appearance of your file viewer pages. The images you
choose here will be loaded each time someone visits one of your files.
The data usage will also be subtracted from your account's data cap.
Keep in mind that large images can take a very long time to load over
cellular connections. I recommend keeping the header and footer images
below 100 kB, and the background image below 1 MB. Allowed image types
are PNG, JPEG, GIF and WebP. If you want to use an animated banner you
should use APNG or WebP. Avoid using animated GIFs as they are very slow
to load.
</p>
<h3>Theme</h3>
<p>
Choose a theme for your download pages. This theme will override the
theme preference of the person viewing the file. Set to 'None' to let
the viewer choose their own theme.
</p>
<ThemePicker on:theme_change={e => theme = e.detail}></ThemePicker>
<h3>Header image</h3>
<p>
Will be shown above the file. Maximum height is 100px. 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 = ""}}>
<i class="icon">close</i>
Remove
</button>
{#if header_image_id}
<div class="highlight_dark">
<img class="banner_preview" src="/api/file/{header_image_id}" alt="Custom file viewer header"/>
</div>
{/if}
<h3>Background image</h3>
<p>
This image will be shown behind the file which is being viewed. I
recommend choosing something dark and not too distracting. Try to keep
the file below 1 MB to not harm page loading times. Using a JPEG image
with a quality value of 60 is usually good enough.
</p>
<button on:click={() => {select_file("background")}}>
<i class="icon">add_photo_alternate</i>
Select background image
</button>
<button on:click={() => {background_image_id = ""}}>
<i class="icon">close</i>
Remove
</button>
{#if background_image_id}
<div class="highlight_dark">
<img class="background_preview" src="/api/file/{background_image_id}" 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
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 = ""}}>
<i class="icon">close</i>
Remove
</button>
{#if footer_image_id}
<div class="highlight_dark">
<img class="banner_preview" src="/api/file/{footer_image_id}" alt="Custom file viewer footer"/>
</div>
{/if}
<br/>
<br/>
<button on:click={save}>
<i class="icon">save</i> Save
</button>
</section>
<FilePicker bind:this={file_picker} on:files={e => {add_file(e.detail)}} multi_select={false}></FilePicker>
<style>
.banner_preview {
max-height: 100px;
max-width: 100%;
display: block;
margin: auto;
}
.background_preview {
max-height: 200px;
max-width: 100%;
display: block;
margin: auto;
}
</style>