pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove some event dispatchers

Browse Source
This commit is contained in:
Wim Brand
2025-10-14 00:03:48 +02:00
parent 75d9ed3023
commit b409ff009d
23 changed files with 165 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
svelte/src/filesystem/viewers/File.svelte
View File

@@ -1,39 +1,40 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import IconBlock from "layout/IconBlock.svelte";
import { fs_thumbnail_url } from "lib/FilesystemAPI.svelte";
import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { formatDataVolume, formatDate } from "util/Formatting";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
let { nav, children }: {
nav: FSNavigator;
children?: import('svelte').Snippet;
let {
node,
open_details,
children,
}: {
node: FSNode
open_details: () => void
children?: import('svelte').Snippet
} = $props();
</script>
{@render children?.()}
<h1>{$nav.base.name}</h1>
<h1>{node.name}</h1>
<IconBlock icon_href={fs_thumbnail_url($nav.base.path, 256, 256)}>
Type: {$nav.base.file_type}<br/>
Size: {formatDataVolume($nav.base.file_size, 3)}<br/>
Upload date: {formatDate($nav.base.created, true, true, false)}
<IconBlock icon_href={fs_thumbnail_url(node.path, 256, 256)}>
Type: {node.file_type}<br/>
Size: {formatDataVolume(node.file_size, 3)}<br/>
Upload date: {formatDate(node.created, true, true, false)}
<hr/>
<button class="button_highlight" onclick={() => {dispatch("download")}}>
<button class="button_highlight" onclick={() => node.download()}>
<i class="icon">download</i>
<span>Download</span>
</button>
<button onclick={() => {dispatch("details")}}>
<button onclick={() => open_details()}>
<i class="icon">help</i>
<span>Details</span>
</button>
</IconBlock>
{#if $nav.base.name === ".search_index.gz"}
{#if node.name === ".search_index.gz"}
<TextBlock>
<p>
Congratulations! You have found the search index. One of the

27
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -15,11 +15,18 @@ import CustomBanner from "./CustomBanner.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
import EditWindow from "filesystem/edit_window/EditWindow.svelte";
import DetailsWindow from "filesystem/DetailsWindow.svelte";
let { nav, upload_widget, edit_window }: {
nav: FSNavigator;
upload_widget: FsUploadWidget;
edit_window: EditWindow;
let {
nav,
upload_widget,
edit_window,
details_window,
}: {
nav: FSNavigator
upload_widget: FsUploadWidget
edit_window: EditWindow
details_window: DetailsWindow
} = $props();
let viewer: any = $state()
@@ -89,23 +96,23 @@ export const seek = (delta: number) => {
{:else if viewer_type === "image"}
<Image nav={nav} bind:this={viewer}/>
{:else if viewer_type === "video"}
<Video nav={nav} bind:this={viewer} on:open_sibling/>
<Video node={$nav.base} bind:this={viewer} open_sibling={(d) => nav.open_sibling(d)}/>
{:else if viewer_type === "pdf"}
<Pdf nav={nav} bind:this={viewer}/>
<Pdf node={$nav.base} bind:this={viewer}/>
{:else if viewer_type === "text"}
<Text nav={nav} bind:this={viewer}>
<Text node={$nav.base} bind:this={viewer}>
<CustomBanner path={$nav.path}/>
</Text>
{:else if viewer_type === "torrent"}
<Torrent nav={nav} bind:this={viewer} on:download>
<Torrent node={$nav.base} bind:this={viewer}>
<CustomBanner path={$nav.path}/>
</Torrent>
{:else if viewer_type === "zip"}
<Zip nav={nav} bind:this={viewer} on:download>
<Zip node={$nav.base} bind:this={viewer}>
<CustomBanner path={$nav.path}/>
</Zip>
{:else}
<File nav={nav} on:download on:details>
<File node={$nav.base} open_details={() => details_window.toggle()}>
<CustomBanner path={$nav.path}/>
</File>
{/if}

8
svelte/src/filesystem/viewers/Image.svelte
View File

@@ -1,10 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { swipe_nav } from "lib/SwipeNavigate";
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher();
import { loading_finish, loading_start } from "lib/Loading";
let { nav }: {
nav: FSNavigator;
@@ -18,7 +16,7 @@ let swipe_prev = $state(true)
let swipe_next = $state(true)
export const update = async () => {
dispatch("loading", true)
loading_start()
// Figure out if there are previous or next files. If not then we disable
// swiping controls in that direction
@@ -32,7 +30,7 @@ export const update = async () => {
}
}
const on_load = () => dispatch("loading", false)
const on_load = () => loading_finish()
const mousedown = (e: MouseEvent) => {
if (!dragging && e.which === 1 && zoom) {

9
svelte/src/filesystem/viewers/PDF.svelte
View File

@@ -1,15 +1,12 @@
<script lang="ts">
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
let { nav }: {
nav: FSNavigator;
} = $props();
let { node }: { node: FSNode } = $props();
</script>
<iframe
class="container"
src={"/res/misc/pdf-viewer/web/viewer.html?file="+fs_path_url($nav.base.path)}
src={"/res/misc/pdf-viewer/web/viewer.html?file="+fs_path_url(node.path)}
title="PDF viewer">
</iframe>

22
svelte/src/filesystem/viewers/Text.svelte
View File

@@ -1,31 +1,33 @@
<script lang="ts">
import { tick } from "svelte";
import { fs_path_url, type FSNode } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
let { nav, children }: {
nav: FSNavigator;
let {
node,
children
}: {
node: FSNode
children?: import('svelte').Snippet;
} = $props();
let text_type = $state("text")
export const update = () => {
console.debug("Loading text file", nav.base.name)
console.debug("Loading text file", node.name)
if (nav.base.file_size > 1 << 21) { // File larger than 2 MiB
if (node.file_size > 1 << 21) { // File larger than 2 MiB
text_pre.innerText = "File is too large to view online.\nPlease download and view it locally."
return
}
if (
nav.base.file_type.startsWith("text/markdown") ||
nav.base.name.endsWith(".md") ||
nav.base.name.endsWith(".markdown")
node.file_type.startsWith("text/markdown") ||
node.name.endsWith(".md") ||
node.name.endsWith(".markdown")
) {
markdown(nav.base)
markdown(node)
} else {
text(nav.base)
text(node)
}
}

21
svelte/src/filesystem/viewers/Torrent.svelte
View File

@@ -13,21 +13,20 @@ export type TorrentFile = {
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import Magnet from "icons/Magnet.svelte";
import { formatDate } from "util/Formatting"
import TorrentItem from "./TorrentItem.svelte"
import IconBlock from "layout/IconBlock.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { fs_node_icon, fs_path_url } from "lib/FilesystemAPI.svelte";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import CopyButton from "layout/CopyButton.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";
let dispatch = createEventDispatcher()
let { nav, children }: {
nav: FSNavigator;
let {
node,
children
}: {
node: FSNode;
children?: import('svelte').Snippet;
} = $props();
@@ -36,7 +35,7 @@ let status = $state("loading")
export const update = async () => {
try {
loading_start()
let resp = await fetch(fs_path_url(nav.base.path)+"?torrent_info")
let resp = await fetch(fs_path_url(node.path)+"?torrent_info")
if (resp.status >= 400) {
let json = await resp.json()
@@ -73,9 +72,9 @@ let magnet = $state("")
{@render children?.()}
<h1>{$nav.base.name}</h1>
<h1>{node.name}</h1>
<IconBlock icon_href={fs_node_icon($nav.base, 256, 256)}>
<IconBlock icon_href={fs_node_icon(node, 256, 256)}>
{#if status === "finished"}
Created by: {torrent.created_by}<br/>
Comment: {torrent.comment}<br/>
@@ -96,7 +95,7 @@ let magnet = $state("")
Torrent file could not be parsed. It may be corrupted.
</p>
{/if}
<button onclick={() => {dispatch("download")}} class="button">
<button onclick={() => node.download()} class="button">
<i class="icon">download</i>
<span>Download torrent file</span>
</button>

43
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -1,12 +1,14 @@
<script lang="ts">
import { onMount, createEventDispatcher, tick } from "svelte";
import { onMount, tick } from "svelte";
import { video_position } from "lib/VideoPosition";
import { fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
import { fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
let { nav }: {
nav: FSNavigator;
let {
node,
open_sibling,
}: {
node: FSNode
open_sibling: (delta: number) => void
} = $props();
// Used to detect when the file path changes
@@ -21,20 +23,20 @@ let loop = $state(false)
export const update = async () => {
if (media_session) {
navigator.mediaSession.metadata = new MediaMetadata({
title: nav.base.name,
title: node.name,
artist: "pixeldrain",
album: "unknown",
});
console.debug("Updating media session")
}
loop = nav.base.name.includes(".loop.")
loop = node.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 (nav.base.path != last_path) {
last_path = nav.base.path
if (node.path != last_path) {
last_path = node.path
loaded = false
await tick()
loaded = true
@@ -51,8 +53,7 @@ export const toggle_fullscreen = () => {
}
}
export const seek = delta => {
export const seek = (delta: number) => {
// fastseek can be pretty imprecise, so we don't use it for small seeks
// below 5 seconds
if (player.fastSeek && delta > 5) {
@@ -68,8 +69,8 @@ onMount(() => {
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('stop', () => player.pause());
navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("open_sibling", -1));
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("open_sibling", 1));
navigator.mediaSession.setActionHandler('previoustrack', () => open_sibling(-1));
navigator.mediaSession.setActionHandler('nexttrack', () => open_sibling(1));
}
})
@@ -85,9 +86,9 @@ const video_keydown = (e: KeyboardEvent) => {
<div class="container">
{#if
$nav.base.file_type === "video/x-matroska" ||
$nav.base.file_type === "video/quicktime" ||
$nav.base.file_type === "video/x-ms-asf"}
node.file_type === "video/x-matroska" ||
node.file_type === "video/quicktime" ||
node.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
@@ -108,16 +109,16 @@ const video_keydown = (e: KeyboardEvent) => {
onpause={() => playing = false}
onplay={() => playing = true}
onkeydown={video_keydown}
use:video_position={() => $nav.base.sha256_sum.substring(0, 8)}
use:video_position={() => node.sha256_sum.substring(0, 8)}
>
<source src={fs_path_url($nav.base.path)} type={$nav.base.file_type} />
<source src={fs_path_url(node.path)} type={node.file_type} />
</video>
{/if}
</div>
<div class="controls">
<div class="spacer"></div>
<button onclick={() => dispatch("open_sibling", -1)}>
<button onclick={() => open_sibling(-1)}>
<i class="icon">skip_previous</i>
</button>
<button onclick={() => seek(-10)}>
@@ -133,7 +134,7 @@ const video_keydown = (e: KeyboardEvent) => {
<button onclick={() => seek(10)}>
<i class="icon">forward_10</i>
</button>
<button onclick={() => dispatch("open_sibling", 1)}>
<button onclick={() => open_sibling(1)}>
<i class="icon">skip_next</i>
</button>
<div style="width: 16px; height: 8px;"></div>

31
svelte/src/filesystem/viewers/Zip.svelte
View File

@@ -8,19 +8,18 @@ export type ZipEntry = {
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { formatDataVolume, formatDate } from "util/Formatting"
import ZipItem from "filesystem/viewers/ZipItem.svelte";
import IconBlock from "layout/IconBlock.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { fs_node_icon, fs_path_url } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { fs_node_icon, fs_path_url, FSNode } from "lib/FilesystemAPI.svelte";
import { loading_finish, loading_start } from "lib/Loading";
let dispatch = createEventDispatcher()
let { nav, children }: {
nav: FSNavigator;
let {
node,
children,
}: {
node: FSNode;
children?: import('svelte').Snippet;
} = $props();
@@ -33,7 +32,7 @@ let archive_type = $state("")
let truncated = $state(false)
export const update = async () => {
if (nav.base.file_type === "application/x-7z-compressed") {
if (node.file_type === "application/x-7z-compressed") {
archive_type = "7z"
} else {
archive_type = ""
@@ -42,7 +41,7 @@ export const update = async () => {
try {
loading_start()
status = "loading"
let resp = await fetch(fs_path_url(nav.base.path)+"?zip_info")
let resp = await fetch(fs_path_url(node.path)+"?zip_info")
if (resp.status >= 400) {
status = "parse_failed"
@@ -56,13 +55,13 @@ export const update = async () => {
if (zip.properties !== undefined) {
if (zip.properties.includes("read_individual_files")) {
// Set the download URL for each file in the zip
recursive_set_url(fs_path_url(nav.base.path)+"?zip_file=", zip)
recursive_set_url(fs_path_url(node.path)+"?zip_file=", zip)
}
truncated = zip.properties.includes("truncated")
}
uncomp_size = recursive_size(zip)
comp_ratio = (uncomp_size / nav.base.file_size)
comp_ratio = (uncomp_size / node.file_size)
status = "finished"
} catch (err) {
console.error(err)
@@ -98,22 +97,22 @@ const recursive_size = (file: ZipEntry) => {
{@render children?.()}
<h1>{$nav.base.name}</h1>
<h1>{node.name}</h1>
<IconBlock icon_href={fs_node_icon($nav.base, 256, 256)}>
<IconBlock icon_href={fs_node_icon(node, 256, 256)}>
{#if archive_type === "7z"}
This is a 7-zip archive. You will need
<a href="https://www.7-zip.org/">7-zip</a> or compatible software to
extract it<br/>
{/if}
Compressed size: {formatDataVolume($nav.base.file_size, 3)}<br/>
Compressed size: {formatDataVolume(node.file_size, 3)}<br/>
{#if !truncated}
Uncompressed size: {formatDataVolume(zip.size, 3)} (Ratio: {comp_ratio.toFixed(2)}x)<br/>
{/if}
Uploaded on: {formatDate($nav.base.created, true, true, true)}
Uploaded on: {formatDate(node.created, true, true, true)}
<br/>
<button class="button_highlight" onclick={() => {dispatch("download")}}>
<button class="button_highlight" onclick={() => node.download()}>
<i class="icon">download</i>
<span>Download</span>
</button>