add no poster display in vote view

nitwhiz · May 22, 2023 · dd81e3b · dd81e3b
1 parent 67553c5
commit dd81e3b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 8 deletions.
diff --git a/app/package.json b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "movie-match",
   "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/app/src/api/ApiClient.ts b/app/src/api/ApiClient.ts
@@ -163,15 +163,16 @@ export default class ApiClient extends EventEmitter<{
     return this.axios.get<Media>(`/media/${mediaId}`).then(({ data }) => data);
   }
 
-  public async getPosterBlobUrl(mediaId: string): Promise<string> {
+  public async getPosterBlobUrl(mediaId: string): Promise<string | null> {
     await this.checkAccessToken();
 
     return this.axios
       .get<Blob>(`/media/${mediaId}/poster`, {
         responseType: 'blob',
       })
       .then(({ data }) => data)
-      .then((blob) => URL.createObjectURL(blob));
+      .then((blob) => URL.createObjectURL(blob))
+      .catch(() => null);
   }
 
   public async getRecommendedMedia(

diff --git a/app/src/api/PosterBlob.ts b/app/src/api/PosterBlob.ts
@@ -2,7 +2,7 @@ import { useApiClient } from '../composables/useApiClient';
 
 const postersByMediaId: Record<
   string,
-  { usages: number; urlPromise: Promise<string> }
+  { usages: number; urlPromise: Promise<string | null> }
 > = {};
 
 const apiClient = useApiClient().apiClient;
@@ -24,7 +24,10 @@ const free = (mediaId: string) => {
   postersByMediaId[mediaId].urlPromise.then((url) => {
     if (postersByMediaId[mediaId].usages === 0) {
       delete postersByMediaId[mediaId];
-      URL.revokeObjectURL(url);
+
+      if (url !== null) {
+        URL.revokeObjectURL(url);
+      }
     }
   });
 };

diff --git a/app/src/components/MediaCard.vue b/app/src/components/MediaCard.vue
@@ -8,6 +8,9 @@
   >
     <div class="image-holder">
       <img v-if="currentPosterUrl" :src="currentPosterUrl" alt="" />
+      <div class="no-poster" v-else>
+        <PhCameraSlash :size="172" weight="duotone" />
+      </div>
     </div>
     <div class="meta-overlay" v-if="showMeta">
       <h3>{{ props.media.title }}</h3>
@@ -31,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PhStar, PhStarHalf } from '@phosphor-icons/vue';
+import { PhCameraSlash, PhStar, PhStarHalf } from '@phosphor-icons/vue';
 import { Media } from '../model/Media';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useMediaType } from '../composables/useMediaType';
@@ -199,6 +202,16 @@ onMounted(() => {
 
       box-shadow: 0 0 50px #111;
     }
+
+    .no-poster {
+      background-color: black;
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 
   .meta-overlay {

diff --git a/app/src/views/MatchesView.vue b/app/src/views/MatchesView.vue
@@ -14,9 +14,10 @@
       <div class="poster">
         <img
           v-if="mediaPosters[m.media.id]"
-          :src="mediaPosters[m.media.id]"
+          :src="mediaPosters[m.media.id] || undefined"
           :alt="m.media.title"
         />
+        <!-- todo: fallback poster -->
       </div>
       <div class="details">
         <b class="name">{{ m.media.title }}</b>
@@ -45,7 +46,7 @@ const { getMediaTypeLabelSingular } = useMediaType();
 
 const filterType = ref('all' as MediaType | 'all');
 
-const mediaPosters = ref({} as Record<string, string>);
+const mediaPosters = ref({} as Record<string, string | null>);
 
 const fetchMatches = () => {
   apiClient