https://airfocus.com/4c69a048c60e72183e90c1ad53e5c294efff4a3f-24d8280d309c3109eef7.js

1"use strict";(self.webpackChunkairfocus=self.webpackChunkairfocus||[]).push([[3007],{1335:function(e,t,r){var n=r(3769),a=r(6540),i=r(196),s=r(2358),o=r(4033),l=r(5004),c=r(4348),u=r(3036),d=r(8117),p=r(5557),m=r(6661),h=r(2982);const f=e=>`${Math.floor(e/60)}:${Math.floor(e%60).toString().padStart(2,"0")}`;t.A=({id:e,srcType:t,ratio:r=16/9,className:n,autoPlay:i=!1,loop:s=!1,thumbnail:S,playInView:F=!1,loopDelay:$,showControls:H=!0,"aria-label":C})=>{const T=a.useRef(null),N=a.useRef(null),[P,R]=a.useState(!1),[q,M]=a.useState(!1),[I,j]=a.useState(!1),[z,B]=a.useState(!1),[D,U]=a.useState(!1),[V,G]=a.useState(0),[J,K]=a.useState(0),[O,Q]=a.useState(!1),W=a.useRef(null),X=a.useCallback(()=>{W.current&&clearTimeout(W.current),W.current=setTimeout(()=>Q(!1),2e3)},[]),Z=a.useCallback(()=>{Q(!0),X()},[X]);a.useEffect(()=>()=>{W.current&&clearTimeout(W.current)},[]),a.useEffect(()=>{H&&D&&(q?X():(W.current&&clearTimeout(W.current),Q(!0)))},[q,H,D,X]),a.useEffect(()=>{const e=()=>{if(!P&&T.current){const e=T.current.getBoundingClientRect();e.top<window.innerHeight&&e.bottom-100<window.innerHeight&&R(!0)}};return F&&document.addEventListener("scroll",e),()=>{document.removeEventListener("scroll",e)}},[F]),a.useEffect(()=>{const e=()=>{setTimeout(()=>{var e;null===(e=T.current)||void 0===e||e.play().catch(e=>{console.error("Error attempting to loop video:",e)})},$)};return T.current&&s&&$&&T.current.addEventListener("ended",e),()=>{var t;null===(t=T.current)||void 0===t||t.removeEventListener("ended",e)}},[$,s]),a.useEffect(()=>{T.current&&i&&(!F||F&&P)&&T.current.play().catch(e=>{console.error("Error attempting to autoplay video:",e)})},[i,F,P]),a.useEffect(()=>{const e=T.current;if(!e||!H)return;const t=()=>{M(!0),U(!0)},r=()=>M(!1);return e.addEventListener("play",t),e.addEventListener("pause",r),()=>{e.removeEventListener("play",t),e.removeEventListener("pause",r)}},[H]),a.useEffect(()=>{const e=T.current;if(!e||!H)return;const t=()=>G(e.currentTime),r=()=>K(e.duration);return e.readyState>=1&&K(e.duration),e.addEventListener("timeupdate",t),e.addEventListener("loadedmetadata",r),()=>{e.removeEventListener("timeupdate",t),e.removeEventListener("loadedmetadata",r)}},[H]),a.useEffect(()=>{if(!H)return;const e=T.current,t=()=>{var e;const t=document,r=!!(null!==(e=t.fullscreenElement)&&void 0!==e?e:t.webkitFullscreenElement);B(r)},r=()=>B(!0),n=()=>B(!1);return document.addEventListener("fullscreenchange",t),document.addEventListener("webkitfullscreenchange",t),null==e||e.addEventListener("webkitbeginfullscreen",r),null==e||e.addEventListener("webkitendfullscreen",n),()=>{document.removeEventListener("fullscreenchange",t),document.removeEventListener("webkitfullscreenchange",t),null==e||e.removeEventListener("webkitbeginfullscreen",r),null==e||e.removeEventListener("webkitendfullscreen",n)}},[H]);const _=()=>{const e=T.current;e&&(e.paused?e.play().catch(e=>{console.error("Error attempting to play video:",e)}):e.pause())};return(0,h.Y)("div",{id:e,ref:N,css:[b,H&&!D&&v,H&&D&&g,"",""],className:n,onClick:H?D?()=>{O&&_(),Z()}:()=>{const e=T.current;e&&(H&&(e.muted=!1,j(!1)),e.play().catch(e=>{console.error("Error attempting to play video:",e)}))}:void 0,onMouseMove:H&&D?Z:void 0,"aria-hidden":!H||void 0},(0,h.Y)("div",{style:{width:"100%",paddingBottom:`${(1/r*100).toFixed(4)}%`}}),(0,h.Y)("video",{autoPlay:i&&(!F||F&&P),playsInline:!0,loop:s&&!$,muted:I,css:y,ref:T,poster:S,"aria-label":C},t.map(({src:e,type:t},r)=>(0,h.Y)("source",{key:r,src:e,type:t})),"Your browser does not support the video tag."),H&&!D&&(0,h.Y)(o.$n,{type:"unstyled",className:"start-playing-button",cssStyles:w,"aria-label":"Play"},(0,h.Y)(p.A,{className:"play-icon",css:k,"aria-hidden":!0})),H&&D&&(0,h.Y)(o.$n,{type:"unstyled",className:"play-pause-overlay",cssStyles:E,style:O?{display:"flex",opacity:1,pointerEvents:"auto"}:void 0,tabIndex:O?0:-1,"aria-label":q?"Pause":"Play"},q?(0,h.Y)(d.A,{className:"pause-icon",css:k,"aria-hidden":!0}):(0,h.Y)(p.A,{className:"play-icon",css:k,"aria-hidden":!0})),H&&D&&(0,h.Y)("div",{className:"video-controls",css:x,style:O?{opacity:1,pointerEvents:"auto"}:void 0,onClick:e=>{e.stopPropagation(),Z()}},(0,h.Y)(o.$n,{type:"unstyled",cssStyles:L,onClick:_,"aria-label":q?"Pause":"Play"},q?(0,h.Y)(d.A,{"aria-hidden":!0}):(0,h.Y)(p.A,{className:"play-icon","aria-hidden":!0})),(0,h.Y)("span",{css:A},f(V)," / ",f(J)),(0,h.Y)("input",{type:"range",css:Y,min:0,max:J||100,step:.

101,value:V,onChange:e=>{const t=T.current;if(!t)return;const r=Number(e.target.value);t.currentTime=r,G(r)},style:{"--progress":(J?V/J*100:0)+"%"},"aria-label":"Seek"}),(0,h.Y)(o.$n,{type:"unstyled",cssStyles:L,onClick:()=>{const e=T.current;e&&(e.muted=!e.muted,j(e.muted))},"aria-label":I?"Unmute":"Mute"},I?(0,h.Y)(u.A,{"aria-hidden":!0}):(0,h.Y)(m.A,{"aria-hidden":!0})),(0,h.Y)(o.$n,{type:"unstyled",cssStyles:L,onClick:()=>{const e=N.current,t=T.current;if(e)if(z){const e=document;document.exitFullscreen?document.exitFullscreen().catch(e=>{console.error("Error exiting fullscreen:",e)}):e.webkitExitFullscreen?e.webkitExitFullscreen():t&&t.webkitExitFullscreen&&t.webkitExitFullscreen()}else e.requestFullscreen?e.requestFullscreen().catch(e=>{console.error("Error requesting fullscreen:",e)}):e.webkitRequestFullscreen?e.webkitRequestFullscreen():t&&t.webkitEnterFullscreen&&t.webkitEnterFullscreen()},"aria-label":z?"Exit fullscreen":"Enter fullscreen"},z?(0,h.Y)(l.A,{"aria-hidden":!0}):(0,h.Y)(c.A,{"aria-hidden":!0}))))};const b=n.AH`
2  position: relative;
3  overflow: hidden;
4`,v=n.AH`
5  cursor: pointer;
6
7  &:hover button {
8    transform: translate(-50%, -50%) scale(1.12);
9    background: rgba(0, 0, 0, 0.35);
10  }
11`,g=n.AH`
12  &:focus-within .video-controls {
13    opacity: 1;
14  }
15`,y=n.AH`
16  position: absolute;
17  left: 0;
18  top: 0;
19  width: 100%;
20  height: 100%;
21`,w=n.AH`
22  position: absolute;
23  top: 50%;
24  left: 50%;
25  transform: translate(-50%, -50%);
26  width: 4rem;
27  height: 4rem;
28  border-radius: 50%;
29  border: 2px solid ${s.T.white};
30  background: rgba(0, 0, 0, 0.2);
31  backdrop-filter: blur(2px);
32  display: flex;
33  align-items: center;
34  justify-content: center;
35  transition:
36    transform 0.25s ease,
37    background 0.2s ease;
38
39  &:hover {
40    transform: translate(-50%, -50%) scale(1.05);
41    background: rgba(0, 0, 0, 0.35);
42  }
43
44  &:focus-visible {
45    outline: 2px solid ${s.T.white};
46    outline-offset: 2px;
47    box-shadow: 0 0 0 6px ${s.T.black};
48  }
49
50  @media screen and (max-width: ${i.fi.medium}px) {
51    width: 3rem;
52    height: 3rem;
53  }
54`,E=n.AH`
55  ${w}
56  opacity: 0;
57  pointer-events: none;
58
59  @media (hover: none) {
60    display: none;
61  }
62`,k=n.AH`
63  &.play-icon {
64    width: 1.5rem;
65    height: 1.5rem;
66    margin-left: 0.15rem;
67  }
68
69  &.pause-icon {
70    width: 2rem;
71    height: 2rem;
72  }
73
74  @media screen and (max-width: ${i.fi.medium}px) {
75    &.pause-icon {
76      width: 1.5rem;
77      height: 1.5rem;
78    }
79
80    &.play-icon {
81      width: 1rem;
82      height: 1rem;
83    }
84  }
85`,x=n.AH`
86  position: absolute;
87  bottom: 0;
88  left: 0;
89  right: 0;
90  display: flex;
91  align-items: center;
92  gap: 0.5rem;
93  padding: 0.75rem 0.75rem 0.6rem;
94  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
95  opacity: 0;
96  pointer-events: none;
97  transition: opacity 0.2s ease;
98`,Y=n.AH`
99  flex: 1;
100  -webkit-appearance: none;
101  appearance: none;
102  height: 4px;
103  border-radius: 2px;
104  background: linear-gradient(
105    to right,
106    rgba(255, 255, 255, 0.9) var(--progress),
107    rgba(255, 255, 255, 0.3) var(--progress)
108  );
109  cursor: pointer;
110  outline: none;
111
112  &::-webkit-slider-thumb {
113    -webkit-appearance: none;
114    appearance: none;
115    width: 12px;
116    height: 12px;
117    border-radius: 50%;
118    background: white;
119    cursor: pointer;
120  }
121
122  &::-moz-range-thumb {
123    width: 12px;
124    height: 12px;
125    border-radius: 50%;
126    background: white;
127    border: none;
128    cursor: pointer;
129  }
130
131  &:focus-visible {
132    outline: 2px solid white;
133    outline-offset: 2px;
134  }
135`,A=n.AH`
136  color: white;
137  font-size: 0.8rem;
138  font-variant-numeric: tabular-nums;
139  white-space: nowrap;
140  user-select: none;
141  border: none;
142`,L=n.AH`
143  display: flex;
144  align-items: center;
145  justify-content: center;
146  width: 2rem;
147  height: 2rem;
148  border-radius: 0.25rem;
149  color: white;
150  transition: background 0.15s ease;
151
152  svg {
153    width: 1.25rem;
154    height: 1.25rem;
155    flex-shrink: 0;
156
157    &.play-icon {
158      width: 0.9rem;
159      height: 0.9rem;
160    }
161  }
162
163  &:hover {
164    background: rgba(255, 255, 255, 0.15);
165  }
166
167  &:focus-visible {
168    outline: 2px solid white;
169    outline-offset: 2px;
170  }
171`}}]);
172//# sourceMappingURL=4c69a048c60e72183e90c1ad53e5c294efff4a3f-24d8280d309c3109eef7.js.map