initial commit

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);
+		}
+	}
+}