From a3de8076f42b6adde512982e5396380446a8b340 Mon Sep 17 00:00:00 2001
From: Ed Asriyan <github@asriyan.me>
Date: Wed, 10 Apr 2024 16:49:36 +0400
Subject: [PATCH] Add streaming support

---
 .env                                          |   6 +
 Dockerfile                                    |   4 +-
 src/App.svelte                                |   3 +-
 src/analytics.svelte                          |   2 -
 src/components/1-video-selector.svelte        | 163 ++++++++----------
 src/components/index.svelte                   |   2 +
 src/components/room.svelte                    |   5 +-
 src/components/video-player/index.svelte      |  66 +++----
 .../video-player/player-magnet.svelte         |  32 ++++
 .../video-player/video-player-native.svelte   |   4 +-
 src/components/video-selector-btn.svelte      |  32 +++-
 src/destructable.ts                           |   4 +-
 src/i18n/_.ts                                 |  16 +-
 src/i18n/fr.ts                                |  16 +-
 src/i18n/ru.ts                                |  16 +-
 src/main.ts                                   |  25 ++-
 src/normalize-link.ts                         |  21 ++-
 src/settings.ts                               |  16 +-
 src/stores/blob.ts                            |   3 +
 src/stores/bound-minutes-watched.ts           |  13 +-
 src/stores/bound-timed-store.ts               |   8 +-
 src/stores/room.ts                            |  30 +---
 src/web-torrent.ts                            |  95 ++++++++++
 static/sw.min.js                              |   1 +
 vite.config.ts                                |   1 +
 25 files changed, 364 insertions(+), 220 deletions(-)
 create mode 100644 src/components/video-player/player-magnet.svelte
 create mode 100644 src/stores/blob.ts
 create mode 100644 src/web-torrent.ts
 create mode 100644 static/sw.min.js

diff --git a/.env b/.env
index 75f3615..16f316d 100644
--- a/.env
+++ b/.env
@@ -10,6 +10,9 @@ VITE_FIREBASE_MEASUREMENT_ID=
 # base URL where the website is hosted (e.g. https://watchtogether.online)
 VITE_URL=
 
+# list of ICE servers for webrtc
+VITE_ICE_SERVERS=
+
 # usernames separated by comma to be randomly picked for users
 VITE_USERNAMES=🐵,🐒,🦍,🦧,🐶,🐕,🦮,🐕‍🦺,🐩,🐺,🦊,🦝,🐱,🐈,🐈‍⬛,🦁,🐯,🐅,🐆,🐴,🫎,🫏,🐎,🦄,🦓,🦌,🦬,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🦙,🦒,🐘,🦣,🦏,🦛,🐭,🐁,🐀,🐹,🐰,🐇,🐿️,🦫,🦔,🦇,🐻,🐻‍❄️,🐨,🐼,🦥,🦦,🦨,🦘,🦡,🦃,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🕊️,🦅,🦆,🦢,🦉,🦤,🪶,🦩,🦚,🦜,🪽,🐦‍⬛,🪿,🐸,🐊,🐢,🦎,🐍,🐲,🐉,🦕,🦖,🐳,🐋,🐬,🦭,🐟,🐠,🐡,🦈,🐙,🪼,🦀,🦞,🦐,🦑,🐌,🦋,🐛,🐜,🐝,🪲,🐞,🦗,🪳,🕷️,🦂,🦟,🪰,🪱,💐,🌸,🪷,🏵️,🌹,🌺,🌻,🌼,🌷,⛄,🧸,🎃,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🥭,🍎,🍏,🍐,🍑,🍒,🍓,🫐,🥝,🍅,🫒
 
@@ -25,5 +28,8 @@ VITE_PROXIES_HLS_URL=
 # URL of running http proxy that proxies request to URL which provided in ?url= query parameter. better to have on dedicated server
 VITE_PROXIES_REGULAR_URL=
 
+# list of urls of custom web-torrent trackers separated by comma
+VITE_WEB_TORRENT_TRACKERS=
+
 # video URL examples (URL-encoded) separated by comma
 VITE_URL_EXAMPLES=
diff --git a/Dockerfile b/Dockerfile
index 4449c2f..576ef78 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -31,6 +31,8 @@ ARG VITE_VITE_FIREBASE_APP_ID
 ARG VITE_FIREBASE_MEASUREMENT_ID
 ARG VITE_USERNAMES
 ARG VITE_URL
+ARG VITE_ICE_SERVERS
+ARG VITE_WEB_TORRENT_TRACKERS
 ARG VITE_SENTRY_DSN
 ARG VITE_ANALYTICS_MEASHUREMENT_ID
 ARG VITE_PROXIES_HLS_URL
@@ -38,7 +40,7 @@ ARG VITE_PROXIES_REGULAR_URL
 ARG VITE_URL_EXAMPLES
 ARG NODE_ENV
 
-RUN npm run build -- --mode $NODE_ENV && npm run copy-static
+RUN npm run build -- --mode $NODE_ENV
 
 FROM scratch as bundle
 COPY --from=builder /app/dist /dist
diff --git a/src/App.svelte b/src/App.svelte
index 8de9dd8..5461ac0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -4,10 +4,10 @@
     import { _ } from 'svelte-i18n';
     import { randomStr } from './utils';
     import Analytics from './analytics.svelte';
+    import LanguageSelector from './components/language-selector.svelte';
     import Page from './components/index.svelte';
     import { environment, isProduction } from './settings';
     import './app.scss';
-    import LanguageSelector from './components/language-selector.svelte';
 
     let header;
     let roomId: string;
@@ -59,6 +59,7 @@
             · <a class="uk-text-muted" href="https://svelte.dev" target="_blank">Svelte</a>
             · <a class="uk-text-muted" href="https://firebase.google.com" target="_blank">Firebase</a>
             · <a class="uk-text-muted" href="https://vidstack.io" target="_blank">Vidstack</a>
+            · <a class="uk-text-muted" href="https://webtorrent.io" target="_blank">WebTorrent</a>
             · <a class="uk-text-muted" href="https://getuikit.com" target="_blank">UIkit</a>
         </div>
         <div>
