Updated version

.gitignore

@@ -0,0 +1 @@
+build/

README.md

@@ -6,9 +6,44 @@ This addon replaces the video player from this sides with the native player buil
 This has the advantage, that no advertising or popups are shown when trying to interact with the video (playing, skipping, ...) or some sites are showing them even if you do nothing.
 Additionally this enables you to download the video by right-clicking it and just choose the download option.
 
-Supported streaming providers (for a complete list of all supported websites, see [here](SUPPORTED)):
-- [streamtape.com](https://streamtape.com/)
-- [vidoza.net](https://vidoza.net/)
+<p align="center">
+  <a href="https://addons.mozilla.org/de/firefox/addon/stream-bypass/">
+    <img src="https://img.shields.io/amo/users/stream-bypass?label=Firefox%20Addon%20Store&style=flat-square" alt="Firefox Addon Store">
+  </a>
+  <a href="https://github.com/ByteDream/stream-bypass/releases/latest">
+    <img src="https://img.shields.io/github/downloads/ByteDream/stream-bypass/total?label=GitHub%20Downloads&style=flat-square" alt="GitHub Downloads">
+  </a>
+  <a href="https://discord.gg/gUWwekeNNg">
+    <img src="https://img.shields.io/discord/915659846836162561?label=discord&style=flat-square" alt="Discord">
+  </a>
+</p>
+
+Supported streaming providers (for a complete list of all supported websites, see [here](SUPPORTED) or in [show all](#all-supported-websites) below):
+- [streamtape.com](https://streamtape.com)
+- [vivo.sx](https://vivo.sx)
+- [voe.sx](https://voe.sx)
+
+<details id="all-supported-websites">
+    <summary><b>Show all</b></summary>
+    <ul>
+		<li><a href="https://evoload.io">evoload.io</a></li>
+		<li><a href="https://mcloud.to">mcloud.to</a></li>
+		<li><a href="https://mixdrop.co">mixdrop.co</a></li>
+		<li><a href="https://newgrounds.com">newgrounds.com</a></li>
+		<li><a href="https://streamtape.com">streamtape.com</a></li>
+		<li><a href="https://streamzz.to">streamzz.to</a></li>
+		<li><a href="https://thevideome.com">thevideome.com</a></li>
+		<li><a href="https://vidlox.me">vidlox.me</a></li>
+		<li><a href="https://vidstream.pro">vidstream.pro</a></li>
+		<li><a href="https://vidoza.net">vidoza.net</a></li>
+		<li><a href="https://vivo.st">vivo.st</a></li>
+		<li><a href="https://vivo.sx">vivo.sx</a></li>
+		<li><a href="https://voe.sx">voe.sx</a></li>
+		<li><a href="https://vupload.com">vupload.com</a></li>
+</ul>
+</details>
+
+---
 
 <details id="example">
     <summary><b>How it's working</b></summary>
@@ -16,9 +51,10 @@ Supported streaming providers (for a complete list of all supported websites, se
 </details>
 
 The addon was tested on
-- Firefox (92.0)
-- Chromium (92.0)
-- Opera (78.0)
+- Firefox (96.0.3)
+- Ungoogled Chromium (97.0)
+- Vivaldi (5.0)
+- Opera (83.0)
 
 ## Installing
 
@@ -28,7 +64,7 @@ Install the addon directly from the [firefox addon store](https://addons.mozilla
 
 ### Chromium / Google Chrome
 
-1. Download the `stream-bypass-<version>.zip` file from the [latest release](https://github.com/ByteDream/stream-bypass/releases/latest) and unzip it (with [7zip](https://www.7-zip.org/) or something like that).
+1. Download the zipfile from the [latest release](https://smartrelease.bytedream.org/github/ByteDream/stream-bypass/stream_bypass-{tag}.zip) and unzip it (with [7zip](https://www.7-zip.org/) or something like that).
 2. Go into your browser and type `chrome://extensions` in the address bar.
 3. Turn the developer mode in the top right corner on.
 4. Click Load unpacked.
@@ -36,7 +72,7 @@ Install the addon directly from the [firefox addon store](https://addons.mozilla
 
 ### Opera
 
-1. Download the `stream-bypass-<version>.zip` file from the [latest release](https://github.com/ByteDream/stream-bypass/releases/latest) and unzip it (with [7zip](https://www.7-zip.org/) or something like that).
+1. Download the zipfile from the [latest release](https://smartrelease.bytedream.org/github/ByteDream/stream-bypass/stream_bypass-{tag}.zip) and unzip it (with [7zip](https://www.7-zip.org/) or something like that).
 2. Go into your browser and type `opera://extensions` in the address bar.
 3. Turn the developer mode in the top right corner on.
 4. Click Load unpacked.

SUPPORTED

@@ -1,9 +1,12 @@
 evoload.io
+mcloud.to
 mixdrop.co
+newgrounds.com
 streamtape.com
 streamzz.to
 thevideome.com
 vidlox.me
+vidstream.pro
 vidoza.net
 vivo.st
 vivo.sx

build.py

@@ -1,8 +1,11 @@
 #!/usr/bin/python3
 
 import argparse
+import io
 import json
 import sys
+import urllib.request
+import zipfile
 from pathlib import Path
 import re
 import shutil
@@ -21,7 +24,8 @@ def load_matches():
         else:
             match = pattern.findall(line)
             if match:
-                matched.append(match[0])
+                if not line.strip().startswith('//'):
+                    matched.append(match[0])
             else:
                 break
 
@@ -33,7 +37,7 @@ def write_manifest():
     manifest = json.load(open('src/manifest.json', 'r'))
 
     for content_script in manifest['content_scripts']:
-        content_script['matches'] = [f'*://{match}/*' for match in matches]
+        content_script['matches'] = [f'*://*.{match}/*' for match in matches]
 
     json.dump(manifest, open('src/manifest.json', 'w'), indent=2)
 
@@ -42,6 +46,42 @@ def write_supported():
     open('SUPPORTED', 'w').writelines([f'{match}\n' for match in load_matches()])
 
 
+def write_readme():
+    firefox_pattern = re.compile(r'Mozilla Firefox (?P<version>.+)')
+    chromium_pattern = re.compile(r'(?P<version>\d+\.\d+)')
+    tested = {}
+
+    stdout, stderr = subprocess.Popen(['firefox', '--version'], stdout=subprocess.PIPE, stderr=subprocess.PIPE).communicate()
+    if stderr == b'':
+        tested['Firefox'] = re.search(firefox_pattern, stdout.decode('utf-8').replace('\n', '')).group('version')
+
+    for command, name in {'chromium': 'Ungoogled Chromium', 'vivaldi-stable': 'Vivaldi', 'opera': 'Opera'}.items():
+        stdout, stderr = subprocess.Popen([command, '--version'], stdout=subprocess.PIPE, stderr=subprocess.PIPE).communicate()
+        if stderr == b'':
+            tested[name] = re.search(chromium_pattern, stdout.decode('utf-8').replace('\n', '')).group('version')
+
+    # it this the right syntax if i want to read and write to a file? * dreams in python3.10 *
+    with open('README.md', 'r') as read_file:
+        readme = read_file.read()
+
+        # adds all available websites
+        all_providers_regex = r'(?<=<ul>\n)(.+?)(?=</ul>)'
+        domains = filter(lambda domain: domain != '', open('SUPPORTED', 'r').read().split('\n'))
+        all_providers = '\n'.join(f'\t\t<li><a href="https://{supported}">{supported}</a></li>' for supported in domains) + '\n'
+        readme = re.sub(all_providers_regex, all_providers, readme, flags=re.DOTALL)
+
+        # adds all installed browsers to the tested browser section. i'm just to lazy to seek out all browser versions manually
+        tested_browsers_regex = r'(?<=The addon was tested on\n)(.+?)(?=\n*## Installing)'
+        tested_browsers = '\n'.join(f'- {name} ({version})' for name, version in tested.items())
+        readme = re.sub(tested_browsers_regex, tested_browsers, readme, flags=re.DOTALL)
+
+        # rewrite the readme
+        with open('README.md', 'w') as write_file:
+            write_file.write(readme)
+            write_file.close()
+        read_file.close()
+
+
 def copy_built():
     if not shutil.which('tsc'):
         sys.stderr.write('The typescript compiler `tsc` could not be found')
@@ -71,6 +111,21 @@ def copy_built():
         elif file.suffix != '.ts':
             shutil.copy(str(file), str(build_file))
 
+    ext_path = Path('build', 'ext')
+    if not ext_path.is_dir():
+        ext_path.mkdir()
+
+    # download hls.js (version 1.1.1)
+    with zipfile.ZipFile(io.BytesIO(urllib.request.urlopen('https://github.com/video-dev/hls.js/releases/download/v1.1.1/release.zip').read())) as z:
+        open(ext_path.joinpath('hls.light.min.js'), 'wb').write(z.read('dist/hls.light.min.js'))
+        z.close()
+
+    # download popperjs core (version 2.10.2)
+    open(ext_path.joinpath('popper.min.js'), 'wb').write(urllib.request.urlopen('https://unpkg.com/@popperjs/core@2.10.2/dist/umd/popper.min.js').read())
+
+    # download tippy.js (version 6.3.7)
+    open(ext_path.joinpath('tippy-bundle.umd.min.js'), 'wb').write(urllib.request.urlopen('https://unpkg.com/tippy.js@6.3.7/dist/tippy-bundle.umd.min.js').read())
+
 
 def clean_build():
     for file in Path('src').rglob('*'):
@@ -81,6 +136,7 @@ def clean_build():
 if __name__ == '__main__':
     parser = argparse.ArgumentParser()
     parser.add_argument('-m', '--manifest', action='store_true', help='Builds the manifest.json file for addon information in ./src')
+    parser.add_argument('-r', '--readme', action='store_true', help='Updates the README.md with the currently installed ')
     parser.add_argument('-s', '--supported', action='store_true', help='Builds the SUPPORTED file with all supported domains in the current directory')
     parser.add_argument('-b', '--build', action='store_true', help='Creates a ./build folder and builds all typescript / sass files')
     parser.add_argument('-c', '--clean', action='store_true', help='Cleans the ./src folder from .js, .css and .map files')
@@ -89,6 +145,8 @@ if __name__ == '__main__':
 
     if parsed.manifest:
         write_manifest()
+    if parsed.readme:
+        write_readme()
     if parsed.supported:
         write_supported()
     if parsed.build:

src/index.ts

@@ -10,10 +10,12 @@ chrome.storage.local.get(['all', 'disabled'], function (result) {
     }
     // @ts-ignore
     for (let match of matches) {
-        if (window.location.href.indexOf(match[0]) !== -1) {
-            if (keys.indexOf('disabled') === -1 || result['disabled'].indexOf(match[0]) === -1) {
+        let domain = match[0] as string
+        if (window.location.href.indexOf(domain) !== -1) {
+            if (keys.indexOf('disabled') === -1 || result['disabled'].indexOf(domain) === -1) {
                 let regex = match[1] as RegExp
                 let matchClass = match[2] as Match
+                let reliability = match[3] as Reliability
 
                 let re
                 if (regex !== null) {
@@ -28,11 +30,13 @@ chrome.storage.local.get(['all', 'disabled'], function (result) {
                     if (regex === null) {
                         location.assign(document.body.innerHTML)
                     } else {
-                        location.assign(hasSuffix(re[0], 'm3u8') ? `https://bharadwajpro.github.io/m3u8-player/player/#${re[0]}`: re[0])
+                        // @ts-ignore
+                        location.assign(hasSuffix(re[0], 'm3u8') ? chrome.runtime.getURL(`res/hls.html?domain=${domain}&reliability=${reliability}#${re[0]}`) : re[0])
                     }
                 } else {
                     matchClass.match(re).then(function (path) {
-                        location.assign(hasSuffix(path, 'm3u8') ? `https://bharadwajpro.github.io/m3u8-player/player/#${path}`: path)
+                        // @ts-ignore
+                        location.assign(hasSuffix(path, 'm3u8') ? chrome.runtime.getURL(`res/hls.html?domain=${domain}&reliability=${reliability}#${path}`) : path)
                     })
                 }
             }

src/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "Stream Bypass",
   "author": "ByteDream",
-  "description": "",
-  "version": "1.1.4",
+  "description": "A multi-browser addon / extension for multiple streaming providers which redirects directly to the source video.",
+  "version": "1.6.0",
   "homepage_url": "https://github.com/ByteDream/stream-bypass",
   "browser_specific_settings": {
     "gecko": {
@@ -14,27 +14,32 @@
     {
       "all_frames": true,
       "matches": [
-        "*://evoload.io/*",
-        "*://mixdrop.co/*",
-        "*://streamtape.com/*",
-        "*://streamzz.to/*",
-        "*://thevideome.com/*",
-        "*://vidlox.me/*",
-        "*://vidoza.net/*",
-        "*://vivo.st/*",
-        "*://vivo.sx/*",
-        "*://voe.sx/*",
-        "*://vupload.com/*"
+        "*://*.evoload.io/*",
+        "*://*.mcloud.to/*",
+        "*://*.mixdrop.co/*",
+        "*://*.newgrounds.com/*",
+        "*://*.streamtape.com/*",
+        "*://*.streamzz.to/*",
+        "*://*.thevideome.com/*",
+        "*://*.vidlox.me/*",
+        "*://*.vidstream.pro/*",
+        "*://*.vidoza.net/*",
+        "*://*.vivo.st/*",
+        "*://*.vivo.sx/*",
+        "*://*.voe.sx/*",
+        "*://*.vupload.com/*"
       ],
       "js": [
         "match.js",
         "index.js"
-      ]
+      ],
+      "run_at": "document_end"
     }
   ],
   "permissions": [
     "storage"
   ],
+  "content_security_policy": "script-src 'self' blob:; object-src 'self'",
   "browser_action": {
     "default_icon": "icons/stream-bypass.png",
     "default_title": "Stream Bypass",

src/match.ts

@@ -1,3 +1,9 @@
+enum Reliability {
+    LOW = 1,
+    NORMAL,
+    HIGH
+}
+
 interface Match {
     match(match: RegExpMatchArray): Promise<string>
 }
@@ -18,12 +24,39 @@ class Evoload implements Match {
     }
 }
 
+class MCloud implements Match {
+    async match(match: RegExpMatchArray): Promise<string> {
+        const code = window.location.pathname.split('/').slice(-1)[0]
+        const response = await fetch(`https://mcloud.to/info/${code}?skey=${match[0]}`, {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            referrer: `https://mcloud.to/embed/${code}`
+        })
+        const json = await response.json()
+        return json['media']['sources'][0]['file']
+    }
+}
+
 class Mixdrop implements Match {
     async match(match: RegExpMatchArray): Promise<string> {
         return `https://a-${match[1]}.${match[4]}.${match[5]}/v/${match[2]}.${match[6]}?s=${match[12]}&e=${match[13]}`
     }
 }
 
+class Newgrounds implements Match {
+    async match(match: RegExpMatchArray): Promise<string> {
+        let id = window.location.pathname.split('/').slice(-1)[0]
+        let response = await fetch(`https://www.newgrounds.com/portal/video/${id}`, {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+        let json = await response.json()
+        return decodeURI(json['sources'][Object.keys(json['sources'])[0]][0]['src'])
+    }
+}
+
 class Streamtape implements Match {
     async match(match: RegExpMatchArray): Promise<string> {
         return `https://streamtape.com/get_video?${match[0]}`
@@ -36,6 +69,26 @@ class TheVideoMe implements Match {
     }
 }
 
+class Upstream implements Match {
+    async match(match: RegExpMatchArray): Promise<string> {
+        return `https://${match[47]}.upstreamcdn.co/hls/${match.sort((a, b) => {return b.length - a.length})[0]}/master.m3u8`
+    }
+}
+
+class Vidstream implements Match {
+    async match(match: RegExpMatchArray): Promise<string> {
+        const code = window.location.pathname.split('/').slice(-1)[0]
+        const response = await fetch(`https://vidstream.pro/info/${code}?skey=${match[0]}`, {
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            referrer: `https://vidstream.pro/embed/${code}`
+        })
+        const json = await response.json()
+        return json['media']['sources'][0]['file']
+    }
+}
+
 class Vivo implements Match {
     async match(match: RegExpMatchArray): Promise<string> {
         return this.rot47(decodeURIComponent(match[0]))
@@ -56,23 +109,31 @@ class Vivo implements Match {
     }
 }
 
-class Vupload implements Match {
-    async match(match: RegExpMatchArray): Promise<string> {
-        return `https://www3.megaupload.to/${match[0]}/v.mp4`
-    }
-}
-
-// every match HAS to be on an separate line
+// all domains to match. the matches must be structured like this:
+//      [domain, regex match (can be null), class to call after match (can be null), reliability]
+// => the domain which should be redirected
+// => the regex gets called if the user visits a site with the given domain and matches the websites document body.
+//    if the regex is null, the complete document body gets handled as one big regex match
+// => the class to call when the regex was parsed successfully. the class has to implement the `Match` interface.
+//    if the class is null, the user gets redirected to the first regex match element
+// => the reliability shows how reliable a stream redirect is. for example, vivo.sx works nearly every time whereas
+//    upstream.to works only sometimes because of a security mechanism they're using (CORS) which currently can't be bypassed
+//
+// every match HAS to be on an separate line (for automatically manifest generation)
 const matches = [
-    ['evoload.io', null, new Evoload()],
-    ['mixdrop.co', new RegExp(/(?<=\|)\w{2,}/gm), new Mixdrop()],
-    ['streamtape.com', new RegExp(/id=\S*(?=')/gm), new Streamtape()],
-    ['streamzz.to', new RegExp(/https?:\/\/get.streamz.tw\/getlink-\w+\.dll/gm), null],
-    ['thevideome.com', new RegExp(/(?<=\|)\w{2,}/gm), new TheVideoMe()],
-    ['vidlox.me', new RegExp(/(?<=\[")\S+?(?=")/gm), null],
-    ['vidoza.net', new RegExp(/(?<=src:(\s*)?")\S*(?=")/gm), null],
-    ['vivo.st', new RegExp(/(?<=source:\s')(\S+)(?=')/gm), new Vivo()],
-    ['vivo.sx', new RegExp(/(?<=source:\s')(\S+)(?=')/gm), new Vivo()],
-    ['voe.sx', new RegExp(/https?:\/\/\S*m3u8(?=")/gm), null],
-    ['vupload.com', new RegExp(/(?<=class\|)\w*/gm), new Vupload()]
+    ['evoload.io', null, new Evoload(), Reliability.NORMAL],
+    ['mcloud.to', new RegExp(/(?<=')\w+(?=';)/gm), new MCloud(), Reliability.NORMAL],
+    ['mixdrop.co', new RegExp(/(?<=\|)\w{2,}/gm), new Mixdrop(), Reliability.HIGH],
+    ['newgrounds.com', null, new Newgrounds(), Reliability.HIGH],
+    ['streamtape.com', new RegExp(/id=\S*(?=')/gm), new Streamtape(), Reliability.NORMAL],
+    ['streamzz.to', new RegExp(/https?:\/\/get.streamz.tw\/getlink-\w+\.dll/gm), null, Reliability.NORMAL],
+    ['thevideome.com', new RegExp(/(?<=\|)\w{2,}/gm), new TheVideoMe(), Reliability.NORMAL],
+    //['upstream.to', new RegExp(/(?<=\|)\w{2,}/gm), new Upstream(), Reliability.LOW],
+    ['vidlox.me', new RegExp(/(?<=\[")\S+?(?=")/gm), null, Reliability.NORMAL],
+    ['vidstream.pro', new RegExp(/(?<=')\w+(?=';)/gm), new Vidstream(), Reliability.LOW],
+    ['vidoza.net', new RegExp(/(?<=src:(\s*)?")\S*(?=")/gm), null, Reliability.NORMAL],
+    ['vivo.st', new RegExp(/(?<=source:\s')(\S+)(?=')/gm), new Vivo(), Reliability.HIGH],
+    ['vivo.sx', new RegExp(/(?<=source:\s')(\S+)(?=')/gm), new Vivo(), Reliability.HIGH],
+    ['voe.sx', new RegExp(/https?:\/\/\S*m3u8(?=")/gm), null, Reliability.HIGH],
+    ['vupload.com', new RegExp(/(?<=src:\s?").+?(?=")/gm), null, Reliability.NORMAL]
 ]

src/popup/popup.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="popup.css">
+    <script src="../ext/popper.min.js"></script>
+    <script src="../ext/tippy-bundle.umd.min.js"></script>
     <script src="../match.js"></script>
 </head>
 <body>
@@ -17,6 +19,7 @@
         <hr>
         <table id="sub-container">
         </table>
+        <a id="error" href="https://github.com/ByteDream/stream-bypass/issues/new">Something does not work as expected</a>
     </div>
     <script src="./popup.js"></script>
 </body>

src/popup/popup.sass

@@ -5,13 +5,11 @@ body
   overflow-x: hidden
   overflow-y: auto
 
-
 a, p
   color: white
   font-size: 16px
   margin: 5px 0
 
-
 a
   border: 1px solid #281515
   cursor: pointer
@@ -26,6 +24,13 @@ a
     background-color: grey
     cursor: not-allowed
 
+  &#error
+    border: none
+    display: block
+    font-weight: lighter
+    font-size: 0.8rem
+    text-align: center
+    padding: 10px 0 5px 0
 
 hr
   margin: 3px 0
@@ -35,3 +40,16 @@ hr
   display: flex
   justify-content: center
   margin: 10px 0
+
+
+.low-reliability
+  text-decoration: underline
+  text-decoration-color: rgb(255, 0, 0)
+
+.normal-reliability
+  text-decoration: underline
+  text-decoration-color: yellow
+
+.high-reliability
+  text-decoration: underline
+  text-decoration-color: #00ff00

src/popup/popup.ts

@@ -51,12 +51,53 @@ chrome.storage.local.get(['all', 'disabled'], function (result) {
         let name = document.createElement('td')
         let nameValue = document.createElement('p')
         nameValue.innerText = match[0]
+        switch (match[3]) {
+            case 1: // low
+                nameValue.classList.add('low-reliability')
+                // @ts-ignore
+                tippy(nameValue, {
+                    content: 'Low reliability: Errors may occur often'
+                })
+                break
+            case 2: // normal
+                nameValue.classList.add('normal-reliability')
+                // @ts-ignore
+                tippy(nameValue, {
+                    content: 'Normal reliability: Save to use but errors may occur'
+                })
+                break
+            case 3: //high
+                nameValue.classList.add('high-reliability')
+                // @ts-ignore
+                tippy(nameValue, {
+                    content: 'High reliability: Errors are very unlikely to happen'
+                })
+                break
+        }
         let buttons = document.createElement('td')
         buttons.classList.add('buttons')
         let on = document.createElement('a')
         on.innerText = 'On'
+        // @ts-ignore
+        let onTippy = tippy(on, {
+            content: `Enable ${match[0]}`,
+            onMount: () => {
+                if (on.classList.contains('active') || off.classList.contains('disabled')) {
+                    onTippy.hide()
+                }
+            }
+        })
         let off = document.createElement('a')
         off.innerText = 'Off'
+        // @ts-ignore
+        let offTippy = tippy(off, {
+            content: `Disable ${match[0]}`,
+            onMount: () => {
+                if (off.classList.contains('active') || off.classList.contains('disabled')) {
+                    offTippy.hide()
+                }
+            }
+        })
         disabled.has(match[0]) ? off.classList.add('active') : on.classList.add('active')
         if (allDisabled) {
             on.classList.add('disabled')
@@ -85,6 +126,7 @@ chrome.storage.local.get(['all', 'disabled'], function (result) {
     }
 
     let allButtons = document.getElementById('all').getElementsByTagName('a')
+    let allOn = allButtons[0]
     allButtons[0].onclick = function () {
         if (!allButtons[0].classList.contains('disabled')) {
             enableAll(true)
@@ -92,6 +134,15 @@ chrome.storage.local.get(['all', 'disabled'], function (result) {
             allButtons[1].classList.remove('active')
         }
     }
+    // @ts-ignore
+    let allOnTippy = tippy(allOn, {
+        content: 'Enable all websites',
+        onMount: () => {
+            if (allButtons[0].classList.contains('active')) {
+                allOnTippy.hide()
+            }
+        }
+    })
     allButtons[1].onclick = function () {
         if (!allButtons[1].classList.contains('disabled')) {
             enableAll(false)
@@ -99,5 +150,14 @@ chrome.storage.local.get(['all', 'disabled'], function (result) {
             allButtons[1].classList.add('active')
         }
     }
+    // @ts-ignore
+    let allOffTippy = tippy(allButtons[1], {
+        content: 'Disable all websites',
+        onMount: () => {
+            if (allButtons[1].classList.contains('active')) {
+                allOffTippy.hide()
+            }
+        }
+    })
     allDisabled ? allButtons[1].classList.add('active') : allButtons[0].classList.add('active')
 })

src/res/hls.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>m3u8</title>
+    <link rel="stylesheet" href="/res/hls.css">
+    <script src="/ext/hls.light.min.js"></script>
+</head>
+<body>
+<video id="video"></video>
+<p id="message" hidden></p>
+<script src="/res/hls.js"></script>
+</body>
+</html>

src/res/hls.sass

@@ -0,0 +1,16 @@
+body
+  background-color: #131313
+
+html, body, video
+  width: 100%
+  height: 100%
+  margin: 0
+
+video
+  position: absolute
+  top: 0
+  left: 0
+
+#message
+  color: white
+  text-align: center

src/res/hls.ts

@@ -0,0 +1,62 @@
+function showMessage(message: string) {
+    let messageElement = document.getElementById('message') as HTMLParagraphElement
+    messageElement.innerText = message
+    messageElement.hidden = false
+    document.getElementById('video').hidden = true
+}
+
+function loadHls() {
+    let url = window.location.hash.substring(1)
+    let video = document.getElementById('video') as HTMLVideoElement;
+
+    video.controls = true
+    if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url
+    // @ts-ignore
+    } else if (Hls.isSupported()) {
+        // @ts-ignore
+        let hls = new Hls()
+        hls.loadSource(url)
+        hls.attachMedia(video)
+
+        let searchParams = new URLSearchParams(window.location.search)
+        let rawReliability = parseInt(searchParams.get('reliability'))
+
+        let thirdPartyFallback = setTimeout(() => {
+            let message: string
+
+            switch (rawReliability) {
+                case 1: // low
+                    message = `The reliability for this domain is low, errors like this are common.
+                    Try to choose another streaming provider (if existent) or deactivate the addon for this domain (${searchParams.get('domain')}) and try again`
+                    break
+                case 2: // normal
+                    message = `The reliability for this domain is normal, errors like this can occur but are not very common. Try to refresh the page`
+                    break
+                case 3: // high
+                    message = `The reliability for this domains is high, errors like this are very unlikely to happen.
+                    Try to refresh the page and if the error still exists you might want to open a new issue <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>.
+                    When you're using <a href="https://www.torproject.org/">Tor</a> such errors have a slight chance to occur more often,
+                    so if this is the case just try to reload the page and see if you it's working then`
+                    break
+            }
+
+            // shows a message if hls could not be loaded
+            showMessage(`Could not load hls video. ${message}`)
+        }, rawReliability * 3000)
+
+        document.title = searchParams.get('domain')
+
+        // @ts-ignore
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            clearTimeout(thirdPartyFallback)
+            document.getElementById('video').hidden = false
+            document.getElementById('message').hidden = true
+        })
+    } else {
+        // shows a message if hls is not supported
+        showMessage(`Failed to play m3u8 video (hls is not supported). Try again or create a new issue <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>`)
+    }
+}
+
+loadHls()

src/tsconfig.json

@@ -2,11 +2,13 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es2015",
+    "removeComments": true,
     "lib": [
       "dom",
       "es5",
       "scripthost",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "exclude": [