Refactoring

src/analytics.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" context="module">
     import { analytics, isProduction } from './settings';
-    import { SourceType } from './normalize-source';
+    import normalizeSource, { SourceType } from './normalize-source';
+    import { blob } from './stores/blob';
     import type { MessageType } from './stores/room/bound-messages';
     import type { Room } from './stores/room';
     import { get } from 'svelte/store';
@@ -40,15 +41,38 @@
 
     abstract class RoomEvent<T> extends Event<T & RoomDetails> {
         constructor(room: Room, params: T) {
-            const src = get(room.source)?.src;
+            let srcType: SourceType | undefined;
+            let srcUrl: string | undefined;
+            let isExample: boolean = false;
+
+            const blobValue = get(blob);
+            if (blobValue) {
+                srcType = SourceType.blob;
+                isExample = false;
+            } else {
+                const source = normalizeSource(get(room.url));
+                if (source) {
+                    srcType = source.type;
+                    if (srcType === SourceType.direct) {
+                        srcUrl = new URL(source.src).hostname;
+                    } else {
+                        srcUrl = source.src;
+                    }
+                    isExample = source.isExaple();
+                } else {
+                    srcType = undefined;
+                    srcUrl = undefined;
+                }
+            }
+            
             super({
                 ...params,
                 roomId: room.id,
                 paused: get(room.paused),
-                srcType: get(room.source)?.type,
-                srcUrl: src instanceof Blob ? undefined : src,
+                srcType,
+                srcUrl,
                 usersCount: get(room.users)?.length || 1, // yourself
-                isExample: get(room.source)?.isExaple(),
+                isExample,
             });
         }
     }

src/components/card-video-selector.svelte

@@ -9,13 +9,13 @@
     import { downloadSpeed, uploadSpeed, progress, isSeeding, peers } from '../stores/web-torrent';
     import { Room } from '../stores/room';
     import Loader from './loader.svelte';
-    import { SourceType } from '../normalize-source';
+    import normalizeSource, { SourceType } from '../normalize-source';
     import { blob } from '../stores/blob';
 
     export let room: Room;
 
     $: url = room?.url;
-    $: source = room?.source;
+    $: source = normalizeSource($url);
     $: if ($url) {
         $blob = null;
     }
@@ -34,7 +34,7 @@
     };
 
     const onInput = function () {
-        $source && track(new UrlPasteEvent(room, { url: $url }));
+        source && track(new UrlPasteEvent(room, { url: $url }));
     };
 </script>
 
@@ -53,7 +53,7 @@
                 bind:value={$url}
                 on:input={onInput}
                 class="uk-input"
