/**
 * [Video Component for Cliplister and Youtube]
 * @return {[type]} [description]
 */

// Cliplister
$.fn.CliplisterView = function () {
  return this.each(function () {
    var elem = $(this);
    var identifier = this.id;
    if (!identifier) {
      identifier = 'clip-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
      this.id = identifier;
    }

    var dataAssets = elem.data('assets');
    var dataVideoId = elem.data('video-id');
    var dataLang = elem.data('lang');
    var dataBackgroundVideo = (elem.data('backgroundvideo') !== undefined ? elem.data('backgroundvideo') : false);
    var dataCustomerID = elem.data('customer-id');
    var autoplay = (elem.data('autoplay') !== undefined ? elem.data('autoplay') : false);
    var previewImage = elem.data('preview-image');
    var playIcon = (elem.data('play-icon') !== undefined ? elem.data('play-icon') : 'https://mycliplister.com/static/viewer/assets/skins/default/playButton.png');

    var options = {
      parentid: identifier,
      customer: dataCustomerID,
      assetkeys: [dataAssets],
      keytype: 0,
      backgroundvideo: dataBackgroundVideo,
      autoplay: autoplay,
      stage: {
        width: '100%',
        aspectRatio: 'asset'
      },
      plugins: {
        ClickableVideo: {
          layer: 2
        },
        PlayButton: {
          id: 'playButton-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5),
          layer: 8,
          image: playIcon,
          width: 100,
          height: 100
        }
      }
    };

    if (dataLang !== undefined) {
      options.languages = [dataLang, '##', 'en'];
    }

    if (!autoplay) {
      $.extend(true, options, {
        plugins: {
          PreviewImage: {
            id: 'custom-preview-image',
            layer: 4,
            image: previewImage
          }
        }
      });
    }

    if (!dataBackgroundVideo) {
      $.extend(true, options, {
        plugins: {
          ClickableVideo: {
            layer: 2
          },
          InnerControls: {
            layer: 2,
            mobileDefaultControls: true,
            id: 'controls',
            blacklist: ['share', 'quality', 'playback-speed'],
            template: {
              type: 'external',
              source: 'https://mycliplister.com/static/viewer/assets/skins/default/controls.html'
            }
          }
        }
      });
    } else {
      $.extend(true, options, {
        plugins: {
          PreviewImage: {
            layer: 6
          }
        }
      });
    }

    // console.dir(options);
    var cl = new Cliplister.Viewer(options);

    if (dataVideoId !== undefined) {
      registerVideoId(this, dataVideoId);
    }
  });
};

var registerVideoOnlyOnce = [];

function registerVideoId(elem, id) {
  elem.api.onReady(function () {
    if (registerVideoOnlyOnce.indexOf(id) === -1) {
      registerVideoOnlyOnce.push(id);
      elem.api.loadAsset(id);
    }
  });
}

$('.video-player').CliplisterView();

// YOUTUBE
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player = [];

var onPlayerReady = function () { };

var onPlayerPlaybackQualityChange = function () { };

var onPlayerStateChange = function (event) {
  if (event.data === YT.PlayerState.PLAYING) {
    // console.log('Playing..');
  } else if (event.data === YT.PlayerState.PAUSED) {
    // console.log('Paused..');
  } else {
    // console.log('Buffering/Video Ended');
  }
};

var onPlayerError = function () { };

window.onYouTubeIframeAPIReady = function () {
  $.fn.ytPlayer = function (options) {
    return this.each(function (i) {
      var elem = $(this);
      var identifier = elem.attr('id');
      var dataAssets = elem.data('assets');
      var dataAutoplay = elem.data('autoplay');
      var dataLoop = elem.data('loop');
      var dataShowinfo = elem.data('showinfo');
      var dataControls = elem.data('controls');
      var dataRel = elem.data('rel');
      var dataBackgroundVideo = elem.data('backgroundvideo');
      var options;

      // default YT options
      var defaults = {
        videoId: dataAssets,
        height: '360',
        width: '640',
        host: 'http://www.youtube-nocookie.com',
        playerVars: {
          'autoplay': 0,
          'loop': 0,
          'showinfo': 0,
          'controls': 1,
          'rel': 0,
          // 'origin': 'https://www.bosch-professional.com',
          'enablejsapi': 1,
          'modestbranding': 1,
          'iv_load_policy': 3
        },
        events: {
          'onReady': onPlayerReady,
          'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
          'onStateChange': onPlayerStateChange,
          'onError': onPlayerError
        }
      };

      options = $.extend({}, defaults, options);

      // YT playerVars
      if (dataAutoplay === 1) {
        options.playerVars.autoplay = 1;
      }
      if (dataLoop === 1) {
        options.playerVars.loop = 1;
        options.playerVars.playlist = dataAssets;
      }
      if (dataShowinfo === 1) {
        options.playerVars.showinfo = 1;
      }
      if (dataControls === 1) {
        options.playerVars.controls = 1;
      }
      if (dataRel === 1) {
        options.playerVars.rel = 1;
      }
      if (dataBackgroundVideo) {
        options.playerVars.controls = 0;
        options.playerVars.loop = 1;
        options.playerVars.playlist = dataAssets;
        options.events.onReady = function (event) {
          event.target.mute();
        };
      }
//console.log(options);
      player[identifier] = new YT.Player(identifier, options);
    });
  };

  $('.ytvideo-player').ytPlayer();
};

(function($){ // create scope and pass specific aliased variables

  $(function($, undefined){ // attach callback to run onready

    $.fn.nativePlayer = function (options) {
      return this.each(function (i) {
        let elem = $(this);
        let identifier = elem.attr('id');
        let dataAssets = elem.data('assets');
        let dataAutoplay = elem.data('autoplay');
        let dataLoop = elem.data('loop');
        let dataControls = elem.data('controls');
        let dataBackgroundVideo = elem.data('backgroundvideo');

        var video = $('<video />', {
          id: 'video_' + identifier,
          src: dataAssets,
          type: 'video/mp4',
          playsinline: true,
          controls: (dataControls === 1 || !dataBackgroundVideo) ? true : false,
          autoplay: (dataAutoplay === 1 || dataBackgroundVideo) ? true : false,
          loop: (dataLoop === 1 || dataBackgroundVideo) ? true : false,
          muted: (dataBackgroundVideo) ? true : false,
          preload: false
        });

        $('#' + identifier).replaceWith(video);

        let player = new MediaElement('video_' + identifier, {
          id: 'video_' + identifier,
          stretching: 'responsive',
        });
      });
    };

    $('.nativevideo-player').nativePlayer();
  });

})(jQuery);