Add oembed tags. Fix sharing and copy link button. Add text and file viewer

svelte/src/filesystem/viewers/File.svelte

@@ -0,0 +1,31 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
+import { fs_thumbnail_url } from "../FilesystemUtil";
+let dispatch = createEventDispatcher()
+
+export let state
+</script>
+
+<h1>{state.base.name}</h1>
+
+<IconBlock icon_href={fs_thumbnail_url(state.root.id, state.base.path)}>
+	Type: {state.base.file_type}<br/>
+	No preview is available for this file type. Download to view it locally.
+	<br/>
+	<button class="button_highlight" on:click={() => {dispatch("download")}}>
+		<i class="icon">download</i>
+		<span>Download</span>
+	</button>
+</IconBlock>
+
+<style>
+h1 {
+	text-shadow: 1px 1px 3px var(--shadow_color);
+	line-break: anywhere;
+}
+.icon {
+	display: inline-block;
+	vertical-align: middle;
+}
+</style>

svelte/src/filesystem/viewers/FilePreview.svelte

@@ -1,8 +1,10 @@
 <script>
 import FileManager from "../filemanager/FileManager.svelte";
 import Audio from "./Audio.svelte";
+import File from "./File.svelte";
 import Image from "./Image.svelte";
 import Pdf from "./PDF.svelte";
+import Text from "./Text.svelte";
 import Video from "./Video.svelte";
 
 export let navigator
@@ -20,13 +22,17 @@ export let edit_window
 			on:loading
 		/>
 	{:else if state.viewer_type === "audio"}
-		<Audio state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
+		<Audio state={state} on:open_sibling/>
 	{:else if state.viewer_type === "image"}
-		<Image state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
+		<Image state={state} on:open_sibling/>
 	{:else if state.viewer_type === "video"}
-		<Video state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
+		<Video state={state} on:open_sibling/>
 	{:else if state.viewer_type === "pdf"}
 		<Pdf state={state}/>
+	{:else if state.viewer_type === "text"}
+		<Text state={state}/>
+	{:else}
+		<File state={state}/>
 	{/if}
 </div>
 

svelte/src/filesystem/viewers/Text.svelte

@@ -0,0 +1,53 @@
+<script>
+import { fs_file_url } from "../FilesystemUtil";
+
+export let state
+let text_pre
+
+$: set_file(state.base)
+
+export const set_file = file => {
+	console.debug("Loading text file", file.name)
+
+	if (file.size > 1 << 22) { // File larger than 4 MiB
+		text_pre.innerText = "File is too large to view online.\nPlease download and view it locally."
+		return
+	}
+
+	fetch(fs_file_url(state.root.id, file.path)).then(resp => {
+		if (!resp.ok) { return Promise.reject(resp.status) }
+		return resp.text()
+	}).then(resp => {
+		text_pre.innerText = resp
+	}).catch(err => {
+		text_pre.innerText = "Error loading file: " + err
+	})
+}
+</script>
+
+
+<div class="container">
+	<pre bind:this={text_pre}>
+		Loading...
+	</pre>
+</div>
+
+<style>
+.container {
+	background: var(--body_color);
+	text-align: left;
+	height: 100%;
+	width: 100%;
+	line-height: 1.5em;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+.container > pre {
+	margin: 0;
+	padding: 10px;
+	white-space: pre-wrap;
+	overflow: hidden;
+	border: none;
+	font-size: 0.9em;
+}
+</style>