Update v1.4.2

README.md

@@ -6,9 +6,31 @@ 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)):
+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/)
+- [streamtape.com](https://streamtape.com)
-- [vidoza.net](https://vidoza.net/)
+- [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://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://upstream.to">upstream.to</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,19 +38,20 @@ Supported streaming providers (for a complete list of all supported websites, se
 </details>
 
 The addon was tested on
-- Firefox (92.0)
+- Firefox (95.0.2)
-- Chromium (92.0)
+- Ungoogled Chromium (96.0)
-- Opera (78.0)
+- Vivaldi (5.0)
+- Opera (82.0)
 
 ## Installing
 
 ### Firefox
 
-Install the `.xpi` (firefox addon) file from the [latest release](https://github.com/ByteDream/vivosx-source-redirector/releases/latest).
+Install the addon directly from the [firefox addon store](https://addons.mozilla.org/de/firefox/addon/stream-bypass/).
 
 ### Chromium / Google Chrome
 
-1. Download the `stream-bypass-<version>.zip` file from the [latest release](https://github.com/ByteDream/vivosx-source-redirector/releases/latest) and unzip it (with [7zip](https://www.7-zip.org/) or something like that).
+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).
 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 +59,7 @@ Install the `.xpi` (firefox addon) file from the [latest release](https://github
 
 ### Opera
 
-1. Download the `stream-bypass-<version>.zip` file from the [latest release](https://github.com/ByteDream/vivosx-source-redirector/releases/latest) and unzip it (with [7zip](https://www.7-zip.org/) or something like that).
+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).
 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.
@@ -77,7 +100,7 @@ For this, you need [docker](https://www.docker.com/) to be installed.
   ```
 - Compile
   ```
-  $ docker rum --rm -v build:/build stream-bypass
+  $ docker run --rm -v build:/build stream-bypass
   ```
 The compiled output will remain in a (new created if not existing) `build` directory.
 

SUPPORTED

@@ -1,4 +1,14 @@
+evoload.io
+mcloud.to
+mixdrop.co
 streamtape.com
+streamzz.to
+thevideome.com
+upstream.to
+vidlox.me
+vidstream.pro
 vidoza.net
+vivo.st
 vivo.sx
+voe.sx
 vupload.com

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
@@ -42,6 +45,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)
+        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')
@@ -55,18 +94,13 @@ def copy_built():
     subprocess.call(['tsc', '-p', 'src'])
 
     build_path = Path('build')
-    if build_path.is_dir():
+    if not build_path.is_dir():
-        for file in build_path.rglob('*'):
-            if file.is_dir():
-                shutil.rmtree(str(file))
-            else:
-                file.unlink()
-    else:
         build_path.mkdir()
     for file in Path('src').rglob('*'):
         build_file = build_path.joinpath(str(file)[4:])
         if file.is_dir():
-            build_file.mkdir(parents=True)
+            if not build_file.exists():
+                build_file.mkdir(parents=True)
         elif file.suffix == '.sass':
             css_file = str(file)[:-4] + 'css'
             subprocess.call(['sass', '--no-source-map', file, css_file])
@@ -76,6 +110,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('*'):
@@ -86,6 +135,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')
@@ -94,6 +144,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

@@ -1,3 +1,7 @@
+function hasSuffix(content: string, suffix: string) {
+    return content.indexOf(suffix, content.length - suffix.length) !== -1
+}
+
 // @ts-ignore
 chrome.storage.local.get(['all', 'disabled'], function (result) {
     let keys = Object.keys(result)
@@ -6,16 +10,34 @@ chrome.storage.local.get(['all', 'disabled'], function (result) {
     }
     // @ts-ignore
     for (let match of matches) {
-        if (window.location.href.indexOf(match[0]) !== -1) {
+        let domain = match[0] as string
-            if (keys.indexOf('disabled') === -1 || result['disabled'].indexOf(match[0]) === -1) {
+        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) {
+                if (regex !== null) {
-                    location.assign(matchClass === null ? document.body.innerHTML : matchClass.match(new RegExp('').exec(document.body.innerHTML)))
+                    if ((re = document.body.innerHTML.match(regex)) === null) {
-                } else if ((re = regex.exec(document.body.innerHTML)) !== null) {
+                        continue
-                    location.assign(matchClass === null ? re[0] : matchClass.match(re))
+                    }
+                } else {
+                    re = document.body.innerHTML.match(regex)
+                }
+
+                if (matchClass === null) {
+                    if (regex === null) {
+                        location.assign(document.body.innerHTML)
+                    } else {
+                        // @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) {
+                        // @ts-ignore
+                        location.assign(hasSuffix(path, 'm3u8') ? chrome.runtime.getURL(`res/hls.html?domain=${domain}&reliability=${reliability}#${path}`) : path)
+                    })
                 }
             }
             return

src/manifest.json

@@ -2,27 +2,44 @@
   "manifest_version": 2,
   "name": "Stream Bypass",
   "author": "ByteDream",
-  "description": "",
+  "description": "A multi-browser addon / extension for multiple streaming providers which redirects directly to the source video.",
-  "version": "1.0.0",
+  "version": "1.4.2",
   "homepage_url": "https://github.com/ByteDream/stream-bypass",
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{55dd42e8-3dd9-455a-b4fe-86664881b10c}"
+    }
+  },
   "content_scripts": [
     {
       "all_frames": true,
       "matches": [
+        "*://evoload.io/*",
+        "*://mcloud.to/*",
+        "*://mixdrop.co/*",
         "*://streamtape.com/*",
+        "*://streamzz.to/*",
+        "*://thevideome.com/*",
+        "*://upstream.to/*",
+        "*://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,16 +1,84 @@
+enum Reliability {
+    LOW = 1,
+    NORMAL,
+    HIGH
+}
+
 interface Match {
-    match(match: RegExpMatchArray): string
+    match(match: RegExpMatchArray): Promise<string>
+}
+
+class Evoload implements Match {
+    async match(match: RegExpMatchArray): Promise<string> {
+        const code = window.location.pathname.split('/').slice(-1)[0]
+        const response = await fetch('https://evoload.io/SecurePlayer', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({code: code})
+        })
+
+        const json = await response.json()
+        return json['stream']['src']
+    }
+}
+
+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 Streamtape implements Match {
-    match(match: RegExpMatchArray): string {
+    async match(match: RegExpMatchArray): Promise<string> {
         return `https://streamtape.com/get_video?${match[0]}`
     }
 }
 
+class TheVideoMe implements Match {
+    async match(match: RegExpMatchArray): Promise<string> {
+        return `https://thevideome.com/${match[5]}.mp4`
+    }
+}
+
+class Upstream implements Match {
+    async match(match: RegExpMatchArray): Promise<string> {
+        return `https://${match[48]}.upstreamcdn.co/hls/,${match.sort((a, b) => {return b.length - a.length})[0]},.urlset/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 {
-    match(match: RegExpMatchArray): string {
+    async match(match: RegExpMatchArray): Promise<string> {
-        return this.rot47(decodeURIComponent(match[1]))
+        return this.rot47(decodeURIComponent(match[0]))
     }
 
     // decrypts a string with the rot47 algorithm (https://en.wikipedia.org/wiki/ROT13#Variants)
@@ -29,15 +97,36 @@ class Vivo implements Match {
 }
 
 class Vupload implements Match {
-    match(match: RegExpMatchArray): string {
+    async match(match: RegExpMatchArray): Promise<string> {
-        return `https://www3.megaupload.to/${match[0]}/v.mp4`
+        // the best quality is the last match so the array is reversed here to have the last element at the first position
+        return match.reverse()[0]
     }
 }
 
-// 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 = [
-    ['streamtape.com', new RegExp(/id=\S*(?=')/gm), new Streamtape()],
+    ['evoload.io', null, new Evoload(), Reliability.NORMAL],
-    ['vidoza.net', new RegExp(/(?<=src:(\s*)?")\S*(?=")/gm), null],
+    ['mcloud.to', new RegExp(/(?<=')\w+(?=';)/gm), new MCloud(), Reliability.NORMAL],
-    ['vivo.sx', new RegExp(/source:\s*'(\S+)'/gm), new Vivo()],
+    ['mixdrop.co', new RegExp(/(?<=\|)\w{2,}/gm), new Mixdrop(), Reliability.HIGH],
-    ['vupload.com', new RegExp(/(?<=class\|)\w*/gm), new Vupload()]
+    ['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?")\S+mp4/gm), new Vupload(), 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

@@ -2,14 +2,14 @@ body
   background-color: #2b2a33
   font-weight: bold
   max-height: 500px
-
+  overflow-x: hidden
+  overflow-y: auto
 
 a, p
   color: white
   font-size: 16px
   margin: 5px 0
 
-
 a
   border: 1px solid #281515
   cursor: pointer
@@ -24,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
@@ -33,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,12 @@
+body
+  background-color: #131313
+
+html, body, video
+  width: 100%
+  height: 100%
+  margin: 0
+
+video
+  position: absolute
+  top: 0
+  left: 0

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, so 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 your 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": [