Refactor: split in components

ed-asriyan · Feb 25, 2024 · 0220312 · 0220312
1 parent dfb0923
commit 0220312
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 104 deletions.
diff --git a/src/constants.scss b/src/constants.scss
@@ -0,0 +1,2 @@
+$purple-color: rgba(255, 0, 0, 0.015);
+$red-color: #f0731e;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -4,15 +4,12 @@
     import { browser } from '$app/environment';
     import { page } from '$app/stores';
     import randomStr from '../random-str';
-    import { trackClick } from '../google-analytics';
-    import VideoView from './video-view.svelte';
     import Loader from './loader.svelte';
-    import VideoSelector from './video-selector.svelte';
     import { RemoteRoom } from '../remote-room';
     import { LocalRoom } from '../local-room';
-    import normalizeLink from './normalize-link';
-    import videoExample from '../video-example';
-    import CopyUrl from './copy-url.svelte';
+    import VideoSelector from './1-video-selector.svelte';
+    import CopyUrl from './2-copy-url.svelte';
+    import VideoViewer from './3-video-viewer.svelte';
 
     let roomId = $page.url.hash?.slice(1);
     if (!roomId) {
@@ -27,25 +24,8 @@
     let isLoading = true;
     $: remoteRoom.load().finally(() => isLoading = false);
     $: localRoom = new LocalRoom(remoteRoom);
-    let blobUrl: string;
-    let fileName: string;
 
-    $: playUrl = $localRoom?.isLocalMode ? blobUrl : normalizeLink($localRoom?.url);
-
-    const selectExample = function () {
-        $localRoom.url = videoExample();
-        trackClick('example');
-    };
-
-    const selectOnlineMode = function () {
-        $localRoom.isLocalMode = false;
-        trackClick('select_online_mode');
-    };
-
-    const selectLocalMode = function () {
-        $localRoom.isLocalMode = true;
-        trackClick('select_local_mode');
-    };
+    let playUrl: string | null;
 </script>
 
 <svelte:head>
@@ -63,41 +43,7 @@
             <div class="uk-text-center uk-text-muted" style="margin-top: -30px">Watch movies together anytime, anywhere</div>
         <hr style="border-color: black" class="uk-margin" />
             <div class="uk-container uk-container-small">
-                <h3>1. Select a video</h3>
-                    <ul class="uk-subnav uk-subnav-pill" uk-switcher>
-                        <span>Select movie source:</span>
-                        <li class:uk-active={!$localRoom.isLocalMode}>
-                            <a on:click={selectOnlineMode} class="uk-button-default">Online link</a>
-                        </li>
-                        <span>or</span>
-                        <li class:uk-active={$localRoom.isLocalMode}>
-                            <a on:click={selectLocalMode} class="uk-button-default">File on computer</a>
-                        </li>
-                    </ul>
-                {#if $localRoom.isLocalMode}
-                    <div class="uk-margin-bottom">
-                        You all downloaded a movie already!? Well done! Everyone should select the same video file, please.
-                    </div>
-                    <VideoSelector bind:videoUri={blobUrl} bind:fileName={fileName}/>
-                {:else}
-                <div class="uk-margin-bottom">
-                    Insert a link to YouTube, Vimeo, HLS playlist, video or audio file. The input is synchronized with everyone in the room.
-                </div>
-                <div class="uk-inline uk-width-1-1">
-                    <a
-                        class="uk-form-icon uk-form-icon-flip uk-text-small uk-padding-small uk-width-auto pointer"
-                        on:click={selectExample}
-                    >
-                        paste random example
-                    </a>
-                    <input
-                        bind:value={$localRoom.url}
-                        class="uk-input"
-                        class:uk-form-danger={!playUrl}
-                        placeholder="Video URL"
-                    />
-                </div>
-                {/if}
+                <VideoSelector room={localRoom} bind:playUrl={playUrl} />
             </div>
         </div>
     </div>
@@ -108,19 +54,7 @@
     </div>
     <div class="uk-section uk-section-secondary uk-section-small window-height uk-flex uk-flex-column">
         <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column max-width">
-            <h3>3. Watch the movie together!</h3>
-            <div>
-                Playback, time, and video scrolling are synchronized with everyone who has the page open.
-            </div>
-            <div class="uk-flex-1 uk-flex uk-flex-center uk-flex-column uk-flex-center uk-flex-middle">
-                {#if playUrl}
-                    <VideoView bind:paused={$localRoom.paused} bind:time={$localRoom.time} url={playUrl}/>
-                {:else}
-                    <div class="uk-text-small uk-flex uk-flex-center uk-flex-column">
-                        Video player will appear here when you insert a link or select a video
-                    </div>
-                {/if}
-            </div>
+            <VideoViewer room={localRoom} playUrl={playUrl} /> 
             <div class="uk-text-small uk-text-muted uk-text-center uk-margin-top">
                 <div>
                     <span>Powered by</span>
@@ -135,40 +69,18 @@
 {/if}
 
 <style lang="scss">
-    $purple-color: rgba(255, 0, 0, 0.015);
-    $purple-color: rgba(255, 0, 0, 0.015);
-    $red-color: #f0731e;
+    @import '../constants.scss';
 
     h1 {
         font-family: Academy Engraved LET;
     }
 
-    .pointer {
-        cursor: pointer;
-    }
-
-    .loader {
-        position: absolute;
-        height: 100vh;
-        width: 100vw;
-        display: grid;             
-        place-items: center;
-    }
-
-    .window-height {
-        min-height: 100vh;
-    }
-
-    .window-width {
-        min-width: 100vw;;
-    }
-
-    .max-width {
-        width: 100%;
+    h1:hover {
+        color: gray;
     }
 
-    .uk-subnav-pill > .uk-active > a {
-        background-color: $red-color;
+    h1:active {
+        color: black;
     }
 
     .uk-input:focus, .uk-select:focus, .uk-textarea:focus {
@@ -187,11 +99,27 @@
         background-color: $purple-color;
     }
 
-    h1:hover {
-        color: gray;
+    .pointer {
+        cursor: pointer;
     }
 
-    h1:active {
-        color: black;
+    .loader {
+        position: absolute;
+        height: 100vh;
+        width: 100vw;
+        display: grid;             
+        place-items: center;
+    }
+
+    .window-height {
+        min-height: 100vh;
+    }
+
+    .window-width {
+        min-width: 100vw;;
+    }
+
+    .max-width {
+        width: 100%;
     }
 </style>
diff --git a/src/routes/1-video-selector.svelte b/src/routes/1-video-selector.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition';
+    import { trackClick } from '../google-analytics';
+    import videoExample from '../video-example';
+    import normalizeLink from './normalize-link';
+    import VideoSelectorBtn from './video-selector-btn.svelte';
+    import { LocalRoom } from '../local-room';
+
+    export let room: LocalRoom;
+    export let playUrl: string | null;
+
+    let blobUrl: string;
+    let fileName: string;
+
+    $: playUrl = $room?.isLocalMode ? blobUrl : normalizeLink($room?.url);
+
+    const selectExample = function () {
+        $room.url = videoExample();
+        trackClick('example');
+    };
+
+    const selectOnlineMode = function () {
+        $room.isLocalMode = false;
+        trackClick('select_online_mode');
+    };
+
+    const selectLocalMode = function () {
+        $room.isLocalMode = true;
+        trackClick('select_local_mode');
+    };
+</script>
+
+<h3>1. Select a video</h3>
+    <ul class="uk-subnav uk-subnav-pill" uk-switcher>
+        <span>Select movie source:</span>
+        <li class:uk-active={!$room.isLocalMode}>
+            <a on:click={selectOnlineMode} class="uk-button-default">Online link</a>
+        </li>
+        <span>or</span>
+        <li class:uk-active={$room.isLocalMode}>
+            <a on:click={selectLocalMode} class="uk-button-default">File on computer</a>
+        </li>
+    </ul>
+{#if $room.isLocalMode}
+    <div class="uk-margin-bottom">
+        You all downloaded a movie already!? Well done! Everyone should select the same video file, please.
+    </div>
+    <VideoSelectorBtn bind:videoUri={blobUrl} bind:fileName={fileName}/>
+{:else}
+    <div class="uk-margin-bottom">
+        Insert a link to YouTube, Vimeo, HLS playlist, video or audio file. The input is synchronized with everyone in the room.
+    </div>
+    <div class="uk-inline uk-width-1-1">
+        {#if !playUrl}
+            <a
+                class="uk-form-icon uk-form-icon-flip uk-text-small uk-padding-small uk-width-auto pointer"
+                on:click={selectExample}
+                transition:fade
+            >
+                paste random example
+            </a>
+        {/if}
+        <input
+            bind:value={$room.url}
+            class="uk-input"
+            class:uk-form-danger={!playUrl}
+            placeholder="Video URL"
+        />
+    </div>
+{/if}
+
+<style lang="scss">
+    @import '../constants.scss';
+    
+    .uk-subnav-pill > .uk-active > a {
+        background-color: $red-color;
+    }
+</style>
diff --git a/src/routes/copy-url.svelte → src/routes/2-copy-url.svelte b/src/routes/copy-url.svelte → src/routes/2-copy-url.svelte
diff --git a/src/routes/3-video-viewer.svelte b/src/routes/3-video-viewer.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { LocalRoom } from '../local-room';
+    import VideoView from './video-view.svelte';
+
+    export let room: LocalRoom;
+    export let playUrl: string | null;
+</script>
+
+<h3>3. Watch the movie together!</h3>
+<div>
+    Playback, time, and video scrolling are synchronized with everyone who has the page open.
+</div>
+<div class="uk-flex-1 uk-flex uk-flex-center uk-flex-column uk-flex-center uk-flex-middle">
+    {#if playUrl}
+        <VideoView bind:paused={$room.paused} bind:time={$room.time} url={playUrl}/>
+    {:else}
+        <div class="uk-text-small uk-flex uk-flex-center uk-flex-column">
+            Video player will appear here when you insert a link or select a video
+        </div>
+    {/if}
+</div>
diff --git a/src/routes/video-selector.svelte → src/routes/video-selector-btn.svelte b/src/routes/video-selector.svelte → src/routes/video-selector-btn.svelte
diff --git a/src/routes/video-view.svelte b/src/routes/video-view.svelte
@@ -58,7 +58,7 @@
 
 <media-player
     class="player"
-    class:uk-invisible={isBlob}
+    class:uk-hidden={isBlob}
     bind:this={player}
     src={url}
     autoplay
@@ -81,5 +81,8 @@
         max-height: 70vh; 
         max-width: 80vw;
         min-height: 20rem;
+
+        border-radius: 6px;
+        border: 1px solid rgb(255 255 255 / .1);
     }
 </style>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		$purple-color: rgba(255, 0, 0, 0.015);
		$red-color: #f0731e;