From 35c7273d78599f730ff00f0a212ab6827ef85b21 Mon Sep 17 00:00:00 2001 From: Zao Soula Date: Thu, 30 Dec 2021 19:48:44 +0100 Subject: [PATCH 1/5] fix(vimeo): load thumbnail using Vimeo API --- src/mixins/vimeoMixin.js | 37 +++++++++---------------------------- 1 file changed, 9 insertions(+), 28 deletions(-) diff --git a/src/mixins/vimeoMixin.js b/src/mixins/vimeoMixin.js index ca7d6df..4956a37 100644 --- a/src/mixins/vimeoMixin.js +++ b/src/mixins/vimeoMixin.js @@ -1,3 +1,5 @@ +const axios = require('axios').default + export default { methods: { playVideo() { @@ -31,35 +33,14 @@ export default { }, getVimeoThumbnail(video_id, quality){ - let thumbnail; - - if(video_id){ - if(typeof quality == "undefined"){ - quality = 'high'; - } - - let quality_key = '960x540'; - if(quality === 'default'){ - quality_key = '200x150'; - } - else if(quality === 'medium'){ - quality_key = '295x166'; - } - else if(quality === 'high'){ - quality_key = '640x360'; - } - else if (quality === 'standard') { - quality_key = '960x540'; - } - else if (quality === 'maxres') { - quality_key = '1280x720'; - } - - thumbnail = "https://i.vimeocdn.com/video/"+video_id+"_"+quality_key+".jpg"; - return thumbnail; + if(!video_id) return false; + if(!['small', 'medium', 'large'].includes(quality)) { + quality = 'medium'; } - return false; + return axios + .get(`http://vimeo.com/api/v2/video/${video_id}.json`) + .then(({data}) => data[`thumbnail_${quality}`]); } } -}; \ No newline at end of file +}; From bafb22d3a8fb4e012f77128ff544523ca748aa47 Mon Sep 17 00:00:00 2001 From: Zao Soula Date: Thu, 30 Dec 2021 19:55:12 +0100 Subject: [PATCH 2/5] refactor(vimeo): remove anti-patern as detected by DeepSource --- src/mixins/vimeoMixin.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/mixins/vimeoMixin.js b/src/mixins/vimeoMixin.js index 4956a37..2e2e341 100644 --- a/src/mixins/vimeoMixin.js +++ b/src/mixins/vimeoMixin.js @@ -34,13 +34,12 @@ export default { getVimeoThumbnail(video_id, quality){ if(!video_id) return false; - if(!['small', 'medium', 'large'].includes(quality)) { - quality = 'medium'; - } + + const _quality = ['small', 'medium', 'large'].includes(quality) ? quality: 'medium'; return axios .get(`http://vimeo.com/api/v2/video/${video_id}.json`) - .then(({data}) => data[`thumbnail_${quality}`]); + .then(({data}) => data[`thumbnail_${_quality}`]); } } }; From c765fb97b8da0bb47ef3f3cd32a38a887f7e2e45 Mon Sep 17 00:00:00 2001 From: Zao Soula Date: Fri, 31 Dec 2021 17:44:36 +0100 Subject: [PATCH 3/5] refactor: replace http by https --- src/mixins/vimeoMixin.js | 2 +- src/mixins/youtubeMixin.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mixins/vimeoMixin.js b/src/mixins/vimeoMixin.js index 2e2e341..4f51678 100644 --- a/src/mixins/vimeoMixin.js +++ b/src/mixins/vimeoMixin.js @@ -38,7 +38,7 @@ export default { const _quality = ['small', 'medium', 'large'].includes(quality) ? quality: 'medium'; return axios - .get(`http://vimeo.com/api/v2/video/${video_id}.json`) + .get(`https://vimeo.com/api/v2/video/${video_id}.json`) .then(({data}) => data[`thumbnail_${_quality}`]); } } diff --git a/src/mixins/youtubeMixin.js b/src/mixins/youtubeMixin.js index dc98038..edc5867 100644 --- a/src/mixins/youtubeMixin.js +++ b/src/mixins/youtubeMixin.js @@ -56,7 +56,7 @@ export default { quality_key = 'maxresdefault' } - thumbnail = 'http://img.youtube.com/vi/' + video_id + '/' + quality_key + '.jpg' + thumbnail = 'https://img.youtube.com/vi/' + video_id + '/' + quality_key + '.jpg' return thumbnail } From 944fdb38dd430d69f1acc8d715f3225e2a1f3805 Mon Sep 17 00:00:00 2001 From: Zao Soula Date: Fri, 31 Dec 2021 18:05:41 +0100 Subject: [PATCH 4/5] refactor(LazyVimeo): reduce number of request --- src/components/LazyVimeo.vue | 10 ++++------ src/mixins/commonMixin.js | 14 ++++++++++---- src/mixins/vimeoMixin.js | 10 +++++----- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/components/LazyVimeo.vue b/src/components/LazyVimeo.vue index 503955c..80d3a92 100644 --- a/src/components/LazyVimeo.vue +++ b/src/components/LazyVimeo.vue @@ -76,11 +76,6 @@ import VideoWrapper from "./common/Wrapper"; export default { name: "LazyVimeo", mixins: [commonMixin, vimeoMixin], - data() { - return { - videoID: null - } - }, props: { src: { type: String, @@ -133,6 +128,9 @@ name: "LazyVimeo", }, computed: { + videoID: function () { + return this.getVimeoID(this.src) + }, aspectRatioValue: function () { return this.calcAspect(this.aspectRatio) }, @@ -159,4 +157,4 @@ name: "LazyVimeo", \ No newline at end of file + diff --git a/src/mixins/commonMixin.js b/src/mixins/commonMixin.js index 9fdea2d..b38b710 100644 --- a/src/mixins/commonMixin.js +++ b/src/mixins/commonMixin.js @@ -17,14 +17,20 @@ export default { const self = this let url = '' - url = type === 'youtube' ? `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${this.videoID}&format=json` : `https://vimeo.com/api/oembed.json?url=${this.src}` + url = type === 'youtube' ? `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${this.videoID}&format=json` : `https://vimeo.com/api/v2/video/${this.videoID}.json` axios.get(url) .then(function (response) { + + console.log(response.data); // handle success - self.videoInfo = response.data + if(type === 'youtube') { + self.videoInfo = response.data + } + if (type === 'vimeo') { - self.videoID = response.data.video_id + self.videoInfo = response.data[0] } + self.isVideoFound = true }) .catch(function () { @@ -32,7 +38,7 @@ export default { self.videoInfo = null self.isVideoFound = false }) - .then(function () { + .finally(function () { // always executed self.fetchingInfo = false diff --git a/src/mixins/vimeoMixin.js b/src/mixins/vimeoMixin.js index 4f51678..b3022dd 100644 --- a/src/mixins/vimeoMixin.js +++ b/src/mixins/vimeoMixin.js @@ -1,7 +1,10 @@ -const axios = require('axios').default +// const axios = require('axios').default export default { methods: { + getVimeoID (url) { + return new URL(url).pathname.split('/').pop(); + }, playVideo() { if(!this.isPostMessageSupported) { return @@ -36,10 +39,7 @@ export default { if(!video_id) return false; const _quality = ['small', 'medium', 'large'].includes(quality) ? quality: 'medium'; - - return axios - .get(`https://vimeo.com/api/v2/video/${video_id}.json`) - .then(({data}) => data[`thumbnail_${_quality}`]); + return this.videoInfo['thumbnail_'+_quality]; } } }; From 3ff86959057e60a3a873065c7225fc32f2058c4f Mon Sep 17 00:00:00 2001 From: Zao Soula Date: Fri, 31 Dec 2021 18:11:34 +0100 Subject: [PATCH 5/5] fixes --- src/mixins/commonMixin.js | 4 +--- src/mixins/vimeoMixin.js | 2 +- src/mixins/youtubeMixin.js | 5 +---- 3 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/mixins/commonMixin.js b/src/mixins/commonMixin.js index b38b710..8d16e61 100644 --- a/src/mixins/commonMixin.js +++ b/src/mixins/commonMixin.js @@ -20,13 +20,11 @@ export default { url = type === 'youtube' ? `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${this.videoID}&format=json` : `https://vimeo.com/api/v2/video/${this.videoID}.json` axios.get(url) .then(function (response) { - - console.log(response.data); // handle success if(type === 'youtube') { self.videoInfo = response.data } - + if (type === 'vimeo') { self.videoInfo = response.data[0] } diff --git a/src/mixins/vimeoMixin.js b/src/mixins/vimeoMixin.js index b3022dd..944b4df 100644 --- a/src/mixins/vimeoMixin.js +++ b/src/mixins/vimeoMixin.js @@ -39,7 +39,7 @@ export default { if(!video_id) return false; const _quality = ['small', 'medium', 'large'].includes(quality) ? quality: 'medium'; - return this.videoInfo['thumbnail_'+_quality]; + return this.videoInfo[`thumbnail_${_quality}`]; } } }; diff --git a/src/mixins/youtubeMixin.js b/src/mixins/youtubeMixin.js index edc5867..73525f5 100644 --- a/src/mixins/youtubeMixin.js +++ b/src/mixins/youtubeMixin.js @@ -36,8 +36,6 @@ export default { } }, getYoutubeThumbnail (video_id, quality) { - let thumbnail - if (video_id) { if (typeof quality === 'undefined') { quality = 'high' @@ -56,8 +54,7 @@ export default { quality_key = 'maxresdefault' } - thumbnail = 'https://img.youtube.com/vi/' + video_id + '/' + quality_key + '.jpg' - return thumbnail + return `https://img.youtube.com/vi/${video_id}/${quality_key}.jpg`; } return false