initial commit

.editorconfig

@@ -0,0 +1,5 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: [
+    // add more generic rule sets here, such as:
+    // 'eslint:recommended',
+    "plugin:svelte/prettier",
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'svelte/rule-name': 'error'
+  },
+}

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+/static/files/*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,10 @@
+{
+	"useTabs": false,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -0,0 +1,23 @@
+# strimserve
+
+## install dependencies
+
+Also useful: fonttools (regenerating icon font if necessary)
+
+```bash
+# npm packages
+npm install
+```
+
+## running dev server
+```bash
+npm run dev
+```
+
+## Building
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.

db/.gitignore

@@ -0,0 +1,2 @@
+strimserve.db
+stream_json

db/init_db.js

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import Database from 'better-sqlite3';
+
+const dbName = 'strimserve.db';
+
+// Read the schema file
+const schema = fs.readFileSync('schema.sql', 'utf8');
+
+// Create a new database object and initialize it with the schema
+const db = new Database(dbName);
+
+try {
+	console.log(`Connected to the ${dbName} database.`);
+	db.exec(schema);
+	console.log('Schema initialized successfully.');
+} catch (err) {
+	console.error(err.message);
+} finally {
+	db.close();
+}

db/schema.sql

@@ -0,0 +1,12 @@
+CREATE TABLE Stream (
+    id TEXT PRIMARY KEY NOT NULL UNIQUE,
+    stream_date TEXT NOT NULL,
+    filename TEXT NOT NULL UNIQUE,
+    format TEXT NOT NULL,
+    title TEXT,
+	description TEXT,
+    tags TEXT,
+    length_seconds INT NOT NULL,
+    tracks TEXT NOT NULL,
+    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP NOT NULL
+);

db/update_db.js

@@ -0,0 +1,68 @@
+import fs from 'fs';
+import Database from 'better-sqlite3';
+
+const jsonFolder = './stream_json/';
+const dbName = 'strimserve.db';
+const db = new Database(dbName);
+
+// Map JSON attribute names to database column names
+// Not needed today, but makes schema changes easier
+const lookup = {
+	id: 'id',
+	date: 'stream_date',
+	filename: 'filename',
+	format: 'format',
+	title: 'title',
+	tags: 'tags',
+	description: 'description',
+	length_seconds: 'length_seconds',
+	tracks: 'tracks'
+};
+
+// Retrieve existing IDs from Stream
+const existingIds = db.prepare('SELECT id FROM Stream').pluck().all();
+// Create a set of existing IDs for efficient lookup
+const idSet = new Set(existingIds);
+
+// Check if --overwrite flag is set
+const shouldOverwrite = process.argv.includes('--overwrite');
+
+// Process JSON files and insert data into Stream
+fs.readdir(jsonFolder, (err, files) => {
+	if (err) throw err;
+	console.log(`Found ${files.length} JSON file(s) in ${jsonFolder}.`);
+
+	files.forEach(file => {
+		if (!file.endsWith('.json')) return;
+		if (file.endsWith('.sideload.json')) return;
+
+		const jsonString = fs.readFileSync(jsonFolder + file, 'utf8');
+		let jsonData = JSON.parse(jsonString);
+
+		const sideloadPath = jsonFolder + file.slice(0, -5) + ".sideload.json";
+		if (fs.existsSync(sideloadPath, 'utf8')) {
+			const sideloadData = JSON.parse(fs.readFileSync(sideloadPath));
+			jsonData = { ...jsonData, ...sideloadData };
+		}
+		// Skip if ID already exists in Stream
+		if (idSet.has(jsonData.id)) {
+			if (!shouldOverwrite) {
+				console.log(`Skipped data for ID ${jsonData.id} (already exists).`);
+				return;
+			}
+			console.log(`Overwriting data for ID ${jsonData.id}.`);
+		}
+
+		// Prepare attributes for insertion
+		const values = Object.keys(jsonData).map(
+			// Serialize value if array
+			key => Array.isArray(jsonData[key]) ? JSON.stringify(jsonData[key]) : jsonData[key]
+		);
+		const columns = Object.keys(jsonData).map(key => lookup[key]);
+
+
+		const sql = `INSERT OR REPLACE INTO Stream (${columns.join(', ')}) VALUES (${columns.map(() => '?').join(', ')})`;
+		db.prepare(sql).run(...values);
+		console.log(`Inserted data for ID ${jsonData.id}.`);
+	});
+});

package.json

@@ -0,0 +1,41 @@
+{
+    "name": "strimserve",
+    "version": "0.0.1",
+    "private": true,
+    "scripts": {
+        "dev": "vite dev",
+        "build": "vite build",
+        "preview": "vite preview",
+        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+        "lint": "prettier --plugin-search-dir . --check . && eslint .",
+        "format": "prettier --plugin-search-dir . --write .",
+        "init_db": "cd db && node ./init_db.js",
+        "update_db": "cd db && node ./update_db.js",
+        "generate_iconfont_subset": "cd scripts && bash ./generate_iconfont_subset.sh"
+    },
+    "devDependencies": {
+        "@sveltejs/adapter-node": "^1.2.3",
+        "@sveltejs/kit": "^1.5.0",
+        "@types/better-sqlite3": "^7.6.4",
+        "@types/node": "^20.3.1",
+        "@typescript-eslint/eslint-plugin": "^5.45.0",
+        "@typescript-eslint/parser": "^5.45.0",
+        "better-sqlite3": "^8.3.0",
+        "eslint": "^8.28.0",
+        "eslint-config-prettier": "^8.5.0",
+        "fontkit": "^2.0.2",
+        "prettier": "^2.8.0",
+        "prettier-plugin-svelte": "^2.8.1",
+        "svelte": "^4.0.0",
+        "svelte-check": "^3.0.1",
+        "svelte-select": "^5.6.1",
+        "tslib": "^2.4.1",
+        "typescript": "^5.0.0",
+        "vite": "^4.2.0"
+    },
+    "type": "module",
+    "dependencies": {
+        "eslint-plugin-svelte": "^2.31.0"
+    }
+}

scripts/.gitignore

@@ -0,0 +1,2 @@
+*.ttf
+*.woff2

scripts/generate_iconfont_subset.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Font URL
+fontUrl="https://raw.githubusercontent.com/google/material-design-icons/master/font/MaterialIcons-Regular.ttf"
+fontFile="$(basename "$fontUrl")"
+
+# Codepoints can be found at https://fonts.google.com/icons?icon.set=Material+Icons
+unicodePoints=(
+	"61-7a,5f" # ascii lowercase + underscore
+	"e2c4"     # file_download
+	"e037"     # play_arrow
+	"e034"     # pause
+	"e04f"     # volume_off
+	"e04e"     # volume_mute
+	"e04d"     # volume_down
+	"e050"     # volume_up
+)
+unicodeStr=$(
+	IFS=,
+	echo "${unicodePoints[*]}"
+)
+
+# Command extracts the needed iconfont codepoints and compresses as woff2 for small bundled size
+fontToolsBinary="fonttools"
+fontToolsArgs=("subset" "$fontFile" "--output-file=../static/fonts/MaterialIcons-Regular-subset.woff2" "--no-layout-closure" "--unicodes=${unicodeStr}" "--flavor=woff2" "--verbose")
+
+# Check if file exists
+if [ -f "$fontFile" ]; then
+	echo "Font file already exists. Skipping download."
+else
+	echo "Font file not found. Downloading..."
+	curl -s -o "$fontFile" "$fontUrl"
+fi
+
+# Check if fonttools binary exists
+if ! command -v "$fontToolsBinary" &>/dev/null; then
+	echo "Error: $fontToolsBinary not found. Please install it and try again."
+else
+	echo "$fontToolsBinary is installed. Running command..."
+	echo "${fontToolsArgs[@]}"
+	"$fontToolsBinary" "${fontToolsArgs[@]}"
+fi

src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<meta name="viewport" content="width=device-width" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>

src/lib/database.js

@@ -0,0 +1,27 @@
+import Database from 'better-sqlite3';
+
+const dbName = './db/strimserve.db';
+
+// Create a new database object and initialize it with the schema
+const db = new Database(dbName);
+
+export function getStreams() {
+	const indexData = db.prepare('SELECT id, stream_date, title, tags, length_seconds ' +
+		'FROM Stream ORDER BY id DESC').all();
+	indexData.forEach(stream =>
+		stream['stream_date'] = Date.parse(stream['stream_date'])
+	);
+	return indexData;
+}
+
+export function getStreamInfo(streamId) {
+	const streamData = db.prepare("SELECT id, stream_date, filename, " +
+		"format, title, description, tags, " +
+		"length_seconds, tracks FROM Stream " +
+		"WHERE id = ?").get(streamId);
+	streamData['stream_date'] = Date.parse(streamData['stream_date']);
+	streamData['tracks'] = JSON.parse(streamData['tracks']);
+	streamData['tags'] = JSON.parse(streamData['tags']);
+	streamData['tracks_num'] = streamData['tracks'].length;
+	return streamData;
+}

src/lib/stores.js

@@ -0,0 +1,49 @@
+import { writable } from 'svelte/store';
+
+export const currentStream = writable({});
+export const currentSongIndex = writable(0);
+
+let timestampList;
+
+// utility
+
+function locationOf(element, array, start, end) {
+	start = start || 0;
+	end = end || array.length;
+	var pivot = parseInt(start + (end - start) / 2, 10);
+	if (end - start <= 1 || array[pivot] === element) return pivot;
+	if (array[pivot] < element) {
+		return locationOf(element, array, pivot, end);
+	} else {
+		return locationOf(element, array, start, pivot);
+	}
+}
+
+// exported methods
+
+export function getSongAtTime(currentTime) {
+	return locationOf(currentTime, timestampList) - 1;
+
+}
+
+// less operations needed when doing regular lookups
+export function updateCurrentSong(currentTime, songIndex) {
+	function updateCurrentSongRecurse(songIndex) {
+		if (currentTime >= timestampList[songIndex + 2]) {
+			return updateCurrentSongRecurse(songIndex + 1);
+		}
+		else if (currentTime < timestampList[songIndex + 1]) {
+			return updateCurrentSongRecurse(songIndex - 1);
+		}
+		return songIndex;
+	}
+
+	currentSongIndex.set(updateCurrentSongRecurse(songIndex));
+
+}
+
+export function updateCurrentStream(stream) {
+	currentStream.set(stream);
+	timestampList = [-Infinity, ...stream.tracks.map(track => track[0]), Infinity];
+	currentSongIndex.set(0);
+}

src/routes/+layout.svelte

@@ -0,0 +1,34 @@
+<svelte:head>
+    <style>
+        body,
+        html {
+            margin: 0;
+            padding: 0;
+        }
+
+        @font-face {
+            font-family: 'Material Icons';
+            font-style: normal;
+            font-weight: 400;
+            src: url('/fonts/MaterialIcons-Regular-subset.woff2') format('woff2');
+        }
+
+        .material-icons {
+            font-family: 'Material Icons';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 24px;
+            line-height: 1;
+            letter-spacing: normal;
+            text-transform: none;
+            display: inline-block;
+            white-space: nowrap;
+            word-wrap: normal;
+            direction: ltr;
+            -moz-font-feature-settings: 'liga';
+            -moz-osx-font-smoothing: grayscale;
+        }
+    </style>
+</svelte:head>
+
+<slot />

src/routes/+page.svelte

@@ -0,0 +1 @@
+<a href="/streams">lol</a>

src/routes/streams/+layout.server.ts

@@ -0,0 +1,8 @@
+import { error } from "@sveltejs/kit";
+import { getStreams } from "$lib/database.js";
+
+export function load() {
+	return {
+		streams: getStreams()
+	};
+}

src/routes/streams/+layout.svelte

@@ -0,0 +1,27 @@
+<script>
+    import Sidebar from './Sidebar.svelte';
+    export let data;
+</script>
+
+<div id="mainContainer">
+    <div id="sidebar"><Sidebar streams={data.streams} /></div>
+    <div id="content"><slot /></div>
+</div>
+
+<style>
+    #mainContainer {
+        display: grid;
+        grid-template-columns: 25% 75%;
+        height: 100vh;
+    }
+    #sidebar {
+        grid-column: 1;
+        height: 100%;
+        overflow: auto;
+        overflow-wrap: break-word;
+    }
+
+    #content {
+        grid-column: 2;
+    }
+</style>

src/routes/streams/Sidebar.svelte

@@ -0,0 +1,62 @@
+<script>
+    import { goto } from '$app/navigation';
+    export let streams;
+
+    function formatSecondsToHms(s) {
+        s = Number(s);
+        var h = Math.floor(s / 3600);
+        var m = Math.ceil((s % 3600) / 60);
+
+        var hDisplay = h > 0 ? h + (h == 1 ? ' hr' : ' hrs') + (m > 0 ? ', ' : '') : '';
+        var mDisplay = m > 0 ? m + (m == 1 ? ' min' : ' mins') : '';
+        return hDisplay + mDisplay;
+    }
+
+    function formatDate(unix_timestamp) {
+        const date = new Date(unix_timestamp);
+        const formattedDate = date.toISOString().split('T')[0];
+        return formattedDate;
+    }
+</script>
+
+<h1>streams</h1>
+
+<div>
+    <ul class="stream-list">
+        {#each streams as stream}
+            <li class="stream-item" id="stream-{stream['id']}">
+                <button
+                    class="stream-item-button"
+                    on:click={() => goto('/streams/' + stream['id'])}
+                >
+                    <span class="stream-item-title">{stream['title']}</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-data">{JSON.stringify(stream)}</span>
+                </button>
+            </li>
+        {/each}
+    </ul>
+</div>
+
+<style>
+    .stream-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        border: 1px solid black;
+    }
+
+    .stream-item {
+        width: 100%;
+        overflow-wrap: anywhere;
+        border-bottom: 1px solid black;
+    }
+
+    .stream-item-button {
+        border-radius: 0;
+        border: none;
+    }
+</style>

src/routes/streams/TagSelect.svelte

@@ -0,0 +1,64 @@
+<script>
+    import Select from 'svelte-select';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' }
+    ];
+
+    let value = [];
+    let checked = [];
+    let isChecked = {};
+
+    $: computeValue(checked);
+    $: computeIsChecked(checked);
+
+    function computeIsChecked() {
+        isChecked = {};
+        checked.forEach((c) => (isChecked[c] = true));
+    }
+
+    function computeValue() {
+        value = checked.map((c) => items.find((i) => i.value === c));
+    }
+
+    function handleSelectable() {
+        items = items.map((item) => {
+            console.log(item);
+            return { ...item, selectable: !checked.includes(item.value) };
+        });
+    }
+
+    function handleChange(e) {
+        if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
+        else
+            checked.includes(e.detail.value)
+                ? (checked = checked.filter((i) => i != e.detail.value))
+                : (checked = [...checked, e.detail.value]);
+        handleSelectable();
+    }
+</script>
+
+<Select
+    {items}
+    {value}
+    multiple={true}
+    filterSelectedItems={false}
+    closeListOnChange={false}
+    on:select={handleChange}
+    on:clear={handleChange}
+>
+    <div class="item" slot="item" let:item>
+        <label for={item.value}>
+            <input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
+            {item.label}
+        </label>
+    </div>
+</Select>
+
+<style>
+    .item {
+        pointer-events: none;
+    }
+</style>

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

@@ -0,0 +1,59 @@
+import fs from 'fs';
+import { error } from "@sveltejs/kit";
+import { getStreamInfo } from "$lib/database.js";
+import { dev } from "$app/environment";
+
+let getOriginalJson, writeSideloadJson;
+export let actions;
+
+// utilities for manipulating original stream JSONs
+if (dev) {
+	const jsonFolder = './db/stream_json/';
+
+	getOriginalJson = function (streamId) {
+		const filePath = jsonFolder + streamId + ".sideload.json";
+		if (fs.existsSync(filePath)) {
+			const jsonString = fs.readFileSync(filePath, 'utf8');
+			return jsonString;
+		} else {
+			return JSON.stringify({ 'title': '', 'description': '', 'tags': [] });
+		}
+	}
+
+	writeSideloadJson = function (streamId, newJson) {
+		const filePath = jsonFolder + streamId + ".sideload.json";
+		fs.writeFileSync(filePath, JSON.stringify(newJson), 'utf8');
+	}
+
+	actions = {
+		default: async ({ params, request }) => {
+			const data = await request.formData();
+			// let newJson = JSON.parse(getOriginalJson(params.stream_id));
+			let newJson = {};
+			newJson['title'] = data.get('title');
+			newJson['description'] = data.get('description');
+			newJson['tags'] = data.getAll('tags');
+			writeSideloadJson(params.stream_id, newJson);
+		}
+	}
+}
+
+export function load({ params }) {
+	const result = getStreamInfo(params.stream_id);
+	if (result === null) {
+		throw error(404);
+	}
+
+	if (dev) {
+		// pass raw JSON for metadata editor
+		let original = JSON.parse(getOriginalJson(params.stream_id));
+		return {
+			stream: result,
+			original: original
+		}
+	} else {
+		return {
+			stream: result
+		};
+	}
+}

src/routes/streams/[stream_id]/+page.svelte

@@ -0,0 +1,40 @@
+<script>
+    import StreamPage from './StreamPage.svelte';
+    import MetadataEditor from './MetadataEditor.svelte';
+    import Player from './Player.svelte';
+    import { page } from '$app/stores';
+    import { dev } from '$app/environment';
+    import { currentStream, updateCurrentStream } from '$lib/stores.js';
+
+    export let data;
+    $: updateCurrentStream(data.stream);
+</script>
+
+<div id="streamContainer">
+    <div id="streamPage">
+        {#if dev}
+            <MetadataEditor {...data} />
+        {/if}
+        <StreamPage />
+    </div>
+    <div id="player">
+        <Player display={true} src="/files/tracks/{$currentStream.filename}" />
+    </div>
+</div>
+
+<style>
+    #streamContainer {
+        display: grid;
+        grid-template-rows: 85% 15%;
+        height: 100vh;
+    }
+
+    #streamPage {
+        grid-row: 1 / 2;
+        overflow: auto;
+    }
+
+    #player {
+        grid-row: 2 / 3;
+    }
+</style>

src/routes/streams/[stream_id]/MetadataEditor.svelte

@@ -0,0 +1,102 @@
+<script>
+    import { page } from '$app/stores';
+
+    export let original;
+
+    let tagList = [];
+    let tagMap = new Map();
+
+    tagList = [
+        'acoustic',
+        'electronic',
+        'orchestral',
+        'rock',
+        'pop',
+        'metal',
+        'aggressive',
+        'folk',
+        'jazzy',
+        'dance.music',
+        'untz',
+        'breakbeats',
+        'electronica',
+        'chiptune',
+        'left.field',
+        'denpa',
+        'vocaloid',
+        'funky',
+        'lush',
+        'noisy',
+        'psychedelic',
+        'dark',
+        'calm',
+        'moody',
+        'uplifting'
+    ];
+
+    // Create a mapping of tags and their checked status
+    let reloadTags = (original) => {
+        tagList.forEach((tag) => {
+            tagMap.set(tag, original.tags.includes(tag));
+        });
+    };
+
+    $: reloadTags(original);
+</script>
+
+{#key $page.url.pathname}
+    <form method="POST">
+        <br />
+        <label>
+            <p>Title:</p>
+            <input type="text" name="title" bind:value={original.title} />
+        </label>
+        <br />
+
+        <label>
+            <p>Description:</p>
+            <textarea
+                style="min-width:400px;min-height:100px"
+                name="description"
+                bind:value={original.description}
+            />
+        </label>
+        <br />
+        <label>
+            <p>Tags:</p>
+            <div class="checkboxContainer">
+                {#each tagList as tag}
+                    <label>
+                        <input type="checkbox" name="tags" value={tag} checked={tagMap.get(tag)} />
+                        {tag}
+                    </label>
+                {/each}
+            </div>
+        </label>
+        <br />
+
+        <button type="submit">Submit</button>
+    </form>
+{/key}
+
+<style>
+    form {
+        margin-left: 10px;
+    }
+
+    label {
+        display: flex;
+        align-items: center;
+    }
+
+    label > p {
+        margin-right: 5px;
+    }
+
+    .checkboxContainer {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 1px;
+        max-width: 50%;
+    }
+</style>

src/routes/streams/[stream_id]/Player.svelte

@@ -0,0 +1,321 @@
+<!-->
+	 taken from https://github.com/Linkcube/svelte-audio-controls
+	 ISC License
+-->
+<svelte:options accessors />
+
+<script context="module">
+    let getAudio = null;
+
+    export function jumpToTrack(s) {
+        getAudio().currentTime = s;
+    }
+</script>
+
+<script>
+    import { onMount } from 'svelte';
+    import { fade } from 'svelte/transition';
+    import {
+        currentSongIndex,
+        currentStream,
+        getSongAtTime,
+        updateCurrentSong
+    } from '$lib/stores.js';
+
+    export let src;
+    export let audio = null;
+    export let paused = true;
+    export let duration = 0;
+    export let muted = false;
+    export let volume = 1;
+    export let preload = 'metadata';
+    export let iconColor = 'gray';
+    export let textColor = 'gray';
+    export let barPrimaryColor = 'lightblue';
+    export let barSecondaryColor = 'lightgray';
+    export let backgroundColor = 'white';
+    export let display = false;
+    export let inlineTooltip = false;
+    export let disableTooltip = false;
+
+    getAudio = () => {
+        return audio;
+    };
+
+    let currentTime = 0;
+    let tooltip;
+    let tooltipX = 0;
+    let tooltipY = 0;
+    let showTooltip = false;
+    let seekText = '';
+    let seekTrack = '';
+    let seeking = false;
+    let volumeSeeking = false;
+    let songBar;
+    let volumeBar;
+
+    onMount(async () => {
+        const volumeData = localStorage.getItem('volume');
+        volume = volumeData ? parseFloat(volumeData) : 1;
+    });
+
+    $: updateCurrentSong(currentTime, $currentSongIndex);
+    $: updateAudioAttributes(audio);
+
+    function seek(event, bounds) {
+        let x = event.pageX - bounds.left;
+        return Math.min(Math.max(x / bounds.width, 0), 1);
+    }
+
+    // exponential volume bar
+    // default is linear, which doesn't correspond to human hearing
+    function setVolume(volume) {
+        if (volume != 0) {
+            audio.volume = Math.pow(10, 2.5 * (volume - 1));
+        } else {
+            audio.volume = volume;
+        }
+    }
+
+    // workaround for bug https://github.com/sveltejs/svelte/issues/5347
+    // need to init duration & volume after SSR first load
+    function updateAudioAttributes(audio) {
+        if (audio && audio.duration) {
+            duration = audio.duration;
+            setVolume(volume);
+
+            // workaround for bug https://github.com/sveltejs/svelte/issues/5914
+            audio.addEventListener('loadedmetadata', (event) => {
+                paused = audio.paused;
+            });
+        }
+    }
+
+    function seekAudio(event) {
+        if (!songBar) return;
+        audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
+    }
+
+    function seekVolume(event) {
+        if (!volumeBar) return;
+        volume = seek(event, volumeBar.getBoundingClientRect());
+        setVolume(volume);
+        localStorage.setItem('volume', volume.toString());
+        muted = false;
+    }
+
+    function formatSeconds(seconds) {
+        if (isNaN(seconds)) return 'No Data';
+        var sec_num = parseInt(seconds, 10);
+        var hours = Math.floor(sec_num / 3600);
+        var minutes = Math.floor(sec_num / 60) % 60;
+        var seconds = sec_num % 60;
+
+        return [hours, minutes, seconds]
+            .map((v) => (v < 10 ? '0' + v : v))
+            .filter((v, i) => v !== '00' || i > 0)
+            .join(':');
+    }
+
+    function seekTooltip(event) {
+        if (!inlineTooltip) {
+            let tooltipBounds = tooltip.getBoundingClientRect();
+            tooltipX = event.pageX - tooltipBounds.width - 10;
+            tooltipY = songBar.offsetTop + 10;
+        }
+        let bounds = songBar.getBoundingClientRect();
+        let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
+        let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
+        seekTrack = trackArray[1] + ' - ' + trackArray[2];
+        seekText = formatSeconds(seekValue);
+    }
+
+    function trackMouse(event) {
+        if (seeking) seekAudio(event);
+        if (showTooltip && !disableTooltip) seekTooltip(event);
+        if (volumeSeeking) seekVolume(event);
+    }
+</script>
+
+<svelte:window on:mouseup={() => (seeking = volumeSeeking = false)} on:mousemove={trackMouse} />
+
+{#if display}
+    <div class="controls" style="--color:{textColor}; --background-color:{backgroundColor}">
+        <button
+            class="material-icons"
+            style="--icon-color:{iconColor}"
+            on:click={() => (audio.paused ? audio.play() : audio.pause())}
+        >
+            {#if paused}
+                play_arrow
+            {:else}
+                pause
+            {/if}
+        </button>
+        <progress
+            bind:this={songBar}
+            value={currentTime ? currentTime : 0}
+            max={duration}
+            on:mousedown={() => (seeking = true)}
+            on:mouseenter={() => (showTooltip = true)}
+            on:mouseleave={() => (showTooltip = false)}
+            on:click={seekAudio}
+            style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
+            class="song-progress"
+        />
+        <div class="control-times">{formatSeconds(currentTime)}/{formatSeconds(duration)}</div>
+        <button
+            style="--icon-color:{iconColor}"
+            class="material-icons"
+            on:click={() => (muted = !muted)}
+        >
+            {#if muted}
+                volume_off
+            {:else if volume < 0.01}
+                volume_mute
+            {:else if volume < 0.5}
+                volume_down
+            {:else}
+                volume_up
+            {/if}
+        </button>
+        <progress
+            bind:this={volumeBar}
+            value={volume}
+            on:mousedown={() => (volumeSeeking = true)}
+            on:click={seekVolume}
+            style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
+            class="volume-progress"
+        />
+        {#if !disableTooltip && (inlineTooltip || showTooltip)}
+            <div
+                class:hover-tooltip={!inlineTooltip}
+                transition:fade
+                bind:this={tooltip}
+                class="tooltip"
+                style="--left:{tooltipX}px;
+                --top:{tooltipY}px;
+                --background-color:{backgroundColor};
+                --box-color:{barSecondaryColor};
+                --text-color:{textColor}"
+            >
+                {#if showTooltip}
+                    {seekText}
+                    <br />
+                    {seekTrack}
+                {:else if duration > 3600}
+                    --:--:--
+                {:else}
+                    --:--
+                {/if}
+            </div>
+        {/if}
+    </div>
+{/if}
+
+<audio
+    bind:this={audio}
+    bind:paused
+    bind:duration
+    bind:currentTime
+    {muted}
+    {volume}
+    on:play
+    on:ended
+    {src}
+    {preload}
+/>
+
+<style>
+    .controls {
+        display: flex;
+        flex-flow: row;
+        justify-content: space-around;
+        color: var(--color);
+        background-color: var(--background-color);
+        padding-left: 10px;
+        padding-right: 10px;
+        -webkit-user-select: none; /* Safari */
+        -ms-user-select: none; /* IE 10+ and Edge */
+        user-select: none; /* Standard syntax */
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+
+    .control-times {
+        margin: auto;
+        margin-right: 5px;
+    }
+
+    .tooltip {
+        background-color: var(--background-color);
+        padding: 1px;
+        border-radius: 5px;
+        border-width: 3px;
+        box-shadow: 6px 6px var(--box-color);
+        color: var(--text-color);
+        pointer-events: none;
+        min-width: 50px;
+        text-align: center;
+        margin-bottom: 5px;
+    }
+
+    .hover-tooltip {
+        position: absolute;
+        top: var(--top);
+        left: var(--left);
+    }
+
+    .material-icons {
+        font-size: 16px;
+        margin-bottom: 0px;
+        color: var(--icon-color);
+        background-color: rgba(0, 0, 0, 0);
+        cursor: pointer;
+        transition: 0.3s;
+        border: none;
+        border-radius: 25px;
+    }
+
+    .material-icons:hover {
+        box-shadow: 0px 6px rgba(0, 0, 0, 0.6);
+    }
+
+    .material-icons::-moz-focus-inner {
+        border: 0;
+    }
+
+    progress {
+        display: block;
+        color: var(--primary-color);
+        background: var(--secondary-color);
+        border: none;
+        height: 15px;
+        margin: auto;
+        margin-left: 5px;
+        margin-right: 5px;
+    }
+
+    progress::-webkit-progress-bar {
+        background-color: var(--secondary-color);
+        width: 100%;
+    }
+
+    progress::-moz-progress-bar {
+        background: var(--primary-color);
+    }
+
+    progress::-webkit-progress-value {
+        background: var(--primary-color);
+    }
+
+    .song-progress {
+        width: 100%;
+    }
+
+    .volume-progress {
+        width: 10%;
+        max-width: 100px;
+        min-width: 50px;
+    }
+</style>

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -0,0 +1,53 @@
+<script>
+    import { currentStream, currentSongIndex } from '$lib/stores.js';
+    import {} from 'svelte';
+    import { jumpToTrack } from './Player.svelte';
+
+    function prettyPrintTime(s) {
+        return new Date(s * 1000).toISOString().slice(11, 19);
+    }
+</script>
+
+<div class="description-bubble">
+    {$currentStream.description === '' ? 'No description available.' : $currentStream.description}
+</div>
+
+<div>
+    <table>
+        <tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
+        {#each $currentStream.tracks as track, i}
+            <tr on:click={() => jumpToTrack(track[0])} class:current={i == $currentSongIndex}>
+                <td>{prettyPrintTime(track[0])}</td>
+                <td>{track[1]}</td>
+                <td>{track[2]}</td>
+            </tr>
+        {/each}
+    </table>
+</div>
+
+<style>
+    .current {
+        background-color: gray;
+    }
+    .description-bubble {
+        position: relative;
+        background-color: #fff;
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin: 10px;
+        border-radius: 5px;
+        width: 200px;
+    }
+
+    .description-bubble::after {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        border-width: 10px 0 10px 10px;
+        border-color: transparent transparent transparent #ccc;
+        top: 0;
+        right: -10px;
+        width: 0;
+        height: 0;
+    }
+</style>

src/routes/streams/[stream_id]/original/+server.ts

@@ -0,0 +1,19 @@
+import fs from 'fs';
+import { json } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
+
+export let GET;
+
+if (process.env.NODE_ENV === 'development') {
+	const jsonFolder = './db/stream_json/';
+
+	GET = function ({ params }) {
+		const filePath = jsonFolder + params.stream_id + ".json";
+		if (fs.existsSync(filePath)) {
+			const jsonString = fs.readFileSync(filePath, 'utf8');
+			return json(jsonString);
+		} else {
+			throw error(404);
+		}
+	}
+}

svelte.config.js

@@ -0,0 +1,24 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+const assets_folder = (process.env.NODE_ENV == "production") ? "public" : "static";
+process.env.ASSETS_FOLDER = assets_folder;
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter(),
+		files: {
+			assets: assets_folder,
+		},
+	}
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+});