move play button to svg-defs

This commit is contained in:
Jakob Ketterl 2021-05-16 17:47:02 +02:00
parent a04f198ade
commit 979f11f40a
6 changed files with 77 additions and 12 deletions

View File

@ -781,8 +781,7 @@ img.openwebrx-mirror-img
transition: opacity 0.3s linear;
}
#openwebrx-autoplay-overlay img
{
#openwebrx-autoplay-overlay svg {
width: 150px;
}

View File

@ -1 +0,0 @@
<svg width="700" height="700" xmlns="http://www.w3.org/2000/svg"><g class="layer"><circle cx="350" cy="350" r="330" stroke="#fff" stroke-width="36" fill="none"/><path d="M195 211v278l366-139-366-139z" fill="#fff"/></g></svg>

Before

Width:  |  Height:  |  Size: 224 B

View File

@ -21,5 +21,6 @@
<g id="rx-details-arrow-down"><path d="M5 0C2.5 0 0 2.5 0 5v7h43V5c0-2.5-2.5-5-5-5zm8 4h17l-8.5 6.5z" fill="#999" fill-opacity=".196"/><path d="M13 4h17l-8.5 6.5z" fill="#848484" fill-opacity=".592"/></g>
<g id="rx-details-arrow-up"><path d="M5 0C2.5 0 0 2.5 0 5v7h43V5c0-2.5-2.5-5-5-5zm16.5 3L30 9.5H13z" fill="#999" fill-opacity=".196"/><path d="M30 9.5H13L21.5 3z" fill="#848484" fill-opacity=".592"/></g>
<g id="maps-pin" transform="translate(-965.78 -331.788) scale(1.1856)"><path d="M817.11 282.97c-1.258 1.343-2.046 3.299-2.016 5.139.064 3.845 1.797 5.3 4.569 10.592.998 2.328 2.04 4.792 3.031 8.873.138.602.272 1.16.334 1.21.062.048.197-.513.334-1.115.991-4.081 2.033-6.543 3.032-8.872 2.77-5.291 4.504-6.747 4.568-10.592.03-1.84-.76-3.797-2.018-5.14-1.437-1.534-3.605-2.67-5.916-2.717-2.311-.047-4.48 1.088-5.918 2.622z" fill="#ff4646" stroke="#d73534"/><circle cx="823.03" cy="288.25" r="3.035" fill="#590000"/></g>
<g id="play-button"><circle cx="350" cy="350" r="330" fill="none" stroke="#fff" stroke-width="36"/><path d="M195 211v278l366-139z" fill="#fff"/></g>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -165,6 +165,12 @@
</div>
</div>
</div>
</div>
<div id="openwebrx-autoplay-overlay" class="openwebrx-overlay" style="display:none;">
<div class="overlay-content">
<svg viewBox="0 0 700 700"><use xlink:href="static/gfx/svg-defs.svg#play-button"></use></svg>
<div>Start OpenWebRX</div>
</div>
</div>
<div id="openwebrx-error-overlay" class="openwebrx-overlay" style="display:none;">
<div class="overlay-content">

View File

@ -1213,19 +1213,12 @@ var audioEngine;
function openwebrx_init() {
audioEngine = new AudioEngine(audio_buffer_maximal_length_sec, audioReporter);
$('body').on('click', '#openwebrx-autoplay-overlay', function(){
var $overlay = $('#openwebrx-autoplay-overlay');
$overlay.on('click', function(){
audioEngine.resume();
});
audioEngine.onStart(onAudioStart);
if (!audioEngine.isAllowed()) {
var $overlay = $(
'<div id="openwebrx-autoplay-overlay" class="openwebrx-overlay" style="display:none;">' +
'<div class="overlay-content">' +
'<img id="openwebrx-play-button" src="static/gfx/openwebrx-play-button.svg" />' +
'<div>Start OpenWebRX</div>' +
'</div>' +
'</div>'
);
$('body').append($overlay);
$overlay.show();
}

View File

@ -0,0 +1,67 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="700"
height="700"
version="1.1"
id="svg4652"
sodipodi:docname="openwebrx-play-button.svg"
inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
<metadata
id="metadata4658">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4656" />
<sodipodi:namedview
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2560"
inkscape:window-height="1381"
id="namedview4654"
showgrid="false"
inkscape:pagecheckerboard="true"
inkscape:zoom="1.4657143"
inkscape:cx="350"
inkscape:cy="350"
inkscape:window-x="0"
inkscape:window-y="348"
inkscape:window-maximized="1"
inkscape:current-layer="svg4652" />
<g
class="layer"
id="g4650">
<circle
cx="350"
cy="350"
r="330"
stroke="#fff"
stroke-width="36"
fill="none"
id="circle4646" />
<path
d="M195 211v278l366-139-366-139z"
fill="#fff"
id="path4648" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB