{"version":3,"file":"videoCard.a4a4f3fcb153dae5a2c2.js","mappings":"mKAAA,IAAwB,EAAxB,GAAwB,EAAxB,UAAwB,qMAEHA,EAAS,WAC5B,WAAYC,IAHU,4FAGN,SACdC,KAAKD,GAAKA,EACVC,KAAKC,OAASF,EAAGG,uBAAuB,gCAAgC,GACxEF,KAAKG,UAAYJ,EAAGG,uBAAuB,kCAAkC,GAC7EF,KAAKI,QAAS,EACdJ,KAAKK,oBAAqB,EAC1BL,KAAKM,oBAAqB,EAC1BN,KAAKO,oBAAqB,EAC1BP,KAAKQ,OAAS,KACdR,KAAKS,MACP,CAbsB,UAmFrB,OAnFqB,EAarB,GAbqB,EAarB,4BAED,SAAcC,EAAWC,EAASC,GAC5BC,OAAOC,WACTD,OAAOC,UAAUC,KAAK,CACpBC,MAAON,EACPO,cAAeN,EACfO,eAAgBN,EAChBO,YAAanB,KAAKQ,OAAOY,OAAOC,MAChCC,iBAAkB,gBAGxB,GAAC,0BAED,SAAaN,GACXhB,KAAKuB,cAAc,iBAAkB,IAAKP,EAAMQ,OAAOC,KAAKb,UAC5DZ,KAAK0B,mBACP,GAAC,yBAED,SAAYV,GACVhB,KAAK2B,8BACe,IAAhB3B,KAAKI,SACPJ,KAAKI,QAAS,EACdJ,KAAKuB,cAAc,cAAe,EAAGP,EAAMQ,OAAOC,KAAKb,UAE3D,GAAC,+BAED,WACEZ,KAAKI,QAAS,EACdJ,KAAKK,oBAAqB,EAC1BL,KAAKM,oBAAqB,EAC1BN,KAAKO,oBAAqB,CAC5B,GAAC,wCAED,WAA6B,WAC3BM,OAAOe,WAAWC,SAAQ,SAAAC,GACJ,OAAhBA,EAAKtB,QAAmBsB,EAAK/B,KAAO,EAAKA,IAC3C+B,EAAKtB,OAAOuB,OAEhB,GACF,GAAC,+BAED,SAAkBf,GAChB,IAAMgB,EAAwBhC,KAAKQ,OAAOyB,YAAcjC,KAAKQ,OAAO0B,SAAY,IACvC,KAArCC,KAAKC,MAAMJ,KAA4D,IAA5BhC,KAAKK,oBAClDL,KAAKK,oBAAqB,EAC1BL,KAAKuB,cAAc,iBAAkB,GAAIP,EAAMQ,OAAOC,KAAKb,WACb,KAArCuB,KAAKC,MAAMJ,KAA4D,IAA5BhC,KAAKM,oBACzDN,KAAKK,oBAAqB,EAC1BL,KAAKM,oBAAqB,EAC1BN,KAAKuB,cAAc,iBAAkB,GAAIP,EAAMQ,OAAOC,KAAKb,WACb,KAArCuB,KAAKC,MAAMJ,KAA4D,IAA5BhC,KAAKO,qBACzDP,KAAKK,oBAAqB,EAC1BL,KAAKM,oBAAqB,EAC1BN,KAAKO,oBAAqB,EAC1BP,KAAKuB,cAAc,iBAAkB,GAAIP,EAAMQ,OAAOC,KAAKb,UAE/D,GAAC,0BAED,WACEZ,KAAKQ,OAAS,IAAI6B,EAAAA,QAAKrC,KAAKG,UAAW,CACrCmC,UAAU,IAEZtC,KAAKQ,OAAO+B,GAAG,OAAQvC,KAAKwC,YAAYC,KAAKzC,OAC7CA,KAAKQ,OAAO+B,GAAG,QAASvC,KAAK0C,aAAaD,KAAKzC,OAC/CA,KAAKQ,OAAO+B,GAAG,aAAcvC,KAAK2C,kBAAkBF,KAAKzC,MAC3D,GAAC,kBAED,WACEA,KAAKC,OAAO2C,iBAAiB,QAAS5C,KAAK6C,aAAaJ,KAAKzC,MAC/D,MAnFsB,8EAmFrB,EAjF2B,GAiF3B,W","sources":["webpack://jcb.com/./src/js/components/videoCard.js"],"sourcesContent":["import Plyr from 'plyr';\r\n\r\nexport default class videoCard {\r\n  constructor(el) {\r\n    this.el = el;\r\n    this.button = el.getElementsByClassName('js-image-card-a__play-button')[0];\r\n    this.container = el.getElementsByClassName('js-image-card-a__image-wrapper')[0];\r\n    this.played = false;\r\n    this.playedPercentage25 = false;\r\n    this.playedPercentage50 = false;\r\n    this.playedPercentage75 = false;\r\n    this.player = null;\r\n    this.init();\r\n  }\r\n\r\n  dataLayerPush(eventName, percent, provider) {\r\n    if (window.dataLayer) {\r\n      window.dataLayer.push({\r\n        event: eventName,\r\n        video_percent: percent,\r\n        video_provider: provider,\r\n        video_title: this.player.config.title,\r\n        element_location: 'card_browser',\r\n      });      \r\n    }\r\n  }\r\n\r\n  endedHandler(event) {    \r\n    this.dataLayerPush('video_complete', 100, event.detail.plyr.provider);\r\n    this.resetPlayedValues();\r\n  }\r\n\r\n  playHandler(event) {\r\n    this.stopCurrentlyPlayingVideos();\r\n    if (this.played === false) {      \r\n      this.played = true;\r\n      this.dataLayerPush('video_start', 0, event.detail.plyr.provider);\r\n    }\r\n  }\r\n\r\n  resetPlayedValues() {\r\n    this.played = false;\r\n    this.playedPercentage25 = false;\r\n    this.playedPercentage50 = false;\r\n    this.playedPercentage75 = false;\r\n  }\r\n\r\n  stopCurrentlyPlayingVideos() {\r\n    window.videoCards.forEach(card => {\r\n      if (card.player !== null && card.el !== this.el) {\r\n        card.player.pause();\r\n      }\r\n    });\r\n  }\r\n\r\n  timeUpdateHandler(event) {\r\n    const timePlayedPercentage = (this.player.currentTime / this.player.duration) * 100;\r\n    if (Math.floor(timePlayedPercentage) === 25 && this.playedPercentage25 === false) {\r\n      this.playedPercentage25 = true;\r\n      this.dataLayerPush('video_progress', 25, event.detail.plyr.provider);\r\n    } else if (Math.floor(timePlayedPercentage) === 50 && this.playedPercentage50 === false) {\r\n      this.playedPercentage25 = true;\r\n      this.playedPercentage50 = true;\r\n      this.dataLayerPush('video_progress', 50, event.detail.plyr.provider);\r\n    } else if (Math.floor(timePlayedPercentage) === 75 && this.playedPercentage75 === false) {\r\n      this.playedPercentage25 = true;\r\n      this.playedPercentage50 = true;\r\n      this.playedPercentage75 = true;\r\n      this.dataLayerPush('video_progress', 75, event.detail.plyr.provider);\r\n    }\r\n  }\r\n\r\n  clickHandler() {\r\n    this.player = new Plyr(this.container, {\r\n      autoplay: true,\r\n    });\r\n    this.player.on('play', this.playHandler.bind(this));\r\n    this.player.on('ended', this.endedHandler.bind(this));\r\n    this.player.on('timeupdate', this.timeUpdateHandler.bind(this));\r\n  }\r\n\r\n  init() {\r\n    this.button.addEventListener('click', this.clickHandler.bind(this));\r\n  }\r\n}\r\n"],"names":["videoCard","el","this","button","getElementsByClassName","container","played","playedPercentage25","playedPercentage50","playedPercentage75","player","init","eventName","percent","provider","window","dataLayer","push","event","video_percent","video_provider","video_title","config","title","element_location","dataLayerPush","detail","plyr","resetPlayedValues","stopCurrentlyPlayingVideos","videoCards","forEach","card","pause","timePlayedPercentage","currentTime","duration","Math","floor","Plyr","autoplay","on","playHandler","bind","endedHandler","timeUpdateHandler","addEventListener","clickHandler"],"sourceRoot":""}