From 6e2aec604b44d9b8cb010e2012dfbad38d9ee7b0 Mon Sep 17 00:00:00 2001
From: Ed Asriyan <github@asriyan.me>
Date: Fri, 30 Aug 2024 19:35:38 -0700
Subject: [PATCH] Update UI

---
 src/App.svelte                                |  61 +------
 src/app.scss                                  |  29 +++-
 .../{ => controls}/card-copy-url.svelte       |  13 +-
 .../{ => controls}/card-video-selector.svelte |  24 +--
 src/components/controls/index.svelte          | 141 +++++++++++++++
 .../{ => controls}/language-selector.svelte   |   4 +-
 .../{ => controls}/users/index.svelte         |   4 +-
 .../{ => controls}/users/user.svelte          |   2 +-
 .../{ => controls}/video-selector-btn.svelte  |  12 +-
 src/components/fullscreen.svelte              |  39 +++++
 src/components/header.svelte                  |  40 +++++
 src/components/index.svelte                   |  24 +--
 src/components/room.svelte                    | 164 ++----------------
 src/components/video-player/index.svelte      |  36 ++--
 .../video-player/player-magnet.svelte         |   2 +-
 .../video-player/video-player-vidstack.svelte |  13 +-
 src/i18n/_.ts                                 |   1 +
 src/i18n/fr.ts                                |   1 +
 src/i18n/ru.ts                                |   1 +
 .../video-player => stores}/cursor.ts         |  20 +--
 src/stores/room/index.ts                      |   3 +-
 src/stores/video-example.ts                   |   1 +
 22 files changed, 340 insertions(+), 295 deletions(-)
 rename src/components/{ => controls}/card-copy-url.svelte (83%)
 rename src/components/{ => controls}/card-video-selector.svelte (85%)
 create mode 100644 src/components/controls/index.svelte
 rename src/components/{ => controls}/language-selector.svelte (79%)
 rename src/components/{ => controls}/users/index.svelte (84%)
 rename src/components/{ => controls}/users/user.svelte (97%)
 rename src/components/{ => controls}/video-selector-btn.svelte (81%)
 create mode 100644 src/components/fullscreen.svelte
 create mode 100644 src/components/header.svelte
 rename src/{components/video-player => stores}/cursor.ts (60%)

diff --git a/src/App.svelte b/src/App.svelte
index 814fcfe..66445e0 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,14 +3,11 @@
     import { _ } from 'svelte-i18n';
     import { randomStr } from './utils';
     import Analytics from './analytics.svelte';
-    import LanguageSelector from './components/language-selector.svelte';
     import Page from './components/index.svelte';
     import { environment, isProduction } from './settings';
     import './app.scss';
 
-    let header;
     let roomId: string;
