diff --git a/ecosystem.config.js b/ecosystem.config.js
new file mode 100644
index 0000000..e36dcd8
--- /dev/null
+++ b/ecosystem.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  'apps' : [{
+    'name': 'MultiVue',
+    'script': './server.js',
+    'watch': './server.js'
+  }]
+};
diff --git a/icon.png b/icon.png
new file mode 100644
index 0000000..3a31dba
Binary files /dev/null and b/icon.png differ
diff --git a/package-lock.json b/package-lock.json
index 0d33154..c4a4e08 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,11 @@
         "svg-tags": "^1.0.0"
       }
     },
+    "@arr/every": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@arr/every/-/every-1.0.1.tgz",
+      "integrity": "sha512-UQFQ6SgyJ6LX42W8rHCs8KVc0JS0tzVL9ct4XYedJukskYVWTo49tNiMEK9C2HTyarbNiT/RVIRSY82vH+6sTg=="
+    },
     "@babel/code-frame": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@@ -1032,7 +1037,6 @@
       "version": "7.11.2",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
       "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -1142,6 +1146,11 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@polka/url": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-0.5.0.tgz",
+      "integrity": "sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw=="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -1469,6 +1478,51 @@
         }
       }
     },
+    "@videojs/http-streaming": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-1.13.2.tgz",
+      "integrity": "sha512-U4Xhh+HxGpRBx9Gm0LlEadq85k9BwckzFgZmyhacauhK/27Mz0goKKFAt+BpxBNp2oHVdAdk8NHfneinsqni3Q==",
+      "requires": {
+        "aes-decrypter": "3.0.0",
+        "global": "^4.3.0",
+        "m3u8-parser": "4.4.0",
+        "mpd-parser": "0.10.0",
+        "mux.js": "5.5.1",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^6.8.0 || ^7.0.0"
+      }
+    },
+    "@videojs/vhs-utils": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-1.3.0.tgz",
+      "integrity": "sha512-oiqXDtHQqDPun7JseWkirUHGrgdYdeF12goUut5z7vwAj4DmUufEPFJ4xK5hYGXGFDyDhk2rSFOR122Ze6qXyQ==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "^4.3.2",
+        "url-toolkit": "^2.1.6"
+      }
+    },
+    "@videojs/xhr": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.5.1.tgz",
+      "integrity": "sha512-wV9nGESHseSK+S9ePEru2+OJZ1jq/ZbbzniGQ4weAmTIepuBMSYPx5zrxxQA0E786T5ykpO8ts+LayV+3/oI2w==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+          "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "^0.11.10"
+          }
+        }
+      }
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
@@ -2124,7 +2178,6 @@
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
       "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-      "dev": true,
       "requires": {
         "mime-types": "~2.1.24",
         "negotiator": "0.6.2"
@@ -2154,6 +2207,16 @@
       "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
       "dev": true
     },
+    "aes-decrypter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.0.0.tgz",
+      "integrity": "sha1-eEihwUW5/b9Xrj4rWxvHzwZEqPs=",
+      "requires": {
+        "commander": "^2.9.0",
+        "global": "^4.3.2",
+        "pkcs7": "^1.0.2"
+      }
+    },
     "aggregate-error": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
@@ -3432,8 +3495,7 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "commondir": {
       "version": "1.0.1",
@@ -3451,7 +3513,6 @@
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
       "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
       "requires": {
         "mime-db": ">= 1.43.0 < 2"
       }
@@ -3460,7 +3521,6 @@
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
       "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
       "requires": {
         "accepts": "~1.3.5",
         "bytes": "3.0.0",
@@ -3474,14 +3534,12 @@
         "bytes": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-          "dev": true
+          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
         },
         "debug": {
           "version": "2.6.9",
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -3489,8 +3547,7 @@
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
         }
       }
     },
@@ -3524,6 +3581,11 @@
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
       "dev": true
     },
+    "console-clear": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
+    },
     "consolidate": {
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
@@ -4415,6 +4477,11 @@
         }
       }
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5520,6 +5587,11 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
+    "get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
+    },
     "get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
