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 = 'Skye Texas Hill Country Resort (TX)';
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 = "Powered by Campground Views";
datePicker.style.height = '100%';
datePicker.style.width = document.getElementById("playerContainer").style.width;
setupBigPlayButton();
}
function setupThreeSixtyPlugin() {
const pluginInData = {
parentId: 3598,
campgroundName: 'Skye Texas Hill Country Resort (TX)',
startDate: new Date(1742601600000),
endDate: new Date(1742774400000),
datePicker: datePicker,
search: search,
resourcesCdnEndpoint: 'https://campgroundviews-assets-ctaufjdtd3hgfzhy.z01.azurefd.net',
playerHost: 'https://360.campgroundviews.com',
supportsAvailability: false,
pinTimelineRangeSec: 5,
isPhone: isIOSDevice,
isAudioEnable: 0 === 1,
showAds: 1 === 2,
editMode: false
}
player.threeSixty(pluginInData);
videoUrl = 'https://campgroundviews-vod-h8emgteqergqcecv.z01.azurefd.net/5fea6a85b9cd441fab3b21a5ee18caf0/7c04488a-7564-486f-a4e2-4fc2fb42b621.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();
}
});