From 1fc253421b7f14d23db83a3de2d296fdb7c860d6 Mon Sep 17 00:00:00 2001
From: Mark Hoekveen <mark@hoekveen.net>
Date: Sun, 3 Mar 2024 23:37:30 +0100
Subject: [PATCH] dummy knopjes

---
 playlist/static/img/back.svg        | 68 ++++++++++++++++++++++++++
 playlist/static/img/eject.svg       | 58 ++++++++++++++++++++++
 playlist/static/img/forward.svg     | 68 ++++++++++++++++++++++++++
 playlist/static/img/next.svg        | 76 +++++++++++++++++++++++++++++
 playlist/static/img/prev.svg        | 75 ++++++++++++++++++++++++++++
 playlist/static/style.css           | 30 +++++++++++-
 playlist/templates/MediaPlayer.html |  7 +++
 7 files changed, 381 insertions(+), 1 deletion(-)
 create mode 100644 playlist/static/img/back.svg
 create mode 100644 playlist/static/img/eject.svg
 create mode 100644 playlist/static/img/forward.svg
 create mode 100644 playlist/static/img/next.svg
 create mode 100644 playlist/static/img/prev.svg

diff --git a/playlist/static/img/back.svg b/playlist/static/img/back.svg
new file mode 100644
index 0000000..30096ea
--- /dev/null
+++ b/playlist/static/img/back.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="prev.svg"
+   inkscape:export-xdpi="25.4"
+   inkscape:export-ydpi="25.4"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="3.9999988"
+       transform="matrix(-0.742144,0,0,1.2854311,26.003456,-8.0473449)" />
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1-5"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="3.9999988"
+       transform="matrix(-0.742144,0,0,1.2854311,50.003456,-8.0473447)" />
+  </g>
+</svg>
diff --git a/playlist/static/img/eject.svg b/playlist/static/img/eject.svg
new file mode 100644
index 0000000..1e1e2a4
--- /dev/null
+++ b/playlist/static/img/eject.svg
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="back.svg"
+   inkscape:export-xdpi="25.4"
+   inkscape:export-ydpi="25.4"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="9.8473034"
+       sodipodi:cy="6.337101"
+       sodipodi:r1="31.498077"
+       sodipodi:r2="15.749038"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 37.125439,22.08614 -54.556271,0 27.2781355,-47.247116 z"
+       inkscape:transform-center-y="-5.3333328"
+       transform="matrix(0.87982554,0,0,0.67729001,23.336091,21.041278)" />
+    <rect
+       style="fill:#808080;stroke-width:0.295996"
+       id="rect1"
+       width="48"
+       height="16"
+       x="8"
+       y="42" />
+  </g>
+</svg>
diff --git a/playlist/static/img/forward.svg b/playlist/static/img/forward.svg
new file mode 100644
index 0000000..4fd9c42
--- /dev/null
+++ b/playlist/static/img/forward.svg
@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="next.svg"
+   inkscape:export-xdpi="25.4"
+   inkscape:export-ydpi="25.4"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="-3.9999985"
+       transform="matrix(0.742144,0,0,1.2854311,37.996544,-8.0473449)" />
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1-5"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="-3.9999988"
+       transform="matrix(0.742144,0,0,1.2854311,13.996544,-8.0473447)" />
+  </g>
+</svg>
diff --git a/playlist/static/img/next.svg b/playlist/static/img/next.svg
new file mode 100644
index 0000000..3a3ee6f
--- /dev/null
+++ b/playlist/static/img/next.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="prev.svg"
+   inkscape:export-xdpi="25.4"
+   inkscape:export-ydpi="25.4"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="-3.9999985"
+       transform="matrix(0.742144,0,0,1.2854311,37.996544,-8.0473449)" />
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1-5"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="-3.9999988"
+       transform="matrix(0.742144,0,0,1.2854311,13.996544,-8.0473447)" />
+    <rect
+       style="fill:#808080;stroke-width:0.223385"
+       id="rect1"
+       width="8"
+       height="48"
+       x="-59.999992"
+       y="8"
+       transform="scale(-1,1)" />
+  </g>
+</svg>
diff --git a/playlist/static/img/prev.svg b/playlist/static/img/prev.svg
new file mode 100644
index 0000000..a8f0dfd
--- /dev/null
+++ b/playlist/static/img/prev.svg
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg1"
+   inkscape:export-filename="back.svg"
+   inkscape:export-xdpi="25.4"
+   inkscape:export-ydpi="25.4"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="3.9999988"
+       transform="matrix(-0.742144,0,0,1.2854311,26.003456,-8.0473449)" />
+    <path
+       sodipodi:type="star"
+       style="fill:#808080;stroke-width:0.264583"
+       id="path1-5"
+       inkscape:flatsided="true"
+       sodipodi:sides="3"
+       sodipodi:cx="2.6995511"
+       sodipodi:cy="31.154797"
+       sodipodi:r1="21.559158"
+       sodipodi:r2="10.779579"
+       sodipodi:arg1="0"
+       sodipodi:arg2="1.0471976"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 24.258709,31.154797 -32.3387371,18.670778 0,-37.341557 z"
+       inkscape:transform-center-x="3.9999988"
+       transform="matrix(-0.742144,0,0,1.2854311,50.003456,-8.0473447)" />
+    <rect
+       style="fill:#808080;stroke-width:0.223385"
+       id="rect1"
+       width="8"
+       height="48"
+       x="4"
+       y="8" />
+  </g>
+</svg>
diff --git a/playlist/static/style.css b/playlist/static/style.css
index f537b85..eea6bdf 100644
--- a/playlist/static/style.css
+++ b/playlist/static/style.css
@@ -185,6 +185,10 @@ iframe {
 	height: 22px;
 }
 
+#media-control {
+	display:flex;
+}
+
 
 #media-control button {
 	min-width: 0;
@@ -196,10 +200,18 @@ iframe {
 	box-shadow:none;
 }
 
-#media-control:not(.waiting) button:hover {
+#media-control:not(.waiting) button:not(.dummy):hover {
 	box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf
 }
 
+#media-control .spacer {
+	display: inline-block;
+	height: 24px;
+	width: 1px;
+	margin: 4px 5px;
+	background: gray;
+}
+
 #media-control button#play {
 	background-image:url(img/play.svg);
 }
@@ -222,6 +234,22 @@ iframe {
 	background-image:url(img/stop-inactive.svg);
 }
 
+#media-control button#prev {
+	background-image:url(img/prev.svg);
+}
+#media-control button#back {
+	background-image:url(img/back.svg);
+}
+#media-control button#forward {
+	background-image:url(img/forward.svg);
+}
+#media-control button#next {
+	background-image:url(img/next.svg);
+}
+#media-control button#eject {
+	background-image:url(img/eject.svg);
+}
+
 /* Clippy */
 .clippy {
 	position: fixed;
diff --git a/playlist/templates/MediaPlayer.html b/playlist/templates/MediaPlayer.html
index 42e1403..10c932c 100644
--- a/playlist/templates/MediaPlayer.html
+++ b/playlist/templates/MediaPlayer.html
@@ -15,6 +15,13 @@
 <button id="play"></button>
 <button id="pause"></button>
 <button id="stop"></button>
+<div class="spacer"></div>
+<button id="prev" class="dummy"></button>
+<button id="back" class="dummy"></button>
+<button id="forward" class="dummy"></button>
+<button id="next" class="dummy"></button>
+<div class="spacer"></div>
+<button id="eject" class="dummy"></button>
 </div>
 <script src="https://open.spotify.com/embed/iframe-api/v1"></script>
 <script>