From ed61dbc9df673689f11af4b27fa42e4893563ef3 Mon Sep 17 00:00:00 2001
From: Ed Asriyan <github@asriyan.me>
Date: Sun, 25 Aug 2024 12:05:33 -0700
Subject: [PATCH] Refactoring

---
 src/analytics.svelte                          | 34 ++++++++++++++++---
 src/components/card-video-selector.svelte     | 16 ++++-----
 src/components/index.svelte                   |  2 +-
 src/components/users/index.svelte             |  9 ++---
 src/components/users/user.svelte              | 26 ++++++--------
 src/components/video-player/chat/index.svelte | 10 ++++--
 .../video-player/chat/message.svelte          |  8 ++---
 src/components/video-player/explore-url.ts    |  3 +-
 src/components/video-player/index.svelte      | 23 +++++++------
 .../video-player/player-magnet.svelte         |  2 --
 .../video-player/video-player-vidstack.svelte | 18 +++++++---
 src/normalize-source.ts                       | 12 +++----
 src/stores/room/bound-minutes-watched.ts      | 16 ++++-----
 src/stores/room/index.ts                      |  6 +---
 14 files changed, 105 insertions(+), 80 deletions(-)

diff --git a/src/analytics.svelte b/src/analytics.svelte
index 6437659..f1c865d 100644
--- a/src/analytics.svelte
+++ b/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,
             });
         }
     }
diff --git a/src/components/card-video-selector.svelte b/src/components/card-video-selector.svelte
index c548c28..0275b92 100644
--- a/src/components/card-video-selector.svelte
+++ b/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>
diff --git a/src/components/index.svelte b/src/components/index.svelte
index fd8a347..d3abf21 100644
--- a/src/components/index.svelte
+++ b/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;
diff --git a/src/components/users/index.svelte b/src/components/users/index.svelte
index c7b6a7a..0ce8c5b 100644
--- a/src/components/users/index.svelte
+++ b/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}
diff --git a/src/components/users/user.svelte b/src/components/users/user.svelte
index 4ef41aa..4fe4108 100644
--- a/src/components/users/user.svelte
+++ b/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>
\ No newline at end of file
+</style>
diff --git a/src/components/video-player/chat/index.svelte b/src/components/video-player/chat/index.svelte
index 1fbdb2d..a802dc1 100644
--- a/src/components/video-player/chat/index.svelte
+++ b/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();
         }
     };
 
diff --git a/src/components/video-player/chat/message.svelte b/src/components/video-player/chat/message.svelte
index d855fe9..89e446a 100644
--- a/src/components/video-player/chat/message.svelte
+++ b/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 {
diff --git a/src/components/video-player/explore-url.ts b/src/components/video-player/explore-url.ts
index 57956c2..50129d2 100644
--- a/src/components/video-player/explore-url.ts
+++ b/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 });
 };
+
diff --git a/src/components/video-player/index.svelte b/src/components/video-player/index.svelte
index 8930bfb..62be23e 100644
--- a/src/components/video-player/index.svelte
+++ b/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}
diff --git a/src/components/video-player/player-magnet.svelte b/src/components/video-player/player-magnet.svelte
index 872e5a4..75ff8b5 100644
--- a/src/components/video-player/player-magnet.svelte
+++ b/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 />
diff --git a/src/components/video-player/video-player-vidstack.svelte b/src/components/video-player/video-player-vidstack.svelte
index 23d02ee..de55864 100644
--- a/src/components/video-player/video-player-vidstack.svelte
+++ b/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>
 
diff --git a/src/normalize-source.ts b/src/normalize-source.ts
index 6d20072..fcf112f 100644
--- a/src/normalize-source.ts
+++ b/src/normalize-source.ts
@@ -10,7 +10,7 @@ export enum SourceType {
 }
 
 interface SourceParams {
-    src: string | Blob;
+    src: string;
     type: SourceType;
 }
 
