diff --git a/package-lock.json b/package-lock.json
index 97800d5..b349240 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,9 +9,13 @@
       "version": "0.0.0",
       "dependencies": {
         "buffer": "^6.0.3",
-        "hls.js": "^1.1.5",
+        "dompurify": "^2.3.10",
+        "mux.js": "^6.2.0",
         "peerjs": "^1.4.6",
         "pinia": "^2.0.16",
+        "readable-stream": "^4.1.0",
+        "shaka-player": "^4.1.2",
+        "stream-browserify": "^3.0.0",
         "vue": "^3.2.31",
         "xml-js": "^1.6.11"
       },
@@ -32,6 +36,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.3.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.3.17.tgz",
@@ -160,6 +175,17 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -207,6 +233,21 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
+    "node_modules/dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
+    "node_modules/eme-encryption-scheme-polyfill": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.1.0.tgz",
+      "integrity": "sha512-vdkP1WyZTBI2LEU+FvbYrjawkz+5fOgSY0qicaWjs/ouVzBKvdbUHfbZ1mLHFOi3l+cdvSq4U6K55mD7J/SEbg=="
+    },
     "node_modules/esbuild": {
       "version": "0.14.51",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.51.tgz",
@@ -567,6 +608,14 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -592,6 +641,15 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -604,11 +662,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/hls.js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.2.0.tgz",
-      "integrity": "sha512-QIEQIUpBRhcpBMq3NA+/qozG8lbNfVekuX7kCMUlhiVu4382xFWsnwcuBe/CA4Gp/wB/pf2aRBaGRFlxh/FN8g=="
-    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -628,6 +681,11 @@
         }
       ]
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
     "node_modules/is-core-module": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -648,6 +706,30 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
+    "node_modules/mux.js": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.2.0.tgz",
+      "integrity": "sha512-SKuxIcbmK/aJoz78aQNuoXY8R/uEPm1gQMqWTXL6DNl7oF8UPjdt/AunXGkPQpBouGWKDgL/TzSl2VV5NuboRg==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -781,6 +863,30 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.1.0.tgz",
+      "integrity": "sha512-sVisi3+P2lJ2t0BPbpK629j8wRW06yKGJUcaLAGXPAUhyUxVJm7VsCTit1PFgT4JHUDMrGNR+ZjSKpzGaRF3zw==",
+      "dependencies": {
+        "abort-controller": "^3.0.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -825,6 +931,25 @@
         "npm": ">=3.10.0"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -835,6 +960,17 @@
       "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
       "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
     },
+    "node_modules/shaka-player": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-4.1.2.tgz",
+      "integrity": "sha512-rTj+YMSyO+kbstll3P+8qYxrsaZBDsQlz5xVz1D4A66yJvv9ZqhDFDiEhL6iII5V7BFNA+dOdsR8yKuYHWi8NQ==",
+      "dependencies": {
+        "eme-encryption-scheme-polyfill": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -856,6 +992,36 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "node_modules/stream-browserify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
+      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
+      "dependencies": {
+        "inherits": "~2.0.4",
+        "readable-stream": "^3.5.0"
+      }
+    },
+    "node_modules/stream-browserify/node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -873,6 +1039,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "node_modules/vite": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.4.tgz",
@@ -957,6 +1128,14 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.9.tgz",
       "integrity": "sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg=="
     },
+    "@babel/runtime": {
+      "version": "7.18.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz",
+      "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
     "@swc/helpers": {
       "version": "0.3.17",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.3.17.tgz",
@@ -1076,6 +1255,14 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -1095,6 +1282,21 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
+    "dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
+    "eme-encryption-scheme-polyfill": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.1.0.tgz",
+      "integrity": "sha512-vdkP1WyZTBI2LEU+FvbYrjawkz+5fOgSY0qicaWjs/ouVzBKvdbUHfbZ1mLHFOi3l+cdvSq4U6K55mD7J/SEbg=="
+    },
     "esbuild": {
       "version": "0.14.51",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.51.tgz",
@@ -1268,6 +1470,11 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -1286,6 +1493,15 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "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"
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -1295,16 +1511,16 @@
         "function-bind": "^1.1.1"
       }
     },
-    "hls.js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.2.0.tgz",
-      "integrity": "sha512-QIEQIUpBRhcpBMq3NA+/qozG8lbNfVekuX7kCMUlhiVu4382xFWsnwcuBe/CA4Gp/wB/pf2aRBaGRFlxh/FN8g=="
-    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
     },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
     "is-core-module": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
@@ -1322,6 +1538,23 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "requires": {
+        "dom-walk": "^0.1.0"
+      }
+    },
+    "mux.js": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.2.0.tgz",
+      "integrity": "sha512-SKuxIcbmK/aJoz78aQNuoXY8R/uEPm1gQMqWTXL6DNl7oF8UPjdt/AunXGkPQpBouGWKDgL/TzSl2VV5NuboRg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      }
+    },
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -1387,6 +1620,24 @@
       "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
+    },
+    "readable-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.1.0.tgz",
+      "integrity": "sha512-sVisi3+P2lJ2t0BPbpK629j8wRW06yKGJUcaLAGXPAUhyUxVJm7VsCTit1PFgT4JHUDMrGNR+ZjSKpzGaRF3zw==",
+      "requires": {
+        "abort-controller": "^3.0.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
+      "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -1415,6 +1666,11 @@
         "sdp": "^2.6.0"
       }
     },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -1425,6 +1681,14 @@
       "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
       "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
     },
+    "shaka-player": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-4.1.2.tgz",
+      "integrity": "sha512-rTj+YMSyO+kbstll3P+8qYxrsaZBDsQlz5xVz1D4A66yJvv9ZqhDFDiEhL6iII5V7BFNA+dOdsR8yKuYHWi8NQ==",
+      "requires": {
+        "eme-encryption-scheme-polyfill": "^2.0.5"
+      }
+    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1440,6 +1704,35 @@
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
+    "stream-browserify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-3.0.0.tgz",
+      "integrity": "sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==",
+      "requires": {
+        "inherits": "~2.0.4",
+        "readable-stream": "^3.5.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -1451,6 +1744,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "vite": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.4.tgz",
diff --git a/package.json b/package.json
index 49a0c1a..d43da0a 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "buffer": "^6.0.3",
-    "hls.js": "^1.1.5",
+    "dompurify": "^2.3.10",
+    "mux.js": "^6.2.0",
     "peerjs": "^1.4.6",
     "pinia": "^2.0.16",
+    "readable-stream": "^4.1.0",
+    "shaka-player": "^4.1.2",
+    "stream-browserify": "^3.0.0",
     "vue": "^3.2.31",
     "xml-js": "^1.6.11"
   },
diff --git a/src/App.vue b/src/App.vue
index 2fb199e..6e3c2d0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { ref, watch, reactive, onBeforeMount, onMounted } from 'vue';
 
 /* Components */
 import NavBar from '@/components/NavBar.vue';
+import Player from '@/components/Player.vue';
 import StatusBar from '@/components/StatusBar.vue';
 import NowPlaying from '@/components/NowPlaying.vue';
 import Genres from '@/components/Genres.vue';
@@ -35,8 +36,6 @@ const store = useStore(),
 const genreid = ref(''),
   path = ref(location.pathname);
 
-const audio = ref(null);
-
 /* Functions */
 function parseUrl() {
   const loc = location.pathname.split('/'),
@@ -75,10 +74,6 @@ function parseUrl() {
   }
 }
 
