{"version":3,"sources":["webpack:///./assets/javascripts/modules/components/VideoBrightcoveComponent.js"],"names":["VideoBrightcoveComponent","htmlEl","_classCallCheck","this","_this","_possibleConstructorReturn","__proto__","Object","getPrototypeOf","call","bindEvents","bind","resizeScrollHandler","wrapper","$component","querySelector","SELECTORS","videoWrapper","intoGallery","dataset","myPlayer","Component","videoplayer","controls","showControls","getOpts","undefined","playControl","audioControl","fullScreenControl","classList","remove","paused","add","on","addEventListener","play","pause","isMuted","muted","isFullscreen","exitFullscreen","requestFullscreen","$","window","e","videoJsEl","opts","isElementInViewport","startOnScroll","playVideo","hasClass","pauseVideo","playerElement","isMobile","data","aspectratio","tabletMobile","matchMedia","matches","videoMobileId","aspectratioMobile","playerID","playerId","embed","convertToBoolean","videoID","videoId","autoStart","autostart","videoRepeat","repeat","playlistID","playlistId","applicationID","applicationId","poster","videoPosterMobile","videoPoster","hideVideo","accountId","width","el","pp","offset","top","left","outerWidth","height","outerHeight","pageYOffset","innerHeight","pageXOffset","innerWidth","ele","_this2","off","console","log","brightcovePlayerLoader","reset","refNode","refNodeInsert","embedType","media","embedOptions","tagName","unminified","responsive","aspectRatio","maxWidth","options","autoplay","loop","then","success","ref","mediainfo","error","info","controlBar","hide","catch","finally","currentTime","style","backgroundImage","thumbnail","_this3","initPlayer","setup","_get","prototype","init","value"],"mappings":"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","file":"component-VideoBrightcoveComponent.chunks.js","sourcesContent":["import Component from '../abstracts/Component';\nimport brightcovePlayerLoader from '@brightcove/player-loader';\n\n/**\n Video brightcove\n */\nexport default class VideoBrightcoveComponent extends Component {\n\n  get COMPONENTNAME() {\n    return 'VideoBrightcoveComponent';\n  }\n\n  static get SELECTORS() {\n    return {\n      videoWrapper: '.brightcove-wrapper',\n      videoplayer: 'video-js',\n    };\n  }\n\n  static getOpts(playerElement) {\n    let isMobile;\n    let data = playerElement.dataset;\n    if (data.tabletMobile == 'true') {\n      isMobile = window.matchMedia('(max-width:991px)').matches;\n    } else {\n      isMobile = window.matchMedia('(max-width:767px)').matches;\n    }\n    return {\n      aspectratio:\n        isMobile && data.videoMobileId !== ''\n          ? data.aspectratioMobile || '16:9'\n          : data.aspectratio,\n      playerID: data.playerId || 'default',\n      embed: data.embed,\n      controls: convertToBoolean(data.controls),\n      videoID:\n        isMobile & (data.videoMobileId !== '')\n          ? data.videoMobileId\n          : data.videoId,\n      autoStart: convertToBoolean(data.autostart),\n      startOnScroll: convertToBoolean(data.startOnScroll),\n      videoRepeat: convertToBoolean(data.repeat),\n      playlistID: data.playlistId,\n      applicationID: data.applicationId,\n      muted: convertToBoolean(data.muted),\n      poster:\n        isMobile && data.videoPosterMobile != ''\n          ? data.videoPosterMobile\n          : data.videoPoster,\n      hideVideo: convertToBoolean(data.hideVideo),\n      accountId: data.accountId,\n      width: data.width || '100%',\n    };\n  }\n\n  static isElementInViewport(el) {\n    var pp = $(el).offset();\n    var top = pp.top;\n    var left = pp.left;\n    var width = $(el).outerWidth();\n    var height = $(el).outerHeight(true);\n\n    return (\n      top < window.pageYOffset + window.innerHeight &&\n      left < window.pageXOffset + window.innerWidth &&\n      top + height > window.pageYOffset &&\n      left + width > window.pageXOffset\n    );\n  }\n\n  /**\n   *\n   * @param myPlayer player from success.ref\n   */\n  bindEvents(myPlayer) {\n    let videoJsEl = this.wrapper.querySelector(\n      VideoBrightcoveComponent.SELECTORS.videoplayer\n    );\n\n    if (videoJsEl) {\n      let container = this.wrapper; // container of brightcove player\n      let controls = container.querySelector('.custom-controls');\n      let showControls = VideoBrightcoveComponent.getOpts(this.wrapper).controls;\n\n      if (controls !== null && controls !== undefined) {\n        let playControl = controls.querySelector('.custom-play');\n        let audioControl = controls.querySelector('.custom-audio');\n        // let timeControl = controls.querySelector('.custom-time');\n        // let barControl = controls.querySelector('.custom-progress');\n        let fullScreenControl = controls.querySelector('.custom-fullscreen');\n        if (myPlayer !== undefined && showControls) {\n          controls.classList.remove('hide');\n\n          // TIME\n          // let time = myPlayer.$('.vjs-current-time');\n          // timeControl.append(time);\n\n          // PROGRESS-BAR\n          // let bar = myPlayer.$('.vjs-progress-control');\n          // barControl.append(bar);\n\n          // PLAY-PAUSE\n          // icon play/pause when the video starts\n          let isPaused = myPlayer.paused();\n          isPaused ? controls.classList.remove('play') : controls.classList.add('play');\n          // listen to play/pause video\n          myPlayer.on('play', () => {\n            controls.classList.add('play');\n          });\n          myPlayer.on('pause', () => {\n            controls.classList.remove('play');\n          });\n          // play/pause on custom control click\n          playControl.addEventListener('click', () => {\n            let isPaused = myPlayer.paused();\n            if (isPaused) {\n              myPlayer.play();\n            } else {\n              myPlayer.pause();\n            }\n          });\n\n        // AUDIO\n        // audio control when the video starts\n          let isMuted = myPlayer.muted();\n          isMuted ? controls.classList.add('mute') : controls.classList.remove('mute');\n          // mute/unmute with custom control click\n          audioControl.addEventListener('click', () => {\n            isMuted = myPlayer.muted();\n            if (isMuted) {\n              myPlayer.muted(false);\n              controls.classList.remove('mute');\n            } else {\n              myPlayer.muted(true);\n              controls.classList.add('mute');\n            }\n          });\n        //FULLSCREEN\n        //enable full screen button\n          fullScreenControl.addEventListener('click', () => {\n            let isFullScreen = myPlayer.isFullscreen();\n            if (isFullScreen) {\n              myPlayer.exitFullscreen();\n            } else {\n              myPlayer.requestFullscreen();\n            }\n          });\n        }\n      }\n      $(window).on('resize scroll', this.resizeScrollHandler);\n    }\n  }\n\n  resizeScrollHandler(e) {\n    let videoJsEl = this.wrapper.querySelector(\n      VideoBrightcoveComponent.SELECTORS.videoplayer\n    );\n    if (videoJsEl) {\n      let opts = VideoBrightcoveComponent.getOpts(this.wrapper); // container of brightcove player\n      if (this.myPlayer) {\n        if (VideoBrightcoveComponent.isElementInViewport(videoJsEl)) {\n          if (opts.startOnScroll) {\n            this.playVideo();\n          }\n        } else {\n          if (!this.myPlayer.hasClass('vjs-waiting')) {\n            this.pauseVideo();\n          }\n        }\n      }\n    }\n  }\n\n  constructor(htmlEl) {\n    super(htmlEl);\n    this.bindEvents = this.bindEvents.bind(this);\n    this.resizeScrollHandler = this.resizeScrollHandler.bind(this);\n    this.wrapper = this.$component.querySelector(\n      VideoBrightcoveComponent.SELECTORS.videoWrapper\n    );\n    this.intoGallery = this.wrapper.dataset.intoGallery === 'true';\n    this.myPlayer = null;\n  }\n  initPlayer(ele) {\n    $(window).off('resize scroll', this.resizeScrollHandler);\n    let opts = VideoBrightcoveComponent.getOpts(this.wrapper),\n      videoPoster = '';\n    console.log('Init: ', opts);\n\n    if (opts.poster) {\n      videoPoster = opts.poster;\n    }\n\n    brightcovePlayerLoader.reset();\n\n    //https://support.brightcove.com/brightcove-player-loader\n    // https://docs.brightcove.com/brightcove-player/1.x/Player.html\n\n    brightcovePlayerLoader({\n      refNode: this.wrapper,\n      refNodeInsert: 'prepend', //prepend because of custom controls into wrapper\n      accountId: opts.accountId, //required - A Video Cloud account ID\n      playerId: opts.playerID, //required\n      videoId: opts.videoID,\n      embedType: opts.embed, //in-page or iframe\n      applicationId: opts.applicationID, // The application ID to be applied to the generated embed.\n      media: opts.media,\n      embedOptions: {\n        tagName: 'video-js', // video-js or video - default is video-js\n        unminified: false, // for debugging: use the un-minified version of the player\n        responsive: {\n          aspectRatio: opts.aspectratio,\n          maxWidth: opts.width,\n        },\n      },\n      options: {\n        autoplay: convertToBoolean(opts.autoStart),\n        controls: convertToBoolean(opts.controls),\n        loop: convertToBoolean(opts.videoRepeat),\n        muted: convertToBoolean(opts.muted),\n        poster: videoPoster,\n      },\n    })\n      .then(success => {\n        this.myPlayer = success.ref;\n        if (opts.poster) {\n          videoPoster = opts.poster;\n        } else {\n          videoPoster = this.myPlayer.mediainfo.poster;\n        }\n\n        this.myPlayer.on('error', error => {\n          console.info('[Video Brightcove] error general', error);\n        });\n\n        this.myPlayer.on('loadstart', () => {\n          this.myPlayer.poster(videoPoster);\n        });\n\n        this.myPlayer.on('loadedmetadata', () => {\n          console.log('[Video Brightcove] loadedmetadata');\n\n          if (!opts.controls) {\n            this.myPlayer.controlBar.hide();\n          }\n\n          if (opts.autoStart) {\n            let playVideo = this.myPlayer.play(); // Browser/platform autoplay policies - https://support.brightcove.com/autoplay-considerations\n\n            if (playVideo !== undefined) {\n              // check if the video played, otherwise I'll put the video on mute\n              playVideo\n                .then(() => {\n                  this.myPlayer.muted(opts.muted);\n                })\n                .catch(() => {\n                  this.myPlayer.muted(true);\n                })\n                .finally(() => {\n                  console.info('autostart', opts.autoStart);\n\n                  if (\n                    VideoBrightcoveComponent.isElementInViewport(this.wrapper)\n                  ) {\n                    this.myPlayer.currentTime(0);\n                    this.myPlayer.play();\n                  } else {\n                    this.myPlayer.pause();\n                  }\n                });\n            }\n          }\n        });\n\n        this.myPlayer.on('loadeddata', () => {\n          console.log('[Video Brightcove] loadeddata');\n          this.bindEvents(this.myPlayer);\n        });\n\n        this.myPlayer.on('ended', () => {\n          if (opts.hideVideo) {\n            this.wrapper.style.backgroundImage = `url('${\n              this.wrapper.dataset.videoPoster\n            }')`;\n            this.myPlayer.hide();\n          } else {\n            this.myPlayer.currentTime(0);\n          }\n\n          console.log('[Video Brightcove] ended player ');\n          console.info('opts.poster', opts.poster);\n          console.info('media', this.myPlayer.mediainfo.poster);\n          console.info('media', this.myPlayer.mediainfo.thumbnail);\n        });\n      })\n      .catch(error => {\n        console.info('[Video Brightocove] Loading faild', error);\n      });\n  }\n\n  muteVideo() {\n    if (this.myPlayer) {\n      this.myPlayer.muted(true);\n      //TODO: set mute control respective state class\n    }\n  }\n\n  playVideo() {\n    //console.log('PLAY ', this);\n    if (this.myPlayer) {\n      this.myPlayer\n        .play()\n        .then(() => {\n          this.myPlayer.play();\n        })\n        .catch(error => {\n          this.myPlayer.muted(true);\n          this.myPlayer.play();\n        });\n    }\n  }\n\n  pauseVideo() {\n    //console.log('PAUSE', this);\n    if (this.myPlayer) {\n      this.myPlayer.pause();\n    }\n  }\n\n  setup() {\n    if (this.wrapper) {\n      this.initPlayer(this.wrapper);\n    }\n  }\n\n  init() {\n    // BrightCove: https://github.com/brightcove/player-loader\n    this.setup();\n  }\n\n  render() {\n    super.render();\n    this.init();\n  }\n}\n\nfunction convertToBoolean(value) {\n  if(typeof value === \"boolean\") {\n    return value;\n  }\n  if(typeof value === \"string\" && value === \"true\") {\n    return true;\n  }\n  return false;\n}\n"],"sourceRoot":""}