mirrors/stream-bypass
1
0
Fork 0
mirror of https://github.com/bytedream/stream-bypass.git synced 2025-05-09 20:25:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update popup UI

Browse Source
This commit is contained in:
bytedream 2024-07-28 23:04:04 +02:00
parent ae2f196b06
commit 67c492db47
5 changed files with 169 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.cjs
View File

@ -28,6 +28,7 @@ module.exports = {
} }
], ],
rules: { rules: {
'@typescript-eslint/no-explicit-any': 'off' '@typescript-eslint/no-explicit-any': 'off',
'no-undef': 'off'
} }
}; };

230
src/entries/popup/Popup.svelte
View File

@ -1,117 +1,93 @@
<script lang="ts"> <script lang="ts">
import { matches } from '~/lib/match'; import { type Match, matches } from '~/lib/match';
import { Hosters, Other } from '~/lib/settings'; import { Hosters, Other } from '~/lib/settings';
import Toggle from './toggle.svelte';
let hostersEnabled: boolean; let hostersEnabled: boolean;
let hosters = []; let hosters: (Match & { active: boolean; disabled: boolean })[] = [];
(async () => { (async () => {
hostersEnabled = !(await Hosters.getAllDisabled()); hostersEnabled = !(await Hosters.getAllDisabled());
const disabled = await Hosters.getDisabled(); const disabled = await Hosters.getDisabled();
hosters = Object.values(matches).map((m) => { hosters = Object.values(matches).map((m: any) => {
m['active'] = disabled.findIndex((p) => p.id == m.id) == -1; m['active'] = disabled.findIndex((p) => p.id == m.id) == -1;
m['disabled'] = !hostersEnabled;
return m; return m;
}); }) as typeof hosters;
})();
let isMobile: boolean;
(async () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
isMobile = (await browser.runtime.getPlatformInfo()).os === 'android';
})(); })();
let ff2mpvEnabled: boolean; let ff2mpvEnabled: boolean;
(async () => { (async () => {
ff2mpvEnabled = await Other.getFf2mpv(); ff2mpvEnabled = (await Other.getFf2mpv()) as boolean;
})(); })();
</script> </script>
<main> <main
<div> style={isMobile
<h3 class="header">Hosters</h3> ? 'height: 100vh; display: flex; flex-direction: column; align-items: center'
<div class="buttons super-buttons"> : 'height: 500px'}
<button >
class:active={hostersEnabled} <fieldset>
on:click={async () => { <legend>Hoster</legend>
await Hosters.enableAll(); <div class="setting-container" style={isMobile ? 'grid-column-gap: 5rem' : ''}>
hostersEnabled = true; <label for="hosters-enabled">Enabled</label>
hosters = hosters.map((m) => { <div>
m['disabled'] = false; <Toggle
return m; bind:checked={hostersEnabled}
}); id="hosters-enabled"
}}>On</button on:change={() => Hosters.setAll(hostersEnabled)}
> />
<button </div>
class:active={!hostersEnabled} <hr />
on:click={async () => { {#each hosters as hoster, i}
await Hosters.disableAll(); <label for="hoster-{i}" style="cursor: {hostersEnabled ? 'pointer' : 'default'}"
hostersEnabled = false; >{hoster.name}</label
hosters = hosters.map((m) => { >
m['disabled'] = true; <div>
return m; <Toggle
}); bind:checked={hoster.active}
}}>Off</button disabled={!hostersEnabled}
> id="hoster-{i}"
</div> on:change={async () => {
<table class="setting-table"> if (hoster.active) {
{#each hosters as hoster}
<tr>
<td class="setting-name">
<p>{hoster.name}</p>
</td>
<td class="buttons">
<button
class:disabled={hoster.disabled}
class:active={hoster.active}
on:click={async () => {
if (hoster.disabled) return;
await Hosters.enable(hoster); await Hosters.enable(hoster);
hoster.active = true; } else {
}}>On</button
>
<button
class:disabled={hoster.disabled}
class:active={!hoster.active}
on:click={async () => {
if (hoster.disabled) return;
await Hosters.disable(hoster); await Hosters.disable(hoster);
hoster.active = false; }
}}>Off</button }}
> ></Toggle>
</td> </div>
</tr>
{/each} {/each}
</table> </div>
</div> </fieldset>
<hr /> {#if !isMobile}
<div> <fieldset>
<h3 class="header">Other</h3> <legend>Other</legend>
<table> <div class="setting-container">
<tr> <label for="ff2mpv">ff2mpv</label>
<td class="setting-name"> <div>
<p>ff2mpv</p> <Toggle
</td> bind:checked={ff2mpvEnabled}
<td class="buttons"> id="ff2mpv"
<button on:change={async () => Other.setFf2mpv(ff2mpvEnabled)}
class:active={ff2mpvEnabled} ></Toggle>
on:click={async () => {
await Other.setFf2mpv(true);
ff2mpvEnabled = true;
}}>On</button
>
<button
class:active={!ff2mpvEnabled}
on:click={async () => {
await Other.setFf2mpv(false);
ff2mpvEnabled = false;
}}>Off</button
>
<a <a
class="info-questionmark"
href="https://github.com/ByteDream/stream-bypass/tree/master#ff2mpv-use-mpv-to-directly-play-streams" href="https://github.com/ByteDream/stream-bypass/tree/master#ff2mpv-use-mpv-to-directly-play-streams"
>🛈</a >?</a
> >
</td> </div>
</tr> </div>
</table> </fieldset>
</div> {/if}
<hr /> <a id="report-notice" href="https://github.com/ByteDream/stream-bypass/issues"
<a id="bug-notice" href="https://github.com/ByteDream/stream-bypass/issues" >Report issues or requests</a
>Something does not work</a
> >
</main> </main>
@ -125,7 +101,12 @@
padding: 0 8px; padding: 0 8px;
} }
#bug-notice { fieldset {
border-radius: 5px;
border-color: gray;
}
#report-notice {
border: none; border: none;
color: white; color: white;
display: block; display: block;
@ -148,52 +129,33 @@
text-align: center; text-align: center;
} }
.setting-table { .setting-container {
border-collapse: collapse; display: grid;
border-spacing: 0; grid-template-columns: auto auto;
} grid-column-gap: 5px;
grid-row-gap: 4px;
align-items: end;
width: 100%;
.setting-name { & > label {
height: 34px; height: 34px;
p {
margin: 0; margin: 0;
cursor: default; user-select: none;
}
}
.buttons {
display: flex;
flex-direction: row;
height: 34px;
button,
a {
border: 1px solid #281515;
background-color: transparent;
color: white;
cursor: pointer; cursor: pointer;
padding: 5px 8px;
margin: 0;
text-decoration: none;
&.active {
background-color: rgba(255, 65, 65, 0.74);
cursor: default;
}
&.disabled {
background-color: gray;
cursor: not-allowed;
}
}
&.super-buttons {
display: flex; display: flex;
justify-content: center; align-items: center;
gap: 4px;
width: 100%;
margin-bottom: 10px;
} }
& > hr {
grid-column: 1 / span 2;
width: 100%;
}
}
.info-questionmark {
display: inline-block;
transform: translateX(-40%) translateY(-100%);
color: black;
text-decoration: none;
} }
</style> </style>

