Rewrite home page in svelte

svelte/rollup.config.js

@@ -35,6 +35,7 @@ export default [
 	"user_buckets",
 	"user_file_manager",
 	"admin_panel",
+	"home_page",
 ].map((name, index) => ({
 	input: `src/${name}.js`,
 	output: {

svelte/src/home_page.js

@@ -0,0 +1,8 @@
+import App from './home_page/HomePage.svelte';
+
+const app = new App({
+	target: document.getElementById("uploader"),
+	props: {}
+});
+
+export default app;

svelte/src/home_page/HomePage.svelte

@@ -0,0 +1,490 @@
+<script>
+import UploadProgressBar from "./UploadProgressBar.svelte"
+import { copy_text, domain_url } from "../util/Util.svelte"
+import { tick } from "svelte"
+import Facebook from "../icons/Facebook.svelte"
+import Reddit from "../icons/Reddit.svelte"
+import Twitter from "../icons/Twitter.svelte"
+import Tumblr from "../icons/Tumblr.svelte"
+
+// === UPLOAD LOGIC ===
+
+let file_input_field
+
+const file_input_change = (event) => {
+	// Start uploading the files async
+	upload_files(event.target.files)
+
+	// This resets the file input field
+	file_input_field.nodeValue = ""
+}
+
+let active_uploads = 0
+let upload_queue = []
+
+let state = "idle" // idle, uploading, finished
+
+const upload_files = async (files) => {
+	// Add files to the queue
+	for (let i = 0; i < files.length; i++) {
+		upload_queue.push({
+			file: files.item(i),
+			name: files.item(i).name,
+			status: "queued",
+			component: null,
+			id: "",
+			on_finished: finish_upload,
+		})
+	}
+
+	// Reassign array and wait for tick to complete. After the tick is completed
+	// each upload progress bar will have bound itself to its array item
+	upload_queue = upload_queue
+	await tick()
+
+	start_upload()
+}
+
+const start_upload = () => {
+	let finished_count = 0
+
+	for (let i = 0; i < upload_queue.length && active_uploads < 3; i++) {
+		if (upload_queue[i].status == "queued") {
+			upload_queue[i].status = "uploading"
+			active_uploads++
+
+			upload_queue[i].component.start()
+		} else if (upload_queue[i].status == "finished") {
+			finished_count++
+		}
+	}
+
+	if (active_uploads === 0 && finished_count != 0) {
+		state = "finished"
+		uploads_finished()
+	} else {
+		state = "uploading"
+	}
+}
+
+const finish_upload = (file) => {
+	active_uploads--
+	start_upload()
+}
+
+// === SHARING BUTTONS ===
+
+let navigator_share = !!(window.navigator && window.navigator.share)
+let share_title = ""
+let share_link = ""
+
+let btn_upload_text
+let btn_copy_link
+let btn_open_link
+let btn_share_email
+let btn_share_twitter
+let btn_share_facebook
+let btn_share_reddit
+let btn_share_tumblr
+let btn_create_list
+let btn_copy_links
+let btn_copy_markdown
+let btn_copy_bbcode
+
+const uploads_finished = () => {
+	let count = upload_queue.reduce(
+		(acc, curr) => curr.status === "finished" ? acc + 1 : acc, 0,
+	)
+
+	if (count === 1) {
+		share_title = "Download " + upload_queue[0].name + " here"
+		share_link = domain_url() + "/u/" + upload_queue[0].id
+	} else if (count > 1) {
+		create_list(count+" files", true).then(resp => {
+			console.log("Automatic list ID " + resp.id)
+			share_title = "View a collection of "+count+" files here"
+			share_link = domain_url() + "/l/" + resp.id
+		}).catch(err => {
+			alert("Failed to generate link. Please check your internet connection and try again.\nError: " + err)
+		})
+	}
+}
+
+function create_list(title, anonymous) {
+	let files = upload_queue.reduce(
+		(acc, curr) => {
+			if (curr.status === "finished") {
+				acc.push({"id": curr.id})
+			}
+			return acc
+		},
+		[],
+	)
+
+	return fetch(
+		window.api_endpoint+"/list",
+		{
+			method: "POST",
+			headers: { "Content-Type": "application/json; charset=UTF-8" },
+			body: JSON.stringify({
+				"title": title,
+				"anonymous": anonymous,
+				"files": files
+			})
+		}
+	).then(resp => {
+		if (!resp.ok) {
+			return Promise.reject("HTTP error: " + resp.status)
+		}
+		return resp.json()
+	})
+}
+
+const copy_link = () => {
+	if (copy_text(share_link)) {
+		console.log('Text copied')
+		btn_copy_link.querySelector("span").textContent = "Copied!"
+		btn_copy_link.classList.add("button_highlight")
+	} else {
+		console.log('Copying not supported')
+		btn_copy_link.querySelector("span").textContent = "Failed"
+		btn_copy_link.classList.add("button_red")
+		alert("Your browser does not support copying text.")
+	}
+}
+
+const open_link = () => window.open(share_link, "_blank")
+const share_mail = () => window.open("mailto:please@set.address?subject=File%20on%20pixeldrain&body=" + share_link)
+const share_twitter = () => window.open("https://twitter.com/share?url=" + share_link)
+const share_facebook = () => window.open('https://www.facebook.com/sharer.php?u=' + share_link)
+const share_reddit = () => window.open('https://www.reddit.com/submit?url=' + share_link)
+const share_tumblr = () => window.open('https://www.tumblr.com/share/link?url=' + share_link)
+const share_navigator = () => {
+	window.navigator.share({ title: "Pixeldrain", text: share_title, url: share_link })
+}
+
+let created_lists = []
+const make_list_button = () => {
+	let count = upload_queue.reduce(
+		(acc, curr) => curr.status === "finished" ? acc + 1 : acc,
+		0,
+	)
+
+	let title = prompt(
+		"You are creating a list containing " + count + " files.\n"
+		+ "What do you want to call it?", "My New Album"
+	)
+	if (title === null) {
+		return
+	}
+	create_list(title, false).then(resp => {
+		created_lists.push({
+			title: title,
+			id: resp.id,
+			link: domain_url()+"/l/"+resp.id,
+			thumbnail: "/api/list/"+resp.id+"/thumbnail",
+		})
+		created_lists = created_lists
+		window.open('/l/' + resp.id, '_blank')
+	}).catch(err => {
+		alert("Failed to create list. Server says this:\n"+err)
+	})
+}
+
+const get_finished_files = () => {
+	return upload_queue.reduce(
+		(acc, curr) => {
+			if (curr.status === "finished") {
+				acc.push(curr)
+			}
+			return acc
+		},
+		[],
+	)
+}
+const copy_links = () => {
+	// Add the text to the textarea
+	let text = ""
+	let files = get_finished_files()
+	files.forEach(file => {
+		// Example: https://pixeldrain.com/u/abcd1234 Some_file.png
+		text += domain_url() + "/u/" + file.id + " " + file.name + "\n"
+	})
+	if (share_link.includes("/l/")) {
+		text += "\n" + share_link + " All " + files.length + " files\n"
+	}
+
+	// Copy the selected text
+	if (copy_text(text)) {
+		btn_copy_links.classList.add("button_highlight")
+		btn_copy_links.innerHTML = "Links copied to clipboard!"
+	} else {
+		btn_copy_links.classList.add("button_red")
+		btn_copy_links.innerHTML = "Copying links failed"
+	}
+}
+const copy_bbcode = () => {
+	// Add the text to the textarea
+	let text = ""
+	let files = get_finished_files()
+	files.forEach(file => {
+		// Example: [url=https://pixeldrain.com/u/abcd1234]Some_file.png[/url]
+		text += "[url=" + domain_url() + "/u/" + file.id + "]" + file.name + "[/url]\n"
+	})
+	if (share_link.includes("/l/")) {
+		text += "\n[url=" + share_link + "]All " + files.length + " files[/url]\n"
+	}
+
+	// Copy the selected text
+	if (copy_text(text)) {
+		btn_copy_bbcode.classList.add("button_highlight")
+		btn_copy_bbcode.innerHTML = "BBCode copied to clipboard!"
+	} else {
+		btn_copy_bbcode.classList.add("button_red")
+		btn_copy_bbcode.innerHTML = "Copying links failed"
+	}
+}
+const copy_markdown = () => {
+	// Add the text to the textarea
+	let text = ""
+	let files = get_finished_files()
+	files.forEach(file => {
+		// Example: * [Some_file.png](https://pixeldrain.com/u/abcd1234)
+
+		if (files.length > 1) { text += " * " }
+		text += "[" + file.name + "](" + domain_url() + "/u/" + file.id + ")\n"
+	})
+	if (share_link.includes("/l/")) {
+		text += " * [All " + files.length + " files](" + share_link + ")\n"
+	}
+
+	// Copy the selected text
+	if (copy_text(text)) {
+		btn_copy_markdown.classList.add("button_highlight")
+		btn_copy_markdown.innerHTML = "Markdown copied to clipboard!"
+	} else {
+		btn_copy_markdown.classList.add("button_red")
+		btn_copy_markdown.innerHTML = "Copying links failed"
+	}
+}
+
+let dragging = false
+const drop = (e) => {
+	dragging = false;
+	if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+		e.preventDefault()
+		e.stopPropagation()
+		upload_files(e.dataTransfer.files)
+	}
+}
+const paste = (e) => {
+	if (e.clipboardData.files[0]) {
+		e.preventDefault();
+		e.stopPropagation();
+		upload_files(e.clipboardData.files)
+	}
+}
+
+const keydown = (e) => {
+	if (e.ctrlKey || e.altKey || e.metaKey) {
+		return // prevent custom shortcuts from interfering with system shortcuts
+	}
+	if (document.activeElement.type && document.activeElement.type === "text") {
+		return // Prevent shortcuts from interfering with input fields
+	}
+	switch (e.key) {
+	case "u": file_input_field.click();   break
+	case "t": btn_upload_text.click();    break
+	case "c": btn_copy_link.click();      break
+	case "o": btn_open_link.click();      break
+	case "l": btn_create_list.click();    break
+	case "e": btn_share_email.click();    break
+	case "w": btn_share_twitter.click();  break
+	case "f": btn_share_facebook.click(); break
+	case "r": btn_share_reddit.click();   break
+	case "m": btn_share_tumblr.click();   break
+	case "a": btn_copy_links.click();     break
+	case "d": btn_copy_markdown.click();  break
+	case "b": btn_copy_bbcode.click();    break
+	}
+}
+
+</script>
+
+<svelte:window
+	on:dragover|preventDefault|stopPropagation={() => { dragging = true }}
+	on:dragenter|preventDefault|stopPropagation={() => { dragging = true }}
+	on:dragleave|preventDefault|stopPropagation={() => { dragging = false }}
+	on:drop={drop}
+	on:paste={paste}
+	on:keydown={keydown} />
+
+<div>
+	<div class="instruction" style="margin-top: 0;">
+		<div class="limit_width">
+			<span class="big_number">1</span>
+			<span class="instruction_text">Select files to upload</span>
+			<br/>
+			You can also drop files on this page from your file
+			manager or paste an image from your clipboard
+		</div>
+	</div>
+
+	<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
+	<button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
+		<i class="icon small">cloud_upload</i>
+		<u>U</u>pload Files
+	</button>
+
+	<a bind:this={btn_upload_text} href="/t" id="upload_text_button" class="button big_button button_highlight">
+		<i class="icon small">text_fields</i>
+		Upload <u>T</u>ext
+	</a>
+	<br/>
+	<p>
+		By uploading files to pixeldrain you acknowledge and accept our
+		<a href="/about#content-policy">content policy</a>.
+	<p>
+
+	<div class="instruction">
+		<div class="limit_width">
+			<span class="big_number">2</span>
+			<span class="instruction_text">Wait for the files to finish uploading</span>
+		</div>
+	</div>
+
+	<div id="file_drop_highlight" class="highlight_green" class:hide={!dragging}>
+		Gimme gimme gimme!<br/>
+		Drop your files to upload them
+	</div>
+
+	{#each upload_queue as file}
+		<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
+	{/each}
+
+	<div class="instruction">
+		<div class="limit_width">
+			<span class="big_number">3</span>
+			<span class="instruction_text">Share the files</span>
+		</div>
+	</div>
+
+	<div class="social_buttons" class:hide={!navigator_share}>
+		<button id="btn_social_share" on:click={share_navigator} class="social_buttons" disabled={state !== "finished"}>
+			<i class="icon">share</i><br/>
+			Share
+		</button>
+	</div>
+	<button bind:this={btn_copy_link} on:click={copy_link} class="social_buttons" disabled={state !== "finished"}>
+		<i class="icon">content_copy</i><br/>
+		<span><u>C</u>opy link</span>
+	</button>
+	<button bind:this={btn_open_link} on:click={open_link} class="social_buttons" disabled={state !== "finished"}>
+		<i class="icon">open_in_new</i><br/>
+		<span><u>O</u>pen link</span>
+	</button>
+	<div class="social_buttons" class:hide={navigator_share}>
+		<button bind:this={btn_share_email} on:click={share_mail} class="social_buttons" disabled={state !== "finished"}>
+			<i class="icon">email</i><br/>
+			<u>E</u>-Mail
+		</button>
+		<button bind:this={btn_share_twitter} on:click={share_twitter} class="social_buttons" disabled={state !== "finished"}>
+			<Twitter style="width: 40px; height: 40px; margin: 5px 15px;"></Twitter><br/>
+			T<u>w</u>itter
+		</button>
+		<button bind:this={btn_share_facebook} on:click={share_facebook} class="social_buttons" disabled={state !== "finished"}>
+			<Facebook style="width: 40px; height: 40px; margin: 5px 15px;"></Facebook><br/>
+			<u>F</u>acebook
+		</button>
+		<button bind:this={btn_share_reddit} on:click={share_reddit} class="social_buttons" disabled={state !== "finished"}>
+			<Reddit style="width: 40px; height: 40px; margin: 5px 15px;"></Reddit><br/>
+			<u>R</u>eddit
+		</button>
+		<button bind:this={btn_share_tumblr} on:click={share_tumblr} class="social_buttons" disabled={state !== "finished"}>
+			<Tumblr style="width: 40px; height: 40px; margin: 5px 15px;"></Tumblr><br/>
+			Tu<u>m</u>blr
+		</button>
+	</div>
+	<br/><br/>
+	<button bind:this={btn_create_list} on:click={make_list_button} disabled={state !== "finished"}>
+		<i class="icon">list</i> Create <u>l</u>ist with uploaded files
+	</button>
+	<button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
+		<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
+	</button>
+	<button bind:this={btn_copy_markdown} on:click={copy_markdown} disabled={state !== "finished"}>
+		<i class="icon">content_copy</i> Copy mark<u>d</u>own to clipboard
+	</button>
+	<button bind:this={btn_copy_bbcode} on:click={copy_bbcode} disabled={state !== "finished"}>
+		<i class="icon">content_copy</i> Copy <u>B</u>BCode to clipboard
+	</button>
+	<br/>
+
+	{#each created_lists as list}
+		<a class="file_button" href="{list.link}" target="_blank">
+			<img src="/api/list/{list.id}/thumbnail" alt="list icon"/>
+			List created!<br/>
+			{list.title}<br/>
+			<span class="file_button_title">{list.link}</span>
+		</a>
+	{/each}
+</div>
+
+<style>
+.big_button{
+	width: 40%;
+	min-width: 250px;
+	max-width: 400px;
+	margin: 10px !important;
+	border-radius: 5px;
+	font-size: 1.8em;
+}
+.instruction {
+	border-top: 1px solid var(--layer_2_color_border);
+	border-bottom: 1px solid var(--layer_2_color_border);
+	box-sizing: border-box;
+	margin: 1.5em 0;
+	padding: 5px;
+}
+.big_number {
+	font-size: 1.5em;
+	font-weight: bold;
+	line-height: 1em;
+	text-align: center;
+	display: inline-block;
+	box-sizing: border-box;
+	background-color: var(--highlight_color);
+	color: var(--highlight_text_color);
+	border-radius: 30px;
+	padding: 0.15em;
+	margin-right: 0.4em;
+	width: 1.4em;
+	height: 1.4em;
+	vertical-align: middle;
+}
+.instruction_text {
+	margin: 0.1em;
+	font-size: 1.5em;
+	display: inline;
+	box-sizing: border-box;
+	vertical-align: middle;
+}
+
+.social_buttons {
+	margin: 5px;
+	display: inline-block
+}
+.social_buttons.hide {
+	display: none;
+}
+.social_buttons > .icon {
+	font-size: 40px;
+	display: inline-block;
+	width: 40px;
+	height: 40px;
+	margin: 5px 15px;
+}
+.hide {
+	display: none;
+}
+</style>

svelte/src/home_page/UploadProgressBar.svelte

@@ -0,0 +1,264 @@
+<script>
+import { domain_url } from "../util/Util.svelte"
+import { formatDataVolume, formatDuration} from "../util/Formatting.svelte"
+
+export let job = {}
+let loaded_size
+let total_size
+let file_button
+let tries = 0
+let start_time = 0
+let remaining_time = 0
+
+let last_progress_time = 0
+let last_loaded_size = 0
+let transfer_rate = 0
+const on_progress = () => {
+	let now = new Date().getTime()
+
+	let prog = loaded_size / total_size
+	let elapsed_time = now - start_time
+	remaining_time = (elapsed_time/prog) - elapsed_time
+
+	// Calculate transfer rate
+	if (last_progress_time != 0) {
+		let new_rate = (1000 / (now - last_progress_time)) * (loaded_size - last_loaded_size)
+
+		// Apply smoothing by mixing it with the previous number 10:1
+		transfer_rate = (transfer_rate * 0.9) + (new_rate * 0.1)
+	}
+
+	last_progress_time = now
+	last_loaded_size = loaded_size
+
+	file_button.style.background = 'linear-gradient(' +
+		'to right, ' +
+		'var(--layer_3_color) 0%, ' +
+		'var(--highlight_color) ' + (prog * 100) + '%, ' +
+		'var(--layer_3_color) ' + ((prog * 100) + 1) + '%)'
+}
+
+let href = null
+let target = null
+const on_success = (resp) => {
+	job.id = resp.id
+	job.status = "finished"
+	job.on_finished(job)
+
+	add_upload_history(resp.id)
+
+	href = "/u/"+resp.id
+	target = "_blank"
+
+	file_button.style.background = 'var(--layer_3_color)'
+}
+
+let error_id = ""
+let error_reason = ""
+const on_failure = (status, message) => {
+	error_id = status
+	error_reason = message
+	job.status = "error"
+	file_button.style.background = 'var(--danger_color)'
+	file_button.style.color = 'var(--highlight_text_color)'
+
+	job.on_finished(job)
+}
+
+export const start = () => {
+	start_time = new Date().getTime()
+
+	let form = new FormData();
+	form.append('file', job.file, job.name);
+
+	let xhr = new XMLHttpRequest();
+	xhr.open("POST", window.api_endpoint+"/file", true);
+	xhr.timeout = 21600000; // 6 hours, to account for slow connections
+
+	xhr.upload.addEventListener("progress", evt => {
+		if (evt.lengthComputable) {
+			loaded_size = evt.loaded
+			total_size = evt.total
+			on_progress()
+		}
+	});
+
+	xhr.onreadystatechange = () => {
+		// readystate 4 means the upload is done
+		if (xhr.readyState !== 4) {
+			return
+		}
+
+		if (xhr.status >= 100 && xhr.status < 400) {
+			// Request is a success
+			on_success(JSON.parse(xhr.response))
+		} else if (xhr.status >= 400) {
+			// Request failed
+			console.log("Upload error. status: " + xhr.status + " response: " + xhr.response);
+			let resp = JSON.parse(xhr.response);
+
+			if (resp.value == "file_too_large" || resp.value == "ip_banned" || tries === 3) {
+				// Permanent failure
+				on_failure(resp.value, resp.message)
+			} else {
+				// Temporary failure, try again in 5 seconds
+				tries++
+				setTimeout(start, 5000)
+			}
+		} else {
+			// Request did not arrive
+			if (tries < 3) {
+				// Try again
+				tries++
+				setTimeout(start, 5000)
+			} else {
+				// Give up after three tries
+				on_failure(xhr.responseText, xhr.responseText)
+			}
+		}
+	};
+
+	xhr.send(form);
+}
+
+const add_upload_history = id => {
+	// Make sure the user is not logged in, for privacy. This keeps the
+	// files uploaded while logged in and anonymously uploaded files
+	// separated
+	if (document.cookie.includes("pd_auth_key")) { return; }
+
+	let uploads = localStorage.getItem("uploaded_files");
+	if (uploads === null) { uploads = ""; }
+
+	// Check if there are not too many values stored
+	if (uploads.length > 3600) {
+		// 3600 characters is enough to store 400 file IDs. If we exceed that
+		// number we'll drop the last two items
+		uploads = uploads.substring(
+			uploads.indexOf(",") + 1
+		).substring(
+			uploads.indexOf(",") + 1
+		);
+	}
+
+	// Save the new ID
+	localStorage.setItem("uploaded_files", id + "," + uploads);
+}
+</script>
+
+<a bind:this={file_button} class="upload_task" {href} {target}>
+	<div class="thumbnail">
+		{#if job.status === "queued"}
+			<i class="icon">cloud_queue</i>
+		{:else if job.status === "uploading"}
+			<i class="icon">cloud_upload</i>
+		{:else if job.status === "finished"}
+			<img src="/api/file/{job.id}/thumbnail" alt="file thumbnail" />
+		{:else if job.status === "error"}
+			<i class="icon">error</i>
+		{/if}
+	</div>
+	<div class="queue_body">
+		<div class="title">
+			{#if job.status === "error"}
+				{error_reason}
+			{:else}
+				{job.name}
+			{/if}
+		</div>
+		<div class="stats">
+			{#if job.status === "queued"}
+				Queued...
+			{:else if job.status === "uploading"}
+				<div class="stat">
+					{((loaded_size/total_size)*100).toPrecision(3)}%
+				</div>
+				<div class="stat">
+					ETA {formatDuration(remaining_time, 0)}
+				</div>
+				<div class="stat">
+					{formatDataVolume(transfer_rate, 3)}/s
+				</div>
+			{:else if job.status === "finished"}
+				<span class="file_link">
+					{domain_url() + "/u/" + job.id}
+				</span>
+			{:else if job.status === "error"}
+				{error_id}
+			{/if}
+		</div>
+	</div>
+</a>
+
+<style>
+
+.upload_task{
+	position: relative;
+	box-sizing: border-box;
+	width: 420px;
+	max-width: 90%;
+	height: 3.8em;
+	margin: 10px;
+	padding: 0;
+	overflow: hidden;
+	border-radius: 2px;
+	box-shadow: 2px 2px 8px -3px var(--shadow_color);
+	background-color: var(--layer_3_color);
+	color: var(--text_color);
+	word-break: break-all;
+	text-align: left;
+	line-height: 1.2em;
+	display: inline-flex;
+	flex-direction: row;
+	transition: box-shadow 0.3s, opacity 2s;
+	white-space: normal;
+	text-overflow: ellipsis;
+	text-decoration: none;
+	vertical-align: top;
+	cursor: pointer;
+}
+.upload_task:hover {
+	box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
+	text-decoration: none;
+}
+
+.upload_task > .thumbnail {
+	display: flex;
+	flex: 0 0 auto;
+	width: 3.8em;
+	margin-right: 4px;
+	align-items: center;
+	justify-content: center;
+}
+.upload_task > .thumbnail > img {
+	width: 100%;
+}
+.upload_task > .thumbnail > i {
+	font-size: 3em;
+}
+.upload_task > .queue_body {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+}
+.upload_task > .queue_body > .title {
+	flex: 1 1 auto;
+}
+.upload_task > .queue_body > .stats {
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: row;
+	height: 1.4em;
+	border-top: 1px solid var(--layer_3_color_border);
+	text-align: center;
+	font-family: 'monospace';
+	font-size: 0.9em;
+}
+.upload_task > .queue_body > .stats > .stat {
+	flex: 0 1 100%;
+}
+
+.file_link{
+	color: var(--highlight_color);
+}
+</style>

svelte/src/icons/Facebook.svelte

@@ -0,0 +1,5 @@
+<script>export let style;</script>
+
+<svg style={style} xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
+</svg>

svelte/src/icons/Reddit.svelte

@@ -0,0 +1,5 @@
+<script>export let style;</script>
+
+<svg style={style} xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
+</svg>

svelte/src/icons/Tumblr.svelte

@@ -0,0 +1,5 @@
+<script>export let style;</script>
+
+<svg style={style} xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17" />
+</svg>

svelte/src/icons/Twitter.svelte

@@ -0,0 +1,5 @@
+<script>export let style;</script>
+
+<svg style={style} xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+	<path fill="currentColor" d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
+</svg>

svelte/src/util/Formatting.svelte

@@ -36,12 +36,12 @@ const minute = second*60
 const hour = minute*60
 const day = hour*24
 
-export const formatDuration = (ms) => {
+export const formatDuration = (ms, decimals) => {
 	let res = ""
 	if (ms >= day)    { res += Math.floor(ms/day) + "d " }
 	if (ms >= hour)   { res += Math.floor((ms%day)/hour) + "h " }
 	if (ms >= minute) { res += Math.floor((ms%hour)/minute) + "m " }
-	return res + ((ms%minute)/second).toFixed(3) + "s"
+	return res + ((ms%minute)/second).toFixed(decimals) + "s"
 }
 
 export const formatDate = (date, hours, minutes, seconds) => {

svelte/src/util/Util.svelte

@@ -0,0 +1,38 @@
+<script context="module">
+
+export function print_date(date, hours, minutes, seconds) {
+	let dateStr = date.getFullYear()
+		+ "-" + ("00" + (date.getMonth() + 1)).slice(-2)
+		+ "-" + ("00" + date.getDate()).slice(-2)
+
+	if (hours) { dateStr += " " + ("00" + date.getHours()).slice(-2) }
+	if (minutes) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
+	if (seconds) { dateStr += ":" + ("00" + date.getMinutes()).slice(-2) }
+	return dateStr
+}
+
+export function copy_text(text) {
+	// Create a textarea to copy the text from
+	let ta = document.createElement("textarea");
+	ta.setAttribute("readonly", "readonly")
+	ta.style.position = "absolute";
+	ta.style.left = "-9999px";
+	ta.value = text; // Put the text in the textarea
+
+	// Add the textarea to the DOM so it can be seleted by the user
+	document.body.appendChild(ta);
+	ta.select() // Select the contents of the textarea
+	let success = document.execCommand("copy"); // Copy the selected text
+	document.body.removeChild(ta); // Remove the textarea
+	return success;
+}
+
+export function domain_url() {
+	let url = window.location.protocol + "//" + window.location.hostname;
+	if (window.location.port != "") {
+		url = url + ":" + window.location.port;
+	}
+	return url;
+}
+
+</script>