Skip to content

Commit

Permalink
Update layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@ed-asriyan
ed-asriyan committed Feb 23, 2024
1 parent ab71803 commit bb05df3
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 65 deletions.
139 changes: 74 additions & 65 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,75 +52,85 @@
<Loader/>
</div>
{:else}
<div class="uk-flex uk-flex-column">
<div class="uk-section uk-section-muted uk-section-small" transition:fade>
<div class="uk-container">
<h1 class="uk-text-center uk-heading-medium uk-text-bold title uk-margin-top" contenteditable="true" bind:innerHTML={$localRoom.name}></h1>
<div class="uk-text-center uk-text-muted" style="margin-top: -30px">Watch movies together anytime, anywhere</div>
<hr style="border-color: black" class="uk-margin" />
<div class="uk-container uk-container-small">
<h3>1. Select a video</h3>
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<span>Select movie source:</span>
<li class:uk-active={!$localRoom.isLocalMode}>
<a on:click={() => $localRoom.isLocalMode = false} class="uk-button-default">Online link</a>
</li>
<span>or</span>
<li class:uk-active={$localRoom.isLocalMode}>
<a on:click={() => $localRoom.isLocalMode = true} class="uk-button-default">Local file</a>
</li>
</ul>
{#if $localRoom.isLocalMode}
<div class="uk-section uk-section-muted uk-section-small" transition:fade>
<div class="uk-container">
<h1 class="uk-text-center uk-heading-medium uk-text-bold title uk-margin-top" contenteditable="true" bind:innerHTML={$localRoom.name}></h1>
<div class="uk-text-center uk-text-muted" style="margin-top: -30px">Watch movies together anytime, anywhere</div>
<hr style="border-color: black" class="uk-margin" />
<div class="uk-container uk-container-small">
<h3>1. Select a video</h3>
<ul class="uk-subnav uk-subnav-pill" uk-switcher>
<span>Select movie source:</span>
<li class:uk-active={!$localRoom.isLocalMode}>
<a on:click={() => $localRoom.isLocalMode = false} class="uk-button-default">Online link</a>
</li>
<span>or</span>
<li class:uk-active={$localRoom.isLocalMode}>
<a on:click={() => $localRoom.isLocalMode = true} class="uk-button-default">Local file</a>
</li>
</ul>
{#if $localRoom.isLocalMode}
<div class="uk-margin-bottom">
You all downloaded a movie already!? Well done! Everyone should select the same video file, please.
</div>
<VideoSelector bind:videoUri={blobUrl} bind:fileName={fileName}/>
{:else}
<div class="uk-margin-bottom">
Insert a link to YouTube, Vimeo, HLS playlist, video or audio file. The input is synchronized with everyone in the room.
</div>
<input
bind:value={$localRoom.url}
class="uk-input"
class:uk-form-danger={!playUrl}
placeholder="Video URL"
/>
{/if}
<VideoSelector bind:videoUri={blobUrl} bind:fileName={fileName}/>
{:else}
<div class="uk-margin-bottom">
Insert a link to YouTube, Vimeo, HLS playlist, video or audio file. The input is synchronized with everyone in the room.
</div>
<input
bind:value={$localRoom.url}
class="uk-input"
class:uk-form-danger={!playUrl}
placeholder="Video URL"
/>
{/if}
</div>
</div>
<div class="uk-section uk-section-primary uk-section-small" transition:fade>
<div class="uk-container uk-container-small">
<h3>2. Share the link to this room with who you want to watch a movie with</h3>

<div class="uk-text-center uk-margin-top">
<input style="width: 100%;" class="pointer uk-button uk-button-link uk-text-lowercase" uk-tooltip="Click to copy" on:click={copyUrl} value={$page.url} readonly/>
<div class="uk-text-muted uk-text-small">Click the link to copy it to the clipboard</div>
</div>
<div class="uk-section uk-section-primary uk-section-small" transition:fade>
<div class="uk-container uk-container-small">
<h3>2. Share the link to this room with who you want to watch a movie with</h3>

<div class="uk-text-center uk-margin-top">
<div
class="pointer uk-button uk-button-link uk-text-lowercase uk-text-center"
uk-tooltip="Click to copy"
on:click={copyUrl}
>
{$page.url}
</div>
<div class="uk-text-muted uk-text-small">Click the link to copy it to the clipboard</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-section-small uk-flex-1 watch">
<div class="uk-container uk-container-small">
<h3>3. Watch the movie together!</h3>
<div class="uk-margin">
Playback, time, and video scrolling are synchronized with everyone who has the page open.
</div>
<div class="uk-text-center">
{#if playUrl}
<VideoView bind:paused={$localRoom.paused} bind:time={$localRoom.time} url={playUrl}/>
{:else}
<div class="stub uk-text-small">
Video player will appear here when you insert a link or select a video
</div>
{/if}
<div class="uk-text-small uk-text-muted uk-margin-top">
<span>Powered by</span>
· <a class="uk-text-muted" href="https://svelte.dev" target="_blank">Svelte</a>
· <a class="uk-text-muted" href="http://firebase.google.com" target="_blank">Firebase</a>
· <a class="uk-text-muted" href="http://vidstack.io" target="_blank">Vidstack</a>
· <a class="uk-text-muted" href="https://getuikit.com" target="_blank">UIkit</a>
</div>
<div class="uk-section uk-section-secondary uk-section-small window-height uk-flex uk-flex-column ">
<div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column">
<h3>3. Watch the movie together!</h3>
<div class="uk-margin">
Playback, time, and video scrolling are synchronized with everyone who has the page open.
</div>
<div class="uk-flex-1 uk-flex uk-flex-center uk-flex-column uk-flex-center uk-flex-middle">
{#if playUrl}
<VideoView bind:paused={$localRoom.paused} bind:time={$localRoom.time} url={playUrl}/>
{:else}
<div class="uk-text-small uk-flex uk-flex-center uk-flex-column">
Video player will appear here when you insert a link or select a video
</div>
{/if}
</div>
<div class="uk-text-small uk-text-muted uk-text-center uk-margin-top">
<div>
<span>Powered by</span>
· <a class="uk-text-muted" href="https://svelte.dev" target="_blank">Svelte</a>
· <a class="uk-text-muted" href="http://firebase.google.com" target="_blank">Firebase</a>
· <a class="uk-text-muted" href="http://vidstack.io" target="_blank">Vidstack</a>
· <a class="uk-text-muted" href="https://getuikit.com" target="_blank">UIkit</a>
<!-- <br/><a class="uk-text-muted" href="https://asriyan.me" target="_blank">Ed Asriyan</a> -->
</div>
<!-- <div class="uk-margin-top"> -->
<!-- <a class="uk-text-muted" href="https://asriyan.me" target="_blank">Ed Asriyan</a> -->
<!-- </div> -->
</div>
</div>
</div>
Expand All @@ -139,11 +149,6 @@
cursor: pointer;
}
.stub {
line-height: 20rem;
vertical-align: center;
}
.loader {
position: absolute;
height: 100vh;
Expand All @@ -152,8 +157,12 @@
place-items: center;
}
.watch {
height: 100vh;
.window-height {
min-height: 100vh;
}
.window-width {
min-width: 100vw;;
}
.uk-subnav-pill > .uk-active > a {
Expand Down
12 changes: 12 additions & 0 deletions src/routes/video-view.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@

{#if isBlob}
<video
class="player"
src={url}
autoplay
playsInline
Expand All @@ -56,6 +57,7 @@
{/if}

<media-player
class="player"
class:uk-invisible={isBlob}
bind:this={player}
src={url}
Expand All @@ -71,3 +73,13 @@
<media-audio-layout />
<media-video-layout />
</media-player>

<style lang="scss">
.player {
width: 100vw;
height: 100vh;
max-height: 70vh;
max-width: 80vw;
min-height: 20rem;
}
</style>

0 comments on commit bb05df3

Please sign in to comment.