https://www.unsw.edu.au/etc.clientlibs/unsw-common/clientlibs/clie…/cmp-video-hero-729ab95983993f54b613.js

1"use strict";(self.webpackChunkunsw_common_ui_frontend=self.webpackChunkunsw_common_ui_frontend||[]).push([[1376],{3675:(function(M,v,s){s.r(v),s.d(v,{VideoHeroComponent:function(){return b}});var d=s(2138),e=s(6540),o=s(5338),r=s(4164),t=(a,n,f)=>{const p=Math.ceil(n*f);if(p>=a)return{width:p,height:n};{const I=Math.ceil(a/f);return{width:a,height:I}}},m=s(8698);const g=a=>{const n=a==null?void 0:a.parentElement;(n==null?void 0:n.tagName)==="SECTION"&&n.style.removeProperty("min-height")};var H=({videoId:a,heading:n,subheading:f,fallbackImageFileReference:p,alt:I,altValueFromDAM:Q,pictureModel:D})=>{const x=(0,e.useRef)(null),V=(0,e.useRef)(null),B=(0,e.useRef)(null),ee=(0,e.useRef)(null),z=(0,e.useRef)(null),W=(0,e.useRef)(null),q=(0,e.useRef)(null),[te,K]=(0,e.useState)(!1),[U,G]=(0,e.useState)(null),[N,oe]=(0,e.useState)({playing:!0}),[re,ne]=(0,e.useState)(!1),Z="inverse-above-fold",ie=(0,e.useId)();(0,e.useEffect)(()=>(document.body.classList.add(Z),()=>{document.body.classList.remove(Z)}),[]),(0,e.useLayoutEffect)(()=>{ne(!!document.querySelector("header.cmp-ink-header"))},[]),(0,e.useLayoutEffect)(()=>{const i=x.current,c=document.querySelector(".cmp-video-hero__cta-from-aem"),u=W.current;if(c&&u){for(;c.firstChild;)u.appendChild(c.firstChild);[{existingClass:".unsw-brand-button",newClass:"cmp-video-hero__brand-button"},{existingClass:".unsw-brand-button-container",newClass:"cmp-video-hero__brand-button-container"},{existingClass:".uds-brand-button",newClass:"cmp-video-hero__uds-brand-button"}].forEach(h=>{i.querySelectorAll(h.existingClass).forEach(j=>{j.classList.add(h.newClass)})}),c.remove()}},[]),(0,e.useEffect)(()=>{const i=c=>{const u=c.detail.player,w=c.detail.videoId,h=u.getDuration();w===a&&h&&h>0&&(K(!0),G(u))};return window.addEventListener("youtube-player-ready",i),()=>{window.removeEventListener("youtube-player-ready",i)}},[K,a,G]);const S=(0,e.useCallback)(()=>{const i="768px",c=1.7777777777777777,u=80,w=750,h=240,O=window.innerWidth,ce=window.matchMedia(`(width >= ${i})`).matches,E=x.current,J=V.current,_=B.current,X=z.current,Y=q.current;if(!E||!J||!_||!X||!Y)return;const A=E.querySelector(".youtube-player"),k=E.querySelector(".cmp-video-hero__player");let T=0,L=E;for(;L;)T+=L.offsetTop,L=L.offsetParent;if(ce){_.style.top="",E.style.height="auto";let C=T+_.offsetHeight+u;C=Math.max(C,w),k.style.height=`${C}px`;const P=t(O,C,c);A.style.width=`${P.width}px`,A.style.height=`${P.height}px`;const R=k.offsetHeight-T;E.style.height=`${R}px`;const se=(R-_.offsetHeight)/2;_.style.top=`${se}px`}else{k.style.height="",_.style.top=`${J.offsetHeight}px`;const P=t(O,h,c);A.style.width=`${P.width}px`,A.style.height=`${P.height}px`;const R=A.offsetHeight-T+_.offsetHeight;E.style.height=`${R}px`}const F=k.offsetHeight;X.style.height=`${F}px`,Y.style.height=`${F}px`},[]);(0,e.useLayoutEffect)(()=>{S(),g(x.current);const i=setInterval(()=>{S()},300),c=setTimeout(()=>{clearInterval(i)},2e3);return()=>{clearInterval(i),clearTimeout(c)}},[S]),(0,e.useEffect)(()=>{let i=0;const c=h=>{h!==i&&(i=h,S())},u=new ResizeObserver(h=>{h.forEach(()=>{c(window.innerWidth)})});u.observe(x.current);const w=()=>{c(window.innerWidth)};return window.addEventListener("resize",w),()=>{u.disconnect(),window.removeEventListener("resize",w)}},[S]);function $(){const i={...N,playing:!N.playing};oe(i),i.playing?U.playVideo():U.pauseVideo()}return e.createElement("div",{ref:x,className:`cmp-video-hero ${re?"cmp-video-hero--ink-theme-header":""}`},e.createElement("div",{ref:z,className:"cmp-video-hero__fallback-image"},p&&D&&e.createElement(m.V,{...D,loading:"eager",fetchPriority:"high"})),e.createElement("div",{ref:V,className:(0,r.A)("cmp-video-hero__video",!te&&"cmp-video-hero__video--invisible",N.playing&&"cmp-video-hero__video--playing",!N.playing&&"cmp-video-hero__video--paused")},e.createElement("div",{className:"cmp-video-hero__player ytplayer"},e.createElement("div",{ref:ee,className:"cmp-video-hero__youtube-player youtube-player",id:`ytplayer_${ie}`,"aria-label":Q&&I?I:"Silent YouTube video","data-alt":"Silent youtube video","data-src":a,"data-autoplay":"true","data-mute":"true","data-loop":"true",tabIndex:-1}),e.createElement("div",{ref:q,className:"cmp-video-hero__video-overlay"})),e.createElement("div",{className:"cmp-video-hero__controls"},e.createElement("div",{className:"cmp-video-hero__controls-mobile"},e.createElement("button",{onClick:$,"aria-label":"Play video",className:(0,r.A)("cmp-video-hero__controls-button","cmp-video-hero__controls-play-button")},e.createElement("svg",{width:"36",height:"36",viewBox:"0 0 36 36",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("g",{clipPath:"url(#clip0_6787_89147)"},e.createElement("circle",{opacity:"0.4",cx:"18",cy:"18",r:"24",fill:"#181716"}

1),e.createElement("path",{d:"M25 18L14.5 25.7942L14.5 10.2058L25 18Z",fill:"white"})),e.createElement("rect",{x:"0.5",y:"0.5",width:"35",height:"35",rx:"17.5",stroke:"white"}),e.createElement("defs",null,e.createElement("clipPath",{id:"clip0_6787_89147"},e.createElement("rect",{width:"36",height:"36",rx:"18",fill:"white"}))))),e.createElement("button",{onClick:$,"aria-label":"Pause video",className:(0,r.A)("cmp-video-hero__controls-button","cmp-video-hero__controls-pause-button")},e.createElement("svg",{width:"36",height:"36",viewBox:"0 0 36 36",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("g",{clipPath:"url(#clip0_6787_89158)"},e.createElement("circle",{opacity:"0.4",cx:"18",cy:"18",r:"24",fill:"#181716"}),e.createElement("rect",{x:"13",y:"11",width:"3",height:"14",fill:"white"}),e.createElement("rect",{x:"20",y:"11",width:"3",height:"14",fill:"white"})),e.createElement("rect",{x:"0.5",y:"0.5",width:"35",height:"35",rx:"17.5",stroke:"white"}),e.createElement("defs",null,e.createElement("clipPath",{id:"clip0_6787_89158"},e.createElement("rect",{width:"36",height:"36",rx:"18",fill:"white"})))))),e.createElement("div",{className:"cmp-video-hero__controls-desktop"},e.createElement("button",{onClick:$,"aria-label":"Play video",className:(0,r.A)("cmp-video-hero__controls-button","cmp-video-hero__controls-play-button")},e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 48 48",fill:"none"},e.createElement("rect",{x:"0.5",y:"0.5",width:"47",height:"47",rx:"23.5",stroke:"white"}

1),e.createElement("circle",{opacity:"0.15",cx:"24",cy:"24",r:"24",fill:"white",className:"cmp-video-hero__controls-background-circle"}),e.createElement("path",{d:"M31 24L20.5 31.7942L20.5 16.2058L31 24Z",fill:"white"}))),e.createElement("button",{onClick:$,"aria-label":"Pause video",className:(0,r.A)("cmp-video-hero__controls-button","cmp-video-hero__controls-pause-button")},e.createElement("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("rect",{x:"0.5",y:"0.5",width:"47",height:"47",rx:"23.5",stroke:"white"}),e.createElement("circle",{opacity:"0.15",cx:"24",cy:"24",r:"24",fill:"white",className:"cmp-video-hero__controls-background-circle"}),e.createElement("rect",{x:"19",y:"17",width:"3",height:"14",fill:"white"}),e.createElement("rect",{x:"26",y:"17",width:"3",height:"14",fill:"white"})))))),e.createElement("div",{ref:B,className:"cmp-video-hero__content"},e.createElement("h2",{className:"cmp-video-hero__heading",dangerouslySetInnerHTML:{__html:n}}),f&&e.createElement("h3",{className:"cmp-video-hero__subheading",dangerouslySetInnerHTML:{__html:f}}),e.createElement("div",{ref:W,className:"cmp-video-hero__cta"})))};class b extends d.A{constructor(){super(),this.$els=null,this.selector='[data-cmp-is="cmp-video-hero"]',this.$appRoot=".cmp-video-hero",this.init(),this.observe(),this.onAemUpdate=()=>this.init()}init(){this.$els=document.querySelectorAll(this.selector),this.$els.forEach(n=>{n.removeAttribute("data-cmp-is");const f=(0,o.createRoot)(n),p=n.dataset.config?JSON.parse(n.dataset.config):{};f.render(e.createElement(e.StrictMode,null,e.createElement(H,{...p})))})}}new b}),8698:(function(M,v,s){s.d(v,{V:function(){return o}});var d=s(6540),o=({sourceForPortrait:r,srcSetPortrait:l="",srcSet:t,srcMobile:m,decorative:g,classNamePicture:y,classNameImg:H,alt:b,title:a,uuid:n,loading:f,fetchPriority:p})=>d.createElement("picture",{className:y},r&&d.createElement("source",{media:"(orientation: portrait)",srcSet:l}),d.createElement("source",{srcSet:t}),d.createElement("img",{src:m,alt:g?"true":b||"true",title:g?"":a,className:H,loading:f,...p?{fetchpriority:p}:{},"data-aem-asset-id":n||void 0,"data-trackable":!!n}))}),2138:(function(M,v,s){s.d(v,{A:function(){return d}});class d{constructor(){this.selector="",this.onAemUpdate=()=>{}}observe(){if(!this.selector)throw new Error("A selector needs to be assigned");const o=window.MutationObserver,r=document.querySelector("body");new o(t=>{t.forEach(m=>{const g=[].slice.call(m.addedNodes);g.length>0&&g.forEach(y=>{y instanceof Element&&y.matches(this.selector)&&this.onAemUpdate(y),y.querySelectorAll&&[].slice.call(y.querySelectorAll(this.selector)).forEach(b=>{this.onAemUpdate(b)})})})}).observe(r,{subtree:!0,childList:!0,characterData:!0})}}}),4164:(function(M,v,s){function d(o){var r,l,t="";if(typeof o=="string"||typeof o=="number")t+=o;else if(typeof o=="object")if(Array.isArray(o)){var m=o.length;for(r=0;r<m;r++)o[r]&&(l=d(o[r]))&&(t&&(t+=" "),t+=l)}else for(l in o)o[l]&&(t&&(t+=" "),t+=l);return t}function e(){for(var o,r,l=0,t="",m=arguments.length;l<m;l++)(o=arguments[l])&&(r=d(o))&&(t&&(t+=" "),t+=r);return t}v.A=e})}]);