more changes
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
37
src/lib/utils.js
Normal file
37
src/lib/utils.js
Normal file
@@ -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);
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1,8 @@
|
||||
<a href="/streams">lol</a>
|
||||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
if (browser) {
|
||||
goto('/streams/');
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
overflow-wrap: break-word;
|
||||
margin: 0.5em;
|
||||
scrollbar-gutter: stable;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
#content {
|
||||
|
||||
@@ -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">
|
||||
{#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'])}
|
||||
<ul class="stream-list">
|
||||
{#each streams as stream}
|
||||
{@const favorited = $favoritedStreams.has(stream['id'])}
|
||||
<li
|
||||
hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
|
||||
class="stream-item"
|
||||
id="stream-{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
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
|
||||
|
||||
<span class="stream-item-length"
|
||||
>{formatSecondsToHms(stream['length_seconds'])}</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>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -1,71 +1,72 @@
|
||||
<script>
|
||||
import Select from 'svelte-select';
|
||||
import { tagList } from '$lib/stores.js';
|
||||
import Select from 'svelte-select';
|
||||
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 = [];
|
||||
export let checked = [];
|
||||
let isChecked = {};
|
||||
export let remainingTags = [];
|
||||
export let listOpen;
|
||||
let value = [];
|
||||
export let checked = [];
|
||||
let isChecked = {};
|
||||
export let remainingTags = [];
|
||||
export let listOpen;
|
||||
|
||||
$: computeValue(checked);
|
||||
$: computeIsChecked(checked);
|
||||
$: computeValue(checked);
|
||||
$: computeIsChecked(checked);
|
||||
|
||||
function computeIsChecked() {
|
||||
isChecked = {};
|
||||
checked.forEach((c) => (isChecked[c] = true));
|
||||
}
|
||||
function computeIsChecked() {
|
||||
isChecked = {};
|
||||
checked.forEach((c) => (isChecked[c] = true));
|
||||
}
|
||||
|
||||
function computeValue() {
|
||||
value = checked.map((c) => items.find((i) => i.value === c));
|
||||
}
|
||||
function computeValue() {
|
||||
value = checked.map((c) => items.find((i) => i.value === c));
|
||||
}
|
||||
|
||||
function handleSelectable() {
|
||||
items = items.map((item) => {
|
||||
return { ...item, selectable: !checked.includes(item.value) };
|
||||
});
|
||||
}
|
||||
function handleSelectable() {
|
||||
items = items.map((item) => {
|
||||
return { ...item, selectable: !checked.includes(item.value) };
|
||||
});
|
||||
}
|
||||
|
||||
function handleChange(e) {
|
||||
if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
|
||||
else
|
||||
checked.includes(e.detail.value)
|
||||
? (checked = checked.filter((i) => i != e.detail.value))
|
||||
: (checked = [...checked, e.detail.value]);
|
||||
handleSelectable();
|
||||
}
|
||||
function handleChange(e) {
|
||||
if (e.type === 'clear' && Array.isArray(e.detail)) checked = [];
|
||||
else
|
||||
checked.includes(e.detail.value)
|
||||
? (checked = checked.filter((i) => i != e.detail.value))
|
||||
: (checked = [...checked, e.detail.value]);
|
||||
handleSelectable();
|
||||
}
|
||||
|
||||
let itemFilter = function (label, filterText, option) {
|
||||
return (
|
||||
remainingTags.includes(option['value']) &&
|
||||
label.toLowerCase().includes(filterText.toLowerCase())
|
||||
);
|
||||
};
|
||||
let itemFilter = function (label, filterText, option) {
|
||||
return (
|
||||
remainingTags.includes(option['value']) &&
|
||||
label.toLowerCase().includes(filterText.toLowerCase())
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<Select
|
||||
{items}
|
||||
{value}
|
||||
bind:listOpen
|
||||
multiple={true}
|
||||
filterSelectedItems={true}
|
||||
closeListOnChange={false}
|
||||
on:select={handleChange}
|
||||
on:clear={handleChange}
|
||||
{itemFilter}
|
||||
{items}
|
||||
{value}
|
||||
bind:listOpen
|
||||
multiple={true}
|
||||
placeholder="Tag Filter..."
|
||||
filterSelectedItems={true}
|
||||
closeListOnChange={false}
|
||||
on:select={handleChange}
|
||||
on:clear={handleChange}
|
||||
{itemFilter}
|
||||
>
|
||||
<div class="item" slot="item" let:item>
|
||||
<label for={item.value}>
|
||||
<input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
|
||||
{item.label}
|
||||
</label>
|
||||
</div>
|
||||
<div class="item" slot="item" let:item>
|
||||
<label for={item.value}>
|
||||
<input type="checkbox" id={item.value} bind:checked={isChecked[item.value]} />
|
||||
{item.label}
|
||||
</label>
|
||||
</div>
|
||||
</Select>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
pointer-events: none;
|
||||
}
|
||||
.item {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -5,317 +5,327 @@
|
||||
<svelte:options accessors />
|
||||
|
||||
<script context="module">
|
||||
let getAudio = null;
|
||||
let getAudio = null;
|
||||
|
||||
export function jumpToTrack(s) {
|
||||
getAudio().currentTime = s;
|
||||
}
|
||||
export function jumpToTrack(s) {
|
||||
getAudio().currentTime = s;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
currentSongIndex,
|
||||
currentStream,
|
||||
getSongAtTime,
|
||||
updateCurrentSong
|
||||
} from '$lib/stores.js';
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
currentSongIndex,
|
||||
currentStream,
|
||||
getSongAtTime,
|
||||
updateCurrentSong
|
||||
} from '$lib/stores.js';
|
||||
|
||||
export let src;
|
||||
export let audio = null;
|
||||
export let paused = true;
|
||||
export let duration = 0;
|
||||
export let muted = false;
|
||||
export let volume = 0.67;
|
||||
export let preload = 'metadata';
|
||||
export let iconColor = 'gray';
|
||||
export let textColor = 'gray';
|
||||
export let barPrimaryColor = 'lightblue';
|
||||
export let barSecondaryColor = 'lightgray';
|
||||
export let backgroundColor = 'white';
|
||||
export let display = false;
|
||||
export let inlineTooltip = false;
|
||||
export let disableTooltip = false;
|
||||
export let src;
|
||||
export let audio = null;
|
||||
export let paused = true;
|
||||
export let duration = 0;
|
||||
export let muted = false;
|
||||
export let volume = 0.67;
|
||||
export let preload = 'metadata';
|
||||
export let iconColor = 'gray';
|
||||
export let textColor = 'gray';
|
||||
export let barPrimaryColor = 'lightblue';
|
||||
export let barSecondaryColor = 'lightgray';
|
||||
export let backgroundColor = 'white';
|
||||
export let display = false;
|
||||
export let inlineTooltip = false;
|
||||
export let disableTooltip = false;
|
||||
|
||||
getAudio = () => {
|
||||
return audio;
|
||||
};
|
||||
getAudio = () => {
|
||||
return audio;
|
||||
};
|
||||
|
||||
let currentTime = 0;
|
||||
let tooltip;
|
||||
let tooltipX = 0;
|
||||
let tooltipY = 0;
|
||||
let showTooltip = false;
|
||||
let seekText = '';
|
||||
let seekTrack = '';
|
||||
let seeking = false;
|
||||
let volumeSeeking = false;
|
||||
let songBar;
|
||||
let volumeBar;
|
||||
let currentTime = 0;
|
||||
let tooltip;
|
||||
let tooltipX = 0;
|
||||
let tooltipY = 0;
|
||||
let showTooltip = false;
|
||||
let seekText = '';
|
||||
let seekTrack = '';
|
||||
let seeking = false;
|
||||
let volumeSeeking = false;
|
||||
let songBar;
|
||||
let volumeBar;
|
||||
let innerWidth;
|
||||
let innerHeight;
|
||||
|
||||
onMount(async () => {
|
||||
const volumeData = localStorage.getItem('volume');
|
||||
volume = volumeData ? parseFloat(volumeData) : 0.67;
|
||||
});
|
||||
onMount(async () => {
|
||||
const volumeData = localStorage.getItem('volume');
|
||||
volume = volumeData ? parseFloat(volumeData) : 0.67;
|
||||
});
|
||||
|
||||
$: updateCurrentSong(currentTime, $currentSongIndex);
|
||||
$: updateAudioAttributes(audio);
|
||||
$: updateCurrentSong(currentTime, $currentSongIndex);
|
||||
$: updateAudioAttributes(audio);
|
||||
|
||||
function seek(event, bounds) {
|
||||
let x = event.pageX - bounds.left;
|
||||
return Math.min(Math.max(x / bounds.width, 0), 1);
|
||||
}
|
||||
function seek(event, bounds) {
|
||||
let x = event.pageX - bounds.left;
|
||||
return Math.min(Math.max(x / bounds.width, 0), 1);
|
||||
}
|
||||
|
||||
// exponential volume bar
|
||||
// default is linear, which doesn't correspond to human hearing
|
||||
function setVolume(volume) {
|
||||
if (volume != 0) {
|
||||
audio.volume = Math.pow(10, 2.5 * (volume - 1));
|
||||
} else {
|
||||
audio.volume = volume;
|
||||
}
|
||||
}
|
||||
// exponential volume bar
|
||||
// default is linear, which doesn't correspond to human hearing
|
||||
function setVolume(volume) {
|
||||
if (volume != 0) {
|
||||
audio.volume = Math.pow(10, 2.5 * (volume - 1));
|
||||
} else {
|
||||
audio.volume = volume;
|
||||
}
|
||||
}
|
||||
|
||||
// workaround for bug https://github.com/sveltejs/svelte/issues/5347
|
||||
// need to init duration & volume after SSR first load
|
||||
function updateAudioAttributes(audio) {
|
||||
if (audio && audio.duration) {
|
||||
duration = audio.duration;
|
||||
setVolume(volume);
|
||||
// workaround for bug https://github.com/sveltejs/svelte/issues/5347
|
||||
// need to init duration & volume after SSR first load
|
||||
function updateAudioAttributes(audio) {
|
||||
if (audio && audio.duration) {
|
||||
duration = audio.duration;
|
||||
setVolume(volume);
|
||||
|
||||
// workaround for bug https://github.com/sveltejs/svelte/issues/5914
|
||||
audio.addEventListener('loadedmetadata', (event) => {
|
||||
paused = audio.paused;
|
||||
});
|
||||
}
|
||||
}
|
||||
// workaround for bug https://github.com/sveltejs/svelte/issues/5914
|
||||
audio.addEventListener('loadedmetadata', (event) => {
|
||||
paused = audio.paused;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function seekAudio(event) {
|
||||
if (!songBar) return;
|
||||
audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
|
||||
}
|
||||
function seekAudio(event) {
|
||||
if (!songBar) return;
|
||||
audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
|
||||
}
|
||||
|
||||
function seekVolume(event) {
|
||||
if (!volumeBar) return;
|
||||
volume = seek(event, volumeBar.getBoundingClientRect());
|
||||
setVolume(volume);
|
||||
localStorage.setItem('volume', volume.toString());
|
||||
muted = false;
|
||||
}
|
||||
function seekVolume(event) {
|
||||
if (!volumeBar) return;
|
||||
volume = seek(event, volumeBar.getBoundingClientRect());
|
||||
setVolume(volume);
|
||||
localStorage.setItem('volume', volume.toString());
|
||||
muted = false;
|
||||
}
|
||||
|
||||
function formatSeconds(seconds) {
|
||||
if (isNaN(seconds)) return 'No Data';
|
||||
var sec_num = parseInt(seconds, 10);
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor(sec_num / 60) % 60;
|
||||
var seconds = sec_num % 60;
|
||||
function formatSeconds(seconds) {
|
||||
if (isNaN(seconds)) return 'No Data';
|
||||
var sec_num = parseInt(seconds, 10);
|
||||
var hours = Math.floor(sec_num / 3600);
|
||||
var minutes = Math.floor(sec_num / 60) % 60;
|
||||
var seconds = sec_num % 60;
|
||||
|
||||
return [hours, minutes, seconds]
|
||||
.map((v) => (v < 10 ? '0' + v : v))
|
||||
.filter((v, i) => v !== '00' || i > 0)
|
||||
.join(':');
|
||||
}
|
||||
return [hours, minutes, seconds]
|
||||
.map((v) => (v < 10 ? '0' + v : v))
|
||||
.filter((v, i) => v !== '00' || i > 0)
|
||||
.join(':');
|
||||
}
|
||||
|
||||
function seekTooltip(event) {
|
||||
if (!inlineTooltip) {
|
||||
let tooltipBounds = tooltip.getBoundingClientRect();
|
||||
tooltipX = event.pageX - tooltipBounds.width - 10;
|
||||
tooltipY = songBar.offsetTop + 10;
|
||||
}
|
||||
let bounds = songBar.getBoundingClientRect();
|
||||
let seekValue = ((event.pageX - bounds.left) * duration) / bounds.width;
|
||||
let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
|
||||
seekTrack = trackArray[1] + ' - ' + trackArray[2];
|
||||
seekText = formatSeconds(seekValue);
|
||||
}
|
||||
function seekTooltip(event) {
|
||||
if (!inlineTooltip) {
|
||||
let tooltipBounds = tooltip.getBoundingClientRect();
|
||||
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;
|
||||
let trackArray = $currentStream.tracks[getSongAtTime(seekValue)];
|
||||
seekTrack = trackArray[1] + ' - ' + trackArray[2];
|
||||
seekText = formatSeconds(seekValue);
|
||||
}
|
||||
|
||||
function trackMouse(event) {
|
||||
if (seeking) seekAudio(event);
|
||||
if (showTooltip && !disableTooltip) seekTooltip(event);
|
||||
if (volumeSeeking) seekVolume(event);
|
||||
}
|
||||
function trackMouse(event) {
|
||||
if (seeking) seekAudio(event);
|
||||
if (showTooltip && !disableTooltip) seekTooltip(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}">
|
||||
<button
|
||||
class="material-icons"
|
||||
style="--icon-color:{iconColor}"
|
||||
on:click={() => (audio.paused ? audio.play() : audio.pause())}
|
||||
>
|
||||
{#if paused}
|
||||
play_arrow
|
||||
{:else}
|
||||
pause
|
||||
{/if}
|
||||
</button>
|
||||
<progress
|
||||
bind:this={songBar}
|
||||
value={currentTime ? currentTime : 0}
|
||||
max={duration}
|
||||
on:mousedown={() => (seeking = true)}
|
||||
on:mouseenter={() => (showTooltip = true)}
|
||||
on:mouseleave={() => (showTooltip = false)}
|
||||
on:click={seekAudio}
|
||||
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
|
||||
class="song-progress"
|
||||
/>
|
||||
<div class="control-times">{formatSeconds(currentTime)}/{formatSeconds(duration)}</div>
|
||||
<button
|
||||
style="--icon-color:{iconColor}"
|
||||
class="material-icons"
|
||||
on:click={() => (muted = !muted)}
|
||||
>
|
||||
{#if muted}
|
||||
volume_off
|
||||
{:else if volume < 0.01}
|
||||
volume_mute
|
||||
{:else if volume < 0.5}
|
||||
volume_down
|
||||
{:else}
|
||||
volume_up
|
||||
{/if}
|
||||
</button>
|
||||
<progress
|
||||
bind:this={volumeBar}
|
||||
value={volume}
|
||||
on:mousedown={() => (volumeSeeking = true)}
|
||||
on:click={seekVolume}
|
||||
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
|
||||
class="volume-progress"
|
||||
/>
|
||||
{#if !disableTooltip && (inlineTooltip || showTooltip)}
|
||||
<div
|
||||
class:hover-tooltip={!inlineTooltip}
|
||||
transition:fade
|
||||
bind:this={tooltip}
|
||||
class="tooltip"
|
||||
style="--left:{tooltipX}px;
|
||||
<div class="controls" style="--color:{textColor}; --background-color:{backgroundColor}">
|
||||
<button
|
||||
class="material-icons"
|
||||
style="--icon-color:{iconColor}"
|
||||
on:click={() => (audio.paused ? audio.play() : audio.pause())}
|
||||
>
|
||||
{#if paused}
|
||||
play_arrow
|
||||
{:else}
|
||||
pause
|
||||
{/if}
|
||||
</button>
|
||||
<progress
|
||||
bind:this={songBar}
|
||||
value={currentTime ? currentTime : 0}
|
||||
max={duration}
|
||||
on:mousedown={() => (seeking = true)}
|
||||
on:mouseenter={() => (showTooltip = true)}
|
||||
on:mouseleave={() => (showTooltip = false)}
|
||||
on:click={seekAudio}
|
||||
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
|
||||
class="song-progress"
|
||||
/>
|
||||
<div class="control-times">{formatSeconds(currentTime)}/{formatSeconds(duration)}</div>
|
||||
<button
|
||||
style="--icon-color:{iconColor}"
|
||||
class="material-icons"
|
||||
on:click={() => (muted = !muted)}
|
||||
>
|
||||
{#if muted}
|
||||
volume_off
|
||||
{:else if volume < 0.01}
|
||||
volume_mute
|
||||
{:else if volume < 0.5}
|
||||
volume_down
|
||||
{:else}
|
||||
volume_up
|
||||
{/if}
|
||||
</button>
|
||||
<progress
|
||||
bind:this={volumeBar}
|
||||
value={volume}
|
||||
on:mousedown={() => (volumeSeeking = true)}
|
||||
on:click={seekVolume}
|
||||
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
|
||||
class="volume-progress"
|
||||
/>
|
||||
{#if !disableTooltip && (inlineTooltip || showTooltip)}
|
||||
<div
|
||||
class:hover-tooltip={!inlineTooltip}
|
||||
transition:fade
|
||||
bind:this={tooltip}
|
||||
class="tooltip"
|
||||
style="--left:{tooltipX}px;
|
||||
--top:{tooltipY}px;
|
||||
--background-color:{backgroundColor};
|
||||
--box-color:{barSecondaryColor};
|
||||
--text-color:{textColor}"
|
||||
>
|
||||
{#if showTooltip}
|
||||
{seekText}
|
||||
<br />
|
||||
{seekTrack}
|
||||
{:else if duration > 3600}
|
||||
--:--:--
|
||||
{:else}
|
||||
--:--
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
>
|
||||
{#if showTooltip}
|
||||
{seekText}
|
||||
<br />
|
||||
{seekTrack}
|
||||
{:else if duration > 3600}
|
||||
--:--:--
|
||||
{:else}
|
||||
--:--
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<audio
|
||||
bind:this={audio}
|
||||
bind:paused
|
||||
bind:duration
|
||||
bind:currentTime
|
||||
{muted}
|
||||
{volume}
|
||||
on:play
|
||||
on:ended
|
||||
{src}
|
||||
{preload}
|
||||
bind:this={audio}
|
||||
bind:paused
|
||||
bind:duration
|
||||
bind:currentTime
|
||||
{muted}
|
||||
{volume}
|
||||
on:play
|
||||
on:ended
|
||||
{src}
|
||||
{preload}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-around;
|
||||
color: var(--color);
|
||||
background-color: var(--background-color);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10+ and Edge */
|
||||
user-select: none; /* Standard syntax */
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-around;
|
||||
color: var(--color);
|
||||
background-color: var(--background-color);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10+ and Edge */
|
||||
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 {
|
||||
margin: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.control-times {
|
||||
margin: auto;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
background-color: var(--background-color);
|
||||
padding: 1px;
|
||||
border-radius: 5px;
|
||||
border-width: 3px;
|
||||
box-shadow: 6px 6px var(--box-color);
|
||||
color: var(--text-color);
|
||||
pointer-events: none;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.tooltip {
|
||||
background-color: var(--background-color);
|
||||
padding: 1px;
|
||||
border-radius: 5px;
|
||||
border-width: 3px;
|
||||
box-shadow: 6px 6px var(--box-color);
|
||||
color: var(--text-color);
|
||||
pointer-events: none;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.hover-tooltip {
|
||||
position: absolute;
|
||||
top: var(--top);
|
||||
left: var(--left);
|
||||
}
|
||||
.hover-tooltip {
|
||||
position: absolute;
|
||||
top: var(--top);
|
||||
left: var(--left);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0px;
|
||||
color: var(--icon-color);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0px;
|
||||
color: var(--icon-color);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.material-icons:hover {
|
||||
box-shadow: 0px 6px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.material-icons:hover {
|
||||
box-shadow: 0px 6px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: block;
|
||||
color: var(--primary-color);
|
||||
background: var(--secondary-color);
|
||||
border: none;
|
||||
height: 15px;
|
||||
margin: auto;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
progress {
|
||||
display: block;
|
||||
color: var(--primary-color);
|
||||
background: var(--secondary-color);
|
||||
border: none;
|
||||
height: 15px;
|
||||
margin: auto;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: var(--secondary-color);
|
||||
width: 100%;
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: var(--secondary-color);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
background: var(--primary-color);
|
||||
}
|
||||
|
||||
.song-progress {
|
||||
width: 100%;
|
||||
}
|
||||
.song-progress {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.volume-progress {
|
||||
width: 10%;
|
||||
max-width: 100px;
|
||||
min-width: 50px;
|
||||
}
|
||||
.volume-progress {
|
||||
width: 10%;
|
||||
max-width: 100px;
|
||||
min-width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user