{"version":3,"file":"assets/js/593.9093aa181f7e33000b87.js","mappings":"0LAIA,MAAMA,EAAWC,SAASC,cAAc,kBAExC,IAAIC,EACAC,EACAC,EAEJ,MAAMC,EAAO,CACXC,IAAK,MACLC,MAAO,aACPC,KAAM,aAGFC,EAAaC,OAAOC,WAAW,wBAErC,SAASC,EAAiBC,IACxBC,EAAAA,EAAAA,GAAgB,iBAAkB,eAAgB,cAAe,QAASD,EAC5E,CAEA,SAASE,IACFN,EAAWO,QAGVZ,EACFA,EAAOa,QAEPb,EAASc,IACTd,EAAOe,GAAG,QAASC,IANrBhB,EAAOiB,MASX,CAWA,SAASC,EAAmBC,GAC1B,MAAMC,EAAUD,EAAEE,KAEbD,IAAYnB,EAAKC,MAAQiB,EAAEG,UAAaF,IAAYnB,EAAKE,SAC5DgB,EAAEI,iBACFzB,EAAO0B,QAEX,CAEA,SAASC,EAAkBN,GACzB,MAAMC,EAAUD,EAAEE,KAEbD,IAAYnB,EAAKC,KAAOiB,EAAEG,UAAaF,IAAYnB,EAAKG,QAC3De,EAAEI,iBACFxB,EAASyB,QAEb,CAEA,SAASV,IACP,OAAO,IAAIY,IAAJ,CAAS/B,EAAU,CACxBgC,SAAU,CAAC,OAAQ,SACnBC,cAAc,EACdC,UAAU,EACVC,KAAM,CAAEC,QAAQ,GAChBC,aAAa,EACbC,OAAO,EACPC,MAAO,OACPC,MAAO,CACLN,UAAU,EACVO,YAAY,EACZT,SAAU,EACVG,MAAM,EACNG,OAAO,EACPI,YAAY,EACZC,OAAO,GAETC,QAAS,CACPV,SAAU,EACVF,SAAU,EACVG,KAAM,EACNU,OAAQ,IAGd,CAEA,SAASxB,EAAayB,GACpB,MAAMC,EAAWD,EAAME,OAAOC,KACxBC,EAAelD,EAASE,cAAc,oBAC5C6C,EAAST,OAAQ,EACjBS,EAAS7B,OAELgC,IACF9C,EAAW8C,EAEX9C,EAAS+C,iBAAiB,SAAS,KACjC,MAAMC,EAAoBhD,EAASiD,aAAa,cAGtB,SAAtBD,GAA8BvC,EAAiB,SACzB,UAAtBuC,GAA+BvC,EAAiB,OAAO,IApEjE,SAA+ByC,GAC7B,MAAMC,EAAkBC,MAAMC,MAAKC,EAAAA,EAAAA,GAAwBzD,SAAS0D,OAE9DC,EAAiBL,EAAgBM,WADhBC,GAAYA,IAAYR,IAEzCS,EAAkBR,EAAgBK,EAAiB,GAEzDzD,EAAS4D,CACX,CAgEIC,CAAsB5D,GAEtBA,EAAS+C,iBAAiB,UAAW5B,GACjCpB,GAAQA,EAAOgD,iBAAiB,UAAWrB,GAEnD,CAkBA,QAhBA,WACmB,OAAb9B,IAKJW,OAAON,OAASA,EAEZK,EAAWO,UACbZ,EAASc,IACTd,EAAOe,GAAG,QAASC,IAGrBX,EAAWyC,iBAAiB,SAAUnC,GACxC,C","sources":["webpack://ssen-transmission/./src/ui/templates/02-components/hero/mando-ui.hero.js"],"sourcesContent":["import Plyr from 'plyr';\r\nimport getAllFocusableElements from '../../../scripts/shared/mando-ui.getAllFocusableElements';\r\nimport { pushToDataLayer } from '@/ui/scripts/analytics/analytics.methods';\r\n\r\nconst playerEl = document.querySelector('.js-hero-video');\r\n\r\nlet nextEl;\r\nlet videoBtn;\r\nlet player;\r\n\r\nconst keys = {\r\n  tab: 'Tab',\r\n  right: 'ArrowRight',\r\n  left: 'ArrowLeft',\r\n};\r\n\r\nconst mediaQuery = window.matchMedia('(min-width: 61.25em)');\r\n\r\nfunction handleVideoClick(action) {\r\n  pushToDataLayer('video_tracking', 'video_action', 'video_label', 'Click', action);\r\n}\r\n\r\nfunction windowSize() {\r\n  if (!mediaQuery.matches) {\r\n    player.stop();\r\n  } else {\r\n    if (player) {\r\n      player.play();\r\n    } else {\r\n      player = instantiatePlayer();\r\n      player.on('ready', readyHandler);\r\n    }\r\n  }\r\n}\r\n\r\nfunction findFocusItemsToTrack(heroBtn) {\r\n  const allFocusableEls = Array.from(getAllFocusableElements(document.body));\r\n  const isMatchingBtn = (element) => element === heroBtn;\r\n  const playPauseIndex = allFocusableEls.findIndex(isMatchingBtn); // returns index of playPauseBtn\r\n  const nextFocusableEl = allFocusableEls[playPauseIndex + 1];\r\n\r\n  nextEl = nextFocusableEl;\r\n}\r\n\r\nfunction handleHeroBtnFocus(e) {\r\n  const pressed = e.key;\r\n\r\n  if ((pressed === keys.tab && !e.shiftKey) || pressed === keys.right) {\r\n    e.preventDefault();\r\n    nextEl.focus();\r\n  }\r\n}\r\n\r\nfunction handleNextElFocus(e) {\r\n  const pressed = e.key;\r\n\r\n  if ((pressed === keys.tab && e.shiftKey) || pressed === keys.left) {\r\n    e.preventDefault();\r\n    videoBtn.focus();\r\n  }\r\n}\r\n\r\nfunction instantiatePlayer() {\r\n  return new Plyr(playerEl, {\r\n    controls: ['play', 'pause'],\r\n    hideControls: false,\r\n    autoplay: true,\r\n    loop: { active: true },\r\n    clickToPlay: false,\r\n    muted: true,\r\n    ratio: '16:9',\r\n    vimeo: {\r\n      autoplay: true,\r\n      background: true,\r\n      controls: 0,\r\n      loop: true,\r\n      muted: true,\r\n      responsive: true,\r\n      title: true,\r\n    },\r\n    youtube: {\r\n      autoplay: 1,\r\n      controls: 0,\r\n      loop: 1,\r\n      origin: 1,\r\n    },\r\n  });\r\n}\r\n\r\nfunction readyHandler(event) {\r\n  const instance = event.detail.plyr;\r\n  const playPauseBtn = playerEl.querySelector('[data-plyr=play]');\r\n  instance.muted = true; // force mute vimeo\r\n  instance.play();\r\n\r\n  if (playPauseBtn) {\r\n    videoBtn = playPauseBtn;\r\n\r\n    videoBtn.addEventListener('click', () => {\r\n      const videoBtnAriaLabel = videoBtn.getAttribute('aria-label');\r\n\r\n      // Plyer controls button has an aria label stating play/pause\r\n      if (videoBtnAriaLabel === 'Play') handleVideoClick('Pause');\r\n      if (videoBtnAriaLabel === 'Pause') handleVideoClick('Play');\r\n    });\r\n\r\n    findFocusItemsToTrack(videoBtn);\r\n\r\n    videoBtn.addEventListener('keydown', handleHeroBtnFocus);\r\n    if (nextEl) nextEl.addEventListener('keydown', handleNextElFocus);\r\n  }\r\n}\r\n\r\nfunction init() {\r\n  if (playerEl === null) {\r\n    return;\r\n  }\r\n\r\n  // needed to allow autoplaying\r\n  window.player = player;\r\n\r\n  if (mediaQuery.matches) {\r\n    player = instantiatePlayer();\r\n    player.on('ready', readyHandler);\r\n  }\r\n\r\n  mediaQuery.addEventListener('change', windowSize);\r\n}\r\n\r\nexport default init;\r\n"],"names":["playerEl","document","querySelector","nextEl","videoBtn","player","keys","tab","right","left","mediaQuery","window","matchMedia","handleVideoClick","action","pushToDataLayer","windowSize","matches","play","instantiatePlayer","on","readyHandler","stop","handleHeroBtnFocus","e","pressed","key","shiftKey","preventDefault","focus","handleNextElFocus","Plyr","controls","hideControls","autoplay","loop","active","clickToPlay","muted","ratio","vimeo","background","responsive","title","youtube","origin","event","instance","detail","plyr","playPauseBtn","addEventListener","videoBtnAriaLabel","getAttribute","heroBtn","allFocusableEls","Array","from","getAllFocusableElements","body","playPauseIndex","findIndex","element","nextFocusableEl","findFocusItemsToTrack"],"sourceRoot":""}