more changes

package-lock.json

@@ -24,6 +24,7 @@
                 "isomorphic-dompurify": "^2.0.0",
                 "prettier": "^2.8.0",
                 "prettier-plugin-svelte": "^2.8.1",
+                "sqids": "^0.3.0",
                 "svelte": "^4.0.0",
                 "svelte-check": "^3.0.1",
                 "svelte-select": "^5.6.1",
@@ -3477,6 +3478,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/sqids": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/sqids/-/sqids-0.3.0.tgz",
+            "integrity": "sha512-lOQK1ucVg+W6n3FhRwwSeUijxe93b51Bfz5PMRMihVf1iVkl82ePQG7V5vwrhzB11v0NtsR25PSZRGiSomJaJw=="
+        },
         "node_modules/streamsearch": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",

package.json

@@ -31,6 +31,7 @@
         "isomorphic-dompurify": "^2.0.0",
         "prettier": "^2.8.0",
         "prettier-plugin-svelte": "^2.8.1",
+        "sqids": "^0.3.0",
         "svelte": "^4.0.0",
         "svelte-check": "^3.0.1",
         "svelte-select": "^5.6.1",

scripts/generate_iconfont_subset.sh

@@ -14,6 +14,9 @@ unicodePoints=(
 	"e04e"     # volume_mute
 	"e04d"     # volume_down
 	"e050"     # volume_up
+	"e01f"     # fast_forward
+	"e83a"     # star_border
+	"e838"     # star
 )
 unicodeStr=$(
 	IFS=,

src/lib/stores.js

@@ -1,7 +1,19 @@
 import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
 
 export const currentStream = writable({});
 export const currentSongIndex = writable(0);
+
+export const favoritedStreams = writable(
+	new Set(JSON.parse((browser && localStorage.getItem('favoritedStreams')) || '[]'))
+);
+
+if (browser) {
+	favoritedStreams.subscribe((val) => {
+		localStorage.setItem('favoritedStreams', JSON.stringify(Array.from(val)));
+	});
+}
+
 export const tagList = [
 	'acoustic',
 	'electronic',
@@ -50,7 +62,6 @@ function locationOf(element, array, start, end) {
 
 export function getSongAtTime(currentTime) {
 	return locationOf(currentTime, timestampList) - 1;
-
 }
 
 // less operations needed when doing regular lookups
@@ -58,19 +69,17 @@ export function updateCurrentSong(currentTime, songIndex) {
 	function updateCurrentSongRecurse(songIndex) {
 		if (currentTime >= timestampList[songIndex + 2]) {
 			return updateCurrentSongRecurse(songIndex + 1);
-		}
+		} else if (currentTime < timestampList[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];
+	timestampList = [-Infinity, ...stream.tracks.map((track) => track[0]), Infinity];
 	currentSongIndex.set(0);
 }

src/lib/utils.js

@@ -0,0 +1,37 @@
+import Sqids from 'sqids';
+
+let sqids = new Sqids({ minLength: 6 });
+
+export function hashcode(str) {
+	for (var i = 0, h = 9; i < str.length; ) h = Math.imul(h ^ str.charCodeAt(i++), 9 ** 9);
+	return h ^ (h >>> 9);
+}
+
+// for mnemonic display
+export function shorthandCode(str) {
+	return sqids.encode([hashcode(str) & 0xffff]);
+}
+
+// for tag display
+export function hashColor(str) {
+	const hash = hashcode(str);
+	return `hsl(${hash % 360}, ${65 + (hash % 30) + 1}%, ${85 + (hash % 10) + 1}%)`;
+}
+
+export 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;
+}
+
+export function formatDate(unix_timestamp) {
+	return new Date(unix_timestamp).toISOString().split('T')[0];
+}
+
+export function formatTrackTime(s) {
+	return new Date(s * 1000).toISOString().slice(11, 19);
+}

src/routes/+layout.svelte

@@ -5,6 +5,7 @@
 			margin: 0;
 			padding: 0;
 			background: url(/assets/tile.png) repeat fixed;
+			overflow-y: hidden;
 		}
 
 		* {
@@ -18,6 +19,13 @@
 			src: url('/fonts/MaterialIcons-Regular-subset.woff2') format('woff2');
 		}
 
+		@font-face {
+			font-family: 'Montserrat';
+			font-style: normal;
+			font-weight: 300;
+			src: url('/fonts/Montserrat-Light.woff2') format('woff2');
+		}
+
 		.material-icons {
 			font-family: 'Material Icons';
 			font-weight: normal;

src/routes/+page.svelte

@@ -1 +1,8 @@
-<a href="/streams">lol</a>
+<script>
+	import { goto } from '$app/navigation';
+	import { browser } from '$app/environment';
+
+	if (browser) {
+		goto('/streams/');
+	}
+</script>

src/routes/streams/+layout.svelte

@@ -21,6 +21,7 @@
 		overflow-wrap: break-word;
 		margin: 0.5em;
 		scrollbar-gutter: stable;
+		scrollbar-width: thin;
 	}
 
 	#content {

src/routes/streams/Sidebar.svelte

@@ -1,30 +1,17 @@
 <script>
 	import { goto } from '$app/navigation';
+	import { favoritedStreams } from '$lib/stores.js';
+	import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
 	import TagSelect from './TagSelect.svelte';
 
 	export let streams;
 	let filteredTags = [];
 	let listOpen;
+	let favoritesOnly = false;
 
 	$: displayedStreams = streamsToDisplay(filteredTags);
 	$: remainingTags = getRemainingTags(displayedStreams);
 
-	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;
-	}
-
 	function streamsToDisplay(filteredTags) {
 		const displayedStreams = streams.filter(
 			(stream) =>
@@ -52,40 +39,62 @@
 	function getDisplayedTagsInList(streamTags, remainingTags) {
 		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
+	}
 </script>
 
-<h1>streams</h1>
+<div id="tag-select">
-
-<div id="tagSelect">
 	<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
+	<button
+		on:click={() => (favoritesOnly = !favoritesOnly)}
+		class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
+	>
 </div>
 
-<div>
+<ul class="stream-list">
-	<ul class="stream-list">
+	{#each streams as stream}
-		{#each streams as stream}
+		{@const favorited = $favoritedStreams.has(stream['id'])}
-			<li
+		<li
-				hidden={!displayedStreams.includes(stream)}
+			hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
-				class="stream-item"
+			class="stream-item"
-				id="stream-{stream['id']}"
+			id="stream-{stream['id']}"
-			>
+		>
-				<button
+			<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
-					class="stream-item-button"
+				<span class="stream-item-id">
-					on:click={() => goto('/streams/' + stream['id'])}
+					ID:
+					{shorthandCode(stream['id'])}</span
 				>
-					<span class="stream-item-title">{stream['title']}</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
-					<span class="stream-item-data">title: {stream['title']}</span>
+				>
-					<span class="stream-item-data"
+
-						>{getDisplayedTagsInList(stream['tags'], remainingTags)}</span
+				<p class="stream-item-tags" hidden={!remainingTags.length}>
-					>
+					Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
-				</button>
+						stream['tags'],
-			</li>
+						remainingTags
-		{/each}
+					).join(', ')}
-	</ul>
+				</p>
-</div>
+			</button>
+
+			<button
+				on:click={(e) => {
+					e.stopPropagation();
+					updateFavorites(stream);
+				}}
+				class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
+				>{favorited ? 'star' : 'star_border'}</button
+			>
+		</li>
+	{/each}
+</ul>
 
 <style>
 	.stream-list {
@@ -95,20 +104,82 @@
 		border: 1px solid black;
 	}
 
+	.stream-item-tags {
+		margin: 0;
+		font-family: Tahoma;
+		font-size: smaller;
+	}
+
+	.stream-item-id {
+		float: left;
+		font-family: monospace;
+		text-decoration: underline;
+	}
+
+	.stream-item-date {
+		float: right;
+		font-weight: bold;
+	}
+
 	.stream-item {
 		width: 100%;
 		overflow-wrap: anywhere;
 		border-bottom: 1px solid black;
+		position: relative;
 	}
 
 	.stream-item-button {
 		border-radius: 0;
 		min-width: 100%;
 		border: none;
+		padding: 5px;
 	}
 
-	#tagSelect {
+	#tag-select {
 		text-align: left;
 		color: black;
+		display: flex;
+	}
+
+	.material-icons {
+		margin-bottom: 0px;
+		color: black;
+		background-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+		transition: 0.3s;
+		border: none;
+	}
+
+	.select-faves-star {
+		color: rgba(255, 219, 88, 1);
+		font-size: 24px;
+	}
+
+	.unselect-faves-star {
+		color: #bbbbbb;
+		font-size: 24px;
+	}
+
+	.stream-item-star {
+		font-size: 18px;
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		opacity: 0;
+	}
+
+	.stream-item-star-faved {
+		opacity: 0.5;
+	}
+	.stream-item:hover .stream-item-star {
+		opacity: 0.5;
+	}
+
+	.stream-item:hover .stream-item-star:hover {
+		opacity: 1;
+	}
+
+	.material-icons::-moz-focus-inner {
+		border: 0;
 	}
 </style>

src/routes/streams/TagSelect.svelte

@@ -1,71 +1,72 @@
 <script>
-    import Select from 'svelte-select';
+	import Select from 'svelte-select';
-    import { tagList } from '$lib/stores.js';
+	import { tagList } from '$lib/stores.js';
 
-    let items = tagList.map((x) => ({ value: x, label: x }));
+	let items = tagList.map((x) => ({ value: x, label: x }));
 
-    let value = [];
+	let value = [];
-    export let checked = [];
+	export let checked = [];
-    let isChecked = {};
+	let isChecked = {};
-    export let remainingTags = [];
+	export let remainingTags = [];
-    export let listOpen;
+	export let listOpen;
 
-    $: computeValue(checked);
+	$: computeValue(checked);
-    $: computeIsChecked(checked);
+	$: computeIsChecked(checked);
 
-    function computeIsChecked() {
+	function computeIsChecked() {
-        isChecked = {};
+		isChecked = {};
-        checked.forEach((c) => (isChecked[c] = true));
+		checked.forEach((c) => (isChecked[c] = true));
-    }
+	}
 
-    function computeValue() {
+	function computeValue() {
-        value = checked.map((c) => items.find((i) => i.value === c));
+		value = checked.map((c) => items.find((i) => i.value === c));
-    }
+	}
 
-    function handleSelectable() {
+	function handleSelectable() {
-        items = items.map((item) => {
+		items = items.map((item) => {
-            return { ...item, selectable: !checked.includes(item.value) };
+			return { ...item, selectable: !checked.includes(item.value) };
-        });
+		});
-    }
+	}
 
-    function handleChange(e) {
+	function handleChange(e) {
-        if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
+		if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
-        else
+		else
-            checked.includes(e.detail.value)
+			checked.includes(e.detail.value)
-                ? (checked = checked.filter((i) => i != e.detail.value))
+				? (checked = checked.filter((i) => i != e.detail.value))
-                : (checked = [...checked, e.detail.value]);
+				: (checked = [...checked, e.detail.value]);
-        handleSelectable();
+		handleSelectable();
-    }
+	}
 
-    let itemFilter = function (label, filterText, option) {
+	let itemFilter = function (label, filterText, option) {
-        return (
+		return (
-            remainingTags.includes(option['value']) &&
+			remainingTags.includes(option['value']) &&
-            label.toLowerCase().includes(filterText.toLowerCase())
+			label.toLowerCase().includes(filterText.toLowerCase())
-        );
+		);
-    };
+	};
 </script>
 
 <Select
-    {items}
+	{items}
-    {value}
+	{value}
-    bind:listOpen
+	bind:listOpen
-    multiple={true}
+	multiple={true}
-    filterSelectedItems={true}
+	placeholder="Tag Filter..."
-    closeListOnChange={false}
+	filterSelectedItems={true}
-    on:select={handleChange}
+	closeListOnChange={false}
-    on:clear={handleChange}
+	on:select={handleChange}
-    {itemFilter}
+	on:clear={handleChange}
+	{itemFilter}
 >
-    <div class="item" slot="item" let:item>
+	<div class="item" slot="item" let:item>
-        <label for={item.value}>
+		<label for={item.value}>
-            <input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
+			<input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
-            {item.label}
+			{item.label}
-        </label>
+		</label>
-    </div>
+	</div>
 </Select>
 
 <style>
-    .item {
+	.item {
-        pointer-events: none;
+		pointer-events: none;
-    }
+	}
 </style>

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

@@ -2,7 +2,6 @@
 	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';
 
@@ -25,7 +24,7 @@
 <style>
 	#streamContainer {
 		display: grid;
-		grid-template-rows: 85% 15%;
+		grid-template-rows: auto 1fr;
 		height: calc(100vh - 1em);
 	}
 
@@ -33,9 +32,12 @@
 		grid-row: 1 / 2;
 		overflow: auto;
 		width: 100%;
+		background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
 	}
 
 	#player {
 		grid-row: 2 / 3;
