Fix #32

src/lib/components/AvatarComponent.svelte

@@ -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>

src/lib/components/PostComponent.svelte

@@ -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>

src/lib/odesliResponse.ts

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

src/lib/server/db.ts

@@ -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> {
+function applyDbMigration(migration: Migration): Promise<void> {
-  return new Promise(async (resolve, reject) => {
+  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)
+          INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, title, artistName, thumbnailUrl, post_url, thumbnailWidth, thumbnailHeight)
-          VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+          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);
       }
     );

src/lib/server/timeline.ts

@@ -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;
         }
       }