From 768d879fb58bef38370788b52db67dfa5d1ed6ce Mon Sep 17 00:00:00 2001
From: tserkov <james.churchard@gmail.com>
Date: Sat, 20 May 2017 00:32:18 -0500
Subject: [PATCH] initial working commit

---
 LICENSE.md       |  21 +++++++++
 README.md        |  91 ++++++++++++++++++++++++++++++++++++
 TwitchPlayer.vue | 118 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json     |   9 ++++
 4 files changed, 239 insertions(+)
 create mode 100755 LICENSE.md
 create mode 100755 README.md
 create mode 100755 TwitchPlayer.vue
 create mode 100755 package.json

diff --git a/LICENSE.md b/LICENSE.md
new file mode 100755
index 0000000..a7b11e5
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 James Churchard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100755
index 0000000..07c464a
--- /dev/null
+++ b/README.md
@@ -0,0 +1,91 @@
+# vue-twitch-player [![license](https://img.shields.io/github/license/tserkov/vue-twitch-player.svg)]()
+A Vue component for embedding a Twitch player. See component for all available properties.
+
+## Install
+
+``` bash
+# npm
+npm install --save-dev vue-twitch-player
+```
+
+``` bash
+# yarn
+yarn add --dev vue-twitch-player
+```
+
+## Use
+
+```html
+<template>
+  <twitch-player
+    :channel="channel"
+  ></twitch-player>
+</template>
+
+<script>
+  import VueTwitchPlayer from 'vue-twitch-player';
+
+  export default {
+    // ...
+    components: {
+      VueTwitchPlayer,
+    },
+    data() {
+      return {
+        channel: 'tserkov',
+      };
+    },
+    // ...
+  };
+</script>
+```
+
+```html
+<template>
+  <twitch-player
+    :video="video"
+  ></twitch-player>
+</template>
+
+<script>
+  import VueTwitchPlayer from 'vue-twitch-player';
+
+  export default {
+    // ...
+    components: {
+      VueTwitchPlayer,
+    },
+    data() {
+      return {
+        video: '117216248',
+      };
+    },
+    // ...
+  };
+</script>
+```
+
+```html
+<template>
+  <twitch-player
+    :collection="collection"
+  ></twitch-player>
+</template>
+
+<script>
+  import VueTwitchPlayer from 'vue-twitch-player';
+
+  export default {
+    // ...
+    components: {
+      VueTwitchPlayer,
+    },
+    data() {
+      return {
+        collection: 'TbyX29kRqhRnxA',
+      };
+    },
+    // ...
+  };
+</script>
+```
diff --git a/TwitchPlayer.vue b/TwitchPlayer.vue
new file mode 100755
index 0000000..a89f9d4
--- /dev/null
+++ b/TwitchPlayer.vue
@@ -0,0 +1,118 @@
+<template>
+  <div :id="playerId"></div>
+</template>
+
+<script>
+  import Vue from 'vue';
+
+  let player;
+
+  export default {
+    name: 'twitch-player',
+    props: {
+      width: {
+        type: String,
+        default: '400',
+      },
+      height: {
+        type: String,
+        default: '300',
+      },
+      initialVolume: {
+        type: Number,
+        default: 0.5,
+      },
+      initialQuality: {
+        type: String,
+        default: 'medium',
+      },
+      channel: String,
+      collection: String,
+      video: String,
+    },
+    data() {
+      return {
+        playerId: `twitch-player-${this._uid}`, // eslint-disable-line no-underscore-dangle
+      };
+    },
+    beforeCreate() {
+      Vue.loadScript('//player.twitch.tv/js/embed/v1.js')
+        .then(() => {
+          const options = {
+            width: this.width,
+            height: this.height,
+          };
+
+          if (this.channel) {
+            options.channel = this.channel;
+          } else if (this.collection) {
+            options.collection = this.collection;
+          } else if (this.video) {
+            options.video = this.video;
+          } else {
+            // Error: No specified source!
+          }
+
+          player = new window.Twitch.Player(this.playerId, options); // eslint-disable-line no-underscore-dangle, max-len
+
+          player.addEventListener('ended', () => (this.$emit('ended')));
+
+          player.addEventListener('pause', () => (this.$emit('pause')));
+
+          player.addEventListener('play', () => (this.$emit('play')));
+
+          player.addEventListener('offline', () => (this.$emit('offline')));
+
+          player.addEventListener('online', () => (this.$emit('online')));
+
+          player.addEventListener('ready', () => {
+            console.log('ready'); // eslint-disable-line
+            player.setQuality(this.initialQuality);
+            player.setVolume(this.initialVolume);
+          });
+        }).catch((e) => (this.$emit('error', e)));
+    },
+    methods: {
+      play() {
+        player.play();
+      },
+      pause() {
+        player.pause();
+      },
+      seek(timestamp) {
+        player.seek(timestamp);
+      },
+      getVolume() {
+        return player.getVolume();
+      },
+      isMuted() {
+        return player.getMuted();
+      },
+      mute() {
+        player.setMuted(true);
+      },
+      unmute() {
+        player.setMuted(false);
+      },
+    },
+    watch: {
+      channel(newChannel) {
+        player.setChannel(newChannel);
+      },
+      collection(newCollection) {
+        player.setCollection(newCollection);
+      },
+      video(newVideo) {
+        player.setVideo(newVideo);
+      },
+      volume(newVolume) {
+        player.setVolume(newVolume);
+      },
+      quality(newQuality) {
+        if (player.getQualities().indexOf(newQuality) !== -1) {
+          player.setQuality(newQuality);
+        }
+      },
+    },
+  };
+</script>
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..6fe6b85
--- /dev/null
+++ b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "vue-twitch-player",
+  "version": "1.0.0",
+  "description": "A Vue component for embedding a Twitch player.",
+  "main": "dist/TwitchPlayer.js",
+  "repository": "https://github.com/tserkov/vue-twitch-player",
+  "author": "tserkov <james.churchard@gmail.com>",
+  "license": "MIT"
+}