File size: 6,583 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
'use client'
import { useState, useRef, Fragment } from 'react'
import { Dialog, Transition } from '@headlessui/react'
import CONFIG from '../config'
import LazyImage from '@/components/LazyImage'
import { siteConfig } from '@/lib/config'
export default function ModalVideo({
thumb,
thumbWidth,
thumbHeight,
thumbAlt,
video,
videoWidth,
videoHeight
}) {
const [modalOpen, setModalOpen] = useState(false)
const videoRef = useRef(null)
return (
<div>
{/* Video thumbnail */}
<div>
<div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
<div className="flex flex-col justify-center">
<LazyImage src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
<svg className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto" width="768" height="432" viewBox="0 0 768 432" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="hero-ill-a">
<stop stopColor="#FFF" offset="0%" />
<stop stopColor="#EAEAEA" offset="77.402%" />
<stop stopColor="#DFDFDF" offset="100%" />
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="99.24%" id="hero-ill-b">
<stop stopColor="#FFF" offset="0%" />
<stop stopColor="#EAEAEA" offset="48.57%" />
<stop stopColor="#DFDFDF" stopOpacity="0" offset="100%" />
</linearGradient>
<radialGradient cx="21.152%" cy="86.063%" fx="21.152%" fy="86.063%" r="79.941%" id="hero-ill-e">
<stop stopColor="#4FD1C5" offset="0%" />
<stop stopColor="#81E6D9" offset="25.871%" />
<stop stopColor="#338CF5" offset="100%" />
</radialGradient>
<circle id="hero-ill-d" cx="384" cy="216" r="64" />
</defs>
<g fill="none" fillRule="evenodd">
<circle fillOpacity=".04" fill="url(#hero-ill-a)" cx="384" cy="216" r="128" />
<circle fillOpacity=".16" fill="url(#hero-ill-b)" cx="384" cy="216" r="96" />
{/* <g fillRule="nonzero">
<use fill="#000" xlinkHref="#hero-ill-d" />
<use fill="url(#hero-ill-e)" xlinkHref="#hero-ill-d" />
</g> */}
</g>
</svg>
</div>
<button className="absolute top-full flex items-center transform -translate-y-1/2 bg-white rounded-full font-medium group p-4 shadow-lg" onClick={() => { setModalOpen(true) }}>
<svg className="w-6 h-6 fill-current text-gray-400 group-hover:text-blue-600 shrink-0" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0 2C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12z" />
<path d="M10 17l6-5-6-5z" />
</svg>
<span className="ml-3">{siteConfig('LANDING_HERO_VIDEO_TIPS', null, CONFIG)}</span>
</button>
</div>
</div>
{/* End: Video thumbnail */}
<Transition show={modalOpen} as={Fragment} afterEnter={() => videoRef.current?.play()}>
<Dialog initialFocus={videoRef} onClose={() => setModalOpen(false)}>
{/* Modal backdrop */}
<Transition.Child
className="fixed inset-0 z-[99999] bg-black bg-opacity-75 transition-opacity"
enter="transition ease-out duration-200"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition ease-out duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
aria-hidden="true"
/>
{/* End: Modal backdrop */}
{/* Modal dialog */}
<Transition.Child
className="fixed inset-0 z-[99999] overflow-hidden flex items-center justify-center transform px-4 sm:px-6"
enter="transition ease-out duration-200"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ttransition ease-out duration-200"
leaveFrom="oopacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<div className="max-w-6xl mx-auto h-full flex items-center">
<Dialog.Panel className="w-full max-h-full aspect-video bg-black overflow-hidden">
{/* <video ref={videoRef} width={videoWidth} height={videoHeight} loop controls>
<source src={video} type="video/mp4" />
Your browser does not support the video tag.
</video> */}
<div>
<iframe
className="video-iframe aspect-video w-screen md:w-[800px] mx-auto"
src={siteConfig('LANDING_HERO_VIDEO_IFRAME', null, CONFIG)}
scrolling="no"
border="0"
frameBorder="no"
allowfullscreen="true"
></iframe>
</div>
</Dialog.Panel>
</div>
</Transition.Child>
{/* End: Modal dialog */}
</Dialog>
</Transition>
</div>
)
}
|