mirror of
https://github.com/bytedream/stream-bypass.git
synced 2026-08-04 21:10:40 +02:00
75 lines
2.3 KiB
Svelte
75 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { Clipboard, InformationCircle } from '@steeze-ui/heroicons';
|
|
import { Icon } from '@steeze-ui/svelte-icon';
|
|
import { isMobile, showToast } from '@/entrypoints/popup/state';
|
|
|
|
/* types */
|
|
interface Props {
|
|
url: string;
|
|
domain: string;
|
|
}
|
|
|
|
type UrlType = 'url' | 'curl';
|
|
|
|
/* states */
|
|
let { url, domain }: Props = $props();
|
|
|
|
let urlOutputType: UrlType = $state('url');
|
|
let urlOutput = $derived(getUrl(urlOutputType));
|
|
|
|
/* functions */
|
|
function getUrl(type: UrlType) {
|
|
switch (type) {
|
|
case 'url':
|
|
return url;
|
|
case 'curl':
|
|
return `curl -H "Referer: https://${domain}/" "${encodeURI(url)}"`;
|
|
}
|
|
}
|
|
|
|
/* callbacks */
|
|
async function copyUrl() {
|
|
try {
|
|
await navigator.clipboard.writeText(urlOutput);
|
|
showToast('URL copied');
|
|
} catch {
|
|
showToast('Failed to copy');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<div class="flex gap-2 items-center pb-1">
|
|
<p class="mt-0.5 text-sm">Show video as</p>
|
|
<select
|
|
class="w-fit text-xs border text-slate-200 border-gray-500 rounded cursor-pointer pt-1 pb-0.5 pl-1"
|
|
bind:value={urlOutputType}
|
|
>
|
|
<option value="url">URL</option>
|
|
<option value="curl">cURL</option>
|
|
</select>
|
|
{#if urlOutputType === 'url'}
|
|
<div class="relative group h-4 flex justify-center items-center">
|
|
<button class="text-sm peer"><Icon src={InformationCircle} size="1rem" /></button>
|
|
<span
|
|
class="z-10 absolute w-58 bottom-5/4 p-1 bg-gray-800 text-xs invisible opacity-0 group-hover:visible group-hover:opacity-100 peer-focus:visible peer-focus:opacity-100 transition-opacity"
|
|
>You may have to send the referer header <code class="select-text">Referer: {domain}</code> when accessing
|
|
the url</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
|
<div class="relative group w-full" tabindex={$isMobile ? 0 : undefined}>
|
|
<pre
|
|
class="w-full h-20 overflow-y-scroll text-[0.8rem] wrap-anywhere text-wrap select-text rounded bg-gray-900 py-1 px-1.5">{urlOutput}</pre>
|
|
<div
|
|
class="absolute top-2 right-2 transition-opacity duration-100 opacity-0 group-hover:opacity-100 group-focus:opacity-100 h-full"
|
|
>
|
|
<button class="cursor-pointer" title="Copy to clipboard" onclick={copyUrl}>
|
|
<Icon src={Clipboard} size="1rem" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|