Add torrent and zip viewers to filesystem
This commit is contained in:
@@ -1,4 +1,7 @@
|
||||
<script>
|
||||
import { tick } from "svelte";
|
||||
import Spinner from "../../util/Spinner.svelte";
|
||||
import { fs_node_type } from "../FilesystemUtil";
|
||||
import FileManager from "../filemanager/FileManager.svelte";
|
||||
import Audio from "./Audio.svelte";
|
||||
import File from "./File.svelte";
|
||||
@@ -6,31 +9,57 @@ import Image from "./Image.svelte";
|
||||
import Pdf from "./PDF.svelte";
|
||||
import Text from "./Text.svelte";
|
||||
import Video from "./Video.svelte";
|
||||
import Torrent from "./Torrent.svelte";
|
||||
import Zip from "./Zip.svelte";
|
||||
|
||||
export let fs_navigator
|
||||
export let state
|
||||
export let toolbar_visible
|
||||
export let edit_window
|
||||
|
||||
export let state
|
||||
let viewer
|
||||
let viewer_type = ""
|
||||
|
||||
export const state_update = async () => {
|
||||
// Update the viewer area with the right viewer type
|
||||
viewer_type = fs_node_type(state.base)
|
||||
|
||||
console.debug("Previewing file", state.base, "viewer type", viewer_type)
|
||||
|
||||
// Render the viewer component and set the file type
|
||||
await tick()
|
||||
if (viewer) {
|
||||
viewer.update()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="file_preview checkers" class:toolbar_visible>
|
||||
{#if state.viewer_type === "dir"}
|
||||
{#if viewer_type === ""}
|
||||
<div class="center">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
{:else if viewer_type === "dir"}
|
||||
<FileManager
|
||||
fs_navigator={fs_navigator}
|
||||
state={state}
|
||||
edit_window={edit_window}
|
||||
on:loading
|
||||
/>
|
||||
{:else if state.viewer_type === "audio"}
|
||||
{:else if viewer_type === "audio"}
|
||||
<Audio state={state} on:open_sibling/>
|
||||
{:else if state.viewer_type === "image"}
|
||||
{:else if viewer_type === "image"}
|
||||
<Image state={state} on:open_sibling/>
|
||||
{:else if state.viewer_type === "video"}
|
||||
<Video state={state} on:open_sibling/>
|
||||
{:else if state.viewer_type === "pdf"}
|
||||
{:else if viewer_type === "video"}
|
||||
<Video state={state} bind:this={viewer} on:open_sibling/>
|
||||
{:else if viewer_type === "pdf"}
|
||||
<Pdf state={state}/>
|
||||
{:else if state.viewer_type === "text"}
|
||||
{:else if viewer_type === "text"}
|
||||
<Text state={state}/>
|
||||
{:else if viewer_type === "torrent"}
|
||||
<Torrent state={state} bind:this={viewer} on:loading on:download/>
|
||||
{:else if viewer_type === "zip"}
|
||||
<Zip state={state} bind:this={viewer} on:loading on:download />
|
||||
{:else}
|
||||
<File state={state} on:download/>
|
||||
{/if}
|
||||
@@ -43,18 +72,29 @@ export let edit_window
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
display: block;
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
transition: left 0.25s;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
overflow: auto;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
border: 2px solid var(--separator);
|
||||
}
|
||||
|
||||
.file_preview.toolbar_visible {
|
||||
left: 8em;
|
||||
}
|
||||
|
||||
.center{
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 100px;
|
||||
max-width: 100%;
|
||||
height: 100px;
|
||||
max-height: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -56,15 +56,15 @@ const mouseup = (e) => {
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container.zoom {
|
||||
overflow: auto;
|
||||
justify-content: unset;
|
||||
}
|
||||
.image {
|
||||
position: relative;
|
||||
@@ -72,16 +72,11 @@ const mouseup = (e) => {
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
top: 50%;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 1px 1px 5px var(--shadow_color);
|
||||
}
|
||||
.image.zoom {
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
top: 0;
|
||||
cursor: move;
|
||||
transform: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
136
svelte/src/filesystem/viewers/Torrent.svelte
Normal file
136
svelte/src/filesystem/viewers/Torrent.svelte
Normal file
@@ -0,0 +1,136 @@
|
||||
<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"
|
||||
import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
|
||||
import TextBlock from "../../file_viewer/viewers/TextBlock.svelte";
|
||||
import { fs_file_url, fs_node_icon } from "../FilesystemUtil";
|
||||
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let state
|
||||
|
||||
let status = "loading"
|
||||
|
||||
export const update = async () => {
|
||||
dispatch("loading", true)
|
||||
|
||||
try {
|
||||
let resp = await fetch(fs_file_url(state.root.id, state.base.path)+"?torrent_info")
|
||||
|
||||
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 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>
|
||||
|
||||
<h1>{state.base.name}</h1>
|
||||
|
||||
<IconBlock icon_href={fs_node_icon(state.root.id, state.base)}>
|
||||
{#if status === "finished"}
|
||||
Created by: {torrent.created_by}<br/>
|
||||
Comment: {torrent.comment}<br/>
|
||||
Created at: {formatDate(new Date(torrent.created_at), true, true, true)}<br/>
|
||||
Info hash: {torrent.info_hash}<br/>
|
||||
<a href={magnet} class="button button_highlight">
|
||||
<Magnet style=""/>
|
||||
<span>Open magnet link</span>
|
||||
</a>
|
||||
<button
|
||||
on:click={copy_magnet}
|
||||
class:button_highlight={copy_magnet_status === "copied"}
|
||||
class:button_red={copy_magnet_status === "error"}
|
||||
>
|
||||
<Magnet style=""/>
|
||||
<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>
|
||||
</IconBlock>
|
||||
|
||||
{#if status === "finished"}
|
||||
<TextBlock>
|
||||
<h2>Files in this torrent</h2>
|
||||
<TorrentItem item={torrent.files} />
|
||||
</TextBlock>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
text-shadow: 1px 1px 3px var(--shadow_color);
|
||||
line-break: anywhere;
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
28
svelte/src/filesystem/viewers/TorrentItem.svelte
Normal file
28
svelte/src/filesystem/viewers/TorrentItem.svelte
Normal file
@@ -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>
|
||||
@@ -1,30 +1,45 @@
|
||||
<script>
|
||||
import { fs_file_url } from "../FilesystemUtil.js";
|
||||
import { createEventDispatcher, onMount } from 'svelte'
|
||||
import { onMount, createEventDispatcher, tick } from "svelte";
|
||||
import { fs_file_url } from "../FilesystemUtil";
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let state;
|
||||
export let state
|
||||
|
||||
// Used to detect when the file path changes
|
||||
let last_path = ""
|
||||
let loaded = false
|
||||
|
||||
let player
|
||||
let playing = false
|
||||
let media_session = false
|
||||
let loop = false
|
||||
|
||||
// Detect when the song changes
|
||||
$: update_session_meta(state.base.name)
|
||||
|
||||
const update_session_meta = name => {
|
||||
export const update = async () => {
|
||||
if (media_session) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: name,
|
||||
title: state.base.name,
|
||||
artist: "pixeldrain",
|
||||
album: "unknown",
|
||||
});
|
||||
console.debug("Updating media session")
|
||||
}
|
||||
|
||||
loop = state.base.name.includes(".loop.")
|
||||
|
||||
// When the component receives a new ID the video track does not
|
||||
// automatically start playing the new video. So we use this little hack to
|
||||
// make sure that the video is unloaded and loaded when the ID changes
|
||||
if (state.base.path != last_path) {
|
||||
last_path = state.base.path
|
||||
loaded = false
|
||||
await tick()
|
||||
loaded = true
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if ('mediaSession' in navigator) {
|
||||
media_session = true
|
||||
update_session_meta(state.base.name)
|
||||
|
||||
navigator.mediaSession.setActionHandler('play', () => player.play());
|
||||
navigator.mediaSession.setActionHandler('pause', () => player.pause());
|
||||
navigator.mediaSession.setActionHandler('stop', () => player.stop());
|
||||
@@ -32,37 +47,146 @@ onMount(() => {
|
||||
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("open_sibling", 1));
|
||||
}
|
||||
})
|
||||
|
||||
const toggle_play = () => playing ? player.pause() : player.play()
|
||||
|
||||
const seek_relative = delta => {
|
||||
if (player.fastSeek) {
|
||||
player.fastSeek(player.currentTime + delta)
|
||||
} else {
|
||||
player.currentTime = player.currentTime + delta
|
||||
}
|
||||
}
|
||||
|
||||
const mute = () => {
|
||||
if (player.muted) {
|
||||
// volume_seeker.disabled = false
|
||||
player.muted = false
|
||||
} else {
|
||||
// volume_seeker.disabled = true
|
||||
player.muted = true
|
||||
}
|
||||
}
|
||||
|
||||
const fullscreen = () => {
|
||||
player.requestFullscreen()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<video
|
||||
bind:this={player}
|
||||
class="player"
|
||||
src={fs_file_url(state.root.id, state.base.path)}
|
||||
autoplay="autoplay"
|
||||
controls="controls"
|
||||
on:ended={() => { dispatch("open_sibling", 1) }}>
|
||||
<track kind="captions"/>
|
||||
</video>
|
||||
{#if
|
||||
state.base.file_type === "video/x-matroska" ||
|
||||
state.base.file_type === "video/quicktime" ||
|
||||
state.base.file_type === "video/x-ms-asf"
|
||||
}
|
||||
<div class="compatibility_warning">
|
||||
This video file type is not compatible with every web
|
||||
browser. If the video fails to play you can try downloading
|
||||
the video and watching it locally.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="player">
|
||||
{#if loaded}
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video
|
||||
bind:this={player}
|
||||
controls
|
||||
playsinline
|
||||
autoplay
|
||||
loop={loop}
|
||||
class="video drop_shadow"
|
||||
on:pause={() => playing = false }
|
||||
on:play={() => playing = true }
|
||||
on:ended={() => dispatch("next", {})}
|
||||
>
|
||||
<source src={fs_file_url(state.root.id, state.base.path)} type={state.base.file_type} />
|
||||
</video>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="spacer"></div>
|
||||
<button on:click={() => dispatch("open_sibling", -1) }>
|
||||
<i class="icon">skip_previous</i>
|
||||
</button>
|
||||
<button on:click={() => seek_relative(-10)}>
|
||||
<i class="icon">replay_10</i>
|
||||
</button>
|
||||
<button on:click={toggle_play} class="button_highlight">
|
||||
{#if playing}
|
||||
<i class="icon">pause</i>
|
||||
{:else}
|
||||
<i class="icon">play_arrow</i>
|
||||
{/if}
|
||||
</button>
|
||||
<button on:click={() => seek_relative(10)}>
|
||||
<i class="icon">forward_10</i>
|
||||
</button>
|
||||
<button on:click={() => dispatch("open_sibling", 1) }>
|
||||
<i class="icon">skip_next</i>
|
||||
</button>
|
||||
<div style="width: 16px; height: 8px;"></div>
|
||||
<button on:click={mute} class:button_red={player && player.muted}>
|
||||
{#if player && player.muted}
|
||||
<i class="icon">volume_off</i>
|
||||
{:else}
|
||||
<i class="icon">volume_up</i>
|
||||
{/if}
|
||||
</button>
|
||||
<button on:click={fullscreen}>
|
||||
<i class="icon">fullscreen</i>
|
||||
</button>
|
||||
<div class="spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.player {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.player {
|
||||
.controls {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--shaded_background);
|
||||
padding: 0 2px 2px 2px;
|
||||
align-items: center;
|
||||
}
|
||||
.controls > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.controls > .spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.video {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 1px 1px 5px var(--shadow_color);
|
||||
}
|
||||
@media(max-height: 500px) {
|
||||
.container {
|
||||
flex-direction: row;
|
||||
}
|
||||
.controls {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.compatibility_warning {
|
||||
background-color: var(--shaded_background);
|
||||
border-bottom: 2px solid #6666FF;
|
||||
padding: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
93
svelte/src/filesystem/viewers/Zip.svelte
Normal file
93
svelte/src/filesystem/viewers/Zip.svelte
Normal file
@@ -0,0 +1,93 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { formatDataVolume, formatDate } from "../../util/Formatting.svelte"
|
||||
import ZipItem from "./ZipItem.svelte";
|
||||
import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
|
||||
import TextBlock from "../../file_viewer/viewers/TextBlock.svelte";
|
||||
import { fs_file_url, fs_node_icon } from "../FilesystemUtil";
|
||||
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let state
|
||||
|
||||
let status = "loading"
|
||||
|
||||
let zip = {
|
||||
size: 0,
|
||||
children: null,
|
||||
}
|
||||
let uncomp_size = 0
|
||||
let comp_ratio = 0
|
||||
|
||||
export const update = async () => {
|
||||
dispatch("loading", true)
|
||||
|
||||
try {
|
||||
let resp = await fetch(fs_file_url(state.root.id, state.base.path)+"?zip_info")
|
||||
|
||||
if (resp.status >= 400) {
|
||||
status = "parse_failed"
|
||||
return
|
||||
}
|
||||
|
||||
zip = await resp.json()
|
||||
|
||||
uncomp_size = recursive_size(zip)
|
||||
comp_ratio = (uncomp_size / state.base.file_size)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
} finally {
|
||||
dispatch("loading", false)
|
||||
}
|
||||
|
||||
status = "finished"
|
||||
}
|
||||
|
||||
const recursive_size = (file) => {
|
||||
let size = file.size
|
||||
|
||||
// If the file has children (array is iterable) we call this function on all
|
||||
// the children and add the size to our size accumulator
|
||||
if (file.children.forEach) {
|
||||
file.children.forEach(child => {
|
||||
size += recursive_size(child)
|
||||
});
|
||||
}
|
||||
|
||||
// Return the total size of this file and all its children
|
||||
return size
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>{state.base.name}</h1>
|
||||
|
||||
<IconBlock icon_href={fs_node_icon(state.root.id, state.base)}>
|
||||
Compressed size: {formatDataVolume(state.base.file_size, 3)}<br/>
|
||||
Uncompressed size: {formatDataVolume(uncomp_size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
|
||||
Uploaded on: {formatDate(state.base.date_created, true, true, true)}
|
||||
<br/>
|
||||
<button class="button_highlight" on:click={() => {dispatch("download")}}>
|
||||
<i class="icon">download</i>
|
||||
<span>Download</span>
|
||||
</button>
|
||||
</IconBlock>
|
||||
|
||||
{#if status === "finished"}
|
||||
<TextBlock>
|
||||
<h2>Files in this zip archive</h2>
|
||||
<ZipItem item={zip} />
|
||||
</TextBlock>
|
||||
{:else if status === "parse_failed"}
|
||||
<TextBlock>
|
||||
<p>
|
||||
Zip archive could not be parsed. It may be corrupted.
|
||||
</p>
|
||||
</TextBlock>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
text-shadow: 1px 1px 3px var(--shadow_color);
|
||||
line-break: anywhere;
|
||||
}
|
||||
</style>
|
||||
44
svelte/src/filesystem/viewers/ZipItem.svelte
Normal file
44
svelte/src/filesystem/viewers/ZipItem.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
import { formatDataVolume } from "../../util/Formatting.svelte";
|
||||
|
||||
export let item = {
|
||||
size: 0,
|
||||
children: null,
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- First get directories and render them as details collapsibles -->
|
||||
{#each Object.entries(item.children) as [name, child]}
|
||||
{#if child.children}
|
||||
<details>
|
||||
<summary>
|
||||
{name} ({formatDataVolume(child.size, 3)})
|
||||
</summary>
|
||||
<svelte:self item={child}></svelte:self>
|
||||
</details>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<!-- Then get files and render them as list items -->
|
||||
<ul>
|
||||
{#each Object.entries(item.children) as [name, child]}
|
||||
{#if !child.children}
|
||||
<li>
|
||||
{name} ({formatDataVolume(child.size, 3)})<br/>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
details {
|
||||
padding-left: 12px;
|
||||
border: none;
|
||||
border-left: 2px solid var(--separator);
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 30px;
|
||||
border-left: 2px solid var(--separator);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user