Redirect to custom video player on every url

2025-06-28 19:10:32 +02:00 · 2022-06-18 01:13:54 +02:00
parent 9b4bcc6c64
commit 8990e25a72
4 changed files with 27 additions and 17 deletions
--- a/src/ui/player/player.html
+++ b/src/ui/player/player.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HLS</title>
+    <link rel="stylesheet" href="player.css">
+    <script src="player.js" defer></script>
+</head>
+<body>
+<video id="video"></video>
+<div id="message-container">
+    <p id="message" hidden></p>
+</div>
+</body>
+</html>
--- a/src/ui/player/player.sass
+++ b/src/ui/player/player.sass
@ -0,0 +1,22 @@
+body
+  background-color: #131313
+
+html, body, video
+  width: 100%
+  height: 100%
+  margin: 0
+
+video
+  position: absolute
+  top: 0
+  left: 0
+
+#message-container
+  display: flex
+  justify-content: center
+  align-items: center
+  height: 100%
+
+  #message
+    color: white
+    text-align: center
--- a/src/ui/player/player.ts
+++ b/src/ui/player/player.ts
@ -0,0 +1,79 @@
+import {Match, matches, Reliability} from "../../match/match";
+// @ts-ignore
+import Hls from "hls.js";
+
+function show_message(message: string) {
+    document.getElementById('message').innerText = message
+    document.getElementById('message-container').hidden = false
+    document.getElementById('video').hidden = true
+}
+
+async function play_native(url: string, match: Match) {
+    const video = document.getElementById('video') as HTMLVideoElement
+    video.controls = true
+    video.src = url
+}
+
+async function play_hls(url: string, match: Match) {
+    const video = document.getElementById('video') as HTMLVideoElement
+    video.controls = true
+
+    if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url
+    } else if (Hls.isSupported()) {
+        const hls = new Hls({
+            enableWorker: false
+        })
+        hls.loadSource(url)
+        hls.attachMedia(video)
+
+        const loaded = await new Promise((resolve, reject) => {
+            setTimeout(() => {
+                resolve(false)
+            }, match.reliability * 3000)
+
+            hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                resolve(true)
+            })
+        })
+
+        if (!loaded) {
+            let message: string
+            switch (match.reliability) {
+                case Reliability.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 provider (${match.name}) and try again`
+                    break
+                case Reliability.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 Reliability.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 it's working then`
+                    break
+            }
+            show_message(`Could not load HLS video. ${message}`)
+        }
+    } else {
+        show_message('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>')
+    }
+}
+
+async function main() {
+    const urlQuery = new URLSearchParams(window.location.search)
+    const id = urlQuery.get('id')
+    const url = urlQuery.get('url')
+
+    const match = matches.find((m) => m.id === id)
+    if (match === undefined) {
+        show_message(`Invalid id: ${id}. Please report this <a href="https://github.com/ByteDream/stream-bypass/issues/new">here</a>`)
+        return
+    }
+    document.title = match.name
+
+    url.endsWith('.m3u8') ? await play_hls(url, match) : await play_native(url, match)
+}
+
+main()