version 2.1.0

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:https://youtube.com" + uriComponent).replace(youtubeRegexp, "$1");
+ id = ("http:https://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": {