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

<script>
	import { currentStream, currentSongIndex } from '$lib/stores.js';
	import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
	import { jumpToTrack } from './Player.svelte';
	import { Carta } from 'carta-md';
	import DOMPurify from 'isomorphic-dompurify';

	const carta = new Carta({
		sanitizer: DOMPurify.sanitize
	});

	$: formattedStreamDate = formatDate($currentStream.stream_date);
</script>

<svelte:head>
	<title>{formattedStreamDate} | apt-get's auditorium</title>
</svelte:head>

<div class="stream-information">
	<div class="stream-information-flexbox">
		<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
		<h1 class="stream-date">{formattedStreamDate}</h1>
	</div>
	<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 id="table-container">
	<table>
		<tbody>
			<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
			{#each $currentStream.tracks as track, i}
				<tr class:current={i == $currentSongIndex}>
					<td class="timestamp-field"
						><div class="timestamp-field-flex">
							{formatTrackTime(track[0])}
							<button
								on:click={() => jumpToTrack(track[0])}
								class="material-icons"
								style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
								>fast_forward</button
							>
						</div>
					</td>
					<td class="artist-field">{track[1]}</td>
					<td class="track-field">{track[2]}</td>
				</tr>
			{/each}
		</tbody>
	</table>
</div>

<style>
	.stream-information {
		width: 70%;
		padding: 1px;
		margin-top: 2%;
		margin-left: 3%;
		border-radius: 2px;
		position: relative;
	}

	.stream-information-flexbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: calc(1.17em - 4px); /* autism */
	}

	#table-container {
		margin-left: 3%;
	}

	table {
		border-spacing: 0px;
	}

	th {
		text-align: left;
	}

	th,
	td {
		padding: 3px;
		line-height: 1.15;
	}

	.timestamp-field {
		white-space: nowrap;
	}

	.timestamp-field-flex {
		display: flex;
		align-items: center;
	}

	.artist-field {
		padding-right: 2em;
	}

	.stream-date {
		font-size: x-large;
		font-family: 'Montserrat';
		margin-right: 3%;
		margin-bottom: 0;
		text-decoration: underline;
	}

	.stream-tags {
		margin: 0;
		font-family: Times New Roman;
	}
	.stream-id {
		font-family: 'Montserrat';
		margin-bottom: 0;
	}

	.current {
		background-color: rgba(128, 128, 128, 0.8);
	}

	.description-bubble {
		position: relative;
		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: 70%;
		width: fit-content;
		min-width: 50%;
		font-family: Verdana;
		font-size: small;
	}

	.description-bubble :global(:first-child) {
		margin-top: 0px;
	}

	.description-bubble :global(:last-child) {
		margin-bottom: 0px;
	}

	.description-bubble::after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #ccc;
		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;
	}

	.back-button {
		opacity: 0.75;
		border: 1px solid white;
		transform: rotateX(180deg);
	}

	.back-button:hover {
		opacity: 1;
		border: 1px solid white;
	}

	@media (max-width: 575px) {
		.material-icons {
			opacity: 0.5;
		}

		.stream-id {
			margin-bottom: 0px;
		}

		.stream-information {
			width: initial;
		}
		.description-bubble {
			max-width: initial;
		}

		.description-bubble::after {
			visibility: hidden;
		}
	}
</style>