konnosDashboard
LW15Banner.tsx69 lines · main
1'use client'
2
3import Link from 'next/link'
4import { usePathname } from 'next/navigation'
5import { useEffect, useRef } from 'react'
6import { Button } from 'ui/src/components/Button'
7
8import announcement from '../Banners/data.json'
9
10export function LW15Banner() {
11 const pathname = usePathname()
12 const isHomePage = pathname === '/'
13 const isLWPage = pathname?.includes('/launch-week')
14 const videoRef = useRef<HTMLVideoElement>(null)
15
16 // Force play video
17 useEffect(() => {
18 if (!videoRef || !videoRef.current) return
19
20 //open bug since 2017 that you cannot set muted in video element https://github.com/facebook/react/issues/10389
21 videoRef.current.defaultMuted = true
22 videoRef.current.muted = true
23
24 if (!!videoRef && !!videoRef.current) {
25 const promise = videoRef.current.play()
26 videoRef.current.play()
27 if (promise !== undefined) {
28 promise.then(() => {
29 // Auto-play started
30 videoRef.current?.play()
31 })
32 }
33 }
34 }, [videoRef])
35
36 if (isHomePage || isLWPage) return null
37
38 return (
39 <div className="relative w-full p-2 flex items-center group justify-center text-foreground bg-alternative border-b border-muted transition-colors overflow-hidden">
40 <video
41 ref={videoRef}
42 src={`${process.env.NEXT_PUBLIC_BRIVEN_URL}/storage/v1/object/public/images/launch-week/lw15/assets/lw15-galaxy.mp4`}
43 poster={`${process.env.NEXT_PUBLIC_BRIVEN_URL}/storage/v1/object/public/images/launch-week/lw15/assets/lw15-galaxy.png`}
44 autoPlay
45 loop
46 muted
47 playsInline
48 controls={false}
49 className="absolute w-full h-full inset-0 object-cover z-0"
50 style={{
51 opacity: 0.05,
52 }}
53 />
54 <div className="relative z-10 flex items-center justify-center">
55 <div className="w-full flex gap-5 md:gap-10 items-center md:justify-center text-sm">
56 <p className="flex gap-1.5 items-center font-mono uppercase tracking-widest text-sm">
57 {announcement.text}
58 </p>
59 <p className="text-sm hidden sm:block">{announcement.launch}</p>
60 <Button size="tiny" type="default" className="px-2 leading-none! text-xs" asChild>
61 <Link href={announcement.link}>{announcement.cta}</Link>
62 </Button>
63 </div>
64 </div>
65 </div>
66 )
67}
68
69export default LW15Banner