Compare commits
1 Commits
main
...
fix-ismusi
| Author | SHA1 | Date | |
|---|---|---|---|
45678d7e6a
|
@ -2,7 +2,6 @@ HASHTAG_FILTER = ichlausche,music,musik,nowplaying,tunetuesday,nowlistening
|
||||
YOUTUBE_API_KEY = CHANGE_ME
|
||||
ODESLI_API_KEY = CHANGE_ME
|
||||
MASTODON_INSTANCE = 'metalhead.club'
|
||||
MASTODON_ACCESS_TOKEN = 'YOUR_ACCESS_TOKEN_HERE'
|
||||
BASE_URL = 'https://moshingmammut.phlaym.net'
|
||||
VERBOSE = false
|
||||
IGNORE_USERS = @moshhead@metalhead.club
|
||||
|
||||
@ -1,25 +1,16 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: ['plugin:svelte/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['@typescript-eslint'],
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
parser: 'svelte-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser'
|
||||
}
|
||||
}
|
||||
],
|
||||
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
extraFileExtensions: ['.svelte']
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
|
||||
@ -88,8 +88,6 @@ Copy `apache2.conf.EXAMPLE` to `/etc/apache2/sites-available/moshingmammut.conf`
|
||||
Domain. If you do not need or want SSL support, remove the whole `<IfModule mod_ssl.c>` block.
|
||||
If you do, add the path to your SSLCertificateFile and SSLCertificateKeyFile.
|
||||
|
||||
Modify DocumentRoot and the two Alias and Directory statements, so that thumbnails and avatars are served directly by apache.
|
||||
|
||||
Copy `moshing-mammut.service.EXAMPLE` to `/etc/systemd/system/moshing-mammut.service`
|
||||
and set your `User`, `Group`, `ExecStart` and `WorkingDirectory` accordingly.
|
||||
|
||||
@ -103,13 +101,6 @@ because the API is the only way to check if a YouTube link leads to music or som
|
||||
|
||||
If `ODESLI_API_KEY` is unset, your rate limit to the song.link API will be lower.
|
||||
|
||||
Add `MASTODON_ACCESS_TOKEN` as well, see [Creating our application
|
||||
|
||||
](https://docs.joinmastodon.org/client/token/#app) in the Mastodon documentation.
|
||||
`read:statuses` is the only required scope. An access token will be displayed in your settings. Use that!
|
||||
|
||||
There are currently no plans to implement an actual authentication flow.
|
||||
|
||||
Run `npm run build` and copy the output folder, usually `build` to `$APP_DIR` on your server.
|
||||
|
||||
#### On your server again
|
||||
|
||||
@ -15,23 +15,6 @@
|
||||
|
||||
Include /etc/letsencrypt/options-ssl-apache.conf
|
||||
|
||||
DocumentRoot /home/moshing-mammut/app/
|
||||
|
||||
ProxyPass /avatars/ !
|
||||
ProxyPass /thumbnails/ !
|
||||
Alias /avatars/ /home/moshing-mammut/app/avatars/
|
||||
Alias /thumbnails/ /home/moshing-mammut/app/thumbnails/
|
||||
|
||||
<Directory "/home/moshing-mammut/app/avatars/">
|
||||
Require all granted
|
||||
Header set Cache-Control "public,max-age=31536000,immutable"
|
||||
</Directory>
|
||||
|
||||
<Directory "/home/moshing-mammut/app/thumbnails/">
|
||||
Require all granted
|
||||
Header set Cache-Control "public,max-age=31536000,immutable"
|
||||
</Directory>
|
||||
|
||||
ProxyPass / http://localhost:3000/
|
||||
ProxyPassReverse / http://localhost:3000/
|
||||
|
||||
|
||||
4894
package-lock.json
generated
4894
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
45
package.json
45
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "moshing-mammut",
|
||||
"version": "1.3.2",
|
||||
"version": "1.3.1",
|
||||
"private": true,
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"scripts": {
|
||||
@ -14,35 +14,34 @@
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-node": "^5.0.0",
|
||||
"@sveltejs/kit": "^2.7.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@types/node": "^22.6.1",
|
||||
"@types/sqlite3": "^3.0.0",
|
||||
"@types/ws": "^8.5.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.0.0",
|
||||
"@typescript-eslint/parser": "^8.0.0",
|
||||
"@sveltejs/adapter-node": "^1.2.3",
|
||||
"@sveltejs/kit": "^1.5.0",
|
||||
"@types/node": "^18.16.3",
|
||||
"@types/sqlite3": "^3.1.8",
|
||||
"@types/ws": "^8.5.4",
|
||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
"@typescript-eslint/parser": "^5.45.0",
|
||||
"@zerodevx/svelte-toast": "^0.9.3",
|
||||
"eslint": "^9.11.1",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"eslint-plugin-svelte": "^2.45.1",
|
||||
"prettier": "^3.1.0",
|
||||
"prettier-plugin-svelte": "^3.2.6",
|
||||
"svelte": "^5",
|
||||
"svelte-check": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.0"
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^3.0.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"dotenv": "^16.0.3",
|
||||
"feed": "^4.2.2",
|
||||
"sharp": "^0.33.0",
|
||||
"sqlite3": "^5.0.0",
|
||||
"ws": "^8.18.0"
|
||||
"sharp": "^0.32.0",
|
||||
"sqlite3": "^5.1.6",
|
||||
"ws": "^8.13.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
25
src/app.html
25
src/app.html
@ -1,4 +1,4 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@ -10,10 +10,6 @@
|
||||
<meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
|
||||
<meta name="application-name" content="Moshing Mammut" />
|
||||
<meta name="msapplication-TileColor" content="#2e0b78" />
|
||||
<meta
|
||||
name="description"
|
||||
content="A collection of music recommendations and now-listenings by the users of metalhead.club"
|
||||
/>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
|
||||
@ -54,22 +50,9 @@
|
||||
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-family:
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
Oxygen-Sans,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
'Helvetica Neue',
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif,
|
||||
'Apple Color Emoji',
|
||||
'Segoe UI Emoji',
|
||||
'Segoe UI Symbol';
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
|
||||
Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import { log } from '$lib/log';
|
||||
import { TimelineReader } from '$lib/server/timeline';
|
||||
import type { Handle, HandleServerError } from '@sveltejs/kit';
|
||||
import type { HandleServerError } from '@sveltejs/kit';
|
||||
import { error } from '@sveltejs/kit';
|
||||
import fs from 'fs/promises';
|
||||
|
||||
log.log('App startup');
|
||||
TimelineReader.init();
|
||||
|
||||
export const handleError = (({ error }) => {
|
||||
@ -17,6 +16,8 @@ export const handleError = (({ error }) => {
|
||||
};
|
||||
}) satisfies HandleServerError;
|
||||
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
|
||||
export const handle = (async ({ event, resolve }) => {
|
||||
// Reeder *insists* on checking /feed instead of /feed.xml
|
||||
if (event.url.pathname === '/feed') {
|
||||
@ -52,7 +53,7 @@ export const handle = (async ({ event, resolve }) => {
|
||||
return new Response(f, { headers: [['Content-Type', 'image/' + suffix]] });
|
||||
} catch (e) {
|
||||
log.error('no stream', e);
|
||||
error(404);
|
||||
throw error(404);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { Account } from '$lib/mastodon/response';
|
||||
|
||||
interface Props {
|
||||
account: Account;
|
||||
}
|
||||
|
||||
let { account }: Props = $props();
|
||||
export let account: Account;
|
||||
</script>
|
||||
|
||||
<a href={account.url} target="_blank">{account.display_name} @{account.acct}</a>
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
<script lang="ts">
|
||||
import type { Account } from '$lib/mastodon/response';
|
||||
|
||||
interface Props {
|
||||
account: Account;
|
||||
}
|
||||
|
||||
let { account }: Props = $props();
|
||||
let avatarDescription: string = $derived(`Avatar for ${account.acct}`);
|
||||
let sourceSetHtml: string = $derived.by(() => {
|
||||
export let account: Account;
|
||||
let avatarDescription: string;
|
||||
let sourceSetHtml: string;
|
||||
$: avatarDescription = `Avatar for ${account.acct}`;
|
||||
$: {
|
||||
// Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
|
||||
// We need the best format to be first
|
||||
const formatPriority = new Map<string, number>([
|
||||
@ -35,13 +33,13 @@
|
||||
const srcset = entry[1].join(', ');
|
||||
html += `<source srcset="${srcset}" type="${entry[0]}" />`;
|
||||
}
|
||||
return html;
|
||||
});
|
||||
sourceSetHtml = html;
|
||||
}
|
||||
</script>
|
||||
|
||||
<picture>
|
||||
{@html sourceSetHtml}
|
||||
<img src={account.avatar} alt={avatarDescription} loading="lazy" width="50" height="50" />
|
||||
<img src={account.avatar} alt={avatarDescription} loading="lazy" />
|
||||
</picture>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,34 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
|
||||
|
||||
interface Props {
|
||||
moreAvailable?: boolean;
|
||||
isLoading?: boolean;
|
||||
loadOlderPosts: any;
|
||||
}
|
||||
export let moreAvailable = false;
|
||||
export let isLoading = false;
|
||||
let displayText = '';
|
||||
let title = '';
|
||||
let disabled: boolean;
|
||||
|
||||
let { moreAvailable = false, isLoading = false, loadOlderPosts }: Props = $props();
|
||||
let displayText = $derived.by(() => {
|
||||
if (isLoading) {
|
||||
return 'Loading...';
|
||||
$: if (isLoading) {
|
||||
displayText = 'Loading...';
|
||||
} else if (!moreAvailable) {
|
||||
return 'You reached the end';
|
||||
displayText = 'You reached the end';
|
||||
} else {
|
||||
displayText = 'Load More';
|
||||
}
|
||||
return 'Load More';
|
||||
});
|
||||
let title = $derived(moreAvailable ? 'Load More' : 'There be dragons!');
|
||||
let disabled: boolean = $derived(!moreAvailable || isLoading);
|
||||
$: disabled = !moreAvailable || isLoading;
|
||||
$: title = moreAvailable ? 'Load More' : 'There be dragons!';
|
||||
|
||||
/*const dispatch = createEventDispatcher<{
|
||||
loadOlderPosts: string;
|
||||
}>();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function loadOlderPosts() {
|
||||
function loadOlderPosts() {
|
||||
dispatch('loadOlderPosts');
|
||||
}*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={() => loadOlderPosts()} {disabled} {title}>
|
||||
<button on:click={loadOlderPosts} {disabled} {title}>
|
||||
<div class="loading" class:collapsed={!isLoading}>
|
||||
<LoadingSpinnerComponent size="0.5em" thickness="6px" />
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
size?: string;
|
||||
thickness?: string;
|
||||
}
|
||||
|
||||
let { size = '64px', thickness = '6px' }: Props = $props();
|
||||
export let size = '64px';
|
||||
export let thickness = '6px';
|
||||
</script>
|
||||
|
||||
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
|
||||
<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" />
|
||||
|
||||
<style>
|
||||
.lds-dual-ring {
|
||||
|
||||
@ -6,54 +6,20 @@
|
||||
import { secondsSince, relativeTime } from '$lib/relativeTime';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
post: Post;
|
||||
}
|
||||
|
||||
let { post }: Props = $props();
|
||||
let displayRelativeTime = $state(false);
|
||||
export let post: Post;
|
||||
let displayRelativeTime = false;
|
||||
const absoluteDate = new Date(post.created_at).toLocaleString();
|
||||
let dateCreated = absoluteDate;
|
||||
const timePassed = secondsSince(new Date(post.created_at));
|
||||
let dateCreated = $derived.by(() => {
|
||||
if (displayRelativeTime) {
|
||||
return relativeTime($timePassed) ?? absoluteDate;
|
||||
}
|
||||
return absoluteDate;
|
||||
});
|
||||
|
||||
const songs = filterDuplicates(post.songs ?? []);
|
||||
|
||||
function filterDuplicates(songs: SongInfo[]): SongInfo[] {
|
||||
return songs.filter((obj, index, arr) => {
|
||||
return arr.map((mapObj) => mapObj.pageUrl).indexOf(obj.pageUrl) === index;
|
||||
});
|
||||
}
|
||||
|
||||
function getThumbnailSize(song: SongInfo): {
|
||||
width?: number;
|
||||
height?: number;
|
||||
widthSmall?: number;
|
||||
heightSmall?: number;
|
||||
} {
|
||||
if (song.thumbnailWidth === undefined || song.thumbnailHeight === undefined) {
|
||||
return { width: undefined, height: undefined, widthSmall: undefined, heightSmall: undefined };
|
||||
}
|
||||
const factor = 200 / song.thumbnailWidth;
|
||||
const smallFactor = 60 / song.thumbnailHeight;
|
||||
const height = song.thumbnailHeight * factor;
|
||||
return {
|
||||
width: 200,
|
||||
height: height,
|
||||
widthSmall: smallFactor * song.thumbnailWidth,
|
||||
heightSmall: 60
|
||||
};
|
||||
$: if (displayRelativeTime) {
|
||||
dateCreated = relativeTime($timePassed) ?? absoluteDate;
|
||||
}
|
||||
|
||||
// Blurred thumbs aren't generated (yet, unclear of they ever will)
|
||||
// So blurred forces using the small one, by skipping the others and removing its media query.
|
||||
// This is technically unnecessary - the blurred one will only show if it matches the small media query,
|
||||
// but this makes it more explicit
|
||||
function getSourceSetHtml(song: SongInfo, isBlurred = false): string {
|
||||
function getSourceSetHtml(song: SongInfo, isBlurred: boolean = false): string {
|
||||
const small = new Map<string, string[]>();
|
||||
const large = new Map<string, string[]>();
|
||||
|
||||
@ -92,16 +58,15 @@
|
||||
}
|
||||
}
|
||||
let html = '';
|
||||
const { width, height, widthSmall, heightSmall } = getThumbnailSize(song);
|
||||
const mediaAttribute = isBlurred ? '' : 'media="(max-width: 650px)"';
|
||||
for (const entry of small.entries()) {
|
||||
const srcset = entry[1].join(', ');
|
||||
html += `<source srcset="${srcset}" type="${entry[0]}" ${mediaAttribute} width="${widthSmall}" height="${heightSmall}" />`;
|
||||
html += `<source srcset="${srcset}" type="${entry[0]}" ${mediaAttribute} />`;
|
||||
}
|
||||
html += '\n';
|
||||
for (const entry of large.entries()) {
|
||||
const srcset = entry[1].join(', ');
|
||||
html += `<source srcset="${srcset}" type="${entry[0]}" width="${width}" height="${height}"/>`;
|
||||
html += `<source srcset="${srcset}" type="${entry[0]}" />`;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
@ -123,7 +88,7 @@
|
||||
<div class="content">{@html post.content}</div>
|
||||
<div class="song">
|
||||
{#if post.songs}
|
||||
{#each songs as song (song.pageUrl)}
|
||||
{#each post.songs as song (song.pageUrl)}
|
||||
<div class="info-wrapper">
|
||||
<picture>
|
||||
{@html getSourceSetHtml(song)}
|
||||
@ -138,8 +103,6 @@
|
||||
class="cover"
|
||||
alt="Cover for {song.artistName} - {song.title}"
|
||||
loading="lazy"
|
||||
width={song.thumbnailWidth}
|
||||
height={song.thumbnailHeight}
|
||||
/>
|
||||
</picture>
|
||||
<span class="text">{song.artistName} - {song.title}</span>
|
||||
|
||||
@ -9,8 +9,6 @@ export type SongInfo = {
|
||||
thumbnailUrl?: string;
|
||||
postedUrl: string;
|
||||
resizedThumbnails?: SongThumbnailImage[];
|
||||
thumbnailWidth?: number;
|
||||
thumbnailHeight?: number;
|
||||
};
|
||||
|
||||
export type SongwhipReponse = {
|
||||
|
||||
@ -40,8 +40,6 @@ type SongRow = {
|
||||
title?: string;
|
||||
artistName?: string;
|
||||
thumbnailUrl?: string;
|
||||
thumbnailWidth?: number;
|
||||
thumbnailHeight?: number;
|
||||
};
|
||||
|
||||
type AccountAvatarRow = {
|
||||
@ -93,8 +91,8 @@ if (enableVerboseLog) {
|
||||
});
|
||||
}
|
||||
|
||||
function applyDbMigration(migration: Migration): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
async function applyDbMigration(migration: Migration): Promise<void> {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
db.exec(migration.statement, (err) => {
|
||||
if (err !== null) {
|
||||
log.error(`Failed to apply migration ${migration.name}`, err);
|
||||
@ -112,7 +110,7 @@ async function applyMigration(migration: Migration) {
|
||||
// so filtering won't help
|
||||
const posts = await getPostsInternal(null, null, 10000);
|
||||
let current = 0;
|
||||
const total = posts.length.toString().padStart(4, '0');
|
||||
let total = posts.length.toString().padStart(4, '0');
|
||||
for (const post of posts) {
|
||||
current++;
|
||||
if (post.songs && post.songs.length) {
|
||||
@ -306,13 +304,6 @@ function getMigrations(): Migration[] {
|
||||
kind INTEGER NOT NULL,
|
||||
FOREIGN KEY (song_thumbnailUrl) REFERENCES songs(thumbnailUrl)
|
||||
);`
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: 'song thumbnail size',
|
||||
statement: `
|
||||
ALTER TABLE songs ADD COLUMN thumbnailWidth INTEGER NULL;
|
||||
ALTER TABLE songs ADD COLUMN thumbnailHeight INTEGER NULL;`
|
||||
}
|
||||
];
|
||||
}
|
||||
@ -444,8 +435,8 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
|
||||
for (const song of songs) {
|
||||
db.run(
|
||||
`
|
||||
INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, title, artistName, thumbnailUrl, post_url, thumbnailWidth, thumbnailHeight)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
|
||||
INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, title, artistName, thumbnailUrl, post_url)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
|
||||
`,
|
||||
[
|
||||
song.postedUrl,
|
||||
@ -455,9 +446,7 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
|
||||
song.title,
|
||||
song.artistName,
|
||||
song.thumbnailUrl,
|
||||
postUrl,
|
||||
song.thumbnailWidth,
|
||||
song.thumbnailHeight
|
||||
postUrl
|
||||
],
|
||||
(songErr) => {
|
||||
if (songErr !== null) {
|
||||
@ -479,11 +468,11 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
|
||||
}
|
||||
|
||||
export async function savePost(post: Post, songs: SongInfo[]) {
|
||||
log.debug(`Saving post ${post.url}`);
|
||||
if (!databaseReady) {
|
||||
await waitReady();
|
||||
}
|
||||
|
||||
log.debug(`Saving post ${post.url}`);
|
||||
const account = post.account;
|
||||
await saveAccountData(account);
|
||||
log.debug(`Saved account data ${post.url}`);
|
||||
@ -492,10 +481,7 @@ export async function savePost(post: Post, songs: SongInfo[]) {
|
||||
await savePostTagData(post);
|
||||
log.debug(`Saved ${post.tags.length} tag data ${post.url}`);
|
||||
await saveSongInfoData(post.url, songs);
|
||||
log.debug(
|
||||
`Saved ${songs.length} song info data ${post.url}`,
|
||||
songs.map((s) => s.thumbnailHeight)
|
||||
);
|
||||
log.debug(`Saved ${songs.length} song info data ${post.url}`);
|
||||
}
|
||||
|
||||
function getPostData(filterQuery: string, params: FilterParameter): Promise<PostRow[]> {
|
||||
@ -548,17 +534,17 @@ function getTagData(postIdsParams: string, postIds: string[]): Promise<Map<strin
|
||||
});
|
||||
}
|
||||
|
||||
function getSongData(postIdsParams: string, postIds: string[]): Promise<Map<string, SongInfo[]>> {
|
||||
function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<string, SongInfo[]>> {
|
||||
return new Promise((resolve, reject) => {
|
||||
db.all(
|
||||
`SELECT post_url, songs.postedUrl, songs.overviewUrl, songs.type, songs.youtubeUrl,
|
||||
songs.title, songs.artistName, songs.thumbnailUrl, songs.post_url, songs.thumbnailWidth, songs.thumbnailHeight
|
||||
songs.title, songs.artistName, songs.thumbnailUrl, songs.post_url
|
||||
FROM songs
|
||||
WHERE post_url IN (${postIdsParams});`,
|
||||
postIds,
|
||||
(tagErr, tagRows: SongRow[]) => {
|
||||
if (tagErr != null) {
|
||||
log.error('Error loading post songs', tagErr);
|
||||
log.error('Error loading post tags', tagErr);
|
||||
reject(tagErr);
|
||||
return;
|
||||
}
|
||||
@ -571,16 +557,13 @@ function getSongData(postIdsParams: string, postIds: string[]): Promise<Map<stri
|
||||
title: item.title,
|
||||
artistName: item.artistName,
|
||||
thumbnailUrl: item.thumbnailUrl,
|
||||
postedUrl: item.postedUrl,
|
||||
thumbnailHeight: item.thumbnailHeight,
|
||||
thumbnailWidth: item.thumbnailWidth
|
||||
postedUrl: item.postedUrl
|
||||
} as SongInfo;
|
||||
result.set(item.post_url, [...(result.get(item.post_url) || []), info]);
|
||||
return result;
|
||||
},
|
||||
new Map()
|
||||
);
|
||||
log.verbose('songMap', songMap);
|
||||
resolve(songMap);
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import {
|
||||
HASHTAG_FILTER,
|
||||
MASTODON_ACCESS_TOKEN,
|
||||
MASTODON_INSTANCE,
|
||||
ODESLI_API_KEY,
|
||||
YOUTUBE_API_KEY
|
||||
} from '$env/static/private';
|
||||
import { log } from '$lib/log';
|
||||
import { enableVerboseLog, log } from '$lib/log';
|
||||
import type {
|
||||
Account,
|
||||
AccountAvatar,
|
||||
@ -79,6 +78,24 @@ export class TimelineReader {
|
||||
const categoryTitle: string = await fetch(youtubeCategoryUrl)
|
||||
.then((r) => r.json())
|
||||
.then((r) => r.items[0]?.snippet?.title);
|
||||
if (enableVerboseLog) {
|
||||
log.verbose(
|
||||
'Video',
|
||||
videoId,
|
||||
'category',
|
||||
categoryTitle,
|
||||
'tags',
|
||||
item.snippet.tags,
|
||||
'category id',
|
||||
item.snippet.categoryId,
|
||||
'response',
|
||||
respObj,
|
||||
'snippet',
|
||||
item.snippet
|
||||
);
|
||||
} else {
|
||||
log.debug('Video', videoId, 'category', categoryTitle);
|
||||
}
|
||||
return categoryTitle === 'Music';
|
||||
}
|
||||
|
||||
@ -136,6 +153,7 @@ export class TimelineReader {
|
||||
const odesliApiUrl = `https://api.song.link/v1-alpha.1/links?${odesliParams}`;
|
||||
try {
|
||||
const response = await fetch(odesliApiUrl);
|
||||
log.debug('received odesli response', response.status);
|
||||
if (response.status === 429) {
|
||||
throw new Error('Rate limit reached', { cause: 429 });
|
||||
}
|
||||
@ -145,8 +163,9 @@ export class TimelineReader {
|
||||
}
|
||||
const info = odesliInfo.entitiesByUniqueId[odesliInfo.entityUniqueId];
|
||||
const platform: Platform = 'youtube';
|
||||
log.debug(url, 'odesli response', info, 'YT URL', odesliInfo.linksByPlatform[platform]?.url);
|
||||
if (info.platforms.includes(platform)) {
|
||||
const youtubeId =
|
||||
let youtubeId =
|
||||
videoId ??
|
||||
YOUTUBE_REGEX.exec(url.href)?.groups?.videoId ??
|
||||
new URL(odesliInfo.pageUrl).pathname.split('/y/').pop();
|
||||
@ -156,7 +175,7 @@ export class TimelineReader {
|
||||
}
|
||||
const isMusic = await TimelineReader.isMusicVideo(youtubeId);
|
||||
if (!isMusic) {
|
||||
log.debug('Probably not a music video', url);
|
||||
log.debug('Probably not a music video', url, odesliInfo);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@ -224,7 +243,7 @@ export class TimelineReader {
|
||||
accountUrl: accountUrl,
|
||||
file: fn,
|
||||
sizeDescriptor: `${i}x`
|
||||
}) as AccountAvatar
|
||||
} as AccountAvatar)
|
||||
)
|
||||
.then(saveAvatar)
|
||||
)
|
||||
@ -261,7 +280,7 @@ export class TimelineReader {
|
||||
file: fn,
|
||||
sizeDescriptor: `${i}x`,
|
||||
kind: kind
|
||||
}) as SongThumbnailImage
|
||||
} as SongThumbnailImage)
|
||||
)
|
||||
.then(saveSongThumbnail)
|
||||
)
|
||||
@ -353,17 +372,15 @@ export class TimelineReader {
|
||||
}
|
||||
|
||||
private startWebsocket() {
|
||||
const socket = new WebSocket(
|
||||
`wss://${MASTODON_INSTANCE}/api/v1/streaming?type=subscribe&stream=public:local&access_token=${MASTODON_ACCESS_TOKEN}`
|
||||
);
|
||||
const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
|
||||
socket.onopen = () => {
|
||||
log.log('Connected to WS');
|
||||
socket.send('{ "type": "subscribe", "stream": "public:local"}');
|
||||
};
|
||||
socket.onmessage = async (event) => {
|
||||
try {
|
||||
const data: TimelineEvent = JSON.parse(event.data.toString());
|
||||
if (data.event !== 'update') {
|
||||
log.log('Ignoring ES event', data.event);
|
||||
return;
|
||||
}
|
||||
const post: Post = JSON.parse(data.payload);
|
||||
@ -395,8 +412,7 @@ export class TimelineReader {
|
||||
};
|
||||
socket.onclose = (event) => {
|
||||
log.warn(
|
||||
`Websocket connection to ${MASTODON_INSTANCE} closed. Code: ${event.code}, reason: '${event.reason}'`,
|
||||
event
|
||||
`Websocket connection to ${MASTODON_INSTANCE} closed. Code: ${event.code}, reason: '${event.reason}'`
|
||||
);
|
||||
setTimeout(() => {
|
||||
log.info(`Attempting to reconenct to WS`);
|
||||
@ -411,12 +427,10 @@ export class TimelineReader {
|
||||
}
|
||||
|
||||
private constructor() {
|
||||
log.log('Constructing timeline object');
|
||||
this.startWebsocket();
|
||||
}
|
||||
|
||||
public static init() {
|
||||
log.log('Timeline object init');
|
||||
if (this._instance === undefined) {
|
||||
this._instance = new TimelineReader();
|
||||
}
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
<script lang="ts">
|
||||
import FooterComponent from '$lib/components/FooterComponent.svelte';
|
||||
import { SvelteToast } from '@zerodevx/svelte-toast';
|
||||
interface Props {
|
||||
children?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let { children }: Props = $props();
|
||||
|
||||
const options = {
|
||||
pausable: true,
|
||||
@ -13,7 +8,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
<slot />
|
||||
<SvelteToast {options} />
|
||||
<div class="footer">
|
||||
<FooterComponent />
|
||||
|
||||
@ -12,11 +12,7 @@
|
||||
import { cubicInOut } from 'svelte/easing';
|
||||
import { errorToast } from '$lib/errorToast';
|
||||
|
||||
interface Props {
|
||||
data: PageData;
|
||||
}
|
||||
|
||||
let { data = $bindable() }: Props = $props();
|
||||
export let data: PageData;
|
||||
|
||||
interface FetchOptions {
|
||||
since?: string;
|
||||
@ -30,8 +26,8 @@
|
||||
|
||||
const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
|
||||
let interval: ReturnType<typeof setTimeout> | null = null;
|
||||
let moreOlderPostsAvailable = $state(true);
|
||||
let loadingOlderPosts = $state(false);
|
||||
let moreOlderPostsAvailable = true;
|
||||
let loadingOlderPosts = false;
|
||||
|
||||
// Needed, so that edgeFly() can do its thing:
|
||||
// To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
|
||||
@ -156,7 +152,7 @@
|
||||
</svelte:head>
|
||||
<h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2>
|
||||
<div class="wrapper">
|
||||
<div></div>
|
||||
<div />
|
||||
<div class="posts">
|
||||
{#if data.posts.length === 0}
|
||||
Sorry, no posts recommending music have been found yet
|
||||
@ -164,7 +160,7 @@
|
||||
{#each data.posts as post (post.url)}
|
||||
<div
|
||||
class="post"
|
||||
transition:edgeFly|global={{
|
||||
transition:edgeFly={{
|
||||
y: 10,
|
||||
created_at: post.created_at,
|
||||
duration: 300,
|
||||
@ -175,12 +171,12 @@
|
||||
</div>
|
||||
{/each}
|
||||
<LoadMoreComponent
|
||||
{loadOlderPosts}
|
||||
on:loadOlderPosts={loadOlderPosts}
|
||||
moreAvailable={moreOlderPostsAvailable}
|
||||
isLoading={loadingOlderPosts}
|
||||
/>
|
||||
</div>
|
||||
<div></div>
|
||||
<div />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import adapter from '@sveltejs/adapter-node';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
@ -11,14 +11,15 @@ const config = {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter(),
|
||||
adapter: adapter()
|
||||
},
|
||||
|
||||
csp: {
|
||||
directives: {
|
||||
'script-src': ['self', 'unsafe-inline'],
|
||||
'base-uri': ['self'],
|
||||
'object-src': ['none']
|
||||
}
|
||||
'script-src': ['self']
|
||||
},
|
||||
reportOnly: {
|
||||
'script-src': ['self']
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user