Improve analytics

src/App.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import 'uikit/dist/js/uikit';
     import { _ } from 'svelte-i18n';
     import { randomStr } from './utils';

src/analytics.svelte

@@ -2,6 +2,8 @@
     import { analytics, isProduction } from './settings';
     import { SourceType } from './normalize-source';
     import type { MessageType } from './stores/room/bound-messages';
+    import type { Room } from './stores/room';
+    import { get } from 'svelte/store';
 
     const trackRaw = function (...args: any[]) {
         if (isProduction) {
@@ -18,6 +20,15 @@
         isExample: boolean;
     }
 
+    export interface RoomDetails {
+        roomId: string;
+        paused: boolean;
+        srcType: SourceType | undefined;
+        srcUrl: string | undefined;
+        usersCount: number;
+        isExample: boolean | undefined;
+    }
+
     abstract class Event<T> {
         abstract readonly name: string;
         readonly params: T;
@@ -27,23 +38,45 @@
         }
     };
 
-    export class ClickEvent extends Event<{
+    abstract class RoomEvent<T> extends Event<T & RoomDetails> {
+        constructor(room: Room, params: T) {
+            const src = get(room.source)?.src;
+            super({
+                ...params,
+                roomId: room.id,
+                paused: get(room.paused),
+                srcType: get(room.source)?.type,
+                srcUrl: src instanceof Blob ? undefined : src,
+                usersCount: get(room.users)?.length || 1, // yourself
+                isExample: get(room.source)?.isExaple(),
+            });
+        }
+    }
+
+    export class ClickEvent extends RoomEvent<{
         target: string;
     }> {
         readonly name: string = 'click';
     }
 
-    export class WatchedMinuteEvent extends Event<{
-        roomId: string;
-        sourceType: SourceType;
-    }> {
+    export class WatchedMinuteEvent extends RoomEvent<void> {
         readonly name: string = 'watch_minute';
     }
 
-    export class UrlPasteEvent extends Event<{
-        roomId: string;
+    export class SeekedEvent extends RoomEvent<void> {
+        readonly name: string = 'seeked';
+    }
+
+    export class PausedEvent extends RoomEvent<void> {
+        readonly name: string = 'paused';
+    }
+
+    export class PlayedEvent extends RoomEvent<void> {
+        readonly name: string = 'played';
+    }
+
+    export class UrlPasteEvent extends RoomEvent<{
         url: string;
-        isExample: boolean;
     }> {
         readonly name: string = 'url_paste';
     }
@@ -54,13 +87,13 @@
         readonly name: string = 'locale_changed';
     }
 
-    export class MessageSentEvent extends Event<{
+    export class MessageSentEvent extends RoomEvent<{
         messageType: MessageType;
     }> {
         readonly name: string = 'message_sent';
     }
 
-    export class ReactionSentEvent extends Event<{
+    export class ReactionSentEvent extends RoomEvent<{
         reactionEmoji: string;
     }> {
         readonly name: string = 'reaction_sent';

src/components/card-copy-url.svelte

@@ -2,8 +2,10 @@
     import { _ } from 'svelte-i18n';
     import Interpolator from './interpolator.svelte';
     import { track, ClickEvent } from '../analytics.svelte';
+    import type { Room } from '../stores/room';
+    import Loader from './loader.svelte';
 
-    export let roomId: string;
+    export let room: Room;
 
     let copyTumbler: boolean = false;
 
@@ -17,7 +19,7 @@
         trigger();
     };
 
-    $: url = `${location.protocol}//${location.host}${location.pathname}#${roomId}`; 
+    $: url = !!room && `${location.protocol}//${location.host}${location.pathname}#${room.id}`; 
     const canShare: boolean = Boolean(navigator.share);
 
     const linkClick = function () {
@@ -29,7 +31,7 @@
         } else {
             copyToClipboard();
         }
-        track(new ClickEvent({ target: 'link_share' }));
+        track(new ClickEvent(room, { target: 'link_share' }));
     };
 
     const trigger = function () {
@@ -44,13 +46,17 @@
         {#if copyTumbler}
             { $_('invite.linkHasBeenCopied') }
         {:else}
-            <div
-                class="uk-button uk-button-link uk-text-lowercase"
-                uk-tooltip={canShare ? $_('invite.clickToShare') : $_('invite.clickToCopy')}
-                on:click={linkClick}
-            >
-                {url}
-            </div>
+            {#if url}
+                <div
+                    class="uk-button uk-button-link uk-text-lowercase"
+                    uk-tooltip={canShare ? $_('invite.clickToShare') : $_('invite.clickToCopy')}
+                    on:click={linkClick}
+                >
+                    {url}
+                </div>
+            {:else}
+                <Loader ratio={0.5} />
+            {/if}
         {/if}
     </div>
 

src/components/card-video-selector.svelte

@@ -4,7 +4,7 @@
     import prettierBytes from 'prettier-bytes';
     import { track, ClickEvent, UrlPasteEvent } from '../analytics.svelte';
     import Interpolator from './interpolator.svelte';
-    import { getExampleVideo, isExample, haveExamples } from '../stores/video-example';
+    import { getExampleVideo, haveExamples } from '../stores/video-example';
     import VideoSelectorBtn from './video-selector-btn.svelte';
     import { downloadSpeed, uploadSpeed, progress, isSeeding, peers } from '../stores/web-torrent';
     import { Room } from '../stores/room';
@@ -22,19 +22,19 @@
 
     const selectExample = function () {
         $url = getExampleVideo();
-        track(new ClickEvent({ target: 'example' }));
+        track(new ClickEvent(room, { target: 'example' }));
     };
 
     const clickDownloadTutorial = function () {
-        track(new ClickEvent({ target: 'download_tutorial' }));
+        track(new ClickEvent(room, { target: 'download_tutorial' }));
     };
 
     const clickUrlTutorial = function () {
-        track(new ClickEvent({ target: 'url_tutorial' }));
+        track(new ClickEvent(room, { target: 'url_tutorial' }));
     };
 
     const onInput = function () {
-        $source && track(new UrlPasteEvent({ roomId: room.id, url: $url, isExample: isExample($url) }));
+        $source && track(new UrlPasteEvent(room, { url: $url }));
     };
 </script>
 
@@ -122,7 +122,7 @@
 </div>
 <div class="uk-text-center">
     {#if room}
-        <VideoSelectorBtn bind:url={$url} />
+        <VideoSelectorBtn room={room} />
     {:else}
         <button class="uk-button uk-button-default" disabled><Loader ratio={0.5} /></button>
     {/if}

src/components/index.svelte

@@ -20,7 +20,7 @@
         destroy();
         previousRoom = new Room(roomId);
         await previousRoom.init();
-        if (isDesktop && get(previousRoom.link)) {
+        if (isDesktop && get(previousRoom.source)) {
             setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 1000);     
         }
         return previousRoom;

src/components/language-selector.svelte

@@ -1,19 +1,14 @@
 <script lang="ts">
     import { _, locale } from 'svelte-i18n';
     import { locales } from '../i18n/index';
-    import { track, ClickEvent, LocaleChangedEvent } from '../analytics.svelte';
-
-
-    const onLanguageChangeClick = function () {
-        track(new ClickEvent({ target: 'language_selector' }));
-    };
+    import { track, LocaleChangedEvent } from '../analytics.svelte';
 
     const onLanguageChanged = function () {
-        track(new LocaleChangedEvent({ locale: $locale }));
+        track(new LocaleChangedEvent({ locale: $locale as string }));
     };
 </script>
 
-<select class="uk-button uk-button-default uk-text-center" bind:value={$locale} on:change={onLanguageChanged} on:click={onLanguageChangeClick}>
+<select class="uk-button uk-button-default uk-text-center" bind:value={$locale} on:change={onLanguageChanged}>
     {#each Object.entries(locales) as lang}
         <option value={ lang[0] }>{ lang[1].locale.flag } { lang[1].locale.name }</option>
     {/each}

src/components/room.svelte

@@ -32,7 +32,7 @@
     const generateNewRoom = function () {
         if (confirm($_('room.generateNewRoom.confirmation'))) {
             updateRoom(randomStr(6), true);
-            track(new ClickEvent({ target: 'generate_new_room' }));
+            track(new ClickEvent(room, { target: 'generate_new_room' }));
         }
     };
 
@@ -52,7 +52,7 @@
             newRoomId = input;
         }
         updateRoom(newRoomId, false);
-        track(new ClickEvent({ target: 'join_another_room' }));
+        track(new ClickEvent(room, { target: 'join_another_room' }));
     };
 </script>
 
@@ -73,7 +73,7 @@
             <div class:gradient-border={highlightInvite}>
                 <div class="tile uk-text-center uk-width-1-1">
                     <h2 class="uk-card-title" class:gradient-text={highlightInvite}>👥 { $_('invite.title') }</h2>
-                    <CardCopyUrl roomId={roomId} />
+                    <CardCopyUrl room={room} />
                 </div>
             </div>
             <div class="uk-width-1-1 uk-margin-top">
@@ -159,7 +159,7 @@
         }
     }
 
-    @-webkit-keyframes hue {
+    @keyframes hue {
         from {
             -webkit-filter: hue-rotate(0deg);
         }
@@ -170,8 +170,8 @@
 
     .gradient-text {
         background-image: linear-gradient(92deg, #f35626, #feab3a);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        fill-color: transparent;
         animation: hue 5s infinite linear;
     }
 </style>

src/components/video-player/chat/index.svelte

@@ -7,6 +7,7 @@
     import Lock from '../lock.svelte';
     import type { Room } from '../../../stores/room';
     import { groupConsecutiveElements, sleep } from '../../../utils';
+    import { MessageSentEvent, track } from '../../../analytics.svelte';
 
     const temporaryUnlockTimeout = 10;
 
@@ -37,6 +38,7 @@
         if (!input) return;
         messagesStore.sendMessage(input);
         input = '';
+        track(new MessageSentEvent(room, { messageType: MessageType.regular }));
     };
 
     const resetTimeout = function () {

src/components/video-player/chat/message.svelte

@@ -8,13 +8,13 @@
     import { _ } from 'svelte-i18n';
     import { fade, slide } from 'svelte/transition';
     import { MessageType } from '../../../stores/room/bound-messages';
-    import type { User } from '../../../stores/room/bound-users';
+    import type { User } from '../../../stores/user';
     import { me } from '../../../stores/me';
 
     export let messageGroup: GroupedMessages;
     export let users: User[];
 
-    const getUser = function (userId: string): User {
+    const getUser = function (userId: string): User | undefined {
         return users.find(({ id }) => id == userId);
     };
 
@@ -24,7 +24,7 @@
         return date.toISOString().slice(14, 19);
     };
 
-    const getMessageText = function (): string {
+    $: messageText = (function (): string {
         const message = messageGroup[0];
         switch (message.type) {
             case MessageType.regular:
@@ -38,27 +38,30 @@
             case MessageType.selectedLocalFile:
                 return $_('player.chat.message.selectedLocalFile');
         }
-    };
+        return '';
+    })();
 </script>
 
-<div in:slide>
-    <div transition:fade class="video-text uk-text-break" class:user-message={messageGroup[0].type === MessageType.regular}>
-        {#each new Set(messageGroup.map(({ userId }) => userId)) as userId, i}
-            {#if messageGroup.length > 1}
-                {#if i > 0 && i < messageGroup.length - 1}
-                    ,
-                {:else if i === messageGroup.length - 1}
-                &nbspand
+{#if messageText.trim() }
+    <div in:slide>
+        <div transition:fade class="video-text uk-text-break" class:user-message={messageGroup[0].type === MessageType.regular}>
+            {#each new Set(messageGroup.map(({ userId }) => userId)) as userId, i}
+                {#if messageGroup.length > 1}
+                    {#if i > 0 && i < messageGroup.length - 1}
+                        ,
+                    {:else if i === messageGroup.length - 1}
+                    &nbspand
+                    {/if}
                 {/if}
-            {/if}
-            <span style:color={getUser(userId)?.color}>
-                { getUser(userId)?.name || `${$me.name} (${$_('you')})` }
-            </span>
-        {/each}
-        {#if messageGroup[0].type === MessageType.regular}:{/if}
-        { getMessageText() }
+                <span style:color={getUser(userId)?.color}>
+                    { getUser(userId)?.name || `${$me.name} (${$_('you')})` }
+                </span>
+            {/each}
+            {#if messageGroup[0].type === MessageType.regular}:{/if}
+            { messageText }
+        </div>
     </div>
-</div>
+{/if}
 
 <style lang="scss">
     .user-message {