2

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
    }
  }


})();
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
klaurtar1
  • 700
  • 2
  • 8
  • 29
  • Using anything other than ISO 8601 formatted date strings in the `Date` constructor is unlikely to work well. See [Why does Date.parse give incorrect results?](https://stackoverflow.com/q/2587345/215552). – Heretic Monkey Apr 13 '20 at 16:51
  • Does this answer your question? [How to initialize a JavaScript Date to a particular time zone](https://stackoverflow.com/questions/15141762/how-to-initialize-a-javascript-date-to-a-particular-time-zone) – Heretic Monkey Apr 13 '20 at 16:53

0 Answers0