From 9383f9cc3dc496ee247218ba9dd324d6a8db159e Mon Sep 17 00:00:00 2001 From: Ain Arend Date: Mon, 19 Jul 2021 15:31:36 +0300 Subject: [PATCH 1/2] refactor: makes the vue-youtube component vue3 ready. --- dist/vue-youtube.common.js | 256 ------------------------------------- dist/vue-youtube.css | 0 dist/vue-youtube.esm.js | 249 ------------------------------------ dist/vue-youtube.js | 223 ++++++++++---------------------- dist/vue-youtube.min.css | 0 dist/vue-youtube.min.js | 7 - package.json | 10 +- src/index.js | 10 +- src/vue-youtube.js | 7 +- 9 files changed, 79 insertions(+), 683 deletions(-) delete mode 100644 dist/vue-youtube.common.js delete mode 100644 dist/vue-youtube.css delete mode 100644 dist/vue-youtube.esm.js delete mode 100644 dist/vue-youtube.min.css delete mode 100644 dist/vue-youtube.min.js diff --git a/dist/vue-youtube.common.js b/dist/vue-youtube.common.js deleted file mode 100644 index 482c712..0000000 --- a/dist/vue-youtube.common.js +++ /dev/null @@ -1,256 +0,0 @@ -/*! - * vue-youtube v1.4.0 - * (c) 2021 Antério Vieira - * Released under the MIT License. - */ - -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; - - - - - -function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; -} - -var getYoutubeId = createCommonjsModule(function (module, exports) { -(function (root, factory) { - { - module.exports = factory(); - } -}(commonjsGlobal, function (exports) { - - return function (url, opts) { - if (opts == undefined) { - opts = {fuzzy: true}; - } - - if (/youtu\.?be/.test(url)) { - - // Look first for known patterns - var i; - var patterns = [ - /youtu\.be\/([^#\&\?]{11})/, // youtu.be/ - /\?v=([^#\&\?]{11})/, // ?v= - /\&v=([^#\&\?]{11})/, // &v= - /embed\/([^#\&\?]{11})/, // embed/ - /\/v\/([^#\&\?]{11})/ // /v/ - ]; - - // If any pattern matches, return the ID - for (i = 0; i < patterns.length; ++i) { - if (patterns[i].test(url)) { - return patterns[i].exec(url)[1]; - } - } - - if (opts.fuzzy) { - // If that fails, break it apart by certain characters and look - // for the 11 character key - var tokens = url.split(/[\/\&\?=#\.\s]/g); - for (i = 0; i < tokens.length; ++i) { - if (/^[^#\&\?]{11}$/.test(tokens[i])) { - return tokens[i]; - } - } - } - } - - return null; - }; - -})); -}); - -var player = require('youtube-player'); - -var UNSTARTED = -1; -var ENDED = 0; -var PLAYING = 1; -var PAUSED = 2; -var BUFFERING = 3; -var CUED = 5; - -var Youtube = { - name: 'Youtube', - props: { - videoId: String, - playerVars: { - type: Object, - default: function () { return ({}); } - }, - height: { - type: [Number, String], - default: 360 - }, - width: { - type: [Number, String], - default: 640 - }, - resize: { - type: Boolean, - default: false - }, - resizeDelay: { - type: Number, - default: 100 - }, - nocookie: { - type: Boolean, - default: false - }, - fitParent: { - type: Boolean, - default: false - } - }, - data: function data () { - return { - player: {}, - events: ( obj = {}, obj[UNSTARTED] = 'unstarted', obj[PLAYING] = 'playing', obj[PAUSED] = 'paused', obj[ENDED] = 'ended', obj[BUFFERING] = 'buffering', obj[CUED] = 'cued', obj ), - resizeTimeout: null - } - var obj; - }, - computed: { - aspectRatio: function aspectRatio () { - return this.width / this.height - } - }, - methods: { - playerReady: function playerReady (e) { - this.$emit('ready', e.target); - }, - playerStateChange: function playerStateChange (e) { - if (e.data !== null && e.data !== UNSTARTED) { - this.$emit(this.events[e.data], e.target); - } - }, - playerError: function playerError (e) { - this.$emit('error', e.target); - }, - updatePlayer: function updatePlayer (videoId) { - if (!videoId) { - this.player.stopVideo(); - return - } - - var params = { videoId: videoId }; - - if (typeof this.playerVars.start === 'number') { - params.startSeconds = this.playerVars.start; - } - - if (typeof this.playerVars.end === 'number') { - params.endSeconds = this.playerVars.end; - } - - if (this.playerVars.autoplay === 1) { - this.player.loadVideoById(params); - return - } - - this.player.cueVideoById(params); - }, - resizeProportionally: function resizeProportionally () { - var this$1 = this; - - this.player.getIframe().then(function (iframe) { - var width = this$1.fitParent - ? iframe.parentElement.offsetWidth - : iframe.offsetWidth; - var height = width / this$1.aspectRatio; - this$1.player.setSize(width, height); - }); - }, - onResize: function onResize () { - clearTimeout(this.resizeTimeout); - this.resizeTimeout = setTimeout( - this.resizeProportionally, - this.resizeDelay - ); - } - }, - watch: { - videoId: 'updatePlayer', - resize: function resize (val) { - if (val) { - window.addEventListener('resize', this.onResize); - this.resizeProportionally(); - } else { - window.removeEventListener('resize', this.onResize); - this.player.setSize(this.width, this.height); - } - }, - width: function width (val) { - this.player.setSize(val, this.height); - }, - height: function height (val) { - this.player.setSize(this.width, val); - } - }, - beforeDestroy: function beforeDestroy () { - if (this.player !== null && this.player.destroy) { - this.player.destroy(); - delete this.player; - } - - if (this.resize) { - window.removeEventListener('resize', this.onResize); - } - }, - mounted: function mounted () { - window.YTConfig = { - host: 'https://www.youtube.com/iframe_api' - }; - - var host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'; - - this.player = player(this.$el, { - host: host, - width: this.width, - height: this.height, - videoId: this.videoId, - playerVars: this.playerVars - }); - - this.player.on('ready', this.playerReady); - this.player.on('stateChange', this.playerStateChange); - this.player.on('error', this.playerError); - - if (this.resize) { - window.addEventListener('resize', this.onResize); - } - - if (this.fitParent) { - this.resizeProportionally(); - } - }, - render: function render (h) { - return h('div') - } -}; - -function plugin (Vue) { - Vue.prototype.$youtube = { - getIdFromUrl: getYoutubeId - }; - - Vue.component('youtube', Youtube); -} - -if (typeof window !== 'undefined' && window.Vue) { - window.Vue.use(plugin); -} - -var version = '1.4.0'; - -exports['default'] = plugin; -exports.Youtube = Youtube; -exports.getIdFromUrl = getYoutubeId; -exports.version = version; diff --git a/dist/vue-youtube.css b/dist/vue-youtube.css deleted file mode 100644 index e69de29..0000000 diff --git a/dist/vue-youtube.esm.js b/dist/vue-youtube.esm.js deleted file mode 100644 index f25f4c5..0000000 --- a/dist/vue-youtube.esm.js +++ /dev/null @@ -1,249 +0,0 @@ -/*! - * vue-youtube v1.4.0 - * (c) 2021 Antério Vieira - * Released under the MIT License. - */ - -var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; - - - - - -function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; -} - -var getYoutubeId = createCommonjsModule(function (module, exports) { -(function (root, factory) { - { - module.exports = factory(); - } -}(commonjsGlobal, function (exports) { - - return function (url, opts) { - if (opts == undefined) { - opts = {fuzzy: true}; - } - - if (/youtu\.?be/.test(url)) { - - // Look first for known patterns - var i; - var patterns = [ - /youtu\.be\/([^#\&\?]{11})/, // youtu.be/ - /\?v=([^#\&\?]{11})/, // ?v= - /\&v=([^#\&\?]{11})/, // &v= - /embed\/([^#\&\?]{11})/, // embed/ - /\/v\/([^#\&\?]{11})/ // /v/ - ]; - - // If any pattern matches, return the ID - for (i = 0; i < patterns.length; ++i) { - if (patterns[i].test(url)) { - return patterns[i].exec(url)[1]; - } - } - - if (opts.fuzzy) { - // If that fails, break it apart by certain characters and look - // for the 11 character key - var tokens = url.split(/[\/\&\?=#\.\s]/g); - for (i = 0; i < tokens.length; ++i) { - if (/^[^#\&\?]{11}$/.test(tokens[i])) { - return tokens[i]; - } - } - } - } - - return null; - }; - -})); -}); - -var player = require('youtube-player'); - -var UNSTARTED = -1; -var ENDED = 0; -var PLAYING = 1; -var PAUSED = 2; -var BUFFERING = 3; -var CUED = 5; - -var Youtube = { - name: 'Youtube', - props: { - videoId: String, - playerVars: { - type: Object, - default: function () { return ({}); } - }, - height: { - type: [Number, String], - default: 360 - }, - width: { - type: [Number, String], - default: 640 - }, - resize: { - type: Boolean, - default: false - }, - resizeDelay: { - type: Number, - default: 100 - }, - nocookie: { - type: Boolean, - default: false - }, - fitParent: { - type: Boolean, - default: false - } - }, - data: function data () { - return { - player: {}, - events: ( obj = {}, obj[UNSTARTED] = 'unstarted', obj[PLAYING] = 'playing', obj[PAUSED] = 'paused', obj[ENDED] = 'ended', obj[BUFFERING] = 'buffering', obj[CUED] = 'cued', obj ), - resizeTimeout: null - } - var obj; - }, - computed: { - aspectRatio: function aspectRatio () { - return this.width / this.height - } - }, - methods: { - playerReady: function playerReady (e) { - this.$emit('ready', e.target); - }, - playerStateChange: function playerStateChange (e) { - if (e.data !== null && e.data !== UNSTARTED) { - this.$emit(this.events[e.data], e.target); - } - }, - playerError: function playerError (e) { - this.$emit('error', e.target); - }, - updatePlayer: function updatePlayer (videoId) { - if (!videoId) { - this.player.stopVideo(); - return - } - - var params = { videoId: videoId }; - - if (typeof this.playerVars.start === 'number') { - params.startSeconds = this.playerVars.start; - } - - if (typeof this.playerVars.end === 'number') { - params.endSeconds = this.playerVars.end; - } - - if (this.playerVars.autoplay === 1) { - this.player.loadVideoById(params); - return - } - - this.player.cueVideoById(params); - }, - resizeProportionally: function resizeProportionally () { - var this$1 = this; - - this.player.getIframe().then(function (iframe) { - var width = this$1.fitParent - ? iframe.parentElement.offsetWidth - : iframe.offsetWidth; - var height = width / this$1.aspectRatio; - this$1.player.setSize(width, height); - }); - }, - onResize: function onResize () { - clearTimeout(this.resizeTimeout); - this.resizeTimeout = setTimeout( - this.resizeProportionally, - this.resizeDelay - ); - } - }, - watch: { - videoId: 'updatePlayer', - resize: function resize (val) { - if (val) { - window.addEventListener('resize', this.onResize); - this.resizeProportionally(); - } else { - window.removeEventListener('resize', this.onResize); - this.player.setSize(this.width, this.height); - } - }, - width: function width (val) { - this.player.setSize(val, this.height); - }, - height: function height (val) { - this.player.setSize(this.width, val); - } - }, - beforeDestroy: function beforeDestroy () { - if (this.player !== null && this.player.destroy) { - this.player.destroy(); - delete this.player; - } - - if (this.resize) { - window.removeEventListener('resize', this.onResize); - } - }, - mounted: function mounted () { - window.YTConfig = { - host: 'https://www.youtube.com/iframe_api' - }; - - var host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'; - - this.player = player(this.$el, { - host: host, - width: this.width, - height: this.height, - videoId: this.videoId, - playerVars: this.playerVars - }); - - this.player.on('ready', this.playerReady); - this.player.on('stateChange', this.playerStateChange); - this.player.on('error', this.playerError); - - if (this.resize) { - window.addEventListener('resize', this.onResize); - } - - if (this.fitParent) { - this.resizeProportionally(); - } - }, - render: function render (h) { - return h('div') - } -}; - -function plugin (Vue) { - Vue.prototype.$youtube = { - getIdFromUrl: getYoutubeId - }; - - Vue.component('youtube', Youtube); -} - -if (typeof window !== 'undefined' && window.Vue) { - window.Vue.use(plugin); -} - -var version = '1.4.0'; - -export { Youtube, getYoutubeId as getIdFromUrl, version };export default plugin; diff --git a/dist/vue-youtube.js b/dist/vue-youtube.js index ff9c322..950e1e0 100644 --- a/dist/vue-youtube.js +++ b/dist/vue-youtube.js @@ -1,90 +1,20 @@ -/*! - * vue-youtube v1.4.0 - * (c) 2021 Antério Vieira - * Released under the MIT License. - */ +import { h } from 'vue' +import player from 'youtube-player'; -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : - typeof define === 'function' && define.amd ? define(['exports'], factory) : - (factory((global.VueYoutube = global.VueYoutube || {}))); -}(this, (function (exports) { 'use strict'; +const UNSTARTED = -1 +const ENDED = 0 +const PLAYING = 1 +const PAUSED = 2 +const BUFFERING = 3 +const CUED = 5 -var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; - - - - - -function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; -} - -var getYoutubeId = createCommonjsModule(function (module, exports) { -(function (root, factory) { - { - module.exports = factory(); - } -}(commonjsGlobal, function (exports) { - - return function (url, opts) { - if (opts == undefined) { - opts = {fuzzy: true}; - } - - if (/youtu\.?be/.test(url)) { - - // Look first for known patterns - var i; - var patterns = [ - /youtu\.be\/([^#\&\?]{11})/, // youtu.be/ - /\?v=([^#\&\?]{11})/, // ?v= - /\&v=([^#\&\?]{11})/, // &v= - /embed\/([^#\&\?]{11})/, // embed/ - /\/v\/([^#\&\?]{11})/ // /v/ - ]; - - // If any pattern matches, return the ID - for (i = 0; i < patterns.length; ++i) { - if (patterns[i].test(url)) { - return patterns[i].exec(url)[1]; - } - } - - if (opts.fuzzy) { - // If that fails, break it apart by certain characters and look - // for the 11 character key - var tokens = url.split(/[\/\&\?=#\.\s]/g); - for (i = 0; i < tokens.length; ++i) { - if (/^[^#\&\?]{11}$/.test(tokens[i])) { - return tokens[i]; - } - } - } - } - - return null; - }; - -})); -}); - -var player = require('youtube-player'); - -var UNSTARTED = -1; -var ENDED = 0; -var PLAYING = 1; -var PAUSED = 2; -var BUFFERING = 3; -var CUED = 5; - -var Youtube = { +export default { name: 'Youtube', props: { videoId: String, playerVars: { type: Object, - default: function () { return ({}); } + default: () => ({}) }, height: { type: [Number, String], @@ -111,152 +41,133 @@ var Youtube = { default: false } }, - data: function data () { + data () { return { player: {}, - events: ( obj = {}, obj[UNSTARTED] = 'unstarted', obj[PLAYING] = 'playing', obj[PAUSED] = 'paused', obj[ENDED] = 'ended', obj[BUFFERING] = 'buffering', obj[CUED] = 'cued', obj ), + events: { + [UNSTARTED]: 'unstarted', + [PLAYING]: 'playing', + [PAUSED]: 'paused', + [ENDED]: 'ended', + [BUFFERING]: 'buffering', + [CUED]: 'cued' + }, resizeTimeout: null } - var obj; }, computed: { - aspectRatio: function aspectRatio () { + aspectRatio () { return this.width / this.height } }, methods: { - playerReady: function playerReady (e) { - this.$emit('ready', e.target); + playerReady (e) { + this.$emit('ready', e.target) }, - playerStateChange: function playerStateChange (e) { + playerStateChange (e) { if (e.data !== null && e.data !== UNSTARTED) { - this.$emit(this.events[e.data], e.target); + this.$emit(this.events[e.data], e.target) } }, - playerError: function playerError (e) { - this.$emit('error', e.target); + playerError (e) { + this.$emit('error', e.target) }, - updatePlayer: function updatePlayer (videoId) { + updatePlayer (videoId) { if (!videoId) { - this.player.stopVideo(); + this.player.stopVideo() return } - var params = { videoId: videoId }; + const params = { videoId: videoId } if (typeof this.playerVars.start === 'number') { - params.startSeconds = this.playerVars.start; + params.startSeconds = this.playerVars.start } if (typeof this.playerVars.end === 'number') { - params.endSeconds = this.playerVars.end; + params.endSeconds = this.playerVars.end } if (this.playerVars.autoplay === 1) { - this.player.loadVideoById(params); + this.player.loadVideoById(params) return } - this.player.cueVideoById(params); + this.player.cueVideoById(params) }, - resizeProportionally: function resizeProportionally () { - var this$1 = this; - - this.player.getIframe().then(function (iframe) { - var width = this$1.fitParent + resizeProportionally () { + this.player.getIframe().then(iframe => { + const width = this.fitParent ? iframe.parentElement.offsetWidth - : iframe.offsetWidth; - var height = width / this$1.aspectRatio; - this$1.player.setSize(width, height); - }); + : iframe.offsetWidth + const height = width / this.aspectRatio + this.player.setSize(width, height) + }) }, - onResize: function onResize () { - clearTimeout(this.resizeTimeout); + onResize () { + clearTimeout(this.resizeTimeout) this.resizeTimeout = setTimeout( this.resizeProportionally, this.resizeDelay - ); + ) } }, watch: { videoId: 'updatePlayer', - resize: function resize (val) { + resize (val) { if (val) { - window.addEventListener('resize', this.onResize); - this.resizeProportionally(); + window.addEventListener('resize', this.onResize) + this.resizeProportionally() } else { - window.removeEventListener('resize', this.onResize); - this.player.setSize(this.width, this.height); + window.removeEventListener('resize', this.onResize) + this.player.setSize(this.width, this.height) } }, - width: function width (val) { - this.player.setSize(val, this.height); + width (val) { + this.player.setSize(val, this.height) }, - height: function height (val) { - this.player.setSize(this.width, val); + height (val) { + this.player.setSize(this.width, val) } }, - beforeDestroy: function beforeDestroy () { + beforeUnmount () { if (this.player !== null && this.player.destroy) { - this.player.destroy(); - delete this.player; + this.player.destroy() + delete this.player } if (this.resize) { - window.removeEventListener('resize', this.onResize); + window.removeEventListener('resize', this.onResize) } }, - mounted: function mounted () { + mounted () { window.YTConfig = { host: 'https://www.youtube.com/iframe_api' - }; + } - var host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'; + const host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com' this.player = player(this.$el, { - host: host, + host, width: this.width, height: this.height, videoId: this.videoId, playerVars: this.playerVars - }); + }) - this.player.on('ready', this.playerReady); - this.player.on('stateChange', this.playerStateChange); - this.player.on('error', this.playerError); + this.player.on('ready', this.playerReady) + this.player.on('stateChange', this.playerStateChange) + this.player.on('error', this.playerError) if (this.resize) { - window.addEventListener('resize', this.onResize); + window.addEventListener('resize', this.onResize) } if (this.fitParent) { - this.resizeProportionally(); + this.resizeProportionally() } }, - render: function render (h) { + render() { return h('div') } -}; - -function plugin (Vue) { - Vue.prototype.$youtube = { - getIdFromUrl: getYoutubeId - }; - - Vue.component('youtube', Youtube); -} - -if (typeof window !== 'undefined' && window.Vue) { - window.Vue.use(plugin); } - -var version = '1.4.0'; - -exports['default'] = plugin; -exports.Youtube = Youtube; -exports.getIdFromUrl = getYoutubeId; -exports.version = version; - -Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/dist/vue-youtube.min.css b/dist/vue-youtube.min.css deleted file mode 100644 index e69de29..0000000 diff --git a/dist/vue-youtube.min.js b/dist/vue-youtube.min.js deleted file mode 100644 index 0759917..0000000 --- a/dist/vue-youtube.min.js +++ /dev/null @@ -1,7 +0,0 @@ -/*! - * vue-youtube v1.4.0 - * (c) 2021 Antério Vieira - * Released under the MIT License. - */ - -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e.VueYoutube=e.VueYoutube||{})}(this,function(e){"use strict";"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t,i=(function(e,t){e.exports=function(e,t){if(null==t&&(t={fuzzy:!0}),/youtu\.?be/.test(e)){var i,r=[/youtu\.be\/([^#\&\?]{11})/,/\?v=([^#\&\?]{11})/,/\&v=([^#\&\?]{11})/,/embed\/([^#\&\?]{11})/,/\/v\/([^#\&\?]{11})/];for(i=0;i Date: Mon, 19 Jul 2021 15:32:35 +0300 Subject: [PATCH 2/2] chore: linter --- src/vue-youtube.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vue-youtube.js b/src/vue-youtube.js index 950e1e0..482e412 100644 --- a/src/vue-youtube.js +++ b/src/vue-youtube.js @@ -1,5 +1,5 @@ import { h } from 'vue' -import player from 'youtube-player'; +import player from 'youtube-player' const UNSTARTED = -1 const ENDED = 0 @@ -167,7 +167,7 @@ export default { this.resizeProportionally() } }, - render() { + render () { return h('div') } }