consolidate usage of getGameCoverUrl util

src/companies/pages/CompanyPage.vue

@@ -8,7 +8,7 @@
         <p>{{ company.description }}</p>
         <img
           v-if="company.logo"
-          :src="$options.getGameCoverUrl({ cover: { image_id: company.logo.image_id } })"
+          :src="$options.getGameCoverUrl(company.logo.image_id)"
           alt="company.name"
           width="100"
         />
@@ -25,7 +25,7 @@
             lg="2"
           >
             <router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
-              <b-img :src="$options.getGameCoverUrl(game)" alt="" fluid class="rounded" />
+              <b-img :src="$options.getGameCoverUrl(game.cover.image_id)" alt="" fluid class="rounded" />
               <br />
               <small>{{ game.name }}</small>
             </router-link>
@@ -44,7 +44,7 @@
             lg="2"
           >
             <router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
-              <b-img :src="$options.getGameCoverUrl(game)" alt="" fluid class="rounded" />
+              <b-img :src="$options.getGameCoverUrl(game.cover.image_id)" alt="" fluid class="rounded" />
               <br />
               <small>{{ game.name }}</small>
             </router-link>

src/components/AddRemoveGame.vue

@@ -45,7 +45,6 @@
 
 <script>
 import { mapState } from 'vuex';