-function setTime(t) {
-  audio.value.currentTime = (t / 100) * player.state.duration;
-}
-
 function addSong(s) {
   data.state.urls.push(s);
 
@@ -105,10 +100,6 @@ function playList(a) {
 }
 
 function playNext(u) {
-  if (window.hls) {
-    window.hls.destroy();
-  }
-
   player.state.src = '';
 
   const now = data.state.urls.filter(s => s.url === data.state.url)[0],
@@ -156,15 +147,11 @@ async function getSong(e) {
   data.state.artist = json.uploader.replace(' - Topic', '');
   data.state.artistUrl = json.uploaderUrl;
   player.state.duration = json.duration;
+  player.state.hls = json.hls;
+  player.state.streams = json.audioStreams;
   data.state.url = e;
 
   await getNext(hash);
-
-  Stream({
-    hls: json.hls,
-    stream: json.audioStreams,
-    duration: json.duration,
-  });
 }
 
 async function getAlbum(e) {
@@ -256,80 +243,6 @@ async function getNext(hash) {
   }
 }
 
-async function Stream(res) {
-  console.log(res);
-  if (
-    store.dash === 'true' &&
-    window.MediaSource !== undefined &&
-    res.stream.length > 0
-  ) {
-    /* WIP */
-
-    const { useDash } = await import('@/scripts/dash.js');
-
-    console.log(useDash);
-
-    const rawDash = useDash(res.stream, res.duration),
-      blob = new Blob([rawDash], { type: 'application/dash+xml' }),
-      dashUrl = URL.createObjectURL(blob);
-
-    data.state.src = [
-      {
-        url: dashUrl,
-        mimeType: 'application/dash+xml',
-      },
-    ];
-
-    data.state.src.push(...res.stream);
-
-    audio.value.load();
-  } else {
-    window.Hls = await import('hls.js');
-
-    if (Hls.isSupported() && store.hls !== 'false') {
-      window.hls = new Hls.default();
-
-      window.hls.attachMedia(audio.value);
-
-      window.hls.on(Hls.default.Events.MEDIA_ATTACHED, () => {
-        window.hls.loadSource(res.hls);
-      });
-    } else {
-      data.state.src = res.stream;
-      audio.value.load();
-    }
-  }
-}
-
-function audioCanPlay() {
-  useLazyLoad();
-
-  if (audio.value.paused) {
-    player.toggle('play');
-  }
-
-  if (location.pathname != '/playlist') {
-    useRoute(data.state.url);
-  }
-
-  document.title = `Playing: ${data.state.title} by ${data.state.artist}`;
-}
-
-function SaveTrack(e) {
-  useUpdatePlaylist(
-    e,
-    {
-      url: data.state.url,
-      title: data.state.title,
-    },
-    e => {
-      if (e === true) {
-        console.log('Added Song To ' + e);
-      }
-    },
-  );
-}
-
 function setMetadata() {
   if ('mediaSession' in navigator) {
     const now = data.state.urls.filter(u => u.url === data.state.url)[0];
@@ -364,21 +277,20 @@ function setMetadata() {
   }
 }
 
-watch(
-  () => player.state.play,
-  () => {
-    if (audio.value.paused) {
-      player.state.status = 'pause';
-      audio.value.play().catch(err => {
-        console.error(err);
-        player.state.status = 'play';
-      });
-    } else {
-      player.state.status = 'play';
-      audio.value.pause();
-    }
-  },
-);
+function SaveTrack(e) {
+  useUpdatePlaylist(
+    e,
+    {
+      url: data.state.url,
+      title: data.state.title,
+    },
+    e => {
+      if (e === true) {
+        console.log('Added Song To ' + e);
+      }
+    },
+  );
+}
 
 onBeforeMount(() => {
   if (store.theme) {
@@ -387,10 +299,6 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
-  if (window.hls) {
-    window.hls.destroy();
-  }
-
   useLazyLoad();
 
   /* Event Listeners for Lazy Loading */
@@ -408,35 +316,6 @@ onMounted(() => {
     }
   };
 
-  /* Media Session Controls */
-  if ('mediaSession' in navigator) {
-    navigator.mediaSession.setActionHandler('play', () => {
-      player.state.status = 'pause';
-      audio.value.play().catch(err => {
-        alert(err);
-        player.state.status = 'play';
-      });
-    });
-
-    navigator.mediaSession.setActionHandler('pause', () => {
-      audio.value.pause();
-      player.state.status = 'play';
-    });
-
-    navigator.mediaSession.setActionHandler('previoustrack', () => {
-      if (data.state.urls.length > 2) {
-        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
-        getSong(data.state.urls[i - 1].url);
-      }
-    });
-    navigator.mediaSession.setActionHandler('nexttrack', () => {
-      if (data.state.urls.length > 2) {
-        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
-        getSong(data.state.urls[i + 1].url);
-      }
-    });
-  }
-
   /* Setup IndexedDB for storing custom playlists */
   useSetupDB();
 
@@ -494,23 +373,9 @@ onMounted(() => {
 
   <Info v-if="player.state.info" :text="data.state.description" />
 
-  <StatusBar @save="SaveTrack" @change-time="setTime" />
+  <StatusBar @save="SaveTrack" />
 
-  <audio
-    id="audio"
-    ref="audio"
-    :volume="player.state.vol"
-    @canplay="audioCanPlay"
-    @timeupdate="player.setTime($event.target.currentTime)"
-    @ended="playNext"
-    autoplay>
-    <source
-      v-if="store.dash === 'true' || !(store.getItem('hls') != 'false')"
-      v-for="src in data.state.src"
-      :key="src.url"
-      :src="src.url"
-      :type="src.mimeType" />
-  </audio>
+  <Player @ended="playNext" />
 </template>
 
 <style>
diff --git a/src/components/Player.vue b/src/components/Player.vue
new file mode 100644
index 0000000..288b264
--- /dev/null
+++ b/src/components/Player.vue
@@ -0,0 +1,153 @@
+<script setup>
+import { ref, watch, onMounted, onUpdated } from 'vue';
+import muxjs from 'mux.js';
+window.muxjs = muxjs;
+
+import { useLazyLoad, useStore, useRoute } from '@/scripts/util.js';
+
+import { useData, usePlayer } from '@/stores/player.js';
+
+defineEmits(['ended']);
+
+const player = usePlayer(),
+  data = useData(),
+  store = useStore();
+
+const audio = ref(null);
+
+function audioCanPlay() {
+  useLazyLoad();
+
+  player.state.status = 'pause';
+  audio.value.play().catch(err => {
+    console.error(err);
+    player.state.status = 'play';
+  });
+
+  if (location.pathname != '/playlist') {
+    useRoute(data.state.url);
+  }
+
+  document.title = `Playing: ${data.state.title} by ${data.state.artist}`;
+}
+
+async function Stream() {
+  const res = player.state,
+    shaka = import('shaka-player/dist/shaka-player.compiled.js');
+
+  let url, mime;
+
+  if (window.MediaSource !== undefined && res.streams.length > 0) {
+    const { useDash } = await import('../scripts/dash.js');
+
+    const dash = useDash(res.streams, res.duration);
+
+    url = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash);
+    mime = 'application/dash+xml';
+  } else if (res.hls) {
+    url = res.hls;
+    mime = 'application/x-mpegURL';
+  } else if (res.streams.length > 0) {
+    url = res.streams[0].url;
+    mime = res.streams[0].mimeType;
+  }
+
+  if (!window.audioPlayer) {
+    shaka
+      .then(shaka => shaka.default)
+      .then(shaka => {
+        shaka.polyfill.installAll();
+
+        if (shaka.Player.isBrowserSupported) {
+          const audioPlayer = new shaka.Player(audio.value);
+
+          const codecs = [];
+
+          audioPlayer.configure({
+            preferredAudioCodecs: ['opus', 'mp4a'],
+            manifest: {
+              disableVideo: true,
+            },
+          });
+
+          window.audioPlayer = audioPlayer;
+        }
+      });
+  }
+
+  if (url) {
+    window.audioPlayer.load(url, 0, mime).catch(err => {
+      console.error('Code: ' + err.code, err);
+    });
+  }
+}
+
+watch(
+  () => player.state.play,
+  () => {
+    if (audio.value.paused) {
+      player.state.status = 'pause';
+      audio.value.play().catch(err => {
+        console.error(err);
+        player.state.status = 'play';
+      });
+    } else {
+      player.state.status = 'play';
+      audio.value.pause();
+    }
+  },
+);
+
+watch(() => player.state.streams, Stream);
+
+watch(
+  () => player.state.currentTime,
+  () => {
+    console.log(player.state.currentTime);
+    audio.value.currentTime = player.state.currentTime;
+  },
+);
+
+onMounted(() => {
+  Stream();
+
+  if ('mediaSession' in navigator) {
+    navigator.mediaSession.setActionHandler('play', () => {
+      player.state.status = 'pause';
+      audio.value.play().catch(err => {
+        alert(err);
+        player.state.status = 'play';
+      });
+    });
+
+    navigator.mediaSession.setActionHandler('pause', () => {
+      audio.value.pause();
+      player.state.status = 'play';
+    });
+
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+      if (data.state.urls.length > 2) {
+        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        getSong(data.state.urls[i - 1].url);
+      }
+    });
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+      if (data.state.urls.length > 2) {
+        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        getSong(data.state.urls[i + 1].url);
+      }
+    });
+  }
+});
+</script>
+
+<template>
+  <audio
+    id="audio"
+    ref="audio"
+    :volume="player.state.vol"
+    @canplay="audioCanPlay"
+    @timeupdate="player.setTime($event.target.currentTime)"
+    @ended="$emit('ended')"
+    autoplay></audio>
+</template>
diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue
index 8e6db6b..9d549f4 100644
--- a/src/components/SongItem.vue
+++ b/src/components/SongItem.vue
@@ -3,6 +3,8 @@ import { ref, onMounted } from 'vue';
 
 import { useRand } from '../scripts/colors.js';
 
+import { useArtist } from '@/stores/results.js';
+
 const rand = useRand();
 
 const props = defineProps({
@@ -46,7 +48,7 @@ const openSong = el => {
   };
 
 onMounted(() => {
-  console.log(props);
+  console.log(props.channel, useArtist().state.playlistId);
 });
 </script>
 <template>
@@ -56,8 +58,17 @@ onMounted(() => {
     <span class="flex content">
       <h4>{{ title }}</h4>
       <a
-        :href="channel"
-        @click.prevent="$emit('get-artist', channel.replace('/channel/', ''))"
+        :href="
+          channel != '[]' ? channel : '/channel/' + useArtist().state.playlistId
+        "
+        @click.prevent="
+          $emit(
+            'get-artist',
+            channel != '[]'
+              ? channel.replace('/channel/', '')
+              : useArtist().state.playlistId,
+          )
+        "
         class="ign">
         <i class="ign">{{ author.replaceAll(' - Topic', '') }}</i>
       </a>
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index 9bd8707..568c524 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -11,7 +11,7 @@ import { usePlayer } from '../stores/player.js';
 const player = usePlayer(),
   store = useStore();
 
-const emit = defineEmits(['vol', 'save', 'change-time']),
+const emit = defineEmits(['save']),
   showme = reactive({
     menu: false,
     pl: false,
@@ -83,7 +83,10 @@ function Save() {
           type="range"
           name="statusbar-progress"
           max="100"
-          @input="$emit('change-time', $event.target.value)" />
+          @input="
+            player.state.currentTime =
+              ($event.target.value / 100) * player.state.duration
+          " />
       </div>
     </div>
 
diff --git a/src/scripts/dash.js b/src/scripts/dash.js
index 4ac38d0..d335e59 100644
--- a/src/scripts/dash.js
+++ b/src/scripts/dash.js
@@ -1,4 +1,4 @@
-import { Buffer } from 'buffer';
+import { Buffer } from 'buffer/';
 window.Buffer = Buffer;
 import { json2xml } from 'xml-js';
 
diff --git a/src/scripts/fetch.js b/src/scripts/fetch.js
index 9c11146..7eb90c7 100644
--- a/src/scripts/fetch.js
+++ b/src/scripts/fetch.js
@@ -1,4 +1,4 @@
-import { useStore } from './util.js';
+import { useStore, useSanitize } from './util.js';
 
 export function getPipedQuery() {
   const papi = new URLSearchParams(location.search).get('pipedapi');
@@ -7,7 +7,7 @@ export function getPipedQuery() {
     return '';
   }
 
-  return '?pipedapi=' + papi;
+  return '?pipedapi=' + useSanitize(papi);
 }
 
 export async function getJson(url) {
@@ -27,9 +27,7 @@ export async function getJson(url) {
     );
     console.error(res.message);
   } else if (res) {
-    return res;
-  } else {
-    return;
+    return JSON.parse(useSanitize(JSON.stringify(res)));
   }
 }
 
diff --git a/src/scripts/util.js b/src/scripts/util.js
index 889bfec..59bb7d7 100644
--- a/src/scripts/util.js
+++ b/src/scripts/util.js
@@ -1,3 +1,9 @@
+import DOMPurify from 'dompurify';
+
+export function useSanitize(txt) {
+  return DOMPurify.sanitize(txt);
+}
+
 export function useRoute(l) {
   history.pushState({}, '', l);
 }
diff --git a/src/stores/player.js b/src/stores/player.js
index 202091d..6c39a06 100644
--- a/src/stores/player.js
+++ b/src/stores/player.js
@@ -26,8 +26,11 @@ export const usePlayer = defineStore('player', () => {
     loop: false,
     play: false,
     status: 'play',
+    hls: '',
+    streams: [],
     duration: 0,
     time: 0,
+    currentTime: 0,
     playlist: false,
     lyrics: false,
     info: false,
diff --git a/vite.config.js b/vite.config.js
index 26b4596..89fa904 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,6 +9,10 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      stream: 'stream-browserify',
     },
   },
+  build: {
+    sourceMap: true,
+  },
 });