@@ -5573,6 +5645,22 @@
       "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
       "dev": true
     },
+    "global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "requires": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      },
+      "dependencies": {
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6110,6 +6198,11 @@
       "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
       "dev": true
     },
+    "individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
+      "integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c="
+    },
     "infer-owner": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
@@ -6446,6 +6539,11 @@
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true
     },
+    "is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "is-glob": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
@@ -6749,6 +6847,11 @@
         "verror": "1.10.0"
       }
     },
+    "keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -6761,6 +6864,11 @@
       "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
       "dev": true
     },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
+    },
     "launch-editor": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.2.1.tgz",
@@ -6890,6 +6998,11 @@
         }
       }
     },
+    "local-access": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz",
+      "integrity": "sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA=="
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -6981,6 +7094,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "m3u8-parser": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.4.0.tgz",
+      "integrity": "sha512-iH2AygTFILtato+XAgnoPYzLHM4R3DjATj7Ozbk7EHdB2XoLF2oyOUguM7Kc4UVHbQHHL/QPaw98r7PbWzG0gg==",
+      "requires": {
+        "global": "^4.3.2"
+      }
+    },
     "make-dir": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@@ -7006,6 +7127,14 @@
         "object-visit": "^1.0.0"
       }
     },
+    "matchit": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/matchit/-/matchit-1.0.8.tgz",
+      "integrity": "sha512-CwPPICzozd/ezCzpVwGYG5bMVieaapnA0vvHDQnmQ2u2vZtVLynoPmvFsZjL67hFOvTBhhpqSR0bq3uloDP/Rw==",
+      "requires": {
+        "@arr/every": "^1.0.0"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -7114,20 +7243,17 @@
     "mime": {
       "version": "2.4.6",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
-      "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==",
-      "dev": true
+      "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
     },
     "mime-db": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
-      "dev": true
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
     },
     "mime-types": {
       "version": "2.1.27",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
       "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
-      "dev": true,
       "requires": {
         "mime-db": "1.44.0"
       }
@@ -7138,6 +7264,14 @@
       "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
       "dev": true
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "mini-css-extract-plugin": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -7308,6 +7442,22 @@
         "run-queue": "^1.0.3"
       }
     },
+    "mpd-parser": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.10.0.tgz",
+      "integrity": "sha512-eIqkH/2osPr7tIIjhRmDWqm2wdJ7Q8oPfWvdjealzsLV2D2oNe0a0ae2gyYYs1sw5e5hdssDA2V6Sz8MW+Uvvw==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "@videojs/vhs-utils": "^1.1.0",
+        "global": "^4.3.2",
+        "xmldom": "^0.1.27"
+      }
+    },
+    "mri": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
+      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7336,6 +7486,11 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "mux.js": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.5.1.tgz",
+      "integrity": "sha512-5VmmjADBqS4++8pTI6poSRJ+chHdaoI4XErcQPM5w4QfwaDl+FQlSI0iOgWbYDn6CBCbDRKaSCcEiN2K5aHNGQ=="
+    },
     "mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -7375,8 +7530,7 @@
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
-      "dev": true
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
     "neo-async": {
       "version": "2.6.2",
@@ -7656,8 +7810,7 @@
     "on-headers": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "dev": true
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
     },
     "once": {
       "version": "1.4.0",
@@ -8016,6 +8169,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pkcs7": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.2.tgz",
+      "integrity": "sha1-ttulJ1KMKUK/wSLOLa/NteWQdOc="
+    },
     "pkg-dir": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
@@ -8034,6 +8192,15 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "polka": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/polka/-/polka-0.5.2.tgz",
+      "integrity": "sha512-FVg3vDmCqP80tOrs+OeNlgXYmFppTXdjD5E7I4ET1NjvtNmQrb1/mJibybKkb/d4NA7YWAr1ojxuhpL3FHqdlw==",
+      "requires": {
+        "@polka/url": "^0.5.0",
+        "trouter": "^2.0.1"
+      }
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -8672,8 +8839,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -8914,8 +9080,7 @@
     "regenerator-runtime": {
       "version": "0.13.7",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-      "dev": true
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
     },
     "regenerator-transform": {
       "version": "0.14.5",
@@ -9215,6 +9380,14 @@
         "aproba": "^1.1.1"
       }
     },
+    "rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
+      "requires": {
+        "individual": "^2.0.0"
+      }
+    },
     "rxjs": {
       "version": "6.6.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.2.tgz",
@@ -9224,11 +9397,26 @@
         "tslib": "^1.9.0"
       }
     },
+    "sade": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.3.tgz",
+      "integrity": "sha512-m4BctppMvJ60W1dXnHq7jMmFe3hPJZDAH85kQ3ACTo7XZNVUuTItCQ+2HfyaMeV5cKrbw7l4vD/6We3GBxvdJw==",
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
+      "integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
+      "requires": {
+        "rust-result": "^1.0.0"
+      }
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -9277,6 +9465,11 @@
         "node-forge": "0.9.0"
       }
     },
+    "semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg=="
+    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -9507,6 +9700,38 @@
         }
       }
     },
+    "sirv": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.6.tgz",
+      "integrity": "sha512-LRGu7Op4Xl9hhigOy2kcB53zAYTjNDdpooey49dIU0cMdpOv9ithVf7nstk3jvs8EhMiT/VORoyazZYGgw4vnA==",
+      "requires": {
+        "@polka/url": "^1.0.0-next.9",
+        "mime": "^2.3.1",
+        "totalist": "^1.0.0"
+      },
+      "dependencies": {
+        "@polka/url": {
+          "version": "1.0.0-next.11",
+          "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
+          "integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA=="
+        }
+      }
+    },
+    "sirv-cli": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.6.tgz",
+      "integrity": "sha512-K/iY1OHG7hTw4GzLoqMhwzKCbgWmx5joYAAF2+CwyiamWCpVzAgNVWgAc0JmSA2Gf3wseov05il2QbFTGTZMVg==",
+      "requires": {
+        "console-clear": "^1.1.0",
+        "get-port": "^3.2.0",
+        "kleur": "^3.0.0",
+        "local-access": "^1.0.1",
+        "sade": "^1.6.0",
+        "semiver": "^1.0.0",
+        "sirv": "^1.0.6",
+        "tinydate": "^1.0.0"
+      }
+    },
     "slash": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
@@ -10258,6 +10483,11 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
+    "tinydate": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
+      "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -10333,6 +10563,11 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -10343,6 +10578,14 @@
         "punycode": "^2.1.1"
       }
     },
+    "trouter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/trouter/-/trouter-2.0.1.tgz",
+      "integrity": "sha512-kr8SKKw94OI+xTGOkfsvwZQ8mWoikZDd2n8XZHjJVZUARZT+4/VV6cacRS6CLsH9bNm+HFIPU1Zx4CnNnb4qlQ==",
+      "requires": {
+        "matchit": "^1.0.0"
+      }
+    },
     "tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -10625,6 +10868,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "url-toolkit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.0.tgz",
+      "integrity": "sha512-Rde0c9S4fJK3FaHim3DSgdQ8IFrSXcZCpAJo9T7/FA+BoQGhK0ow3mpwGQLJCPYsNn6TstpW7/7DzMpSpz9F9w=="
+    },
     "use": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