-import { getGameCoverUrl } from '@/utils';
 
 export default {
   data() {
@@ -69,10 +68,6 @@ export default {
     gameId() {
       return this.$route.params.id
     },
-
-    coverUrl() {
-      return getGameCoverUrl(this.game);
-    },
   },
 
   methods: {

src/components/Game/GameMedia.vue

@@ -99,15 +99,6 @@
               />
             </div>
           </div>
-          <!-- <b-img
-            v-for="(media, index) in gameMedia"
-            :key="media.imageUrl"
-            :src="media.imageUrl"
-            rounded
-            style="height: 80px"
-            :class="['cursor-pointer mr-2 align-self-start', { 'border-selected': activeIndex === index}]"
-            @click="viewMedia(index)"
-          /> -->
         </footer>
       </div>
     </b-modal>
@@ -116,11 +107,8 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex';
-import { getGameCoverUrl } from '@/utils';
 
 export default {
-  getGameCoverUrl,
-
   data() {
     return {
       activeIndex: null,

src/components/Game/GameTagsModal.vue

@@ -59,16 +59,11 @@
 
 <script>
 import { mapState } from 'vuex';
-import { getGameCoverUrl } from '@/utils';
 
 export default {
   computed: {
     ...mapState(['tags', 'game']),
 
-    gameCoverUrl() {
-      return getGameCoverUrl(this.game);
-    },
-
     isEmpty() {
       return this.tags.length === 0 || !this.game;
     },

src/components/Game/SimilarGames.vue

@@ -11,7 +11,7 @@
         <b-img
           fluid
           rounded
-          :src="$options.getThumbnailUrl(game)"
+          :src="$options.getGameCoverUrl(game.cover.image_id, 't_cover_small_2x')"
           :alt="game.name"
           img-top
         />
@@ -22,10 +22,10 @@
 
 <script>
 import { mapState } from 'vuex';
-import { getThumbnailUrl } from '@/utils';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
-  getThumbnailUrl,
+  getGameCoverUrl,
 
   data() {
     return {

src/components/GameCards/GameCardCompact.vue

@@ -10,7 +10,7 @@
         <b-img
           fluid
           blank-color="#ccc"
-          :src="coverUrl"
+          :src="$options.getGameCoverUrl(game.cover.image_id)"
           :alt="game.name"
           class="rounded m-1"
         />

src/components/GameCards/GameCardCovers.vue

@@ -2,7 +2,7 @@
   <div class="position-relative cursor-pointer rounded align-self-end card overflow-hidden border-0 mb-2">
     <b-img
       fluid
-      :src="coverUrl"
+      :src="$options.getGameCoverUrl(game.cover.image_id)"
     />
 
     <i

src/components/GameCards/GameCardDefault.vue

@@ -14,7 +14,7 @@
           blank-color="#ccc"
           class="m-1"
           rounded
-          :src="coverUrl"
+          :src="$options.getGameCoverUrl(game.cover.image_id)"
           :alt="game.name"
         />
       </b-col>

src/components/GameCards/GameCardGrid.vue

@@ -9,7 +9,7 @@
     <div class="position-relative cursor-pointer rounded align-self-end card overflow-hidden border-0 m-1">
       <b-img
         fluid
-        :src="coverUrl"
+        :src="$options.getGameCoverUrl(game.cover.image_id)"
       />
 
       <i

src/components/GameCards/GameCardSearch.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <b-card
     v-if="game"
-    :img-src="$options.getGameCoverUrl(game)"
+    :img-src="$options.getGameCoverUrl(coverId)"
     :img-alt="game.name"
     :class="['mb-3 cursor-pointer', { 'border-selected': selected }]"
     overlay
@@ -31,6 +31,10 @@ export default {
   computed: {
     ...mapState(['user', 'boards']),
 
+    coverId() {
+      return this.game?.cover?.image_id;
+    },
+
     selectedBoard() {
       const { boardId } = this.$route.query;
 

src/components/GameCards/GameCardStandard.vue

@@ -14,7 +14,7 @@
           blank-color="#ccc"
           class="m-1"
           rounded
-          :src="coverUrl"
+          :src="$options.getGameCoverUrl(game.cover.image_id)"
           :alt="game.name"
         />
       </b-col>

src/components/GameSelector.vue

@@ -44,7 +44,8 @@
           @click="selectGame(game.id)"
         >
           <b-card-img
-            :src="$options.getThumbnailUrl(game)"
+            v-if="game.cover"
+            :src="$options.getGameCoverUrl(game.cover.image_id, 't_cover_small_2x')"
             alt="Image"
             class="game-thumbnail rounded"
           />
@@ -71,10 +72,10 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex';
-import { getThumbnailUrl } from '@/utils';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
-  getThumbnailUrl,
+  getGameCoverUrl,
 
   props: {
     block: Boolean,

src/components/Lists/StandardList.vue

@@ -28,37 +28,6 @@
       @click.native="openGame(game.id, list)"
     />
 
-    <!-- <b-card
-      no-body
-      :bg-variant="darkTheme ? 'info' : 'white'"
-      :text-variant="darkTheme ? 'white' : 'dark'"
-      class=" flex-row align-items-center cursor-pointer"
-      v-for="(game, index) in listGames"
-      :key="index"
-      @click="openGame(game.id, list)"
-    >
-      <b-img
-        v-if="game"
-        :src="$options.getThumbnailUrl(game)"
-        :alt="game.name"
-        class="m-2 game-cover"
-        rounded
-        fluid
-        />
-
-      <h3 class="d-flex mr-2 w-100 px-3 align-items-center">
-        <b-avatar
-          v-if="board.ranked"
-          variant="light"
-          class="mr-2"
-          >
-          {{ index + 1 }}
-        </b-avatar>
-
-        {{ game.name }}
-      </h3>
-    </b-card> -->
-
     <game-selector
       :filter="filter"
       title="Add games"
@@ -76,13 +45,10 @@ import slugify from 'slugify'
 import orderby from 'lodash.orderby';
 import GameSelector from '@/components/GameSelector';
 import { mapState, mapGetters } from 'vuex';
-import { getThumbnailUrl } from '@/utils';
 import GameCardStandard from '@/components/GameCards/GameCardStandard';
 
 
 export default {
-  getThumbnailUrl,
-
   components: {
     draggable,
     GameCardStandard,

src/components/Lists/TierList.vue

@@ -48,7 +48,7 @@
         :key="gameId"
         class="game cursor-pointer rounded ml-2"
         fluid
-        :src="$options.getThumbnailUrl(games[gameId])"
+        :src="$options.getGameCoverUrl(games[gameId].cover.image_id, 't_cover_med_2x')"
         @click="openGame(gameId)"
       />
     </draggable>
@@ -56,7 +56,7 @@
 </template>
 
 <script>
-import { getThumbnailUrl } from '@/utils';
+import { getGameCoverUrl } from '@/utils';
 import draggable from 'vuedraggable';
 import slugify from 'slugify'
 import orderby from 'lodash.orderby';
@@ -65,7 +65,7 @@ import gameCardMixin from '@/mixins/gameCardMixin';
 import GameSelector from '@/components/GameSelector';
 
 export default {
-  getThumbnailUrl,
+  getGameCoverUrl,
 
   mixins: [gameCardMixin],
 

src/game/pages/GameNewsPage.vue

@@ -26,7 +26,7 @@
       <b-row v-else>
         <b-col cols="12" sm="4">
           <router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" class="float-right">
-            <b-img :src="gameCoverUrl" fluid rounded />
+            <b-img :src="$options.getGameCoverUrl(game.cover.image_id)" fluid rounded />
           </router-link>
         </b-col>
 
@@ -75,6 +75,7 @@ import { getGameCoverUrl } from '@/utils';
 import { NEWS_SOURCES } from '@/constants';
 
 export default {
+  getGameCoverUrl,
 
   data() {
     return {
@@ -86,10 +87,6 @@ export default {
     ...mapState(['game']),
     ...mapGetters(['gameNews', 'darkTheme']),
 
-    gameCoverUrl() {
-      return getGameCoverUrl(this.game);
-    },
-
     steamAppId() {
       const steamUrl = this.game?.websites?.find(({ category }) => category === 13)?.url;
 

src/game/pages/GameNotesPage.vue

@@ -43,7 +43,7 @@
             :to="{ name: 'game', params: { id: game.id, slug: game.slug }}"
             class="float-right"
           >
-            <b-img :src="gameCoverUrl" fluid rounded />
+            <b-img :src="$options.getGameCoverUrl(game.cover.image_id, 't_cover_small_2x')" fluid rounded />
           </router-link>
         </b-col>
 
@@ -106,10 +106,11 @@
 import { mapState } from 'vuex';
 
 import GameNote from '@/components/GameNote';
-// TODO: consolidate getGameCoverUrl
 import { getGameCoverUrl } from '@/utils';
 
 export default {
+  getGameCoverUrl,
+
   components: {
     GameNote,
   },
@@ -126,10 +127,6 @@ export default {
 
   computed: {
     ...mapState(['notes', 'game', 'games']),
-
-    gameCoverUrl() {
-      return getGameCoverUrl(this.game);
-    },
   },
 
   mounted() {

src/game/pages/GamePage.vue

@@ -51,7 +51,7 @@
             :class="['text-center', { 'has-backdrop': backdrop }]"
           >
             <b-img
-              :src="gameCoverUrl"
+              :src="$options.getGameCoverUrl(game.cover.image_id)"
               :alt="game.name"
               v-b-modal.mediaModal
               rounded
@@ -190,8 +190,11 @@ import SimilarGames from '@/components/Game/SimilarGames';
 // import GameSpeedruns from '@/components/Game/GameSpeedruns';
 import GameNote from '@/components/GameNote';
 import { STEAM_CATEGORY_ID, GOG_CATEGORY_ID, TWITTER_CATEGORY_ID } from '@/constants';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
+  getGameCoverUrl,
+
   components: {
     // AmazonLinks,
     GameNote,
@@ -223,7 +226,7 @@ export default {
       return {
         height: artwork.height,
         width: artwork.width,
-        url: `https://images.igdb.com/igdb/image/upload/t_screenshot_huge_2x/${artwork.image_id}.jpg`,
+        url: getGameCoverUrl(artwork.image_id, 't_screenshot_huge_2x'),
       }
     },
 
@@ -268,14 +271,6 @@ export default {
     //     : null;
     // },
 
-    gameCoverUrl() {
-      const imageId = this.game?.cover?.image_id;
-
-      return imageId
-        ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${imageId}.jpg`
-        : '/no-image.jpg';
-    },
-
     gameId() {
       return this.$route.params.id;
     },

src/mixins/gameCardMixin.js

@@ -1,6 +1,9 @@
 import { mapState, mapGetters } from 'vuex';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
+  getGameCoverUrl,
+
   props: {
     list: {
       type: Object,
@@ -46,13 +49,5 @@ export default {
     game() {
       return this.games[this.gameId];
     },
-
-    coverUrl() {
-      const game = this.games[this.gameId];
-
-      return game?.cover?.image_id
-        ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${game.cover.image_id}.jpg`
-        : '/no-image.jpg';
-    },
   },
 };

src/notes/pages/NotesPage.vue

@@ -66,7 +66,7 @@
                     :to="{ name: 'game.notes', params: { id: game.id, slug: game.slug }}"
                   >
                     <b-img
-                      :src="getCoverUrl(game.id)"
+                      :src="$options.getGameCoverUrl(game.cover.image_id, 't_cover_small_2x')"
                       class="cursor-pointer rounded"
                       width="30"
                     />
@@ -93,8 +93,11 @@
 import EmptyState from '@/components/EmptyState';
 import GameSelector from '@/components/GameSelector';
 import { mapState, mapGetters } from 'vuex';
+import { getGameCoverUrl } from '@/utils';
 
 export default {
+  getGameCoverUrl,
+
   components: {
     EmptyState,
     GameSelector,
@@ -162,14 +165,6 @@ export default {
 
       this.loading = false;
     },
-
-    getCoverUrl(gameId) {
-      const game = this.games[gameId];
-
-      return game?.cover?.image_id
-        ? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${game.cover.image_id}.jpg`
-        : '/no-image.jpg';
-    },
   },
 };
 </script>

src/store/getters.js

@@ -90,11 +90,11 @@ export default {
       }
     }) || [];
 
-    const igdbScreenshots = state.game?.screenshots?.map(({ image_id }) => ({ imageUrl: `https://images.igdb.com/igdb/image/upload/t_screenshot_huge/${image_id}.jpg`, source: 'igdb', })) || [];
+    const igdbScreenshots = state.game?.screenshots?.map(({ image_id }) => ({ imageUrl: getGameCoverUrl(image_id, 't_screenshot_huge'), source: 'igdb', })) || [];
     const steamScreenshots = state.game?.steam?.screenshots.map(({ path_full }) => ({ imageUrl: path_full, source: 'steam' })) || [];
 
     const gameCover = {
-      imageUrl: getGameCoverUrl(state.game),
+      imageUrl: getGameCoverUrl(state.game?.cover?.image_id),
       source: 'igdb',
       isCover: true,
     };
@@ -112,7 +112,7 @@ export default {
       };
     }) || [];
 
-    const igdbArtworks = state?.game?.artworks?.map(({ image_id }) => ({ imageUrl: `https://images.igdb.com/igdb/image/upload/t_screenshot_huge/${image_id}.jpg`, source: 'igdb', })) || [];
+    const igdbArtworks = state?.game?.artworks?.map(({ image_id }) => ({ imageUrl: getGameCoverUrl(image_id, 't_screenshot_huge'), source: 'igdb', })) || [];
 
     return [
       ...gogImages,

src/tags/pages/EditTagPage.vue

@@ -93,7 +93,7 @@
           <b-img
             v-for="game in tag.games"
             :key="game"
-            :src="getCoverUrl(game)"
+            :src="$options.getGameCoverUrl(games[game].cover.image_id, 't_cover_small_2x')"
             class="cursor-pointer rounded mr-2 mb-2"
             @click="$router.push({ name: 'game', params: { id: games[game].id, slug: games[game].slug }})"
           />
@@ -106,9 +106,12 @@
 <script>
 import VSwatches from 'vue-swatches'
 import GameSelector from '@/components/GameSelector';
+import { getGameCoverUrl } from '@/utils';
 import { mapState } from 'vuex';
 
 export default {
+  getGameCoverUrl,
+
   data() {
     return {
       tag: {},
@@ -151,14 +154,6 @@ export default {
       this.tag = JSON.parse(JSON.stringify(tags[tagIndex]));
     },
 
-    getCoverUrl(gameId) {
-      const game = this.games[gameId];
-
-      return game?.cover?.image_id
-        ? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${game.cover.image_id}.jpg`
-        : '/no-image.jpg';
-    },
-
     async load() {
       this.loading = true;
       await this.$store.dispatch('LOAD_TAGS');

src/utils.js

@@ -10,11 +10,10 @@ export const bytesToSize = (bytes) => {
   return `${Math.round(bytes / (1024 ** i), 2)} ${sizes[i]}`;
 };
 
-// TODO: rename to something more generic, this also works for companies
-export const getGameCoverUrl = (game) => {
-  return game?.cover?.image_id
-    ? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${game.cover.image_id}.jpg`
-    : '/no-image.jpg';
+export const getGameCoverUrl = (imageId, size = 't_cover_big_2x') => {
+  return imageId
+    ? `https://images.igdb.com/igdb/image/upload/${size}/${imageId}.jpg`
+    : '/placeholder.gif';
 };
 
 export const getFileExtension = (fileName) => {
@@ -27,12 +26,6 @@ export const getImageThumbnail = (image) => {
   return image?.replace(`.${fileExtension}`, `${THUMBNAIL_PREFIX}.${fileExtension}`);
 };
 
-export const getThumbnailUrl = (game) => {
-  return game?.cover?.image_id
-    ? `https://images.igdb.com/igdb/image/upload/t_cover_med_2x/${game.cover.image_id}.jpg`
-    : '/no-image.jpg';
-};
-
 export const setPageTitle = (title) => {
   document.title = `${title} - Gamebrary`;
 };