improve autoplay interface

This commit is contained in:
Jakob Ketterl 2019-11-01 16:58:36 +01:00
parent d49fff65e4
commit 9163f3d30e
3 changed files with 24 additions and 20 deletions

View File

@ -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;*/

View File

@ -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;">

View File

@ -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) {