version 0.4.0

.gitignore

@@ -1,3 +1,2 @@
 npm-debug.log
 node_modules
-/lib

README.md

@@ -1,12 +1,21 @@
 # Vue YouTube Embed
 This is a component for Vue.js to utilize YouTube iframe API easily.
 This is based on [Angular YouTube Embed](http://brandly.github.io/angular-youtube-embed/)
-As you can see, in this repository doesn't include compiled file, but in the npm package of this, it is included.
 
 ## License
 MIT License
 
 ## install
+
+```html
+<script src="vue-youtube-embed.js"></script>
+<script>
+Vue.use(VueYouTubeEmbed)
+</script>
+```
+
+or
+
 ```bash
 npm install --save vue-youtube-embed
 ```
@@ -42,15 +51,12 @@ These functions are the same as the original one.
 * `getTimeFromURL`
 
 ```js
-'use strict'
-import VueYouTubeEmbed from 'vue-youtube-embed'
 let videoId = VueYouTubeEmbed.getIdFromURL(url)
 let startTime = VueYouTubeEmbed.getTimeFromURL(url)
 ```
 
 or
 ```js
-'use strict'
 export default {
   methods: {
     method(url) {
@@ -91,7 +97,7 @@ The first argument is an instance of `YT.Player`.
 ```js
 'use strict'
 import Vue from 'vue'
-import VueYouTubeEmbed, { events } from 'vue-youtube-embed'
+import VueYouTubeEmbed from 'vue-youtube-embed'
 
 Vue.use(VueYouTubeEmbed)
 

lib/vue-youtube-embed.js

@@ -0,0 +1,267 @@
+/*! Vue YouTube Embed version 0.4.0 under MIT License copyright 2016 kaorun343 */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define([], factory);
+	else if(typeof exports === 'object')
+		exports["VueYouTubeEmbed"] = factory();
+	else
+		root["VueYouTubeEmbed"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+exports.getIdFromURL = getIdFromURL;
+exports.getTimeFromURL = getTimeFromURL;
+exports.install = install;
+if (!String.prototype.includes) {
+  String.prototype.includes = function () {
+    'use strict';
+
+    return String.prototype.indexOf.apply(this, arguments) !== -1;
+  };
+}
+
+var youtubeRegexp = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig;
+var timeRegexp = /t=(\d+)[ms]?(\d+)?s?/;
+
+/**
+ * get id from url
+ * @param  {string} url url
+ * @return {string}     id
+ */
+function getIdFromURL(url) {
+  var id = url.replace(youtubeRegexp, "$1");
+
+  if (id.includes(";")) {
+    var pieces = id.split(";");
+
+    if (pieces[1].includes("%")) {
+      var uriComponent = decodeURIComponent(pieces[1]);
+      id = ('http://youtube.com' + uriComponent).replace(youtubeRegexp, "$1");
+    } else {
+      id = pieces[0];
+    }
+  } else if (id.includes("#")) {
+    id = id.split("#")[0];
+  }
+
+  return id;
+}
+
+/**
+ * get time from url
+ * @param  {string} url url
+ * @return {number}     time
+ */
+function getTimeFromURL() {
+  var url = arguments.length <= 0 || arguments[0] === undefined ? "" : arguments[0];
+
+  var times = url.match(timeRegexp);
+
+  if (!times) {
+    return 0;
+  }
+
+  var _times = _slicedToArray(times, 3);
+
+  var full = _times[0];
+  var minutes = _times[1];
+  var seconds = _times[2];
+
+
+  if (typeof seconds !== "undefined") {
+    seconds = parseInt(seconds, 10);
+    minutes = parseInt(minutes, 10);
+  } else if (full.includes("m")) {
+    minutes = parseInt(minutes, 10);
+    seconds = 0;
+  } else {
+    seconds = parseInt(minutes, 10);
+    minutes = 0;
+  }
+
+  return seconds + minutes * 60;
+}
+
+var container = exports.container = {
+  scripts: [],
+
+  run: function run() {
+    var _this = this;
+
+    this.scripts.forEach(function (callback) {
+      callback(_this.YT);
+    });
+    this.scripts = [];
+  },
+  register: function register(callback) {
+    var _this2 = this;
+
+    if (this.YT) {
+      this.Vue.nextTick(function () {
+        callback(_this2.YT);
+      });
+    } else {
+      this.scripts.push(callback);
+    }
+  }
+};
+
+var events = {
+  0: 'ended',
+  1: 'playing',
+  2: 'paused',
+  3: 'buffering',
+  5: 'queued'
+};
+
+var pid = 0;
+
+var YouTubePlayer = exports.YouTubePlayer = {
+  props: ['playerHeight', 'playerWidth', 'playerVars', 'videoId'],
+  template: '<div><div :id="elementId"></div></div>',
+  watch: {
+    playerWidth: 'setSize',
+    playerHeight: 'setSize',
+    videoId: 'update'
+  },
+  data: function data() {
+    pid += 1;
+    return {
+      elementId: 'youtube-player-' + pid
+    };
+  },
+
+  methods: {
+    setSize: function setSize() {
+      this.player.setSize(this.playerWidth || '640', this.playerHeight || '390');
+    },
+    update: function update(videoId) {
+      var _playerVars = this.playerVars;
+      var playerVars = _playerVars === undefined ? { autoplay: 0 } : _playerVars;
+
+      var name = (playerVars.autoplay ? 'load' : 'cue') + 'VideoById';
+      this.player[name](videoId);
+    }
+  },
+  created: function created() {
+    var _this3 = this;
+
+    container.register(function (YouTube) {
+      var _playerHeight = _this3.playerHeight;
+      var height = _playerHeight === undefined ? '390' : _playerHeight;
+      var _playerWidth = _this3.playerWidth;
+      var width = _playerWidth === undefined ? '640' : _playerWidth;
+      var _playerVars2 = _this3.playerVars;
+      var playerVars = _playerVars2 === undefined ? { autoplay: 0, start: 0 } : _playerVars2;
+      var videoId = _this3.videoId;
+
+
+      _this3.player = new YouTube.Player(_this3.elementId, {
+        height: height,
+        width: width,
+        playerVars: playerVars,
+        videoId: videoId,
+        events: {
+          onReady: function onReady(event) {
+            _this3.$emit('ready', event.target);
+          },
+          onStateChange: function onStateChange(event) {
+            if (event.data !== -1) {
+              _this3.$emit(events[event.data], event.target);
+            }
+          },
+          onError: function onError(event) {
+            _this3.$emit('error', event.target);
+          }
+        }
+      });
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    if (this.player !== null) {
+      this.player.destroy();
+    }
+    delete this.player;
+  }
+};
+
+function install(Vue) {
+  container.Vue = Vue;
+  Vue.component('youtube', YouTubePlayer);
+  Vue.prototype.$youtube = { getIdFromURL: getIdFromURL, getTimeFromURL: getTimeFromURL };
+
+  var tag = document.createElement('script');
+  tag.src = "https://www.youtube.com/player_api";
+  var firstScriptTag = document.getElementsByTagName('script')[0];
+  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+  window.onYouTubeIframeAPIReady = function () {
+    container.YT = YT;
+    Vue.nextTick(function () {
+      container.run();
+    });
+  };
+}
+
+exports.default = {
+  getIdFromURL: getIdFromURL, getTimeFromURL: getTimeFromURL, YouTubePlayer: YouTubePlayer, install: install
+};
+
+/***/ }
+/******/ ])
+});
+;

package.json

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