Merge branch 'audio-waveforms' into 'dev'

Audio waveforms

See merge request keanuapp/keanuapp-weblite!321

src/components/messages/AudioPlayer.vue

@@ -6,15 +6,22 @@
     <div class="play-time">
       {{ currentTime }} / {{ totalTime }}
     </div>
+    <div style="position:relative;flex: 1 1 100%">
     <v-slider @change="seeked" :disabled="!info.url" color="currentColor" track-color="#cccccc" class="play-progress" :value="info.playPercent" min="0"
       max="100" />
+      <div style="position:absolute;left:18px;right:18px;top:0;bottom:0;height:100%">
+      <AudioWaveformView :event="event" style="width:100%;height:100%" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import util from "../../plugins/utils";
+import AudioWaveformView from "./AudioWaveformView.vue";
 
 export default {
+  components: { AudioWaveformView },
   props: {
     event: {
       type: Object,

src/components/messages/AudioWaveformView.vue

@@ -0,0 +1,45 @@
+<template>
+    <div v-html="content" class="waveform">
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        event: {
+            type: Object,
+            default: function () {
+                return null;
+            },
+        },
+    },
+    computed: {
+        content() {
+            return this.$sanitize(
+                this.event ? this.event.getContent().formatted_body : "",
+                {
+                    allowedTags: ["svg", "path"],
+                    allowedAttributes: {
+                        'svg': ["viewbox", "fill", "preserveaspectratio", "xmlns"],
+                        'path': ["d", "style"]
+                    }
+                }
+            );
+        }
+    },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+
+.waveform svg {
+    width: 100%;
+    height: 100%;
+
+    path {
+        stroke: black !important;
+    }
+}
+</style>