+		margin-left: 1px;
+		margin-right: 1px;
 	}
 </style>

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

@@ -3,6 +3,7 @@
 	import { tagList } from '$lib/stores.js';
 
 	export let original;
+
 	let tagMap = new Map();
 
 	// Create a mapping of tags and their checked status
@@ -53,7 +54,6 @@
 <style>
 	form {
 		margin-left: 10px;
-		text-align: left;
 	}
 
 	label {

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

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

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

@@ -1,5 +1,6 @@
 <script>
 	import { currentStream, currentSongIndex } from '$lib/stores.js';
+	import { hashColor, shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
 	import { jumpToTrack } from './Player.svelte';
 	import { Carta } from 'carta-md';
 	import DOMPurify from 'isomorphic-dompurify';
@@ -8,44 +9,92 @@
 		sanitizer: DOMPurify.sanitize
 	});
 
-	function prettyPrintTime(s) {
+	$: formattedStreamDate = formatDate($currentStream.stream_date);
-		return new Date(s * 1000).toISOString().slice(11, 19);
-	}
 </script>
 
+<div class="stream-information">
+	<h1 class="stream-date">{formattedStreamDate}</h1>
+	<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
+	<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>
+<div id="table-container">
 	<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}>
+			<tr class:current={i == $currentSongIndex}>
-				<td>{prettyPrintTime(track[0])}</td>
+				<td class="timestamp-field"
-				<td>{track[1]}</td>
+					>{formatTrackTime(track[0])}
-				<td>{track[2]}</td>
+					<button on:click={() => jumpToTrack(track[0])} class="material-icons"
+						>fast_forward</button
+					>
+				</td>
+				<td class="artist-field">{track[1]}</td>
+				<td class="track-field">{track[2]}</td>
 			</tr>
 		{/each}
 	</table>
 </div>
 
 <style>
