Add torrent file explorer

svelte/src/file_viewer/viewers/Audio.svelte

@@ -87,7 +87,7 @@ const toggle_play = () => playing ? player.pause() : player.play()
 		</audio>
 	{/if}
 
-	<br/>
+	<br/><br/>
 	<LargeFileMessage file={file}></LargeFileMessage>
 </div>
 

svelte/src/file_viewer/viewers/File.svelte

@@ -23,17 +23,18 @@ let file = {
 		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">save</i> Download
+			<i class="icon">save</i>
+			<span>Download</span>
 		</button>
 	</div>
-	<br/>
+	<br/><br/>
 	<LargeFileMessage file={file}></LargeFileMessage>
 </div>
 
 <style>
 .icon {
 	display: inline-block;
-	vertical-align: top;
+	vertical-align: middle;
 }
 .description {
 	display: inline-block;
@@ -41,6 +42,9 @@ let file = {
 	padding-left: 8px;
 	vertical-align: middle;
 	max-width: 600px;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 16px;
+	padding: 8px;
 }
 .container {
 	position: relative;

svelte/src/file_viewer/viewers/FilePreview.svelte

@@ -11,6 +11,7 @@ import File from "./File.svelte";
 import Abuse from "./Abuse.svelte";
 import { file_type } from "../FileUtilities.svelte";
 import RateLimit from "./RateLimit.svelte";
+import Torrent from "./Torrent.svelte";
 
 let viewer
 let viewer_type = "loading"
@@ -61,6 +62,8 @@ const loading = e => {dispatch("loading", e.detail)}
 		<PDF bind:this={viewer}></PDF>
 	{:else if viewer_type === "text"}
 		<Text bind:this={viewer}></Text>
+	{:else if viewer_type === "torrent"}
+		<Torrent bind:this={viewer} on:loading={loading} on:download={download}></Torrent>
 	{:else if viewer_type === "file"}
 		<File bind:this={viewer} on:download={download}></File>
 	{/if}

svelte/src/file_viewer/viewers/LargeFileMessage.svelte

@@ -12,7 +12,6 @@ export let file = {
 {#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).
@@ -31,5 +30,8 @@ export let file = {
 	padding-left: 8px;
 	vertical-align: middle;
 	max-width: 700px;
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 16px;
+	padding: 8px;
 }
 </style>

svelte/src/file_viewer/viewers/Torrent.svelte

@@ -0,0 +1,159 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import Magnet from "../../icons/Magnet.svelte";
+import { formatDate } from "../../util/Formatting.svelte"
+import { copy_text } from "../../util/Util.svelte";
+import TorrentItem from "./TorrentItem.svelte"
+
+let dispatch = createEventDispatcher()
+
+let status = "loading"
+export const set_file = async f => {
+	file = f
+
+	dispatch("loading", true)
+
+	try {
+		let resp = await fetch(f.info_href+"/torrent")
+
+		if (resp.status >= 400) {
+			let json = await resp.json()
+
+			if (json.value === "torrent_too_large") {
+				status = "too_large"
+				return
+			} else {
+				status = "parse_failed"
+				return
+			}
+		}
+
+		torrent = await resp.json()
+
+		// Generate magnet link
+		magnet = "magnet:?xt=urn:btih:" + torrent.info_hash +
+			"&dn=" + encodeURIComponent(Object.keys(torrent.files.children)[0])
+
+		torrent.trackers.forEach(tracker => {
+			magnet += "&tr="+encodeURIComponent(tracker)
+		})
+	} catch (err) {
+		console.error(err)
+	} finally {
+		dispatch("loading", false)
+	}
+
+	status = "finished"
+}
+let file = {
+	id: "",
+	size: 0,
+	name: "",
+	mime_type: "",
+	icon_href: "",
+	show_ads: false,
+}
+let torrent = {
+	trackers: [],
+	comment: "",
+	created_by: "",
+	created_at: "",
+	info_hash: "",
+	files: null,
+}
+
+let magnet = ""
+
+let copy_magnet_status = "" // empty, copied, or error
+const copy_magnet = () => {
+	if (copy_text(magnet)) {
+		copy_magnet_status = "copied"
+	} else {
+		copy_magnet_status = "error"
+		alert("Your browser does not support copying text.")
+	}
+
+	setTimeout(() => { copy_magnet_status = "" }, 60000)
+}
+</script>
+
+<div class="container">
+	<h1>Torrent file on pixeldrain</h1>
+	<img src={file.icon_href} alt="File icon" class="icon">
+	<div class="description" style="max-width: 650px">
+		Name: {file.name}<br/>
+		{#if status === "finished"}
+			Created by: {torrent.created_by}<br/>
+			Created at: {formatDate(new Date(torrent.created_at), true, true, true)}<br/>
+			Info hash: {torrent.info_hash}<br/>
+			Comment: {torrent.comment}<br/>
+			<a href={magnet} class="button button_highlight">
+				<Magnet></Magnet>
+				<span>Open magnet link</span>
+			</a>
+			<button
+				on:click={copy_magnet}
+				class="button"
+				class:button_highlight={copy_magnet_status === "copied"}
+				class:button_red={copy_magnet_status === "erorr"}
+			>
+				<Magnet></Magnet>
+				<span>
+					{#if copy_magnet_status === ""}
+						Copy magnet link
+					{:else if copy_magnet_status === "copied"}
+						Copied magnet
+					{:else if copy_magnet_status === "error"}
+						Error!
+					{/if}
+				</span>
+			</button>
+		{:else if status === "too_large"}
+			<p>
+				Torrent file is too large to parse. Please download the file and
+				add it to your torrent client locally.
+			</p>
+		{:else if status === "parse_failed"}
+			<p>
+				Torrent file could not be parsed. It may be corrupted.
+			</p>
+		{/if}
+		<button on:click={() => {dispatch("download")}} class="button">
+			<i class="icon">download</i>
+			<span>Download torrent file</span>
+		</button>
+	</div>
+	{#if status === "finished"}
+		<br/>
+		<br/>
+		<div class="description">
+			<h2>Files in this torrent</h2>
+			<TorrentItem item={torrent.files} />
+		</div>
+	{/if}
+</div>
+
+<style>
+.icon {
+	display: inline-block;
+	vertical-align: middle;
+}
+.description {
+	display: inline-block;
+	text-align: left;
+	padding-left: 8px;
+	vertical-align: middle;
+
+	background-color: rgba(0, 0, 0, 0.3);
+	border-radius: 16px;
+	padding: 8px;
+}
+.container {
+	position: relative;
+	display: block;
+	height: 100%;
+	width: 100%;
+	text-align: center;
+	overflow: auto;
+}
+</style>

svelte/src/file_viewer/viewers/TorrentItem.svelte

@@ -0,0 +1,28 @@
+<script>
+import { formatDataVolume } from "../../util/Formatting.svelte";
+
+export let item = {
+	size: 0,
+	children: null,
+}
+</script>
+
+<ul class="list_open">
+	{#each Object.entries(item.children) as [name, child]}
+		<li class:list_closed={!child.children}>
+			{name} ({formatDataVolume(child.size, 3)})<br/>
+			{#if child.children}
+				<svelte:self item={child}></svelte:self>
+			{/if}
+		</li>
+	{/each}
+</ul>
+
+<style>
+.list_open {
+	list-style-type: disclosure-open;
+}
+.list_closed {
+	list-style-type: disc;
+}
+</style>

svelte/src/file_viewer/viewers/Video.svelte

@@ -88,7 +88,7 @@ let download = () => { dispatch("download", {}) }
 				<i class="icon">save</i> Download
 			</button>
 		</div>
-		<br/>
+		<br/><br/>
 		<LargeFileMessage file={file}></LargeFileMessage>
 	{/if}
 </div>