Release v2.17.3: roll weather forecasts forward at hour and day boundaries

src/player/regions/weather.js

@@ -36,6 +36,7 @@ function normalizeWeatherExpression(expression) {
 }
 
 function withWeatherUnits(snapshot, location) {
+  if (window.pulseWeatherData) snapshot = window.pulseWeatherData.filterForecastSnapshot(snapshot, location.timezone);
   var data = Object.assign({}, snapshot, { location_label: location.location_label || '', name: location.name || '', timezone: location.timezone || '', temp_unit: location.temperature_unit === 'fahrenheit' ? '°F' : '°C', wind_unit: location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h', precip_unit: location.precipitation_unit === 'inch' ? 'in' : 'mm' });
   var temperatureUnit = location.temperature_unit === 'fahrenheit' ? '°F' : '°C';
   var windUnit = location.wind_unit === 'mph' ? 'mph' : location.wind_unit === 'ms' ? 'm/s' : 'km/h';
@@ -62,6 +63,7 @@ function substituteWeatherVariables(html, value, iconSetId) {
         var alignment = iconMatch[3] || 'middle';
       var style = width ? ' style="display:block;font-size:' + width + 'px;line-height:1;width:' + width + 'px;height:' + height + 'px;"' : '';
         var weatherCode = weatherPlaceholderUtils.resolvePlaceholderExpression(value, codeExpression, { timeZone: value.timezone });
+        if (weatherCode === null || weatherCode === undefined || weatherCode === '') return '';
         var source = window.pulseWeatherIcons && window.pulseWeatherIcons.imageForCode(initialData && initialData.weatherIconSets, iconSetId, weatherCode, window.pulseWeatherIcons.isNightForWeather(value));
         if (source) return window.pulseWeatherIcons.renderImage(source, width, height, alignment);
         var icon = '<i class="bi ' + weatherIconForCode(weatherCode) + '"' + style + ' aria-hidden="true"></i>';
@@ -86,7 +88,8 @@ function renderWeatherRegion(region, regionContent) {
   if (value) {
     var weatherData = withWeatherUnits(snapshot, location);
     var fontSize = Math.max(8, Number(regionContent && regionContent.font_size || region && (region.font_size || region.fontSize) || 32) || 32);
-    return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + 'font-family:Arial,sans-serif;font-size:' + fontSize + 'px;line-height:1.5;">' + renderEditorJsContent(substituteWeatherVariables(value, weatherData, regionContent.weather_icon_set_id)) + '</div></div>';
+    var liveContent = /\{\{\s*(?:hourly|daily)\./.test(value) ? ' data-weather-content="' + escapeHtml(JSON.stringify(regionContent)) + '"' : '';
+    return '<div class="template-region weather"' + liveContent + ' style="' + region.baseStyle + '"><div data-weather-output style="' + style + 'font-family:Arial,sans-serif;font-size:' + fontSize + 'px;line-height:1.5;">' + renderEditorJsContent(substituteWeatherVariables(value, weatherData, regionContent.weather_icon_set_id)) + '</div></div>';
   }
   var daily = snapshot.daily || {};
   var days = (daily.time || []).slice(0, 7).map(function (day, index) {
@@ -95,4 +98,36 @@ function renderWeatherRegion(region, regionContent) {
   return '<div class="template-region weather" style="' + region.baseStyle + '"><div style="' + style + 'padding:3%;font-family:Arial,sans-serif;"><div style="display:flex;align-items:center;justify-content:space-between;"><div><div style="font-size:.8em;opacity:.72;">' + escapeHtml(location.location_label || location.name) + '</div><strong style="font-size:2em;">' + escapeHtml(current.temperature_2m === undefined ? '-' : current.temperature_2m) + '°</strong></div><i class="bi ' + weatherIconForCode(current.weather_code) + '" style="font-size:3em;"></i></div><div style="display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35em;margin-top:1em;">' + days + '</div></div></div>';
 }
 
-weatherRegistry.register('weather', { renderRegion: renderWeatherRegion });
+function initializeWeatherRegions(root) {
+  Array.prototype.forEach.call(root.querySelectorAll('.template-region.weather[data-weather-content]'), function (element) {
+    if (element.__weatherTimer) window.clearTimeout(element.__weatherTimer);
+    var content;
+    try { content = JSON.parse(element.getAttribute('data-weather-content')); } catch (_error) { return; }
+    var previousTimes = null;
+    function tick() {
+      element.__weatherTimer = null;
+      if (!element.isConnected) return;
+      var location = getWeatherLocation(content.weather_location_id);
+      var output = element.querySelector('[data-weather-output]');
+      if (location && location.responseJson && output) {
+        var data = withWeatherUnits(location.responseJson, location);
+        var times = JSON.stringify([data.hourly && data.hourly.time || [], data.daily && data.daily.time || []]);
+        if (times !== previousTimes) {
+          output.innerHTML = renderEditorJsContent(substituteWeatherVariables(content.value, data, content.weather_icon_set_id));
+          previousTimes = times;
+        }
+      }
+      element.__weatherTimer = window.setTimeout(tick, Math.max(1, 60000 - Date.now() % 60000));
+    }
+    tick();
+  });
+}
+
+function destroyWeatherRegions(root) {
+  Array.prototype.forEach.call(root.querySelectorAll('.template-region.weather[data-weather-content]'), function (element) {
+    if (element.__weatherTimer) window.clearTimeout(element.__weatherTimer);
+    element.__weatherTimer = null;
+  });
+}
+
+weatherRegistry.register('weather', { renderRegion: renderWeatherRegion, initRegion: initializeWeatherRegions, destroyRegion: destroyWeatherRegions });