diff --git a/src/views/VideoEdit.vue b/src/views/VideoEdit.vue index 0297cf1..cefaa7f 100644 --- a/src/views/VideoEdit.vue +++ b/src/views/VideoEdit.vue @@ -4,27 +4,64 @@ - + - + - + - + - + - + - + - + Create Update - Delete + Delete @@ -49,8 +86,8 @@ 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, @@ -58,7 +95,7 @@ export default { 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` } } }