Using Continuous Live Time with the Time Aware Template

[MarissaWalter]

I am working off the latest version of this Time Aware template: GitHub - Esri/time-aware-template: Time Aware is a configurable application template that enables yo...  

And need to modify the template to continuously use real-time data provided by a time-enabled weather service. It is essentially a live looping weather radar. 

Within _displayTime, the following has been modified to use a "real-time" timeExtent. Where endTime  is the current time, and startTime is that time minus 2 hours. 

if (timeProperties.endTime > timeProperties.startTime) {
          timeExtent = new TimeExtent(startTime = new Date(Date.now() - (7200000)), endTime = new Date(Date.now()));
        }‍‍‍‍‍‍‍‍‍

This works well, with the exception that _displayTime is only called once, and the time slider quickly becomes out of date as it continues to loop through the same (old) time extent elsewhere in the template. For now, the application refreshes entirely every 15 minutes to pull a current time extent. 

However, it ideally needs to update to the current endTime every 15 minutes without reloading the entire app. I believe this would be accomplished by shifting the slider forward by 15 minutes (after 15 minutes), and dropping the oldest 15 minute time segment. 

I've tried to leverage this example: javascript - How to programmatically change the timeExtent of a Map & update the timeSlider? - Geogr...

But I am unsure how to reset the timeExtent of the existing time slider in terms of the overall template. I've also tried different variations of timeout functions/setInterval but still unsure how this shift would be accomplished seamlessly.

The template also has the following code on "time-extent-change" and I'm wondering if this is something I need to find a way to use?

        on(timeSlider, "time-extent-change", lang.hitch(this, function(e) {
          if (!e.startTime && e.endTime) {
            console.log("Missing start time");
          }
          this._formatTime(e);
          // Are we at the end?
          var slider = timeSlider._slider,
            val;
          if (lang.isArray(slider.value)) {
            val = slider.value[1];
          } else {
            val = slider.value;
          }
          if (val == slider.maximum && timeSlider.loop !== true) {
            // At slider end so set play buttton
            this._updatePlayButton("icon-play", "icon-pause");
            on.once(dom.byId("playSlider"), "click", function() {
              if (val == slider.maximum) {
                timeSlider.play();
                if (timeSlider.thumbCount > 1) {
                  timeSlider.setThumbIndexes([0, 1]);
                } else {
                  timeSlider.setThumbIndexes(0);
                }
              }
            });
          }
        }));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Does anyone familiar with this template know how this functionality could be added?