diff --git a/src/analytics.svelte b/src/analytics.svelte
index fb398c5..a079181 100644
--- a/src/analytics.svelte
+++ b/src/analytics.svelte
@@ -1,5 +1,4 @@
 <script lang="ts" context="module">
-    import type { SourceType } from './normalize-link';
     import { analytics, isProduction } from './settings';
 
     const trackRaw = function (...args: any[]) {
@@ -38,7 +37,6 @@
 
     export class WatchedMinuteEvent extends Event<{
         roomId: string;
-        sourceType: SourceType;
         url: string;
     }> {
         readonly name: string = 'watch_minute';
diff --git a/src/components/1-video-selector.svelte b/src/components/1-video-selector.svelte
index 665dfd6..b25eed6 100644
--- a/src/components/1-video-selector.svelte
+++ b/src/components/1-video-selector.svelte
@@ -7,28 +7,21 @@
     import VideoSelectorBtn from './video-selector-btn.svelte';
     import { Room } from '../stores/room';
     import { SourceType } from '../normalize-link';
+    import { blobUrl } from '../stores/blob';
 
     export let room: Room;
 
     $: url = room.url;
-    $: isLocalMode = room.isLocalMode;
-    $: play = room.play;
+    $: link = room.link;
+    $: if ($url) {
+        $blobUrl = '';
+    }
 
     const selectExample = function () {
         $url = getExampleVideo();
         track(new ClickEvent({ target: 'example' }));
     };
 
-    const selectOnlineMode = function () {
-        $isLocalMode = false;
-        track(new ClickEvent({ target: 'select_online_mode' }));
-    };
-
-    const selectLocalMode = function () {
-        $isLocalMode = true;
-        track(new ClickEvent({ target: 'select_local_mode' }));
-    };
-
     const clickDownloadTutorial = function () {
         track(new ClickEvent({ target: 'download_tutorial' }));
     };
@@ -42,101 +35,83 @@
     };
 </script>
 
+<b>🔗 { $_('selectVideo.link.title') }</b>
 <div class="uk-margin-bottom">
-    <button
-        class="uk-button uk-button-small"
-        class:uk-button-default={$isLocalMode}
-        class:uk-button-secondary={!$isLocalMode}
-        on:click={selectOnlineMode}
-    >
-        { $_('selectVideo.link.title')}
-    </button>
-    <span class="uk-margin-left uk-margin-right">{ $_('or') }</span>
-    <button
-        class="uk-button uk-button-small"
-        class:uk-button-default={!$isLocalMode}
-        class:uk-button-secondary={$isLocalMode}
-        on:click={selectLocalMode}
-    >
-        { $_('selectVideo.file.title')}
-    </button>
+    <Interpolator text={$_('selectVideo.link.description')} let:data={data}>
+        {#if data.name === 'type'}
+            <u>{ data.text }</u>
+        {/if}
+    </Interpolator>
 </div>
-{#if $isLocalMode}
-    <div class="uk-margin-bottom">
-        { $_('selectVideo.file.description') }
-    </div>
-        <VideoSelectorBtn room={room}/>
-{:else}
-    <div class="uk-margin-bottom">
-        <Interpolator text={$_('selectVideo.link.description')} let:data={data}>
-            {#if data.name === 'type'}
-                <u>{ data.text }</u>
+<div class="uk-inline uk-width-1-1">
+    <input
+        bind:value={$url}
+        on:input={onInput}
+        class="uk-input"
+        class:uk-form-danger={!$link}
+        placeholder="Video URL"
+    />
+    {#if !$url && haveExamples}
+        <a
+            class="uk-form-icon uk-form-icon-flip uk-text-small uk-padding-small uk-width-auto example pointer"
+            on:click|preventDefault={selectExample}
+            href="/#"
+            transition:fade
+        >
+            { $_('selectVideo.link.insertExample') }
+        </a>
+    {/if}
+</div>
+
+{#if !($url && $link && $link.SourceType === SourceType.direct) }
+    <div class="hint uk-margin-top uk-text-center uk-text-small">
+        {#if $url}
+            {#if $link}
+                {#if $link.type == SourceType.direct}
+                    <Interpolator text={$_('selectVideo.link.hintNotWorking')} let:data={data}>
+                        {#if data.name === 'u'}
+                            <u>{ data.text }</u>
+                        {/if}
+                    </Interpolator>
+                    <Interpolator text={$_('selectVideo.link.help')} let:data={data}>
+                        {#if data.name === 'link'}
+                            <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
+                        {/if}
+                    </Interpolator>
+                {/if}
+            {:else}
+                { $_('selectVideo.link.hintInvalid') }
             {/if}
-        </Interpolator>
-    </div>
-    <div class="uk-inline uk-width-1-1">
-        <input
-            bind:value={$url}
-            on:input={onInput}
-            class="uk-input"
-            class:uk-form-danger={!$play}
-            placeholder="Video URL"
-        />
-        {#if !$url && haveExamples}
-            <a
-                class="uk-form-icon uk-form-icon-flip uk-text-small uk-padding-small uk-width-auto example pointer"
-                on:click|preventDefault={selectExample}
-                href="/#"
-                transition:fade
-            >
-                { $_('selectVideo.link.insertExample') }
-            </a>
+        {:else}
+            { $_('selectVideo.link.hintEmpty') }
+            <Interpolator text={$_('selectVideo.link.help')} let:data={data}>
+                {#if data.name === 'link'}
+                    <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
+                {/if}
+            </Interpolator>
         {/if}
     </div>
 {/if}
 
+<hr class="uk-margin-bottom"/>
+
+<b>📂 { $_('selectVideo.file.title') }</b>
+<div class="uk-margin-bottom">
+    { $_('selectVideo.file.description') }
+</div>
+<VideoSelectorBtn bind:url={$url} />
 <div class="hint uk-margin-top uk-text-center uk-text-small">
-    <i>
-        {#if $isLocalMode}
-            { $_('selectVideo.file.hint') }
-            <Interpolator text={$_('selectVideo.file.help')} let:data={data}>
-                {#if data.name === 'link'}
-                    <a href="https://www.youtube.com/watch?v=FsT7kUaqBdM" target="_blank" on:click={clickDownloadTutorial}>{ data.text }</a>
-                {/if}
-            </Interpolator>
-        {:else}
-            {#if $url}
-                {#if $play}
-                    {#if $play.type == SourceType.direct}
-                        <Interpolator text={$_('selectVideo.link.hintNotWorking')} let:data={data}>
-                            {#if data.name === 'u'}
-                                <u>{ data.text }</u>
-                            {/if}
-                        </Interpolator>
-                        <Interpolator text={$_('selectVideo.link.help')} let:data={data}>
-                            {#if data.name === 'link'}
-                                <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
-                            {/if}
-                        </Interpolator>
-                    {/if}
-                {:else}
-                    { $_('selectVideo.link.hintInvalid') }
-                {/if}
-            {:else}
-                { $_('selectVideo.link.hintEmpty') }
-                <Interpolator text={$_('selectVideo.link.help')} let:data={data}>
-                    {#if data.name === 'link'}
-                        <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
-                    {/if}
-                </Interpolator>
-            {/if}
+    { $_('selectVideo.file.hint') }
+    <Interpolator text={$_('selectVideo.file.help')} let:data={data}>
+        {#if data.name === 'link'}
+            <a href="https://www.youtube.com/watch?v=FsT7kUaqBdM" target="_blank" on:click={clickDownloadTutorial}>{ data.text }</a>
         {/if}
-    </i>
+    </Interpolator>
 </div>
 
 <style lang="scss">
     .hint {
-        height: 1.5rem;
+       font-style: italic;
     }
 
     .example {
diff --git a/src/components/index.svelte b/src/components/index.svelte
index 6751d23..3e64b0d 100644
--- a/src/components/index.svelte
+++ b/src/components/index.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onDestroy } from 'svelte';
     import { _ } from 'svelte-i18n';
+    import { initWebtorrent } from '../web-torrent';
     import Loader from './loader.svelte';
     import { Room } from '../stores/room';
     import { syncTime } from '../stores/clock';
@@ -29,6 +30,7 @@
 
     const init = async function (roomId: string): Promise<Room> {
         await initTime();
+        await initWebtorrent();
         await destroy();
         previousRoom = new Room(roomId);
         await previousRoom.init();
diff --git a/src/components/room.svelte b/src/components/room.svelte
index 1ecaf97..ab537d3 100644
--- a/src/components/room.svelte
+++ b/src/components/room.svelte
@@ -4,7 +4,6 @@
     import { _ } from 'svelte-i18n';
     import Loader from './loader.svelte';
     import type { Room } from '../stores/room';
-    import { type Link } from '../normalize-link'
     import VideoSelector from './1-video-selector.svelte';
     import CopyUrl from './2-copy-url.svelte';
     import VideoPlayer from './video-player/index.svelte';
@@ -16,7 +15,7 @@
     export let room: Room;
 
     $: url = room?.url;
-    $: play = room?.play;
+    $: link = room?.link;
     $: paused = room?.paused;
     $: minutesWatched = room?.minutesWatched;
     $: currentTime = room?.currentTime;
@@ -55,7 +54,7 @@
 
 <div uk-grid class="container uk-margin-top uk-grid-small" transition:fade>
     <div class="player uk-width-expand">
-        <VideoPlayer bind:paused={$paused} bind:currentTime={$currentTime} link={$play} />
+        <VideoPlayer room={room} />
     </div>
     <div class="controls">
         <div uk-grid class="uk-grid-small">
diff --git a/src/components/video-player/index.svelte b/src/components/video-player/index.svelte
index 43f9f17..c3c747b 100644
--- a/src/components/video-player/index.svelte
+++ b/src/components/video-player/index.svelte
@@ -1,14 +1,6 @@
 <script lang="ts">
-    // Import styles.
-    import 'vidstack/player/styles/default/theme.css';
-    import 'vidstack/player/styles/default/layouts/audio.css';
-    import 'vidstack/player/styles/default/layouts/video.css';
-    // Register elements.
-    import 'vidstack/player';
-    import 'vidstack/player/layouts';
-    import 'vidstack/player/ui';
-
     import { onMount, onDestroy } from 'svelte';
+    import { derived, readable, type Readable } from 'svelte/store';
     import type { MediaPlayerElement } from 'vidstack/elements';
     import { _ } from 'svelte-i18n';
     import Loader from '../loader.svelte';
@@ -16,30 +8,36 @@
     import VideoPlayerNative from './video-player-native.svelte';
     import VideoPlayerVidstack from './video-player-vidstack.svelte';
     import VideoPlayerVime from './video-player-vime.svelte';
+    import VideoPlayerMagnet from './player-magnet.svelte';
     import { proxies } from '../../settings';
+    import { blobUrl } from '../../stores/blob';
+
+    export let room: Room;
 
-    export let link: Link | null;
-    export let currentTime: number;
-    export let paused: boolean;
+    $: link = room.link;
+    $: url = room.url;
+    $: currentTime = room.currentTime;
+    $: paused = room.paused;
     
     let muted = true;
 
     let isLoading: boolean = true;
 
-    $: playerType = (() => {
-        switch (link?.type) {
+    type Player = 'vime' | 'vidstack' | 'magnet' | null;
+    $: playerType = derived<Readable<Link | null>, Player>(room.link, ($link) => {
+        switch ($link?.type) {
             case SourceType.DailyMotion:
                 return 'vime';
             case SourceType.Vimeo:
             case SourceType.YouTube:
             case SourceType.direct:
                 return 'vidstack';
-            case SourceType.blob:
-                return 'native';
+            case SourceType.magnet:
+                return 'magnet';
             default:
                 return null;
         }
-    })();
+    });
 
     const normalizeLink = async function(link: Link): Link {
         if (link.type !== SourceType.direct || (!proxies.hlsUrl && !proxies.regularUrl)) {
@@ -69,22 +67,26 @@
 </script>
 
 <div class="viewer uk-text-small uk-flex uk-flex-center uk-flex-column uk-text-break uk-text-center">
-    {#if link}
-        {#await normalizeLink(link)}
-            <Loader/>
-        {:then link}
-            {#if playerType === 'native'}
-                <VideoPlayerNative link={link} bind:paused={paused} bind:currentTime={currentTime} bind:muted={muted}/>
-            {:else if playerType === 'vidstack'}
-                <VideoPlayerVidstack link={link} bind:paused={paused} bind:currentTime={currentTime} bind:muted={muted}/>
-            {:else if playerType === 'vime'}
-                <VideoPlayerVime link={link} bind:paused={paused} bind:currentTime={currentTime} bind:muted={muted}/>
-            {/if}
-        {/await}
+    {#if $blobUrl}
+        <VideoPlayerNative url={$blobUrl} bind:paused={$paused} bind:currentTime={$currentTime} bind:muted={muted}/>
     {:else}
-        <div class="uk-padding">
-            { $_('player.placeholder') }
-        </div>
+        {#if $link}
+            {#await normalizeLink($link)}
+                <Loader/>
+            {:then normalizedLink}
+                {#if $playerType === 'vidstack'}
+                    <VideoPlayerVidstack link={normalizedLink} bind:paused={$paused} bind:currentTime={$currentTime} bind:muted={muted}/>
+                {:else if $playerType === 'vime'}
+                    <VideoPlayerVime link={normalizedLink} bind:paused={$paused} bind:currentTime={$currentTime} bind:muted={muted}/>
+                {:else if $playerType === 'magnet'}
+                    <VideoPlayerMagnet link={normalizedLink} bind:paused={$paused} bind:currentTime={$currentTime} bind:muted={muted}/>
+                {/if}
+            {/await}
+        {:else}
+            <div class="uk-padding">
+                { $_('player.placeholder') }
+            </div>
+        {/if}
     {/if}
 </div>
 
diff --git a/src/components/video-player/player-magnet.svelte b/src/components/video-player/player-magnet.svelte
new file mode 100644
index 0000000..b4b5823
--- /dev/null
+++ b/src/components/video-player/player-magnet.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n';
+    import type { Link } from '../normalize-link';
+    import Loader from '../loader.svelte';
+    import { getStreamUrl } from '../../web-torrent';
+    import VideoPlayerNative from './video-player-native.svelte';
+
+    export let link: Link;
+    export let currentTime: number;
+    export let paused: boolean;
+    export let muted: boolean;
+
+    const sleep = function(ms: number): Promise<void> {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    };
+</script>
+
+{#if !navigator.serviceWorker}
+    { $_('player.torrentNotSupported') }
+{:else}
+    {#await getStreamUrl(link.url)}
+        <Loader />
+        {#await sleep(10000)}
+        {:then}
+            <div class="uk-margin-top">
+                { $_('player.isHostActive') }
+            </div>
+        {/await}
+    {:then streamUrl}
+        <VideoPlayerNative url={streamUrl} bind:paused={paused} bind:currentTime={currentTime} bind:muted={muted} />
+    {/await}
+{/if}
diff --git a/src/components/video-player/video-player-native.svelte b/src/components/video-player/video-player-native.svelte
index f16c487..befc61f 100644
--- a/src/components/video-player/video-player-native.svelte
+++ b/src/components/video-player/video-player-native.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Link } from '../../normalize-link';
 
-    export let link: Link;
+    export let url: string;
     export let currentTime: number;
     export let paused: boolean;
     export let muted: boolean;
@@ -13,7 +13,7 @@
 
 <video
     class="uk-width-1-1 uk-height-1-1"
-    src={link.url}
+    src={url}
     autoplay
     playsInline
     preload="metadata"
diff --git a/src/components/video-selector-btn.svelte b/src/components/video-selector-btn.svelte
index 20117ef..0149804 100644
--- a/src/components/video-selector-btn.svelte
+++ b/src/components/video-selector-btn.svelte
@@ -1,25 +1,41 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
     import { track, ClickEvent } from '../analytics.svelte';
-    import type { Room } from '../stores/room';
+    import { blobUrl } from '../stores/blob';
+    import { sendFile } from '../web-torrent';
+    import normalizeLink, { SourceType } from '../normalize-link';
 
-    export let room: Room;
 
-    $: blobUrl = room.blobUrl;
-    $: fileName = room.fileName;
+    export let url: string;
 
     let input: HTMLInputElement;
 
+    let sharingPending = false;
     const loadSource = async function (file: any): Promise<void> {
-        room.blobUrl.set(window.URL.createObjectURL(file) as string);
-        room.fileName.set(file.name);
+        if (navigator.serviceWorker && confirm($_('selectVideo.file.streamingConfirmation'))) {
+            sharingPending = true;
+            try {
+                url = await sendFile(file);
+            } catch (e) {
+                alert($_('selectVideo.file.streamingFailed'));
+                console.trace(e);
+            } finally {
+                sharingPending = false;
+            }
+        } else {
+            $blobUrl = window.URL.createObjectURL(file);
+        }
         track(new ClickEvent({ target: 'file_select' }));
     };
 </script>
 
 <input bind:this={input} type="file" on:change={e => loadSource(e.target.files[0])}/>
-<button on:click={() => input.click()} class="uk-button uk-button-default block">
-    {#if $blobUrl}
+<button disabled={sharingPending} on:click={() => input.click()} class="uk-button uk-button-default block">
+    {#if sharingPending}
+        { $_('selectVideo.file.streamingPending') }
+    {:else if normalizeLink(url)?.type === SourceType.magnet}
+        { $_('selectVideo.file.selectAnotherStream') }
+    {:else if $blobUrl}
         { $_('selectVideo.file.selectAnother') }
     {:else}
         { $_('selectVideo.file.select') }
diff --git a/src/destructable.ts b/src/destructable.ts
index 62acec8..d76f51e 100644
--- a/src/destructable.ts
+++ b/src/destructable.ts
@@ -3,11 +3,11 @@ type Destructor = () => void;
 export class Destructable {
     private readonly destructors: Destructor[] = [];
 
-    protected onDestruct (destructor: Destructor) {
+    onDestruct (destructor: Destructor) {
         this.destructors.push(destructor);
     }
 
-    protected registerDependency (destructable: Destructable) {
+    registerDependency (destructable: Destructable) {
         this.onDestruct(() => destructable.destruct());
     }
 
diff --git a/src/i18n/_.ts b/src/i18n/_.ts
index dd3f0c5..b1b77fe 100644
--- a/src/i18n/_.ts
+++ b/src/i18n/_.ts
@@ -4,10 +4,10 @@ const def = {
         name: 'English',
     },
     selectVideo: {
-        title: 'Select a video',
+        title: 'Select a video source',
         link: {
-            title: 'Online link',
-            insertExample: 'click here to paste random example',
+            title: 'From Link:',
+            insertExample: 'paste an example',
             description: 'Insert a link to {type}Dailymotion{/type}, {type}YouTube{/type}, {type}Vimeo{/type}, {type}HLS{/type} playlist, {type}video{/type} or {type}audio{/type} file. The input is synced with everyone in the room.',
             hintNotWorking: 'If the movie doesn\'t play, make sure the {u}direct{/u} video link is inserted.',
             hintEmpty: 'Don\'t know how to get a video link from a website?',
@@ -15,12 +15,16 @@ const def = {
             help: 'It\'s easy, {link}read here{/link}!'
         },
         file: {
-            title: 'From computer',
-            description: 'You all downloaded a movie already!? Well done! Everyone should select the same video file.',
+            title: 'From File:',
+            description: 'You downloaded a movie already!? Select a video file.',
             selectAnother: 'Click to select another video file',
+            selectAnotherStream: 'Replace the stream with your local file',
             select: 'Click to select video file',
             hint: 'Don\'t know how to download a video from a website?',
             help: 'It\'s easy, {link}watch here{/link}!',
+            streamingPending: 'Streaming pending...',
+            streamingConfirmation: 'Do you want to stream this copy of the video to other members in the room or do you want to play it for yourself only?\n\nClick "Ok" to stream with others; click "Cancel" to play for yourself only',
+            streamingFailed: 'Streaming failed',
         },
     },
     invite: {
@@ -42,6 +46,8 @@ const def = {
     },
     player: {
         placeholder: 'Video player will appear here when you insert a link or select file',
+        torrentNotSupported: 'Streaming is not supported in this browser since it doesn\'t support ServiceWorker. Please select a your local copy of the video',
+        isHostActive: 'This is taking too long... Please select a local copy of the video, or check that the streamer is online and has not refreshed the page',
     },
     poweredBy: 'Powered by',
     or: 'or',
diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
index accf3a7..9471947 100644
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -6,10 +6,10 @@ const fr: TranslatedText = {
         name: 'French | Français',
     },
     selectVideo: {
-        title: 'Sélectionnez une vidéo',
+        title: 'Sélectionnez une source vidéo',
         link: {
-            title: 'Lien en ligne',
-            insertExample: 'cliquez ici pour coller un exemple aléatoire',
+            title: 'Du lien:',
+            insertExample: 'coller un exemple',
             description: 'Insérez un lien vers une playlist {type}Dailymotion{/type}, {type}YouTube{/type}, {type}Vimeo{/type}, {type}HLS{/type}, {type}vidéo{/type} ou Fichier {type}audio{/type}. L\'entrée est synchronisée avec toutes les personnes présentes dans la pièce.',
             hintNotWorking: 'Si le film ne démarre pas, assurez-vous que le lien vidéo {u}direct{/u} est inséré.',
             hintEmpty: 'Vous ne savez pas comment obtenir un lien vidéo à partir d\'un site Web ?',
@@ -17,12 +17,16 @@ const fr: TranslatedText = {
             help: 'C\'est facile, {link}lire ici{/link}!'
         },
         file: {
-            title: 'Depuis l\'ordinateur',
-            description: 'Vous avez déjà tous téléchargé un film !? Bien joué! Tout le monde devrait sélectionner le même fichier vidéo.',
+            title: 'Du dossier:',
+            description: 'Vous avez déjà téléchargé un film ? Sélectionner un fichier vidéo',
             selectAnother: 'Cliquez pour sélectionner un autre fichier vidéo',
             select: 'Cliquez pour sélectionner le fichier vidéo',
             hint: 'Vous ne savez pas comment télécharger une vidéo à partir d\'un site Web ?',
             help: 'C\'est simple, {link}regardez ici{/link}!',
+            selectAnotherStream: 'Remplacer le flux par votre fichier local',
+            streamingPending: 'Streaming en attente...',
+            streamingConfirmation: 'Voulez-vous diffuser cette copie de la vidéo aux autres membres de la salle ou voulez-vous la lire pour vous seul?\n\n Cliquez sur "Ok" pour diffuser la vidéo avec d\'autres membres ; cliquez sur "Cancel" pour la diffuser pour vous seul.',
+            streamingFailed: 'Échec de la diffusion en continu'
         },
     },
     invite: {
@@ -44,6 +48,8 @@ const fr: TranslatedText = {
     },
     player: {
         placeholder: 'Le lecteur vidéo apparaîtra ici lorsque vous insérez un lien ou sélectionnez un fichier',
+        torrentNotSupported: 'La diffusion en continu n\'est pas prise en charge par ce navigateur car il ne prend pas en charge ServiceWorker. Veuillez sélectionner une copie locale de la vidéo',
+        isHostActive: 'Cela prend trop de temps... Veuillez sélectionner votre copie locale de la vidéo ou vérifier si le diffuseur est en ligne et n\'a pas actualisé la page',
     },
     poweredBy: 'Alimenté par',
     or: 'ou',
diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
index 0b91971..7fa338a 100644
--- a/src/i18n/ru.ts
+++ b/src/i18n/ru.ts
@@ -6,10 +6,10 @@ const ru: TranslatedText = {
         name: 'Russian | Русский',
     },
     selectVideo: {
-        title: 'Выбрать видео',
+        title: 'Выбрать источник видео',
         link: {
-            title: 'Онлайн',
-            insertExample: 'нажми сюда, чтобы вставить пример',
+            title: 'Онлайн ссылка:',
+            insertExample: 'вставить пример',
             description: 'Вставь ссылку на {type}Dailymotion{/type}, {type}YouTube{/type}, {type}Vimeo{/type}, {type}HLS{/type} плейлист, {type}видео{/type} или {type}аудио{/type} файл. Поле ввода синхронизованно со всеми в этой комнате.',
             hintNotWorking: 'Если фильм не грузится, убедись, что введена {u}прямая{/u} ссылка на видео.',
             hintEmpty: 'Не знаешь, как получить прямую ссылку на видео?',
@@ -17,12 +17,16 @@ const ru: TranslatedText = {
             help: 'Это просто, {link}читай здесь{/link}!'
         },
         file: {
-            title: 'Файл на компьютере',
-            description: 'Вы оба уже скачали фильм?! Супер, оба должны выбрать его по кнопке ниже',
+            title: 'Файл на компьютере:',
+            description: 'Вы уже скачали фильм!? Выберите видеофайл',
             selectAnother: 'Выбрать другой видео-файл',
             select: 'Выбрать видео-файл',
             hint: 'Не знаешь как скачать видео с сайта?',
             help: 'Это просто, {link}смотри здесь{/link}!',
+            selectAnotherStream: 'Заменить стрим своим локальным файлом',
+            streamingPending: 'Подготовка к стримингу...',
+            streamingConfirmation: 'Хотите ли вы стримить эту копию видео другим пользователям в комнате или хотите воспроизвести её только для себя?\n\nНажмите "Ok", чтобы транслировать видео другим; нажмите "Cancel", чтобы воспроизвести видео только для себя',
+            streamingFailed: 'Ошибка стриминга',
         },
     },
     invite: {
@@ -44,6 +48,8 @@ const ru: TranslatedText = {
     },
     player: {
         placeholder: 'Вставь ссылку на видео или выбери файл, чтобы начать воспроизведение фильма',
+        torrentNotSupported: 'Потоковая передача не поддерживается в этом браузере, так как он не поддерживает ServiceWorker. Пожалуйста, выберите локальную копию видео',
+        isHostActive: 'Это занимает слишком много времени... Пожалуйста, выберите локальную копию видео, либо проверьте, что стример находится в сети и не обновлял страницу'
     },
     poweredBy: 'Сделано с помощью',
     or: 'или',
diff --git a/src/main.ts b/src/main.ts
index 86b7ad1..cf319a6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,29 +1,26 @@
 import * as Sentry from '@sentry/svelte';
-import { registerSW } from "virtual:pwa-register";
 import { initI18n } from './i18n';
 import Root from './App.svelte';
 import { environment, sentry, url } from './settings';
 
-registerSW({ immediate: true });
-
 if (sentry.dsn) {
     Sentry.init({
         dsn: sentry.dsn,
         integrations: [
             Sentry.browserTracingIntegration(),
             Sentry.replayIntegration({
-              maskAllText: false,
-              blockAllMedia: false,
+                maskAllText: false,
+                blockAllMedia: false,
             }),
-      ],
-      environment,
-      // Performance Monitoring
-      tracesSampleRate: 1.0, //  Capture 100% of the transactions
-      // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
-      tracePropagationTargets: ['localhost', url],
-      // Session Replay
-      replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
-      replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+        ],
+        environment,
+        // Performance Monitoring
+        tracesSampleRate: 1.0, //  Capture 100% of the transactions
+        // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+        tracePropagationTargets: ['localhost', url],
+        // Session Replay
+        replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+        replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
     });
 }
 
diff --git a/src/normalize-link.ts b/src/normalize-link.ts
index a6169b0..37ac9f5 100644
--- a/src/normalize-link.ts
+++ b/src/normalize-link.ts
@@ -1,6 +1,6 @@
 export enum SourceType {
-    blob = 'blob',
     direct = 'direct',
+    magnet = 'magnet',
     DailyMotion = 'Dailymotion',
     YouTube = 'YouTube',
     Vimeo = 'Vimeo',
@@ -72,32 +72,37 @@ class Dailymotion extends LinkBuilderRegex {
     }
 }
 
-class Direct extends LinkBuilder {
-    protected static type = SourceType.direct;
+class Magnet extends LinkBuilder {
+    protected static type = SourceType.magnet;
 
     parse(link: string): string | null {
         try {
             const url = new URL(link);
-            return url.protocol === "http:" || url.protocol === "https:" ? link : null;
+            return url.protocol === "magnet:" ? link : null;
         } catch {
             return null;
         }
     }
 }
 
-class Blob extends LinkBuilder {
-    protected static type = SourceType.blob;
+class Direct extends LinkBuilder {
+    protected static type = SourceType.direct;
 
     parse(link: string): string | null {
-        return link.startsWith("blob:") ? link : null;
+        try {
+            const url = new URL(link);
+            return url.protocol === "http:" || url.protocol === "https:" ? link : null;
+        } catch {
+            return null;
+        }
     }
 }
 
 const parsers: LinkBuilder[] = [
-    new Blob(),
     new YouTube(),
     new Vimeo(),
     new Dailymotion(),
+    new Magnet(),
     new Direct(), // direct should always be the last one
 ];
 
diff --git a/src/settings.ts b/src/settings.ts
index be61deb..71cd66e 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -10,23 +10,27 @@ export const firebaseConfig = {
 };
 
 export const sentry = {
-    dsn: import.meta.env['VITE_SENTRY_DSN'],
+    dsn: import.meta.env['VITE_SENTRY_DSN']?.trim(),
 };
 
 export const environment = import.meta.env['MODE'];
 export const isProduction = import.meta.env['PROD'] && environment === 'production';
 
 export const analytics = {
-    measurementId: import.meta.env['VITE_ANALYTICS_MEASHUREMENT_ID'],
+    measurementId: import.meta.env['VITE_ANALYTICS_MEASHUREMENT_ID']?.trim(),
 };
 
 export const url = import.meta.env['VITE_URL'];
 
 export const proxies = {
-    hlsUrl: import.meta.env['VITE_PROXIES_HLS_URL'],
-    regularUrl: import.meta.env['VITE_PROXIES_REGULAR_URL'],
+    hlsUrl: import.meta.env['VITE_PROXIES_HLS_URL']?.trim(),
+    regularUrl: import.meta.env['VITE_PROXIES_REGULAR_URL']?.trim(),
 };
 
-export const urlExamples = import.meta.env['VITE_URL_EXAMPLES']?.split(',');
+export const iceServers: string = import.meta.env['VITE_ICE_SERVERS'].split(',').map((x: string) => x.trim());
 
-export const userNames = import.meta.env['VITE_USERNAMES']?.split(',');
\ No newline at end of file
+export const webTorrentTrackers: string[] = import.meta.env['VITE_WEB_TORRENT_TRACKERS']?.split(',').map((x: string) => x.trim());
+
+export const urlExamples: string[] = import.meta.env['VITE_URL_EXAMPLES']?.split(',').map((x: string) => x.trim());
+
+export const userNames: string[] = import.meta.env['VITE_USERNAMES']?.split(',').map((x: string) => x.trim());
\ No newline at end of file
diff --git a/src/stores/blob.ts b/src/stores/blob.ts
new file mode 100644
index 0000000..374c1eb
--- /dev/null
+++ b/src/stores/blob.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const blobUrl = writable<string>('');
diff --git a/src/stores/bound-minutes-watched.ts b/src/stores/bound-minutes-watched.ts
index d2d9f90..6a0f55e 100644
--- a/src/stores/bound-minutes-watched.ts
+++ b/src/stores/bound-minutes-watched.ts
@@ -3,20 +3,20 @@ import { type Readable, type Subscriber, type Unsubscriber, get } from 'svelte/s
 import { BoundStore } from './bound-store';
 import { track, WatchedMinuteEvent } from '../analytics.svelte';
 import { Destructable } from '../destructable';
-import type { Link } from '../normalize-link';
+import type { Link } from '../components/video-player/normalize-link';
 import { myId } from '../stores/my-id';
 
 export class BoundMinutesWatched extends Destructable implements Readable<number> {
     private readonly store: BoundStore<number>;
     private readonly pausedStore: Readable<boolean>;
-    private readonly playStore: Readable<Link | null>;
+    private readonly urlStore: Readable<string>;
     private readonly roomId: string;
 
-    constructor (ref: DatabaseReference, roomId: string, playStore: Readable<Link | null>, pausedStore: Readable<boolean>) {
+    constructor (ref: DatabaseReference, roomId: string, urlStore: Readable<string>, pausedStore: Readable<boolean>) {
         super();
         this.roomId = roomId;
         this.pausedStore = pausedStore;
-        this.playStore = playStore;
+        this.urlStore = urlStore;
         this.store = new BoundStore<number>(child(ref, myId), 0);
     }
 
@@ -28,10 +28,9 @@ export class BoundMinutesWatched extends Destructable implements Readable<number
         await this.store.init();
 
         const idMinuteSpent = setInterval(() => {
-            const play = get(this.playStore);
-            if (play && !get(this.pausedStore)) {
+            if (get(this.urlStore) && !get(this.pausedStore)) {
                 this.store.update(x => x + 1);
-                track(new WatchedMinuteEvent({ roomId: this.roomId, sourceType: play.type }));
+                track(new WatchedMinuteEvent({ roomId: this.roomId }));
             }
         }, 60000);
         this.onDestruct(() => clearInterval(idMinuteSpent));
diff --git a/src/stores/bound-timed-store.ts b/src/stores/bound-timed-store.ts
index 9173352..3cacea5 100644
--- a/src/stores/bound-timed-store.ts
+++ b/src/stores/bound-timed-store.ts
@@ -29,7 +29,13 @@ export class BoundTimedStore<T> implements Writable<T> {
     }
 
     subscribe (f: Subscriber<T>) {
-        return this.store.subscribe(({ value }) => f(value));
+        let oldValue: T | null = null;
+        return this.store.subscribe(({ value }) => {
+            if (value !== oldValue) {
+                oldValue = value;
+                f(value)
+            }
+        });
     }
 
     set (value: T) {
diff --git a/src/stores/room.ts b/src/stores/room.ts
index 7055f5e..bf30ee3 100644
--- a/src/stores/room.ts
+++ b/src/stores/room.ts
@@ -1,5 +1,4 @@
-import { writable, type Writable, type Readable, readable } from 'svelte/store';
-import { get as getStore } from 'svelte/store';
+import { derived,writable, type Writable, type Readable, readable } from 'svelte/store';
 import { ref, child, getDatabase } from 'firebase/database';
 import { initializeApp } from 'firebase/app';
 import { BoundStore } from './bound-store';
@@ -14,19 +13,13 @@ import { BoundCurrentTime } from './bound-current-time';
 
 const database = getDatabase(initializeApp(firebaseConfig));
 
-const getPlayLink = function (isLocalMode: boolean, url: string, blobUrl: string) {
-    return normalizeLink(isLocalMode ? blobUrl : url);
-};
-
 export class Room extends Destructable {
     readonly id: string;
 
-    readonly play: Readable<Link | null>;
-    readonly blobUrl: Writable<string> = writable<string>('');
+    readonly link: Readable<Link | null>;
     readonly fileName: Writable<string> = writable<string>('');
 
     readonly url: BoundTimedStore<string>;
-    readonly isLocalMode: BoundTimedStore<boolean>;
     readonly paused: BoundTimedStore<boolean>;
     readonly minutesWatched: BoundMinutesWatched;
     readonly currentTime: BoundCurrentTime;
@@ -42,22 +35,12 @@ export class Room extends Destructable {
         this.url = new BoundTimedStore<string>(child(roomRef, 'url'), '');
         this.currentTime = new BoundCurrentTime(child(roomRef, 'currentTime'));
         this.paused = new BoundTimedStore<boolean>(child(roomRef, 'paused'), true);
-        this.isLocalMode = new BoundTimedStore<boolean>(child(roomRef, 'isLocalMode'), false);
         this.createdAt = new BoundStore<number>(child(roomRef, 'createdAt'), now());
         this.users = new UsersBoundStore(child(roomRef, 'users'));
-        this.play = readable<Link | null>(null, set => {
-            const url = this.url.subscribe(newUrl => {
-                set(getPlayLink(getStore(this.isLocalMode), newUrl, getStore(this.blobUrl)));
-            });
-            const blob = this.blobUrl.subscribe(newBlob => {
-                set(getPlayLink(getStore(this.isLocalMode), getStore(this.url), newBlob));
-            });
-            const localMode = this.isLocalMode.subscribe(newLocalMode => {
-                set(getPlayLink(newLocalMode, getStore(this.url), getStore(this.blobUrl)));
-            });
-            return () => [url, blob, localMode].forEach(x => x());
-        });
-        this.minutesWatched = new BoundMinutesWatched(child(roomRef, 'minutesWatched'), roomId, this.play, this.paused);
+        this.link = derived<Readable<string>, Link | null>(this.url, (($url) => {
+            return normalizeLink($url);
+        }));
+        this.minutesWatched = new BoundMinutesWatched(child(roomRef, 'minutesWatched'), roomId, this.url, this.paused);
 
         this.registerDependency(this.users);
         this.registerDependency(this.minutesWatched);
@@ -67,7 +50,6 @@ export class Room extends Destructable {
         await this.url.init();
         await this.currentTime.init();
         await this.paused.init();
-        await this.isLocalMode.init();
         await this.minutesWatched.init();
         await this.createdAt.init();
         await this.users.init();
diff --git a/src/web-torrent.ts b/src/web-torrent.ts
new file mode 100644
index 0000000..86f0a41
--- /dev/null
+++ b/src/web-torrent.ts
@@ -0,0 +1,95 @@
+import 'https://cdn.jsdelivr.net/npm/webtorrent@latest/webtorrent.min.js';
+import { iceServers, webTorrentTrackers } from './settings';
+
+// @ts-ignore
+window.WEBTORRENT_ANNOUNCE = null;
+
+let __client: any;
+export const initWebtorrent = async function () {
+    if (!navigator.serviceWorker) {
+        return;
+    }
+
+    const reg = await navigator.serviceWorker.register('/sw.min.js');
+    const worker = reg.active || reg.waiting || reg.installing as ServiceWorker;
+
+    await new Promise<void>((resolve, reject) => {
+        function checkState (worker: any): boolean {
+            return worker.state === 'activated';
+        }
+        if (!checkState(worker)) {
+            worker.addEventListener('statechange', ({ target }) => {
+                if (checkState(target)) {
+                    resolve();
+                }
+            });
+        } else {
+            resolve();
+        }
+    });
+};
+
+const promise = async function (obj: any, f: any, ...arg: any) {
+    return new Promise((resolve, reject) => {
+        f.apply(obj, [...arg, (first: any, second: any) => {
+            if (second === undefined) {
+                resolve(first);
+            } else if (first) {
+                reject(first);
+            } else {
+                resolve(second);
+            }
+        }])
+    });
+};
+
+export const createWebTorrentClient = async function () {
+    if (__client) {
+        return __client;
+    }
+    // @ts-ignore
+    const client = new WebTorrent({
+        tracker: {
+            rtcConfig: {
+                iceServers: iceServers.map((iceServer: string) => ({ urls: iceServer })),
+            },
+            sdpSemantics: 'unified-plan',
+            bundlePolicy: 'max-bundle',
+            iceCandidatePoolsize: 1
+        }
+    });
+    await promise(client, client.loadWorker, navigator.serviceWorker.controller);
+    __client = client;
+    return __client;
+};
+
+export const sendFile = async function (file: File): Promise<string> {
+    const client = await createWebTorrentClient();
+    for (const torrent of client.torrents) {
+        await promise(client, client.remove, torrent);
+    }
+    return new Promise(resolve => {
+        const opts: any = {};
+        if (webTorrentTrackers) {
+            opts.announceList = webTorrentTrackers.map((tracker: string) => [tracker]);
+        }
+        client.seed([file], opts, (torrent: any) => {
+            resolve(torrent.magnetURI);
+        });
+    });
+};
+
+export const getStreamUrl = async function (url: string) {
+    const client = await createWebTorrentClient();
+    let torrent: any = client.torrents.find((torrent: any) => torrent.magnetURI === url);
+    if (!torrent) {
+        for (const torrent of client.torrents) {
+            await promise(client, client.remove, torrent);
+        }
+        torrent = await promise(client, client.add, url);
+    }
+    while (!torrent.files.length) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+    return promise(torrent.files[0], torrent.files[0].getStreamURL);
+};
diff --git a/static/sw.min.js b/static/sw.min.js
new file mode 100644
index 0000000..ccb7ac8
--- /dev/null
+++ b/static/sw.min.js
@@ -0,0 +1 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module){async function serve({request}){const{url,method,headers,destination}=request,clientlist=await clients.matchAll({type:"window",includeUncontrolled:!0}),[data,port]=await new Promise(resolve=>{for(const client of clientlist){const messageChannel=new MessageChannel,{port1,port2}=messageChannel;port1.onmessage=({data})=>{resolve([data,port1])},client.postMessage({url,method,headers:Object.fromEntries(headers.entries()),scope:self.registration.scope,destination,type:"webtorrent"},[port2])}});if("STREAM"!==data.body&&"DOWNLOAD"!==data.body)return new Response(data.body,data);let timeOut=null;return new Response(new ReadableStream({pull(controller){return new Promise(resolve=>{port.onmessage=({data})=>{data?controller.enqueue(data):(clearTimeout(timeOut),controller.close(),port.onmessage=null),resolve()},cancellable||(clearTimeout(timeOut),"STREAM"===data.body&&(timeOut=setTimeout(()=>{controller.close(),port.postMessage(!1),port.onmessage=null,resolve()},portTimeoutDuration))),port.postMessage(!0)})},cancel(){port.postMessage(!1),clearTimeout(timeOut),port.onmessage=null}}),data)}const portTimeoutDuration=5e3;let cancellable=!1;module.exports=event=>{const{url}=event.request;return url.includes(self.registration.scope+"webtorrent/")?url.includes(self.registration.scope+"webtorrent/keepalive/")?new Response:url.includes(self.registration.scope+"webtorrent/cancel/")?new Response(new ReadableStream({cancel(){cancellable=!0}})):serve(event):null}},{}],2:[function(require){const fileResponse=require("./worker-server.js");self.addEventListener("install",()=>{self.skipWaiting()}),self.addEventListener("fetch",event=>{const res=fileResponse(event);res&&event.respondWith(res)}),self.addEventListener("activate",()=>{self.clients.claim()})},{"./worker-server.js":1}]},{},[2]);
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 38a8bb0..281e996 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -67,4 +67,5 @@ export default defineConfig({
             }
         })
     ],
+    publicDir: './static',
 })