From 9163f3d30e306ea0b8cdd0fa2e10e13dcdb857a0 Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Fri, 1 Nov 2019 16:58:36 +0100
Subject: [PATCH] improve autoplay interface

---
 htdocs/css/openwebrx.css | 15 ++++++++++-----
 htdocs/index.html        |  8 ++++----
 htdocs/openwebrx.js      | 21 ++++++++++-----------
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index a280c3a..659dffd 100644
--- a/htdocs/css/openwebrx.css
+++ b/htdocs/css/openwebrx.css
@@ -645,7 +645,7 @@ img.openwebrx-mirror-img
 	font-family: 'expletus-sans-medium';
 }
 
-#openwebrx-big-grey
+#openwebrx-autoplay-overlay
 {
 	position: fixed;
 	width: 100%;
@@ -657,9 +657,6 @@ img.openwebrx-mirror-img
 	left: 0;
 	top: 0;
 	z-index: 1001;
-	display: none;
-	vertical-align: middle;
-	text-align: center;
 	color: white;
 	font-weight: bold;
 	font-size: 20pt;
@@ -667,11 +664,19 @@ img.openwebrx-mirror-img
 	transition: opacity 0.3s linear;
 }
 
-#openwebrx-big-grey img
+#openwebrx-autoplay-overlay img
 {
 	width: 150px;
 }
 
+#openwebrx-autoplay-overlay .overlay-content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
 #openwebrx-digimode-canvas-container
 {
 	/*margin: -10px -10px 10px -10px;*/
diff --git a/htdocs/index.html b/htdocs/index.html
index 83d21bd..6254e83 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -214,10 +214,10 @@
         </div>
     </div>
 </div>
-    <div id="openwebrx-big-grey" onclick="playButtonClick();">
-        <div id="openwebrx-play-button-text">
-        <img id="openwebrx-play-button" src="static/gfx/openwebrx-play-button.png" />
-        <br /><br />Start OpenWebRX
+    <div id="openwebrx-autoplay-overlay" xstyle="display:none;">
+        <div class="overlay-content">
+            <img id="openwebrx-play-button" src="static/gfx/openwebrx-play-button.png" />
+            <div>Start OpenWebRX</div>
         </div>
     </div>
     <div id="openwebrx-dialog-bookmark" class="openwebrx-dialog" style="display:none;">
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index bf4a2bf..f161dfa 100644
--- a/htdocs/openwebrx.js
+++ b/htdocs/openwebrx.js
@@ -1422,7 +1422,7 @@ function divlog(what, is_error) {
     was_error |= is_error;
     if (is_error) {
         what = "<span class=\"webrx-error\">" + what + "</span>";
-        if (e("openwebrx-panel-log").openwebrxHidden) toggle_panel("openwebrx-panel-log"); //show panel if any error is present
+        toggle_panel("openwebrx-panel-log", true); //show panel if any error is present
     }
     e("openwebrx-debugdiv").innerHTML += what + "<br />";
     var nano = $('.nano');
@@ -1474,9 +1474,7 @@ function onAudioStart(success, apiType){
 
     //hide log panel in a second (if user has not hidden it yet)
     window.setTimeout(function () {
-        if (typeof e("openwebrx-panel-log").openwebrxHidden === "undefined" && !was_error) {
-            toggle_panel("openwebrx-panel-log");
-        }
+        toggle_panel("openwebrx-panel-log", !!was_error);
     }, 2000);
 
     //Synchronise volume with slider
@@ -1918,10 +1916,10 @@ var audioEngine;
 
 function openwebrx_init() {
     audioEngine = new AudioEngine(audio_buffer_maximal_length_sec, audioReporter);
+    $overlay = $('#openwebrx-autoplay-overlay');
+    $overlay.on('click', playButtonClick);
     if (!audioEngine.isAllowed()) {
-        e("openwebrx-big-grey").style.display = "table-cell";
-        var opb = e("openwebrx-play-button-text");
-        opb.style.marginTop = (window.innerHeight / 2 - opb.clientHeight / 2).toString() + "px";
+        $overlay.show();
     } else {
         audioEngine.start(onAudioStart);
     }
@@ -1973,10 +1971,11 @@ function update_dmr_timeslot_filtering() {
 function playButtonClick() {
     //On iOS, we can only start audio from a click or touch event.
     audioEngine.start(onAudioStart);
-    e("openwebrx-big-grey").style.opacity = 0;
-    window.setTimeout(function () {
-        e("openwebrx-big-grey").style.display = "none";
-    }, 1100);
+    $overlay = $('#openwebrx-autoplay-overlay');
+    $overlay.css('opacity', 0);
+    $overlay.on('transitionend', function() {
+        $overlay.hide();
+    });
 }
 
 var rt = function (s, n) {