Add streaming support

ed-asriyan · Apr 12, 2024 · 607ca2d · 607ca2d
1 parent 841e81b
commit 607ca2d
Show file tree

Hide file tree

Showing 25 changed files with 361 additions and 220 deletions.
diff --git 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
@@ -31,14 +31,16 @@ 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
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">