Update files with exported function instead of a reactive function

svelte/src/file_viewer/FilePreview.svelte

@@ -1,78 +0,0 @@
-<script>
-import { createEventDispatcher } from "svelte";
-
-import Spinner from "../util/Spinner.svelte";
-import Video from "./viewers/Video.svelte";
-import Audio from "./viewers/Audio.svelte";
-import Image from "./viewers/Image.svelte";
-import PDF from "./viewers/PDF.svelte";
-import Text from "./viewers/Text.svelte";
-import File from "./viewers/File.svelte";
-import Abuse from "./viewers/Abuse.svelte";
-import { file_type } from "./FileUtilities.svelte";
-
-let viewer_type = "loading"
-export let file = {
-	id: "",
-	name: "",
-	mime_type: "",
-	abuse_type: "",
-}
-
-$: update_file(file.id)
-const update_file = () => {
-	if (file.id === "") {
-		viewer_type = "loading"
-		return
-	}else if (file.abuse_type !== "") {
-		viewer_type = "abuse"
-		return
-	}
-
-	viewer_type = file_type(file)
-}
-
-let dispatch = createEventDispatcher()
-const download = () => { dispatch("download") }
-const next = () => { dispatch("next") }
-const prev = () => { dispatch("prev") }
-
-</script>
-
-<div class="file_container">
-	{#if viewer_type === "loading"}
-		<div class="center" style="width: 100px; height: 100px;">
-			<Spinner></Spinner>
-		</div>
-	{:else if viewer_type === "abuse"}
-		<Abuse file={file}></Abuse>
-	{:else if viewer_type === "image"}
-		<Image file={file}></Image>
-	{:else if viewer_type === "video"}
-		<Video file={file} on:download={download} on:prev={prev} on:next={next}></Video>
-	{:else if viewer_type === "audio"}
-		<Audio file={file} on:prev={prev} on:next={next}></Audio>
-	{:else if viewer_type === "pdf"}
-		<PDF file={file}></PDF>
-	{:else if viewer_type === "text"}
-		<Text file={file}></Text>
-	{:else if viewer_type === "file"}
-		<File file={file} on:download={download}></File>
-	{/if}
-</div>
-
-<style>
-.file_container {
-	width: 100%;
-	height: 100%;
-}
-.center{
-	position: relative;
-	display: block;
-	margin: auto;
-	max-width: 100%;
-	max-height: 100%;
-	top: 50%;
-	transform: translateY(-50%);
-}
-</style>

svelte/src/file_viewer/FileStats.svelte

@@ -16,7 +16,7 @@ let socket = null
 let error_msg = ""
 
 $: update_stats(file.id)
-let update_stats = (id) => {
+let update_stats = async id => {
 	if (id === "" || id == "demo") {
 		return
 	}

svelte/src/file_viewer/FileViewer.svelte

@@ -5,7 +5,7 @@ import { file_struct, list_struct, file_set_href } from "./FileUtilities.svelte"
 import Modal from "../util/Modal.svelte";
 import PixeldrainLogo from "../util/PixeldrainLogo.svelte";
 import DetailsWindow from "./DetailsWindow.svelte";
-import FilePreview from "./FilePreview.svelte";
+import FilePreview from "./viewers/FilePreview.svelte";
 import ListNavigator from "./ListNavigator.svelte";
 import FileStats from "./FileStats.svelte";
 import EditWindow from "./EditWindow.svelte";
@@ -29,6 +29,7 @@ let view = "" // file or gallery
 let file = file_struct
 let list = list_struct
 let is_list = false
+let file_preview
 
 let button_home
 let list_navigator
@@ -167,9 +168,11 @@ const open_file_index = async index => {
 
 	if (view !== "file") {
 		view = "file"
-		await tick() // Wait for the ListNavigator to render
+		await tick() // Wait for the file_preview and list_navigator to render
 	}
 
+	file_preview.set_file(file)
+
 	if (is_list) {
 		// Update the URL
 		location.replace("#item=" + index)
@@ -449,7 +452,7 @@ const keyboard_event = evt => {
 		<div id="file_preview" class="file_preview checkers" class:toolbar_visible class:skyscraper_visible>
 			{#if view === "file"}
 				<FilePreview
-					file={file}
+					bind:this={file_preview}
 					on:download={downloader.download_file}
 					on:prev={() => { if (list_navigator) { list_navigator.prev() }}}
 					on:next={() => { if (list_navigator) { list_navigator.next() }}}>

svelte/src/file_viewer/ListNavigator.svelte

@@ -4,6 +4,7 @@ import { createEventDispatcher } from "svelte";
 let dispatch = createEventDispatcher()
 
 export let files = []
+export let shuffle = false
 let file_list_div
 let selected_file_index = 0
 
@@ -24,14 +25,19 @@ export const rand_item = () => {
 	// Avoid viewing the same file multiple times
 	let rand
 	do {
-		rand = Math.round(Math.random() * files.length)
+		rand = Math.floor(Math.random() * files.length)
 		console.log("rand is " + rand)
 	} while(history.indexOf(rand) > -1)
 
-	set_item(rand)
+	select_item_event(rand)
 }
 
-export let shuffle = false
+// select_item_event signals to the FileViewer that the file needs to be
+// changed. The FileViewer then calls set_item if the change has been approved.
+// ListNavigator cannot call set_item itself because it will cause a loop.
+const select_item_event = idx => {
+	dispatch("set_file", idx)
+}
 
 export const set_item = idx => {
 	// Remove the class from the previous selected file
@@ -68,13 +74,6 @@ export const set_item = idx => {
 	}
 	animateScroll(start, 0)
 }
-
-// select_item signals to the FileViewer that the file needs to be changed. The
-// FileViewer then calls set_item if the change has been approved. ListNavigator
-// cannot call set_item itself because it will cause a loop.
-const select_item_event = idx => {
-	dispatch("set_file", idx)
-}
 </script>
 
 <div class="nav_container">

svelte/src/file_viewer/viewers/Abuse.svelte

@@ -1,5 +1,6 @@
 <script>
-export let file = {
+export const set_file = f => file = f
+let file = {
 	id: "",
 	name: "",
 	abuse_type: "",

svelte/src/file_viewer/viewers/Audio.svelte

@@ -1,5 +1,6 @@
 <script>
-import { onMount,  createEventDispatcher, tick } from "svelte";
+import { createEventDispatcher, tick } from "svelte";
+import LargeFileMessage from "./LargeFileMessage.svelte";
 let dispatch = createEventDispatcher()
 
 export let file = {
@@ -14,11 +15,17 @@ $: loop = file.name.includes(".loop.")
 let player
 let playing = false
 let audio_reload = false
-let media_session = false
 
-$: update_file(file.id)
+export const set_file = async f => {
-const update_file = async () => {
+	let same_file = f.id == file.id
-	if (media_session) {
+	file = f
+
+	if ('mediaSession' in navigator) {
+		navigator.mediaSession.setActionHandler('play', () => player.play());
+		navigator.mediaSession.setActionHandler('pause', () => player.pause());
+		navigator.mediaSession.setActionHandler('stop', () => player.stop());
+		navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
+		navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
 		navigator.mediaSession.metadata = new MediaMetadata({
 			title: file.name,
 			artist: "pixeldrain",
@@ -27,28 +34,18 @@ const update_file = async () => {
 		console.log("updating media session")
 	}
 
-	// When the component receives a new ID the video track does not automatically
+	// When the component receives a new ID the video track does not
-	// start playing the new video. So we use this little hack to make sure that the
+	// automatically start playing the new video. So we use this little hack to
-	// video is unloaded and loaded when the ID changes
+	// make sure that the video is unloaded and loaded when the ID changes
+	if (!same_file) {
 		audio_reload = true
 		await tick()
 		audio_reload = false
 	}
+}
 
 const toggle_play = () => playing ? player.pause() : player.play()
 
-onMount(() => {
-	if ('mediaSession' in navigator) {
-		media_session = true
-		navigator.mediaSession.setActionHandler('play', () => player.play());
-		navigator.mediaSession.setActionHandler('pause', () => player.pause());
-		navigator.mediaSession.setActionHandler('stop', () => player.stop());
-		navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
-		navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
-		update_file()
-	}
-})
-
 </script>
 
 <div class="container">
@@ -89,6 +86,9 @@ onMount(() => {
 			<source src={file.get_href} type={file.mime_type} />
 		</audio>
 	{/if}
+
+	<br/>
+	<LargeFileMessage file={file}></LargeFileMessage>
 </div>
 
 <style>

svelte/src/file_viewer/viewers/File.svelte

@@ -1,9 +1,10 @@
 <script>
 import { createEventDispatcher } from "svelte";
-import { formatDuration } from "../../util/Formatting.svelte";
+import LargeFileMessage from "./LargeFileMessage.svelte";
 let dispatch = createEventDispatcher()
 
-export let file = {
+export const set_file = f => file = f
+let file = {
 	id: "",
 	size: 0,
 	name: "",
@@ -25,21 +26,8 @@ export let file = {
 			<i class="icon">save</i> Download
 		</button>
 	</div>
-	{#if file.show_ads && file.size > 5e8}
 	<br/>
-		<div class="description" style="max-width: 700px; text-align: center;">
+	<LargeFileMessage file={file}></LargeFileMessage>
-			<!-- If the file is larger than 500 MB-->
-			<hr/>
-			Your download speed is currently limited to 4 MiB/s. Downloading this
-			file for free will take at least
-			{formatDuration((file.size/4194304)*1000)}.
-			You can
-			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
-				upgrade to Pro
-			</a>
-			to download at the fastest speed available.
-		</div>
-	{/if}
 </div>
 
 <style>

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -0,0 +1,77 @@
+<script>
+import { createEventDispatcher, tick } from "svelte";
+
+import Spinner from "../../util/Spinner.svelte";
+import Video from "./Video.svelte";
+import Audio from "./Audio.svelte";
+import Image from "./Image.svelte";
+import PDF from "./PDF.svelte";
+import Text from "./Text.svelte";
+import File from "./File.svelte";
+import Abuse from "./Abuse.svelte";
+import { file_type } from "../FileUtilities.svelte";
+
+let viewer
+let viewer_type = "loading"
+
+export const set_file = async file => {
+	if (file.id === "") {
+		viewer_type = "loading"
+		return
+	} else if (file.abuse_type !== "") {
+		viewer_type = "abuse"
+	} else {
+		viewer_type = file_type(file)
+	}
+
+	console.log("opening file", file)
+
+	// Render the viewer component and set the file type
+	await tick()
+	viewer.set_file(file)
+}
+
+let dispatch = createEventDispatcher()
+const download = () => { dispatch("download") }
+const next = () => { dispatch("next") }
+const prev = () => { dispatch("prev") }
+
+</script>
+
+<div class="file_container">
+	{#if viewer_type === "loading"}
+		<div class="center" style="width: 100px; height: 100px;">
+			<Spinner></Spinner>
+		</div>
+	{:else if viewer_type === "abuse"}
+		<Abuse bind:this={viewer}></Abuse>
+	{:else if viewer_type === "image"}
+		<Image bind:this={viewer}></Image>
+	{:else if viewer_type === "video"}
+		<Video bind:this={viewer} on:download={download} on:prev={prev} on:next={next}></Video>
+	{:else if viewer_type === "audio"}
+		<Audio bind:this={viewer} on:prev={prev} on:next={next}></Audio>
+	{:else if viewer_type === "pdf"}
+		<PDF bind:this={viewer}></PDF>
+	{:else if viewer_type === "text"}
+		<Text bind:this={viewer}></Text>
+	{:else if viewer_type === "file"}
+		<File bind:this={viewer} on:download={download}></File>
+	{/if}
+</div>
+
+<style>
+.file_container {
+	width: 100%;
+	height: 100%;
+}
+.center{
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+}
+</style>

svelte/src/file_viewer/viewers/Image.svelte

@@ -1,11 +1,12 @@
 <script>
-
+export const set_file = f => file = f
-export let file = {
+let file = {
 	id: "",
 	name: "",
 	mime_type: "",
 	get_href: "",
 }
+
 let container
 let zoom = false
 let x, y = 0

svelte/src/file_viewer/viewers/LargeFileMessage.svelte

@@ -0,0 +1,35 @@
+<script>
+import { formatDuration } from "../../util/Formatting.svelte";
+
+export let file = {
+	id: "",
+	name: "",
+	show_ads: false,
+	size: 0,
+}
+</script>
+
+{#if file.show_ads && file.size > 1e8}
+	<!-- If the file is larger than 100 MB we show a warning about the transfer speed -->
+	<div class="description">
+		<hr/>
+		Your download speed is currently limited to 4 MiB/s. Downloading this
+		file for free will take at least
+		{formatDuration((file.size/4194304)*1000)} (under ideal conditions).
+		You can
+		<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
+			upgrade to Pro
+		</a>
+		to download at the fastest speed available.
+	</div>
+{/if}
+
+<style>
+.description {
+	display: inline-block;
+	text-align: center;
+	padding-left: 8px;
+	vertical-align: middle;
+	max-width: 700px;
+}
+</style>

svelte/src/file_viewer/viewers/PDF.svelte

@@ -1,5 +1,6 @@
 <script>
-export let file = {
+export const set_file = f => file = f
+let file = {
 	get_href: "",
 }
 </script>

svelte/src/file_viewer/viewers/Text.svelte

@@ -1,31 +1,21 @@
 <script>
-import { onMount } from "svelte";
-
-export let file = {
-	id: "",
-	name: "",
-	mime_type: "",
-	size: 0,
-	get_href: "",
-}
 let container
 let text_type = ""
 
-$: update_file(file.id)
+export const set_file = file => {
-const update_file = async () => {
+	console.log("loading text file", file.id)
-	if (file.name.endsWith(".md") || file.name.endsWith(".markdown") || file.mime_type === "text/demo") {
-		markdown()
-	} else if (file.name.endsWith(".txt")) {
-		text()
-	} else {
-		code()
-	}
-}
 
-onMount(update_file)
+	if (file.name.endsWith(".md") || file.name.endsWith(".markdown") || file.mime_type === "text/demo") {
+		markdown(file)
+	} else if (file.name.endsWith(".txt")) {
+		text(file)
+	} else {
+		code(file)
+	}
+}
 
 let md_container
-const markdown = () => {
+const markdown = file => {
 	text_type = "markdown"
 
 	fetch("/u/" + file.id + "/preview").then(resp => {
@@ -39,7 +29,7 @@ const markdown = () => {
 }
 
 let text_pre
-const text = () => {
+const text = file => {
 	text_type = "text"
 
 	if (file.size > 1 << 22) { // File larger than 4 MiB
@@ -59,7 +49,7 @@ const text = () => {
 
 let code_pre
 let prettyprint = false
-const code = () => {
+const code = file => {
 	text_type = "code"
 
 	if (file.size > 1 << 22) { // File larger than 4 MiB

svelte/src/file_viewer/viewers/Video.svelte

@@ -1,9 +1,9 @@
 <script>
 import { onMount,  createEventDispatcher, tick } from "svelte";
-import { formatDuration } from "../../util/Formatting.svelte";
+import LargeFileMessage from "./LargeFileMessage.svelte";
 let dispatch = createEventDispatcher()
 
-export let file = {
+let file = {
 	id: "",
 	size: 0,
 	name: "",
@@ -20,8 +20,10 @@ let player
 let video_reload = false
 let media_session = false
 
-$: update_file(file.id)
+export const set_file = async f => {
-const update_file = async () => {
+	let same_file = f.id == file.id
+	file = f
+
 	if (media_session) {
 		navigator.mediaSession.metadata = new MediaMetadata({
 			title: file.name,
@@ -31,13 +33,15 @@ const update_file = async () => {
 		console.log("updating media session")
 	}
 
-	// When the component receives a new ID the video track does not automatically
+	// When the component receives a new ID the video track does not
-	// start playing the new video. So we use this little hack to make sure that the
+	// automatically start playing the new video. So we use this little hack to
-	// video is unloaded and loaded when the ID changes
+	// make sure that the video is unloaded and loaded when the ID changes
+	if (!same_file) {
 		video_reload = true
 		await tick()
 		video_reload = false
 	}
+}
 
 onMount(() => {
 	if ('mediaSession' in navigator) {
@@ -47,7 +51,6 @@ onMount(() => {
 		navigator.mediaSession.setActionHandler('stop', () => player.stop());
 		navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("prev", {}));
 		navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("next", {}));
-		update_file()
 	}
 })
 
@@ -74,9 +77,9 @@ let download = () => { dispatch("download", {}) }
 		<h1>This is a video file on pixeldrain</h1>
 		<img src={file.icon_href} alt="Video icon" style="display: inline-block; vertical-align: top;">
 		<div class="description">
-			The online video player on pixeldrain has been disabled to prevent
+			The online video player on pixeldrain is only available when the
-			abuse. You can still watch videos online by upgrading to Pro. Or
+			uploader of the file or the viewer pays for the bandwidth usage. You
-			download the video and watch it locally on your computer.
+			can still download the video and watch it locally on your computer.
 			<br/>
 			<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12" class="button button_highlight">
 				<i class="icon">upgrade</i> Upgrade to Pro
@@ -85,21 +88,8 @@ let download = () => { dispatch("download", {}) }
 				<i class="icon">save</i> Download
 			</button>
 		</div>
-		{#if file.show_ads && file.size > 5e8}
 		<br/>
-			<div class="description" style="max-width: 700px; text-align: center;">
+		<LargeFileMessage file={file}></LargeFileMessage>
-				<!-- If the file is larger than 500 MB-->
-				<hr/>
-				Your download speed is currently limited to 4 MiB/s. Downloading this
-				file for free will take at least
-				{formatDuration((file.size/4194304)*1000)}.
-				You can
-				<a href="https://www.patreon.com/join/pixeldrain/checkout?rid=5291427&cadence=12">
-					upgrade to Pro
-				</a>
-				to download at the fastest speed available.
-			</div>
-		{/if}
 	{/if}
 </div>
 
@@ -123,7 +113,7 @@ let download = () => { dispatch("download", {}) }
 }
 .description {
 	display: inline-block;
-	text-align: left;
+	text-align: justify;
 	padding-left: 8px;
 	vertical-align: middle;
 	max-width: 550px;