phlaym/moshing-mammut
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases 8 Activity

Fix #32

Browse Source
This commit is contained in:
Max Nuding 2023-06-24 10:06:52 +02:00
parent 87b8317c90
commit b960d35a58
Signed by: phlaym
GPG Key ID: A06651BAB6777237
5 changed files with 75 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/AvatarComponent.svelte
View File

@ -39,7 +39,7 @@
<picture>
{@html sourceSetHtml}
<img src={account.avatar} alt={avatarDescription} loading="lazy" />
<img src={account.avatar} alt={avatarDescription} loading="lazy" width="50" height="50" />
</picture>
<style>

39
src/lib/components/PostComponent.svelte
View File

@ -15,11 +15,39 @@
dateCreated = relativeTime($timePassed) ?? 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
};
}
// 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: boolean = false): string {
function getSourceSetHtml(song: SongInfo, isBlurred = false): string {
const small = new Map<string, string[]>();
const large = new Map<string, string[]>();
@ -58,15 +86,16 @@
}
}
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} />`;
html += `<source srcset="${srcset}" type="${entry[0]}" ${mediaAttribute} width="${widthSmall}" height="${heightSmall}" />`;
}
html += '\n';
for (const entry of large.entries()) {
const srcset = entry[1].join(', ');
html += `<source srcset="${srcset}" type="${entry[0]}" />`;
html += `<source srcset="${srcset}" type="${entry[0]}" width="${width}" height="${height}"/>`;
}
return html;
}
@ -88,7 +117,7 @@
<div class="content">{@html post.content}</div>
<div class="song">
{#if post.songs}
{#each post.songs as song (song.pageUrl)}
{#each songs as song (song.pageUrl)}
<div class="info-wrapper">
<picture>
{@html getSourceSetHtml(song)}
@ -103,6 +132,8 @@
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>

2
src/lib/odesliResponse.ts
View File

@ -9,6 +9,8 @@ export type SongInfo = {
thumbnailUrl?: string;
postedUrl: string;
resizedThumbnails?: SongThumbnailImage[];
thumbnailWidth?: number;
thumbnailHeight?: number;
};
export type SongwhipReponse = {

39
src/lib/server/db.ts
View File

@ -40,6 +40,8 @@ type SongRow = {
title?: string;
artistName?: string;
thumbnailUrl?: string;
thumbnailWidth?: number;
thumbnailHeight?: number;
};
type AccountAvatarRow = {
@ -91,8 +93,8 @@ if (enableVerboseLog) {
});
}
async function applyDbMigration(migration: Migration): Promise<void> {
return new Promise(async (resolve, reject) => {
function applyDbMigration(migration: Migration): Promise<void> {
return new Promise((resolve, reject) => {
db.exec(migration.statement, (err) => {
if (err !== null) {
log.error(`Failed to apply migration ${migration.name}`, err);
@ -110,7 +112,7 @@ async function applyMigration(migration: Migration) {
// so filtering won't help
const posts = await getPostsInternal(null, null, 10000);
let current = 0;
let total = posts.length.toString().padStart(4, '0');
const total = posts.length.toString().padStart(4, '0');
for (const post of posts) {
current++;
if (post.songs && post.songs.length) {
@ -304,6 +306,13 @@ 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;`
}
];
}
@ -435,8 +444,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)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)
INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, title, artistName, thumbnailUrl, post_url, thumbnailWidth, thumbnailHeight)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
`,
[
song.postedUrl,
@ -446,7 +455,9 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
song.title,
song.artistName,
song.thumbnailUrl,
postUrl
postUrl,
song.thumbnailWidth,
song.thumbnailHeight
],
(songErr) => {
if (songErr !== null) {
@ -481,7 +492,10 @@ 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}`);
log.debug(
`Saved ${songs.length} song info data ${post.url}`,
songs.map((s) => s.thumbnailHeight)
);
}
function getPostData(filterQuery: string, params: FilterParameter): Promise<PostRow[]> {
@ -534,17 +548,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.title, songs.artistName, songs.thumbnailUrl, songs.post_url, songs.thumbnailWidth, songs.thumbnailHeight
FROM songs
WHERE post_url IN (${postIdsParams});`,
postIds,
(tagErr, tagRows: SongRow[]) => {
if (tagErr != null) {
log.error('Error loading post tags', tagErr);
log.error('Error loading post songs', tagErr);
reject(tagErr);
return;
}
@ -557,13 +571,16 @@ function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<stri
title: item.title,
artistName: item.artistName,
thumbnailUrl: item.thumbnailUrl,
postedUrl: item.postedUrl
postedUrl: item.postedUrl,
thumbnailHeight: item.thumbnailHeight,
thumbnailWidth: item.thumbnailWidth
} as SongInfo;
result.set(item.post_url, [...(result.get(item.post_url) || []), info]);
return result;
},
new Map()
);
log.verbose('songMap', songMap);
resolve(songMap);
}
);

16
src/lib/server/timeline.ts
View File

@ -59,13 +59,17 @@ export class TimelineReader {
}
const item = respObj.items[0];
if (item.tags?.includes('music')) {
if (!item.snippet) {
console.warn('Could not load snippet for video', videoId, item);
return false;
}
if (item.snippet.tags?.includes('music')) {
return true;
}
const categorySearchParams = new URLSearchParams([
['part', 'snippet'],
['id', item.categoryId],
['id', item.snippet.categoryId],
['key', YOUTUBE_API_KEY]
]);
const youtubeCategoryUrl = new URL(
@ -73,7 +77,7 @@ export class TimelineReader {
);
const categoryTitle: string = await fetch(youtubeCategoryUrl)
.then((r) => r.json())
.then((r) => r.items[0]?.title);
.then((r) => r.items[0]?.snippet?.title);
return categoryTitle === 'Music';
}
@ -131,7 +135,6 @@ 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 });
}
@ -141,9 +144,8 @@ 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)) {
let youtubeId =
const youtubeId =
videoId ??
YOUTUBE_REGEX.exec(url.href)?.groups?.videoId ??
new URL(odesliInfo.pageUrl).pathname.split('/y/').pop();
@ -153,7 +155,7 @@ export class TimelineReader {
}
const isMusic = await TimelineReader.isMusicVideo(youtubeId);
if (!isMusic) {
log.debug('Probably not a music video', url, odesliInfo);
log.debug('Probably not a music video', url);
return null;
}
}