<script>
const getMinutesUntilEventStart = (startDate) => {
let nowDate = new Date();
let eventStartDate = new Date(startDate);
let diffMilliseconds = eventStartDate.getTime() - nowDate.getTime();
let diffMinutes = (diffMilliseconds / 60000);
return diffMinutes;
}
const getMinutesUntilEventEnd = (endDate) => {
let nowDate = new Date();
let eventEndDate = new Date(endDate);
let diffMilliseconds = eventEndDate.getTime() - nowDate.getTime();
let diffMinutes = (diffMilliseconds / 60000);
return diffMinutes;
}
const showPastWatchIndicators = () => {
let pastEvents = document.getElementById('scroll-section-3');
let pastCards = Array.from(pastEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < pastCards.length; i++) {
let currCard = pastCards[i];
// Check if event was offline
if (currCard.dataset.offline == "true") {
continue
}
let liveEl = document.createElement("div");
liveEl.classList.add('watch-indicator');
liveEl.innerHTML = "<img class='watch-indicator-icon' src='/download/attachments/81517767/playicon.png?api=v2' /> RECORDED";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
let allEvents = document.getElementById('all-events');
let allCards = Array.from(allEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < allCards.length; i++) {
let currCard = allCards[i];
let currCardEnd = currCard.dataset.enddate;
let minsTilEnd = getMinutesUntilEventEnd(currCardEnd);
if (minsTilEnd < 0) {
// Check if event was offline
if (currCard.dataset.offline == "true") {
continue
}
let liveEl = document.createElement("div");
liveEl.classList.add('watch-indicator');
liveEl.innerHTML = "<img class='watch-indicator-icon' src='/download/attachments/81517767/playicon.png?api=v2' /> RECORDED";
currCard.insertAdjacentElement('afterbegin', liveEl);
} else {
// Live now or upcoming (show live indicator if minsTilStart <= 0)
let currCardStart = currCard.dataset.startdate;
let minsTilStart = getMinutesUntilEventStart(currCardStart);
if (minsTilStart <= 0) {
// Check if event is offline
if (currCard.dataset.offline == "true") {
continue;
}
let liveEl = document.createElement("div");
liveEl.classList.add('live-circle');
liveEl.innerText = "LIVE";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
}
}
}
window.addEventListener('load', () => {
let upcomingEvents = document.getElementById('upcoming-events-section');
let upcomingCards = Array.from(upcomingEvents.getElementsByClassName('eventcard'));
if (upcomingCards.length < 1) {
document.getElementById("upcoming-events-section").classList.add("display-none");
} else for{
document.getElementById("upcoming-events-section").classList.remove("display-none");
}
for (let i = 0; i < upcomingCards.length; i++) {
let currCard = upcomingCards[i];
let currCardStart = currCard.dataset.startdate;
let minsTilStart = getMinutesUntilEventStart(currCardStart);
if (minsTilStart <= 0) {
// Check if event is offline
if (currCard.dataset.offline == "true") {
continue;
}
let liveEl = document.createElement("div");
liveEl.classList.add('live-circle');
liveEl.innerText = "LIVE";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
}
//if (AJS.params.remoteUser == "alex@gsvlabs.com") {
showPastWatchIndicators()
//}
});
</script>
<style>
.live-circle {
font-size: 13px;
padding: 3px 18px;
text-transform: uppercase;
font-weight: bold;
background-color: #cc1f1f;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
box-shadow: 1px 1px 5px #00000054;
}
</style>
<style>
.watch-indicator {
font-size: 12px;
padding: 3px 10px;
text-transform: uppercase;
font-weight: bold;
background-color: #036bc4;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
box-shadow: 1px 1px 5px #00000054;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.watch-indicator-icon {
display: block;
width: 14px !important;
height: 14px !important;
margin-right: 6px;
padding-bottom: 2px;
}
</style> |