Upload View: Fix fetching image url

Soleone · Nov 18, 2021 · f28b066 · f28b066
1 parent 4e63e05
commit f28b066
Showing 1 changed file with 81 additions and 31 deletions.
diff --git a/src/views/VideoEdit.vue b/src/views/VideoEdit.vue
@@ -4,27 +4,64 @@
       <v-col>
         <v-card>
           <v-card-text>
-            <v-text-field label="Youtube URL" v-model="video.url" @change="fetchMetadata" required></v-text-field>
+            <v-text-field
+              label="Youtube URL"
+              v-model="video.url"
+              @change="fetchMetadata"
+              required
+            ></v-text-field>
 
-            <v-text-field label="Title" v-model="video.title" required></v-text-field>
+            <v-text-field
+              label="Title"
+              v-model="video.title"
+              required
+            ></v-text-field>
 
-            <v-img :src="video.imageUrl" max-width="480" max-height="360" class="mb-4"></v-img>
+            <v-img
+              :src="video.imageUrl"
+              max-width="480"
+              max-height="360"
+              class="mb-4"
+            ></v-img>
 
-            <v-text-field label="Author" v-model="video.author" required></v-text-field>
+            <v-text-field
+              label="Author"
+              v-model="video.author"
+              required
+            ></v-text-field>
 
-            <v-select label="Category" :items="categories" v-model="video.category"></v-select>
+            <v-select
+              label="Category"
+              :items="categories"
+              v-model="video.category"
+            ></v-select>
 
-            <v-textarea label="Description" v-model="video.description"></v-textarea>
+            <v-textarea
+              label="Description"
+              v-model="video.description"
+            ></v-textarea>
 
-            <v-text-field label="Published at" v-model="video.publishedAt" required></v-text-field>
+            <v-text-field
+              label="Published at"
+              v-model="video.publishedAt"
+              required
+            ></v-text-field>
 
-            <v-text-field label="Youtube API Key" v-model="apiKey" type="password" @change="storeInLocalStorage" required></v-text-field>
+            <v-text-field
+              label="Youtube API Key"
+              v-model="apiKey"
+              type="password"
+              @change="storeInLocalStorage"
+              required
+            ></v-text-field>
           </v-card-text>
           <v-card-actions class="flex justify-space-between">
             <v-btn v-if="!id" color="success" @click="create">Create</v-btn>
             <v-btn v-if="id" color="success" @click="update">Update</v-btn>
 
-            <v-btn v-if="isUserAdmin" color="error" @click="destroy">Delete</v-btn>
+            <v-btn v-if="isUserAdmin" color="error" @click="destroy"
+              >Delete</v-btn
+            >
           </v-card-actions>
         </v-card>
       </v-col>
@@ -49,16 +86,16 @@ export default {
   },
   data() {
     return {
-      baseURL: "https://www.youtube.com/oembed?format=json",
-      youtubeAPIBaseUrl: "https://www.googleapis.com/youtube/v3/videos",
+      baseURL: 'https://www.youtube.com/oembed?format=json',
+      youtubeAPIBaseUrl: 'https://www.googleapis.com/youtube/v3/videos',
       apiKey: null,
       video: {
         url: null,
         author: null,
         title: null,
         category: null,
         description: null,
-        imageUrl: "/placeholder_image.png",
+        imageUrl: '/placeholder_image.png',
         addedAt: null,
         publishedAt: null
       }
@@ -80,45 +117,55 @@ export default {
       return CATEGORIES
     },
     videoId() {
-      return this.video.url.replace('https://www.youtube.com/watch?v=', '').replace("https://youtu.be/", '')
+      return this.video.url
+        .replace('https://www.youtube.com/watch?v=', '')
+        .replace('https://youtu.be/', '')
     }
   },
   methods: {
     fetchMetadata() {
       const videoId = this.videoId
-      console.log("Looking up metadata from Youtube for video id", videoId)
+      console.log('Looking up metadata from Youtube for video id', videoId)
       const url = `${this.youtubeAPIBaseUrl}?part=snippet,statistics&key=${this.apiKey}&id=${videoId}`
       axios.get(url).then(response => {
         console.log(response)
         const data = response.data
         const videoData = response.data.items[0]
+        console.log(videoData)
         this.video.author = videoData.snippet.channelTitle
         this.video.title = videoData.snippet.title
-        const thumbnail = videoData.snippet.thumbnails['standard']
+        const thumbnail =
+          videoData.snippet.thumbnails['high']?.url ||
+          this.backupImageUrl(videoId)
         if (thumbnail) {
-          this.video.imageUrl = thumbnail.url
+          console.log(`Image: ${thumbnail}`)
+          this.video.imageUrl = thumbnail
         }
         this.video.description = videoData.snippet.description
         this.video.publishedAt = dayjs(videoData.snippet.publishedAt).toDate()
       })
     },
     fetchVideo() {
-      store.collection('videos').doc(this.id).get().then((doc) => {
-        const video = doc.data()
-        this.video.url = video.url
-        this.video.author = video.author
-        this.video.title = video.title
-        this.video.category = video.category
-        this.video.description = video.description
-        this.video.addedAt = video.addedAt
+      store
+        .collection('videos')
+        .doc(this.id)
+        .get()
+        .then(doc => {
+          const video = doc.data()
+          this.video.url = video.url
+          this.video.author = video.author
+          this.video.title = video.title
+          this.video.category = video.category
+          this.video.description = video.description
+          this.video.addedAt = video.addedAt
 
-        if (video.publishedAt) {
-          this.video.publishedAt = dayjs(video.publishedAt).toDate()
-        }
-        if (video.imageUrl) {
-          this.video.imageUrl = video.imageUrl
-        }
-      })
+          if (video.publishedAt) {
+            this.video.publishedAt = dayjs(video.publishedAt).toDate()
+          }
+          if (video.imageUrl) {
+            this.video.imageUrl = video.imageUrl
+          }
+        })
     },
     create() {
       this.$store.dispatch('createVideo', this.video)
@@ -132,6 +179,9 @@ export default {
     },
     storeInLocalStorage() {
       window.localStorage.setItem('youtube-api-key', this.apiKey)
+    },
+    backupImageUrl(videoId) {
+      return `https://i.ytimg.com/vi/${videoId}/sddefault.jpg`
     }
   }
 }