add vue-play

.gitignore

@@ -1,2 +1,3 @@
 npm-debug.log
 node_modules
+dist-play

package.json

@@ -7,7 +7,9 @@
  "lint": "eslint src/index.js",
  "test": "karma start",
  "build": "webpack",
- "prepublish": "npm run build"
+ "prepublish": "npm run build",
+ "play": "vue-play start",
+ "play:build": "vue-play build"
  },
  "directories": {
  "test": "test"
@@ -42,8 +44,10 @@
  "mocha": "^2.4.5",
  "power-assert": "^1.2.0",
  "sinon": "^1.17.3",
- "vue": "^2.1.4",
- "webpack": "^1.12.14"
+ "vue": "^2.1.8",
+ "vue-play": "^2.2.0",
+ "vue-play-cli": "^1.0.4",
+ "webpack": "^1.14.0"
  },
  "dependencies": {},
  "repository": {

play/Events.vue

@@ -0,0 +1,39 @@
+<template lang="html">
+ <container :title="title">
+ <youtube video-id="M7lc1UVf-VE"
+ @ready="ready"
+ @ended="ended"
+ @playing="playing"
+ @paused="paused"
+ @buffering="buffering"
+ @qued="qued"
+ ></youtube>
+ </container>
+</template>
+
+<script>
+import container from './container.vue'
+
+export default {
+ data () {
+ return {
+ title: "Events"
+ }
+ },
+ methods: {
+ log (message) {
+ this.$log(`${new Date().toLocaleTimeString()} -- ${message}`)
+ },
+ ready () { this.log('ready') },
+ ended () { this.log('ended') },
+ playing () { this.log('playing') },
+ paused () { this.log('paused') },
+ buffering () { this.log('buffering') },
+ qued () { this.log('qued') }
+ },
+ components: { container }
+}
+</script>
+
+<style lang="css">
+</style>

play/List.vue

@@ -0,0 +1,44 @@
+<template lang="html">
+ <container :title="title">
+ <form @submit.prevent="add">
+ <div class="row">
+ <div class="columns">
+ <label for="id">New Video ID</label>
+ <input type="text" id="id" v-model="id">
+ </div>
+ </div>
+ <button type="submit">Add Video</button>
+ <button type="button" @click="remove">Remove Video</button>
+ </form>
+ <youtube v-for="video in videos" :video-id="video.id"></youtube>
+ </container>
+</template>
+
+<script>
+import container from './container.vue'
+
+export default {
+ data () {
+ return {
+ title: 'List',
+ videos: [{ id: 'M7lc1UVf-VE' }],
+ id: ''
+ }
+ },
+ methods: {
+ add () {
+ this.videos.unshift({ id: this.id })
+ this.$log(`added: ${this.id}`)
+ this.id = ''
+ },
+ remove () {
+ const { id } = this.videos.shift()
+ this.$log(`removed: ${id}`)
+ }
+ },
+ components: { container }
+}
+</script>
+
+<style lang="css">
+</style>

play/PlayerVars.vue

@@ -0,0 +1,40 @@
+<template lang="html">
+ <container :title="title">
+ <h2>Autoplay</h2>
+ <youtube video-id="M7lc1UVf-VE" :player-vars="player1"></youtube>
+ <h2>Start</h2>
+ <youtube video-id="M7lc1UVf-VE" :player-vars="player2"></youtube>
+ <h2>Show Info</h2>
+ <youtube video-id="M7lc1UVf-VE" :player-vars="player3"></youtube>
+ <h2>Playlist</h2>
+ <youtube video-id="M7lc1UVf-VE" :player-vars="player4"></youtube>
+ </container>
+</template>
+
+<script>
+import container from './container.vue'
+
+export default {
+ data () {
+ return {
+ title: 'Player Vars',
+ player1: {
+ autoplay: 1
+ },
+ player2: {
+ start: 60
+ },
+ player3: {
+ showinfo: 0
+ },
+ player4: {
+ playlist: 'M7lc1UVf-VE,M7lc1UVf-VE,M7lc1UVf-VE'
+ }
+ }
+ },
+ components: { container }
+}
+</script>
+
+<style lang="css">
+</style>

play/Size.vue

@@ -0,0 +1,33 @@
+<template lang="html">
+ <container :title="title">
+ <form @submit.prevent class="row">
+ <div class="columns">
+ <label for="height">Height</label>
+ <input type="number" name="height" id="height" v-model.number="height">
+ </div>
+ <div class="columns">
+ <label for="width">Width</label>
+ <input type="number" name="width" id="width" v-model.number="width">
+ </div>
+ </form>
+ <youtube video-id="M7lc1UVf-VE" :player-width="width" :player-height="height"></youtube>
+ </container>
+</template>
+
+<script>
+import container from './container.vue'
+
+export default {
+ data () {
+ return {
+ title: "Height and Width",
+ height: 390,
+ width: 640
+ }
+ },
+ components: { container }
+}
+</script>
+
+<style lang="css">
+</style>

play/UpdateVideoId.vue

@@ -0,0 +1,49 @@
+<template lang="html">
+ <container :title="title">
+ <form @submit.prevent="update">
+ <div class="row">
+ <div class="columns">
+ <label for="video-id">New Video ID or URL</label>
+ <input type="text" v-model="input" name="video-id" id="video-id">
+ </div>
+ <div class="columns">
+ <label for="autoplay">Method</label>
+ <select name="autoplay" id="autoplay" v-model.number="autoplay">
+ <option value="0">cueVideoById (autoplay: 0)</option>
+ <option value="1">loadVideoById (autoplay: 1)</option>
+ </select>
+ </div>
+ </div>
+ </form>
+ <youtube :video-id="id | url" :player-vars="{ autoplay }"></youtube>
+ </container>
+</template>
+
+<script>
+import container from './container.vue'
+import { getIdFromURL } from '../'
+
+export default {
+ data () {
+ return {
+ title: 'Update Video ID',
+ id: 'M7lc1UVf-VE',
+ input: '',
+ autoplay: 0
+ }
+ },
+ filters: {
+ url: getIdFromURL
+ },
+ methods: {
+ update () {
+ this.id = this.input
+ this.input = ''
+ }
+ },
+ components: { container }
+}
+</script>
+
+<style lang="css">
+</style>

play/container.vue

@@ -0,0 +1,58 @@
+<template lang="html">
+ <section class="container">
+ <h1 class="title">{{ title }}</h1>
+ <slot></slot>
+ </section>
+</template>
+
+<script>
+import Vue from 'vue'
+import YouTube from '../'
+Vue.use(YouTube)
+
+export default {
+ props: ['title'],
+ data () {
+ return {}
+ },
+ computed: {},
+ mounted () {},
+ methods: {},
+ components: {}
+}
+</script>
+
+<style lang="css" scoped>
+.container {
+ padding: 0 2rem;
+}
+
+.title {
+ border-bottom: 2px solid red;
+}
+
+form {
+ border: solid 1px #333;
+ margin: .5rem 0;
+ padding: .5rem;
+}
+
+.row {
+ display: flex;
+}
+
+.columns {
+ padding: .5rem;
+ flex: 1;
+}
+
+label, input, select {
+ display: block;
+}
+
+input, select {
+ width: 100%;
+ font-size: 16px;
+ background-color: white;
+}
+</style>

play/index.js

@@ -0,0 +1,14 @@
+import { play } from 'vue-play'
+
+import Events from './Events.vue'
+import Size from './Size.vue'
+import PlayerVars from './PlayerVars.vue'
+import UpdateVideoId from './UpdateVideoId.vue'
+import List from './List.vue'
+
+play('Vue YouTube Embed', module)
+ .add('Events', Events)
+ .add('Height and Width', Size)
+ .add('Player Vars', PlayerVars)
+ .add('Update Video ID', UpdateVideoId)
+ .add('List', List)