fnx_web/svelte/src/user_home/SharingSettings.svelte

<script>
import { onMount } from "svelte";
import FilePicker from "../file_viewer/FilePicker.svelte";
import LoadingIndicator from "../util/LoadingIndicator.svelte";
import SuccessMessage from "../util/SuccessMessage.svelte";
import ThemePicker from "../util/ThemePicker.svelte";

let loading = false
let success_message

let file_picker
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
	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 = files[0].id
	} else if (currently_selecting === "background") {
		background_image = files[0].id
	} else if (currently_selecting === "footer") {
		footer_image = files[0].id
	}

	save()
}

let save = async () => {
	loading = true
	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)

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

// Embedding settings
let embed_domains = ""

const save_embed = async () => {
	loading = true
	const form = new FormData()
	form.append("domains", embed_domains)

	try {
		const resp = await fetch(
			window.api_endpoint+"/user/file_embed",
			{ 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
	}
}

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 : ""
	}

	embed_domains = window.user.file_embed_domains
})

</script>

<LoadingIndicator loading={loading}/>

<section>
	<h2>Sharing settings</h2>
	{#if !window.user.subscription.file_viewer_branding}
		<div class="highlight_red">
			Sharing settings are not available for your account. Subscribe to
			the Persistence plan or higher to enable these features.
		</div>
	{:else if !window.user.hotlinking_enabled}
		<div class="highlight_red">
			To use the sharing settings bandwidth sharing needs to be enabled.
			Enable bandwidth sharing on the
			<a href="/user/subscription">subscription page</a>.
		</div>
	{/if}
	<h3>File viewer branding</h3>
	<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>
	<h4>Theme</h4>
	<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
		theme={theme}
		on:theme_change={e => {theme = e.detail; save()}}>
	</ThemePicker>

	<h4>Header image</h4>
	<p>
		Will be shown above the file. Maximum height is 90px. Will be shrunk if
		larger. You can also add a link to open when the visitor clicks the
		image. The link need to start with 'https://'.
	</p>
	<button on:click={() => {select_file("header")}}>
		<i class="icon">add_photo_alternate</i>
		Select header image
	</button>
	<button on:click={() => {header_image = ""; save()}}>
		<i class="icon">close</i>
		Remove
	</button>
	<br/>
	<form class="form_row" on:submit|preventDefault={save}>
		<div class="shrink">Header image link:</div>
		<input class="grow" bind:value={header_link} type="text" placeholder="https://"/>
		<button class="shrink" action="submit"><i class="icon">save</i> Save</button>
	</form>

	{#if header_image}
		<div class="highlight_shaded">
			{#if header_link}
				<a href={header_link} target="_blank">
					<img class="banner_preview" src="/api/file/{header_image}" alt="Custom file viewer header"/>
				</a>
			{:else}
				<img class="banner_preview" src="/api/file/{header_image}" alt="Custom file viewer header"/>
			{/if}
		</div>
	{/if}

	<h4>Background image</h4>
	<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 = ""; save()}}>
		<i class="icon">close</i>
		Remove
	</button>
	{#if background_image}
		<div class="highlight_shaded">
			<img class="background_preview" src="/api/file/{background_image}" alt="Custom file viewer background"/>
		</div>
	{/if}

	<h4>Footer image</h4>
	<p>
		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 = ""; save()}}>
		<i class="icon">close</i>
		Remove
	</button>
	<br/>
	<form class="form_row" on:submit|preventDefault={save}>
		<div class="shrink">Footer image link:</div>
		<input class="grow" bind:value={footer_link} type="text" placeholder="https://"/>
		<button class="shrink" action="submit"><i class="icon">save</i> Save</button>
	</form>
	{#if footer_image}
		<div class="highlight_shaded">
			{#if footer_link}
				<a href={footer_link} target="_blank">
					<img class="banner_preview" src="/api/file/{footer_image}" alt="Custom file viewer footer"/>
				</a>
			{:else}
				<img class="banner_preview" src="/api/file/{footer_image}" alt="Custom file viewer footer"/>
			{/if}
		</div>
	{/if}
	<br/>
	<h3>Embedding controls</h3>
	<p>
		Here you can control which websites are allowed to embed your files in
		their web pages. If a website that is not on this list tries to embed
		one of your files the request will be blocked.
	</p>
	<p>
		The list should be formatted as a list of domain names separated by a
		space. Like this: 'pixeldrain.com google.com twitter.com'
	</p>
	<form class="form_row" on:submit|preventDefault={save_embed}>
		<div class="shrink">Domain names:</div>
		<input class="grow" bind:value={embed_domains} type="text"/>
		<button class="shrink" action="submit"><i class="icon">save</i> Save</button>
	</form>
</section>

<FilePicker
	bind:this={file_picker}
	on:files={e => {add_file(e.detail)}}
	multi_select={false}
	title="Select image file"
/>

<style>
.banner_preview {
	max-height: 90px;
	max-width: 100%;
	display: block;
	margin: auto;
}
.background_preview {
	max-height: 200px;
	max-width: 100%;
	display: block;
	margin: auto;
}
.form_row {
	display: inline-flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
}
.grow {
	flex: 1 1 auto;
}
.shrink {
	flex: 0 0 auto;
}
</style>