move play button to svg-defs

htdocs/css/openwebrx.css

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

htdocs/gfx/openwebrx-play-button.svg

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

htdocs/gfx/svg-defs.svg

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

htdocs/index.html

@@ -166,6 +166,12 @@
         </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">
             <div>This receiver is currently unavailable due to technical issues.</div>

htdocs/openwebrx.js

@@ -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();
     }

inkscape files/openwebrx-play-button.svg

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