Release v2.11.1

src/player/public/css/player.css

@@ -32,6 +32,45 @@ body.onboarding-page #app {
   position: relative;
 }
 
+.api-progress {
+  --bs-progress-height: 1rem;
+  --bs-progress-font-size: 0.75rem;
+  --bs-border-radius: 0.375rem;
+  --bs-progress-border-radius: 0.375rem;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  height: var(--bs-progress-height);
+  overflow: hidden;
+  font-size: var(--bs-progress-font-size);
+  border-radius: var(--bs-progress-border-radius);
+}
+
+.api-progress > .progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #0d6efd;
+}
+
+.api-progress > .progress-bar-striped {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: var(--bs-progress-height) var(--bs-progress-height);
+}
+
+.api-progress > .progress-bar-animated {
+  animation: api-progress-bar-stripes 1s linear infinite;
+}
+
+@keyframes api-progress-bar-stripes {
+  from { background-position-x: var(--bs-progress-height); }
+  to { background-position-x: 0; }
+}
+
 .onboarding-shell {
   min-height: 100%;
   display: flex;

src/player/regions/api.js

@@ -68,6 +68,9 @@ function substituteApiVariables(html, item, sourceId) {
     }
 
     var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+    if (typeof placeholderUtils.isProgressPlaceholderExpression === 'function' && placeholderUtils.isProgressPlaceholderExpression(expression)) {
+      return placeholderUtils.renderProgressPlaceholder(item, expression);
+    }
     if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
       var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
       var source = getApiSourceById(sourceId);

src/player/regions/rss.js

@@ -74,6 +74,9 @@ function substituteRssVariables(html, item, feedId) {
       return '';
     }
     var resolved = placeholderUtils.resolvePlaceholderExpression(item, expression);
+    if (typeof placeholderUtils.isProgressPlaceholderExpression === 'function' && placeholderUtils.isProgressPlaceholderExpression(expression)) {
+      return placeholderUtils.renderProgressPlaceholder(item, expression);
+    }
     if (typeof placeholderUtils.isImagePlaceholderExpression === 'function' && placeholderUtils.isImagePlaceholderExpression(expression)) {
       var imageSource = placeholderUtils.formatPlaceholderValue(resolved);
       var feed = getRssFeedById(feedId);

src/player/regions/timetable.js

@@ -13,6 +13,9 @@ function substituteTimetableVariables(html, entry) {
       return '';
     }
 
+    if (typeof window.placeholderUtils.isProgressPlaceholderExpression === 'function' && window.placeholderUtils.isProgressPlaceholderExpression(expression)) {
+      return window.placeholderUtils.renderProgressPlaceholder(entry, expression);
+    }
     return escapeHtml(window.placeholderUtils.formatPlaceholderValue(window.placeholderUtils.resolvePlaceholderExpression(entry, expression)));
   });
 }

src/player/regions/weather.js

@@ -51,6 +51,9 @@ function substituteWeatherVariables(html, value) {
     if (!value || typeof value !== 'object' || typeof weatherPlaceholderUtils.resolvePlaceholderExpression !== 'function' || typeof weatherPlaceholderUtils.formatPlaceholderValue !== 'function') return '';
     var rawExpression = String(expression).trim();
     var normalizedExpression = normalizeWeatherExpression(rawExpression);
+    if (typeof weatherPlaceholderUtils.isProgressPlaceholderExpression === 'function' && weatherPlaceholderUtils.isProgressPlaceholderExpression(rawExpression)) {
+      return weatherPlaceholderUtils.renderProgressPlaceholder(value, rawExpression);
+    }
     var iconMatch = normalizedExpression.match(/^(?:current\.weather_code|daily\.weather_code\.\d+|hourly\.weather_code\.\d+)\.icon(?:\((\d+)(?:\s*,\s*(\d+))?\))?$/);
     if (iconMatch) {
       var codeExpression = normalizedExpression.replace(/\.icon(?:\(.*\))?$/, '');