-                class:uk-form-danger={!$source}
+                class:uk-form-danger={!source}
                 placeholder="Video URL"
             />
             {#if !$url && haveExamples}
@@ -70,15 +70,15 @@
             <button class="uk-input" disabled><Loader ratio={0.5} /></button>
         {/if}
     </div>
-    {#if $source && $source.type == SourceType.magnet && !$isSeeding && isFinite($progress)}
+    {#if source?.type == SourceType.magnet && !$isSeeding && isFinite($progress)}
         <progress class="uk-progress progress uk-margin-remove" value={$progress} max="1"></progress>
     {/if}
     </div>
 
 <div class="hint uk-text-center uk-text-small">
     {#if $url}
-        {#if $source}
-            {#if $source.type == SourceType.direct}
+        {#if source}
+            {#if source.type == SourceType.direct}
                 <Interpolator text={$_('selectVideo.link.hintNotWorking')} let:data={data}>
                     {#if data.name === 'u'}
                         <u>{ data.text }</u>
@@ -89,7 +89,7 @@
                         <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>
-            {:else if $source && ($source.type === SourceType.magnet)}
+            {:else if source && (source.type === SourceType.magnet)}
                     <div class="uk-flex uk-text-small uk-relative uk-padding-top">
                             <div class="uk-flex-1">{ $_('downloadSpeed', { values: { speed: `${prettierBytes($downloadSpeed || 0)}/s` }}) }</div>
                             <div class="uk-flex-1">{ $_('uploadSpeed', { values: { speed: `${prettierBytes($uploadSpeed || 0)}/s` }}) }</div>

src/components/index.svelte

@@ -20,7 +20,7 @@
         destroy();
         previousRoom = new Room(roomId);
         await previousRoom.init();
-        if (isDesktop && get(previousRoom.source)) {
+        if (isDesktop && get(previousRoom.url)) {
             setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 1000);     
         }
         return previousRoom;

src/components/users/index.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
-    import User from './user.svelte';
+    import type { User as UserModel } from '../../stores/user';
     import { me } from '../../stores/me';
+    import User from './user.svelte';
 
-    export let users: User[];
+    export let users: UserModel[];
 </script>
 
 <div class="users uk-flex-center uk-flex uk-text-center uk-flex-middle">
-    <User user={({ name: $me.name })} me={true} bind:myName={$me.name} />
+    <User bind:userName={$me.name} canEdit={true} status={$_('you')} />
     {#if users}
         {#each users as user (user.id)}
             {#if $me.id !== user.id}
-                <User user={user} me={false} status={ $_('users.online')} />
+                <User userName={user.name} canEdit={false} status={$_('users.online')} />
             {/if}
         {/each}
     {/if}

src/components/users/user.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
-    import type { User } from '../../stores/bound-user';
 
-    export let user: User;
-    export let myName: string;
-    export let me: boolean;
+    export let userName: string;
+    export let canEdit: string;
     export let status: string;
 
     const maxLength = 10;
 
     const updateName = function () {
-        if (me) {
-            myName = prompt($_('users.nameEditPromt', { values: { maxLength }}), myName);
+        if (canEdit) {
+            userName = prompt($_('users.nameEditPromt', { values: { maxLength }}), userName) || '';
         }
     };
 
@@ -26,19 +24,15 @@
 >
     <div
         class="uk-text-emphasis uk-margin-small-top"
-        class:pointer={me}
-        class:uk-text-large={user.name.length === 1 || isEmoji(user.name)}
+        class:pointer={canEdit}
+        class:uk-text-large={userName.length === 1 || isEmoji(userName)}
         on:click={updateName}
-        uk-tooltip={me ? $_('users.nameEdit') : undefined }
+        uk-tooltip={canEdit ? $_('users.nameEdit') : undefined }
     >
-        { user.name.slice(0, maxLength) }
+        { userName.slice(0, maxLength) }
     </div>
     <span class="uk-text-muted uk-text-small">
-        {#if me}
-            { $_('you') }
-        {:else}
-            { status }
-        {/if}
+        { status }
     </span>
 </div>
 
@@ -49,4 +43,4 @@
         text-wrap: wrap;
         padding: 0.5rem;
     }
-</style>
+</style>

src/components/video-player/chat/index.svelte

@@ -47,8 +47,10 @@
         }
         temporaryUnlock = setTimeout(async () => {
             temporaryUnlock = 0;
-            await tick()
-            inputElement.focus();
+            await tick();
+            inputElement?.focus();
+            await tick();
+            inputElement?.focus();
         }, temporaryUnlockTimeout * 1000);
     }
 
@@ -58,7 +60,9 @@
             event.preventDefault();
             resetTimeout();
             await tick();
-            inputElement.focus();
+            inputElement?.focus();
+            await tick();
+            inputElement?.focus();
         }
     };
 

src/components/video-player/chat/message.svelte

@@ -42,8 +42,8 @@
     })();
 </script>
 
-{#if messageText.trim() }
-    <div in:slide>
+<div transition:slide>
+    {#if messageText.trim() }
         <div transition:fade class="video-text uk-text-break" class:user-message={messageGroup[0].type === MessageType.regular}>
             {#each new Set(messageGroup.map(({ userId }) => userId)) as userId, i}
                 {#if messageGroup.length > 1}
@@ -60,8 +60,8 @@
             {#if messageGroup[0].type === MessageType.regular}:{/if}
             { messageText }
         </div>
-    </div>
-{/if}
+    {/if}
+</div>
 
 <style lang="scss">
     .user-message {

src/components/video-player/explore-url.ts

@@ -2,7 +2,7 @@ import { Source, SourceType } from '../../normalize-source';
 import { proxies } from '../../settings';
 
 export const exploreUrl = async function(source: Source): Promise<Source> {
-    if (source.type !== SourceType.direct || source.src instanceof Blob) {
+    if (source.type !== SourceType.direct) {
         return source;
     }
 
@@ -66,3 +66,4 @@ const tryProxy = function* (source: Source): Generator<Source> {
     }
     yield new Source({ ...source, src });
 };
+

src/components/video-player/index.svelte

@@ -2,7 +2,7 @@
     import { onDestroy, onMount } from 'svelte';
     import { derived, type Readable } from 'svelte/store';
     import { _ } from 'svelte-i18n';
-    import { Source, SourceType } from '../../normalize-source';
+    import normalizeSource, { Source, SourceType } from '../../normalize-source';
     import { exploreUrl } from './explore-url';
     import VideoPlayerVidstack from './video-player-vidstack.svelte';
     import VideoPlayerVime from './video-player-vime.svelte';
@@ -17,9 +17,10 @@
 
     export let room: Room;
 
-    $: source = room?.source;
+    $: url = room?.url;
     $: currentTime = room?.currentTime;
     $: paused = room?.paused;
+    $: source = normalizeSource($url);
 
     const cursor = createCursorStore(2000);
 
@@ -28,8 +29,8 @@
     let muted = true;
 
     type Player = 'vime' | 'vidstack' | 'magnet' | null;
-    $: playerType = room && derived<Readable<Source | null>, Player>(room.source, ($source) => {
-        switch ($source?.type) {
+    $: playerType = (function() {
+        switch (source?.type) {
             case SourceType.DailyMotion:
                 return 'vime';
             case SourceType.Vimeo:
@@ -41,12 +42,12 @@
             default:
                 return null;
         }
-    });
+    })();
 
     let watchMinuteAnalyticsTimeInterval: number;;
     onMount(() => {
         watchMinuteAnalyticsTimeInterval = setInterval(() => {
-            if ($source && !$paused) {
+            if (source && !$paused) {
                 track(new WatchedMinuteEvent(room));
             }
         }, 60000);
@@ -102,11 +103,11 @@
                 <Inplayer room={room} visible={displayControls}/>
             </VideoPlayerVidstack>
         {:else}
-            {#if $source}
-                {#await exploreUrl($source)}
+            {#if source}
+                {#await exploreUrl(source)}
                     <Loader/>
                 {:then normalizedSource}
-                    {#if $playerType === 'vidstack'}
+                    {#if playerType === 'vidstack'}
                         <VideoPlayerVidstack
                             source={normalizedSource}
                             bind:paused={$paused}
@@ -120,9 +121,9 @@
                         >
                             <Inplayer room={room} visible={displayControls}/>
                         </VideoPlayerVidstack>
-                    {:else if $playerType === 'vime'}
+                    {:else if playerType === 'vime'}
                         <VideoPlayerVime source={normalizedSource} bind:paused={$paused} bind:currentTime={$currentTime} bind:muted={muted}/>
-                    {:else if $playerType === 'magnet'}
+                    {:else if playerType === 'magnet'}
                         <VideoPlayerMagnet
                             source={normalizedSource}
                             room={room}

src/components/video-player/player-magnet.svelte

@@ -23,8 +23,6 @@
     <div class="chat">
         <slot name="chat" />
     </div>
-{:else if source.src instanceof Blob}
-    <p>Blob src is provided to magnet player. Developers fucked up. Contact them.</p>
 {:else}
     {#await getStreamUrl(source.src)}
         <Loader />

src/components/video-player/video-player-vidstack.svelte

@@ -8,7 +8,7 @@
     import 'vidstack/player/layouts';
     import 'vidstack/player/ui';
 
-    import { onMount, onDestroy, createEventDispatcher } from 'svelte';
+    import { onDestroy, createEventDispatcher } from 'svelte';
     import type { MediaPlayerElement } from 'vidstack/elements';
     import type { Source } from '../../normalize-source';
 
@@ -27,8 +27,10 @@
     $: isMounted && (player.paused = paused);
     $: isMounted && (player.muted = muted);
 
+
     let unsubscribe: () => void;
-    onMount(() => {
+    const init = function () {
+        destroy();
         unsubscribe = player.subscribe(options => {
             const optionsTime = options.currentTime;
             const optionsPaused = options.paused;
@@ -43,10 +45,18 @@
         player.currentTime = currentTime;
         player.paused = paused;
         player.muted = muted;
-    });
+    };
 
-    onDestroy(() => {
+    const destroy = function () {
         unsubscribe && unsubscribe();
+    };
+
+    $: if (player) {
+        init();
+    }
+
+    onDestroy(() => {
+        destroy()
     });
 </script>