Merge pull request #265 from kodadot/208-audio

Added waveform component to audio media

Author: yangwao

dashboard/package.json

@@ -42,6 +42,7 @@
     "setimmediate": "^1.0.5",
     "slugify": "^1.4.6",
     "vue": "2.6.11",
+    "vue-audio-visual": "^2.2.2",
     "vue-class-component": "^7.2.2",
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.22.4",

dashboard/src/components/rmrk/Media/AudioMedia.vue

@@ -1,10 +1,19 @@
 
 <template>
   <div>
-    <audio controls class="media-audio__player">
+    <av-waveform
+    class="media-audio__player"
+      :audio-src="src"
+      audio-class="media-audio__audio"
+      canv-class="media-audio__canvas"
+      played-line-color="rgba(0,0,0,0.74)"
+      noplayed-line-color="#d32e79"
+      playtime-font-color="rgba(0,0,0,0.74)"
+    ></av-waveform>
+    <!-- <audio controls class="media-audio__player">
       <source :src="src" :type="mimeType" />
       Unable to show audio
-    </audio>
+    </audio> -->
   </div>
 </template>
 
@@ -17,8 +26,10 @@ export default class AppAudio extends Vue {
 }
 </script>
 
-<style scoped>
-.media-audio__player {
-  width: 100%;
+<style>
+div.media-audio__player div > canvas.media-audio__canvas,
+div.media-audio__player > div > audio.media-audio__audio {
+  width: 100% !important;
 }
+
 </style>

dashboard/src/main.ts

@@ -14,7 +14,10 @@ import store from './store';
 import router from './router';
 
 import MetaInfo from 'vue-meta';
+import AudioVisual from 'vue-audio-visual'
+
 Vue.use(MetaInfo)
+Vue.use(AudioVisual)
 import Connector from '@vue-polkadot/vue-api';
 import { client, keyInfo } from '@/textile'
 import { createInstance, getInstance, migrateCollection, migrateNFT } from '@/components/rmrk/service/RmrkService'

dashboard/src/vue-audio-visual.d.ts

@@ -0,0 +1 @@
+declare module 'vue-audio-visual'

dashboard/yarn.lock

@@ -2603,6 +2603,13 @@ axios@^0.21.0:
   dependencies:
     follow-redirects "^1.10.0"
 
+axios@^0.21.1:
+  version "0.21.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+  integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
+  dependencies:
+    follow-redirects "^1.10.0"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -3659,6 +3666,11 @@ core-js@^2.4.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^3.7.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.10.0.tgz#9a020547c8b6879f929306949e31496bbe2ae9b3"
+  integrity sha512-MQx/7TLgmmDVamSyfE+O+5BHvG1aUGj/gHhLn1wVtm2B5u1eVIPvh7vkfjwWKNCjrTJB8+He99IntSQ1qP+vYQ==
+
 [email protected], core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -10415,6 +10427,15 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-audio-visual@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/vue-audio-visual/-/vue-audio-visual-2.2.2.tgz#b1c01993c062478c9574a90afc19fa25fe0fe862"
+  integrity sha512-kjReM/gzoqDAxQyF9nua4K4N8KRl7fdzg7l8sXtiCi6D2XAZM0NEx/AUidv3wbQWB65PIjpunF1yB2ZSXFXc/Q==
+  dependencies:
+    axios "^0.21.1"
+    core-js "^3.7.0"
+    vue "^2.6.12"
+
 vue-class-component@^6.3.2:
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"