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="tagSelect">
+<div id="tag-select">
 	<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}
+		{@const favorited = $favoritedStreams.has(stream['id'])}
 		<li
-				hidden={!displayedStreams.includes(stream)}
+			hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
 			class="stream-item"
 			id="stream-{stream['id']}"
 		>
-				<button
-					class="stream-item-button"
-					on:click={() => goto('/streams/' + stream['id'])}
+			<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
+				<span class="stream-item-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-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(
+						stream['tags'],
+						remainingTags
+					).join(', ')}
+				</p>
 			</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>
-</div>
+</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

@@ -50,6 +50,7 @@
 	{value}
 	bind:listOpen
 	multiple={true}
+	placeholder="Tag Filter..."
 	filterSelectedItems={true}
 	closeListOnChange={false}
 	on:select={handleChange}

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

@@ -53,6 +53,8 @@
 	let volumeSeeking = false;
 	let songBar;
 	let volumeBar;
+	let innerWidth;
+	let innerHeight;
 
 	onMount(async () => {
 		const volumeData = localStorage.getItem('volume');
@@ -120,8 +122,8 @@
 	function seekTooltip(event) {
 		if (!inlineTooltip) {
 			let tooltipBounds = tooltip.getBoundingClientRect();
-            tooltipX = event.pageX - tooltipBounds.width - 10;
-            tooltipY = songBar.offsetTop + 10;
+			tooltipX = Math.min(event.pageX + 10, innerWidth - tooltipBounds.width);
+			tooltipY = Math.min(songBar.offsetTop - 30, innerHeight - tooltipBounds.height);
 		}
 		let bounds = songBar.getBoundingClientRect();
 		let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
@@ -137,7 +139,12 @@
 	}
 </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}">
@@ -240,6 +247,9 @@
 		user-select: none; /* Standard syntax */
 		padding-top: 5px;
 		padding-bottom: 5px;
+		border: 3px double;
+		border-radius: 5px;
+		color: rgba(0, 0, 0, 0.6);
 	}
 
 	.control-times {

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) {
-		return new Date(s * 1000).toISOString().slice(11, 19);
-	}
+	$: formattedStreamDate = formatDate($currentStream.stream_date);
 </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}>
-				<td>{prettyPrintTime(track[0])}</td>
-				<td>{track[1]}</td>
-				<td>{track[2]}</td>
+			<tr class:current={i == $currentSongIndex}>
+				<td class="timestamp-field"
+					>{formatTrackTime(track[0])}
+					<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 {
-		height: 1.3em;
+	.stream-information {
+		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>