@@ -111,7 +111,7 @@ const parsers: SourceBuilder[] = [
 ];
 
 export class Source implements SourceParams {
-    src: string | Blob;
+    src: string;
     type: SourceType;
 
     constructor (params: SourceParams) {
@@ -120,19 +120,15 @@ export class Source implements SourceParams {
     }
 
     isExaple(): boolean {
-        return !!this.src && (this.src instanceof Blob || isExample(this.src));
+        return isExample(this.src);
     }
 } 
 
-export default function(src: string | null | Blob): Source | null {
+export default function(src: string | null): Source | null {
     if (!src) {
         return null;
     }
 
-    if (src instanceof Blob) {
-        return new Source({ src, type: SourceType.blob }); 
-    }
-
     for (const parser of parsers) {
         const result = parser.recognize(src);
         if (result) return new Source(result);
diff --git a/src/stores/room/bound-minutes-watched.ts b/src/stores/room/bound-minutes-watched.ts
index 3121511..ee75535 100644
--- a/src/stores/room/bound-minutes-watched.ts
+++ b/src/stores/room/bound-minutes-watched.ts
@@ -3,17 +3,15 @@ import { type Readable, type Subscriber, type Unsubscriber, get } from 'svelte/s
 import { BoundStore } from './bound-store';
 import { Destructable } from '../../destructable';
 import { me } from '../me';
-import { type Source } from '../../normalize-source';
+import type { BoundCurrentTime } from './bound-current-time';
 
 export class BoundMinutesWatched extends Destructable implements Readable<number> {
     private readonly store: BoundStore<number>;
-    private readonly pausedStore: Readable<boolean>;
-    private readonly sourceStore: Readable<Source | null>;
+    private readonly currentTimeStore: BoundCurrentTime;
 
-    constructor (ref: DatabaseReference, sourceStore: Readable<Source | null>, pausedStore: Readable<boolean>) {
+    constructor (ref: DatabaseReference, currentTimeStore: BoundCurrentTime) {
         super();
-        this.pausedStore = pausedStore;
-        this.sourceStore = sourceStore;
+        this.currentTimeStore = currentTimeStore;
         this.store = new BoundStore<number>(child(ref, get(me).id), 0);
     }
 
@@ -24,10 +22,12 @@ export class BoundMinutesWatched extends Destructable implements Readable<number
     async init() {
         await this.store.init();
 
+        let lastTime = get(this.currentTimeStore);
         const idMinuteSpent = setInterval(() => {
-            const source = get(this.sourceStore);
-            if (source && !get(this.pausedStore)) {
+            const currentTime = get(this.currentTimeStore);
+            if (currentTime !== lastTime) {
                 this.store.update(x => x + 1);
+                lastTime = currentTime;
             }
         }, 60000);
         this.onDestruct(() => clearInterval(idMinuteSpent));
diff --git a/src/stores/room/index.ts b/src/stores/room/index.ts
index a2ed5d1..b809667 100644
--- a/src/stores/room/index.ts
+++ b/src/stores/room/index.ts
@@ -17,7 +17,6 @@ const database = getDatabase(initializeApp(firebaseConfig));
 export class Room extends Destructable {
     readonly id: string;
 
-    readonly source: Readable<Source | null>;
     readonly fileName: Writable<string> = writable<string>('');
 
     readonly url: BoundTimedStore<string>;
@@ -40,10 +39,7 @@ export class Room extends Destructable {
         this.createdAt = new BoundStore<number>(child(roomRef, 'createdAt'), now());
         this.users = new UsersBoundStore(child(roomRef, 'users'));
         this.messages = new MessagesBoundStore(child(roomRef, 'messages'));
-        this.source = derived<Readable<string>, Source | null>(this.url, (($url) => {
-            return normalizeSource($url);
-        }));
-        this.minutesWatched = new BoundMinutesWatched(child(roomRef, 'minutesWatched'), this.source, this.paused);
+        this.minutesWatched = new BoundMinutesWatched(child(roomRef, 'minutesWatched'), this.currentTime);
 
         this.registerDependency(this.messages);
         this.registerDependency(this.users);