var hashIdArray_{{uid}} = c8PlayerApi.getWidgetProp("videoList"); var sidebarPosition_{{uid}} = c8PlayerApi.getWidgetProp("sidebarPosition"); var getRuntime_{{uid}} = c8PlayerApi.getRuntime(); var videosContent_{{uid}} = ""; var getWidgetCurrentPosition_{{uid}} = document.querySelector(".gplayer-templated-form").style.left; var isControlsVisible_{{uid}} = $(".ext-video-controls").css("display") === "block"; // Set Icon Hover Text Position if (parseInt(getWidgetCurrentPosition_{{uid}}) > 50) { $(".open-icon-{{uid}} span").addClass("near-right-{{uid}}"); } else { $(".open-icon-{{uid}} span").addClass("near-left-{{uid}}"); } // Set Sidebar Position switch (sidebarPosition_{{uid}}) { case "Left": $(".sidebar-wrapper-{{uid}}").addClass("sidebar-left-{{uid}}"); break; default: $(".sidebar-wrapper-{{uid}}").addClass("sidebar-right-{{uid}}"); break; } // GSAP var tl_{{uid}} = gsap.timeline({ paused: true }); tl_{{uid}}.to(".open-icon-{{uid}}", { opacity: 1, duration: 0.2, ease: "none", }); tl_{{uid}}.play(); // onMouse Move Event Listener var timeout_{{uid}}; var currentVisibilty_{{uid}} = true; ["mousemove", "click"].forEach(function (e) { window.addEventListener(e, control_{{uid}}); }); function control_{{uid}}() { clearTimeout(timeout_{{uid}}); var isSidebarOpen = $(".open-icon-{{uid}}").hasClass("d-none-{{uid}}"); if (!isSidebarOpen) { if (!currentVisibilty_{{uid}}) { c8PlayerApi.setVisible(); tl_{{uid}}.restart(); } else { timeout_{{uid}} = setTimeout(function () { tl_{{uid}}.reverse().then(() => { c8PlayerApi.setInvisible(); }); }, 2400); } } } /* *** FETCH AND CREATE VIDEOS LIST */ var requests_{{uid}} = hashIdArray_{{uid}}.map((hash) => { var hashWithoutSpaces = hash.replaceAll(" ", ""); var hashWithoutURL = hashWithoutSpaces.replace( "https://cinema8.com/video/", "" ); var hashId = hashWithoutURL.replaceAll("/", ""); return fetch(`https://cinema8.com/api/v1/uscene/${hashId}`); }); Promise.all(requests_{{uid}}) .then((responses) => Promise.all(responses.map((v) => v.json()))) .then((videoListData) => videoListData.forEach((video) => { if (video.status == 404) { videosContent_{{uid}} += `

INVALID PROJECT URL

`; } else { console.log("--", video); var videoDuration = video.mediaContent.duration; videosContent_{{uid}} += `

${calculateVideoDuration_{{uid}}(videoDuration)}

${video.name}

${video.description == null ? '' : video.description}

`; } $(".videos-{{uid}}").html(videosContent_{{uid}}); }) ) .then(() => { $(".videos-{{uid}} li").each(function () { $(this).on("click", function () { var linkId = $(this).data("linkId"); window.location.href = `https://cinema8.com/video/${linkId}`; }); }); }); /* *** USEFUL FUNCTIONS */ if (getRuntime_{{uid}} === "PLAYER") { // Sidebar Open $(".open-icon-{{uid}}").click(() => { if(isControlsVisible_{{uid}}){ c8PlayerApi.hideControls(); } $(".sidebar-wrapper-{{uid}}").addClass("open-{{uid}}"); $(".open-icon-{{uid}}").addClass("d-none-{{uid}}"); $(".bg-overlay-{{uid}}").removeClass("d-none-{{uid}}"); }); } // Sidebar Close AND Backgrund Overlay Click Action $(".close-icon-{{uid}} svg, .bg-overlay-{{uid}}").click(() => { $(".sidebar-wrapper-{{uid}}").removeClass("open-{{uid}}"); $(".open-icon-{{uid}}").removeClass("d-none-{{uid}}"); $(".bg-overlay-{{uid}}").addClass("d-none-{{uid}}"); if(isControlsVisible_{{uid}}){ c8PlayerApi.showControls(); } }); function calculateVideoDuration_{{uid}}(seconds) { var format = (val) => `0${Math.floor(val)}`.slice(-2); var hours = seconds / 3600; var minutes = (seconds % 3600) / 60; if (hours < 1) { return [minutes, seconds % 60].map(format).join(":"); } else { return [hours, minutes, seconds % 60].map(format).join(":"); } } // on Visibility Chnage Control c8PlayerApi.on("visibilityChange", function (visible) { currentVisibilty_{{uid}} = visible; }); control_{{uid}}()

Name	Type	Default Value
Icon Image	Image
Title	Text	-
Project URL List	Text List	https://cinema8.com/video/VX3W7ZX4
Sidebar Position	Select	Right Left
Primary Color	Color	rgba(11,11,11,0.8)
Secondary Color	Color	rgba(255,255,255,1)

Smart Streamer

Interaction Designer

Smart Streamer

Interaction Designer

Sidebar Video Cards

Category