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

Convert the whole filesystem UI to Typescript

Browse Source
This commit is contained in:
Wim Brand
2025-03-28 14:16:20 +01:00
parent 8279b9646e
commit d5cd5b1db1
114 changed files with 601 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -1,11 +1,12 @@
<script>
<script lang="ts">
import { onMount } from 'svelte'
import { fs_path_url, fs_encode_path, fs_node_icon } from "filesystem/FilesystemAPI.mjs"
import { fs_path_url, fs_encode_path, fs_node_icon } from "filesystem/FilesystemAPI"
import FileTitle from "layout/FileTitle.svelte";
import TextBlock from "layout/TextBlock.svelte"
import type { FSNavigator } from 'filesystem/FSNavigator';
export let nav
let player
export let nav: FSNavigator
let player: HTMLAudioElement
let playing = false
let media_session = false
let siblings = []
@@ -13,7 +14,7 @@ let siblings = []
export const toggle_playback = () => playing ? player.pause() : player.play()
export const toggle_mute = () => player.muted = !player.muted
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) {
@@ -40,7 +41,7 @@ onMount(() => {
media_session = true
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('stop', () => player.stop());
navigator.mediaSession.setActionHandler('stop', () => player.pause());
navigator.mediaSession.setActionHandler('previoustrack', () => nav.open_sibling(-1));
navigator.mediaSession.setActionHandler('nexttrack', () => nav.open_sibling(1));
}
@@ -56,8 +57,8 @@ onMount(() => {
bind:this={player}
class="player"
src={fs_path_url($nav.base.path)}
autoplay="autoplay"
controls="controls"
autoplay
controls
on:pause={() => playing = false }
on:play={() => playing = true }
on:ended={() => nav.open_sibling(1) }>

6
svelte/src/filesystem/viewers/CustomBanner.svelte
View File

@@ -1,8 +1,8 @@
<script>
<script lang="ts">
export let path = []
let image_uri
let image_link
let image_uri: string
let image_link: string
$: update_links(path)
const update_links = (path) => {
image_uri = null

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

@@ -1,13 +1,14 @@
<script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import IconBlock from "layout/IconBlock.svelte";
import { fs_thumbnail_url } from "filesystem/FilesystemAPI.mjs";
import { fs_thumbnail_url } from "filesystem/FilesystemAPI";
import TextBlock from "layout/TextBlock.svelte"
import { formatDataVolume, formatDate } from "util/Formatting.svelte";
import { formatDataVolume, formatDate } from "util/Formatting";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
export let nav
export let nav: FSNavigator
</script>
<slot></slot>

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

@@ -1,7 +1,7 @@
<script>
<script lang="ts">
import { onMount, tick } from "svelte";
import Spinner from "util/Spinner.svelte";
import { fs_node_type, fs_thumbnail_url } from "filesystem/FilesystemAPI.mjs";
import { fs_node_type, fs_thumbnail_url } from "filesystem/FilesystemAPI";
import FileManager from "filesystem/filemanager/FileManager.svelte";
import Audio from "./Audio.svelte";
import File from "./File.svelte";
@@ -12,14 +12,17 @@ import Video from "./Video.svelte";
import Torrent from "./Torrent.svelte";
import Zip from "./Zip.svelte";
import CustomBanner from "./CustomBanner.svelte";
import { stats } from "lib/StatsSocket.mjs"
import { stats } from "lib/StatsSocket"
import SlowDown from "layout/SlowDown.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
import EditWindow from "filesystem/edit_window/EditWindow.svelte";
export let nav
export let upload_widget
export let edit_window
export let nav: FSNavigator
export let upload_widget: FsUploadWidget
export let edit_window: EditWindow
let viewer
let viewer: any
let viewer_type = ""
let last_path = ""
@@ -64,7 +67,7 @@ export const toggle_fullscreen = () => {
}
return false
}
export const seek = delta => {
export const seek = (delta: number) => {
if (viewer && viewer.seek) {
viewer.seek(delta)
}

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

@@ -1,12 +1,13 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { swipe_nav } from "lib/SwipeNavigate.mjs";
import { fs_path_url } from "filesystem/FilesystemAPI.mjs";
import { swipe_nav } from "lib/SwipeNavigate";
import { fs_path_url } from "filesystem/FilesystemAPI";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher();
export let nav
let container
export let nav: FSNavigator
let container: HTMLDivElement
let zoom = false
let x = 0, y = 0
let dragging = false
@@ -30,7 +31,7 @@ export const update = async () => {
const on_load = () => dispatch("loading", false)
const mousedown = (e) => {
const mousedown = (e: MouseEvent) => {
if (!dragging && e.which === 1 && zoom) {
x = e.pageX
y = e.pageY
@@ -41,7 +42,7 @@ const mousedown = (e) => {
return false
}
}
const mousemove = (e) => {
const mousemove = (e: MouseEvent) => {
if (dragging) {
container.scrollLeft = container.scrollLeft - (e.pageX - x)
container.scrollTop = container.scrollTop - (e.pageY - y)
@@ -54,7 +55,7 @@ const mousemove = (e) => {
return false
}
}
const mouseup = (e) => {
const mouseup = (e: MouseEvent) => {
if (dragging) {
dragging = false
@@ -71,9 +72,13 @@ const mouseup = (e) => {
bind:this={container}
class="container"
class:zoom
use:swipe_nav={{enabled: !zoom, prev: swipe_prev, next: swipe_next}}
on:prev={() => nav.open_sibling(-1)}
on:next={() => nav.open_sibling(1)}
use:swipe_nav={{
enabled: !zoom,
prev: swipe_prev,
next: swipe_next,
on_prev: () => nav.open_sibling(-1),
on_next: () => nav.open_sibling(1),
}}
>
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<img

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

@@ -1,7 +1,8 @@
<script>
import { fs_path_url } from "filesystem/FilesystemAPI.mjs";
<script lang="ts">
import { fs_path_url } from "filesystem/FilesystemAPI";
import type { FSNavigator } from "filesystem/FSNavigator";
export let nav
export let nav: FSNavigator
</script>
<iframe

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

@@ -1,14 +1,15 @@
<script>
<script lang="ts">
import { tick } from "svelte";
import { fs_path_url } from "filesystem/FilesystemAPI.mjs";
import { fs_path_url, type FSNode } from "filesystem/FilesystemAPI";
import type { FSNavigator } from "filesystem/FSNavigator";
export let nav
export let nav: FSNavigator
let text_type = "text"
export const update = () => {
console.debug("Loading text file", nav.base.name)
if (nav.base.size > 1 << 21) { // File larger than 2 MiB
if (nav.base.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
}
@@ -24,8 +25,8 @@ export const update = () => {
}
}
let text_pre
const text = async file => {
let text_pre: HTMLPreElement
const text = async (file: FSNode) => {
text_type = "text"
await tick()
@@ -41,8 +42,8 @@ const text = async file => {
})
}
let md_container
const markdown = async file => {
let md_container: HTMLElement
const markdown = async (file: FSNode) => {
text_type = "markdown"
await tick()

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

@@ -1,16 +1,31 @@
<script>
<script lang="ts" context="module">
export type TorrentInfo = {
trackers: string[]
comment: string,
created_by: string,
created_at: string,
info_hash: string,
files: TorrentFile
};
export type TorrentFile = {
size: number,
children?: {[index: string]: TorrentFile}
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import Magnet from "icons/Magnet.svelte";
import { formatDate } from "util/Formatting.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 "filesystem/FilesystemAPI.mjs";
import { fs_node_icon, fs_path_url } from "filesystem/FilesystemAPI";
import CopyButton from "layout/CopyButton.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
export let nav
export let nav: FSNavigator
let status = "loading"
@@ -48,15 +63,7 @@ export const update = async () => {
}
}
let torrent = {
trackers: [],
comment: "",
created_by: "",
created_at: "",
info_hash: "",
files: null,
}
let torrent: TorrentInfo = {} as TorrentInfo
let magnet = ""
</script>

10
svelte/src/filesystem/viewers/TorrentItem.svelte
View File

@@ -1,10 +1,8 @@
<script>
import { formatDataVolume } from "util/Formatting.svelte";
<script lang="ts">
import { formatDataVolume } from "util/Formatting";
import type { TorrentFile } from "./Torrent.svelte";
export let item = {
size: 0,
children: null,
}
export let item: TorrentFile = {} as TorrentFile
</script>
<ul class="list_open">

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

@@ -1,16 +1,17 @@
<script>
<script lang="ts">
import { onMount, createEventDispatcher, tick } from "svelte";
import { video_position } from "lib/VideoPosition.mjs";
import { fs_path_url } from "filesystem/FilesystemAPI.mjs";
import { video_position } from "lib/VideoPosition";
import { fs_path_url } from "filesystem/FilesystemAPI";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
export let nav
export let nav: FSNavigator
// Used to detect when the file path changes
let last_path = ""
let loaded = false
let player
let player: HTMLVideoElement
let playing = false
let media_session = false
let loop = false
@@ -64,13 +65,13 @@ onMount(() => {
media_session = true
navigator.mediaSession.setActionHandler('play', () => player.play());
navigator.mediaSession.setActionHandler('pause', () => player.pause());
navigator.mediaSession.setActionHandler('stop', () => player.stop());
navigator.mediaSession.setActionHandler('stop', () => player.pause());
navigator.mediaSession.setActionHandler('previoustrack', () => dispatch("open_sibling", -1));
navigator.mediaSession.setActionHandler('nexttrack', () => dispatch("open_sibling", 1));
}
})
const video_keydown = e => {
const video_keydown = (e: KeyboardEvent) => {
if (e.key === " ") {
// Prevent spacebar from pausing playback in Chromium. This conflicts
// with our own global key handler, causing the video to immediately
@@ -78,7 +79,6 @@ const video_keydown = e => {
e.stopPropagation()
}
}
</script>
<div class="container">

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

@@ -1,21 +1,28 @@
<script>
<script lang="ts" context="module">
export type ZipEntry = {
size: number,
children?: {[index: string]: ZipEntry},
properties?: string[],
download_url?: string, // Added by us
details_open?: boolean, // Added by us
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { formatDataVolume, formatDate } from "util/Formatting.svelte"
import { formatDataVolume, formatDate } from "util/Formatting"
import ZipItem from "file_viewer/viewers/ZipItem.svelte";
import IconBlock from "layout/IconBlock.svelte";
import TextBlock from "layout/TextBlock.svelte"
import { fs_node_icon, fs_path_url } from "filesystem/FilesystemAPI.mjs";
import { fs_node_icon, fs_path_url } from "filesystem/FilesystemAPI";
import type { FSNavigator } from "filesystem/FSNavigator";
let dispatch = createEventDispatcher()
export let nav
export let nav: FSNavigator
let status = "loading"
let zip = {
size: 0,
children: [],
}
let zip: ZipEntry = {size: 0} as ZipEntry
let uncomp_size = 0
let comp_ratio = 0
let archive_type = ""
@@ -38,7 +45,7 @@ export const update = async () => {
return
}
zip = await resp.json()
zip = await resp.json() as ZipEntry
// Check if the zip has the property which allows separate files to be
// downloaded. If so then we set the download URL for each file
@@ -61,25 +68,23 @@ export const update = async () => {
}
}
const recursive_set_url = (parent_path, file) => {
const recursive_set_url = (parent_path: string, file: ZipEntry) => {
file.download_url = parent_path
if (file.children) {
Object.entries(file.children).forEach(child => {
recursive_set_url(file.download_url + "/" + child[0], child[1])
});
if (file.children !== undefined) {
for (const [name, child] of Object.entries(file.children)) {
recursive_set_url(file.download_url + "/" + name, child)
}
}
}
const recursive_size = (file) => {
const recursive_size = (file: ZipEntry) => {
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)
});
if (file.children !== undefined) {
for (const v of Object.values(file.children)) {
size += recursive_size(v)
}
}
// Return the total size of this file and all its children