From d638a6928be167e105e05620e5b3df2eb5713f72 Mon Sep 17 00:00:00 2001
From: Ed Asriyan <github@asriyan.me>
Date: Sun, 7 Apr 2024 02:24:15 +0400
Subject: [PATCH] Add online users support

---
 .env                                     |   3 +
 src/App.svelte                           |  29 +++---
 src/{components => }/analytics.svelte    |   9 +-
 src/components/1-video-selector.svelte   |   6 +-
 src/components/2-copy-url.svelte         |   2 +-
 src/components/index.svelte              |  75 +++++++-------
 src/components/users/index.svelte        |  26 +++++
 src/components/users/user.svelte         |  66 ++++++++++++
 src/components/video-player/index.svelte |   2 +-
 src/components/video-selector-btn.svelte |   6 +-
 src/destructable.ts                      |  20 ++++
 src/i18n/_.ts                            |   4 +
 src/i18n/fr.ts                           |   4 +
 src/i18n/ru.ts                           |   4 +
 src/settings.ts                          |   2 +
 src/stores/bound-current-time.ts         |  65 ++++++++++++
 src/stores/bound-minutes-watched.ts      |  39 +++++++
 src/stores/bound-store.ts                |  45 ++++++++
 src/stores/bound-timed-store.ts          |  52 ++++++++++
 src/stores/bound-users.ts                |  65 ++++++++++++
 src/stores/clock.ts                      |   4 +-
 src/stores/local-room.ts                 | 108 -------------------
 src/stores/my-id.ts                      |  12 +++
 src/stores/my-name.ts                    |  32 ++++++
 src/stores/remote-room.ts                | 126 -----------------------
 src/stores/room.ts                       |  76 ++++++++++++++
 src/stores/video-example.js              |   1 -
 stats.js                                 |  43 +++++---
 28 files changed, 611 insertions(+), 315 deletions(-)
 rename src/{components => }/analytics.svelte (88%)
 create mode 100644 src/components/users/index.svelte
 create mode 100644 src/components/users/user.svelte
 create mode 100644 src/destructable.ts
 create mode 100644 src/stores/bound-current-time.ts
 create mode 100644 src/stores/bound-minutes-watched.ts
 create mode 100644 src/stores/bound-store.ts
 create mode 100644 src/stores/bound-timed-store.ts
 create mode 100644 src/stores/bound-users.ts
 delete mode 100644 src/stores/local-room.ts
 create mode 100644 src/stores/my-id.ts
 create mode 100644 src/stores/my-name.ts
 delete mode 100644 src/stores/remote-room.ts
 create mode 100644 src/stores/room.ts

diff --git a/.env b/.env
index fd93437..75f3615 100644
--- a/.env
+++ b/.env
@@ -10,6 +10,9 @@ VITE_FIREBASE_MEASUREMENT_ID=
 # base URL where the website is hosted (e.g. https://watchtogether.online)
 VITE_URL=
 
+# usernames separated by comma to be randomly picked for users
+VITE_USERNAMES=🐵,🐒,🦍,🦧,🐶,🐕,🦮,🐕‍🦺,🐩,🐺,🦊,🦝,🐱,🐈,🐈‍⬛,🦁,🐯,🐅,🐆,🐴,🫎,🫏,🐎,🦄,🦓,🦌,🦬,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🦙,🦒,🐘,🦣,🦏,🦛,🐭,🐁,🐀,🐹,🐰,🐇,🐿️,🦫,🦔,🦇,🐻,🐻‍❄️,🐨,🐼,🦥,🦦,🦨,🦘,🦡,🦃,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🕊️,🦅,🦆,🦢,🦉,🦤,🪶,🦩,🦚,🦜,🪽,🐦‍⬛,🪿,🐸,🐊,🐢,🦎,🐍,🐲,🐉,🦕,🦖,🐳,🐋,🐬,🦭,🐟,🐠,🐡,🦈,🐙,🪼,🦀,🦞,🦐,🦑,🐌,🦋,🐛,🐜,🐝,🪲,🐞,🦗,🪳,🕷️,🦂,🦟,🪰,🪱,💐,🌸,🪷,🏵️,🌹,🌺,🌻,🌼,🌷,⛄,🧸,🎃,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🥭,🍎,🍏,🍐,🍑,🍒,🍓,🫐,🥝,🍅,🫒
+
 #
 # [ all parameters below this line are optional ]
 #
diff --git a/src/App.svelte b/src/App.svelte
index e3a63ee..3f290e0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,35 +3,34 @@
     import 'uikit/dist/js/uikit';
     import { _ } from 'svelte-i18n';
     import { randomStr } from './utils';
-    import Analytics from './components/analytics.svelte';
+    import Analytics from './analytics.svelte';
     import Page from './components/index.svelte';
     import { environment, isProduction } from './settings';
     import './app.scss';
 
     let header;
+    let roomId: string;
 