@@ -10703,8 +10951,7 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-      "dev": true
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
     "vendors": {
       "version": "1.0.4",
@@ -10723,6 +10970,42 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "video.js": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.8.4.tgz",
+      "integrity": "sha512-XTWWrhfdrk7nTBkqhWKslfXMpUhsDRsZ2L3ISxjuAgadpiomxFV/OARchtwxO+FdnxTm4njJstPmXbVe3F765g==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "@videojs/http-streaming": "1.13.2",
+        "@videojs/xhr": "2.5.1",
+        "global": "4.3.2",
+        "keycode": "^2.2.0",
+        "safe-json-parse": "4.0.0",
+        "videojs-font": "3.2.0",
+        "videojs-vtt.js": "^0.15.2"
+      }
+    },
+    "videojs-font": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
+      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
+    },
+    "videojs-vtt.js": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.2.tgz",
+      "integrity": "sha512-kEo4hNMvu+6KhPvVYPKwESruwhHC3oFis133LwhXHO9U7nRnx0RiJYMiqbgwjgazDEXHR6t8oGJiHM6wq5XlAw==",
+      "requires": {
+        "global": "^4.3.1"
+      }
+    },
+    "videojs-youtube": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/videojs-youtube/-/videojs-youtube-2.6.1.tgz",
+      "integrity": "sha512-qvwrkgXixbX8xzdkBa7o5r9KUITRISAy4bbyrpBgub3m0mhwz6WLXDIwJZ6/w4Z/JijWjLQqlg8W1jYhCEgHZw==",
+      "requires": {
+        "video.js": "^5.6.0 || ^6.2.8 || ^7.0.2"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -10894,6 +11177,11 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuex": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.5.1.tgz",
+      "integrity": "sha512-w7oJzmHQs0FM9LXodfskhw9wgKBiaB+totOdb8sNzbTB2KDCEEwEs29NzBZFh/lmEK1t5tDmM1vtsO7ubG1DFw=="
+    },
     "watchpack": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",
