update ESLint config and fix code

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+ "extends": ["vue"],
+ "plugins": ["html", "vue"],
+ "parserOptions": {
+ "ecmaVersion": 2017
+ },
+ "env": {
+ "mocha": true
+ },
+ "globals": {
+ "sinon": true,
+ "YT": true
+ },
+ "rules": {
+ "no-extend-native": [
+ "error", { "exceptions": ["String"] }
+ ]
+ }
+}

example/app.js

@@ -1,4 +1,5 @@
 'use strict'
+/*global Vue VueYouTubeEmbed:true*/
 Vue.use(VueYouTubeEmbed)
 
 window.app = new Vue({
@@ -11,25 +12,25 @@ window.app = new Vue({
  height: '390'
  },
  methods: {
- pause: function() {
+ pause: function () {
  this.player.pauseVideo()
  },
- next: function() {
+ next: function () {
  this.videoId = this.nextId
  this.nextId = ''
  },
- add: function() {
- this.videos.push({videoId: this.nextId})
+ add: function () {
+ this.videos.push({ videoId: this.nextId })
  this.nextId = ''
  },
- remove: function() {
+ remove: function () {
  this.videos.pop()
  }
  },
  components: {
  VideoList: {
  props: ['video'],
- data: function() {
+ data: function () {
  return {
  log: []
  }
@@ -49,16 +50,15 @@ window.app = new Vue({
  @qued="qued">
  </youtube>
  <ol><li v-for="item in log">type: {{item.type}}</li></ol>
- </div>`
- ,
- methods: (function() {
+ </div>`,
+ methods: (function () {
  var events = ['ready', 'ended', 'playing', 'paused', 'buffering', 'queued']
  var methods = {}
 
- events.forEach(function(event) {
- methods[event] = function(player) {
- console.log({type: event, player: player})
- this.log.push({type: event})
+ events.forEach(function (event) {
+ methods[event] = function (player) {
+ console.log({ type: event, player: player })
+ this.log.push({ type: event })
  }
  })
 

package.json

@@ -4,7 +4,7 @@
  "description": "Vue.js and YouTube",
  "main": "lib/vue-youtube-embed.js",
  "scripts": {
- "lint": "eslint src/index.js",
+ "lint": "eslint src/*.js test/*.js example/*.js play/*.vue play/*.js --fix",
  "test": "karma start",
  "build": "rollup -c rollup.config.js",
  "prepublish": "npm run build",

play/Events.vue

@@ -17,7 +17,7 @@ import container from './container.vue'
 export default {
  data () {
  return {
- title: "Events"
+ title: 'Events'
  }
  },
  methods: {

play/Size.vue

@@ -20,7 +20,7 @@ import container from './container.vue'
 export default {
  data () {
  return {
- title: "Height and Width",
+ title: 'Height and Width',
  height: 390,
  width: 640
  }

src/container.js

@@ -4,14 +4,14 @@ export default {
  scripts: [],
  events: {},
 
- run() {
+ run () {
  this.scripts.forEach((callback) => {
  callback(this.YT)
  })
  this.scripts = []
  },
 
- register(callback) {
+ register (callback) {
  if (this.YT) {
  this.Vue.nextTick(() => {
  callback(this.YT)

src/index.js

@@ -20,20 +20,27 @@ export const YouTubePlayer = {
  playerHeight: 'setSize',
  videoId: 'update'
  },
- data() {
+ data () {
  pid += 1
  return {
  elementId: `youtube-player-${pid}`,
  player: {}
  }
  },
  methods: {
- setSize() {
+ setSize () {
  this.player.setSize(this.playerWidth || '640', this.playerHeight || '390')
  },
- update(videoId) {
+ setMute () {
+ if (this.mute && this.player.isMuted()) {
+ this.player.mute()
+ } else {
+ this.player.unMute()
+ }
+ },
+ update (videoId) {
  const {
- playerVars = {autoplay: 0}
+ playerVars = { autoplay: 0 }
  } = this
  const name = `${playerVars.autoplay ? 'load' : 'cue'}VideoById`
  if (this.player.hasOwnProperty(name)) {
@@ -45,12 +52,12 @@ export const YouTubePlayer = {
  }
  }
  },
- mounted() {
+ mounted () {
  container.register((YouTube) => {
  const {
- playerHeight : height = '390',
- playerWidth : width = '640',
- playerVars = {autoplay: 0, start: 0},
+ playerHeight: height = '390',
+ playerWidth: width = '640',
+ playerVars = { autoplay: 0, start: 0 },
  videoId
  } = this
 
@@ -73,28 +80,30 @@ export const YouTubePlayer = {
  }
  }
  })
+
+ this.setMute()
  })
  },
- beforeDestroy() {
+ beforeDestroy () {
  if (this.player !== null) {
  this.player.destroy()
  }
  delete this.player
  }
 }
 
-export function install(Vue) {
+export function install (Vue) {
  container.Vue = Vue
  YouTubePlayer.ready = YouTubePlayer.mounted
  Vue.component('youtube', YouTubePlayer)
- Vue.prototype.$youtube = {getIdFromURL, getTimeFromURL}
+ Vue.prototype.$youtube = { getIdFromURL, getTimeFromURL }
 
  const tag = document.createElement('script')
- tag.src = "https://www.youtube.com/player_api"
+ tag.src = 'https://www.youtube.com/player_api'
  const firstScriptTag = document.getElementsByTagName('script')[0]
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
 
- window.onYouTubeIframeAPIReady = function() {
+ window.onYouTubeIframeAPIReady = function () {
  container.YT = YT
  const { PlayerState } = YT
 
@@ -111,5 +120,5 @@ export function install(Vue) {
 }
 
 export default {
-  getIdFromURL, getTimeFromURL, YouTubePlayer, install
+ getIdFromURL, getTimeFromURL, YouTubePlayer, install
 }

src/utils.js

@@ -2,7 +2,7 @@
 'use strict'
 
 if (!String.prototype.includes) {
- String.prototype.includes = function() {
+ String.prototype.includes = function () {
  'use strict'
  return String.prototype.indexOf.apply(this, arguments) !== -1
  }
@@ -16,20 +16,20 @@ const timeRegexp = /t=(\d+)[ms]?(\d+)?s?/
  * @param {string} url url
  * @return {string} id
  */
-export function getIdFromURL(url) {
- let id = url.replace(youtubeRegexp, "$1")
+export function getIdFromURL (url) {
+ let id = url.replace(youtubeRegexp, '$1')
 
- if ( id.includes(";") ) {
- const pieces = id.split(";")
+ if (id.includes(';')) {
+ const pieces = id.split(';')
 
- if ( pieces[1].includes("%") ) {
+ if (pieces[1].includes('%')) {
  const 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
@@ -40,19 +40,20 @@ export function getIdFromURL(url) {
  * @param {string} url url
  * @return {number} time
  */
-export function getTimeFromURL(url = "") {
+export function getTimeFromURL (url = '') {
  const times = url.match(timeRegexp)
 
- if ( !times ) {
+ if (!times) {
  return 0
  }
 
- let [full, minutes, seconds] = times
+ const [full] = times
+ let [, minutes, seconds] = times
 
- 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 {

test/index.spec.js

@@ -90,10 +90,10 @@ describe('container', () => {
  context('when YouTube is ready', () => {
  before(() => {
  container.YT = {
- Player() {}
+ Player () {}
  }
  container.Vue = {
- nextTick(callback) {
+ nextTick (callback) {
  callback()
  }
  }
@@ -119,7 +119,6 @@ describe('container', () => {
  })
 
  describe('#register', () => {
-
  it('should call callback', () => {
  sinon.spy(container.Vue, 'nextTick')
  const callbackSpy = sinon.spy()
@@ -140,23 +139,22 @@ describe('container', () => {
 describe('YouTubePlayer', () => {
  before(() => {
  class Player {
- constructor(el, options) {
+ constructor (el, options) {
  this.el = el
  this.options = options
  }
- cueVideoById() {}
- loadVideoById() {}
- destroy() {}
+ cueVideoById () {}
+ loadVideoById () {}
+ destroy () {}
  }
  container.YT = {
  Player
  }
  container.Vue = {
- nextTick(callback) {
+ nextTick (callback) {
  callback()
  }
  }
-
  })
 
  describe('#ready', () => {
@@ -177,7 +175,7 @@ describe('YouTubePlayer', () => {
  }
  component.mounted()
 
- const {options} = component.player
+ const { options } = component.player
  assert.equal(options.videoId, 'videoId')
  assert.equal(options.width, '640')
  assert.equal(options.height, '390')
@@ -190,7 +188,7 @@ describe('YouTubePlayer', () => {
  const playerWidth = '1280'
  const playerHeight = '750'
  const playerVars = {
- start : 30,
+ start: 30,
  autoplay: 1
  }
  const component = {
@@ -202,7 +200,7 @@ describe('YouTubePlayer', () => {
  }
  component.mounted()
 
- const {options} = component.player
+ const { options } = component.player
  assert.equal(options.videoId, videoId)
  assert.equal(options.width, playerWidth)
  assert.equal(options.height, playerHeight)
@@ -212,7 +210,6 @@ describe('YouTubePlayer', () => {
  })
 
  describe('#update', () => {
-
  context('default', () => {
  it('should call YT.Player.prototype.cueVideoById()', () => {
  const component = {
@@ -288,7 +285,7 @@ describe('install', () => {
  })
 
  it('should add functions to Vue.prototype', () => {
- const {$youtube} = Vue.prototype
+ const { $youtube } = Vue.prototype
  assert(typeof $youtube === 'object')
  assert.equal($youtube.getIdFromURL, getIdFromURL)
  assert.equal($youtube.getTimeFromURL, getTimeFromURL)