feat(popup): Use game cases and urls for youtube and speedrun.com

Author: fent

background/sources/collections/haloruns.js

@@ -55,7 +55,7 @@ export default async () => {
       desc: 'Previous Record: ' + $previousRecord.outerHTML +
         ' by ' + $previousUser.outerHTML + '<br />' +
         'Time Saved: ' + timeSaved,
-      game: game,
+      game: { name: game },
     });
   }
   return items;

background/sources/collections/speedrundotcom.js

@@ -56,16 +56,16 @@ export default async () => {
             transform: async (response) => {
               const url = response.data.weblink;
               const user = url.slice(url.lastIndexOf('/') + 1);
-              let thumbnail =
+              let image =
                 `https://www.speedrun.com/themes/user/${user}/image.png`;
-              const imageRes = await fetch(thumbnail, {
+              const imageRes = await fetch(image, {
                 method: 'HEAD'
               });
-              if (!imageRes.ok) { thumbnail = null; }
+              if (!imageRes.ok) { image = null; }
               return {
                 url,
                 name: response.data.names.international,
-                thumbnail,
+                image,
               };
             },
             ttl: 1000 * 60 * 60 * 24 // 1day
@@ -77,18 +77,19 @@ export default async () => {
     return !!users.filter(u => !!u).length;
   };
 
-  const addMetaToVideo = async (run, meta) => {
+  const addGameToVideo = async (run, meta) => {
     if (!run.game && meta.gameID) {
-      const game = await util.ajax(
+      run.game = await util.ajax(
         'https://www.speedrun.com/api/v1/games/' + meta.gameID, {
           cache: {
             transform: (response) => ({
-              name: response.data.names.international
+              name: response.data.names.international,
+              url: response.data.weblink,
+              image: response.data.assets['cover-small'].uri,
             }),
             ttl: 1000 * 60 * 60 * 24 // 1day
           },
         });
-      run.game = game.name;
       return true;
     } else {
       return true;
@@ -102,7 +103,7 @@ export default async () => {
     run.desc = meta.desc;
     const results = await Promise.all([
       addUsersToRun(run, meta),
-      addMetaToVideo(run, meta)
+      addGameToVideo(run, meta)
     ]);
     return results[0] && results[1];
   };

background/sources/videos/twitch.js

@@ -72,12 +72,12 @@ export default {
             thumbnail : response.preview,
             length    : response.length,
             title     : response.title,
-            game      : response.game,
+            game      : { name: response.game },
             views     : response.views,
             user      : {
               url: 'https://www.twitch.tv/' + response.channel.name,
               name: response.channel.display_name,
-              thumbnail: userImages.get(response.channel.name),
+              image: userImages.get(response.channel.name),
             },
           };
         },
@@ -98,7 +98,7 @@ export default {
         user: {
           url: 'https://www.twitch.tv/' + video.channel.name,
           name: video.channel.display_name,
-          thumbnail: userImages.get(video.channel.name),
+          image: userImages.get(video.channel.name),
         },
         url: video.url,
         thumbnail: video.preview,
@@ -107,7 +107,7 @@ export default {
         timestamp: new Date(video.created_at).getTime(),
         views: video.views,
         desc: video.description,
-        game: video.game,
+        game: { name: video.game },
       };
     });
   },

background/sources/videos/youtube.js

@@ -45,7 +45,7 @@ export default {
       user: {
         url: info.author.channel_url,
         name: info.author.name,
-        thumbnail: info.author.avatar,
+        image: info.author.avatar,
         verified: info.author.verified,
       },
 
@@ -57,7 +57,7 @@ export default {
       game: info.media && info.media.game ? {
         name: info.media.game,
         url: info.media.game_url,
-        thumbnail: info.media.image,
+        image: info.media.image,
       } : null,
     };
     ytdlCache.push(id, meta);
@@ -119,7 +119,7 @@ export default {
         return {
           user: {
             url: userUrl,
-            thumbnail: item.channelThumbnail.thumbnails[0].url,
+            image: item.channelThumbnail.thumbnails[0].url,
             name: user.text,
             verified: item.ownerBadges && item.ownerBadges.some((badge) => {
               badge.tooltip == 'Verified';

popup/popup.js

@@ -206,8 +206,8 @@ const renderGroupVideo = (group, video) => {
       href: user.url || '#',
       target: '_blank',
     }, [
-      user.thumbnail ?
-        m('img.lazy', { 'data-src': user.thumbnail }) : null,
+      user.image ?
+        m('img.lazy', { 'data-src': user.image }) : null,
       m('span.name', user.name),
       user.verified ?
         m('span.verified', { 'data-title': 'Verified' }) : null,
@@ -239,13 +239,14 @@ const renderGroupVideo = (group, video) => {
       }),
       video.game ?
         m('a.game', {
-          href: 'https://www.twitch.tv/directory/game/' +
-            encodeURIComponent(video.game) + '/videos/week',
-          'data-title': video.game,
+          href: video.game.url || 'https://www.twitch.tv/directory/game/' +
+            encodeURIComponent(video.game.name) + '/videos/week',
+          'data-title': video.game.name,
           target: '_blank',
         }, m('img.lazy', {
-          'data-src': 'http://static-cdn.jtvnw.net/ttv-boxart/' +
-            encodeURIComponent(video.game) + '-138x190.jpg',
+          'data-src': video.game.image ||
+            'http://static-cdn.jtvnw.net/ttv-boxart/' +
+            encodeURIComponent(video.game.name) + '-138x190.jpg',
         })) : null,
       video.length && m('span.length', formatVideoLength(video.length)),
       openedVideo && openedVideo.playing && m('span.queue', {