5
src/entries/popup/index.html
View File

@ -1,10 +1,11 @@
<!doctype html> <!doctype html>
<html style="width: fit-content; height: 500px; overflow-y: hidden" lang="en"> <html style="overflow-y: hidden" lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Stream Bypass</title> <title>Stream Bypass</title>
</head> </head>
<body style="width: fit-content; height: 500px; overflow-y: scroll"> <body style="overflow-y: scroll">
<script type="module"> <script type="module">
import Popup from '~/entries/popup/Popup.svelte'; import Popup from '~/entries/popup/Popup.svelte';

65
src/entries/popup/toggle.svelte Normal file
View File

@ -0,0 +1,65 @@
<!-- https://flowbite.com/docs/forms/toggle/ -->
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let checked = false;
export let disabled = false;
export let id: string | null = null;
const dispatch = createEventDispatcher();
</script>
<label class="toggle">
<slot />
<input type="checkbox" {id} bind:checked {disabled} on:change={(e) => dispatch('change', e)} />
<span />
</label>
<style lang="scss" global>
.toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
input {
clip: rect(0, 0, 0, 0);
position: absolute;
&:checked + span {
background: limegreen;
&:after {
transform: translateX(100%);
}
}
&:disabled + span {
background: gray;
}
}
span {
position: relative;
width: 2.75rem;
height: 1.5rem;
background: #cf0000;
border-radius: 9999px;
&:after {
content: '';
position: absolute;
top: 2px;
inset-inline-start: 2px;
background: white;
border-radius: 9999px;
height: 1.25rem;
width: 1.25rem;
transition: all 0.15s;
}
}
&:has(input:disabled) {
cursor: default;
}
}
</style>

9
src/lib/settings.ts
View File

@ -25,11 +25,8 @@ export const Hosters = {
getAllDisabled: async () => { getAllDisabled: async () => {
return await storageGet<boolean>('hosters.allDisabled', false); return await storageGet<boolean>('hosters.allDisabled', false);
}, },
disableAll: async () => { setAll: async (enable: boolean) => {
await storageSet('hosters.allDisabled', true); await storageSet('hosters.allDisabled', !enable);
},
enableAll: async () => {
await storageSet('hosters.allDisabled', false);
} }
}; };
@ -47,7 +44,7 @@ export const Redirect = {
export const Other = { export const Other = {
getFf2mpv: async () => { getFf2mpv: async () => {
return await storageGet('other.ff2mpv', true); return await storageGet('other.ff2mpv', false);
}, },
setFf2mpv: async (enable: boolean) => { setFf2mpv: async (enable: boolean) => {
await storageSet('other.ff2mpv', enable); await storageSet('other.ff2mpv', enable);