Rename the project

ed-asriyan · Feb 23, 2024 · 80ebaf6 · 80ebaf6
1 parent e55a542
commit 80ebaf6
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 Web application built on Svelte.js and Firebase for whatching movies together on different devices.
 
 <h3 align="center">
-    <a href="https://ed-asriyan.github.io/movie-together">👉 Live demo 👈</a>
+    <a href="https://watchtogether.online">👉 watchtogether.online 👈</a>
 </h3>
 
 https://github.com/ed-asriyan/movie-together/assets/7848847/08522a1e-31d5-4138-9150-c4574321536a

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
 		"typescript": "^5.3.3",
 		"uikit": "^3.18.3",
 		"uuid": "^9.0.1",
-		"vidstack": "^1.10.7",
+		"vidstack": "^1.10.3",
 		"vite": "^5.1.3"
 	},
 	"type": "module"

diff --git a/src/app.scss b/src/app.scss
@@ -11,7 +11,7 @@ $global-link-color: #DA7D02;
 // 4. Import UIkit.
 @import "uikit/src/scss/uikit-theme.scss";
 
-body {
-    height: 100vh;
-    background-color: rgba(248, 248, 248, 1);
+// https://github.com/vidstack/player/issues/1123#issuecomment-1956544215
+iframe.vds-youtube[data-no-controls] {
+    height: 100% !important;
 }
diff --git a/src/local-room.ts b/src/local-room.ts
@@ -34,6 +34,7 @@ export class LocalRoom implements Writable<RemoteRoomRaw> {
         const remoteValue = getStore(this.remoteRoom);
 
         if (
+            remoteValue.name !== newValue.name ||
             remoteValue.isLocalMode !== newValue.isLocalMode ||
             remoteValue.paused !== newValue.paused ||
             remoteValue.url !== newValue.url ||

diff --git a/src/remote-room.ts b/src/remote-room.ts
@@ -7,6 +7,7 @@ export interface RemoteRoomRaw {
     time: number;
     paused: boolean;
     isLocalMode: boolean;
+    name: string;
 }
 
 export class RemoteRoom implements Writable<RemoteRoomRaw> {
@@ -33,6 +34,7 @@ export class RemoteRoom implements Writable<RemoteRoomRaw> {
                 paused: true,
                 time: 0,
                 isLocalMode: false,
+                name: 'Watch Together',
             };
         }
         this.store.set(initRoom);

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -55,39 +55,39 @@
 </script>
 
 <svelte:head>
-    <title>Movie Together</title>
+    <title>{$localRoom?.name || 'Watch Together'}</title>
 </svelte:head>
 
-<div class="uk-flex uk-flex-column window-height">
-    <div class="uk-section uk-section-muted uk-section-small">
-        <div class="uk-container">
-            <div class="title uk-margin-top">
-                <h1 class="uk-text-center uk-heading-medium">Watch Movies Together</h1>
-                <hr class="uk-divider-icon">
-            </div>
-            {#if isLoading}
-                <div class="uk-text-center loader" transition:fade>
-                    <Loader/>
-                </div>
-            {:else}
-                <div class="uk-container uk-container-small" transition:fade>
+{#if isLoading}
+    <div class="uk-text-center loader" transition:fade>
+        <Loader/>
+    </div>
+{:else}
+    <div class="uk-flex uk-flex-column">
+        <div class="uk-section uk-section-muted uk-section-small" transition:fade>
+            <div class="uk-container">
+                <h1 class="uk-text-center uk-heading-medium uk-text-bold title uk-margin-top" contenteditable="true" bind:innerHTML={$localRoom.name}></h1>
+                <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>
-                        <li class:uk-active={!$localRoom.isLocalMode}>
-                            <a on:click={() => $localRoom.isLocalMode = false}>Online link</a>
-                        </li>
-                        <li class:uk-active={$localRoom.isLocalMode}>
-                            <a on:click={() => $localRoom.isLocalMode = true}>Local file</a>
-                        </li>
-                    </ul>
-
+                        <ul class="uk-subnav uk-subnav-pill" uk-switcher>
+                            <span>Select movie source:</span>
+                            <li class:uk-active={!$localRoom.isLocalMode}>
+                                <a on:click={() => $localRoom.isLocalMode = false} class="uk-button-default">Online link</a>
+                            </li>
+                            <span>or</span>
+                            <li class:uk-active={$localRoom.isLocalMode}>
+                                <a on:click={() => $localRoom.isLocalMode = true} class="uk-button-default">Local file</a>
+                            </li>
+                        </ul>
                     {#if $localRoom.isLocalMode}
-                    <div class="uk-margin">
+                    <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">
+                    <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>
                     <input
@@ -99,21 +99,19 @@
                     />
                     {/if}
                 </div>
-            {/if}
+            </div>
         </div>
-    </div>
-    {#if !isLoading}
         <div class="uk-section uk-section-primary uk-section-small" transition:fade>
             <div class="uk-container uk-container-small">
-                <h3>2. Share the link to this room with anyone you want to watch a movie with</h3>
+                <h3>2. Share the link to this room with who you want to watch a movie with</h3>
 
                 <div class="uk-text-center uk-margin-top">
                     <input style="width: 100%;" class="pointer uk-button uk-button-link uk-text-lowercase" uk-tooltip="Click to copy" on:click={copyUrl} value={$page.url} readonly/>
                     <div class="uk-text-muted uk-text-small">Click the link to copy it to the clipboard</div>
                 </div>
             </div>
         </div>
-        <div class="uk-section uk-section-secondary uk-light uk-section-small uk-flex-1">
+        <div class="uk-section uk-section-secondary uk-section-small uk-flex-1 watch">
             <div class="uk-container uk-container-small">
                 <h3>3. Watch the movie together!</h3>
                 <div class="uk-margin">
@@ -127,25 +125,70 @@
                             Video player will appear here when you insert a link or select a video
                         </div>
                     {/if}
+                    <div class="uk-text-small uk-text-muted uk-margin-top">
+                        <span>Powered by</span>
+                        · <a class="uk-text-muted" href="https://svelte.dev" target="_blank">Svelte</a>
+                        · <a class="uk-text-muted" href="http://firebase.google.com" target="_blank">Firebase</a>
+                        · <a class="uk-text-muted" href="http://vidstack.io" target="_blank">Vidstack</a>
+                        · <a class="uk-text-muted" href="https://getuikit.com" target="_blank">UIkit</a>
+                    </div>
                 </div>
             </div>
         </div>
-    {/if}
-</div>
+    </div>
+{/if}
+
 <style lang="scss">
-    .pointer {
-        cursor: pointer;
+    $purple-color: rgba(255, 0, 0, 0.015);
+    $purple-color: rgba(255, 0, 0, 0.015);
+    $red-color: #f0731e;
+
+    h1 {
+        font-family: Academy Engraved LET;
     }
 
-    .window-height {
-        min-height: 100vh;
+    .pointer {
+        cursor: pointer;
     }
 
     .stub {
-        margin-top: 15rem;
+        line-height: 20rem;
+        vertical-align: center;
     }
 
     .loader {
-        height: 0;
+        position: absolute;
+        height: 100vh;
+        width: 100vw;
+        display: grid;             
+        place-items: center;
+    }
+
+    .watch {
+        height: 100vh;
+    }
+
+    .uk-subnav-pill > .uk-active > a {
+        background-color: $red-color;
+    }
+
+    .uk-input:focus, .uk-select:focus, .uk-textarea:focus {
+        border-color: $red-color;
+    }
+
+    .uk-section-primary {
+        background-color: $red-color;
+    }
+
+    :global(body), .uk-section-muted {
+        background-color: $purple-color;
+    }
+
+    h1:hover {
+        color: gray;
+    }
+
+    h1:active {
+        color: black;
     }
 </style>
diff --git a/src/routes/video-view.svelte b/src/routes/video-view.svelte
@@ -54,19 +54,20 @@
     >
     </video>
 {/if}
-    <media-player
-        class:uk-invisible={isBlob}
-        bind:this={player}
-        src={url}
-        autoplay
-        playsInline
-        preload="metadata"
-        crossOrigin
-        muted
-    >
-        <media-provider>
-        </media-provider>
-        <!-- Layouts -->
-        <media-audio-layout />
-        <media-video-layout />
-    </media-player>
+
+<media-player
+    class:uk-invisible={isBlob}
+    bind:this={player}
+    src={url}
+    autoplay
+    playsInline
+    preload="metadata"
+    crossOrigin
+    muted
+>
+    <media-provider>
+    </media-provider>
+    <!-- Layouts -->
+    <media-audio-layout />
+    <media-video-layout />
+</media-player>