Fix currentTime reset when user reconnects

ed-asriyan · Feb 4, 2025 · 613e3bb · 613e3bb
1 parent 65111d1
commit 613e3bb
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 28 deletions.
diff --git a/src/components/controls/card-video-selector.svelte b/src/components/controls/card-video-selector.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { run, preventDefault } from 'svelte/legacy';
-
     import { fade } from 'svelte/transition';
     import { _ } from 'svelte-i18n';
     import prettierBytes from 'prettier-bytes';
@@ -22,13 +20,14 @@
 
     let url = $derived(room?.url);
     let source = $derived(normalizeSource($url));
-    run(() => {
+    $effect(() => {
         if ($url) {
             $blob = null;
         }
     });
 
-    const selectExample = function () {
+    const selectExample = function (e: Event) {
+        e.preventDefault();
         $url = getExampleVideo();
         track(new ClickEvent(room, { target: 'example' }));
     };
@@ -54,7 +53,7 @@
                 <u>{ data.text }</u>
             {/if}
         {/snippet}
-        </Interpolator>
+    </Interpolator>
 </div>
 <div class="uk-margin-bottom">
     <div class="uk-inline uk-width-1-1">
@@ -69,7 +68,7 @@
             {#if !$url && haveExamples}
                 <a
                     class="uk-form-icon uk-form-icon-flip uk-text-small uk-padding-small uk-width-auto example pointer"
-                    onclick={preventDefault(selectExample)}
+                    onclick={selectExample}
                     href="/#"
                     transition:fade
                 >
@@ -83,37 +82,37 @@
     {#if source?.type == SourceType.magnet && !$isSeeding && isFinite($progress)}
         <progress class="uk-progress progress uk-margin-remove" value={$progress} max="1"></progress>
     {/if}
-    </div>
+</div>
 
 <div class="hint uk-text-center uk-text-small">
     {#if $url}
         {#if source}
             {#if source.type == SourceType.direct}
                 <Interpolator text={$_('selectVideo.link.hintNotWorking')} >
                     {#snippet children({ data: data })}
-                                        {#if data.name === 'u'}
+                        {#if data.name === 'u'}
                             <u>{ data.text }</u>
                         {/if}
-                                                        {/snippet}
-                                </Interpolator>
+                    {/snippet}
+                </Interpolator>
                 <Interpolator text={$_('selectVideo.link.help')} >
                     {#snippet children({ data: data })}
-                                        {#if data.name === 'link'}
+                        {#if data.name === 'link'}
                             <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" onclick={clickUrlTutorial}>{ data.text }</a>
                         {/if}
-                                                        {/snippet}
-                                </Interpolator>
+                    {/snippet}
+                </Interpolator>
             {: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>
-                            <div class="uk-flex-1">{ $_('peers', { values: { peers: $peers }}) }</div>
+                <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>
+                    <div class="uk-flex-1">{ $_('peers', { values: { peers: $peers }}) }</div>
+                </div>
+                {#if $isSeeding}
+                    <div class="uk-margin-small-top">
+                        { $_('dontRefresh') }
                     </div>
-                    {#if $isSeeding}
-                        <div class="uk-margin-small-top">
-                            { $_('dontRefresh') }
-                        </div>
-                    {/if}
+                {/if}
             {/if}
         {:else}
             { $_('selectVideo.link.hintInvalid') }
@@ -122,7 +121,7 @@
         { $_('selectVideo.link.hintEmpty') }
         <Interpolator text={$_('selectVideo.link.help')} >
             {#snippet children({ data: data })}
-                        {#if data.name === 'link'}
+                {#if data.name === 'link'}
                     <u>
                         <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" onclick={clickUrlTutorial}>{ data.text }</a>
                     </u>

diff --git a/src/components/video-player/video-player-vidstack.svelte b/src/components/video-player/video-player-vidstack.svelte
@@ -25,10 +25,10 @@
 
     let player: MediaPlayerElement = $state();
 
-    let isMounted = $state(false);
+    let isMounted: boolean = $state(false);
 
     $effect(() => {
-        if (isMounted) {
+        if (isMounted > 0) {
             player.currentTime = currentTime;
             player.paused = paused;
             player.muted = muted;
@@ -42,12 +42,16 @@
             const optionsTime = options.currentTime;
             const optionsPaused = options.paused;
             const optionsMuted = options.muted;
+
+            if (optionsTime > 0) {
+                isMounted = true;
+            }
             if (isMounted) {
-                paused = optionsPaused;
                 currentTime = optionsTime;
-                muted = optionsMuted;
             }
-            isMounted = true;
+
+            muted = optionsMuted;
+            paused = optionsPaused;
         });
         player.currentTime = currentTime;
         player.paused = paused;

diff --git a/src/stores/room/bound-current-time.ts b/src/stores/room/bound-current-time.ts
@@ -61,5 +61,6 @@ export class BoundCurrentTime implements Writable<number> {
 
     async init () {
         await this.remote.init();
+        this.currentTime.set(get(this.remote));
     }
 }
diff --git a/src/stores/room/bound-timed-store.ts b/src/stores/room/bound-timed-store.ts
@@ -58,5 +58,6 @@ export class BoundTimedStore<T> implements Writable<T> {
 
     async init () {
         await this.remote.init();
+        this.store.set(get(this.remote));
     }
 }