mirror of
https://github.com/onsonr/sonr.git
synced 2025-03-10 13:07:09 +00:00
feat: Add intro video modal component
This commit is contained in:
parent
0d12487c65
commit
cf839c9491
@ -1,7 +1,8 @@
|
||||
package modals
|
||||
|
||||
templ IntroVideo() {
|
||||
<div x-data="{
|
||||
<div
|
||||
x-data="{
|
||||
sources: {
|
||||
mp4: 'https://cdn.devdojo.com/pines/videos/coast.mp4',
|
||||
webm: 'https://cdn.devdojo.com/pines/videos/coast.webm',
|
||||
@ -144,7 +145,8 @@ fullscreen = !!document.fullscreenElement;
|
||||
x-ref="videoContainer"
|
||||
@mouseleave="mouseleave=true"
|
||||
@mousemove="mousemoveVideo"
|
||||
class="relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video">
|
||||
class="relative h-[360px] min-w-[640px] overflow-hidden rounded-md aspect-video"
|
||||
>
|
||||
<video
|
||||
x-ref="player"
|
||||
@loadedmetadata="metaDataLoaded"
|
||||
@ -167,7 +169,8 @@ x-transition:enter="transition ease-out duration-1000"
|
||||
x-transition:enter-start="scale-50 opacity-100"
|
||||
x-transition:enter-end="scale-100 opacity-0"
|
||||
class="absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20"
|
||||
x-cloak>
|
||||
x-cloak
|
||||
>
|
||||
<svg class="w-10 h-10 translate-x-0.5 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z" fill="currentColor"></path></svg>
|
||||
</div>
|
||||
<div
|
||||
@ -176,7 +179,8 @@ x-transition:enter="transition ease-out duration-1000"
|
||||
x-transition:enter-start="scale-50 opacity-100"
|
||||
x-transition:enter-end="scale-100 opacity-0"
|
||||
class="absolute z-20 flex items-center justify-center w-24 h-24 bg-blue-600 rounded-full opacity-0 bg-opacity-20"
|
||||
x-cloak>
|
||||
x-cloak
|
||||
>
|
||||
<svg class="w-10 h-10 text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C8.55228 3 9 3.44772 9 4L9 20C9 20.5523 8.55228 21 8 21C7.44772 21 7 20.5523 7 20L7 4C7 3.44772 7.44772 3 8 3ZM16 3C16.5523 3 17 3.44772 17 4V20C17 20.5523 16.5523 21 16 21C15.4477 21 15 20.5523 15 20V4C15 3.44772 15.4477 3 16 3Z" fill="currentColor"></path></svg>
|
||||
</div>
|
||||
<div class="absolute z-10 duration-300 ease-out group-hover:scale-110">
|
||||
@ -188,30 +192,37 @@ x-transition:enter-end="opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-out duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
class="flex items-center justify-center w-12 h-12 text-white duration-150 ease-out bg-blue-600 rounded-full cursor-pointer bg-opacity-80" type="button">
|
||||
class="flex items-center justify-center w-12 h-12 text-white duration-150 ease-out bg-blue-600 rounded-full cursor-pointer bg-opacity-80"
|
||||
type="button"
|
||||
>
|
||||
<svg class="w-5 h-5 translate-x-px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.42737 3.41611C6.46665 2.24586 4.00008 3.67188 4.00007 5.9427L4 18.0572C3.99999 20.329 6.46837 21.7549 8.42907 20.5828L18.5698 14.5207C20.4775 13.3802 20.4766 10.6076 18.568 9.46853L8.42737 3.41611Z" fill="currentColor" x-cloak></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="controls"
|
||||
<div
|
||||
x-show="controls"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-full"
|
||||
class="absolute top-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-black to-transparent" x-cloak>
|
||||
</div>
|
||||
<div x-show="controls"
|
||||
class="absolute top-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-black to-transparent"
|
||||
x-cloak
|
||||
></div>
|
||||
<div
|
||||
x-show="controls"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="translate-y-full"
|
||||
x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="translate-y-full"
|
||||
class="absolute bottom-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-transparent to-black" x-cloak>
|
||||
</div>
|
||||
<div x-show="controls"
|
||||
class="absolute bottom-0 left-0 z-20 w-full h-1/4 opacity-20 bg-gradient-to-b from-transparent to-black"
|
||||
x-cloak
|
||||
></div>
|
||||
<div
|
||||
x-show="controls"
|
||||
@click="resetControlsTimeout"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="-translate-y-full"
|
||||
@ -219,25 +230,32 @@ x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="-translate-y-full"
|
||||
class="absolute top-0 left-0 z-40 flex items-center w-full h-12 text-white" x-cloak>
|
||||
class="absolute top-0 left-0 z-40 flex items-center w-full h-12 text-white"
|
||||
x-cloak
|
||||
>
|
||||
<div class="absolute right-0 top-0 mr-0.5 mt-0.5 flex items-center">
|
||||
<div class="flex items-center h-auto group">
|
||||
<button @click="toggleMute()" type="button" class="flex items-center justify-center w-6 h-auto duration-150 ease-out opacity-80 hover:opacity-100">
|
||||
<svg x-show="!muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z" /><path d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z" /></svg>
|
||||
<svg x-show="muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z" /></svg>
|
||||
<svg x-show="!muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z"></path><path d="M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z"></path></svg>
|
||||
<svg x-show="muted" class="w-[18px] h-[18px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" x-cloak><path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM17.78 9.22a.75.75 0 10-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 001.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 101.06-1.06L20.56 12l1.72-1.72a.75.75 0 00-1.06-1.06l-1.72 1.72-1.72-1.72z"></path></svg>
|
||||
</button>
|
||||
<div class="relative h-1.5 w-0 mx-0 group-hover:mx-1 rounded-full group-hover:w-12 invisible group-hover:visible w-0 ease-out duration-300">
|
||||
<div class="relative h-1.5 mx-0 group-hover:mx-1 rounded-full group-hover:w-12 invisible group-hover:visible w-0 ease-out duration-300">
|
||||
<input
|
||||
x-ref="volume"
|
||||
@input="updateVolume(event)"
|
||||
type="range" min="0" max="1" :value="volume" step="0.01"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
:value="volume"
|
||||
step="0.01"
|
||||
class="w-full h-full appearance-none flex items-center cursor-pointer bg-transparent z-30
|
||||
[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:w-2 [&::-webkit-slider-thumb]:h-2 [&::-webkit-slider-thumb]:appearance-none
|
||||
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:w-2 [&::-moz-range-thumb]:h-2 [&::-moz-range-thumb]:appearance-none
|
||||
[&::-ms-thumb]:bg-white [&::-ms-thumb]:rounded-full [&::-ms-thumb]:border-0 [&::-ms-thumb]:w-2 [&::-ms-thumb]:h-2 [&::-ms-thumb]:appearance-none
|
||||
[&::-webkit-slider-runnable-track]:bg-white [&::-webkit-slider-runnable-track]:bg-opacity-30 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:overflow-hidden [&::-moz-range-track]:bg-neutral-200 [&::-moz-range-track]:rounded-full [&::-ms-track]:bg-neutral-200 [&::-ms-track]:rounded-full
|
||||
[&::-moz-range-progress]:bg-white [&::-moz-range-progress]:bg-opacity-80 [&::-moz-range-progress]:rounded-full [&::-ms-fill-lower]:bg-white [&::-ms-fill-lower]:bg-opacity-80 [&::-ms-fill-lower]:rounded-full [&::-webkit-slider-thumb]:shadow-[-995px_0px_0px_990px_rgba(255,_255,_255,_0.8)]
|
||||
">
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button x-ref="fullscreenButton" @click="handleFullscreen" class="flex items-center justify-center w-10 h-10 duration-150 ease-out scale-90 opacity-80 hover:opacity-100 hover:scale-100" type="button">
|
||||
@ -245,7 +263,8 @@ class="w-full h-full appearance-none flex items-center cursor-pointer bg-transpa
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="controls"
|
||||
<div
|
||||
x-show="controls"
|
||||
@click="resetControlsTimeout"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="translate-y-full"
|
||||
@ -253,21 +272,28 @@ x-transition:enter-end="translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-300"
|
||||
x-transition:leave-start="translate-y-0"
|
||||
x-transition:leave-end="translate-y-full"
|
||||
class="absolute bottom-0 left-0 z-40 w-full h-12" x-cloak>
|
||||
class="absolute bottom-0 left-0 z-40 w-full h-12"
|
||||
x-cloak
|
||||
>
|
||||
<div class="absolute bottom-0 z-30 w-full px-2.5 -translate-y-8">
|
||||
<div class="relative w-full h-1 rounded-full">
|
||||
<input
|
||||
x-ref="videoProgress"
|
||||
@click="timelineClicked"
|
||||
@input="timelineSeek(event)"
|
||||
type="range" min="0" max="100" value="0" step="any"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value="0"
|
||||
step="any"
|
||||
class="w-full h-full appearance-none flex items-center cursor-pointer bg-transparent z-30
|
||||
[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:w-1.5 [&::-webkit-slider-thumb]:h-1.5 [&::-webkit-slider-thumb]:appearance-none
|
||||
[&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:w-1.5 [&::-moz-range-thumb]:h-1.5 [&::-moz-range-thumb]:appearance-none
|
||||
[&::-ms-thumb]:bg-white [&::-ms-thumb]:rounded-full [&::-ms-thumb]:border-0 [&::-ms-thumb]:w-1.5 [&::-ms-thumb]:h-1.5 [&::-ms-thumb]:appearance-none
|
||||
[&::-webkit-slider-runnable-track]:bg-white [&::-webkit-slider-runnable-track]:bg-opacity-30 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:overflow-hidden [&::-moz-range-track]:bg-neutral-200 [&::-moz-range-track]:rounded-full [&::-ms-track]:bg-neutral-200 [&::-ms-track]:rounded-full
|
||||
[&::-moz-range-progress]:bg-blue-600 [&::-moz-range-progress]:rounded-full [&::-ms-fill-lower]:bg-blue-600 [&::-ms-fill-lower]:rounded-full [&::-webkit-slider-thumb]:shadow-[-995px_0px_0px_990px_#2463eb]
|
||||
">
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 left-0 z-20 flex items-center w-full h-8 text-white">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user