mess around
This commit is contained in:
@@ -1,34 +1,49 @@
|
||||
<svelte:head>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: url(/assets/tile.png) repeat fixed;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('/fonts/MaterialIcons-Regular-subset.woff2') format('woff2');
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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>
|
||||
@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;
|
||||
}
|
||||
|
||||
.panel {
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
overflow: auto;
|
||||
border: 4px double;
|
||||
border-radius: 10px;
|
||||
justify-self: center;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</svelte:head>
|
||||
|
||||
<slot />
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
<script>
|
||||
import Sidebar from './Sidebar.svelte';
|
||||
export let data;
|
||||
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 id="sidebar" class="panel"><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;
|
||||
}
|
||||
#mainContainer {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 75%;
|
||||
height: 100vh;
|
||||
}
|
||||
#sidebar {
|
||||
grid-column: 1;
|
||||
height: calc(100vh - 1em);
|
||||
overflow: auto;
|
||||
overflow-wrap: break-word;
|
||||
margin: 0.5em;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
#content {
|
||||
grid-column: 2;
|
||||
}
|
||||
#content {
|
||||
grid-column: 2;
|
||||
margin: 0.5em;
|
||||
margin-left: 0em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,107 +1,114 @@
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import TagSelect from './TagSelect.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import TagSelect from './TagSelect.svelte';
|
||||
|
||||
export let streams;
|
||||
let filteredTags = [];
|
||||
let listOpen;
|
||||
export let streams;
|
||||
let filteredTags = [];
|
||||
let listOpen;
|
||||
|
||||
$: displayedStreams = streamsToDisplay(filteredTags);
|
||||
$: remainingTags = getRemainingTags(displayedStreams);
|
||||
$: 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);
|
||||
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;
|
||||
}
|
||||
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 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) =>
|
||||
!('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
|
||||
);
|
||||
function streamsToDisplay(filteredTags) {
|
||||
const displayedStreams = streams.filter(
|
||||
(stream) =>
|
||||
!('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
|
||||
);
|
||||
|
||||
// close tagselect dropdown if we can't select anything else
|
||||
if (displayedStreams.length == 1) {
|
||||
listOpen = !listOpen;
|
||||
}
|
||||
// close tagselect dropdown if we can't select anything else
|
||||
if (displayedStreams.length == 1) {
|
||||
listOpen = !listOpen;
|
||||
}
|
||||
|
||||
return displayedStreams;
|
||||
}
|
||||
return displayedStreams;
|
||||
}
|
||||
|
||||
function getRemainingTags(displayedStreams) {
|
||||
let tagCounts = displayedStreams.reduce((tags, stream) => {
|
||||
stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
|
||||
return tags;
|
||||
}, {});
|
||||
return Object.entries(tagCounts)
|
||||
.filter((el) => el[1] != displayedStreams.length)
|
||||
.map((el) => el[0]);
|
||||
}
|
||||
function getRemainingTags(displayedStreams) {
|
||||
let tagCounts = displayedStreams.reduce((tags, stream) => {
|
||||
stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
|
||||
return tags;
|
||||
}, {});
|
||||
return Object.entries(tagCounts)
|
||||
.filter((el) => el[1] != displayedStreams.length)
|
||||
.map((el) => el[0]);
|
||||
}
|
||||
|
||||
function getDisplayedTagsInList(streamTags, remainingTags) {
|
||||
return streamTags.filter((tag) => remainingTags.includes(tag));
|
||||
}
|
||||
function getDisplayedTagsInList(streamTags, remainingTags) {
|
||||
return streamTags.filter((tag) => remainingTags.includes(tag));
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1>streams</h1>
|
||||
|
||||
<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
|
||||
<div id="tagSelect">
|
||||
<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ul class="stream-list">
|
||||
{#each streams as stream}
|
||||
<li
|
||||
hidden={!displayedStreams.includes(stream)}
|
||||
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">title: {stream['title']}</span>
|
||||
<span class="stream-item-data"
|
||||
>{getDisplayedTagsInList(stream['tags'], remainingTags)}</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<ul class="stream-list">
|
||||
{#each streams as stream}
|
||||
<li
|
||||
hidden={!displayedStreams.includes(stream)}
|
||||
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">title: {stream['title']}</span>
|
||||
<span class="stream-item-data"
|
||||
>{getDisplayedTagsInList(stream['tags'], remainingTags)}</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stream-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.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 {
|
||||
width: 100%;
|
||||
overflow-wrap: anywhere;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.stream-item-button {
|
||||
border-radius: 0;
|
||||
min-width: 100%;
|
||||
border: none;
|
||||
}
|
||||
.stream-item-button {
|
||||
border-radius: 0;
|
||||
min-width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#tagSelect {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,40 +1,41 @@
|
||||
<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';
|
||||
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);
|
||||
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="/media/tracks/{$currentStream.filename}" />
|
||||
</div>
|
||||
<div id="streamPage" class="panel">
|
||||
{#if dev}
|
||||
<MetadataEditor {...data} />
|
||||
{/if}
|
||||
<StreamPage />
|
||||
</div>
|
||||
<div id="player">
|
||||
<Player display={true} src="/media/tracks/{$currentStream.filename}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#streamContainer {
|
||||
display: grid;
|
||||
grid-template-rows: 85% 15%;
|
||||
height: 100vh;
|
||||
}
|
||||
#streamContainer {
|
||||
display: grid;
|
||||
grid-template-rows: 85% 15%;
|
||||
height: calc(100vh - 1em);
|
||||
}
|
||||
|
||||
#streamPage {
|
||||
grid-row: 1 / 2;
|
||||
overflow: auto;
|
||||
}
|
||||
#streamPage {
|
||||
grid-row: 1 / 2;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#player {
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
#player {
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,73 +1,74 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import { tagList } from '$lib/stores.js';
|
||||
import { page } from '$app/stores';
|
||||
import { tagList } from '$lib/stores.js';
|
||||
|
||||
export let original;
|
||||
let tagMap = new Map();
|
||||
export let original;
|
||||
let tagMap = new Map();
|
||||
|
||||
// Create a mapping of tags and their checked status
|
||||
let reloadTags = (original) => {
|
||||
tagList.forEach((tag) => {
|
||||
tagMap.set(tag, original.tags.includes(tag));
|
||||
});
|
||||
};
|
||||
// Create a mapping of tags and their checked status
|
||||
let reloadTags = (original) => {
|
||||
tagList.forEach((tag) => {
|
||||
tagMap.set(tag, original.tags.includes(tag));
|
||||
});
|
||||
};
|
||||
|
||||
$: reloadTags(original);
|
||||
$: 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 />
|
||||
<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 />
|
||||
<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>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
{/key}
|
||||
|
||||
<style>
|
||||
form {
|
||||
margin-left: 10px;
|
||||
}
|
||||
form {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
label > p {
|
||||
margin-right: 5px;
|
||||
}
|
||||
label > p {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1px;
|
||||
max-width: 50%;
|
||||
}
|
||||
.checkboxContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1px;
|
||||
max-width: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,56 +1,74 @@
|
||||
<script>
|
||||
import { currentStream, currentSongIndex } from '$lib/stores.js';
|
||||
import {} from 'svelte';
|
||||
import { jumpToTrack } from './Player.svelte';
|
||||
import { currentStream, currentSongIndex } from '$lib/stores.js';
|
||||
import { jumpToTrack } from './Player.svelte';
|
||||
import { Carta } from 'carta-md';
|
||||
import { sanitize } from 'isomorphic-dompurify';
|
||||
|
||||
function prettyPrintTime(s) {
|
||||
return new Date(s * 1000).toISOString().slice(11, 19);
|
||||
}
|
||||
const carta = new Carta({
|
||||
sanitizer: sanitize
|
||||
});
|
||||
|
||||
function prettyPrintTime(s) {
|
||||
return new Date(s * 1000).toISOString().slice(11, 19);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="description-bubble">
|
||||
{$currentStream.description === '' ? 'No description available.' : $currentStream.description}
|
||||
{@html carta.renderSSR($currentStream.description || 'No description available.')}
|
||||
</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>
|
||||
<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;
|
||||
max-width: 80%;
|
||||
width: fit-content;
|
||||
white-space: pre-line;
|
||||
min-width: 50%;
|
||||
}
|
||||
td {
|
||||
height: 1.3em;
|
||||
}
|
||||
.current {
|
||||
background-color: gray;
|
||||
}
|
||||
.description-bubble {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
max-width: 80%;
|
||||
width: fit-content;
|
||||
min-width: 50%;
|
||||
font-family: Verdana;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.description-bubble :global(:first-child) {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.description-bubble :global(:last-child) {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user