class RamarooUgcWidget {
constructor(source) {
this.source = source;
this.loadCss();
}
initialize(path, path_webm, preview_url, preview_webm, settings, url, videoId) {
if (path && preview_url && settings) {
const mainContainer = document.createElement("div");
mainContainer.classList.add("ramaroo-ugc-container");
mainContainer.classList.add("ramaroo-ugc-hidden");
mainContainer.id = "ramaroo-ugc-container";
mainContainer.innerHTML = `
`;
document.body.appendChild(mainContainer);
// Elements
const ugcWrapper = document.getElementById("ramaroo-ugc-container");
const container = document.getElementById(
"ramaroo-ugc-video-container"
);
const previewContainer = document.getElementById(
"ramaroo-ugc-preview-container"
);
const video = document.getElementById("ramaroo-ugc-video");
const previewVideo = document.getElementById(
"ramaroo-ugc-preview-video"
);
const watermark = document.getElementById("ramaroo-ugc-watermark");
const videoControls = document.getElementById(
"ramaroo-ugc-video-controls"
);
const playButton = document.getElementById("ramaroo-ugc-play");
const playbackIcons = document.querySelectorAll(
".ramaroo-ugc-playback-icons use"
);
const timeElapsed = document.getElementById(
"ramaroo-ugc-time-elapsed"
);
const duration = document.getElementById("ramaroo-ugc-duration");
const progressBar = document.getElementById(
"ramaroo-ugc-progress-bar"
);
const seek = document.getElementById("ramaroo-ugc-player-seek");
const seekTooltip = document.getElementById("ramaroo-seek-tooltip");
const close = document.getElementById("ramaroo-ugc-close");
const expandReview = document.getElementById(
"ramaroo-ugc-open-review"
);
const toggleBtn = document.getElementById(
"toggle-ramaroo-ugc-player"
);
const toggle = document.getElementById("ramaroo-ugc-toggle");
const progressContainer = document.querySelector(
".ramaroo-ugc-video-progress"
);
const timeContainer = document.querySelector(
".ramaroo-ugc-player-time"
);
const closePreview = document.getElementById(
"ramaroo-ugc-close-preview"
);
function _triggerPlayerDelay(delay) {
setTimeout(() => {
ugcWrapper.classList.remove("ramaroo-ugc-hidden");
previewVideo.classList.remove("ramaroo-ugc-hidden");
}, delay);
}
// if (path) {
// console.log("starting....");
// ugcWrapper.classList.remove("ramaroo-ugc-hidden");
// previewVideo.classList.remove("ramaroo-ugc-hidden");
// }
function displayPreview() {
// check if player has delay
if (settings.delayPlayer == 0) {
ugcWrapper.classList.remove("ramaroo-ugc-hidden");
previewVideo.classList.remove("ramaroo-ugc-hidden");
} else {
const delay = settings.delayPlayer * 1000;
_triggerPlayerDelay(delay);
}
}
video.addEventListener("loadedmetadata", (event) => {
if (video.readyState > 0) {
console.log("loaded and ready");
displayPreview();
}
});
video.addEventListener("loadedmetadata", initializeVideo);
const videoWorks = !!document.createElement("video").canPlayType;
const isMobile = !window.matchMedia(
"only screen and (min-width: 768px)"
).matches;
console.log("time: ", video.currentTime);
// if (isMobile) {
// alert("code getting here on mobile...");
// }
// handles click outside event
// document.addEventListener("click", (event) => {
// if (!ugcWrapper.contains(event.target) && video.readyState > 0) {
// container.classList.add("ramaroo-ugc-hidden");
// previewVideo.classList.remove("ramaroo-ugc-hidden");
// previewContainer.classList.remove("ramaroo-ugc-hidden");
// ugcWrapper.classList.remove("ramaroo-video-extended");
// // pause main video and play preview
// video.pause();
// previewVideo.play();
// }
// });
if (videoWorks) {
video.controls = false;
previewVideo.classList.remove("ramaroo-ugc-hidden");
}
function convertToRem(value) {
return (
value /
parseFloat(
getComputedStyle(document.documentElement).fontSize
)
);
}
// update widget settings/styles with user's preference
ugcWrapper.style.fontFamily = settings.fontFamily;
toggleBtn.style.backgroundColor = settings.minimizeButtonColor;
toggleBtn.style.color = settings.minimizeButtonColor
? "#131313"
: toggleBtn.style.color;
// onScreen settings
playbackIcons.forEach(
(element) =>
(element.style.color = settings.onScreenControlsColor
? settings.onScreenControlsColor
: element.style.color)
);
progressBar.style.color = settings.progressBarColor
? settings.progressBarColor
: progressBar.style.color;
seek.style.color = settings.onScreenControlsColor
? settings.onScreenControlsColor
: seek.style.color;
if (isMobile) {
ugcWrapper.style.marginBottom = `${convertToRem(
settings.marginBottomMobile
)}rem`;
toggle.style.marginBottom = `${convertToRem(
settings.marginBottomMobile
)}rem`;
settings.placementOptionMobile == "bottom-right"
? (ugcWrapper.style.right = "15px")
: (ugcWrapper.style.left = "15px");
} else {
ugcWrapper.style.marginBottom = `${convertToRem(
settings.marginBottomDesktop
)}rem`;
toggle.style.marginBottom = `${convertToRem(
settings.marginBottomDesktop
)}rem`;
settings.placementOptionDesktop == "bottom-right"
? ((ugcWrapper.style.right = "20px"),
(toggle.style.right = "15px"),
(toggleBtn.style.right = "20px"))
: ((ugcWrapper.style.left = "20px"),
(ugcWrapper.style.right = "0"),
(toggle.style.left = "15px"),
(toggleBtn.style.left = "20px"));
}
function closePlayer() {
ugcWrapper.classList.remove("ramaroo-video-extended");
ugcWrapper.classList.add("ramaroo-ugc-no-shadow");
ugcWrapper.style.position = "inherit";
container.classList.add("ramaroo-ugc-hidden");
videoControls.classList.add("ramaroo-ugc-hidden");
close.classList.add("ramaroo-ugc-hidden");
playButton.classList.add("ramaroo-ugc-hidden");
video.classList.add("ramaroo-ugc-hidden");
video.pause();
// only show the button
toggle.classList.remove("ramaroo-ugc-hidden");
if ( video.currentTime !== video.duration) {
logViewMilestone(videoId, 'Closed')
}
}
function _showControls() {
video.classList.remove("ramaroo-ugc-hidden");
container.classList.remove("ramaroo-ugc-hidden");
videoControls.classList.remove("ramaroo-ugc-hidden");
close.classList.remove("ramaroo-ugc-hidden");
playButton.classList.remove("ramaroo-ugc-hidden");
watermark.classList.remove("ramaroo-ugc-hidden");
progressContainer.classList.remove("ramaroo-ugc-hidden");
timeContainer.classList.remove("ramaroo-ugc-hidden");
}
function enlargePlayer() {
ugcWrapper.classList.add("ramaroo-video-extended");
toggle.classList.add("ramaroo-ugc-hidden");
// hide preview
previewContainer.classList.add("ramaroo-ugc-hidden");
previewVideo.classList.add("ramaroo-ugc-hidden");
if (isMobile) {
_showControls();
updatePlayButton();
video.load();
video.play();
}
// display video and it's control
_showControls();
updatePlayButton();
video.load();
video.play();
}
function openPlayer() {
ugcWrapper.classList.add("ramaroo-video-extended");
toggle.classList.add("ramaroo-ugc-hidden");
// show the rest
video.classList.remove("ramaroo-ugc-hidden");
if (video.readyState > 0) {
ugcWrapper.style.position = "fixed";
container.classList.remove("ramaroo-ugc-hidden");
videoControls.classList.remove("ramaroo-ugc-hidden");
close.classList.remove("ramaroo-ugc-hidden");
playButton.classList.remove("ramaroo-ugc-hidden");
// load and play video
video.load();
video.play();
}
}
function showControls() {
videoControls.classList.remove("ramaroo-ugc-hidden");
close.classList.remove("ramaroo-ugc-hidden");
playButton.classList.remove("ramaroo-ugc-hidden");
progressContainer.classList.remove("ramaroo-ugc-hidden");
timeContainer.classList.remove("ramaroo-ugc-hidden");
watermark.classList.remove("ramaroo-ugc-hidden");
}
function hideControls() {
if (!video.paused) {
videoControls.classList.add("ramaroo-ugc-hidden");
close.classList.add("ramaroo-ugc-hidden");
playButton.classList.add("ramaroo-ugc-hidden");
progressContainer.classList.add("ramaroo-ugc-hidden");
timeContainer.classList.add("ramaroo-ugc-hidden");
watermark.classList.add("ramaroo-ugc-hidden");
}
}
// toggles playback state of the video
function togglePlay() {
if (video.paused || video.ended) {
seek.value = Math.floor(video.currentTime);
progressBar.value = Math.floor(video.currentTime);
video.play();
} else {
video.pause();
}
}
// update the pause and pay button
function updatePlayButton() {
playbackIcons.forEach((icon) =>
icon.classList.toggle("ramaroo-ugc-hidden")
);
}
// formatTime takes a time in seconds and returns the time in
// minutes and seconds
function formatTime(timeInSeconds) {
const result = new Date(timeInSeconds * 1000)
.toISOString()
.substr(11, 8);
return {
minutes: result.substr(3, 2),
seconds: result.substr(6, 2),
};
}
function logViewMilestone(videoId, state) {
fetch(`${url}/ugcPlayer/${videoId}/${state}`)
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not OK");
}
return response.json();
})
.then((data) => data)
.catch((error) => {
console.error("Network error: ", error);
});
}
// updateTimeElapsed indicates how far through the video
// the current playback is
let is5Seconds = false;
let isCompleted = false;
function updateTimeElapsed() {
const time = formatTime(Math.round(video.currentTime));
if (time.seconds == "05" && !is5Seconds) {
is5Seconds = true;
logViewMilestone(videoId, "AboveFiveMinute");
}
if (video.currentTime == video.duration && !isCompleted) {
isCompleted = true;
logViewMilestone(videoId, "Completed");
}
timeElapsed.innerText = `${time.minutes}:${time.seconds}`;
timeElapsed.setAttribute(
"datetime",
`${time.minutes}m ${time.seconds}s`
);
}
// initializeVideo sets the video duration, and maximum value of the
// progressBar
function initializeVideo(e) {
const videoDuration = Math.round(video.duration);
seek.setAttribute("max", videoDuration);
progressBar.setAttribute("max", videoDuration);
const time = formatTime(videoDuration);
duration.innerText = `${time.minutes}:${time.seconds}`;
duration.setAttribute(
"datetime",
`${time.minutes}m ${time.seconds}s`
);
}
// updateProgress indicates how far through the video
// the current playback is by updating the progress bar
function updateProgress() {
seek.value = Math.floor(video.currentTime + 1);
progressBar.value = Math.floor(video.currentTime + 1);
}
// updateSeekTooltip uses the position of the mouse on the progress bar to
// roughly work out what point in the video the user will skip to if
// the progress bar is clicked at that point
function updateSeekTooltip(event) {
const skipTo = Math.round(
(event.offsetX / event.target.clientWidth) *
parseInt(event.target.getAttribute("max"), 10)
);
seek.setAttribute("data-seek", skipTo);
const t = formatTime(skipTo);
seekTooltip.textContent = `${t.minutes}:${t.seconds}`;
const rect = video.getBoundingClientRect();
seekTooltip.style.left = `${event.pageX - rect.left}px`;
}
function skipAhead(event) {
const skipTo = event.target.dataset.seek
? event.target.dataset.seek
: event.target.value;
video.currentTime = skipTo;
progressBar.value = skipTo;
seek.value = skipTo;
}
function removeVideoPlayer() {
// update the settings in session
// localStorage.setItem('should-close', true);
previewVideo.classList.add("ramaroo-ugc-hidden");
ugcWrapper.classList.add("ramaroo-ugc-no-shadow");
ugcWrapper.classList.add("ramaroo-ugc-hidden");
}
playButton.addEventListener("click", togglePlay);
video.addEventListener("play", updatePlayButton);
video.addEventListener("pause", updatePlayButton);
video.addEventListener("timeupdate", updateTimeElapsed);
video.addEventListener("timeupdate", updateProgress);
container.addEventListener("mouseover", showControls);
container.addEventListener("mouseleave", hideControls);
close.addEventListener("click", closePlayer);
toggle.addEventListener("click", openPlayer);
expandReview.addEventListener("click", enlargePlayer);
seek.addEventListener("mousemove", updateSeekTooltip);
seek.addEventListener("input", skipAhead);
closePreview.addEventListener("click", removeVideoPlayer);
}
}
loadCss() {
let element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
// element.setAttribute("href", `${this.source}/css/external.css`);
element.setAttribute(
"href",
`https://res.cloudinary.com/ramaroo-ugc/raw/upload/v1670854671/scripts/external_zpiwvk.css`
);
document.getElementsByTagName("head")[0].appendChild(element);
}
}
var data = document.querySelector('script[data-name="ugc-video-player"]');
let videoUuid = data.dataset.params;
let source = data.dataset.source;
let wid = new RamarooUgcWidget(source);
fetch(`${source}/ugcUrlPlayer/${videoUuid}?currentUrl=${window.location.href}`)
.then((res) => res.text())
.then((path) => {
let response = JSON.parse(path);
if (response.data.show_video === true) {
wid.initialize(
response.data.video_url,
response.data.video_webm,
response.data.preview_url,
response.data.preview_webm,
response.data.settings,
url = source,
(videoId = videoUuid)
);
}
})
.catch((error) => {
// Report the error
});