diff --git a/src/App.svelte b/src/App.svelte index 3f290e0..5d8aba4 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -7,6 +7,7 @@ import Page from './components/index.svelte'; import { environment, isProduction } from './settings'; import './app.scss'; + import LanguageSelector from './components/language-selector.svelte'; let header; let roomId: string; @@ -47,7 +48,8 @@ {/if}
-
+ +
{ $_('poweredBy') } · Svelte · Firebase diff --git a/src/components/2-copy-url.svelte b/src/components/2-copy-url.svelte index 8835de7..e346c83 100644 --- a/src/components/2-copy-url.svelte +++ b/src/components/2-copy-url.svelte @@ -44,7 +44,7 @@ {#if copyTumbler} { $_('invite.linkHasBeenCopied') } {:else} -
- import { onDestroy} from 'svelte'; - import { fade } from 'svelte/transition'; - import { _, locale } from 'svelte-i18n'; - import { locales } from '../i18n/index'; + import { onDestroy } from 'svelte'; + import { _ } from 'svelte-i18n'; import Loader from './loader.svelte'; import { Room } from '../stores/room'; - import { type Link } from '../normalize-link' - import VideoSelector from './1-video-selector.svelte'; - import CopyUrl from './2-copy-url.svelte'; - import VideoPlayer from './video-player/index.svelte'; - import Users from './users/index.svelte'; - import { randomStr } from '../utils'; import { syncTime } from '../stores/clock'; - import { track, ClickEvent, LocaleChangedEvent } from '../analytics.svelte'; - import { isExample } from '../stores/video-example'; + import RoomPage from './room.svelte'; + import LanguageSelector from './language-selector.svelte'; export let roomId: string; - let room: Room; - $: (async (roomId) => { - isRoomLoading = true; - if (room) { - room.destruct(); - } - room = new Room(roomId); - try { - await room.init(); - } finally { - isRoomLoading = false; - } - })(roomId); - $: url = room?.url; - $: play = room?.play; - $: paused = room?.paused; - $: minutesWatched = room?.minutesWatched; - $: currentTime = room?.currentTime; - $: users = room?.users; - - onDestroy(() => { - if (room) { - room.destruct(); - } - }); - - let isRoomLoading = true; - let isTimeLoading = true; - - const initRoom = async function (room: Room) { + let previousRoom: Room; + const destroy = async function () { + previousRoom && await previousRoom.destruct(); }; + onDestroy(destroy); + let isTimeSynced = false; const initTime = async function () { - isTimeLoading = true; - try { - await syncTime() - } finally { - isTimeLoading = false; - } - }; - initTime(); - - const updateRoom = function (newRoomId: string, copyData?: boolean) { - // otherwise roomId isn't reactively updated inside exactle CopyUrl component. svelte bug? - isRoomLoading = true; - setTimeout(() => { - document.location.hash = `#${newRoomId}`; - }, 1200); - }; - - const generateNewRoom = function () { - if (confirm($_('room.generateNewRoom.confirmation'))) { - updateRoom(randomStr(6), true); - track(new ClickEvent({ target: 'generate_new_room' })); - } - }; - - const joinAnotherRoom = function () { - const input = prompt($_('invite.joinPromt')); - if (!input) return; - - let newRoomId; - try { - const url = new URL(input); - if (url.protocol === location.protocol && url.host === location.host && url.hash.length > 1) { - newRoomId = url.hash.slice(1); - } else { - throw 0; + if (!isTimeSynced) { + try { + await syncTime(); + isTimeSynced = true; + } catch { } - } catch { - newRoomId = input; } - updateRoom(newRoomId, false); - track(new ClickEvent({ target: 'join_another_room' })); }; - - const onLanguageChangeClick = function () { - track(new ClickEvent({ target: 'language_selector' })); + const init = async function (roomId: string): Promise { + await initTime(); + await destroy(); + previousRoom = new Room(roomId); + await previousRoom.init(); + return previousRoom; }; - - const onLanguageChanged = function () { - track(new LocaleChangedEvent({ locale: $locale })); - }; - - $: isLoading = !room || isRoomLoading || isTimeLoading; -
- {#if isLoading} +
+ {#await init(roomId)} - {:else} -
-
- -
-
-
-
-

🍿 { $_('selectVideo.title') }

- -
-
-

👥 { $_('invite.title') }

- - -
- -
- - - - -
-
-
-
- {/if} + {:then room} + + {:catch e} +

{ $_('error.description') } 💩

+ + { e.stack || e } + {/await}
- - - diff --git a/src/components/language-selector.svelte b/src/components/language-selector.svelte new file mode 100644 index 0000000..ef609d0 --- /dev/null +++ b/src/components/language-selector.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/components/room.svelte b/src/components/room.svelte new file mode 100644 index 0000000..a6862b3 --- /dev/null +++ b/src/components/room.svelte @@ -0,0 +1,149 @@ + + +
+
+ +
+
+
+
+

🍿 { $_('selectVideo.title') }

+ +
+
+

👥 { $_('invite.title') }

+ + +
+ +
+ +
+
+ +
+
+
+
+ + + diff --git a/src/i18n/_.ts b/src/i18n/_.ts index ba9e93b..72eedeb 100644 --- a/src/i18n/_.ts +++ b/src/i18n/_.ts @@ -49,6 +49,10 @@ const def = { nameEdit: 'edit', nameEditPromt: 'Enter your name (maximum {maxLength} characters) or leave the input blank to pick random name', }, + error: { + description: 'Error occurred', + reload: 'Reload the app', + }, }; export type TranslatedText = typeof def; diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts index cbc7416..af0c3c3 100644 --- a/src/i18n/fr.ts +++ b/src/i18n/fr.ts @@ -51,6 +51,10 @@ const fr: TranslatedText = { nameEdit: 'éditer', nameEditPromt: 'Entrez votre nom (maximum {maxLength} caractères) ou laissez le champ vide pour choisir un nom au hasard', }, + error: { + description: 'Une erreur s\'est produite', + reload: 'Recharger l\'application', + }, }; export default fr; diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts index 6d38ef7..7123664 100644 --- a/src/i18n/ru.ts +++ b/src/i18n/ru.ts @@ -51,6 +51,10 @@ const ru: TranslatedText = { nameEdit: 'изменить', nameEditPromt: 'Введите свое имя (максимум {maxLength} символов) или оставьте поле ввода пустым, выбрать случайное имя' }, + error: { + description: 'Произошла ошибка', + reload: 'Перезапустить приложение', + }, }; export default ru;