I am creating a countdown timer that displays how many days, hours, minutes, and seconds until April 22nd at 10:30am Central standard time. At 10:20am I want to autoplay a video, and at 10:30am I want to play another video. I have been looking at this code for so long and trying to wrap my head around time zone calculations and UTC that I can't think straight anymore. If I pass the time zone to the new Date object like const end = new Date("April 22, 2020 10:30:00 -0500")
does running .getTime() on this take that time zone in to account and calculate the correct UTC time? Do I need to apply an offset to UTC time to account for my time zone of my computer? No matter where anyone is in the world, I want the videos to only display when time reaches 10:30am Central standard time.
Here is my code:
const countDownVideo = (() => {
const end = new Date("April 22, 2020 10:30:00 -0500"),
demoVideoTime = new Date("April 22, 2020 10:20:00 -0500");
const secondsPerDay = 86400,
secondsPerHour = 3600,
secondsPerMinute = 60;
const $countDown = document.getElementById("countdown");
//flag
let demoVideoDisplayed = 0;
let unixEnd = end.getTime();
console.log("End Time video: " + unixEnd);
let unixDemoVideoTime = demoVideoTime.getTime();
console.log("Demo Video Time Code: " + unixDemoVideoTime);
// let unixNow = (new Date()).getTime(); // 9999999
var timer;
function showRemaining() {
let unixNow = new Date().getTime();
if (unixNow >= unixEnd) {
//Display a video
clearInterval(timer);
$countDown.innerHTML = "";
document.getElementById("videoContainer").innerHTML =
'<iframe width="560" height="315" src="https://www.youtube.com/embed/zmpfs7mWeq8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
console.log("Time is over");
} else if (unixNow >= unixDemoVideoTime) {
//Display demo video
$countDown.innerHTML = `<div>Your main video will begin in: ${calcRemainTime(unixNow).minutes} minutes & ${calcRemainTime(unixNow).seconds} seconds</div>`;
if (demoVideoDisplayed < 1) {
console.log({
demoVideoDisplayed
});
document.getElementById("videoContainer").innerHTML =
'<iframe width="352" height="352" src="https://www.youtube.com/embed/DY5FrHLyC54?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen autoplay></iframe>';
demoVideoDisplayed++;
}
console.log("demo video should be playing");
} else {
//Show the countdown
$countDown.innerHTML = calcRemainTime(unixNow).days + " days ";
$countDown.innerHTML += calcRemainTime(unixNow).hours + " hrs ";
$countDown.innerHTML += calcRemainTime(unixNow).minutes + " mins ";
$countDown.innerHTML += calcRemainTime(unixNow).seconds + " secs";
}
}
timer = setInterval(showRemaining, 1000);
function calcRemainTime(timeNow) {
//Difference between time now and time of end date in seconds
let timeDifference = parseInt((unixEnd - timeNow) / 1000);
// let timeDifferenceArr = [86400, 3600, 60];
//Calculate the amount of days left until end date with remainder
let howManyDays = Math.floor(timeDifference / secondsPerDay); // 9 days
//Shave whole days off and work with hours remainder
let remainHours = timeDifference - howManyDays * secondsPerDay;
let howManyHours = Math.floor(remainHours / secondsPerHour); // 13 hours
//Shave whole hours off and work with hours remainder
let remainMinutes = remainHours - howManyHours * secondsPerHour; //18 min
let howManyMinutes = Math.floor(remainMinutes / secondsPerMinute);
let remainSeconds = remainMinutes - howManyMinutes * secondsPerMinute;
return {
days: howManyDays,
hours: howManyHours,
minutes: howManyMinutes,
seconds: remainSeconds
}
}
})();