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

Merge branch 'offline-mode'

Browse Source
This commit is contained in:
apt-get
2026-03-16 20:33:03 +01:00
parent f777873432 3aa762d544
commit 6c12cfd49b
25 changed files with 788 additions and 5002 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/streamContext.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>

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

@@ -1,13 +1,17 @@
<script lang="ts">
import { untrack } from 'svelte';
import { goto } from '$app/navigation';
import { currentStream, favoritedStreams } from '$lib/stores.js';
import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
import { favoritedStreams } from '$lib/stores.svelte.ts';
import * as streamCache from '$lib/streamCache.svelte.ts';
import { getStreamContext } from '$lib/streamContext.svelte.ts';
import type { StreamSummary } from '$lib/types';
import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.ts';
import TagSelect from './TagSelect.svelte';
let { streams } = $props();
const ctx = getStreamContext();
let filteredTags = $state([]);
let favoritesOnly = $state(false);
let cachedOnly = $state(false);
let listOpen = $state();
let displayedStreams = $derived.by(streamsToDisplay);
let remainingTags = $derived.by(getRemainingTags);
@@ -19,15 +23,15 @@
});
function streamsToDisplay() {
return streams.filter(
return ctx.streams.filter(
(stream) =>
!('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
!('tags' in stream) || filteredTags.every((tag) => stream.tags.includes(tag))
);
}
function getRemainingTags() {
let tagCounts = displayedStreams.reduce((tags, stream) => {
stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
let tagCounts = displayedStreams.reduce((tags: Record<string, number>, stream) => {
stream.tags.forEach((tag) => (tags[tag] ? (tags[tag] += 1) : (tags[tag] = 1)));
return tags;
}, {});
return Object.entries(tagCounts)
@@ -35,20 +39,23 @@
.map((el) => el[0]);
}
function getDisplayedTagsInList(streamTags, remainingTags) {
function getDisplayedTagsInList(streamTags: string[], remainingTags: string[]) {
return streamTags.filter((tag) => remainingTags.includes(tag));
}
function updateFavorites(stream) {
$favoritedStreams.has(stream['id'])
? $favoritedStreams.delete(stream['id'])
: $favoritedStreams.add(stream['id']);
$favoritedStreams = $favoritedStreams; // for reactivity
function updateFavorites(stream: StreamSummary) {
favoritedStreams.has(stream.id)
? favoritedStreams.delete(stream.id)
: favoritedStreams.add(stream.id);
}
</script>
<div class="tag-select">
<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
<button
onclick={() => (cachedOnly = !cachedOnly)}
class="material-icons filter-download {cachedOnly ? 'select-faves-star' : 'unselect-faves-star'}">file_download</button
>
<button
onclick={() => (favoritesOnly = !favoritesOnly)}
class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
@@ -56,29 +63,28 @@
</div>
<ul class="stream-list">
{#each streams as stream}
{@const favorited = $favoritedStreams.has(stream['id'])}
{@const current = $currentStream['id'] === stream['id']}
{#each ctx.streams as stream}
{@const favorited = favoritedStreams.has(stream.id)}
{@const isCached = streamCache.cached.has(stream.id)}
{@const current = ctx.current?.id === stream.id}
<li
hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited) || (cachedOnly && !isCached)}
class="stream-item {current ? 'current-stream' : ''}"
id="stream-{stream['id']}"
id="stream-{stream.id}"
>
<button class="stream-item-button" onclick={() => goto('/streams/' + stream['id'])}>
<button class="stream-item-button" onclick={() => goto('/streams/' + stream.id)}>
<span class="stream-item-id">
ID:
{shorthandCode(stream['id'])}</span
{shorthandCode(stream.id)}</span
>
<span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
<span class="stream-item-date">{formatDate(stream.stream_date)}</span>
<span class="stream-item-length"
>{formatSecondsToHms(stream['length_seconds'])}</span
>
<span class="stream-item-length">{formatSecondsToHms(stream.length_seconds)}</span>
<p class="stream-item-tags" hidden={!remainingTags.length}>
Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
stream['tags'],
stream.tags,
remainingTags
).join(', ')}
</p>
@@ -92,6 +98,19 @@
class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
>{favorited ? 'star' : 'star_border'}</button
>
{#if streamCache.downloading.has(stream.id)}
<span class="stream-item-cached">{streamCache.downloading.get(stream.id)}%</span>
{:else if isCached}
<button
onclick={(e) => { e.stopPropagation(); streamCache.remove(stream.id); }}
class="material-icons stream-item-cached stream-item-cached-btn">delete</button
>
{:else}
<button
onclick={(e) => { e.stopPropagation(); streamCache.download(stream); }}
class="material-icons filter-download stream-item-cached stream-item-cached-btn">file_download</button
>
{/if}
</li>
{/each}
</ul>
@@ -169,24 +188,51 @@
.select-faves-star {
color: rgba(255, 219, 88, 1);
font-size: 24px;
transform: translateX(-1px);
}
.unselect-faves-star {
color: #bbbbbb;
font-size: 24px;
transform: translateX(-1px);
}
.filter-download {
transform: translateY(1px);
}
.stream-item-star {
font-size: 18px;
position: absolute;
bottom: 0;
right: 0;
bottom: 2px;
right: 2px;
opacity: 0;
}
.stream-item-star-faved {
opacity: 0.5;
}
.stream-item-cached {
font-size: 18px;
position: absolute;
bottom: 2px;
right: 22px;
opacity: 0;
}
.stream-item-cached-btn {
cursor: pointer;
}
.stream-item:hover .stream-item-cached {
opacity: 0.5;
}
.stream-item:hover .stream-item-cached-btn:hover {
opacity: 1;
}
.stream-item:hover .stream-item-star {
opacity: 0.5;
}
@@ -203,6 +249,15 @@
.stream-item-star {
opacity: 0.5;
font-size: 24px;
bottom: 4px;
right: 4px;
}
.stream-item-cached {
opacity: 0.4;
font-size: 24px;
bottom: 4px;
right: 30px;
}
}
</style>

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.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.js';
import { getStreamContext } from '$lib/streamContext.svelte.ts';
currentStream.set({});
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';

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

@@ -1,16 +1,27 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import StreamPage from './StreamPage.svelte';
import MetadataEditor from './MetadataEditor.svelte';
import Player from './Player.svelte';
import { dev } from '$app/environment';
import { currentStream, updateCurrentStream } from '$lib/stores.js';
import { getStreamContext } from '$lib/streamContext.svelte.ts';
import * as streamCache from '$lib/streamCache.svelte.ts';
let { data } = $props();
const ctx = getStreamContext();
let playerSrc = $state<string | null>(null);
run(() => {
updateCurrentStream(data.stream);
// reactivity runs on `stream` and `streamCache.cached` here
$effect(() => {
const stream = data.stream;
ctx.setCurrent(stream);
playerSrc = null;
if (streamCache.cached.has(stream.id)) {
streamCache.getUrl(stream.id).then((url) => {
playerSrc = url ?? `/media/tracks/${stream.filename}`;
});
} else {
playerSrc = `/media/tracks/${stream.filename}`;
}
});
</script>
@@ -22,8 +33,10 @@
<StreamPage />
</div>
<div id="player">
{#key $currentStream}
<Player display={true} src="/media/tracks/{$currentStream.filename}" />
{#key playerSrc}
{#if playerSrc}
<Player display={true} src={playerSrc} />
{/if}
{/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.js';
import { tagList } from '$lib/stores.svelte.ts';
let { original = $bindable() } = $props();

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

@@ -19,12 +19,10 @@
const bubble = createBubbler();
import { onMount, onDestroy } from 'svelte';
import { fade } from 'svelte/transition';
import {
currentSongIndex,
currentStream,
getSongAtTime,
updateCurrentSong
} from '$lib/stores.js';
import { getStreamContext } from '$lib/streamContext.svelte.ts';
import type { Track } from '$lib/types';
const ctx = getStreamContext();
interface Props {
src: any;
@@ -75,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();
@@ -93,14 +92,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) {
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]);
}
});
@@ -119,7 +116,7 @@
}
}
function setMediaMetadata(track) {
function setMediaMetadata(track: Track) {
navigator.mediaSession.metadata = new MediaMetadata({
artist: track[1],
title: track[2]
@@ -128,8 +125,8 @@
// browsers don't like if you update this while no media is playing
function setMediaMetadataOnPlay() {
if ('mediaSession' in navigator) {
setMediaMetadata($currentStream.tracks[$currentSongIndex]);
if ('mediaSession' in navigator && ctx.current && ctx.songIndex != null) {
setMediaMetadata(ctx.current.tracks[ctx.songIndex]);
}
}
@@ -152,6 +149,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());
@@ -181,18 +183,21 @@
}
let bounds = songBar.getBoundingClientRect();
let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
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(() => {
updateCurrentSong(currentTime, $currentSongIndex);
if (ctx.songIndex != null) {
ctx.updateCurrentSong(currentTime, ctx.songIndex);
}
});
run(() => {
updateAudioAttributes(audio);
@@ -220,7 +225,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}
/>
@@ -239,7 +250,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)}

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

@@ -1,6 +1,6 @@
<script>
import { currentStream, currentSongIndex } from '$lib/stores.js';
import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
import { getStreamContext } from '$lib/streamContext.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,49 +9,55 @@
sanitizer: DOMPurify.sanitize
});
let formattedStreamDate = $derived(formatDate($currentStream.stream_date));
const ctx = getStreamContext();
let formattedStreamDate = $derived(
ctx.current ? formatDate(ctx.current.stream_date) : ''
);
</script>
<svelte:head>
<title>{formattedStreamDate} | apt-get's auditorium</title>
</svelte:head>
<div class="stream-information">
<div class="stream-information-flexbox">
<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
<h1 class="stream-date">{formattedStreamDate}</h1>
{#if ctx.current}
<div class="stream-information">
<div class="stream-information-flexbox">
<h3 class="stream-id">ID: {shorthandCode(ctx.current.id)}</h3>
<h1 class="stream-date">{formattedStreamDate}</h1>
</div>
<h5 class="stream-tags"><u>Tags</u>: {ctx.current.tags.join(', ')}</h5>
</div>
<h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
</div>
<div class="description-bubble">
{@html carta.renderSSR($currentStream.description || 'No description available.')}
</div>
<div class="description-bubble">
{@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}>
<td class="timestamp-field"
><div class="timestamp-field-flex">
{formatTrackTime(track[0])}
<button
onclick={() => jumpToTrack(track[0])}
class="material-icons"
style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
>fast_forward</button
>
</div>
</td>
<td class="artist-field">{track[1]}</td>
<td class="track-field">{track[2]}</td>
</tr>
{/each}
</tbody>
</table>
</div>
<div id="table-container">
<table>
<tbody>
<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
{#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])}
<button
onclick={() => jumpToTrack(track[0])}
class="material-icons"
style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
>fast_forward</button
>
</div>
</td>
<td class="artist-field">{track[1]}</td>
<td class="track-field">{track[2]}</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
<style>
.stream-information {