svelte5 migration, formatting cleanup
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { error } from "@sveltejs/kit";
|
||||
import { getStreamInfo } from "$lib/database.js";
|
||||
import { dev } from "$app/environment";
|
||||
import { error } from '@sveltejs/kit';
|
||||
import { getStreamInfo } from '$lib/database.js';
|
||||
import { dev } from '$app/environment';
|
||||
import { STREAM_JSON_LOCATION } from '$env/static/private';
|
||||
|
||||
let getOriginalJson, writeSideloadJson;
|
||||
@@ -10,52 +10,52 @@ export let actions;
|
||||
|
||||
// utilities for manipulating original stream JSONs
|
||||
if (dev) {
|
||||
const jsonFolder = path.resolve(STREAM_JSON_LOCATION);
|
||||
const jsonFolder = path.resolve(STREAM_JSON_LOCATION);
|
||||
|
||||
getOriginalJson = function (streamId) {
|
||||
const filePath = path.join(jsonFolder, streamId + ".sideload.json");
|
||||
if (fs.existsSync(filePath)) {
|
||||
const jsonString = fs.readFileSync(filePath, 'utf8');
|
||||
return jsonString;
|
||||
} else {
|
||||
return JSON.stringify({ 'title': '', 'description': '', 'tags': [] });
|
||||
}
|
||||
}
|
||||
getOriginalJson = function (streamId) {
|
||||
const filePath = path.join(jsonFolder, streamId + '.sideload.json');
|
||||
if (fs.existsSync(filePath)) {
|
||||
const jsonString = fs.readFileSync(filePath, 'utf8');
|
||||
return jsonString;
|
||||
} else {
|
||||
return JSON.stringify({ title: '', description: '', tags: [] });
|
||||
}
|
||||
};
|
||||
|
||||
writeSideloadJson = function (streamId, newJson) {
|
||||
const filePath = path.join(jsonFolder, streamId + ".sideload.json");
|
||||
fs.writeFileSync(filePath, JSON.stringify(newJson), 'utf8');
|
||||
}
|
||||
writeSideloadJson = function (streamId, newJson) {
|
||||
const filePath = path.join(jsonFolder, streamId + '.sideload.json');
|
||||
fs.writeFileSync(filePath, JSON.stringify(newJson), 'utf8');
|
||||
};
|
||||
|
||||
actions = {
|
||||
default: async ({ params, request }) => {
|
||||
const data = await request.formData();
|
||||
// let newJson = JSON.parse(getOriginalJson(params.stream_id));
|
||||
let newJson = {};
|
||||
newJson['title'] = data.get('title');
|
||||
newJson['description'] = data.get('description');
|
||||
newJson['tags'] = data.getAll('tags');
|
||||
writeSideloadJson(params.stream_id, newJson);
|
||||
}
|
||||
}
|
||||
actions = {
|
||||
default: async ({ params, request }) => {
|
||||
const data = await request.formData();
|
||||
// let newJson = JSON.parse(getOriginalJson(params.stream_id));
|
||||
const newJson = {};
|
||||
newJson['title'] = data.get('title');
|
||||
newJson['description'] = data.get('description');
|
||||
newJson['tags'] = data.getAll('tags');
|
||||
writeSideloadJson(params.stream_id, newJson);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function load({ params }) {
|
||||
const result = getStreamInfo(params.stream_id);
|
||||
if (result === null) {
|
||||
error(404);
|
||||
}
|
||||
const result = getStreamInfo(params.stream_id);
|
||||
if (result === null) {
|
||||
error(404);
|
||||
}
|
||||
|
||||
if (dev) {
|
||||
// pass raw JSON for metadata editor
|
||||
let original = JSON.parse(getOriginalJson(params.stream_id));
|
||||
return {
|
||||
stream: result,
|
||||
original: original
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
stream: result
|
||||
};
|
||||
}
|
||||
if (dev) {
|
||||
// pass raw JSON for metadata editor
|
||||
const original = JSON.parse(getOriginalJson(params.stream_id));
|
||||
return {
|
||||
stream: result,
|
||||
original: original
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
stream: result
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,53 +1,61 @@
|
||||
<script>
|
||||
import StreamPage from './StreamPage.svelte';
|
||||
import MetadataEditor from './MetadataEditor.svelte';
|
||||
import Player from './Player.svelte';
|
||||
import { dev } from '$app/environment';
|
||||
import { currentStream, updateCurrentStream } from '$lib/stores.js';
|
||||
<script lang="ts">
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
export let data;
|
||||
$: updateCurrentStream(data.stream);
|
||||
import StreamPage from './StreamPage.svelte';
|
||||
import MetadataEditor from './MetadataEditor.svelte';
|
||||
import Player from './Player.svelte';
|
||||
import { dev } from '$app/environment';
|
||||
import { currentStream, updateCurrentStream } from '$lib/stores.js';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
run(() => {
|
||||
updateCurrentStream(data.stream);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="streamContainer">
|
||||
<div id="streamPage" class="panel">
|
||||
{#if dev}
|
||||
<MetadataEditor {...data} />
|
||||
{/if}
|
||||
<StreamPage />
|
||||
</div>
|
||||
<div id="player">
|
||||
{#key $currentStream}
|
||||
<Player display={true} src="/media/tracks/{$currentStream.filename}" />
|
||||
{/key}
|
||||
</div>
|
||||
<div id="streamPage" class="panel">
|
||||
{#if dev}
|
||||
<MetadataEditor {...data} />
|
||||
{/if}
|
||||
<StreamPage />
|
||||
</div>
|
||||
<div id="player">
|
||||
{#key $currentStream}
|
||||
<Player display={true} src="/media/tracks/{$currentStream.filename}" />
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#streamContainer {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
height: 100%;
|
||||
gap: 0.5em;
|
||||
}
|
||||
#streamContainer {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
height: 100%;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#streamPage {
|
||||
grid-row: 1 / 2;
|
||||
overflow: auto;
|
||||
background: local url('/assets/result.png') top right / 50% no-repeat, rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
#streamPage {
|
||||
grid-row: 1 / 2;
|
||||
overflow: auto;
|
||||
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;
|
||||
height: 100%;
|
||||
}
|
||||
#player {
|
||||
grid-row: 2 / 3;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
#streamPage {
|
||||
background: local url('/assets/result.png') top right / 80% no-repeat,
|
||||
rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
#streamPage {
|
||||
background:
|
||||
local url('/assets/result.png') top right / 80% no-repeat,
|
||||
rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,74 +1,77 @@
|
||||
<script>
|
||||
import { page } from '$app/stores';
|
||||
import { tagList } from '$lib/stores.js';
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { tagList } from '$lib/stores.js';
|
||||
import { run } from 'svelte/legacy';
|
||||
|
||||
export let original;
|
||||
let { original = $bindable() } = $props();
|
||||
|
||||
let tagMap = new Map();
|
||||
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);
|
||||
run(() => {
|
||||
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}
|
||||
></textarea>
|
||||
</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;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -2,358 +2,402 @@
|
||||
taken from https://github.com/Linkcube/svelte-audio-controls
|
||||
ISC License
|
||||
-->
|
||||
<svelte:options accessors />
|
||||
<svelte:options />
|
||||
|
||||
<script context="module">
|
||||
let getAudio = null;
|
||||
<script module>
|
||||
let getAudio = null;
|
||||
|
||||
export function jumpToTrack(s) {
|
||||
getAudio().currentTime = s;
|
||||
getAudio().play();
|
||||
}
|
||||
export function jumpToTrack(s) {
|
||||
getAudio().currentTime = s;
|
||||
getAudio().play();
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
currentSongIndex,
|
||||
currentStream,
|
||||
getSongAtTime,
|
||||
updateCurrentSong
|
||||
} from '$lib/stores.js';
|
||||
<script lang="ts">
|
||||
import { run, createBubbler } from 'svelte/legacy';
|
||||
|
||||
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 = '#6f6f6f';
|
||||
export let backgroundColor = 'white';
|
||||
export let display = false;
|
||||
export let inlineTooltip = false;
|
||||
export let disableTooltip = false;
|
||||
const bubble = createBubbler();
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
currentSongIndex,
|
||||
currentStream,
|
||||
getSongAtTime,
|
||||
updateCurrentSong
|
||||
} from '$lib/stores.js';
|
||||
|
||||
getAudio = () => {
|
||||
return audio;
|
||||
};
|
||||
interface Props {
|
||||
src: any;
|
||||
audio?: any;
|
||||
paused?: boolean;
|
||||
duration?: number;
|
||||
muted?: boolean;
|
||||
volume?: number;
|
||||
preload?: string;
|
||||
iconColor?: string;
|
||||
textColor?: string;
|
||||
barPrimaryColor?: string;
|
||||
barSecondaryColor?: string;
|
||||
backgroundColor?: string;
|
||||
display?: boolean;
|
||||
inlineTooltip?: boolean;
|
||||
disableTooltip?: boolean;
|
||||
}
|
||||
|
||||
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;
|
||||
let {
|
||||
src,
|
||||
audio = $bindable(null),
|
||||
paused = $bindable(true),
|
||||
duration = $bindable(0),
|
||||
muted = $bindable(false),
|
||||
volume = $bindable(0.67),
|
||||
preload = 'metadata',
|
||||
iconColor = 'gray',
|
||||
textColor = 'gray',
|
||||
barPrimaryColor = 'lightblue',
|
||||
barSecondaryColor = '#6f6f6f',
|
||||
backgroundColor = 'white',
|
||||
display = false,
|
||||
inlineTooltip = false,
|
||||
disableTooltip = false
|
||||
}: Props = $props();
|
||||
|
||||
onMount(async () => {
|
||||
// default volume
|
||||
const volumeData = localStorage.getItem('volume');
|
||||
volume = volumeData ? parseFloat(volumeData) : 0.67;
|
||||
setVolume(volume);
|
||||
getAudio = () => {
|
||||
return audio;
|
||||
};
|
||||
|
||||
// update browser metadata on track changes
|
||||
if ('mediaSession' in navigator) {
|
||||
currentSongIndex.subscribe((val) => {
|
||||
if (val != null && !paused) {
|
||||
setMediaMetadata($currentStream.tracks[val]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
let currentTime = $state(0);
|
||||
let tooltip = $state();
|
||||
let tooltipX = $state(0);
|
||||
let tooltipY = $state(0);
|
||||
let showTooltip = $state(false);
|
||||
let seekText = $state('');
|
||||
let seekTrack = $state('');
|
||||
let seeking = $state(false);
|
||||
let volumeSeeking = $state(false);
|
||||
let songBar = $state();
|
||||
let volumeBar = $state();
|
||||
let innerWidth = $state();
|
||||
let innerHeight = $state();
|
||||
|
||||
$: updateCurrentSong(currentTime, $currentSongIndex);
|
||||
$: updateAudioAttributes(audio);
|
||||
onMount(async () => {
|
||||
// default volume
|
||||
const volumeData = localStorage.getItem('volume');
|
||||
volume = volumeData ? parseFloat(volumeData) : 0.67;
|
||||
setVolume(volume);
|
||||
|
||||
function seek(event, bounds) {
|
||||
let x = event.pageX - bounds.left;
|
||||
return Math.min(Math.max(x / bounds.width, 0), 1);
|
||||
}
|
||||
// update browser metadata on track changes
|
||||
if ('mediaSession' in navigator) {
|
||||
currentSongIndex.subscribe((val) => {
|
||||
if (val != null && !paused) {
|
||||
setMediaMetadata($currentStream.tracks[val]);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
function seek(event, bounds) {
|
||||
let x = event.pageX - bounds.left;
|
||||
return Math.min(Math.max(x / bounds.width, 0), 1);
|
||||
}
|
||||
|
||||
function setMediaMetadata(track) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
artist: track[1],
|
||||
title: track[2]
|
||||
});
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
// browsers don't like if you update this while no media is playing
|
||||
function setMediaMetadataOnPlay() {
|
||||
if ('mediaSession' in navigator) {
|
||||
setMediaMetadata($currentStream.tracks[$currentSongIndex]);
|
||||
}
|
||||
}
|
||||
function setMediaMetadata(track) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
artist: track[1],
|
||||
title: track[2]
|
||||
});
|
||||
}
|
||||
|
||||
// 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);
|
||||
// browsers don't like if you update this while no media is playing
|
||||
function setMediaMetadataOnPlay() {
|
||||
if ('mediaSession' in navigator) {
|
||||
setMediaMetadata($currentStream.tracks[$currentSongIndex]);
|
||||
}
|
||||
}
|
||||
|
||||
// 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/5347
|
||||
// need to init duration & volume after SSR first load
|
||||
function updateAudioAttributes(audio) {
|
||||
if (audio && audio.duration) {
|
||||
duration = audio.duration;
|
||||
setVolume(volume);
|
||||
|
||||
function seekAudio(event) {
|
||||
if (!songBar) return;
|
||||
audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
|
||||
}
|
||||
// workaround for bug https://github.com/sveltejs/svelte/issues/5914
|
||||
audio.addEventListener('loadedmetadata', (event) => {
|
||||
paused = audio.paused;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function seekVolume(event) {
|
||||
if (!volumeBar) return;
|
||||
volume = seek(event, volumeBar.getBoundingClientRect());
|
||||
setVolume(volume);
|
||||
localStorage.setItem('volume', volume.toString());
|
||||
muted = false;
|
||||
}
|
||||
function seekAudio(event) {
|
||||
if (!songBar) return;
|
||||
audio.currentTime = seek(event, songBar.getBoundingClientRect()) * duration;
|
||||
}
|
||||
|
||||
function formatSeconds(totalSeconds) {
|
||||
if (isNaN(totalSeconds)) return 'No Data';
|
||||
totalSeconds = parseInt(totalSeconds, 10);
|
||||
var hours = Math.floor(totalSeconds / 3600);
|
||||
var minutes = Math.floor(totalSeconds / 60) % 60;
|
||||
var seconds = totalSeconds % 60;
|
||||
function seekVolume(event) {
|
||||
if (!volumeBar) return;
|
||||
volume = seek(event, volumeBar.getBoundingClientRect());
|
||||
setVolume(volume);
|
||||
localStorage.setItem('volume', volume.toString());
|
||||
muted = false;
|
||||
}
|
||||
|
||||
return [hours, minutes, seconds]
|
||||
.map((v) => (v < 10 ? '0' + v : v))
|
||||
.filter((v, i) => v !== '00' || i > 0)
|
||||
.join(':');
|
||||
}
|
||||
function formatSeconds(totalSeconds) {
|
||||
if (isNaN(totalSeconds)) return 'No Data';
|
||||
totalSeconds = parseInt(totalSeconds, 10);
|
||||
var hours = Math.floor(totalSeconds / 3600);
|
||||
var minutes = Math.floor(totalSeconds / 60) % 60;
|
||||
var seconds = totalSeconds % 60;
|
||||
|
||||
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);
|
||||
}
|
||||
return [hours, minutes, seconds]
|
||||
.map((v) => (v < 10 ? '0' + v : v))
|
||||
.filter((v, i) => v !== '00' || i > 0)
|
||||
.join(':');
|
||||
}
|
||||
|
||||
function trackMouse(event) {
|
||||
if (seeking) seekAudio(event);
|
||||
if (showTooltip && !disableTooltip) seekTooltip(event);
|
||||
if (volumeSeeking) seekVolume(event);
|
||||
}
|
||||
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);
|
||||
}
|
||||
run(() => {
|
||||
updateCurrentSong(currentTime, $currentSongIndex);
|
||||
});
|
||||
run(() => {
|
||||
updateAudioAttributes(audio);
|
||||
});
|
||||
|
||||
export {
|
||||
src,
|
||||
audio,
|
||||
paused,
|
||||
duration,
|
||||
muted,
|
||||
volume,
|
||||
preload,
|
||||
iconColor,
|
||||
textColor,
|
||||
barPrimaryColor,
|
||||
barSecondaryColor,
|
||||
backgroundColor,
|
||||
display,
|
||||
inlineTooltip,
|
||||
disableTooltip
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
bind:innerWidth
|
||||
bind:innerHeight
|
||||
on:mouseup={() => (seeking = volumeSeeking = false)}
|
||||
on:mousemove={trackMouse}
|
||||
bind:innerWidth
|
||||
bind:innerHeight
|
||||
onmouseup={() => (seeking = volumeSeeking = false)}
|
||||
onmousemove={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}"
|
||||
onclick={() => (audio.paused ? audio.play() : audio.pause())}
|
||||
>
|
||||
{#if paused}
|
||||
play_arrow
|
||||
{:else}
|
||||
pause
|
||||
{/if}
|
||||
</button>
|
||||
<progress
|
||||
bind:this={songBar}
|
||||
value={currentTime ? currentTime : 0}
|
||||
max={duration}
|
||||
onmousedown={() => (seeking = true)}
|
||||
onmouseenter={() => (showTooltip = true)}
|
||||
onmouseleave={() => (showTooltip = false)}
|
||||
onclick={seekAudio}
|
||||
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
|
||||
class="song-progress"
|
||||
></progress>
|
||||
<div class="control-times">{formatSeconds(currentTime)}/{formatSeconds(duration)}</div>
|
||||
<button
|
||||
style="--icon-color:{iconColor}"
|
||||
class="material-icons"
|
||||
onclick={() => (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}
|
||||
onmousedown={() => (volumeSeeking = true)}
|
||||
onclick={seekVolume}
|
||||
style="--primary-color:{barPrimaryColor}; --secondary-color:{barSecondaryColor}"
|
||||
class="volume-progress"
|
||||
></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={setMediaMetadataOnPlay}
|
||||
on:ended
|
||||
{preload}
|
||||
bind:this={audio}
|
||||
bind:paused
|
||||
bind:duration
|
||||
bind:currentTime
|
||||
{muted}
|
||||
{volume}
|
||||
onplay={setMediaMetadataOnPlay}
|
||||
onended={bubble('ended')}
|
||||
{preload}
|
||||
>
|
||||
<source {src} type="audio/ogg;codecs=opus" />
|
||||
<source src="{src}.mp3" type="audio/mpeg" />
|
||||
<source {src} type="audio/ogg;codecs=opus" />
|
||||
<source src="{src}.mp3" type="audio/mpeg" />
|
||||
</audio>
|
||||
|
||||
<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;
|
||||
border: 3px double;
|
||||
border-radius: 5px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.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,215 +1,204 @@
|
||||
<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';
|
||||
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
|
||||
});
|
||||
const carta = new Carta({
|
||||
sanitizer: DOMPurify.sanitize
|
||||
});
|
||||
|
||||
$: formattedStreamDate = formatDate($currentStream.stream_date);
|
||||
let formattedStreamDate = $derived(formatDate($currentStream.stream_date));
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{formattedStreamDate} | apt-get's auditorium</title>
|
||||
<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 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.')}
|
||||
{@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>
|
||||
<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
|
||||
onclick={() => 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 {
|
||||
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 */
|
||||
}
|
||||
.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-container {
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 3px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 3px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.timestamp-field {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timestamp-field {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timestamp-field-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.timestamp-field-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.artist-field {
|
||||
padding-right: 2em;
|
||||
}
|
||||
.artist-field {
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.stream-date {
|
||||
font-size: x-large;
|
||||
font-family: 'Montserrat';
|
||||
margin-right: 3%;
|
||||
margin-bottom: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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 {
|
||||
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(:first-child) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.description-bubble :global(:last-child) {
|
||||
margin-bottom: 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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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 {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
tr:hover .material-icons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
tr:hover .material-icons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
opacity: 0.75;
|
||||
border: 1px solid white;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.material-icons {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
opacity: 1;
|
||||
border: 1px solid white;
|
||||
}
|
||||
.stream-id {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.material-icons {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.stream-information {
|
||||
width: initial;
|
||||
}
|
||||
.description-bubble {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.stream-id {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.stream-information {
|
||||
width: initial;
|
||||
}
|
||||
.description-bubble {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.description-bubble::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.description-bubble::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,15 +5,15 @@ import { error } from '@sveltejs/kit';
|
||||
export let GET;
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
const jsonFolder = './db/stream_json/';
|
||||
const jsonFolder = './db/stream_json/';
|
||||
|
||||
GET = function ({ params }) {
|
||||
const filePath = jsonFolder + params.stream_id + ".json";
|
||||
if (fs.existsSync(filePath)) {
|
||||
const jsonString = fs.readFileSync(filePath, 'utf8');
|
||||
return json(jsonString);
|
||||
} else {
|
||||
error(404);
|
||||
}
|
||||
}
|
||||
GET = function ({ params }) {
|
||||
const filePath = jsonFolder + params.stream_id + '.json';
|
||||
if (fs.existsSync(filePath)) {
|
||||
const jsonString = fs.readFileSync(filePath, 'utf8');
|
||||
return json(jsonString);
|
||||
} else {
|
||||
error(404);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user