-	td {
+	.stream-information {
-		height: 1.3em;
+		width: 70%;
+		padding: 1px;
+		margin-top: 2%;
+		margin-left: 3%;
+		border-radius: 2px;
+		position: relative;
 	}
+
+	#table-container {
+		display: grid;
+		grid-template-columns: auto 1fr 1fr;
+		overflow-x: hidden;
+		margin-left: 3%;
+	}
+
+	th {
+		text-align: left;
+	}
+
+	.timestamp-field {
+		white-space: nowrap;
+	}
+
+	.stream-date {
+		font-size: x-large;
+		font-family: 'Montserrat';
+		right: 0;
+		position: absolute;
+		margin-right: 3%;
+		text-decoration: underline;
+	}
+
+	.stream-tags {
+		margin: 0;
+		font-family: Times New Roman;
+	}
+	.stream-id {
+		font-family: 'Montserrat';
+	}
+
 	.current {
-		background-color: gray;
+		background-color: rgba(128, 128, 128, 0.8);
 	}
 	.description-bubble {
 		position: relative;
-		background-color: #fff;
+		background-color: rgba(255, 255, 255, 0.75);
 		border: 1px solid #ccc;
 		color: black;
 		padding: 10px;
 		margin: 10px;
+		margin-left: 3%;
 		border-radius: 5px;
-		max-width: 80%;
+		max-width: 70%;
 		width: fit-content;
 		min-width: 50%;
 		font-family: Verdana;
@@ -53,11 +102,11 @@
 	}
 
 	.description-bubble :global(:first-child) {
-		margin-top: 0px !important;
+		margin-top: 0px;
 	}
 
 	.description-bubble :global(:last-child) {
-		margin-bottom: 0px !important;
+		margin-bottom: 0px;
 	}
 
 	.description-bubble::after {
@@ -66,9 +115,32 @@
 		border-style: solid;
 		border-width: 10px 0 10px 10px;
 		border-color: transparent transparent transparent #ccc;
-		top: 0;
+		top: 8px;
 		right: -10px;
 		width: 0;
 		height: 0;
 	}
+
+	.material-icons {
+		font-size: 16px;
+		margin-bottom: 0px;
+		color: white;
+		background-color: rgba(0, 0, 0, 0);
+		cursor: pointer;
+		transition: 0.3s;
+		border: none;
+		opacity: 0;
+	}
+
+	tr:hover .material-icons {
+		opacity: 0.5;
+	}
+
+	tr:hover .material-icons:hover {
+		opacity: 1;
+	}
+
+	.material-icons::-moz-focus-inner {
+		border: 0;
+	}
 </style>