apt-get/strimserve
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

more ts switches, use setcontext instead of stores

Browse Source
This commit is contained in:
apt-get
2026-03-15 17:20:16 +01:00
parent b47a433414
commit 8573b82515
13 changed files with 115 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/streams/+layout.server.ts
View File

@@ -1,4 +1,4 @@
import { getStreams } from '$lib/database.js';
import { getStreams } from '$lib/database.ts';
export function load() {
return {

9
src/routes/streams/+layout.svelte
View File

@@ -1,11 +1,16 @@
<script lang="ts">
import Sidebar from './Sidebar.svelte';
import Footer from './Footer.svelte';
let { data, children } = $props();
import { setStreamContext, StreamContext } from '$lib/stream-context.svelte.ts';
// streams are grabbed from the server here, then accessed throughout the rest
// of the components through the svelte context api
const { data, children } = $props();
setStreamContext(new StreamContext(data.streams));
</script>
<div id="mainContainer">
<div id="sidebar" class="panel"><Sidebar streams={data.streams} /></div>
<div id="sidebar" class="panel"><Sidebar /></div>
<div id="footer" class="panel-alt"><Footer /></div>
<div id="content">{@render children?.()}</div>
</div>

13
src/routes/streams/Sidebar.svelte
View File

@@ -1,12 +1,13 @@
<script lang="ts">
import { untrack } from 'svelte';
import { goto } from '$app/navigation';
import { currentStream, favoritedStreams } from '$lib/stores.svelte.js';
import { favoritedStreams } from '$lib/stores.svelte.ts';
import { getStreamContext } from '$lib/stream-context.svelte.ts';
import type { StreamSummary } from '$lib/types';
import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
import TagSelect from './TagSelect.svelte';
let { streams }: { streams: StreamSummary[] } = $props();
const ctx = getStreamContext();
let filteredTags = $state([]);
let favoritesOnly = $state(false);
let listOpen = $state();
@@ -20,7 +21,7 @@
});
function streamsToDisplay() {
return streams.filter(
return ctx.streams.filter(
(stream) =>
!('tags' in stream) || filteredTags.every((tag) => stream.tags.includes(tag))
);
@@ -56,9 +57,9 @@
</div>
<ul class="stream-list">
{#each streams as stream}
{#each ctx.streams as stream}
{@const favorited = favoritedStreams.has(stream.id)}
{@const current = $currentStream?.id === stream.id}
{@const current = ctx.current?.id === stream.id}
<li
hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
class="stream-item {current ? 'current-stream' : ''}"

4
src/routes/streams/TagSelect.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Select from 'svelte-select';
import { tagList } from '$lib/stores.svelte.js';
import { tagList } from '$lib/stores.svelte.ts';
let { checked = $bindable([]), remainingTags = [], listOpen = $bindable() } = $props();
let items = $state(tagList.map((x) => ({ value: x, label: x })));
@@ -58,7 +58,7 @@
{#snippet item({ item })}
<div class="item">
<label for={item.value}>
<input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
<input type="checkbox" id={item.value} checked={isChecked[item.value]} />
{item.label}
</label>
</div>

5
src/routes/streams/WelcomePage.svelte
View File

@@ -1,7 +1,8 @@
<script>
import { currentStream } from '$lib/stores.svelte.js';
import { getStreamContext } from '$lib/stream-context.svelte.ts';
currentStream.set(null);
const ctx = getStreamContext();
ctx.clearCurrent();
</script>
<div class="stream-information">

2
src/routes/streams/[stream_id]/+page.server.ts
View File

@@ -1,7 +1,7 @@
import fs from 'fs';
import path from 'path';
import { error } from '@sveltejs/kit';
import { getStreamInfo } from '$lib/database.js';
import { getStreamInfo } from '$lib/database.ts';
import { dev } from '$app/environment';
import { STREAM_JSON_LOCATION } from '$env/static/private';

10
src/routes/streams/[stream_id]/+page.svelte
View File

@@ -5,13 +5,13 @@
import MetadataEditor from './MetadataEditor.svelte';
import Player from './Player.svelte';
import { dev } from '$app/environment';
import { currentStream, updateCurrentStream } from '$lib/stores.svelte.js';
import type { Stream } from '$lib/types';
import { getStreamContext } from '$lib/stream-context.svelte.ts';
let { data } = $props();
const ctx = getStreamContext();
run(() => {
updateCurrentStream(data.stream);
ctx.setCurrent(data.stream);
});
</script>
@@ -23,8 +23,8 @@
<StreamPage />
</div>
<div id="player">
{#key $currentStream}
<Player display={true} src="/media/tracks/{$currentStream?.filename}" />
{#key ctx.current}
<Player display={true} src="/media/tracks/{ctx.current?.filename}" />
{/key}
</div>
</div>

2
src/routes/streams/[stream_id]/MetadataEditor.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { page } from '$app/stores';
import { tagList } from '$lib/stores.svelte.js';
import { tagList } from '$lib/stores.svelte.ts';
let { original = $bindable() } = $props();

51
src/routes/streams/[stream_id]/Player.svelte
View File

@@ -19,14 +19,11 @@
const bubble = createBubbler();
import { onMount, onDestroy } from 'svelte';
import { fade } from 'svelte/transition';
import {
currentSongIndex,
currentStream,
getSongAtTime,
updateCurrentSong
} from '$lib/stores.svelte.js';
import { getStreamContext } from '$lib/stream-context.svelte.ts';
import type { Track } from '$lib/types';
const ctx = getStreamContext();
interface Props {
src: any;
audio?: any;
@@ -76,6 +73,7 @@
let seekTrack = $state('');
let seeking = $state(false);
let volumeSeeking = $state(false);
let pendingSeekTime = $state<number | null>(null);
let songBar = $state();
let volumeBar = $state();
let innerWidth = $state();
@@ -86,14 +84,12 @@
const volumeData = localStorage.getItem('volume');
volume = volumeData ? parseFloat(volumeData) : 0.67;
setVolume(volume);
});
// update browser metadata on track changes
if ('mediaSession' in navigator) {
currentSongIndex.subscribe((val) => {
if (val != null && !paused && $currentStream) {
setMediaMetadata($currentStream.tracks[val]);
}
});
// update browser metadata on track changes
$effect(() => {
if ('mediaSession' in navigator && ctx.songIndex != null && !paused && ctx.current) {
setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
}
});
@@ -121,8 +117,8 @@
// browsers don't like if you update this while no media is playing
function setMediaMetadataOnPlay() {
if ('mediaSession' in navigator && $currentStream && $currentSongIndex != null) {
setMediaMetadata($currentStream.tracks[$currentSongIndex]);
if ('mediaSession' in navigator && ctx.current && ctx.songIndex != null) {
setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
}
}
@@ -145,6 +141,11 @@
audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
}
function updateSeekVisual(event) {
if (!songBar) return;
pendingSeekTime = seek(event, songBar.getBoundingClientRect()) * duration;
}
function seekVolume(event) {
if (!volumeBar) return;
volume = seek(event, volumeBar.getBoundingClientRect());
@@ -174,20 +175,20 @@
}
let bounds = songBar.getBoundingClientRect();
let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
if (!$currentStream) return;
let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
if (!ctx.current) return;
let trackArray = ctx.current.tracks[ctx.getSongAtTime(seekValue)];
seekTrack = trackArray[1] + ' - ' + trackArray[2];
seekText = formatSeconds(seekValue);
}
function trackMouse(event) {
if (seeking) seekAudio(event);
if (seeking) updateSeekVisual(event);
if (showTooltip && !disableTooltip) seekTooltip(event);
if (volumeSeeking) seekVolume(event);
}
run(() => {
if ($currentSongIndex != null) {
updateCurrentSong(currentTime, $currentSongIndex);
if (ctx.songIndex != null) {
ctx.updateCurrentSong(currentTime, ctx.songIndex);
}
});
run(() => {
@@ -216,7 +217,13 @@
<svelte:window
bind:innerWidth
bind:innerHeight
onmouseup={() => (seeking = volumeSeeking = false)}
onmouseup={() => {
if (seeking && pendingSeekTime != null) {
audio.currentTime = pendingSeekTime;
pendingSeekTime = null;
}
seeking = volumeSeeking = false;
}}
onmousemove={trackMouse}
/>
@@ -235,7 +242,7 @@
</button>
<progress
bind:this={songBar}
value={currentTime ? currentTime : 0}
value={seeking && pendingSeekTime != null ? pendingSeekTime : (currentTime || 0)}
max={duration}
onmousedown={() => (seeking = true)}
onmouseenter={() => (showTooltip = true)}

20
src/routes/streams/[stream_id]/StreamPage.svelte
View File

@@ -1,6 +1,6 @@
<script>
import { currentStream, currentSongIndex } from '$lib/stores.svelte.js';
import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
import { getStreamContext } from '$lib/stream-context.svelte.ts';
import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.ts';
import { jumpToTrack } from './Player.svelte';
import { Carta } from 'carta-md';
import DOMPurify from 'isomorphic-dompurify';
@@ -9,8 +9,10 @@
sanitizer: DOMPurify.sanitize
});
const ctx = getStreamContext();
let formattedStreamDate = $derived(
$currentStream ? formatDate($currentStream.stream_date) : ''
ctx.current ? formatDate(ctx.current.stream_date) : ''
);
</script>
@@ -18,25 +20,25 @@
<title>{formattedStreamDate} | apt-get's auditorium</title>
</svelte:head>
{#if $currentStream}
{#if ctx.current}
<div class="stream-information">
<div class="stream-information-flexbox">
<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
<h3 class="stream-id">ID: {shorthandCode(ctx.current.id)}</h3>
<h1 class="stream-date">{formattedStreamDate}</h1>
</div>
<h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
<h5 class="stream-tags"><u>Tags</u>: {ctx.current.tags.join(', ')}</h5>
</div>
<div class="description-bubble">
{@html carta.renderSSR($currentStream.description || 'No description available.')}
{@html carta.renderSSR(ctx.current.description || 'No description available.')}
</div>
<div id="table-container">
<table>
<tbody>
<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
{#each $currentStream.tracks as track, i}
<tr class:current={i == $currentSongIndex}>
{#each ctx.current.tracks as track, i}
<tr class:current={i == ctx.songIndex}>
<td class="timestamp-field"
><div class="timestamp-field-flex">
{formatTrackTime(track[0])}