more changes

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>