From 993aa877762cecc5c3f43acdbffb39198f140b1e Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Mon, 28 Dec 2020 20:55:02 +0100
Subject: [PATCH] use css animations for the progressbar (better performance?)

---
 htdocs/css/openwebrx.css  | 15 +++++++++++++--
 htdocs/lib/ProgressBar.js |  5 ++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 2997348..68ffbb0 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -551,13 +551,23 @@ img.openwebrx-mirror-img
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
+    overflow: hidden;
 }
 
-.openwebrx-progressbar-bar
-{
+.openwebrx-progressbar-bar {
+	background-color: #00aba6;
 	border-radius: 5px;
 	height: 100%;
 	width: 100%;
+	position: absolute;
+	left: -100%;
+	transition-property: left background-color;
+	transition-duration: 1s;
+	transition-timing-function: ease-in-out;
+}
+
+.openwebrx-progressbar--over .openwebrx-progressbar-bar {
+    background-color: #ff6262;
 }
 
 .openwebrx-progressbar-text
@@ -566,6 +576,7 @@ img.openwebrx-mirror-img
 	left:0px;
 	top:4px;
 	width: inherit;
+	z-index: 1;
 }
 
 #openwebrx-panel-status
diff --git a/htdocs/lib/ProgressBar.js b/htdocs/lib/ProgressBar.js
index 691d2ff..71b1754 100644
--- a/htdocs/lib/ProgressBar.js
+++ b/htdocs/lib/ProgressBar.js
@@ -3,7 +3,6 @@ ProgressBar = function(el) {
     this.$innerText = $('<span class="openwebrx-progressbar-text">' + this.getDefaultText() + '</span>');
     this.$innerBar = $('<div class="openwebrx-progressbar-bar"></div>');
     this.$el.empty().append(this.$innerText, this.$innerBar);
-    this.$innerBar.css('width', '0%');
 };
 
 ProgressBar.prototype.getDefaultText = function() {
@@ -19,7 +18,7 @@ ProgressBar.prototype.set = function(val, text, over) {
 ProgressBar.prototype.setValue = function(val) {
     if (val < 0) val = 0;
     if (val > 1) val = 1;
-    this.$innerBar.stop().animate({width: val * 100 + '%'}, 700);
+    this.$innerBar.css({left: (val - 1) * 100 + '%'});
 };
 
 ProgressBar.prototype.setText = function(text) {
@@ -27,7 +26,7 @@ ProgressBar.prototype.setText = function(text) {
 };
 
 ProgressBar.prototype.setOver = function(over) {
-    this.$innerBar.css('backgroundColor', (over) ? "#ff6262" : "#00aba6");
+    this.$el[over ? 'addClass' : 'removeClass']('openwebrx-progressbar--over');
 };
 
 AudioBufferProgressBar = function(el) {