139 lines
3.6 KiB
Svelte
139 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { onMount, tick } from "svelte";
|
|
import Spinner from "util/Spinner.svelte";
|
|
import { fs_node_type } from "lib/FilesystemAPI.svelte";
|
|
import FileManager from "filesystem/filemanager/FileManager.svelte";
|
|
import TrashBin from "filesystem/filemanager/TrashBin.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";
|
|
import Torrent from "./Torrent.svelte";
|
|
import Zip from "./Zip.svelte";
|
|
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";
|
|
import SearchBar from "filesystem/SearchBar.svelte";
|
|
|
|
let {
|
|
nav,
|
|
upload_widget,
|
|
edit_window,
|
|
details_window,
|
|
search_bar,
|
|
}: {
|
|
nav: FSNavigator
|
|
upload_widget: FsUploadWidget
|
|
edit_window: EditWindow
|
|
details_window: DetailsWindow
|
|
search_bar: SearchBar
|
|
} = $props();
|
|
|
|
let viewer: any = $state()
|
|
let viewer_type = $state("")
|
|
let last_path = ""
|
|
|
|
onMount(() => nav.subscribe(state_update))
|
|
|
|
const state_update = async () => {
|
|
if (!nav.initialized || nav.base.path === last_path) {
|
|
return
|
|
}
|
|
last_path = nav.base.path
|
|
|
|
// Update the viewer area with the right viewer type
|
|
viewer_type = fs_node_type(nav.base)
|
|
|
|
console.debug("Previewing file", nav.base, "viewer type", viewer_type)
|
|
|
|
// Render the viewer component and set the file type
|
|
await tick()
|
|
if (viewer && viewer.update) {
|
|
viewer.update()
|
|
}
|
|
}
|
|
|
|
export const toggle_playback = () => {
|
|
if (viewer && viewer.toggle_playback) {
|
|
viewer.toggle_playback()
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
export const toggle_mute = () => {
|
|
if (viewer && viewer.toggle_mute) {
|
|
viewer.toggle_mute()
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
export const toggle_fullscreen = () => {
|
|
if (viewer && viewer.toggle_fullscreen) {
|
|
viewer.toggle_fullscreen()
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
export const seek = (delta: number) => {
|
|
if (viewer && viewer.seek) {
|
|
viewer.seek(delta)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if viewer_type === ""}
|
|
<div class="center">
|
|
<Spinner/>
|
|
</div>
|
|
{:else if viewer_type === "dir" && $nav.base.name === ".Trash"}
|
|
<TrashBin root_path={$nav.path[$nav.path.length - 2].path}/>
|
|
{:else if viewer_type === "dir"}
|
|
<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
|
|
<CustomBanner path={$nav.path}/>
|
|
</FileManager>
|
|
{:else if viewer_type === "audio"}
|
|
<Audio nav={nav} bind:this={viewer}>
|
|
<CustomBanner path={$nav.path}/>
|
|
</Audio>
|
|
{:else if viewer_type === "image"}
|
|
<Image nav={nav} bind:this={viewer}/>
|
|
{:else if viewer_type === "video"}
|
|
<Video node={$nav.base} bind:this={viewer} open_sibling={(d) => nav.open_sibling(d)}/>
|
|
{:else if viewer_type === "pdf"}
|
|
<Pdf node={$nav.base} bind:this={viewer}/>
|
|
{:else if viewer_type === "text"}
|
|
<Text node={$nav.base} bind:this={viewer}>
|
|
<CustomBanner path={$nav.path}/>
|
|
</Text>
|
|
{:else if viewer_type === "torrent"}
|
|
<Torrent node={$nav.base} bind:this={viewer}>
|
|
<CustomBanner path={$nav.path}/>
|
|
</Torrent>
|
|
{:else if viewer_type === "zip"}
|
|
<Zip node={$nav.base} bind:this={viewer}>
|
|
<CustomBanner path={$nav.path}/>
|
|
</Zip>
|
|
{:else}
|
|
<File node={$nav.base} open_details={() => details_window.toggle()}>
|
|
<CustomBanner path={$nav.path}/>
|
|
</File>
|
|
{/if}
|
|
|
|
<style>
|
|
.center{
|
|
position: relative;
|
|
display: block;
|
|
margin: auto;
|
|
width: 100px;
|
|
max-width: 100%;
|
|
height: 100px;
|
|
max-height: 100%;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
</style>
|