-    const getRoomId = function () {
-        return document.location.hash?.slice(1).toLowerCase();
+    const testPrefix = 'test_';
+    const syncHashAndRoomId = function () {
+        let hash = document.location.hash?.slice(1).toLowerCase() || localStorage.getItem('roomId') || randomStr(6);
+        if (!isProduction && !hash?.startsWith(testPrefix)) {
+            hash = `${testPrefix}${hash}`;
+        }
+        localStorage.setItem('roomId', hash);
+        roomId = hash;
+        document.location.hash = `#${hash}`;
     };
 
-    let roomId = getRoomId();
-    if (!roomId) {
-        document.location.hash = `#${localStorage.getItem('roomId') || randomStr(6)}`;
-    }
-
-    $: roomId && localStorage.setItem('roomId', roomId);
-
-    const onHashChanged = function () {
-        roomId = getRoomId();
-    };
+    syncHashAndRoomId();
 </script>
 
-<svelte:window on:hashchange={onHashChanged}></svelte:window>
+<svelte:window on:hashchange={syncHashAndRoomId}></svelte:window>
 
 <Analytics/>
 
 {#if !isProduction}
-    <span class="uk-position-absolute uk-text-warning" style:top="0" style:left="0" style:z-index="10">
+    <span class="uk-position-fixed uk-text-warning" style:top="0" style:left="0" style:z-index="10">
         Running in non-production environment: environment="{ environment }", isProd={ isProduction }
     </span>
 {/if}
diff --git a/src/components/analytics.svelte b/src/analytics.svelte
similarity index 88%
rename from src/components/analytics.svelte
rename to src/analytics.svelte
index 330da94..fb398c5 100644
--- a/src/components/analytics.svelte
+++ b/src/analytics.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
-    import type { SourceType } from '../normalize-link';
-    import { analytics, isProduction } from '../settings';
+    import type { SourceType } from './normalize-link';
+    import { analytics, isProduction } from './settings';
 
     const trackRaw = function (...args: any[]) {
         if (isProduction) {
@@ -26,6 +26,10 @@
         }
     };
 
+    export const getUserId = function (): string {
+        return globalThis.gaGlobal?.vid.replace('.', '-');
+    };
+
     export class ClickEvent extends Event<{
         target: string;
     }> {
@@ -36,7 +40,6 @@
         roomId: string;
         sourceType: SourceType;
         url: string;
-        isExample: boolean;
     }> {
         readonly name: string = 'watch_minute';
     }
diff --git a/src/components/1-video-selector.svelte b/src/components/1-video-selector.svelte
index 78b106a..665dfd6 100644
--- a/src/components/1-video-selector.svelte
+++ b/src/components/1-video-selector.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
     import { fade } from 'svelte/transition';
     import { _ } from 'svelte-i18n';
-    import { track, ClickEvent, UrlPasteEvent } from './analytics.svelte';
+    import { track, ClickEvent, UrlPasteEvent } from '../analytics.svelte';
     import Interpolator from './interpolator.svelte';
     import { getExampleVideo, isExample, haveExamples } from '../stores/video-example';
     import VideoSelectorBtn from './video-selector-btn.svelte';
-    import { LocalRoom } from '../stores/local-room';
+    import { Room } from '../stores/room';
     import { SourceType } from '../normalize-link';
 
-    export let room: LocalRoom;
+    export let room: Room;
 
     $: url = room.url;
     $: isLocalMode = room.isLocalMode;
diff --git a/src/components/2-copy-url.svelte b/src/components/2-copy-url.svelte
index 9a0ee21..8835de7 100644
--- a/src/components/2-copy-url.svelte
+++ b/src/components/2-copy-url.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
     import Interpolator from './interpolator.svelte';
-    import { track, ClickEvent } from './analytics.svelte';
+    import { track, ClickEvent } from '../analytics.svelte';
 
     export let roomId: string;
 
diff --git a/src/components/index.svelte b/src/components/index.svelte
index 45579af..951cf69 100644
--- a/src/components/index.svelte
+++ b/src/components/index.svelte
@@ -1,45 +1,53 @@
 <script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
-    import { tick } from 'svelte';
+    import { onDestroy} from 'svelte';
     import { fade } from 'svelte/transition';
     import { _, locale } from 'svelte-i18n';
     import { locales } from '../i18n/index';
     import Loader from './loader.svelte';
-    import { RemoteRoom } from '../stores/remote-room';
-    import { LocalRoom } from '../stores/local-room';
+    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, WatchedMinuteEvent, LocaleChangedEvent } from './analytics.svelte';
+    import { track, ClickEvent, LocaleChangedEvent } from '../analytics.svelte';
     import { isExample } from '../stores/video-example';
         
     export let roomId: string;
 
-    let remoteRoom: RemoteRoom;
-    let localRoom: LocalRoom;
-
-    $: remoteRoom = new RemoteRoom(roomId);
-    $: localRoom = new LocalRoom(remoteRoom);
-    $: initRoom(remoteRoom);
-    $: url = localRoom?.url;
-    $: play = localRoom?.play;
-    $: paused = localRoom?.paused;
-    $: minutesWatched = localRoom?.minutesWatched;
-    $: currentTime = localRoom?.currentTime;
-
-    let isRoomLoading = true;
-    let isTimeLoading = true;
-
-    const initRoom = async function (room: RemoteRoom) {
+    let room: Room;
+    $: (async (roomId) => {
         isRoomLoading = true;
+        if (room) {
+            room.destruct();
+        }
+        room = new Room(roomId);
         try {
-            await remoteRoom.load();
+            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) {
+
     };
 
     const initTime = async function () {
@@ -95,22 +103,8 @@
         track(new LocaleChangedEvent({ locale: $locale }));
     };
 
-    let timeSpentInterval;
-    onMount(() => {
-        timeSpentInterval = setInterval(() => {
-            if ($play && !$paused) {
-                $minutesWatched += 1;
-                track(new WatchedMinuteEvent({ roomId, sourceType: $play.type, isExample: isExample($url) }));
-            }
-        }, 60000);
-    });
-
-    onDestroy(() => {
-        clearInterval(timeSpentInterval);
-    });
-
-    $: isLoading = !localRoom || isRoomLoading || isTimeLoading;
-</script>
+    $: isLoading = !room || isRoomLoading || isTimeLoading;
+    </script>
 
 <div class="uk-flex-1 uk-flex uk-flex-center" class:uk-flex-middle={isLoading}>
     {#if isLoading}
@@ -124,11 +118,12 @@
                 <div uk-grid class="uk-grid-small">
                     <div class="tile uk-flex uk-flex-column">
                         <h2 class="uk-card-title">🍿 { $_('selectVideo.title') }</h2>
-                        <VideoSelector room={localRoom} />
+                        <VideoSelector room={room} />
                     </div>
                     <div class="tile uk-flex uk-flex-column">
                         <h2 class="uk-card-title">👥 { $_('invite.title') }</h2>
-                        <CopyUrl roomId={roomId}/>
+                        <CopyUrl roomId={roomId} />
+                        <Users users={$users} />
                     </div>
 
                     <div class="buttons uk-flex uk-margin-top uk-flex-column">
diff --git a/src/components/users/index.svelte b/src/components/users/index.svelte
new file mode 100644
index 0000000..6eb7e96
--- /dev/null
+++ b/src/components/users/index.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { flip } from 'svelte/animate';
+    import { fade, blur, fly, slide, scale, draw } from 'svelte/transition';
+    import { _ } from 'svelte-i18n';
+    import User from './user.svelte';
+    import type { User } from '../../stores/remote-room';
+    import { myNameStore } from '../../stores/my-name';
+    import { myId } from '../../stores/my-id';
+
+    export let users: User[];
+</script>
+
+<div class="users uk-flex-center uk-flex uk-margin-top uk-text-center uk-flex-middle">
+    <User user={({ name: $myNameStore, id: myId })} me={true} bind:myName={$myNameStore} />
+    {#each users as user (user.id)}
+        {#if $myNameStore !== user}
+            <User user={user} me={false} />
+        {/if}
+    {/each}
+</div>
+
+<style lang="scss">
+    .users {
+        overflow-y: scroll;
+    }
+</style>
diff --git a/src/components/users/user.svelte b/src/components/users/user.svelte
new file mode 100644
index 0000000..07bf528
--- /dev/null
+++ b/src/components/users/user.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n';
+    import { XORWow } from 'random-seedable';
+    import type { User } from '../../stores/bound-user';
+
+    export let user: User;
+    export let myName: string;
+    export let me: boolean;
+
+    const maxLength = 10;
+
+    const updateName = function () {
+        myName = prompt($_('users.nameEditPromt', { values: { maxLength }}), myName);
+    };
+
+    const code = function (str: string): number {
+        return [...str].reduce((a, x) => a + x.charCodeAt(0), 0);
+    };
+
+    function pseudoRandom(seed) {
+        return function() {
+            seed = seed * 16807 % 2147483647;
+            return seed;
+        }
+    }
+
+    const stringToColor = function (str: string): string {
+        const rand = pseudoRandom(code(str + user.id.slice(1)));
+        const randColor = () => (rand() % 100 + 64).toString(16).padStart(2, '0');
+        return `#${randColor()}${randColor()}${randColor()}70`;
+    };
+
+    const emojiRegex = /^\p{Emoji}$/u;
+    const isEmoji = function (text: string): boolean {
+       return emojiRegex.test(text);
+    };
+</script>
+
+<div
+    class="user uk-text-center uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-flex-middle uk-margin-right"
+    style:background-color={stringToColor(user.name)}
+>
+    <div class="uk-text-emphasis uk-margin-small-top" class:uk-text-large={user.name.length === 1 || isEmoji(user.name)}>
+        { user.name.slice(0, maxLength) }
+    </div>
+    <span class="uk-text-muted uk-text-small">
+        {#if me}
+            <u on:click={updateName} class="pointer">{ $_('users.nameEdit') }</u>
+        {:else}
+            online
+        {/if}
+    </span>
+</div>
+
+<style lang="scss">
+    .user {
+        height: 4rem;
+        width: 4rem;
+        min-height: 4rem;
+        min-width: 4rem;
+        border-radius: 1.5rem;
+        border: 1px solid #7d7d7d;
+        text-wrap: wrap;
+        padding: 0.5rem;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/video-player/index.svelte b/src/components/video-player/index.svelte
index 7464f8f..4939414 100644
--- a/src/components/video-player/index.svelte
+++ b/src/components/video-player/index.svelte
@@ -57,7 +57,7 @@
         } catch {
             let url = link.url;
             if (isHls) {
-                url = `${proxies.hlsUrl}/${btoa(link.url) }.m3u8`;
+                url = `${proxies.hlsUrl}/${btoa(link.url)}.m3u8`;
             } else {
                 url = `${proxies.regularUrl}?url=${link.url}`;
             }
diff --git a/src/components/video-selector-btn.svelte b/src/components/video-selector-btn.svelte
index b50de46..20117ef 100644
--- a/src/components/video-selector-btn.svelte
+++ b/src/components/video-selector-btn.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
-    import { track, ClickEvent } from './analytics.svelte';
-    import type { LocalRoom } from '../stores/local-room';
+    import { track, ClickEvent } from '../analytics.svelte';
+    import type { Room } from '../stores/room';
 
-    export let room: LocalRoom;
+    export let room: Room;
 
     $: blobUrl = room.blobUrl;
     $: fileName = room.fileName;
diff --git a/src/destructable.ts b/src/destructable.ts
new file mode 100644
index 0000000..62acec8
--- /dev/null
+++ b/src/destructable.ts
@@ -0,0 +1,20 @@
+type Destructor = () => void;
+
+export class Destructable {
+    private readonly destructors: Destructor[] = [];
+
+    protected onDestruct (destructor: Destructor) {
+        this.destructors.push(destructor);
+    }
+
+    protected registerDependency (destructable: Destructable) {
+        this.onDestruct(() => destructable.destruct());
+    }
+
+    destruct () {
+        while (this.destructors.length) {
+            const destructor = this.destructors.pop();
+            destructor && destructor();
+        }
+    }
+}
diff --git a/src/i18n/_.ts b/src/i18n/_.ts
index 173076e..ba9e93b 100644
--- a/src/i18n/_.ts
+++ b/src/i18n/_.ts
@@ -45,6 +45,10 @@ const def = {
     },
     poweredBy: 'Powered by',
     or: 'or',
+    users: {
+        nameEdit: 'edit',
+        nameEditPromt: 'Enter your name (maximum {maxLength} characters) or leave the input blank to pick random name',
+    },
 };
 
 export type TranslatedText = typeof def;
diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
index 7f80752..cbc7416 100644
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -47,6 +47,10 @@ const fr: TranslatedText = {
     },
     poweredBy: 'Alimenté par',
     or: 'ou',
+    users: {
+        nameEdit: 'éditer',
+        nameEditPromt: 'Entrez votre nom (maximum {maxLength} caractères) ou laissez le champ vide pour choisir un nom au hasard',
+    },
 };
 
 export default fr;
diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
index f65ee2a..6d38ef7 100644
--- a/src/i18n/ru.ts
+++ b/src/i18n/ru.ts
@@ -47,6 +47,10 @@ const ru: TranslatedText = {
     },
     poweredBy: 'Сделано с помощью',
     or: 'или',
+    users: {
+        nameEdit: 'изменить',
+        nameEditPromt: 'Введите свое имя (максимум {maxLength} символов) или оставьте поле ввода пустым, выбрать случайное имя'
+    },
 };
 
 export default ru;
diff --git a/src/settings.ts b/src/settings.ts
index 148c09f..be61deb 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -28,3 +28,5 @@ export const proxies = {
 };
 
 export const urlExamples = import.meta.env['VITE_URL_EXAMPLES']?.split(',');
+
+export const userNames = import.meta.env['VITE_USERNAMES']?.split(',');
\ No newline at end of file
diff --git a/src/stores/bound-current-time.ts b/src/stores/bound-current-time.ts
new file mode 100644
index 0000000..266f1ca
--- /dev/null
+++ b/src/stores/bound-current-time.ts
@@ -0,0 +1,65 @@
+import { type Writable, writable, get, type Subscriber, type Updater } from 'svelte/store';
+import type { DatabaseReference } from 'firebase/database';
+import { now } from './clock';
+import { BoundTimedStore } from './bound-timed-store';
+
+const maximumDelta = 0.5;
+const syncInterval = 10;
+
+const shouldUpdateCurrentTime = function(
+    localCurrentTime: number,
+    localUpdatedAt: number,
+    remoteCurrentTime: number,
+    remoteUpdatedAt: number,
+): boolean {
+    const playbackDelta = remoteCurrentTime - localCurrentTime;
+    const timeDelta = remoteUpdatedAt - localUpdatedAt;
+
+    return Math.abs(playbackDelta - timeDelta) > maximumDelta;
+};
+
+export class BoundCurrentTime implements Writable<number> {
+    private readonly remote: BoundTimedStore<number>;
+    private readonly currentTime: Writable<number>;
+    private readonly updatedAt: Writable<number>;
+
+    constructor (ref: DatabaseReference) {
+        this.remote = new BoundTimedStore<number>(ref, 0);
+        this.currentTime = writable<number>(get(this.remote), set => {
+            return this.remote.subscribe(newCurrentTime => {
+                const remoteUpdatedAtValue = get(this.remote.updatedAt);
+                if (shouldUpdateCurrentTime(get(this.currentTime), get(this.updatedAt), newCurrentTime, remoteUpdatedAtValue)) {
+                    set(newCurrentTime);
+                    this.updatedAt.set(remoteUpdatedAtValue);
+                }
+            })
+        });
+        this.updatedAt = writable(get(this.remote.updatedAt));
+    }
+
+    subscribe (func: Subscriber<number>) {
+        return this.currentTime.subscribe(func);
+    }
+
+    set (value: number) {
+        const nowTime = now();
+
+        this.currentTime.set(value);
+        this.updatedAt.set(nowTime);
+
+        const remoteCurrentTimeValue = get(this.remote);
+        const remoteUpdatedAtValue = get(this.remote.updatedAt);
+        if (Math.abs(remoteCurrentTimeValue - value) > syncInterval ||  Math.abs(nowTime - remoteUpdatedAtValue) > syncInterval) {
+            this.remote.set(value);
+        }
+    }
+
+    update (func: Updater<number>) {
+        const newValue = func(get(this.currentTime));
+        this.set(newValue);
+    }
+
+    async init () {
+        await this.remote.init();
+    }
+}
diff --git a/src/stores/bound-minutes-watched.ts b/src/stores/bound-minutes-watched.ts
new file mode 100644
index 0000000..d2d9f90
--- /dev/null
+++ b/src/stores/bound-minutes-watched.ts
@@ -0,0 +1,39 @@
+import { type DatabaseReference, child } from 'firebase/database';
+import { type Readable, type Subscriber, type Unsubscriber, get } from 'svelte/store';
+import { BoundStore } from './bound-store';
+import { track, WatchedMinuteEvent } from '../analytics.svelte';
+import { Destructable } from '../destructable';
+import type { Link } from '../normalize-link';
+import { myId } from '../stores/my-id';
+
+export class BoundMinutesWatched extends Destructable implements Readable<number> {
+    private readonly store: BoundStore<number>;
+    private readonly pausedStore: Readable<boolean>;
+    private readonly playStore: Readable<Link | null>;
+    private readonly roomId: string;
+
+    constructor (ref: DatabaseReference, roomId: string, playStore: Readable<Link | null>, pausedStore: Readable<boolean>) {
+        super();
+        this.roomId = roomId;
+        this.pausedStore = pausedStore;
+        this.playStore = playStore;
+        this.store = new BoundStore<number>(child(ref, myId), 0);
+    }
+
+    subscribe(run: Subscriber<number>): Unsubscriber {
+        return this.store.subscribe(run);
+    }
+
+    async init() {
+        await this.store.init();
+
+        const idMinuteSpent = setInterval(() => {
+            const play = get(this.playStore);
+            if (play && !get(this.pausedStore)) {
+                this.store.update(x => x + 1);
+                track(new WatchedMinuteEvent({ roomId: this.roomId, sourceType: play.type }));
+            }
+        }, 60000);
+        this.onDestruct(() => clearInterval(idMinuteSpent));
+    }
+}
diff --git a/src/stores/bound-store.ts b/src/stores/bound-store.ts
new file mode 100644
index 0000000..cbaeaa2
--- /dev/null
+++ b/src/stores/bound-store.ts
@@ -0,0 +1,45 @@
+import { get as getStore, writable, type Updater, type Writable, type Subscriber } from 'svelte/store';
+import { onValue, get, set,type DatabaseReference } from 'firebase/database';
+
+export class BoundStore<T> implements Writable<T> {
+    private readonly store: Writable<T>;
+    private readonly ref: DatabaseReference;
+
+    constructor (ref: DatabaseReference, defaultValue: T) {
+        this.ref = ref;
+        this.store = writable<T>(defaultValue, set => {
+            return onValue(ref, snapshot => {
+                const newValue = snapshot.val();
+                if (newValue !== undefined && newValue !== null) {
+                    set(newValue);
+                }
+            });
+        });
+    }
+
+    subscribe (f: Subscriber<T>) {
+        return this.store.subscribe(f);
+    }
+
+    set (value: T) {
+        if (value !== undefined) {
+            this.store.set(value);
+            set(this.ref, value);
+        }
+    }
+
+    update (func: Updater<T>) {
+        const currentValue = getStore(this.store);
+        const newValue = func(currentValue);
+        this.set(newValue);
+    }
+
+    async init () {
+        const snapshot = await get(this.ref);
+        if (snapshot.exists()) {
+            this.store.set(snapshot.val());
+        } else {
+            this.set(getStore(this.store));
+        }
+    }
+}
diff --git a/src/stores/bound-timed-store.ts b/src/stores/bound-timed-store.ts
new file mode 100644
index 0000000..9173352
--- /dev/null
+++ b/src/stores/bound-timed-store.ts
@@ -0,0 +1,52 @@
+import { type Writable, type Readable, readable, writable, get, type Subscriber, type Updater } from 'svelte/store';
+import type { DatabaseReference } from 'firebase/database';
+import { BoundStore } from './bound-store';
+import { now } from './clock';
+
+interface TimedValue<T> {
+    value: T;
+    updatedAt: number;
+}
+export class BoundTimedStore<T> implements Writable<T> {
+    private readonly remote: BoundStore<TimedValue<T>>;
+    private readonly store: Writable<TimedValue<T>>;
+    readonly updatedAt: Readable<number>;
+
+    constructor (ref: DatabaseReference, defaultValue: T) {
+        const defauleRaw = { value: defaultValue, updatedAt: 0 };
+        this.remote = new BoundStore(ref, defauleRaw);
+        this.store = writable<TimedValue<T>>(defauleRaw, set => {
+            return this.remote.subscribe(newValue => {
+                const storeValue = get(this.store);
+                if (newValue.updatedAt > storeValue.updatedAt) {
+                    set(newValue);
+                }
+            });
+        });
+        this.updatedAt = readable<number>(get(this.store)?.updatedAt, set => {
+            return this.store.subscribe(({ updatedAt }) => set(updatedAt));
+        });
+    }
+
+    subscribe (f: Subscriber<T>) {
+        return this.store.subscribe(({ value }) => f(value));
+    }
+
+    set (value: T) {
+        if (value !== undefined) {
+            const raw = { value, updatedAt: now() };
+            this.store.set(raw);
+            this.remote.set(raw);
+        }
+    }
+
+    update (func: Updater<T>) {
+        const currentValue = get(this.store)?.value;
+        const newValue = func(currentValue);
+        this.set(newValue);
+    }
+
+    async init () {
+        await this.remote.init();
+    }
+}
diff --git a/src/stores/bound-users.ts b/src/stores/bound-users.ts
new file mode 100644
index 0000000..9803df0
--- /dev/null
+++ b/src/stores/bound-users.ts
@@ -0,0 +1,65 @@
+import type { DatabaseReference } from 'firebase/database';
+import { type Readable, type Subscriber, type Unsubscriber, get } from 'svelte/store';
+import { BoundStore } from './bound-store';
+import { now } from './clock';
+import { myNameStore } from './my-name';
+import { Destructable } from '../destructable';
+import { myId } from '../stores/my-id';
+
+const onlineTimeout = 10;
+const onlineRefreshInteval = 5
+
+export interface User {
+    id: string;
+    lastSeen: number;
+    name: string;
+}
+interface Users {
+    [id: string]: Omit<User, 'id'>;
+}
+export class UsersBoundStore extends Destructable implements Readable<User[]> {
+    private readonly store: BoundStore<Users>;
+
+    constructor (ref: DatabaseReference) {
+        super();
+        this.store = new BoundStore<Users>(ref, {});
+    }
+
+    subscribe(run: Subscriber<User[]>): Unsubscriber {
+        const timeNow = now();
+        return this.store.subscribe(users  => {
+            run(Object.entries(users)
+                .filter(([id, user]) => id !== myId && user.lastSeen + onlineTimeout > timeNow)
+                .map(([id, user]) => ({ ...user, id })));
+        });
+    }
+
+    nameUpdated () {
+        this.invalidate();
+    }
+
+    async invalidate () {
+        const nowTime = now();
+        const newUsers: Users = {};
+        for (const [id, user] of Object.entries(get(this.store))) {
+            if (user.lastSeen + 10 >= nowTime) {
+                newUsers[id] = user;
+            }
+        }
+        if (myId) {
+            newUsers[myId] = { name: get(myNameStore), lastSeen: now() };
+        }
+        this.store.set(newUsers);
+    }
+
+    async init() {
+        await this.store.init();
+
+        const updateOnline = () => this.invalidate();
+        const idOnline = setInterval(updateOnline, onlineRefreshInteval * 1000);
+        await updateOnline();
+
+        this.onDestruct(() => clearInterval(idOnline));
+        this.onDestruct(myNameStore.subscribe(() => this.invalidate()));
+    }
+}
diff --git a/src/stores/clock.ts b/src/stores/clock.ts
index 7d1f9a5..c1e64c5 100644
--- a/src/stores/clock.ts
+++ b/src/stores/clock.ts
@@ -1,4 +1,4 @@
-let referencePointOffset: number = new Date().getTime();
+let referencePointOffset: number = 0;
 
 const fetchTime = async function () {
     const response = await fetch('https://worldtimeapi.org/api/timezone/UTC');
@@ -8,7 +8,7 @@ const fetchTime = async function () {
 
 const localNow = function (): number {
     return new Date().getTime() / 1000;
-}
+};
 
 export const syncTime = async function () {
     referencePointOffset = localNow() - await fetchTime();
diff --git a/src/stores/local-room.ts b/src/stores/local-room.ts
deleted file mode 100644
index 0d40bd6..0000000
--- a/src/stores/local-room.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { writable, type Writable, type Updater, type Readable, readable } from 'svelte/store';
-import { get as getStore } from 'svelte/store';
-import type { BoundStore, RemoteRoom } from './remote-room';
-import normalizeLink, { type Link } from '../normalize-link';
-import { now } from './clock';
-
-const maximumDelta = 0.5;
-const syncInterval = 10;
-
-const shouldUpdateCurrentTime = function(
-    localCurrentTime: number,
-    localUpdatedAt: number,
-    remoteCurrentTime: number,
-    remoteUpdatedAt: number,
-): boolean {
-    const playbackDelta = remoteCurrentTime - localCurrentTime;
-    const timeDelta = remoteUpdatedAt - localUpdatedAt;
-
-    return Math.abs(playbackDelta - timeDelta) > maximumDelta;
-};
-
-const getPlayLink = function (isLocalMode: boolean, url: string, blobUrl: string) {
-    return normalizeLink(isLocalMode ? blobUrl : url);
-};
-
-const createLocalCurrentTime = function(
-    remoteCurrentTime: BoundStore<number>, 
-): { currentTime: Writable<number>, updatedAt: Writable<number> } {
-    const localUpdatedAt = writable<number>(getStore(remoteCurrentTime.updatedAt));
-    const localCurrentTime = writable<number>(getStore(remoteCurrentTime), set => {
-        return remoteCurrentTime.subscribe(newCurrentTime => {
-            const remoteUpdatedAtValue = getStore(remoteCurrentTime.updatedAt);
-            if (shouldUpdateCurrentTime(getStore(localCurrentTime), getStore(localUpdatedAt), newCurrentTime, remoteUpdatedAtValue)) {
-                set(newCurrentTime);
-                localUpdatedAt.set(remoteUpdatedAtValue);
-            }
-        })
-    });
-
-    const set = function (value: number) {
-        const nowTime = now();
-
-        localCurrentTime.set(value);
-        localUpdatedAt.set(nowTime);
-
-        const remoteCurrentTimeValue = getStore(remoteCurrentTime);
-        const remoteUpdatedAtValue = getStore(remoteCurrentTime.updatedAt);
-        if (Math.abs(remoteCurrentTimeValue - value) > syncInterval ||  Math.abs(nowTime - remoteUpdatedAtValue) > syncInterval) {
-            remoteCurrentTime.set(value);
-        }
-    };
-
-    return {
-        updatedAt: localUpdatedAt,
-        currentTime: {
-            subscribe: localCurrentTime.subscribe,
-            set,
-            update: function (f) {
-                const newValue = f(getStore(localCurrentTime));
-                set(newValue);
-            },
-        },
-    };
-};
-
-export class LocalRoom {
-    readonly id: string;
-
-    private readonly remoteRoom: RemoteRoom;
-
-    readonly play: Readable<Link | null>;
-    readonly blobUrl: Writable<string> = writable<string>('');
-    readonly fileName: Writable<string> = writable<string>('');
-
-    readonly url: Writable<string>;
-    readonly isLocalMode: Writable<boolean>;
-    readonly paused: Writable<boolean>;
-    readonly minutesWatched: Writable<number>;
-    readonly currentTime: Writable<number>;
-    readonly updatedAt: Writable<number>;
-
-    constructor (remoteRoom: RemoteRoom) {
-        this.id = remoteRoom.id;
-        this.remoteRoom = remoteRoom;
-
-        this.url = remoteRoom.url;
-        this.isLocalMode = remoteRoom.isLocalMode;
-        this.paused = remoteRoom.paused;
-        this.minutesWatched = remoteRoom.minutesWatched;
-
-        this.play = readable<Link | null>(null, set => {
-            const url = this.url.subscribe(newUrl => {
-                set(getPlayLink(getStore(this.isLocalMode), newUrl, getStore(this.blobUrl)));
-            });
-            const blob = this.blobUrl.subscribe(newBlob => {
-                set(getPlayLink(getStore(this.isLocalMode), getStore(this.url), newBlob));
-            });
-            const localMode = this.isLocalMode.subscribe(newLocalMode => {
-                set(getPlayLink(newLocalMode, getStore(this.url), getStore(this.blobUrl)));
-            });
-            return () => [url, blob, localMode].forEach(x => x());
-        });
-
-        const { currentTime, updatedAt } = createLocalCurrentTime(remoteRoom.currentTime);
-        this.currentTime = currentTime;
-        this.updatedAt = updatedAt;
-    }
-}
diff --git a/src/stores/my-id.ts b/src/stores/my-id.ts
new file mode 100644
index 0000000..fdf5dce
--- /dev/null
+++ b/src/stores/my-id.ts
@@ -0,0 +1,12 @@
+const localStorageKey = 'my-id';
+
+const generateId = function (): string {
+    return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString();
+};
+
+let myId: string = localStorage.getItem(localStorageKey) || '';
+if (!myId) {
+    myId = generateId();
+    localStorage.setItem(localStorageKey, myId);
+}
+export { myId };
diff --git a/src/stores/my-name.ts b/src/stores/my-name.ts
new file mode 100644
index 0000000..8430df1
--- /dev/null
+++ b/src/stores/my-name.ts
@@ -0,0 +1,32 @@
+import { writable, get, type Subscriber, type Unsubscriber, type Writable, type Updater } from 'svelte/store';
+import { userNames } from '../settings';
+
+const localStorageKey = 'my-name';
+
+const generateName = function () {
+    return userNames[Math.floor(Math.random() * userNames.length)];
+};
+
+class MyName implements Writable<string> {
+    private store = writable<string>(localStorage.getItem(localStorageKey) || generateName());
+
+    subscribe(run: Subscriber<string>): Unsubscriber {
+        return this.store.subscribe(run);
+    }
+
+    set (value: string) {
+        if (!value) {
+            value = generateName();
+        }
+        localStorage.setItem(localStorageKey, value);
+        this.store.set(value);
+    }
+
+    update(updater: Updater<string>): void {
+        const value = get(this.store);
+        const newValue = updater(value);
+        this.set(newValue);
+    }
+}
+
+export const myNameStore = new MyName();
\ No newline at end of file
diff --git a/src/stores/remote-room.ts b/src/stores/remote-room.ts
deleted file mode 100644
index bb14bda..0000000
--- a/src/stores/remote-room.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { get as getStore, writable, type Updater, type Writable, type Readable, type Subscriber, readable } from 'svelte/store';
-import { ref, onValue, get, set, child, update, getDatabase, type DatabaseReference } from 'firebase/database';
-import { initializeApp } from 'firebase/app';
-import { now } from './clock';
-import { firebaseConfig } from '../settings';
-
-export class BoundStore<T> implements Writable<T> {
-    private readonly store: Writable<T>;
-    private readonly ref: DatabaseReference;
-
-    constructor (ref: DatabaseReference, defaultValue: T) {
-        this.ref = ref;
-        this.store = writable<T>(defaultValue, set => {
-            return onValue(ref, snapshot => {
-                const newValue = snapshot.val();
-                if (newValue !== undefined && newValue !== null) {
-                    set(newValue);
-                }
-            });
-        });
-    }
-
-    subscribe (f: Subscriber<T>) {
-        return this.store.subscribe(f);
-    }
-
-    set (value: T) {
-        if (value !== undefined) {
-            this.store.set(value);
-            update(this.ref, value);
-        }
-    }
-
-    update (func: Updater<T>) {
-        const currentValue = getStore(this.store);
-        const newValue = func(currentValue);
-        this.set(newValue);
-    }
-
-    async init () {
-        const snapshot = await get(this.ref);
-        if (snapshot.exists()) {
-            this.store.set(snapshot.val());
-        }
-    }
-}
-
-interface TimedValue<T> {
-    value: T;
-    updatedAt: number;
-}
-export class TimedBoundStore<T> implements Writable<T> {
-    private readonly remote: BoundStore<TimedValue<T>>;
-    private readonly store: Writable<TimedValue<T>>;
-    readonly updatedAt: Readable<number>;
-
-    constructor (ref: DatabaseReference, defaultValue: T) {
-        const defauleRaw = { value: defaultValue, updatedAt: now() };
-        this.remote = new BoundStore(ref, defauleRaw);
-        this.store = writable<TimedValue<T>>(defauleRaw, set => {
-            return this.remote.subscribe(newValue => {
-                const storeValue = getStore(this.store);
-                if (!storeValue || newValue.updatedAt > storeValue.updatedAt) {
-                    set(newValue);
-                }
-            });
-        });
-        this.updatedAt = readable<number>(getStore(this.store)?.updatedAt, set => {
-            return this.store.subscribe(({ updatedAt }) => set(updatedAt));
-        });
-    }
-
-    subscribe (f: Subscriber<T>) {
-        return this.store.subscribe(({ value }) => f(value));
-    }
-
-    set (value: T) {
-        if (value !== undefined) {
-            const raw = { value, updatedAt: now() };
-            this.store.set(raw);
-            this.remote.set(raw);
-        }
-    }
-
-    update (func: Updater<T>) {
-        const currentValue = getStore(this.store)?.value;
-        const newValue = func(currentValue);
-        this.set(newValue);
-    }
-
-    async init () {
-        await this.remote.init();
-    }
-}
-
-const database = getDatabase(initializeApp(firebaseConfig));
-
-export class RemoteRoom {
-    readonly id: string;
-    readonly url: TimedBoundStore<string>;
-    readonly currentTime: TimedBoundStore<number>;
-    readonly paused: TimedBoundStore<boolean>;
-    readonly isLocalMode: TimedBoundStore<boolean>;
-    readonly minutesWatched: TimedBoundStore<number>;
-    readonly createdAt: BoundStore<number>;
-
-    constructor(roomId: string) {
-        this.id = roomId;
-        const roomRef = child(ref(database), `room/${roomId}`);
-        this.url = new TimedBoundStore<string>(child(roomRef, 'url'), '');
-        this.currentTime = new TimedBoundStore<number>(child(roomRef, 'currentTime'), 0);
-        this.paused = new TimedBoundStore<boolean>(child(roomRef, 'paused'), true);
-        this.isLocalMode = new TimedBoundStore<boolean>(child(roomRef, 'isLocalMode'), false);
-        this.minutesWatched = new TimedBoundStore<number>(child(roomRef, 'minutesWatched'), 0);
-        this.createdAt = new BoundStore<number>(child(roomRef, 'createdAt'), now());
-    }
-
-    async load (): Promise<void> {
-        await this.url.init();
-        await this.currentTime.init();
-        await this.paused.init();
-        await this.isLocalMode.init();
-        await this.minutesWatched.init();
-        await this.createdAt.init();
-    }
-}
diff --git a/src/stores/room.ts b/src/stores/room.ts
new file mode 100644
index 0000000..ce91a94
--- /dev/null
+++ b/src/stores/room.ts
@@ -0,0 +1,76 @@
+import { writable, type Writable, type Readable, readable } from 'svelte/store';
+import { get as getStore } from 'svelte/store';
+import { ref, child, getDatabase } from 'firebase/database';
+import { initializeApp } from 'firebase/app';
+import { BoundStore } from './bound-store';
+import { BoundTimedStore } from './bound-timed-store';
+import { UsersBoundStore } from './bound-users';
+import { BoundMinutesWatched } from './bound-minutes-watched';
+import normalizeLink, { type Link } from '../normalize-link';
+import { myNameStore } from './my-name';
+import { now } from './clock';
+import { Destructable } from '../destructable';
+import { firebaseConfig } from '../settings';
+import { BoundCurrentTime } from './bound-current-time';
+
+const database = getDatabase(initializeApp(firebaseConfig));
+
+const getPlayLink = function (isLocalMode: boolean, url: string, blobUrl: string) {
+    return normalizeLink(isLocalMode ? blobUrl : url);
+};
+
+export class Room extends Destructable {
+    readonly id: string;
+
+    readonly play: Readable<Link | null>;
+    readonly blobUrl: Writable<string> = writable<string>('');
+    readonly fileName: Writable<string> = writable<string>('');
+
+    readonly url: BoundTimedStore<string>;
+    readonly isLocalMode: BoundTimedStore<boolean>;
+    readonly paused: BoundTimedStore<boolean>;
+    readonly minutesWatched: BoundMinutesWatched;
+    readonly currentTime: BoundCurrentTime;
+    readonly users: UsersBoundStore;
+
+    private readonly createdAt: BoundStore<number>;
+
+    constructor (roomId: string) {
+        super();
+        this.id = roomId;
+
+        const roomRef = child(ref(database), `room/${roomId}`);
+        this.url = new BoundTimedStore<string>(child(roomRef, 'url'), '');
+        this.currentTime = new BoundCurrentTime(child(roomRef, 'currentTime'));
+        this.paused = new BoundTimedStore<boolean>(child(roomRef, 'paused'), true);
+        this.isLocalMode = new BoundTimedStore<boolean>(child(roomRef, 'isLocalMode'), false);
+        this.createdAt = new BoundStore<number>(child(roomRef, 'createdAt'), now());
+        this.users = new UsersBoundStore(child(roomRef, 'users'));
+        this.play = readable<Link | null>(null, set => {
+            const url = this.url.subscribe(newUrl => {
+                set(getPlayLink(getStore(this.isLocalMode), newUrl, getStore(this.blobUrl)));
+            });
+            const blob = this.blobUrl.subscribe(newBlob => {
+                set(getPlayLink(getStore(this.isLocalMode), getStore(this.url), newBlob));
+            });
+            const localMode = this.isLocalMode.subscribe(newLocalMode => {
+                set(getPlayLink(newLocalMode, getStore(this.url), getStore(this.blobUrl)));
+            });
+            return () => [url, blob, localMode].forEach(x => x());
+        });
+        this.minutesWatched = new BoundMinutesWatched(child(roomRef, 'minutesWatched'), roomId, this.play, this.paused);
+
+        this.registerDependency(this.users);
+        this.registerDependency(this.minutesWatched);
+    }
+
+    async init (): Promise<void> {
+        await this.url.init();
+        await this.currentTime.init();
+        await this.paused.init();
+        await this.isLocalMode.init();
+        await this.minutesWatched.init();
+        await this.createdAt.init();
+        await this.users.init();
+    }
+}
diff --git a/src/stores/video-example.js b/src/stores/video-example.js
index f3c9e08..95c540a 100644
--- a/src/stores/video-example.js
+++ b/src/stores/video-example.js
@@ -4,7 +4,6 @@ export const getExampleVideo = function () {
     return urlExamples && urlExamples[Math.floor(Math.random() * urlExamples.length)];
 };
 
-
 export const isExample = function (url) {
     return urlExamples?.includes(url);
 };
diff --git a/stats.js b/stats.js
index 5090875..2b616be 100644
--- a/stats.js
+++ b/stats.js
@@ -1,4 +1,5 @@
 import admin from 'firebase-admin';
+import { ref, onValue, get } from 'firebase/database';
 import serviceAccount from './service-account-key.json' assert { type: "json" };
 
 admin.initializeApp({
@@ -6,21 +7,39 @@ admin.initializeApp({
     databaseURL: process.env['VITE_FIREBASE_DATABASE_URL'],
 });
 
+const printRow = function(...params) {
+    process.stdout.write(params.join('\t'));
+    process.stdout.write('\n');
+}
+
 const main = async function() {
     const root = admin.database().ref('room');
-    const promises = [];
-
-    process.stdout.write('roomId\turl\tcurrentTime\tpaused\tisLocalMode\tminutesWatched\tupdatedAt\tcreatedAt\n');
-    (await root.once('value')).forEach(childSnapshot => {
-        const task = (async function () {
-            const room = childSnapshot.val();
-            process.stdout.write(`${childSnapshot.key}\t${room.url?.value}\t${room.currentTime?.value}\t${room.paused?.value}\t${room.isLocalMode?.value}\t${room.minutesWatched?.value}\t${room.currentTime?.updatedAt && new Date(room.currentTime?.updatedAt * 1000).toISOString()}\t${room.createdAt && new Date(room.createdAt * 1000).toISOString()}\n`)
-
-        })();
-        promises.push(task);
-    });
 
-    await Promise.all(promises);
+    printRow(
+        'roomId',
+        'url',
+        'currentTime',
+        'paused',
+        'isLocalMode',
+        'minutesWatched',
+        'updatedAt',
+        'createdAt',
+    )
+    const rooms = await get(root);
+    for (const [roomId, room] of Object.entries(rooms.val())) {
+        if (!room) continue;
+        const minutesWatched = room.minutesWatched && typeof room.minutesWatched === 'object' && Object.values(room.minutesWatched).reduce((a, b) => a + b);
+        printRow(
+            roomId,
+            room.url?.value,
+            room.currentTime?.value,
+            room.paused?.value,
+            room.isLocalMode?.value,
+            minutesWatched,
+            room.currentTime?.updatedAt && new Date(room.currentTime?.updatedAt * 1000).toISOString(),
+            room.createdAt && new Date(room.createdAt * 1000).toISOString()
+        );
+    }
 };
 
 main().catch(e => process.stderr.write(e.toString())).finally(() => process.exit(0));