const isIOSEmulator = navigator.appVersion.includes('iPad') || navigator.appVersion.includes('iPhone') || navigator.appVersion.includes('iPod') ? true : false;
const isIOSDevice = (/iPad|iPhone|iPod/.test(navigator.platform) || isIOSEmulator ||
  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&
  !window.MSStream;

const campgroundName = 'Coral Sands RV Park';
const datePicker = document.getElementById("cgvDatesPicker");
const search = document.getElementById("cgvSearch");
const cgvCInfo = document.getElementById("cgvCampgroundInfo");
const cgvPLink = document.getElementById("cgvPoweredLink");
const playerDiv = document.getElementById('playerContainer');
let granted = false;

function iOSPermission() {
  if (typeof (DeviceOrientationEvent) !== "undefined" && typeof (DeviceOrientationEvent).requestPermission === "function") {
    if (granted == false) {
      DeviceOrientationEvent.requestPermission()
        .then(response => {
          if (response == "granted") {
            window.addEventListener("deviceorientation", (e) => { });
            granted = true;
          }
        }).catch(console.error)
    }
  }
}

function setupBigPlayButton(){

  player.addChild('BigPlayButton');

  // TODO: quick fix for vjs start-stop on load.
  player.on('pause', function () {
    if (player.currentTime() < 1) {
      document.querySelector(".vjs-big-play-button").style.display = "block";
    }
  });

  player.on('play', function () {
    document.querySelector(".vjs-big-play-button").style.display = "none";
  });
}

function setupIosFullscreen(){
  player.on('enterFullWindow', function (e) {
    var renderedCanvas = document.getElementsByTagName("canvas")[0];
    if (player.isFullscreen()) {
      var parentEl = renderedCanvas.parentElement;
      var postionInfo = parentEl.getBoundingClientRect();
      renderedCanvas.setAttribute("width", postionInfo.width.toString());
      renderedCanvas.setAttribute("height", postionInfo.height.toString());
    }
  });

  player.on('exitFullWindow', function (e) {
    var renderedCanvas = document.getElementsByTagName("canvas")[0];
    if (!player.isFullscreen()) {
      var parentEl = renderedCanvas.parentElement;
      var postionInfo = parentEl.getBoundingClientRect();
      renderedCanvas.setAttribute("width", postionInfo.width.toString());
      renderedCanvas.setAttribute("height", postionInfo.height.toString());
    }
  });
}

function setupPlayerComponents(){

  if (isIOSDevice) {
    var btnOrientation = document.createElement('button');
    btnOrientation.setAttribute('id', 'request');
    btnOrientation.setAttribute('class', 'orientation-button');
    btnOrientation.innerHTML = 'Request device orientation access';
    btnOrientation.addEventListener('click', iOSPermission);
    playerDiv.append(btnOrientation);
  }

  cgvCInfo.style.display = 'block';
  cgvPLink.style.display = 'block';
  cgvCInfo.innerHTML = campgroundName;
  cgvPLink.innerHTML = "<a href='https://www.campgroundviews.com/' target='_blank'>Powered by Campground Views</a>";
  datePicker.style.height = '100%';
  datePicker.style.width = document.getElementById("playerContainer").style.width;
  
  setupBigPlayButton();
}

function setupThreeSixtyPlugin() {
  const pluginInData = {
    parentId: 2906,
    campgroundName: 'Coral Sands RV Park',
    startDate: new Date(1738800000000),
    endDate: new Date(1738972800000),
    datePicker: datePicker,
    search: search,
    resourcesCdnEndpoint: 'https://campgroundviews-assets-ctaufjdtd3hgfzhy.z01.azurefd.net',
    playerHost: 'https://360.campgroundviews.com',
    supportsAvailability: false,
    pinTimelineRangeSec: 4,
    isPhone: isIOSDevice,
    isAudioEnable: 1 === 1,
    showAds: 1 === 2
  }

  player.threeSixty(pluginInData);

  videoUrl = 'https://campgroundviews-vod-h8emgteqergqcecv.z01.azurefd.net/be4a28db03a64c8db8b98857f0e1f810/8577b787-0e33-45fa-81fd-4b80f80dea90.m3u8';
  player.src({ src: videoUrl, type: 'application/vnd.apple.mpegurl' });
}

const vjsOptions = {
  nativeControlsForTouch: false,
  fill: true,
  playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
  inactivityTimeout: 0,
  controlBar: {
    pictureInPictureToggle: false,
    volumePanel: { inline: false },
    fullscreenToggle: true,
    subsCapsButton: false
  },
  techOrder: ["html5"],
  html5: {
    vhs: {
      smoothQualityChange: true,
      limitRenditionByPlayerDimensions: false,
      blacklistDuration: 15
    }
  },
  preferFullWindow: isIOSDevice,
  fullscreen: {
    options: { navigationUI: 'show' }
  }
};

const player = videojs('player', vjsOptions, function () {
  
  setupThreeSixtyPlugin();
  
  player.hlsQualitySelector({
    displayCurrentQuality: true,
    placementIndex: 11
  });

  setupPlayerComponents();

  if(isIOSDevice){
    setupIosFullscreen();
  }

});