diff --git a/package-lock.json b/package-lock.json
index d522915..6e3fde1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3299,7 +3299,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.1.1",
@@ -3350,7 +3351,8 @@
         "balanced-match": {
           "version": "0.4.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "bcrypt-pbkdf": {
           "version": "1.0.1",
@@ -3365,6 +3367,7 @@
           "version": "0.0.9",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "inherits": "~2.0.0"
           }
@@ -3373,6 +3376,7 @@
           "version": "2.10.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "hoek": "2.x.x"
           }
@@ -3381,6 +3385,7 @@
           "version": "1.1.7",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^0.4.1",
             "concat-map": "0.0.1"
@@ -3389,7 +3394,8 @@
         "buffer-shims": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "caseless": {
           "version": "0.12.0",
@@ -3406,12 +3412,14 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "combined-stream": {
           "version": "1.0.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "delayed-stream": "~1.0.0"
           }
@@ -3419,22 +3427,26 @@
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "cryptiles": {
           "version": "2.0.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "boom": "2.x.x"
           }
@@ -3474,7 +3486,8 @@
         "delayed-stream": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "delegates": {
           "version": "1.0.0",
@@ -3506,7 +3519,8 @@
         "extsprintf": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "forever-agent": {
           "version": "0.6.1",
@@ -3528,12 +3542,14 @@
         "fs.realpath": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "fstream": {
           "version": "1.0.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "inherits": "~2.0.0",
@@ -3589,6 +3605,7 @@
           "version": "7.1.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
@@ -3601,7 +3618,8 @@
         "graceful-fs": {
           "version": "4.1.11",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "har-schema": {
           "version": "1.0.5",
@@ -3629,6 +3647,7 @@
           "version": "3.1.3",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "boom": "2.x.x",
             "cryptiles": "2.x.x",
@@ -3639,7 +3658,8 @@
         "hoek": {
           "version": "2.16.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "http-signature": {
           "version": "1.1.1",
@@ -3656,6 +3676,7 @@
           "version": "1.0.6",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "once": "^1.3.0",
             "wrappy": "1"
@@ -3664,7 +3685,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.4",
@@ -3676,6 +3698,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "1.0.1"
           }
@@ -3689,7 +3712,8 @@
         "isarray": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "isstream": {
           "version": "0.1.2",
@@ -3762,12 +3786,14 @@
         "mime-db": {
           "version": "1.27.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "mime-types": {
           "version": "2.1.15",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "mime-db": "1.27.0"
           }
@@ -3776,6 +3802,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "1.1.7"
           }
@@ -3783,12 +3810,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3843,7 +3872,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "oauth-sign": {
           "version": "0.8.2",
@@ -3861,6 +3891,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3890,7 +3921,8 @@
         "path-is-absolute": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "performance-now": {
           "version": "0.2.0",
@@ -3901,7 +3933,8 @@
         "process-nextick-args": {
           "version": "1.0.7",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "punycode": {
           "version": "1.4.1",
@@ -3939,6 +3972,7 @@
           "version": "2.2.9",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "buffer-shims": "~1.0.0",
             "core-util-is": "~1.0.0",
@@ -3983,6 +4017,7 @@
           "version": "2.6.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "glob": "^7.0.5"
           }
@@ -3990,7 +4025,8 @@
         "safe-buffer": {
           "version": "5.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "semver": {
           "version": "5.3.0",
@@ -4014,6 +4050,7 @@
           "version": "1.0.9",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "hoek": "2.x.x"
           }
@@ -4047,6 +4084,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4057,6 +4095,7 @@
           "version": "1.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.0.1"
           }
@@ -4071,6 +4110,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4085,6 +4125,7 @@
           "version": "2.2.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "block-stream": "*",
             "fstream": "^1.0.2",
@@ -4140,7 +4181,8 @@
         "util-deprecate": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "uuid": {
           "version": "3.0.1",
@@ -4169,7 +4211,8 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -6415,7 +6458,7 @@
         "gulp-filter": "^4.0.0",
         "lodash": "^4.15.0",
         "webpack": "2.1.0-beta.15 - 2.1.0-beta.22",
-        "webpack-stream": "github:jeroennoten/webpack-stream#d78a3568e259f9cdbc64c60290639af6ef6d3baf"
+        "webpack-stream": "webpack-stream@github:jeroennoten/webpack-stream#d78a3568e259f9cdbc64c60290639af6ef6d3baf"
       }
     },
     "lazy-debug-legacy": {
@@ -6935,9 +6978,9 @@
       }
     },
     "marked": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.5.2.tgz",
-      "integrity": "sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA=="
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
+      "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg=="
     },
     "marked-terminal": {
       "version": "2.0.0",
diff --git a/package.json b/package.json
index 19c9cc0..cfb50ae 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "babel-loader": "^7.1.4",
-    "marked": "^0.5.2",
+    "marked": "^0.7.0",
     "require-dir": "0.3.2",
     "sass-loader": "^6.0.7",
     "vue-loader": "^12.2.2",
diff --git a/resources/assets/js/components/watchYoutube.vue.save b/resources/assets/js/components/watchYoutube.vue.save
new file mode 100644
index 0000000..e44e23c
--- /dev/null
+++ b/resources/assets/js/components/watchYoutube.vue.save
@@ -0,0 +1,688 @@
+<template>
+    <div>
+        <!--Current Listener Stats-->
+        <div v-if="uiVisible" id="stats">
+            <h3 class="uk-display-inline uk-text-right uk-margin-small-right">
+                FSOCIETY TV <i class="url uk-icon-justify uk-icon-users"
+                               style="margin-right:10px; margin-left:10px;"></i>{{totalListeners}}
+            </h3>
+            <h3 class="uk-display-inline uk-text-right uk-margin-small-right">
+                <span class="to">{{activeChannel.toUpperCase()}}</span>
+                <i class="url uk-icon-justify uk-icon-users" style="margin-right:10px; margin-left:10px;"></i>{{channelListeners}}
+            </h3>
+        </div>
+        <!--Channel List-->
+        <div v-if="uiVisible" id="channels">
+            <h4>
+                <i class="uk-icon-fast-forward uk-margin-small-left uk-margin-small-right from"></i> Channels
+            </h4>
+            <div class="listContainer">
+                <ul class="uk-list uk-list-line">
+                    <!--suppress CommaExpressionJS -->
+                    <li v-for="channel in channels">
+                        <i class="url uk-icon-justify uk-icon-users" style="margin-right:10px; margin-left:10px;"></i>
+                        <span class="uk-margin-small-right">{{channel.count}}</span>
+                        <a v-bind:href="channelLink(channel.channel)" class="uk-margin-small-right">{{channel.channel}}</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!--Controls-->
+        <div id="controls" class="noselect">
+            <a v-on:click="playButton"
+               class="uk-icon-button uk-icon-play uk-margin-small-right uk-text-danger uk-display-inline-block"></a>
+            <a v-on:click="visibleButton" v-bind:class="ui"
+               class="uk-icon-button uk-margin-small-right uk-display-inline-block"></a>
+            <div v-if="uiVisible" class="uk-display-inline">
+                <a v-on:click="likeButton"
+                   class="uk-icon-button uk-icon-heart uk-margin-small-right uk-text-danger uk-display-inline-block"></a>
+                <a v-on:click="muteButton" v-bind:class="muted"
+                   class="uk-icon-button uk-margin-small-right uk-display-inline-block"></a>
+                <vue-slider tooltip="hover" v-model="slider" width="200" class="uk-display-inline-block"
+                            height="3"></vue-slider>
+            </div>
+        </div>
+        <!--Now Playing Bar-->
+        <div v-if="key && uiVisible" id="nowPlaying">
+            <i class="uk-icon-play uk-margin-small-right from"></i> {{title}} <span class="from">
+            <i class="uk-margin-small-right uk-margin-small-left uk-icon-user"></i>  {{from}}</span>
+        </div>
+        <!--Song Queue-->
+        <div id="queue" v-if="queue.length > 0 && uiVisible">
+            <h4>
+                <i class="uk-icon-fast-forward uk-margin-small-right from"></i> Up Next
+                <div class="uk-badge uk-badge-danger uk-margin-small-left">{{queue.length}}</div>
+            </h4>
+            <div class="listContainer">
+                <ul class="uk-list uk-list-line">
+                    <!--suppress CommaExpressionJS -->
+                    <li v-for="(item, index) in queue">
+                        <span class="timestamp uk-margin-small-right">{{index + 1}}</span> {{item.title}} <span
+                            class="from uk-margin-small-left">{{item.from}}</span>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!--Youtube Player-->
+        <youtube id="player" v-if="key" type="text/html" class="youtube-player" :player-width="windowWidth"
+                 :player-height="windowHeight" :video-id="key" :player-vars="playerVars" @paused="pause"
+                 @ready="ready" @playing="playing" @ended="ended"></youtube>
+        <!--Background animation-->
+        <div v-if="!key || paused">
+            <div class="frame">
+                <div></div>
+                <div></div>
+                <div></div>
+            </div>
+            <div class="image-layer"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+    .noselect {
+        -webkit-touch-callout: none; /* iOS Safari */
+        -webkit-user-select: none; /* Safari */
+        -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+        user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+    }
+
+    .from {
+        text-shadow: 4px 4px 7px rgba(0, 0, 0, 0.79);
+    }
+
+    body,
+    html {
+        height: 100%;
+        margin: 0;
+    }
+
+    #player {
+        pointer-events: none;
+    }
+
+    #controls {
+        position: fixed;
+        left: 5px;
+        bottom: 43px;
+        height: 1.1em;
+        padding: 5px;
+        z-index: 5;
+        width: 85%;
+    }
+
+    #nowPlaying {
+        position: fixed;
+        left: 0;
+        width: 80%;
+        height: 1.1em;
+        padding: 5px;
+        z-index: 5;
+    }
+
+    #stats {
+        position: fixed;
+        right: 5px;
+        height: 1.1em;
+        padding: 5px;
+        z-index: 5;
+    }
+
+    #queue {
+        position: fixed;
+        top: 50%;
+        right: 0;
+        z-index: 5;
+        width: 15%;
+        height: 100%;
+        background: #000;
+        opacity: 0.7;
+        color: #fff;
+        padding: 5px;
+        border-top-left-radius: 6px;
+    }
+
+    #channels {
+        position: fixed;
+        top: 50%;
+        left: 0;
+        z-index: 5;
+        width: 15%;
+        height: 70%;
+        background: #000;
+        opacity: 0.7;
+        color: #fff;
+        padding: 5px;
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
+
+    }
+
+    .listContainer {
+        height: 40%;
+        width: 100%;
+        overflow-y: auto;
+    }
+
+    ::-webkit-scrollbar-track {
+        margin-top: 0;
+    }
+
+    /*noinspection CssUnknownTarget*/
+
+    .image-layer {
+        z-index: 1;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        color: transparent;
+        background: url('/images/standby.jpg') no-repeat fixed center center;
+        background-size: cover;
+        text-shadow: 0 0 30px rgba(0, 0, 0, .5);
+        animation: glitch 8s linear infinite;
+        pointer-events: none;
+    }
+
+    .frame {
+        z-index: 3;
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%);
+        pointer-events: none;
+    }
+
+    .frame div {
+        position: absolute;
+        left: 0;
+        top: -20%;
+        width: 100%;
+        height: 20%;
+        background-color: rgba(0, 0, 0, .12);
+        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
+        animation: waves 12s linear infinite;
+    }
+
+    .frame div:nth-child(1) {
+        animation-delay: 0s;
+    }
+
+    .frame div:nth-child(2) {
+        animation-delay: 4s;
+    }
+
+    .frame div:nth-child(3) {
+        animation-delay: 8s;
+    }
+
+    @keyframes waves {
+        0% {
+            top: -20%;
+        }
+        100% {
+            top: 100%;
+        }
+    }
+
+    @keyframes glitch {
+        0% {
+            opacity: .4;
+        }
+        10% {
+            opacity: .2;
+        }
+        20% {
+            opacity: .3;
+        }
+        30% {
+            opacity: .1;
+        }
+        40% {
+            opacity: .2;
+        }
+        50% {
+            opacity: .2;
+        }
+        54% {
+            opacity: .4;
+        }
+        58% {
+            opacity: .2;
+        }
+        60% {
+            opacity: .2;
+        }
+        65% {
+            opacity: .3;
+        }
+        70% {
+            opacity: .2;
+        }
+        80% {
+            opacity: .2;
+        }
+        90% {
+            opacity: .3;
+        }
+        93% {
+            opacity: .4;
+        }
+        96% {
+            opacity: .2;
+        }
+        100% {
+            opacity: .3;
+        }
+    }
+</style>
+<script>
+    const socketUrl = 'https://bot.fsociety.online/youtube';
+
+    // Window Holders
+    const _ = window._ || require('lodash');
+    const $ = window.$ || require('jquery');
+
+    import vueSlider from 'vue-slider-component';
+
+    export default {
+        components: {
+            vueSlider
+        },
+        // Initial Data Structure
+        data() {
+            return {
+                key: '', // Current Video
+                seekTime: 0, // Current Seek Time
+                from: '', // Current Video sent From Nick
+                to: '', // Current Video sent to channel
+                title: '', // Current Video title
+                timestamp: null, // Time current video was received
+                initialTime: null, // Current Hardware timestamp
+                paused: false, // Player pause status
+                queue: [], // Video Queue
+                firstLoad: true, // Has a video been loaded yet?
+                synced: false, // We have been synced with the rest of the clients
+                syncedTime: null, // initial Sync Time
+                activeChannel: activeChannel ? activeChannel.toLowerCase() : '', // Active channel, defaults to ''
+                player: null, // Holder for the video player
+                windowHeight: 0, // Browser Window Height
+                windowWidth: 0, // Browser Window Width
+                totalListeners: 1, // Current Total Listeners, defaulted to 1
+                channelListeners: 1, // Current Channel Total Listeners, defaulted to 1,
+                slider: 50,
+                originalVolume: 50,
+                channel: null, // Socket Connection,
+                channels: {}, // Channels available
+                uiVisible: true, // User Interface Visibility
+            }
+        },
+        // Computed Properties
+        computed: {
+            playerVars: function () {
+                return {
+                    autoplay: 1,
+                    start: this.seekTime,
+                    controls: 0,
+                    modestBranding: 1,
+                    disablekb: 1,
+                    showinfo: 0,
+                }
+            },
+            muted: function () {
+                return this.slider === 0 ? 'uk-text-danger uk-icon-volume-off' : 'uk-text-success uk-icon-volume-up';
+            },
+            ui: function () {
+                return this.uiVisible ? 'uk-icon-eye' : 'uk-icon-eye-slash';
+            }
+        },
+        // On Component mount
+        mounted() {
+            // Establish Socket.io connection
+            this.$nextTick(function () {
+                this.initSocket();
+                this.windowWidth = window.innerWidth;
+                this.windowHeight = window.innerHeight;
+                window.addEventListener('resize', () => {
+                    this.windowWidth = window.innerWidth;
+                    this.windowHeight = window.innerHeight;
+                });
+            });
+        },
+        // Watched Properties
+        watch: {
+            // Modify the page Title
+            title: function (val) {
+                const out = val === '' ? 'Fsociety TV' : val;
+                document.title = `${out} - Powered by MrNodeBot`;
+            },
+            // Bind the volume slider to the youtube player
+            slider: function (val) {
+                if (this.player) this.player.setVolume(val);
+            },
+
+        },
+        // Vue Methods
+        methods: {
+            // Channel link
+            channelLink: function (chan) {
+                // Lobby
+                if (chan === 'Lobby') return laroute.route('watch-youtube');
+                // Normal Channel
+                return laroute.route('watch-youtube', {
+                    activeChannel: chan
+                }).replaceAll('#','%23');
+            },
+            // Fire off like button event
+            likeButton: function () {
+                this.channel.emit('like');
+            },
+            playButton: function () {
+                // Hack to have the first synced song seeked to the appropriate time
+                if (this.firstLoad) {
+                    if (this.seekTime !== null) player.seekTo(parseFloat(this.seekTime), true);
+                    this.firstLoad = false;
+                }
+            },
+            visibleButton: function () {
+                this.uiVisible = !this.uiVisible;
+            },
+            muteButton: function () {
+                if (this.slider === 0) {
+                    this.slider = this.originalVolume;
+                } else {
+                    this.originalVolume = this.slider;
+                    this.slider = 0;
+                }
+            },
+            // Youtube player is playing
+            playing: function () {
+                this.paused = false;
+            },
+            // Youtube player is ready
+            ready: function (player) {
+                // Hold on to the player object
+                this.player = player;
+                // // Hack to have the first synced song seeked to the appropriate time
+                if (this.firstLoad) {
+                    if (this.seekTime !== null) player.seekTo(parseFloat(this.seekTime), true);
+                    this.firstLoad = false;
+                }
+                // Set Default volume
+                player.setVolume(this.slider);
+            },
+            // Youtube player is paused
+            pause: function () {
+                this.paused = true;
+            },
+            // Youtube video has ended
+            ended: function () {
+                // Reset the key
+                this.clearNowPlaying();
+                // There are still items left in the queue
+                if (this.queue.length > 0) {
+                    // Pop the first item off
+                    const item = this.queue.splice(0, 1)[0];
+
+                    this.seekTime = item.seekTime;
+                    this.key = item.key;
+                    this.timestamp = item.timestamp;
+                    this.title = item.title;
+                    this.from = item.from;
+                    this.to = item.to;
+
+                    // Notify
+                    this.notifyPlay('Playing', this);
+                }
+            },
+            speak: function (message) {
+                // No Message
+                if (!message || message === '') return;
+                if (!window.speechSynthesis || !window.speechSynthesis.speak || !SpeechSynthesisUtterance) {
+                    this.notifyPlay(message);
+                } else {
+                    const toSay = new SpeechSynthesisUtterance(message);
+                    window.speechSynthesis.speak(toSay);
+                }
+            },
+            // Wrapper around UIkits notify, notify on an item (including this)
+            notifyPlay: function (message, item) {
+                // Required Items are missing
+                if (!message) return;
+
+                UIkit.notify({
+                    message: (item && item.from && item.to && item.title) ?
+                        `<div class="uk-text-center"><h1>${message}</h1><h2>${item.title}</h2><h3>${item.from}</h3></div>` : `<h1 class="uk-text-center">${message}</h1>`,
+                    status: 'info',
+                    timeout: 4000,
+                    pos: 'bottom-center'
+                });
+            },
+            // Build a queue item
+            queueItem: function (key, from, to, timestamp, title, seekTime) {
+                title = title || '';
+                return {
+                    key,
+                    from,
+                    to,
+                    timestamp,
+                    title,
+                    seekTime
+                };
+            },
+            // Clear the queue
+            clearQueue: function () {
+                this.queue.splice(0);
+            },
+            // Clear the current playing video
+            clearNowPlaying: function () {
+                this.key = '';
+                this.from = '';
+                this.to = '';
+                this.title = '';
+                this.seekTime = '';
+                this.timestamp = null;
+                this.paused = false;
+            },
+            // Build a state for this client
+            buildState: function () {
+                const currentState = {
+                    key: this.key,
+                    from: this.from,
+                    to: this.to,
+                    title: this.title,
+                    seekTime: this.player ? this.player.getCurrentTime() : 0,
+                    timestamp: this.timestamp,
+                    initialTime: this.initialTime,
+                };
+
+                // Create a copy of the current queue
+                // TODO Replace with object.assign?
+                const queue = JSON.parse(JSON.stringify(this.queue));
+
+                // Put the current state at the start
+                queue.unshift(currentState);
+
+                // Return state
+                return {
+                    initialTime: this.initialTime,
+                    activeChannel: this.activeChannel,
+                    queue: queue,
+                };
+            },
+            initSocket: function () {
+                const self = this;
+
+                // Subscribe to webSocket
+                const channel = this.channel = io.connect(socketUrl, {
+                    query: `activeChannel=${activeChannel}`
+                });
+
+                // YouTube new Connection event
+                channel.on('new', data => {
+
+                    // Modify state
+                    self.totalListeners = data.totalListeners;
+                    self.channelListeners = data.channelListeners;
+                    self.channels = data.channels || {};
+
+                    // If we have a HR Time broadcast our state
+                    if (self.initialTime) channel.emit('new-reply', self.buildState());
+                });
+
+
+                // Respond to the like event
+                channel.on('like', () => UIkit.notify(`<div class="uk-text-center from"><i class="uk-icon-heartbeat uk-margin-small-right"></i> Someone Likes This!</div>`, {
+                    timeout: 1000,
+                    pos: 'bottom-center'
+                }));
+
+                // Listen for Disconnects
+                channel.on('left', data => {
+                    // Modify state
+                    self.totalListeners = data.totalListeners;
+                    self.channelListeners = data.channelListeners;
+                    self.channels = data.channels || {};
+                });
+
+                // Speak
+                channel.on('speak', data => self.speak(data));
+
+                // Handle Queue Sync
+                channel.on('queue', data => {
+                    // If we do not have an HR time or if the current one is older then ours
+                    if (
+                        //!self.initialTime || // We have an Initial HR Time
+                    (!self.syncedTime ||
+                        self.syncedTime > data.initialTime
+                    ) &&
+                    (
+                        data && // We Have Data
+                        data.initialTime && // The State has an Initial Time
+                        self.initialTime > data.initialTime // Ours is newer
+                    )
+                    ) {
+                        // Hold on to the initial Synced time
+                        self.syncedTime = data.initialTime;
+                        // Clear Current State
+                        self.clearNowPlaying();
+                        self.clearQueue();
+                        // Pop off first item
+                        const item = data.queue.splice(0, 1)[0];
+                        // Figure out time shift?
+                        // Super magic experimental number
+                        const timeshift = 0.2; //1.255;
+                        // Set First Item
+                        self.seekTime = item.seekTime + timeshift;
+                        self.key = item.key;
+                        self.timestamp = item.timestamp;
+                        self.title = item.title;
+                        self.from = item.from;
+                        self.to = item.to;
+                        self.initialTime = item.timestamp;
+                        // Notify
+                        if (!self.synced) self.notifyPlay('Synced', self);
+                        self.synced = true;
+                        // Assign the rest of the queue to the clients
+                        self.queue = data.queue;
+                    }
+                });
+
+                // Time Sync
+                channel.on('timesync', data => {
+                    self.initialTime = data;
+                });
+
+                // YouTube Control Channel
+                channel.on('control', data => {
+                    // Gate
+                    if (!data.command) return;
+
+                    // Switch Control commands
+                    switch (data.command) {
+                        // Clear current queue
+                        case 'clear':
+                            self.clearNowPlaying();
+                            self.clearQueue();
+                            break;
+                        // Remove item from queue
+                        case 'remove':
+                            if (data.index > self.queue.length || data.index - 1 < 0) return;
+                            self.queue.splice(data.index - 1, 1);
+                            break;
+                        // Reload Page
+                        case 'reload':
+                            location.reload();
+                            break;
+                        case 'speak':
+                            self.speak(data.message);
+                            break;
+                        case 'skip':
+                            if (_.isEmpty(self.queue)) return;
+                            // Pop off first item
+                            const item = self.queue.splice(0, 1)[0];
+                            // Adjust the state
+                            self.seekTime = item.seekTime;
+                            self.key = item.key;
+                            self.timestamp = item.timestamp;
+                            self.title = item.title;
+                            self.from = item.from;
+                            self.to = item.to;
+                            // Notify
+                            self.notifyPlay('Skipping to play', item);
+                    }
+                });
+
+                // YouTube Broadcast channel
+                channel.on('message', data => {
+                    // No Key, Same key as currently playing, bail
+                    if (!data.video ||
+                        !data.video.key ||
+                        data.video.key === self.key ||
+                        _.find(self.queue, {
+                            key: data.video.key
+                        })
+                    ) return;
+
+                    // Create the item
+                    const item = self.queueItem(
+                        data.video.key,
+                        data.from,
+                        data.to,
+                        data.timestamp,
+                        data.video.videoTitle,
+                        data.seekTime
+                    );
+
+                    // If we for some reason do not have an initial HR time, set it baseed on thee current track
+                    if (!self.initialTime) self.initialTime = data.timestamp;
+
+                    // Add Item To queue
+                    self.queue.push(item);
+
+                    // If nothing is currently playing, process the item
+                    if (self.key === '') {
+                        // Pop the first item from the queue
+                        const currentItem = self.queue.splice(0, 1)[0];
+                        self.seekTime = currentItem.seekTime;
+                        self.key = currentItem.key;
+                        self.timestamp = currentItem.timestamp;
+                        self.title = currentItem.title;
+                        self.from = currentItem.from;
+                        self.to = currentItem.to;
+                        self.notifyPlay('Playing', self);
+                    }
+
+                    // Otherwise Notify we are adding it
+                    else self.notifyPlay('Adding', item);
+                });
+            }
+        }
+    }
+</script>