-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d528edc
commit fd4c803
Showing
21 changed files
with
325 additions
and
293 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| <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 from '../../normalize-source'; | ||
| export let room: Room; | ||
| $: users = room?.users; | ||
| $: url = room?.url; | ||
| $: highlightVideoSelector = room && !$url && !$blob; | ||
| $: highlightInvite = room && !highlightVideoSelector && $users?.length < 1; | ||
| 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, false); | ||
| track(new ClickEvent(room, { target: 'join_another_room' })); | ||
| }; | ||
| const isDesktop = window.matchMedia('(min-width: 960px)').matches; | ||
| $: if (isDesktop && url) { | ||
| tick().then(() => scroll(normalizeSource($url) ? 'top' : 'bottom', true)); | ||
| } | ||
| const scroll = function (direction: 'top' | 'bottom', smooth: boolean = true) { | ||
| window.scrollTo({ | ||
| top: direction === 'top' ? 0 : 9999, | ||
| behavior: smooth ? 'smooth' : 'instant' | ||
| }); | ||
| }; | ||
| </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} /> | ||
| </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"> | ||
| @keyframes moveGradient { | ||
| 50% { | ||
| background-position: 100% 100%; | ||
| opacity: 60%; | ||
| } | ||
| } | ||
| @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; | ||
| } | ||
| .uk-card-title { | ||
| font-weight: bold;; | ||
| } | ||
| </style> |
4 changes: 2 additions & 2 deletions
4
src/components/language-selector.svelte → ...ponents/controls/language-selector.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
src/components/users/index.svelte → src/components/controls/users/index.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 6 additions & 6 deletions
12
src/components/video-selector-btn.svelte → ...onents/controls/video-selector-btn.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.