From eb28ce2ac9f9da3b6d15c3af5cfb0b8b883809e7 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Thu, 24 Jan 2019 15:27:22 +0100
Subject: [PATCH] Indicate missing audio

---
 www/images/music-broken.svg | 30 ++++++++++++++++++++++++++++++
 www/images/music.svg        |  6 ++++++
 www/js/hugvey_console.js    |  8 ++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 www/images/music-broken.svg
 create mode 100644 www/images/music.svg

diff --git a/www/images/music-broken.svg b/www/images/music-broken.svg
new file mode 100644
index 0000000..9e0b732
--- /dev/null
+++ b/www/images/music-broken.svg
@@ -0,0 +1,30 @@
+<?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"
+   id="svg3"
+   version="1.1"
+   viewBox="0 0 1536 1664"
+   height="1664"
+   width="1536">
+  <metadata
+     id="metadata9">
+    <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="defs7" />
+  <path
+     id="icon"
+     d="m 1440,0 c -10.6667,0 -20,1.33333 -28,4 l -298.6638,104.16281 45.7149,219.42968 64.5429,-121.49023 -26.0488,397.25586 L 1408,526 v 537 c -58,-26 -122,-39 -192,-39 -30,0 -62.1667,3.5 -96.5,10.5 -34.3333,7 -68.8333,17.6667 -103.5,32 -34.6667,14.3333 -63.3333,34.5 -86,60.5 -22.6667,26 -34,55.6667 -34,89 0,33.3333 11.3333,63 34,89 22.6667,26 51.3333,46.1667 86,60.5 34.6667,14.3333 69.1667,25 103.5,32 34.3333,7 66.5,10.5 96.5,10.5 30,0 62.1667,-3.5 96.5,-10.5 34.3333,-7 68.8333,-17.6667 103.5,-32 34.6667,-14.3333 63.3333,-34.5 86,-60.5 22.6667,-26 34,-55.6667 34,-89 V 96 c 0,-26.66667 -9.3333,-49.33333 -28,-68 C 1489.3333,9.33333 1466.6667,0 1440,0 Z M 738.48391,211.23527 580,260 c -20,6.66667 -36.33333,18.5 -49,35.5 -12.66667,17 -19,35.83333 -19,56.5 v 967 c -58,-26 -122,-39 -192,-39 -30,0 -62.16667,3.5 -96.5,10.5 -34.33333,7 -68.83333,17.6667 -103.5,32 -34.66667,14.3333 -63.33333,34.5 -86,60.5 -22.66667,26 -34,55.6667 -34,89 0,33.3333 11.33333,63 34,89 22.66667,26 51.33333,46.1667 86,60.5 34.66667,14.3333 69.16667,25 103.5,32 34.33333,7 66.5,10.5 96.5,10.5 30,0 62.16667,-3.5 96.5,-10.5 34.33333,-7 68.83333,-17.6667 103.5,-32 34.66667,-14.3333 63.33333,-34.5 86,-60.5 22.66667,-26 34,-55.6667 34,-89 V 763 l 280.49367,-86.60262 -65.1719,-291.85547 -45.55856,102.50976 z" />
+</svg>
diff --git a/www/images/music.svg b/www/images/music.svg
new file mode 100644
index 0000000..bc72cad
--- /dev/null
+++ b/www/images/music.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792"
+	xmlns="http://www.w3.org/2000/svg">
+	<path id="icon"
+		d="M1664 224v1120q0 50-34 89t-86 60.5-103.5 32-96.5 10.5-96.5-10.5-103.5-32-86-60.5-34-89 34-89 86-60.5 103.5-32 96.5-10.5q105 0 192 39v-537l-768 237v709q0 50-34 89t-86 60.5-103.5 32-96.5 10.5-96.5-10.5-103.5-32-86-60.5-34-89 34-89 86-60.5 103.5-32 96.5-10.5q105 0 192 39v-967q0-31 19-56.5t49-35.5l832-256q12-4 28-4 40 0 68 28t28 68z" />
+</svg>
\ No newline at end of file
diff --git a/www/js/hugvey_console.js b/www/js/hugvey_console.js
index c3201c9..6d5632b 100644
--- a/www/js/hugvey_console.js
+++ b/www/js/hugvey_console.js
@@ -727,6 +727,13 @@ class Graph {
             ;
         let textId = newNodeG.append( "text" ).attr( 'class', 'msg_id' );
         let textContent = newNodeG.append( "text" ).attr( 'class', 'msg_txt' );
+        let statusIcon = newNodeG.append( "image" )
+            .attr( 'class', 'status_icon' )
+            .attr( 'x', '-10' )
+            .attr( 'y', '10' )
+            .attr( 'width', '20' )
+            .attr( 'height', '20' )
+            ;
 
         // remove
         node.exit().remove();
@@ -771,6 +778,7 @@ class Graph {
 
         node.selectAll( "text.msg_id" ).text( d => d['@id'] );
         node.selectAll( "text.msg_txt" ).text( d => formatText( `${d['text']}` ) );
+        node.selectAll( "image.status_icon" ).attr('xlink:href', d => d['audio'] ? '' : '/images/music-broken.svg');
         // console.log('q');
         // // TODO: update text
         // let text = newNodeG.append("text")