From 979f11f40a2ce981a22167eae94a43f8255e82eb Mon Sep 17 00:00:00 2001
From: Jakob Ketterl <jakob.ketterl@gmx.de>
Date: Sun, 16 May 2021 17:47:02 +0200
Subject: [PATCH] move play button to svg-defs

---
 htdocs/css/openwebrx.css                 |  3 +-
 htdocs/gfx/openwebrx-play-button.svg     |  1 -
 htdocs/gfx/svg-defs.svg                  |  1 +
 htdocs/index.html                        |  6 +++
 htdocs/openwebrx.js                      | 11 +---
 inkscape files/openwebrx-play-button.svg | 67 ++++++++++++++++++++++++
 6 files changed, 77 insertions(+), 12 deletions(-)
 delete mode 100644 htdocs/gfx/openwebrx-play-button.svg
 create mode 100644 inkscape files/openwebrx-play-button.svg

diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css
index 2021331..da93283 100644
--- a/htdocs/css/openwebrx.css
+++ b/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;
 }
 
diff --git a/htdocs/gfx/openwebrx-play-button.svg b/htdocs/gfx/openwebrx-play-button.svg
deleted file mode 100644
index 6e16734..0000000
--- a/htdocs/gfx/openwebrx-play-button.svg
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/htdocs/gfx/svg-defs.svg b/htdocs/gfx/svg-defs.svg
index 2ed1d29..5b5c6d7 100644
--- a/htdocs/gfx/svg-defs.svg
+++ b/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>
\ No newline at end of file
diff --git a/htdocs/index.html b/htdocs/index.html
index 3f67df7..5fa9fbc 100644
--- a/htdocs/index.html
+++ b/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>
diff --git a/htdocs/openwebrx.js b/htdocs/openwebrx.js
index 09727f7..39f48d4 100644
--- a/htdocs/openwebrx.js
+++ b/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();
     }
diff --git a/inkscape files/openwebrx-play-button.svg b/inkscape files/openwebrx-play-button.svg
new file mode 100644
index 0000000..5d7b756
--- /dev/null
+++ b/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>