Add Android app wrapper around web interface

1 files changed, 107 insertions, 20 deletions

diff --git a/doc/diagram.drawio b/doc/diagram.drawio
index 3c37bc7..62d4789 100644
--- a/doc/diagram.drawio
+++ b/doc/diagram.drawio
@@ -1,4 +1,4 @@
-<mxfile host="Electron" modified="2025-02-25T14:57:34.998Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="YTK2v8-32YjVXFJp_mJd" version="22.1.2" type="device" pages="2">
+<mxfile host="Electron" modified="2025-12-31T14:40:34.185Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.1.2 Chrome/114.0.5735.289 Electron/25.9.4 Safari/537.36" etag="L9KHjWv5AXX6uLd6jYx6" version="22.1.2" type="device" pages="3">
   <diagram id="PyNSc7ezSt42GBdjTBvd" name="Launchpad">
     <mxGraphModel dx="1562" dy="963" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
@@ -200,26 +200,20 @@
     </mxGraphModel>
   </diagram>
   <diagram id="R-0UAU87gWX4lK6NCzNs" name="Web wireframe">
-    <mxGraphModel dx="1302" dy="803" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+    <mxGraphModel dx="1562" dy="963" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
         <mxCell id="0goJ5iq8U8227kam6OUo-1" value="Key point list" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="160" y="80" width="80" height="240" as="geometry" />
-        </mxCell>
-        <mxCell id="0goJ5iq8U8227kam6OUo-2" value="Volume slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="380" y="280" width="260" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="0goJ5iq8U8227kam6OUo-3" value="Speed" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="280" y="280" width="60" height="40" as="geometry" />
+          <mxGeometry x="680" y="80" width="80" height="280" as="geometry" />
         </mxCell>
-        <mxCell id="0goJ5iq8U8227kam6OUo-4" value="Speed +5" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="340" y="280" width="40" height="40" as="geometry" />
+        <mxCell id="0goJ5iq8U8227kam6OUo-2" value="Song volume slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="280" width="440" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="0goJ5iq8U8227kam6OUo-5" value="Speed -5" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="240" y="280" width="40" height="40" as="geometry" />
+        <mxCell id="0goJ5iq8U8227kam6OUo-3" value="Speed slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="240" y="320" width="320" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="E9TFIlIWBKXALOEyTYeL-1" value="Seek slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+        <mxCell id="E9TFIlIWBKXALOEyTYeL-1" value="Song seek slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
           <mxGeometry x="240" y="120" width="440" height="40" as="geometry" />
         </mxCell>
         <mxCell id="E9TFIlIWBKXALOEyTYeL-2" value="Prev song" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
@@ -231,20 +225,113 @@
         <mxCell id="2VOf0fCjGpZdvwMfuWx9-2" value="Key point slider" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
           <mxGeometry x="240" y="160" width="440" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="e5je7AeTKV-z7aj2oazw-2" value="Stop" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+        <mxCell id="e5je7AeTKV-z7aj2oazw-2" value="Play/pause" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
           <mxGeometry x="320" y="200" width="80" height="80" as="geometry" />
         </mxCell>
-        <mxCell id="e5je7AeTKV-z7aj2oazw-3" value="Play/pause" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+        <mxCell id="e5je7AeTKV-z7aj2oazw-3" value="Set" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
           <mxGeometry x="400" y="200" width="100" height="80" as="geometry" />
         </mxCell>
         <mxCell id="e5je7AeTKV-z7aj2oazw-4" value="Jump" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
           <mxGeometry x="500" y="200" width="100" height="80" as="geometry" />
         </mxCell>
-        <mxCell id="ZINFS9bsx5oSfdTS2e79-1" value="Full&lt;br&gt;screen" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-          <mxGeometry x="640" y="280" width="40" height="40" as="geometry" />
+        <mxCell id="ZINFS9bsx5oSfdTS2e79-1" value="Full&lt;br&gt;screen" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="640" y="80" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="ZINFS9bsx5oSfdTS2e79-4" value="Song name" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
+          <mxGeometry x="280" y="80" width="280" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="FSXJR3qsPtWyKxkSXf7B-4" value="Save" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="600" y="80" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="FSXJR3qsPtWyKxkSXf7B-5" value="Home" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="560" y="80" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="FSXJR3qsPtWyKxkSXf7B-6" value="Burger" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="240" y="80" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="FSXJR3qsPtWyKxkSXf7B-1" value="Song list" style="rounded=0;whiteSpace=wrap;html=1;strokeColor=default;dashed=1;fillColor=default;" vertex="1" parent="1">
+          <mxGeometry x="120" y="80" width="120" height="280" as="geometry" />
+        </mxCell>
+        <mxCell id="K_0XtMrkDRZaAgXwCXOi-3" value="Play" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="600" y="320" width="40" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="ZINFS9bsx5oSfdTS2e79-4" value="Song name" style="text;html=1;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
-          <mxGeometry x="240" y="80" width="440" height="40" as="geometry" />
+        <mxCell id="K_0XtMrkDRZaAgXwCXOi-4" value="Rec" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="560" y="320" width="40" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="K_0XtMrkDRZaAgXwCXOi-6" value="Up" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="640" y="320" width="40" height="40" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+  <diagram id="Y4Ghim34UWfIzGFWpSIp" name="Recording state machine">
+    <mxGraphModel dx="1562" dy="963" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-3" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;" edge="1" parent="1" source="m4dBRZqiv5qoeC6Vf523-1" target="m4dBRZqiv5qoeC6Vf523-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-6" value="Click record" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="m4dBRZqiv5qoeC6Vf523-3">
+          <mxGeometry x="-0.325" y="-1" relative="1" as="geometry">
+            <mxPoint x="1" y="13" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-10" value="" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="m4dBRZqiv5qoeC6Vf523-1" target="m4dBRZqiv5qoeC6Vf523-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-14" value="Click play" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="m4dBRZqiv5qoeC6Vf523-10">
+          <mxGeometry x="-0.0993" y="-1" relative="1" as="geometry">
+            <mxPoint x="-19" y="26" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="h-RRU4YisuIuMyhp2gHc-6" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="m4dBRZqiv5qoeC6Vf523-1" target="h-RRU4YisuIuMyhp2gHc-5">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h-RRU4YisuIuMyhp2gHc-7" value="Click upload" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="h-RRU4YisuIuMyhp2gHc-6">
+          <mxGeometry x="0.21" y="4" relative="1" as="geometry">
+            <mxPoint x="-38" y="14" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-1" value="Idle" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="280" y="120" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="h-RRU4YisuIuMyhp2gHc-3" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="m4dBRZqiv5qoeC6Vf523-2" target="m4dBRZqiv5qoeC6Vf523-9">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="h-RRU4YisuIuMyhp2gHc-4" value="Click play" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="h-RRU4YisuIuMyhp2gHc-3">
+          <mxGeometry x="-0.1429" y="-1" relative="1" as="geometry">
+            <mxPoint x="-30" y="11" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-2" value="Recording" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1">
+          <mxGeometry x="280" y="280" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="m4dBRZqiv5qoeC6Vf523-9" target="m4dBRZqiv5qoeC6Vf523-1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="170" y="160" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="m4dBRZqiv5qoeC6Vf523-9" value="Configure player" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="130" y="280" width="80" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="h-RRU4YisuIuMyhp2gHc-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;" edge="1" parent="1" source="h-RRU4YisuIuMyhp2gHc-5" target="m4dBRZqiv5qoeC6Vf523-1">
+          <mxGeometry relative="1" as="geometry">
+            <Array as="points">
+              <mxPoint x="480" y="100" />
+              <mxPoint x="320" y="100" />
+            </Array>
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="h-RRU4YisuIuMyhp2gHc-10" value="Upload done" style="edgeLabel;html=1;align=left;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="h-RRU4YisuIuMyhp2gHc-9">
+          <mxGeometry x="-0.394" y="-1" relative="1" as="geometry">
+            <mxPoint x="-79" y="11" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="h-RRU4YisuIuMyhp2gHc-5" value="Upload" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="440" y="120" width="80" height="80" as="geometry" />
         </mxCell>
       </root>
     </mxGraphModel>