Merge pull request #86 from ilosvideos/master

Add an option to draw frequency meter from the middle out rather than left to right

README.md

@@ -843,6 +843,15 @@ export default {
           Example: <code>:frequ-line-cap="true"</code>
       </td>
     </tr>
+    <tr>
+      <td>frequ-direction</td>
+      <td><code>String</code></td>
+      <td><code>lr</code></td>
+      <td>Direction to draw the frequency. Available values: 'lr' or 'mo' (left to right or middle out).
+      If not set or not recognized then 'lr' is set. <br/>
+          Example: <code>frequ-direction="mo"</code>
+      </td>
+    </tr>    
     <tr>
       <td>line-color</td>
       <td><code>String</code></td>

demo/src/components/AvMedia.vue

@@ -3,6 +3,10 @@
     <audio ref="player"></audio>
     <small>AvMedia type="frequ"</small>
     <av-media type="frequ" :media="media" line-color="darkorange"/>
+    <small>AvMedia type="frequ" with frequ-direction="mo"</small>
+    <av-media type="frequ" :media="media" line-color="darkorange"
+      frequ-direction="mo"
+      :frequ-lnum="60"/>
     <small>AvMedia type="wfrom"</small>
     <av-media type="wform" :media="media" line-color="blue"
       :canv-width="200" :canv-height="40"/>

src/components/AvMedia.js

@@ -96,6 +96,19 @@ const props = {
     default: false
   },
 
+  /**
+   * prop: 'frequ-direction'
+   * Direction for frequency visualization.
+   * lr - from left to right
+   * mo - from middle out
+   * lr when not recognized.
+   * Default: wform
+   */
+  frequDirection: {
+    type: String,
+    default: 'lr'
+  },
+
   /**
    * prop: 'line-color'
    * Line color.
@@ -239,19 +252,27 @@ const AvMedia = {
     },
 
     frequ: function (data) {
-      const c = this.frequLnum
-      const step = this.canvWidth / c
+      const middleOut = this.frequDirection === 'mo'
+      const start = middleOut ? this.canvWidth / 2 : 0
+      const c = middleOut ? this.frequLnum / 2 : this.frequLnum
+      const step = middleOut ? this.canvWidth / c / 2 : this.canvWidth / c
       const h = this.canvHeight
       const lw = this.lineWidth || 2
       for (let i = 0; i < c; i++) {
-        const x = i * step + lw
+        const x = middleOut ? i * step : i * step + lw
         const v = data.slice(x, x + step).reduce((sum, v) => sum + (v / 255.0 * h), 0) / step
         const space = (h - v) / 2 + 2 // + 2 is space for caps
         this.ctx.lineWidth = lw
         this.ctx.lineCap = this.frequLineCap ? 'round' : 'butt'
-        this.ctx.moveTo(x, space)
-        this.ctx.lineTo(x, h - space)
+        this.ctx.moveTo(start + x, space)
+        this.ctx.lineTo(start + x, h - space)
         this.ctx.stroke()
+
+        if (middleOut && i > 0) {
+          this.ctx.moveTo(start - x, space)
+          this.ctx.lineTo(start - x, h - space)
+          this.ctx.stroke()
+        }
       }
     },