-    let isOnline: boolean;
 
     const testPrefix = 'test_';
     const syncHashAndRoomId = function () {
@@ -26,45 +23,20 @@
     syncHashAndRoomId();
 </script>
 
-<svelte:window on:hashchange={syncHashAndRoomId} bind:online={isOnline}></svelte:window>
+<svelte:window on:hashchange={syncHashAndRoomId}></svelte:window>
 
 <Analytics/>
 
 {#if !isProduction}
-    <span class="uk-position-fixed 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="1000">
         Running in non-production environment: environment="{ environment }", isProd={ isProduction }
     </span>
 {/if}
 
-<h1 bind:this={header} class="header" class:offline={!isOnline}>
-    {#if isOnline}
-        🎬 Watch Together
-    {:else}
-        { $_('noInternet')}
-    {/if}
-</h1>
-
 <div class="uk-section-secondary window-height uk-flex uk-flex-column">
-    <div style:height={header?.clientHeight + 'px'}></div>
-    <div class="uk-flex-1 uk-flex uk-flex-center">
-        {#if roomId}
-            <Page roomId={roomId} headerHeight={header?.clientHeight}/>
-        {/if}
-    </div>
-    <div class="uk-text-small uk-text-muted uk-text-center uk-padding">
-        <LanguageSelector />
-        <div class="uk-margin-top">
-            <span>{ $_('poweredBy') }</span>
-            · <a class="uk-text-muted" href="https://svelte.dev" target="_blank">Svelte</a>
-            · <a class="uk-text-muted" href="https://firebase.google.com" target="_blank">Firebase</a>
-            · <a class="uk-text-muted" href="https://vidstack.io" target="_blank">Vidstack</a>
-            · <a class="uk-text-muted" href="https://webtorrent.io" target="_blank">WebTorrent</a>
-            · <a class="uk-text-muted" href="https://getuikit.com" target="_blank">UIkit</a>
-        </div>
-        <div>
-            <a class="uk-text-muted" href="https://asriyan.me" target="_blank">Ed Asriyan</a>
-        </div>
-    </div>
+    {#if roomId}
+        <Page roomId={roomId} />
+    {/if}
 </div>
 
 <style lang="scss">
@@ -72,26 +44,11 @@
         min-height: 100lvh;
     }
 
-    .header {
-        position: fixed;
-        color: white;
-        width: 100%;
-        margin: 0;
-        text-align: center;
-        font-family: Avenir Next;
-        font-size: 2rem;
-        padding: 1rem 0;
-        border-bottom: 1px solid rgb(255 255 255 / .1);
-        background-color: rgba(1, 1, 1, 0.9);
-        z-index: 2;
-        transition: background-color 500ms ease-in-out;
-    }
-
-    .offline {
-        background-color: red;
-    }
-
     .uk-section-secondary {
         background-color: #000;
     }
+
+    .footer {
+        z-index: 1;
+    }
 </style>
diff --git a/src/app.scss b/src/app.scss
index 37501f2..ee1411e 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -17,11 +17,34 @@ html {
     background-color: #000;
 }
 
+.glass {
+    border: 1px solid rgba(255, 255, 255, .25);
+    background-color: rgba(255, 255, 255, 0.01);
+    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(30px) brightness(70%);
+}
+
 .tile {
-    border: 1px solid rgb(255 255 255 / .1);
-    background-color: #1c1c1c;
-    border-radius: 1rem;
+    @extend .glass;
     padding: 2rem 1rem;
+    color: white;
+    border-radius: 1rem;
+}
+
+@keyframes hue {
+    from {
+        filter: hue-rotate(0deg);
+    }
+    to {
+        filter: hue-rotate(-360deg);
+    }
+}
+
+.gradient-text {
+    color: transparent !important;
+    background-image: linear-gradient(92deg, #f35626, #feac3a);
+    background-clip: text;
+    animation: hue 5s infinite linear;
 }
 
 .video-text {
diff --git a/src/components/card-copy-url.svelte b/src/components/controls/card-copy-url.svelte
similarity index 83%
rename from src/components/card-copy-url.svelte
rename to src/components/controls/card-copy-url.svelte
index 6db0014..5b1fa06 100644
--- a/src/components/card-copy-url.svelte
+++ b/src/components/controls/card-copy-url.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     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';
+    import Interpolator from '../interpolator.svelte';
+    import { track, ClickEvent } from '../../analytics.svelte';
+    import type { Room } from '../../stores/room';
+    import Loader from '../loader.svelte';
 
     export let room: Room;
+    export let highlight: boolean;
 
     let copyTumbler: boolean = false;
 
@@ -48,7 +49,9 @@
         {:else}
             {#if url}
                 <div
-                    class="uk-button uk-button-link uk-text-lowercase"
+                    class="uk-button-link uk-text-lowercase pointer"
+                    class:gradient-text={highlight}
+                    class:uk-text-bold={highlight}
                     uk-tooltip={canShare ? $_('invite.clickToShare') : $_('invite.clickToCopy')}
                     on:click={linkClick}
                 >
diff --git a/src/components/card-video-selector.svelte b/src/components/controls/card-video-selector.svelte
similarity index 85%
rename from src/components/card-video-selector.svelte
rename to src/components/controls/card-video-selector.svelte
index 0275b92..0979124 100644
--- a/src/components/card-video-selector.svelte
+++ b/src/components/controls/card-video-selector.svelte
@@ -2,15 +2,15 @@
     import { fade } from 'svelte/transition';
     import { _ } from 'svelte-i18n';
     import prettierBytes from 'prettier-bytes';
-    import { track, ClickEvent, UrlPasteEvent } from '../analytics.svelte';
-    import Interpolator from './interpolator.svelte';
-    import { getExampleVideo, haveExamples } from '../stores/video-example';
+    import { track, ClickEvent, UrlPasteEvent } from '../../analytics.svelte';
+    import Interpolator from '../interpolator.svelte';
+    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';
-    import Loader from './loader.svelte';
-    import normalizeSource, { SourceType } from '../normalize-source';
-    import { blob } from '../stores/blob';
+    import { downloadSpeed, uploadSpeed, progress, isSeeding, peers } from '../../stores/web-torrent';
+    import { Room } from '../../stores/room';
+    import Loader from '../loader.svelte';
+    import normalizeSource, { SourceType } from '../../normalize-source';
+    import { blob } from '../../stores/blob';
 
     export let room: Room;
 
@@ -108,7 +108,9 @@
         { $_('selectVideo.link.hintEmpty') }
         <Interpolator text={$_('selectVideo.link.help')} let:data={data}>
             {#if data.name === 'link'}
-                <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
+                <u>
+                    <a href="https://telegra.ph/How-to-watch-movies-from-websites-together-online-03-17" target="_blank" on:click={clickUrlTutorial}>{ data.text }</a>
+                </u>
             {/if}
         </Interpolator>
     {/if}
@@ -130,7 +132,9 @@
         { $_('selectVideo.file.hint') }
         <Interpolator text={$_('selectVideo.file.help')} let:data={data}>
             {#if data.name === 'link'}
-                <a href="https://www.youtube.com/watch?v=FsT7kUaqBdM" target="_blank" on:click={clickDownloadTutorial}>{ data.text }</a>
+                <u>
+                    <a href="https://www.youtube.com/watch?v=FsT7kUaqBdM" target="_blank" on:click={clickDownloadTutorial}>{ data.text }</a>
+                </u>
             {/if}
         </Interpolator>
     </div>
diff --git a/src/components/controls/index.svelte b/src/components/controls/index.svelte
new file mode 100644
index 0000000..1028d35
--- /dev/null
+++ b/src/components/controls/index.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+    import { tick } from 'svelte';
+    import { _ } from 'svelte-i18n';
+    import type { Room } from '../../stores/room';
+    import { blob } from '../../stores/blob';
+    import CardCopyUrl from './card-copy-url.svelte';
+    import CardVideoSelector from './card-video-selector.svelte';
+    import Users from './users/index.svelte';
+    import Interpolator from '../interpolator.svelte';
+    import LanguageSelector from './language-selector.svelte';
+    import { ClickEvent, track } from '../../analytics.svelte';
+    import { randomStr } from '../../utils';
+    import normalizeSource, { type Source } from '../../normalize-source';
+
+    export let room: Room;
+
+    $: users = room?.users;
+    $: url = room?.url;
+    $: highlightVideoSelector = room && !$url && !$blob;
+    $: highlightInvite = room && !highlightVideoSelector && $users?.length < 1;
+
+    $: source = url && $url && normalizeSource($url);
+
+    const updateRoom = function (newRoomId: string) {
+        document.location.hash = `#${newRoomId}`;
+    };
+
+    const generateNewRoom = function () {
+        if (confirm($_('room.generateNewRoom.confirmation'))) {
+            updateRoom(randomStr(6));
+            track(new ClickEvent(room, { 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;
+            }
+        } catch {
+            newRoomId = input;
+        }
+        updateRoom(newRoomId);
+        track(new ClickEvent(room, { target: 'join_another_room' }));
+    };
+
+    const isDesktop = window.matchMedia('(min-width: 960px)').matches;
+
+    const scroll = function (direction: 'top' | 'bottom', smooth: boolean = true) {
+        window.scrollTo({
+            top: direction === 'top' ? 0 : 9999,
+            behavior: smooth ? 'smooth' : 'instant'
+        });
+    };
+
+    let firstTime = true;
+    let lastSource: Source | null | "" = null;
+    let lastUsersCount = 0;
+    $: if (isDesktop) {
+        let shouldScroll: boolean = false;
+        if (firstTime) {
+            if (users) {
+                firstTime = false;
+                shouldScroll = true;
+            }
+        } else {
+            if (lastUsersCount === 0 && $users.length || (lastSource === "" || lastSource === null) !== (source === "" || source === null)) {
+                shouldScroll = true;
+            }
+            lastSource = source;
+            lastUsersCount = $users.length;
+        }
+        shouldScroll && tick().then(() => scroll(source && $users.length ? 'top' : 'bottom', true));
+    }
+</script>
+
+<div class="uk-container uk-grid-collapse uk-grid-match" uk-grid>
+    <div class="uk-width-1-2@m uk-padding-small">
+        <div class="tile uk-width-1-1">
+            <h2 class="uk-card-title uk-text-center" class:gradient-text={highlightVideoSelector}>🍿 { $_('selectVideo.title') }</h2>
+            <CardVideoSelector room={room} />
+        </div>
+    </div>
+    <div class="uk-width-1-2@m uk-padding-small">
+        <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 room={room} highlight={highlightInvite} />
+            </div>
+        </div>
+        <div class="uk-width-1-1 uk-margin-top">
+            <Users users={$users} />
+        </div>
+        <div class="button uk-flex uk-margin-top uk-flex-column">
+            <button class="uk-button uk-button-default glass" on:click={generateNewRoom}>
+                ↻
+                { $_('room.generateNewRoom.button') }
+            </button>
+        </div>
+        <div class="button uk-flex uk-margin-top uk-flex-column">
+            <button class="uk-button uk-button-default glass" on:click={joinAnotherRoom}>
+                { $_('room.joinAnotherRoom') }
+                →
+            </button>
+        </div>
+    </div>
+</div>
+<div class="uk-text-small uk-width-1-1 uk-text-center uk-margin-medium-top">
+    <Interpolator text={$_('feedback.linkText')} let:data={data}>
+        {#if data.name === 'link'}
+            <a href={$_('feedback.link')} target="_blank">{ data.text }</a>
+        {/if}
+    </Interpolator>
+</div>
+<div class="footer uk-text-small uk-text-muted uk-text-center uk-padding">
+    <LanguageSelector />
+    <div class="uk-margin-top">
+        <span>{ $_('poweredBy') }</span>
+        · <a class="uk-text-muted" href="https://svelte.dev" target="_blank">Svelte</a>
+        · <a class="uk-text-muted" href="https://firebase.google.com" target="_blank">Firebase</a>
+        · <a class="uk-text-muted" href="https://vidstack.io" target="_blank">Vidstack</a>
+        · <a class="uk-text-muted" href="https://webtorrent.io" target="_blank">WebTorrent</a>
+        · <a class="uk-text-muted" href="https://getuikit.com" target="_blank">UIkit</a>
+    </div>
+    <div>
+        <a class="uk-text-muted" href="https://asriyan.me" target="_blank">Ed Asriyan</a>
+    </div>
+</div>
+
+<style lang="scss">
+    .uk-card-title {
+        font-weight: bold;;
+    }
+</style>
diff --git a/src/components/language-selector.svelte b/src/components/controls/language-selector.svelte
similarity index 79%
rename from src/components/language-selector.svelte
rename to src/components/controls/language-selector.svelte
index 5bd606b..3e97767 100644
--- a/src/components/language-selector.svelte
+++ b/src/components/controls/language-selector.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { _, locale } from 'svelte-i18n';
-    import { locales } from '../i18n/index';
-    import { track, LocaleChangedEvent } from '../analytics.svelte';
+    import { locales } from '../../i18n/index';
+    import { track, LocaleChangedEvent } from '../../analytics.svelte';
 
     const onLanguageChanged = function () {
         track(new LocaleChangedEvent({ locale: $locale as string }));
diff --git a/src/components/users/index.svelte b/src/components/controls/users/index.svelte
similarity index 84%
rename from src/components/users/index.svelte
rename to src/components/controls/users/index.svelte
index 0ce8c5b..83292d6 100644
--- a/src/components/users/index.svelte
+++ b/src/components/controls/users/index.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
-    import type { User as UserModel } from '../../stores/user';
-    import { me } from '../../stores/me';
+    import type { User as UserModel } from '../../../stores/user';
+    import { me } from '../../../stores/me';
     import User from './user.svelte';
 
     export let users: UserModel[];
diff --git a/src/components/users/user.svelte b/src/components/controls/users/user.svelte
similarity index 97%
rename from src/components/users/user.svelte
rename to src/components/controls/users/user.svelte
index 4fe4108..73b0d01 100644
--- a/src/components/users/user.svelte
+++ b/src/components/controls/users/user.svelte
@@ -2,7 +2,7 @@
     import { _ } from 'svelte-i18n';
 
     export let userName: string;
-    export let canEdit: string;
+    export let canEdit: boolean;
     export let status: string;
 
     const maxLength = 10;
diff --git a/src/components/video-selector-btn.svelte b/src/components/controls/video-selector-btn.svelte
similarity index 81%
rename from src/components/video-selector-btn.svelte
rename to src/components/controls/video-selector-btn.svelte
index 3118f30..c81a6bc 100644
--- a/src/components/video-selector-btn.svelte
+++ b/src/components/controls/video-selector-btn.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
-    import { track, ClickEvent } from '../analytics.svelte';
-    import Loader from './loader.svelte';
-    import { blob } from '../stores/blob';
-    import { sendFile } from '../stores/web-torrent';
-    import normalizeSource, { SourceType } from '../normalize-source';
-    import type { Room } from '../stores/room';
+    import { track, ClickEvent } from '../../analytics.svelte';
+    import Loader from '../loader.svelte';
+    import { blob } from '../../stores/blob';
+    import { sendFile } from '../../stores/web-torrent';
+    import normalizeSource, { SourceType } from '../../normalize-source';
+    import type { Room } from '../../stores/room';
 
     export let forceLocal: boolean = false;
     export let room: Room;
diff --git a/src/components/fullscreen.svelte b/src/components/fullscreen.svelte
new file mode 100644
index 0000000..29aebde
--- /dev/null
+++ b/src/components/fullscreen.svelte
@@ -0,0 +1,39 @@
+
+<script lang="ts">
+  import { _ } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+
+    export let visible: boolean;
+
+    const fullscreen = function () {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            document.documentElement.requestFullscreen();
+        }
+    }
+</script>
+
+{#if visible}
+    <img transition:fade class="fullscreen pointer" on:click={fullscreen} src="https://img.icons8.com/?size=100&id=bVZzgZnZ6TqW&format=png&color=FFFFFF"
+        uk-tooltip={ $_('fullscreen') }
+    />
+{/if}
+
+<style lang="scss">
+    .fullscreen {
+        position: fixed;
+        z-index: 20;
+        bottom: 0.5rem;
+        right: 0.7rem;
+        padding: 3px;
+
+        height: 40px;
+
+        &:hover {
+            opacity: 0.5;
+            background-color: rgba(245, 245, 245, 0.376);
+            border-radius: 29%;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/header.svelte b/src/components/header.svelte
new file mode 100644
index 0000000..e316e36
--- /dev/null
+++ b/src/components/header.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { _ } from 'svelte-i18n';
+    import { fade } from 'svelte/transition';
+
+    export let display: boolean;
+    let isOnline: boolean;
+</script>
+
+<svelte:window bind:online={isOnline}></svelte:window>
+
+{#if display || !isOnline}
+    <h1 class="header glass" class:offline={!isOnline} transition:fade>
+        {#if isOnline}
+            🎬 Watch Together
+        {:else}
+            { $_('noInternet')}
+        {/if}
+    </h1>
+{/if}
+
+<style lang="scss">
+    .header {
+        position: fixed;
+        color: white;
+        width: 100%;
+        left: 0;
+        top: 0;
+        text-align: center;
+        font-family: Avenir Next;
+        font-size: 2rem;
+        padding: 1rem 0;
+        z-index: 200;
+        transition: background-color 500ms ease-in-out;
+        border-left: none;
+    }
+
+    .offline {
+        background-color: red;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/index.svelte b/src/components/index.svelte
index d3abf21..569914b 100644
--- a/src/components/index.svelte
+++ b/src/components/index.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte';
-    import { get } from 'svelte/store';
+    import { onDestroy } from 'svelte';
     import { _ } from 'svelte-i18n';
     import { Room } from '../stores/room';
     import RoomPage from './room.svelte';
 
     export let roomId: string;
-    export let headerHeight: number;
 
     let previousRoom: Room;
     const destroy = async function () {
@@ -14,35 +12,19 @@
     };
     onDestroy(destroy);
 
-    const isDesktop = window.matchMedia('(min-width: 960px)').matches;
-
     const init = async function (roomId: string): Promise<Room> {
         destroy();
         previousRoom = new Room(roomId);
         await previousRoom.init();
-        if (isDesktop && get(previousRoom.url)) {
-            setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 1000);     
-        }
         return previousRoom;
     };
-
-    onMount(() => {
-        isDesktop && scroll('bottom', false);
-    });
-
-    const scroll = function (direction: 'top' | 'bottom', smooth: boolean = true) {
-        window.scrollTo({
-            top: direction === 'top' ? 0 : 9999,
-            behavior: smooth ? 'smooth' : 'instant'
-        });
-    };
 </script>
 
 <div class="uk-flex-1 uk-flex uk-flex-center uk-flex-middle uk-flex-column">
     {#await init(roomId)}
-        <RoomPage roomId={roomId} />
+        <RoomPage roomId={roomId} room={null} />
     {:then room}
-        <RoomPage roomId={roomId} room={room} headerHeight={headerHeight} />
+        <RoomPage roomId={roomId} room={room} />
     {:catch e}
         <h3 class="uk-margin-medium-bottom uk-text-leads">{ $_('error.description') } 💩</h3>
         <button class="uk-button uk-button-default" on:click={() => location.reload()}>{ $_('error.reload') }</button>
diff --git a/src/components/room.svelte b/src/components/room.svelte
index 368fc37..bcec87b 100644
--- a/src/components/room.svelte
+++ b/src/components/room.svelte
@@ -1,177 +1,47 @@
 <script lang="ts">
     import { _ } from 'svelte-i18n';
     import type { Room } from '../stores/room';
-    import CardVideoSelector from './card-video-selector.svelte';
-    import CardCopyUrl from './card-copy-url.svelte';
-    import Interpolator from './interpolator.svelte';
     import VideoPlayer from './video-player/index.svelte';
-    import Users from './users/index.svelte';
-    import { randomStr } from '../utils';
-    import { track, ClickEvent } from '../analytics.svelte';
     import { blob } from '../stores/blob';
     import { MessageType } from '../stores/room/bound-messages';
+    import Header from './header.svelte';
+    import Controls from './controls/index.svelte';
+    import Fullscreen from './fullscreen.svelte';
+    import { cursorActive } from '../stores/cursor';
 
     export let roomId: string;
     export let room: Room;
-    export let headerHeight: number;
-
-    $: users = room?.users;
-
-    $: url = room?.url;
-    $: highlightVideoSelector = room && !$url && !$blob;
-    $: highlightInvite = room && !highlightVideoSelector && $users?.length < 1;
+    let scrollY: number;
+    let clientHeight: number;
 
     $: if (room && $blob) {
         room?.messages.sendMessage('', MessageType.selectedLocalFile);
     }
-
-    const updateRoom = function (newRoomId: string, copyData?: boolean) {
-        document.location.hash = `#${newRoomId}`;
-    };
-
-    const generateNewRoom = function () {
-        if (confirm($_('room.generateNewRoom.confirmation'))) {
-            updateRoom(randomStr(6), true);
-            track(new ClickEvent(room, { 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;
-            }
-        } catch {
-            newRoomId = input;
-        }
-        updateRoom(newRoomId, false);
-        track(new ClickEvent(room, { target: 'join_another_room' }));
-    };
 </script>
 
-<div class="uk-container player uk-width-expand" style:top={headerHeight + 'px'}>
+<svelte:window bind:scrollY={scrollY} bind:innerHeight={clientHeight}></svelte:window>
+
+<Header display={scrollY !== 0}/>
+<div class="player" style:filter={`blur(${Math.round((scrollY / clientHeight) * 10)}px) brightness(${1 - (scrollY / clientHeight) * 0.5})`}>
     <VideoPlayer room={room}/>
 </div>
-<div class="uk-width-expand controls uk-flex uk-flex-middle uk-flex-column">
-    <div class="uk-container uk-grid-collapse uk-grid-match" uk-grid>
-        <div class="uk-width-1-2@m uk-padding-small">
-            <div class:gradient-border={highlightVideoSelector}>
-                <div class="tile uk-width-1-1">
-                    <h2 class="uk-card-title uk-text-center">🍿 { $_('selectVideo.title') }</h2>
-                    <CardVideoSelector room={room} />
-                </div>
-            </div>
-        </div>
-        <div class="uk-width-1-2@m uk-padding-small">
-            <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 room={room} />
-                </div>
-            </div>
-            <div class="uk-width-1-1 uk-margin-top">
-                <Users users={$users} />
-            </div>
-            <div class="button uk-flex uk-margin-top uk-flex-column">
-                <button class="uk-button uk-button-default" on:click={generateNewRoom}>
-                    ↻
-                    { $_('room.generateNewRoom.button') }
-                </button>
-            </div>
-            <div class="button uk-flex uk-margin-top uk-flex-column">
-                <button class="uk-button uk-button-default" on:click={joinAnotherRoom}>
-                    { $_('room.joinAnotherRoom') }
-                    →
-                </button>
-            </div>
-        </div>
-    </div>
-    <div class="uk-text-small uk-width-1-1 uk-text-center uk-margin-medium-top">
-        <Interpolator text={$_('feedback.linkText')} let:data={data}>
-            {#if data.name === 'link'}
-                <a href={$_('feedback.link')} target="_blank">{ data.text }</a>
-            {/if}
-        </Interpolator>
-    </div>
+<div class="controls">
+    <Controls room={room} />
 </div>
+<Fullscreen visible={$cursorActive || !!scrollY} />
 
 <style lang="scss">
     .player {
         position: fixed;
         left: 0;
+        top: 0;
         z-index: 0;
-        height: min(calc(100vw * 9 / 16), 65vh);
-        max-height: min(calc(100vw * 9 / 16), 65vh);
+        height: 100vh;
+        width: 100vw;
     }
 
     .controls {
         z-index: 2;
-        background: radial-gradient(
-            100% 100% at bottom center,
-            #000 80%, transparent 100%
-        );
-        margin-top: min(calc(100vw * 9 / 16), 65vh);
-    }
-
-    @keyframes moveGradient {
-        50% {
-            background-position: 100% 100%;
-            opacity: 60%;
-        }
-    }
-
-    $border-width: 2px;
-    .gradient-border {
-        position: relative;
-        display: flex;
-        z-index: 0;
-    
-        &::after {
-            position: absolute;
-            content: "";
-            top: -$border-width;
-            left: -$border-width;
-            z-index: -1;
-            width: calc(100% + $border-width * 2);
-            height: calc(100% + $border-width * 2);
-            background: linear-gradient(
-                60deg,
-                hsl(224, 85%, 66%),
-                hsl(269, 85%, 66%),
-                hsl(314, 85%, 66%),
-                hsl(359, 85%, 66%),
-                hsl(44, 85%, 66%),
-                hsl(89, 85%, 66%),
-                hsl(134, 85%, 66%),
-                hsl(179, 85%, 66%),
-            );
-            background-size: 300% 300%;
-            background-position: 0 0;
-            border-radius: 1rem;
-            animation: moveGradient 2s linear infinite;
-        }
-    }
-
-    @keyframes hue {
-        from {
-            -webkit-filter: hue-rotate(0deg);
-        }
-        to {
-            -webkit-filter: hue-rotate(-360deg);
-        }
-    }
-
-    .gradient-text {
-        background-image: linear-gradient(92deg, #f35626, #feab3a);
-        background-clip: text;
-        fill-color: transparent;
-        animation: hue 5s infinite linear;
+        margin-top: 100vh;
     }
 </style>
diff --git a/src/components/video-player/index.svelte b/src/components/video-player/index.svelte
index dec39f7..2ca7b0d 100644
--- a/src/components/video-player/index.svelte
+++ b/src/components/video-player/index.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
-    import { derived, type Readable } from 'svelte/store';
     import { _ } from 'svelte-i18n';
     import normalizeSource, { Source, SourceType } from '../../normalize-source';
     import { exploreUrl } from './explore-url';
@@ -11,9 +10,10 @@
     import Inplayer from './inplayer.svelte';
     import { blob } from '../../stores/blob';
     import type { Room } from '../../stores/room';
+    import { cursorActive } from '../../stores/cursor';
     import { MessageType } from '../../stores/room/bound-messages';
-    import { createCursorStore } from './cursor';
     import { PausedEvent, PlayedEvent, SeekedEvent, track, WatchedMinuteEvent } from '../../analytics.svelte';
+    import { sleep } from '../../utils';
 
     export let room: Room;
 
@@ -22,9 +22,7 @@
     $: paused = room?.paused;
     $: source = normalizeSource($url);
 
-    const cursor = createCursorStore(2000);
-
-    $: displayControls = $paused || $cursor;
+    $: displayControls = (source && $paused) || $cursorActive;
     
     let muted = true;
 
@@ -99,9 +97,7 @@
                 on:pause={onPause}
                 on:play={onPlay}
                 on:timeupdate={onTimeUpdate}
-            >
-                <Inplayer room={room} visible={displayControls}/>
-            </VideoPlayerVidstack>
+            />
         {:else}
             {#if source}
                 {#await exploreUrl(source)}
@@ -119,9 +115,7 @@
                             on:pause={onPause}
                             on:play={onPlay}
                             on:timeupdate={onTimeUpdate}
-                        >
-                            <Inplayer room={room} visible={displayControls}/>
-                        </VideoPlayerVidstack>
+                        />
                     {:else if playerType === 'vime'}
                         <VideoPlayerVime source={normalizedSource} bind:paused={$paused} bind:currentTime={$currentTime} bind:muted={muted}/>
                     {:else if playerType === 'magnet'}
@@ -136,25 +130,25 @@
                             on:pause={onPause}
                             on:play={onPlay}
                             on:timeupdate={onTimeUpdate}
-                        >
-                            <Inplayer room={room} visible={displayControls}/>
-                        </VideoPlayerMagnet>
+                        />
                     {/if}
                 {/await}
             {:else}
-                <div class="uk-padding">
-                    { $_('player.placeholder') }
-                </div>
-                <Inplayer room={room} visible={displayControls}/>
+                {#await sleep(1000)}
+                {:then e} 
+                    <VideoPlayerVidstack source={new Source({ type: SourceType.YouTube, src:'youtube/aqz-KE-bpKQ' })} muted={true}/>
+                {/await}
             {/if}
         {/if}
     {/if}
+    {#if room}
+        <Inplayer room={room} visible={displayControls}/>
+    {/if}
 </div>
 
 <style lang="scss">
     .viewer {
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
+        width: 100vw;
+        height: 100vh;
     }
 </style>
diff --git a/src/components/video-player/player-magnet.svelte b/src/components/video-player/player-magnet.svelte
index 75ff8b5..987b808 100644
--- a/src/components/video-player/player-magnet.svelte
+++ b/src/components/video-player/player-magnet.svelte
@@ -6,7 +6,7 @@
     import { getStreamUrl } from '../../stores/web-torrent';
     import { sleep } from '../../utils';
     import VideoPlayerVidstack from './video-player-vidstack.svelte';
-    import VideoSelectorBtn from '../video-selector-btn.svelte';
+    import VideoSelectorBtn from '../controls/video-selector-btn.svelte';
     import type { Room } from '../../stores/room';
 
     export let room: Room;
diff --git a/src/components/video-player/video-player-vidstack.svelte b/src/components/video-player/video-player-vidstack.svelte
index de55864..9c151e0 100644
--- a/src/components/video-player/video-player-vidstack.svelte
+++ b/src/components/video-player/video-player-vidstack.svelte
@@ -80,15 +80,18 @@
     <!-- Layouts -->
     <media-audio-layout />
     <media-video-layout />
-    <media-controls hideOnMouseLeave={true}>
-        <media-controls-group>
-            <slot />
-        </media-controls-group>
-    </media-controls>
+    <!-- <media-controls>
+        
+    </media-controls> -->
 </media-player>
 
 <style lang="scss">
     :global(media-player) {
         border: none !important;
     }
+
+    :global(media-fullscreen-button) {
+        opacity: 0;
+        visibility:hidden;
+    }
 </style>
diff --git a/src/i18n/_.ts b/src/i18n/_.ts
index 5be53a9..84aef22 100644
--- a/src/i18n/_.ts
+++ b/src/i18n/_.ts
@@ -78,6 +78,7 @@ const def = {
     uploadSpeed: 'Upload: {speed}',
     dontRefresh: 'You\'re seeding. Do not refresh the page or close the browser tab',
     peers: 'Peers: {peers}',
+    fullscreen: 'Fullscreen',
     feedback: {
         link: 'https://forms.gle/YY8ypRnJ5b65QWhc6',
         linkText: 'Experience issues? Have any ideas? Please provide your feedback {link}here{/link}', 
diff --git a/src/i18n/fr.ts b/src/i18n/fr.ts
index 999ca91..f19d085 100644
--- a/src/i18n/fr.ts
+++ b/src/i18n/fr.ts
@@ -80,6 +80,7 @@ const fr: TranslatedText = {
     uploadSpeed: 'Téléversement: {speed}',
     dontRefresh: 'Je partage le fichier. Ne pas rafraîchir la page ou fermer l\'onglet du navigateur',
     peers: 'Peers: {peers}',
+    fullscreen: 'plein écran',
     feedback: {
         link: 'https://forms.gle/YY8ypRnJ5b65QWhc6',
         linkText: 'Vous rencontrez des problèmes? Vous avez des idées? Veuillez nous faire part de vos commentaires {link}ici (anglais){/link}', 
diff --git a/src/i18n/ru.ts b/src/i18n/ru.ts
index 72e3d75..8a9d101 100644
--- a/src/i18n/ru.ts
+++ b/src/i18n/ru.ts
@@ -81,6 +81,7 @@ const ru: TranslatedText = {
     uploadSpeed: 'Отдача: {speed}',
     dontRefresh: 'Вы раздаёте видео. Не перезагружайте страницу и не закрывайте вкладку браузера',
     peers: 'Пиры: {peers}',
+    fullscreen: 'Плоноэкранный режим',
     feedback: {
         link: 'https://forms.gle/tXzRyTQimJkHXNuS7',
         linkText: 'Возникли проблемы? Есть идеи? Оставьте обратную свзять {link}тут{/link}', 
diff --git a/src/components/video-player/cursor.ts b/src/stores/cursor.ts
similarity index 60%
rename from src/components/video-player/cursor.ts
rename to src/stores/cursor.ts
index 64f9d5c..7e6343c 100644
--- a/src/components/video-player/cursor.ts
+++ b/src/stores/cursor.ts
@@ -18,7 +18,6 @@ export const createCursorStore = function (timeout: number): Readable<boolean> {
     const events: (keyof WindowEventMap)[] = [
         'mousedown',
         'keydown',
-        'mousedown',
         'mousemove',
     ];
 
@@ -26,22 +25,9 @@ export const createCursorStore = function (timeout: number): Readable<boolean> {
         window.addEventListener(event, resetTimer);
     }
 
-    const destroy = function () {
-        for (const event of events) {
-            window.removeEventListener(event, resetTimer);
-        }
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
-    }
-
     return {
-        subscribe (func) {
-            const unsubscribe = subscribe(func);
-            return function() {
-                unsubscribe();
-                destroy();
-            }
-        }
+        subscribe
     };
 };
+
+export const cursorActive = createCursorStore(5000);
diff --git a/src/stores/room/index.ts b/src/stores/room/index.ts
index b809667..5dd9533 100644
--- a/src/stores/room/index.ts
+++ b/src/stores/room/index.ts
@@ -1,11 +1,10 @@
-import { derived,writable, type Writable, type Readable, get } from 'svelte/store';
+import { writable, type Writable, type Readable, get } 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 normalizeSource, { type Source } from '../../normalize-source';
 import { now } from '../clock';
 import { Destructable } from '../../destructable';
 import { firebaseConfig } from '../../settings';
diff --git a/src/stores/video-example.ts b/src/stores/video-example.ts
index 2ce817f..7a58174 100644
--- a/src/stores/video-example.ts
+++ b/src/stores/video-example.ts
@@ -6,6 +6,7 @@ export const getExampleVideo = function (): string {
 };
 
 export const isExample = function (source: Source): boolean {
+    if (!source) return false;
     let pattern: string;
     switch (source.type) {
         case SourceType.YouTube: