From 80ebaf6610ed5c9f7241ff9e06af4b56751deda7 Mon Sep 17 00:00:00 2001 From: Ed Asriyan Date: Fri, 23 Feb 2024 09:12:08 +0400 Subject: [PATCH] Rename the project --- README.md | 2 +- package-lock.json | 14 ++--- package.json | 2 +- src/app.scss | 6 +- src/local-room.ts | 1 + src/remote-room.ts | 2 + src/routes/+page.svelte | 119 ++++++++++++++++++++++++----------- src/routes/video-view.svelte | 33 +++++----- 8 files changed, 113 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index 54d8c0e..807cdbd 100644 --- 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.

- ๐Ÿ‘‰ Live demo ๐Ÿ‘ˆ + ๐Ÿ‘‰ watchtogether.online ๐Ÿ‘ˆ

https://github.com/ed-asriyan/movie-together/assets/7848847/08522a1e-31d5-4138-9150-c4574321536a diff --git a/package-lock.json b/package-lock.json index 01c742c..daacba2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,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" } }, @@ -2880,9 +2880,9 @@ } }, "node_modules/vidstack": { - "version": "1.10.7", - "resolved": "https://registry.npmjs.org/vidstack/-/vidstack-1.10.7.tgz", - "integrity": "sha512-wb0TqvHe0LPUN6i1kcv94C4hpyP9Ueh6ZBBKlrxkDqVlC7EKX1kX8xj5BkgYnMj4ZcoQQL666YwkWyuo9zCHfw==", + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/vidstack/-/vidstack-1.10.3.tgz", + "integrity": "sha512-3vVSKBG9P8axXjN06WQarB74tVLYl1QU9028ikkrZutIQNh4Z2/SajAdoYLybO2YTxPGLm2aF5oagbcfqGvNXA==", "dev": true, "dependencies": { "media-captions": "^1.0.1", @@ -5091,9 +5091,9 @@ "dev": true }, "vidstack": { - "version": "1.10.7", - "resolved": "https://registry.npmjs.org/vidstack/-/vidstack-1.10.7.tgz", - "integrity": "sha512-wb0TqvHe0LPUN6i1kcv94C4hpyP9Ueh6ZBBKlrxkDqVlC7EKX1kX8xj5BkgYnMj4ZcoQQL666YwkWyuo9zCHfw==", + "version": "1.10.3", + "resolved": "https://registry.npmjs.org/vidstack/-/vidstack-1.10.3.tgz", + "integrity": "sha512-3vVSKBG9P8axXjN06WQarB74tVLYl1QU9028ikkrZutIQNh4Z2/SajAdoYLybO2YTxPGLm2aF5oagbcfqGvNXA==", "dev": true, "requires": { "media-captions": "^1.0.1", diff --git a/package.json b/package.json index 85c6132..e62fc31 100644 --- 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 index 3441d4c..f5732c4 100644 --- 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; } \ No newline at end of file diff --git a/src/local-room.ts b/src/local-room.ts index eaba0ef..e401070 100644 --- a/src/local-room.ts +++ b/src/local-room.ts @@ -34,6 +34,7 @@ export class LocalRoom implements Writable { 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 index d070061..a7dcd55 100644 --- 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 { @@ -33,6 +34,7 @@ export class RemoteRoom implements Writable { 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 index edd3531..7e72f63 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -55,39 +55,39 @@ - Movie Together + {$localRoom?.name || 'Watch Together'} -
-
-
-
-

Watch Movies Together

-
-
- {#if isLoading} -
- -
- {:else} -
+{#if isLoading} +
+ +
+{:else} +
+
+
+

+
Watch movies together anytime, anywhere
+
+

1. Select a video

- - + {#if $localRoom.isLocalMode} -
+
You all downloaded a movie already!? Well done! Everyone should select the same video file, please.
{:else} -
+
Insert a link to YouTube, Vimeo, HLS playlist, video or audio file. The input is synchronized with everyone in the room.
{/if}
- {/if} +
-
- {#if !isLoading}
-

2. Share the link to this room with anyone you want to watch a movie with

+

2. Share the link to this room with who you want to watch a movie with

@@ -113,7 +111,7 @@
-
+

3. Watch the movie together!

@@ -127,25 +125,70 @@ Video player will appear here when you insert a link or select a video
{/if} +
+ Powered by + ยท Svelte + ยท Firebase + ยท Vidstack + ยท UIkit +
- {/if} -
+
+{/if} + diff --git a/src/routes/video-view.svelte b/src/routes/video-view.svelte index 42e7671..6f2b794 100644 --- a/src/routes/video-view.svelte +++ b/src/routes/video-view.svelte @@ -54,19 +54,20 @@ > {/if} - - - - - - - + + + + + + + +