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

Add file tree to menu

Browse Source
This commit is contained in:
Wim Brand
2026-01-29 23:41:30 +01:00
parent 2331d2b969
commit 5ce6b0c417
13 changed files with 199 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,6 @@ import { onMount } from 'svelte'
import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte"
import TextBlock from "layout/TextBlock.svelte"
import type { FSNavigator } from 'filesystem/FSNavigator';
import { branding_from_props } from 'filesystem/edit_window/Branding';
let { nav, children }: {
nav: FSNavigator;
@@ -28,6 +27,7 @@ export const seek = (delta: number) => {
}
}
var background_div: HTMLDivElement
export const update = async () => {
if (media_session) {
navigator.mediaSession.metadata = new MediaMetadata({
@@ -41,12 +41,8 @@ export const update = async () => {
for(const sib of siblings) {
if (sib.name === "cover.jpg") {
console.log("found sibling", sib)
if (sib.properties === undefined) {
sib.properties = {}
}
sib.properties.brand_background_image = sib.path
document.documentElement.style = branding_from_props(sib.properties)
console.debug("Found album cover image", sib)
background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")`
break
}
}
@@ -66,47 +62,55 @@ onMount(() => {
{@render children?.()}
<TextBlock width="1000px">
<audio
bind:this={player}
class="player"
src={fs_path_url($nav.base.path)}
autoplay
controls
onpause={() => playing = false}
onplay={() => playing = true}
onended={() => nav.open_sibling(1)}>
<track kind="captions"/>
</audio>
<div style="text-align: center;">
<button onclick={() => nav.open_sibling(-1)}><i class="icon">skip_previous</i></button>
<button onclick={() => seek(-10)}><i class="icon">replay_10</i></button>
<button onclick={toggle_playback}>
{#if playing}
<i class="icon">pause</i>
{:else}
<i class="icon">play_arrow</i>
{/if}
</button>
<button onclick={() => seek(10)}><i class="icon">forward_10</i></button>
<button onclick={() => nav.open_sibling(1)}><i class="icon">skip_next</i></button>
</div>
<div bind:this={background_div} class="background_div">
<TextBlock width="1000px">
<audio
bind:this={player}
class="player"
src={fs_path_url($nav.base.path)}
autoplay
controls
onpause={() => playing = false}
onplay={() => playing = true}
onended={() => nav.open_sibling(1)}>
<track kind="captions"/>
</audio>
<div style="text-align: center;">
<button onclick={() => nav.open_sibling(-1)}><i class="icon">skip_previous</i></button>
<button onclick={() => seek(-10)}><i class="icon">replay_10</i></button>
<button onclick={toggle_playback}>
{#if playing}
<i class="icon">pause</i>
{:else}
<i class="icon">play_arrow</i>
{/if}
</button>
<button onclick={() => seek(10)}><i class="icon">forward_10</i></button>
<button onclick={() => nav.open_sibling(1)}><i class="icon">skip_next</i></button>
</div>
<h2>Tracklist</h2>
{#each siblings as sibling (sibling.path)}
<a href={"/d"+fs_encode_path(sibling.path)} class="node">
{#if sibling.path === $nav.base.path}
<i class="play_arrow icon">play_arrow</i>
{:else}
<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
{/if}
<span>{sibling.name}</span>
<br/>
</a>
{/each}
</TextBlock>
<h2>Tracklist</h2>
{#each siblings as sibling (sibling.path)}
<a href={"/d"+fs_encode_path(sibling.path)} class="node">
{#if sibling.path === $nav.base.path}
<i class="play_arrow icon">play_arrow</i>
{:else}
<img src={fs_node_icon(sibling, 64, 64)} class="node_icon" alt="icon"/>
{/if}
<span>{sibling.name}</span>
<br/>
</a>
{/each}
</TextBlock>
</div>
<style>
.background_div {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
}
.player {
width: 100%;
}