vue-youtube - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

dist/vue-youtube.common.js

 /*!
- * vue-youtube v1.2.5
+ * vue-youtube v1.3.1
  * (c) 2018 Antério Vieira
@@ -94,2 +94,14 @@ * Released under the MIT License.
       default: 640
+    },
+    resize: {
+      type: Boolean,
+      default: false
+    },
+    resizeDelay: {
+      type: Number,
+      default: 100
+    },
+    fitParent: {
+      type: Boolean,
+      default: true
     }
@@ -100,6 +112,12 @@ },
       player: {},
-      events: ( obj = {}, obj[UNSTARTED] = 'unstarted', obj[PLAYING] = 'playing', obj[PAUSED] = 'paused', obj[ENDED] = 'ended', obj[BUFFERING] = 'buffering', obj[CUED] = 'cued', obj )
+      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: {
@@ -129,6 +147,39 @@ playerReady: function playerReady (e) {
       this.player.cueVideoById({ videoId: videoId });
+    },
+    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'
+    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);
+    }
   },
@@ -156,2 +207,10 @@ beforeDestroy: function beforeDestroy () {
     this.player.on('error', this.playerError);
+
+    if (this.resize) {
+      window.addEventListener('resize', this.onResize);
+    }
+
+    if (this.fitParent) {
+      this.resizeProportionally();
+    }
   },
@@ -175,3 +234,3 @@ render: function render (h) {
 
-var version = '1.2.5';
+var version = '1.3.1';
 
@@ -178,0 +237,0 @@ exports['default'] = plugin;

dist/vue-youtube.esm.js

 /*!
- * vue-youtube v1.2.5
+ * vue-youtube v1.3.1
  * (c) 2018 Antério Vieira
@@ -90,2 +90,14 @@ * Released under the MIT License.
       default: 640
+    },
+    resize: {
+      type: Boolean,
+      default: false
+    },
+    resizeDelay: {
+      type: Number,
+      default: 100
+    },
+    fitParent: {
+      type: Boolean,
+      default: true
     }
@@ -96,6 +108,12 @@ },
       player: {},
-      events: ( obj = {}, obj[UNSTARTED] = 'unstarted', obj[PLAYING] = 'playing', obj[PAUSED] = 'paused', obj[ENDED] = 'ended', obj[BUFFERING] = 'buffering', obj[CUED] = 'cued', obj )
+      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: {
@@ -125,6 +143,39 @@ playerReady: function playerReady (e) {
       this.player.cueVideoById({ videoId: videoId });
+    },
+    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'
+    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);
+    }
   },
@@ -152,2 +203,10 @@ beforeDestroy: function beforeDestroy () {
     this.player.on('error', this.playerError);
+
+    if (this.resize) {
+      window.addEventListener('resize', this.onResize);
+    }
+
+    if (this.fitParent) {
+      this.resizeProportionally();
+    }
   },
@@ -171,4 +230,4 @@ render: function render (h) {
 
-var version = '1.2.5';
+var version = '1.3.1';
 
 export { Youtube, version };export default plugin;

dist/vue-youtube.js

 /*!
- * vue-youtube v1.2.5
+ * vue-youtube v1.3.1
  * (c) 2018 Antério Vieira
@@ -96,2 +96,14 @@ * Released under the MIT License.
       default: 640
+    },
+    resize: {
+      type: Boolean,
+      default: false
+    },
+    resizeDelay: {
+      type: Number,
+      default: 100
+    },
+    fitParent: {
+      type: Boolean,
+      default: true
     }
@@ -102,6 +114,12 @@ },
       player: {},
-      events: ( obj = {}, obj[UNSTARTED] = 'unstarted', obj[PLAYING] = 'playing', obj[PAUSED] = 'paused', obj[ENDED] = 'ended', obj[BUFFERING] = 'buffering', obj[CUED] = 'cued', obj )
+      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: {
@@ -131,6 +149,39 @@ playerReady: function playerReady (e) {
       this.player.cueVideoById({ videoId: videoId });
+    },
+    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'
+    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);
+    }
   },
@@ -158,2 +209,10 @@ beforeDestroy: function beforeDestroy () {
     this.player.on('error', this.playerError);
+
+    if (this.resize) {
+      window.addEventListener('resize', this.onResize);
+    }
+
+    if (this.fitParent) {
+      this.resizeProportionally();
+    }
   },
@@ -177,3 +236,3 @@ render: function render (h) {
 
-var version = '1.2.5';
+var version = '1.3.1';
 
@@ -180,0 +239,0 @@ exports['default'] = plugin;

dist/vue-youtube.min.js

 /*!
- * vue-youtube v1.2.5
+ * vue-youtube v1.3.1
  * (c) 2018 Antério Vieira
@@ -7,2 +7,2 @@ * 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";function t(e){e.prototype.$youtube={getIdFromUrl:r},e.component("youtube",o)}"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var r=function(e,t){return t={exports:{}},e(t,t.exports),t.exports}(function(e,t){!function(t,r){e.exports=r()}(0,function(e){return function(e,t){if(void 0==t&&(t={fuzzy:!0}),/youtu\.?be/.test(e)){var r,i=[/youtu\.be\/([^#\&\?]{11})/,/\?v=([^#\&\?]{11})/,/\&v=([^#\&\?]{11})/,/embed\/([^#\&\?]{11})/,/\/v\/([^#\&\?]{11})/];for(r=0;r<i.length;++r)if(i[r].test(e))return i[r].exec(e)[1];if(t.fuzzy){var o=e.split(/[\/\&\?=#\.\s]/g);for(r=0;r<o.length;++r)if(/^[^#\&\?]{11}$/.test(o[r]))return o[r]}}return null}})}),i=require("youtube-player"),o={name:"Youtube",props:{videoId:String,playerVars:{type:Object,default:function(){return{}}},height:{type:[Number,String],default:360},width:{type:[Number,String],default:640}},data:function(){return{player:{},events:(e={},e[-1]="unstarted",e[1]="playing",e[2]="paused",e[0]="ended",e[3]="buffering",e[5]="cued",e)};var e},methods:{playerReady:function(e){this.$emit("ready",e.target)},playerStateChange:function(e){null!==e.data&&-1!==e.data&&this.$emit(this.events[e.data],e.target)},playerError:function(e){this.$emit("error",e.target)},updatePlayer:function(e){e?1!==this.playerVars.autoplay?this.player.cueVideoById({videoId:e}):this.player.loadVideoById({videoId:e}):this.player.stopVideo()}},watch:{videoId:"updatePlayer"},beforeDestroy:function(){null!==this.player&&this.player.destroy&&(this.player.destroy(),delete this.player)},mounted:function(){window.YTConfig={host:"https://www.youtube.com"},this.player=i(this.$el,{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)},render:function(e){return e("div")}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(t);e.default=t,e.Youtube=o,e.version="1.2.5",Object.defineProperty(e,"__esModule",{value:!0})});
+!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";function t(e){e.prototype.$youtube={getIdFromUrl:i},e.component("youtube",o)}"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var i=function(e,t){return t={exports:{}},e(t,t.exports),t.exports}(function(e,t){!function(t,i){e.exports=i()}(0,function(e){return function(e,t){if(void 0==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<r.length;++i)if(r[i].test(e))return r[i].exec(e)[1];if(t.fuzzy){var o=e.split(/[\/\&\?=#\.\s]/g);for(i=0;i<o.length;++i)if(/^[^#\&\?]{11}$/.test(o[i]))return o[i]}}return null}})}),r=require("youtube-player"),o={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:!1},resizeDelay:{type:Number,default:100},fitParent:{type:Boolean,default:!0}},data:function(){return{player:{},events:(e={},e[-1]="unstarted",e[1]="playing",e[2]="paused",e[0]="ended",e[3]="buffering",e[5]="cued",e),resizeTimeout:null};var e},computed:{aspectRatio:function(){return this.width/this.height}},methods:{playerReady:function(e){this.$emit("ready",e.target)},playerStateChange:function(e){null!==e.data&&-1!==e.data&&this.$emit(this.events[e.data],e.target)},playerError:function(e){this.$emit("error",e.target)},updatePlayer:function(e){e?1!==this.playerVars.autoplay?this.player.cueVideoById({videoId:e}):this.player.loadVideoById({videoId:e}):this.player.stopVideo()},resizeProportionally:function(){var e=this;this.player.getIframe().then(function(t){var i=e.fitParent?t.parentElement.offsetWidth:t.offsetWidth,r=i/e.aspectRatio;e.player.setSize(i,r)})},onResize:function(){clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(this.resizeProportionally,this.resizeDelay)}},watch:{videoId:"updatePlayer",resize:function(e){e?(window.addEventListener("resize",this.onResize),this.resizeProportionally()):(window.removeEventListener("resize",this.onResize),this.player.setSize(this.width,this.height))},width:function(e){this.player.setSize(e,this.height)},height:function(e){this.player.setSize(this.width,e)}},beforeDestroy:function(){null!==this.player&&this.player.destroy&&(this.player.destroy(),delete this.player)},mounted:function(){window.YTConfig={host:"https://www.youtube.com"},this.player=r(this.$el,{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.resize&&window.addEventListener("resize",this.onResize),this.fitParent&&this.resizeProportionally()},render:function(e){return e("div")}};"undefined"!=typeof window&&window.Vue&&window.Vue.use(t);e.default=t,e.Youtube=o,e.version="1.3.1",Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "vue-youtube",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "YouTube IFrame Player API wrapper",
@@ -5,0 +5,0 @@ "author": "Antério Vieira",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34989

increased by18.39%

Lines of code

775

increased by27.68%

No dependency changes