version 2.1.0

Author: kaorun343

lib/vue-youtube-embed.js

@@ -1,5 +1,5 @@
 /*!
-  * Vue YouTube Embed version 2.0.3
+  * Vue YouTube Embed version 2.1.0
   * under MIT License copyright 2017 kaorun343
   */
 (function (global, factory) {
@@ -10,7 +10,7 @@
 
 // fork from https://github.com/brandly/angular-youtube-embed
 if (!String.prototype.includes) {
-  String.prototype.includes = function() {
+  String.prototype.includes = function () {
     'use strict';
     return String.prototype.indexOf.apply(this, arguments) !== -1
   };
@@ -24,20 +24,20 @@ var timeRegexp = /t=(\d+)[ms]?(\d+)?s?/;
  * @param  {string} url url
  * @return {string}     id
  */
-function getIdFromURL(url) {
-  var id = url.replace(youtubeRegexp, "$1");
+function getIdFromURL (url) {
+  var id = url.replace(youtubeRegexp, '$1');
 
-  if ( id.includes(";") ) {
-    var pieces = id.split(";");
+  if (id.includes(';')) {
+    var pieces = id.split(';');
 
-    if ( pieces[1].includes("%") ) {
+    if (pieces[1].includes('%')) {
       var uriComponent = decodeURIComponent(pieces[1]);
-      id = ("http://youtube.com" + uriComponent).replace(youtubeRegexp, "$1");
+      id = ("http://youtube.com" + uriComponent).replace(youtubeRegexp, '$1');
     } else {
       id = pieces[0];
     }
-  } else if ( id.includes("#") ) {
-    id = id.split("#")[0];
+  } else if (id.includes('#')) {
+    id = id.split('#')[0];
   }
 
   return id
@@ -48,23 +48,23 @@ function getIdFromURL(url) {
  * @param  {string} url url
  * @return {number}     time
  */
-function getTimeFromURL(url) {
-  if ( url === void 0 ) url = "";
+function getTimeFromURL (url) {
+  if ( url === void 0 ) url = '';
 
   var times = url.match(timeRegexp);
 
-  if ( !times ) {
+  if (!times) {
     return 0
   }
 
   var full = times[0];
   var minutes = times[1];
   var seconds = times[2];
 
-  if ( typeof seconds !== "undefined" ) {
+  if (typeof seconds !== 'undefined') {
     seconds = parseInt(seconds, 10);
     minutes = parseInt(minutes, 10);
-  } else if ( full.includes("m") ) {
+  } else if (full.includes('m')) {
     minutes = parseInt(minutes, 10);
     seconds = 0;
   } else {
@@ -79,7 +79,7 @@ var container = {
   scripts: [],
   events: {},
 
-  run: function run() {
+  run: function run () {
     var this$1 = this;
 
     this.scripts.forEach(function (callback) {
@@ -88,7 +88,7 @@ var container = {
     this.scripts = [];
   },
 
-  register: function register(callback) {
+  register: function register (callback) {
     var this$1 = this;
 
     if (this.YT) {
@@ -104,7 +104,27 @@ var container = {
 var pid = 0;
 
 var YouTubePlayer = {
-  props: ['playerHeight', 'playerWidth', 'playerVars', 'videoId'],
+  props: {
+    playerHeight: {
+      type: [String, Number],
+      default: '390'
+    },
+    playerWidth: {
+      type: [String, Number],
+      default: '640'
+    },
+    playerVars: {
+      type: Object,
+      default: function () { return ({ autoplay: 0, time: 0 }); }
+    },
+    videoId: {
+      type: String
+    },
+    mute: {
+      type: Boolean,
+      default: false
+    }
+  },
   render: function render (h) {
     return h('div', [
       h('div', { attrs: { id: this.elementId }})
@@ -114,23 +134,29 @@ var YouTubePlayer = {
   watch: {
     playerWidth: 'setSize',
     playerHeight: 'setSize',
-    videoId: 'update'
+    videoId: 'update',
+    mute: 'setMute'
   },
-  data: function data() {
+  data: function data () {
     pid += 1;
     return {
       elementId: ("youtube-player-" + pid),
       player: {}
     }
   },
   methods: {
-    setSize: function setSize() {
-      this.player.setSize(this.playerWidth || '640', this.playerHeight || '390');
+    setSize: function setSize () {
+      this.player.setSize(this.playerWidth, this.playerHeight);
     },
-    update: function update(videoId) {
-      var ref = this;
-      var playerVars = ref.playerVars; if ( playerVars === void 0 ) playerVars = {autoplay: 0};
-      var name = (playerVars.autoplay ? 'load' : 'cue') + "VideoById";
+    setMute: function setMute (value) {
+      if (value) {
+        this.player.mute();
+      } else {
+        this.player.unMute();
+      }
+    },
+    update: function update (videoId) {
+      var name = (this.playerVars.autoplay ? 'load' : 'cue') + "VideoById";
       if (this.player.hasOwnProperty(name)) {
         this.player[name](videoId);
       } else {
@@ -140,23 +166,24 @@ var YouTubePlayer = {
       }
     }
   },
-  mounted: function mounted() {
+  mounted: function mounted () {
     var this$1 = this;
 
     container.register(function (YouTube) {
       var ref = this$1;
-      var height = ref.playerHeight; if ( height === void 0 ) height = '390';
-      var width = ref.playerWidth; if ( width === void 0 ) width = '640';
-      var playerVars = ref.playerVars; if ( playerVars === void 0 ) playerVars = {autoplay: 0, start: 0};
+      var playerHeight = ref.playerHeight;
+      var playerWidth = ref.playerWidth;
+      var playerVars = ref.playerVars;
       var videoId = ref.videoId;
 
       this$1.player = new YouTube.Player(this$1.elementId, {
-        height: height,
-        width: width,
+        height: playerHeight,
+        width: playerWidth,
         playerVars: playerVars,
         videoId: videoId,
         events: {
           onReady: function (event) {
+            this$1.setMute(this$1.mute);
             this$1.$emit('ready', event.target);
           },
           onStateChange: function (event) {
@@ -171,26 +198,26 @@ var YouTubePlayer = {
       });
     });
   },
-  beforeDestroy: function beforeDestroy() {
+  beforeDestroy: function beforeDestroy () {
     if (this.player !== null) {
       this.player.destroy();
     }
     delete this.player;
   }
 };
 
-function install(Vue) {
+function install (Vue) {
   container.Vue = Vue;
   YouTubePlayer.ready = YouTubePlayer.mounted;
   Vue.component('youtube', YouTubePlayer);
-  Vue.prototype.$youtube = {getIdFromURL: getIdFromURL, getTimeFromURL: getTimeFromURL};
+  Vue.prototype.$youtube = { getIdFromURL: getIdFromURL, getTimeFromURL: getTimeFromURL };
 
   var tag = document.createElement('script');
-  tag.src = "https://www.youtube.com/player_api";
+  tag.src = 'https://www.youtube.com/player_api';
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-  window.onYouTubeIframeAPIReady = function() {
+  window.onYouTubeIframeAPIReady = function () {
     container.YT = YT;
     var PlayerState = YT.PlayerState;
 
@@ -206,15 +233,10 @@ function install(Vue) {
   };
 }
 
-var index = {
-   getIdFromURL: getIdFromURL, getTimeFromURL: getTimeFromURL, YouTubePlayer: YouTubePlayer, install: install
-};
-
+exports.YouTubePlayer = YouTubePlayer;
 exports.getIdFromURL = getIdFromURL;
 exports.getTimeFromURL = getTimeFromURL;
-exports.YouTubePlayer = YouTubePlayer;
-exports.install = install;
-exports['default'] = index;
+exports['default'] = install;
 
 Object.defineProperty(exports, '__esModule', { value: true });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-youtube-embed",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Vue.js and YouTube",
   "main": "lib/vue-youtube-embed.js",
   "scripts": {