{"version":3,"file":"booking-hero-masthead-DqQ28hB8.js","sources":["../../../../src/scripts/modules/booking-hero-masthead.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Player from '@vimeo/player';\n\nclass BookingHeroMasthead extends Component {\n  private playing = false;\n  private player: Player | null = null;\n  private classes = {\n    playing: 'is-playing',\n    paused: 'is-paused'\n  };\n\n  constructor(el: HTMLElement) {\n    super(el);\n\n    this.initVimeoPlayer();\n    this.handlePosition();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      container: this.el.querySelector('.booking-hero-mast__video') as HTMLElement,\n      wrapper: this.el.querySelector('.booking-hero-mast__media-wrapper') as HTMLElement,\n      btnPlayPause: this.el.querySelector('.booking-hero-mast__play-pause') as HTMLButtonElement,\n      bookingHero: this.el.querySelector('.booking-hero') as HTMLElement,\n    };\n  }\n\n  addListeners() {\n    (this.dom.btnPlayPause as HTMLButtonElement)?.addEventListener(\n      'click',\n      this.handlelayPause.bind(this)\n    );\n\n    let resizeTimeout: number;\n    window.addEventListener('resize', () => {\n      clearTimeout(resizeTimeout);\n      resizeTimeout = window.setTimeout(() => {\n        requestAnimationFrame(() => {\n          this.handlePosition();\n        });\n      }, 250);\n    });\n  }\n\n  initVimeoPlayer() {\n    console.log('initVimeoPlayer');\n    const container = this.dom.container as HTMLElement;\n    const vimeoId = container.dataset.videoId || '';\n    if (this.playing || vimeoId?.length < 1) return;\n    const options01 = {\n      id: parseInt(vimeoId),\n      allow: 'autoplay; fullscreen; picture-in-picture; background; muted',\n      width: window.innerWidth,\n      autoplay: true,\n      background: true,\n      byline: false,\n      controls: false,\n      preload: true\n    };\n\n    if (this.dom.container instanceof HTMLElement) {\n      if (this.playing) return;\n      const player = new Player(this.dom.container, options01);\n      this.player = player;\n\n      player.ready().then(() => {\n        player.play();\n        player.on('progress', data => {\n          if (data.percent > 0.1) {\n            this.playing = true;\n            (this.dom.container as HTMLElement).dataset.playing = 'true';\n            (this.dom.wrapper as HTMLElement).classList.add(this.classes.playing);\n            (this.dom.btnPlayPause as HTMLButtonElement).style.display = 'flex';\n            player.off('progress');\n          }\n        });\n      });\n    }\n  }\n\n  handlelayPause() {\n    const player = this.player;\n\n    if (player) {\n      player.ready().then(() => {\n        (this.dom.wrapper as HTMLElement).classList.remove(\n          this.classes.playing,\n          this.classes.paused\n        );\n\n        this.playing = !this.playing;\n        (this.dom.wrapper as HTMLElement).classList.add(\n          this.playing ? this.classes.playing : this.classes.paused\n        );\n\n        if (this.playing) {\n          player.play();\n        } else {\n          player.pause();\n        }\n      });\n    }\n  }\n\n  handlePosition() {\n    if (!this.dom.wrapper || !this.dom.bookingHero || !this.dom.container) return;\n    const wrapper = this.dom.wrapper as HTMLElement;\n    const bookingHero = this.dom.bookingHero as HTMLElement;\n    const windowHeight = window.innerHeight;\n    const bookingHeroPosition = bookingHero.getBoundingClientRect();\n    const iframeHeight = (this.dom.container as HTMLElement).getBoundingClientRect().height;\n\n    // Update the values immediately\n    if (bookingHeroPosition.top > windowHeight) {\n      wrapper.style.setProperty('--booking-position', `${windowHeight}px`);\n    } else {\n      wrapper.style.setProperty('--booking-position', '100%');\n    }\n\n    if (iframeHeight > windowHeight) {\n      (this.dom.btnPlayPause as HTMLButtonElement).style.setProperty('--iframe-difference', `${iframeHeight - windowHeight}px`);\n    } else {\n      (this.dom.btnPlayPause as HTMLButtonElement).style.setProperty('--iframe-difference', '0px');\n    }\n  }\n}\n\nexport default BookingHeroMasthead;\n"],"names":["BookingHeroMasthead","Component","el","__publicField","_a","resizeTimeout","vimeoId","options01","player","Player","data","wrapper","bookingHero","windowHeight","bookingHeroPosition","iframeHeight"],"mappings":"6PAGA,MAAMA,UAA4BC,CAAU,CAQ1C,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EARFC,EAAA,eAAU,IACVA,EAAA,cAAwB,MACxBA,EAAA,eAAU,CAChB,QAAS,aACT,OAAQ,WACV,GAKE,KAAK,gBAAgB,EACrB,KAAK,eAAe,CAAA,CAGtB,eAAgB,CACd,KAAK,IAAM,CACT,UAAW,KAAK,GAAG,cAAc,2BAA2B,EAC5D,QAAS,KAAK,GAAG,cAAc,mCAAmC,EAClE,aAAc,KAAK,GAAG,cAAc,gCAAgC,EACpE,YAAa,KAAK,GAAG,cAAc,eAAe,CACpD,CAAA,CAGF,cAAe,QACZC,EAAA,KAAK,IAAI,eAAT,MAAAA,EAA6C,iBAC5C,QACA,KAAK,eAAe,KAAK,IAAI,GAG3B,IAAAC,EACG,OAAA,iBAAiB,SAAU,IAAM,CACtC,aAAaA,CAAa,EACVA,EAAA,OAAO,WAAW,IAAM,CACtC,sBAAsB,IAAM,CAC1B,KAAK,eAAe,CAAA,CACrB,GACA,GAAG,CAAA,CACP,CAAA,CAGH,iBAAkB,CAChB,QAAQ,IAAI,iBAAiB,EAEvB,MAAAC,EADY,KAAK,IAAI,UACD,QAAQ,SAAW,GACzC,GAAA,KAAK,UAAWA,GAAA,YAAAA,EAAS,QAAS,EAAG,OACzC,MAAMC,EAAY,CAChB,GAAI,SAASD,CAAO,EACpB,MAAO,8DACP,MAAO,OAAO,WACd,SAAU,GACV,WAAY,GACZ,OAAQ,GACR,SAAU,GACV,QAAS,EACX,EAEI,GAAA,KAAK,IAAI,qBAAqB,YAAa,CAC7C,GAAI,KAAK,QAAS,OAClB,MAAME,EAAS,IAAIC,EAAO,KAAK,IAAI,UAAWF,CAAS,EACvD,KAAK,OAASC,EAEPA,EAAA,QAAQ,KAAK,IAAM,CACxBA,EAAO,KAAK,EACLA,EAAA,GAAG,WAAoBE,GAAA,CACxBA,EAAK,QAAU,KACjB,KAAK,QAAU,GACd,KAAK,IAAI,UAA0B,QAAQ,QAAU,OACrD,KAAK,IAAI,QAAwB,UAAU,IAAI,KAAK,QAAQ,OAAO,EACnE,KAAK,IAAI,aAAmC,MAAM,QAAU,OAC7DF,EAAO,IAAI,UAAU,EACvB,CACD,CAAA,CACF,CAAA,CACH,CAGF,gBAAiB,CACf,MAAMA,EAAS,KAAK,OAEhBA,GACKA,EAAA,QAAQ,KAAK,IAAM,CACvB,KAAK,IAAI,QAAwB,UAAU,OAC1C,KAAK,QAAQ,QACb,KAAK,QAAQ,MACf,EAEK,KAAA,QAAU,CAAC,KAAK,QACpB,KAAK,IAAI,QAAwB,UAAU,IAC1C,KAAK,QAAU,KAAK,QAAQ,QAAU,KAAK,QAAQ,MACrD,EAEI,KAAK,QACPA,EAAO,KAAK,EAEZA,EAAO,MAAM,CACf,CACD,CACH,CAGF,gBAAiB,CACX,GAAA,CAAC,KAAK,IAAI,SAAW,CAAC,KAAK,IAAI,aAAe,CAAC,KAAK,IAAI,UAAW,OACjE,MAAAG,EAAU,KAAK,IAAI,QACnBC,EAAc,KAAK,IAAI,YACvBC,EAAe,OAAO,YACtBC,EAAsBF,EAAY,sBAAsB,EACxDG,EAAgB,KAAK,IAAI,UAA0B,sBAAwB,EAAA,OAG7ED,EAAoB,IAAMD,EAC5BF,EAAQ,MAAM,YAAY,qBAAsB,GAAGE,CAAY,IAAI,EAE3DF,EAAA,MAAM,YAAY,qBAAsB,MAAM,EAGpDI,EAAeF,EAChB,KAAK,IAAI,aAAmC,MAAM,YAAY,sBAAuB,GAAGE,EAAeF,CAAY,IAAI,EAEvH,KAAK,IAAI,aAAmC,MAAM,YAAY,sBAAuB,KAAK,CAC7F,CAEJ"}