@pegakit/pegakit/source/scripts/components/brightcove-player/index.js

The living styleguide, pattern library, UI ToolKit, and front-end build tools that power Pega's digital web properties.

var skate = require('skatejs');
var loadJS = require('loadjs');

skate.define('brightcove-player', {

  created(elem) {
    var videoElem = elem.getElementsByClassName('video-js')[0];
    var brightCoveID = videoElem.dataset.account,
      playerID = videoElem.dataset.player,
      fullscreen = videoElem.dataset.fullscreen,
      embed = videoElem.dataset.embed,
      socialUrl = videoElem.dataset.socialurl;

    loadJS([`//players.brightcove.net/${brightCoveID}/${playerID}_${embed}/index.min.js`],{
      async: true,
      success: function() {
        var options = {"playerOptions":
          {"playbackRates": [0.5, 1, 1.5, 2]}
        };
        var brightcovePlayer = videojs(videoElem, options).ready(function(){
          // label missing 'x' initially on some devices
          if (!!this.controlBar.playbackRateMenuButton.labelEl_.innerHTML) {
            this.controlBar.playbackRateMenuButton.labelEl_.innerHTML = "1x"
          }
        });

        // Always show playback rate (hidden on Android for some reason)
        brightcovePlayer.player().tech_.featuresPlaybackRate = true;

        // selecting services here since setting url overrides Brightcove
        // Studio configuration
          brightcovePlayer.social({
            "url": socialUrl,
            "services": {
              "facebook": true,
              "google": false,
              "twitter": true,
              "linkedin": true,
              "pinterest": false,
              "tumblr": false
            }
          });

        // @todo: remove when we can get rid of colorbox
        if (fullscreen == 'true') {
          var playBtn = document.getElementsByClassName('vjs-big-play-button')[0];
          playBtn.addEventListener('click', function (event) {
            brightcovePlayer.requestFullscreen();
          });

          // make it work in colorbox overlay for mobile
          if( /Android|iPhone|iPad/i.test(navigator.userAgent) ) {
            brightcovePlayer.controlBar.fullscreenToggle.off("click");
            brightcovePlayer.controlBar.playbackRateMenuButton.off("click");
          }
        }


        // for video hero blades
        var videoBlades = document.querySelectorAll(".c-tile__hero");
        videoBlades.forEach(function (el) {
          var player = videojs(el.getElementsByClassName('video-js')[0]);
          var playVideoButton = el.getElementsByClassName('js-video-play-button')[0];
          if (playVideoButton) {
            playVideoButton.addEventListener("click", function (event) {
              event.preventDefault();
              el.getElementsByClassName("c-tile__hero__embed")[0].style.display = "block";
              player.play();
            });
          }
          var closeButton = el.getElementsByClassName('js-close-video')[0];
          if (closeButton) {
            closeButton.addEventListener("click", function () {
              player.pause();
              el.getElementsByClassName("c-tile__hero__embed")[0].style.display = "none";
            });
          }
        });

      },
      error: function(pathsNotFound) { console.log(pathsNotFound)}
    });
  }
});

//require('script!brightcove-player/index.min.js');

//
// skate.define('brightcove-player', {
//
//   created(elem){
//
//     require.ensure([], function(require) {
//         require('script!brightcove-player/index.min.js');
//     });
//
//   },
//
//   prototype: {
//     firePlayer: function(){
//
//     }
//   }
// });