fix: stuff

This commit is contained in:
dusk 2023-05-09 18:41:58 +03:00
parent eba9e8b5d0
commit 77ed4a6de6
Signed by: dusk
GPG Key ID: 1D8F8FAF2294D6EA
6 changed files with 99 additions and 78 deletions

2
src/app.d.ts vendored
View File

@ -11,4 +11,4 @@ declare global {
} }
} }
export {}; export { };

View File

@ -3,17 +3,29 @@ import { LOCAL_MUSIKQUAD_SERVER } from '$env/static/private';
import { scheme } from '../../../utils'; import { scheme } from '../../../utils';
interface MusicInfo { interface MusicInfo {
title: string; title: string;
album: string; album: string;
artist: string; artist: string;
} }
export async function load({ params }) { export async function load({ params }) {
const resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/info/${params.token}`); const token = params.token;
const info: MusicInfo = await resp.json(); let color = '#222222';
return {
info, const resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/info/${token}`);
thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${params.token}`, const info: MusicInfo = await resp.json();
audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${params.token}`
}; /*const thumb_resp = await fetch(`${LOCAL_MUSIKQUAD_SERVER}/share/thumbnail/${token}`);
if (thumb_resp.ok) {
const thumb = await thumb_resp.blob();
const rawColor = await getColor(thumb);
color = rgbToHex(rawColor[0], rawColor[1], rawColor[2]);
}*/
return {
info,
color,
thumbnail_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/thumbnail/${token}`,
audio_url: `${scheme}://${PUBLIC_MUSIKQUAD_SERVER}/share/audio/${token}`
};
} }

View File

@ -18,7 +18,7 @@
const hasAlbum = data.info.album; const hasAlbum = data.info.album;
if (hasArtist && hasAlbum) { if (hasArtist && hasAlbum) {
return `from ${data.info.album} by ${data.info.artist}`; return `from ${data.info.album}\nby ${data.info.artist}`;
} else if (hasArtist) { } else if (hasArtist) {
return `by ${data.info.artist}`; return `by ${data.info.artist}`;
} else if (hasAlbum) { } else if (hasAlbum) {
@ -44,6 +44,7 @@
<meta property="og:description" content={getAlbumArtistInfo()} /> <meta property="og:description" content={getAlbumArtistInfo()} />
<meta property="og:image" content={data.thumbnail_url} /> <meta property="og:image" content={data.thumbnail_url} />
<meta property="og:audio" content={data.audio_url} /> <meta property="og:audio" content={data.audio_url} />
<meta name="theme-color" content={data.color} />
</svelte:head> </svelte:head>
<div <div
@ -59,7 +60,6 @@
bind:paused bind:paused
bind:currentTime bind:currentTime
bind:duration bind:duration
on:loadstart={(event) => event.currentTarget.play()}
/> />
<button <button
class="relative rounded placeholder w-16 h-16" class="relative rounded placeholder w-16 h-16"

View File

@ -4,77 +4,86 @@ import { PUBLIC_BASEURL } from '$env/static/public';
export const scheme = dev ? 'http' : 'https'; export const scheme = dev ? 'http' : 'https';
export function makeShareUrl(token: string) { export function makeShareUrl(token: string) {
return `${scheme}://${PUBLIC_BASEURL}/share/${token}`; return `${scheme}://${PUBLIC_BASEURL}/share/${token}`;
} }
export function getAudioElement() { export function getAudioElement() {
const elem = document.getElementById('audio-source'); const elem = document.getElementById('audio-source');
if (elem === null) { if (elem === null) {
return null; return null;
} }
return elem as HTMLAudioElement; return elem as HTMLAudioElement;
} }
export function calculateMinuteSecond(seconds: number) { export function calculateMinuteSecond(seconds: number) {
let secs = Math.floor(seconds); let secs = Math.floor(seconds);
let secsLeftover = secs % 60; let secsLeftover = secs % 60;
let minutes = (secs - secsLeftover) / 60; let minutes = (secs - secsLeftover) / 60;
let secondsFormatted = secsLeftover < 10 ? `0${secsLeftover}` : `${secsLeftover}`; let secondsFormatted = secsLeftover < 10 ? `0${secsLeftover}` : `${secsLeftover}`;
let minutesFormatted = minutes < 10 ? `0${minutes}` : `${minutes}`; let minutesFormatted = minutes < 10 ? `0${minutes}` : `${minutes}`;
return `${minutesFormatted}:${secondsFormatted}`; return `${minutesFormatted}:${secondsFormatted}`;
} }
export function interceptKeys( export function interceptKeys(
extraActions: [string, () => void][] = [] extraActions: [string, () => void][] = []
): (event: KeyboardEvent) => void { ): (event: KeyboardEvent) => void {
return (event) => { return (event) => {
const tagName = document.activeElement?.tagName ?? ''; const tagName = document.activeElement?.tagName ?? '';
const audio = getAudioElement(); const audio = getAudioElement();
const actions = new Map([ const actions = new Map([
...extraActions, ...extraActions,
[ [
'Space', 'Space',
() => { () => {
if (audio !== null) { if (audio !== null) {
audio.paused ? audio.play() : audio.pause(); audio.paused ? audio.play() : audio.pause();
} }
} }
], ],
[ [
'KeyM', 'KeyM',
() => { () => {
if (audio !== null) { if (audio !== null) {
audio.muted = !audio.muted; audio.muted = !audio.muted;
} }
} }
], ],
[ [
'ArrowLeft', 'ArrowLeft',
() => { () => {
if (audio !== null) { if (audio !== null) {
audio.currentTime -= 5; audio.currentTime -= 5;
} }
} }
], ],
[ [
'ArrowRight', 'ArrowRight',
() => { () => {
const audio = getAudioElement(); const audio = getAudioElement();
if (audio !== null) { if (audio !== null) {
audio.currentTime += 5; audio.currentTime += 5;
} }
} }
] ]
]); ]);
if (tagName !== 'INPUT' && actions.has(event.code)) { if (tagName !== 'INPUT' && actions.has(event.code)) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
const action = actions.get(event.code) ?? null; const action = actions.get(event.code) ?? null;
if (action !== null) { if (action !== null) {
action(); action();
} }
} }
}; };
}
function componentToHex(c: number) {
var hex = c.toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
export function rgbToHex(r: number, g: number, b: number) {
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
} }

View File

@ -323,9 +323,9 @@
svelte "^3.58.0" svelte "^3.58.0"
"@sveltejs/kit@^1.15.9": "@sveltejs/kit@^1.15.9":
version "1.16.2" version "1.16.3"
resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.16.2.tgz#639fd71abbb48ec819b909f051418bd4193f40e0" resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.16.3.tgz#2b7540dbe08ce5d2eb46a282043c5a345f25691e"
integrity sha512-yxcpA4nvlVlJ+VyYnj0zD3QN05kfmoh4OyitlPrVG34nnZSHzFpE4eZ33X1A/tc9prslSFRhpM6rWngCs0nM8w== integrity sha512-8uv0udYRpVuE1BweFidcWHfL+u2gAANKmvIal1dN/FWPBl7DJYbt9zYEtr3bNTiXystT8Sn0Wp54RfwpbPqHjQ==
dependencies: dependencies:
"@sveltejs/vite-plugin-svelte" "^2.1.1" "@sveltejs/vite-plugin-svelte" "^2.1.1"
"@types/cookie" "^0.5.1" "@types/cookie" "^0.5.1"