@@ -11586,6 +11874,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xmldom": {
+      "version": "0.1.31",
+      "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz",
+      "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index b135f71..1747589 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "compression": "^1.7.4",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "polka": "^0.5.2",
+    "sirv": "^1.0.6",
+    "sirv-cli": "^1.0.6",
+    "video.js": "^7.8.4",
+    "videojs-youtube": "^2.6.1",
+    "vue": "^2.6.11",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..07c3929
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/global.css b/public/global.css
new file mode 100644
index 0000000..a49d422
--- /dev/null
+++ b/public/global.css
@@ -0,0 +1,79 @@
+html, body {
+	background-color: #000000;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	margin: 0;
+	font-family: 'Muli', sans-serif;
+	color: #cccccc;
+}
+
+#container {
+	width: 100%;
+	height: 100%;
+	padding: 1px 5px;
+}
+
+.quarter {
+	width: calc(50% - 5px);
+	float: left;
+}
+
+.stream {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	border: 3px solid #000000;
+}
+
+.wrapper {
+	padding-bottom: 56.55%;
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+}
+
+.active {
+	border: 3px solid #ff3333;
+}
+
+.title {
+	background-color: #000000;
+	opacity: 0.3;
+	border-bottom-right-radius: 4px;
+	padding: 0px 8px 5px 5px;
+	color: #ffffff;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+}
+
+.overlay {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 1500;
+}
+
+.live .overlay {
+	cursor: pointer;
+}
+
+.offline {
+	background-color: #111111;
+}
+
+.offline p {
+	position: absolute;
+	text-align: center;
+	top: 25%;
+	left: 25%;
+	width: 50%;
+	height: 50%;
+
+}
diff --git a/public/img/android-chrome-192x192.png b/public/img/android-chrome-192x192.png
new file mode 100644
index 0000000..6b33fc9
Binary files /dev/null and b/public/img/android-chrome-192x192.png differ
diff --git a/public/img/android-chrome-512x512.png b/public/img/android-chrome-512x512.png
new file mode 100644
index 0000000..e06bd45
Binary files /dev/null and b/public/img/android-chrome-512x512.png differ
diff --git a/public/img/apple-touch-icon.png b/public/img/apple-touch-icon.png
new file mode 100644
index 0000000..fd710cf
Binary files /dev/null and b/public/img/apple-touch-icon.png differ
diff --git a/public/img/favicon-16x16.png b/public/img/favicon-16x16.png
new file mode 100644
index 0000000..0fc14b4
Binary files /dev/null and b/public/img/favicon-16x16.png differ
diff --git a/public/img/favicon-32x32.png b/public/img/favicon-32x32.png
new file mode 100644
index 0000000..4060cd2
Binary files /dev/null and b/public/img/favicon-32x32.png differ
diff --git a/public/img/favicon.ico b/public/img/favicon.ico
new file mode 100644
index 0000000..decb15f
Binary files /dev/null and b/public/img/favicon.ico differ
diff --git a/public/img/mstile-150x150.png b/public/img/mstile-150x150.png
new file mode 100644
index 0000000..1e150e6
Binary files /dev/null and b/public/img/mstile-150x150.png differ
diff --git a/public/img/safari-pinned-tab.svg b/public/img/safari-pinned-tab.svg
new file mode 100644
index 0000000..efa1edc
--- /dev/null
+++ b/public/img/safari-pinned-tab.svg
@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1706.667" height="1706.667" viewBox="0 0 1280.000000 1280.000000"><path d="M0 182.8v182.9l182.8-.1 182.7-.1.1-182.8.1-182.7H0v182.8zM457 182.8v182.9h366V0H457v182.8zM914.4 182.7l.1 182.8 182.8.1 182.7.1V0H914.3l.1 182.7zM0 640v183l182.8-.2 182.7-.3.1-182.7.1-182.8H0v183zM457 640v183h366V457H457v183zM914.7 457.7c-.2.5-.4 82.8-.4 183V823H1280V457h-182.4c-100.4 0-182.7.3-182.9.7zM0 1097.2V1280H365.7l-.1-182.8-.1-182.7-182.7-.1L0 914.3v182.9zM457 1097.2V1280h366l-.2-182.8-.3-182.7-182.7-.1-182.8-.1v182.9zM914.3 1097.2V1280H1280V914.3H914.3v182.9z"/></svg>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 4123528..8c5a8b5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,16 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+      <link rel='icon' type='image/png' href='/favicon.png'>
+      <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
+      <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+      <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
+      <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
+      <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
+      <script src="//www.youtube.com/iframe_api"></script>
+      <script src= "//player.twitch.tv/js/embed/v1.js"></script>
+      <link href="//fonts.googleapis.com/css?family=Muli" rel="stylesheet">
+      <link rel='stylesheet' href='/global.css'>
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..3fbc798
--- /dev/null
+++ b/server.js
@@ -0,0 +1,16 @@
+const sirv = require('sirv');
+const polka = require('polka');
+const compress = require('compression')();
+
+// Init `sirv` handler
+const assets = sirv('dist', {
+  'maxAge': 31536000, // 1Y
+  'immutable': true
+});
+
+polka()
+  .use(compress, assets)
+  .listen(8130, err => {
+    if (err) throw err;
+    console.log('> Running on localhost:8130');
+  });
diff --git a/src/App.vue b/src/App.vue
index 55df315..bd44da8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,43 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Playing />
+    <div id="container">
+
+      <Live title="Sky News" id="skynews" src="http://skydvn-sn-mobile-prod.skydvn.com/skynews/1404/latest.m3u8#"/>
+      <Live title="BBC News" id="bbcnews24"
+            src="https://a.files.bbci.co.uk/media/live/manifesto/audio_video/simulcast/hls/uk/abr_hdtv/ak/bbc_news24.m3u8#"/>
+      <Youtube title="EuroNews" id="euronews"
+               src="https://www.youtube.com/embed/PpOdhP4Ah0c?enablejsapi=1&autoplay=1&mute=1&controls=0&fs=0&modestbranding=1&cc_load_policy=1"/>
+      <Live title="BBC Parliament" id="bbcparliament"
+            src="https://a.files.bbci.co.uk/media/live/manifesto/audio_video/simulcast/hls/uk/abr_tv/ak/bbc_parliament.m3u8#"/>
+      <Live title="Bloomberg" id="bloomberg"
+            src="https://liveprodeuwest.akamaized.net/eu1/Channel-EUTVqvs-AWS-ireland-1/Source-EUTVqvs-1000-1_live.m3u8#"/>
+
+      <Twitch title="twitch.tv/rukpolitics" id="rukpolitics" channel="rukpolitics"/>
+      <Twitch title="twitch.tv/ukcommons" id="ukcommons" channel="ukcommons"/>
+      <Twitch title="twitch.tv/democracylive" id="democracylive" channel="democracylive"/>
+    </div>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+
+import Live from "@/components/Live";
+import Twitch from "@/components/Twitch";
+import Youtube from "@/components/Youtube";
+import Playing from "@/components/Playing";
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    Playing,
+    Live,
+    Twitch,
+    Youtube
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 879051a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/Live.vue b/src/components/Live.vue
new file mode 100644
index 0000000..b2381bf
--- /dev/null
+++ b/src/components/Live.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="quarter" @click="handleClick">
+    <div class="wrapper">
+      <div class="stream live" :class="active">
+        <div class="overlay"></div>
+        <div class="title">{{ title }}</div>
+        <video :id="fullId" class="video-js vjs-16-9" autoplay muted preload="auto" :data-setup='JSON.stringify(dataSetup)'>
+          <source :src="src" type="application/x-mpegURL">
+        </video>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import videojs from 'video.js';
+import {mapActions, mapGetters} from 'vuex';
+
+export default {
+  name: "Live", data() {
+    return {
+      fullId: '',
+      active: '',
+      dataSetup: {"youtube": {"ytControls": 0}},
+      player: null
+    }
+  }, props: ['id', 'src', 'title'],
+  computed: {
+    ...mapGetters(['getPlaying'])
+  },
+  watch: {
+    getPlaying: 'playingChanged'
+  },
+  methods: {
+    handleClick: function () {
+      this.setPlaying(this.fullId);
+    },
+    playingChanged:function(e) {
+      console.log(`Playing changed ${this.id}:`, e);
+
+      this.active = (this.fullId !== '' && e === this.fullId) ? 'active' : '';
+      if (this.player) {
+        this.mute();
+
+        if (this.active) {
+          this.unMute();
+        }
+      }
+    },
+    mute: function () {
+      console.log(`${this.fullId} - mute`);
+      this.player.muted(true);
+
+    },
+    unMute: function () {
+      console.log(`${this.fullId} - unmute`);
+      this.player.muted(false)
+    }, ...mapActions(['setPlaying']),
+  },
+  created() {
+    console.log('>> created Live');
+    this.fullId = `${this.id}-live`;
+  },
+  mounted() {
+    try {
+      this.player = videojs(this.fullId);
+
+    } catch (e) {
+      console.log(e);
+    }
+
+    console.log(`mounted ${this.fullId} player`);
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Playing.vue b/src/components/Playing.vue
new file mode 100644
index 0000000..56c693c
--- /dev/null
+++ b/src/components/Playing.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    Playing:{{ getPlaying }}
+  </div>
+</template>
+
+<script>
+import { mapGetters} from 'vuex';
+
+export default {
+  name: "Playing", computed: {
+    ...mapGetters(['getPlaying'])
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Twitch.vue b/src/components/Twitch.vue
new file mode 100644
index 0000000..b63ea89
--- /dev/null
+++ b/src/components/Twitch.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="quarter"  @click="handleClick">
+    <div class="wrapper">
+      <div class="stream live twitch" :class="active" data-video-id="4" :id="fullId">
+        <div class="overlay"></div>
+        <div class="title">{title}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+name: "Twitch", data() {
+    return {
+      fullId: '',
+      active: '',
+      player: null
+    }
+  }, props: ['id', 'channel', 'title'],
+  computed: {
+    ...mapGetters(['getPlaying'])
+  },
+  watch: {
+    getPlaying: 'playingChanged'
+  },
+  methods: {
+    handleClick: function () {
+      this.setPlaying(this.fullId);
+    },
+    playingChanged:function(e) {
+      console.log(`Playing changed ${this.id}:`, e);
+
+      this.active = (this.fullId !== '' && e === this.fullId) ? 'active' : '';
+      if (this.player) {
+        this.mute();
+
+        if (this.active) {
+          this.unMute();
+        }
+      }
+    },
+    mute: function () {
+      console.log(`${this.fullId} - mute`);
+      this.player.setMuted(true);
+
+    },
+    unMute: function () {
+      console.log(`${this.fullId} - unmute`);
+      this.player.setMuted(false);
+    }, ...mapActions(['setPlaying']),
+  },
+  created() {
+    console.log('>> created Live');
+    this.fullId = `${this.id}-twitch`;
+  },
+  mounted() {
+    try {
+      // eslint-disable-next-line no-undef
+      this.player = new Twitch.Player(this.fullId, {
+        'channel': this.channel,
+        'muted': true,
+        'width': '100%',
+        'height': '100%'
+      });
+
+    } catch (e) {
+      console.log(e);
+    }
+
+    console.log(`mounted ${this.fullId} player`);
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Youtube.vue b/src/components/Youtube.vue
new file mode 100644
index 0000000..c5f9462
--- /dev/null
+++ b/src/components/Youtube.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="quarter" @click="handleClick">
+
+    <div class="wrapper">
+      <div class="stream live youtube" :class="active" :data-youtube-id="fullId">
+        <div class="overlay"></div>
+        <div class="title">{{title}}</div>
+
+        <iframe allow="autoplay" :title="title" :id="fullId" type="text/html" frameborder="0" width="100%" height="100%"
+                :src="src"></iframe>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {mapActions, mapGetters} from "vuex";
+
+export default {
+name: "Youtube", data() {
+    return {
+      fullId: '',
+      active: '',
+      dataSetup: {"youtube": {"ytControls": 0}},
+      player: null
+    }
+  }, props: ['id', 'src', 'title'],
+  computed: {
+    ...mapGetters(['getPlaying'])
+  },
+  watch: {
+    getPlaying: 'playingChanged'
+  },
+  methods: {
+    handleClick: function () {
+      this.setPlaying(this.fullId);
+    },
+    playingChanged:function(e) {
+      console.log(`Playing changed ${this.id}:`, e);
+
+      this.active = (this.fullId !== '' && e === this.fullId) ? 'active' : '';
+      if (this.player) {
+        this.mute();
+
+        if (this.active) {
+          this.unMute();
+        }
+      }
+    },
+    mute: function () {
+      console.log(`${this.fullId} - mute`);
+      this.player.mute();
+
+    },
+    unMute: function () {
+      console.log(`${this.fullId} - unmute`);
+      this.player.unMute();
+    }, ...mapActions(['setPlaying']),
+  },
+  created() {
+    console.log('>> created Live');
+    this.fullId = `${this.id}-yt`;
+  },
+  mounted() {
+    try {
+      // eslint-disable-next-line no-undef
+      this.player = new YT.Player(this.fullId, {
+        'events': {
+          'onReady': function (event) {
+            console.log('READY!!');
+            event.target.mute();
+            //  mute();
+          }
+        }
+      });
+
+      // console.log(`${fullId} Player`, player);
+
+    } catch (e) {
+      console.log(e);
+    }
+
+    console.log(`mounted ${this.fullId} player`);
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/main.js b/src/main.js
index 63eb05f..5e59b71 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import store from './store'
 
 Vue.config.productionTip = false
 
 new Vue({
+  store,
   render: h => h(App),
 }).$mount('#app')
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..5794012
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,25 @@
+/**
+ * Created by WebStorm.
+ * User: martin
+ * Date: 02/09/2020
+ * Time: 09:40
+
+ */
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+
+import multiview from "@/store/modules/multiview";
+
+Vue.use(Vuex);
+
+
+export default new Vuex.Store({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {
+    multiview
+  }
+})
diff --git a/src/store/modules/multiview.js b/src/store/modules/multiview.js
new file mode 100644
index 0000000..ccc3995
--- /dev/null
+++ b/src/store/modules/multiview.js
@@ -0,0 +1,34 @@
+const state = {
+  Playing : ""
+};
+
+const getters = {
+  //
+  // allWeather:(state) => state.weather
+  getPlaying:(state) => state.Playing
+};
+
+
+const actions = {
+  //
+
+  async setPlaying({commit}, id) {
+    console.log('>> setPlaying', id);
+
+    commit('updatePlaying', id);
+  }
+
+};
+
+const mutations = {
+  //
+  // setWeather:(state, weather) => (state.weather = weather),
+  updatePlaying:(state, id) => (state.Playing = id)
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations
+}