mirror of
https://github.com/bytedream/stream-bypass.git
synced 2025-12-12 23:32:06 +01:00
Lots of updates :o
This commit is contained in:
13
src/ui/hls/hls.html
Normal file
13
src/ui/hls/hls.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HLS</title>
|
||||
<link rel="stylesheet" href="hls.css">
|
||||
<script src="hls.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<video id="video"></video>
|
||||
<p id="message" hidden></p>
|
||||
</body>
|
||||
</html>
|
||||
16
src/ui/hls/hls.sass
Normal file
16
src/ui/hls/hls.sass
Normal file
@@ -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
|
||||
70
src/ui/hls/hls.ts
Normal file
70
src/ui/hls/hls.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import {matches, Reliability} from "../../match/match";
|
||||
// @ts-ignore
|
||||
import Hls from "hls.js";
|
||||
|
||||
function show_message(message: string) {
|
||||
const messageElement = document.getElementById('message') as HTMLParagraphElement
|
||||
messageElement.innerText = message
|
||||
messageElement.hidden = false
|
||||
document.getElementById('video').hidden = true
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
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>')
|
||||
}
|
||||
}
|
||||
|
||||
main()
|
||||
23
src/ui/popup/popup.html
Normal file
23
src/ui/popup/popup.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Stream-Bypass</title>
|
||||
<link rel="stylesheet" href="popup.css">
|
||||
<script src="popup.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="all">
|
||||
<div class="buttons">
|
||||
<a>On</a>
|
||||
<a>Off</a>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<table id="sub-container">
|
||||
</table>
|
||||
<a id="error" href="https://github.com/ByteDream/stream-bypass/issues/new">Something does not work</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
55
src/ui/popup/popup.sass
Normal file
55
src/ui/popup/popup.sass
Normal file
@@ -0,0 +1,55 @@
|
||||
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
|
||||
font-weight: normal
|
||||
padding: 5px 8px
|
||||
|
||||
&.active
|
||||
background-color: rgba(255, 65, 65, 0.74)
|
||||
cursor: default
|
||||
|
||||
&.disabled
|
||||
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
|
||||
|
||||
|
||||
#all
|
||||
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
|
||||
96
src/ui/popup/popup.ts
Normal file
96
src/ui/popup/popup.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
import {getDisabled, disable, enable, getAllDisabled, enableAll, disableAll} from "../../store/store";
|
||||
import {matches, Reliability} from "../../match/match";
|
||||
|
||||
async function main() {
|
||||
const disabled = await getDisabled()
|
||||
|
||||
const subContainer = document.getElementById('sub-container')
|
||||
for (const m of matches) {
|
||||
const row = document.createElement('tr')
|
||||
|
||||
const name = document.createElement('td')
|
||||
const nameValue = document.createElement('p')
|
||||
nameValue.innerText = m.name
|
||||
switch (m.reliability) {
|
||||
case Reliability.LOW:
|
||||
nameValue.classList.add('low-reliability')
|
||||
break
|
||||
case Reliability.NORMAL:
|
||||
nameValue.classList.add('normal-reliability')
|
||||
break
|
||||
case Reliability.HIGH:
|
||||
nameValue.classList.add('high-reliability')
|
||||
break
|
||||
}
|
||||
|
||||
const buttons = document.createElement('td')
|
||||
buttons.classList.add('buttons')
|
||||
const on = document.createElement('a')
|
||||
on.innerText = 'On'
|
||||
const off = document.createElement('a')
|
||||
off.innerText = 'Off'
|
||||
disabled.find((v) => v.id === m.id) === undefined ? on.classList.add('active') : off.classList.add('active')
|
||||
|
||||
on.onclick = async function () {
|
||||
if (!on.classList.contains('disabled')) {
|
||||
await enable(m)
|
||||
on.classList.add('active')
|
||||
off.classList.remove('active')
|
||||
}
|
||||
}
|
||||
off.onclick = async function () {
|
||||
if (!off.classList.contains('disabled')) {
|
||||
await disable(m)
|
||||
on.classList.remove('active')
|
||||
off.classList.add('active')
|
||||
}
|
||||
}
|
||||
|
||||
name.append(nameValue)
|
||||
buttons.append(on, off)
|
||||
row.append(name, buttons)
|
||||
subContainer.append(row)
|
||||
}
|
||||
|
||||
const allOnButton = document.getElementById('all').getElementsByTagName('a')[0]
|
||||
const allOffButton = document.getElementById('all').getElementsByTagName('a')[1]
|
||||
|
||||
if (await getAllDisabled()) {
|
||||
const allBtns = document.getElementById('sub-container').getElementsByTagName('a')
|
||||
for (let i = 0; i < allBtns.length; i++) {
|
||||
allBtns[i].classList.add('disabled')
|
||||
}
|
||||
allOffButton.classList.add('active')
|
||||
} else {
|
||||
allOnButton.classList.add('active')
|
||||
}
|
||||
|
||||
allOnButton.onclick = async () => {
|
||||
if (!allOnButton.classList.contains('active')) {
|
||||
allOnButton.classList.add('active')
|
||||
allOffButton.classList.remove('active')
|
||||
|
||||
const allBtns = document.getElementById('sub-container').getElementsByTagName('a')
|
||||
for (let i = 0; i < allBtns.length; i++) {
|
||||
allBtns[i].classList.remove('disabled')
|
||||
}
|
||||
|
||||
await enableAll()
|
||||
}
|
||||
}
|
||||
allOffButton.onclick = async () => {
|
||||
if (!allOffButton.classList.contains('active')) {
|
||||
allOffButton.classList.add('active')
|
||||
allOnButton.classList.remove('active')
|
||||
|
||||
const allBtns = document.getElementById('sub-container').getElementsByTagName('a')
|
||||
for (let i = 0; i < allBtns.length; i++) {
|
||||
allBtns[i].classList.add('disabled')
|
||||
}
|
||||
|
||||
await disableAll()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main()
|
||||
Reference in New Issue
Block a user