1 files changed, 107 insertions, 11 deletions

diff --git a/src/client/views/AudioWaveform.tsx b/src/client/views/AudioWaveform.tsx
index 4d9c039c4..8a3c3c319 100644
--- a/src/client/views/AudioWaveform.tsx
+++ b/src/client/views/AudioWaveform.tsx
@@ -10,6 +10,7 @@ import { Cast, NumCast } from "../../fields/Types";
 import { numberRange } from "../../Utils";
 import "./AudioWaveform.scss";
 import { Colors } from "./global/globalEnums";
+import Color = require("color");
 
 export interface AudioWaveformProps {
     duration: number; // length of media clip
@@ -19,15 +20,15 @@ export interface AudioWaveformProps {
     clipStart: number;
     clipEnd: number;
     zoomFactor: number;
-    PanelHeight: () => number;
-    PanelWidth: () => number;
+    PanelHeight: number;
+    PanelWidth: number;
 }
 
 @observer
 export class AudioWaveform extends React.Component<AudioWaveformProps> {
     public static NUMBER_OF_BUCKETS = 100;
     _disposer: IReactionDisposer | undefined;
-    @computed get waveHeight() { return Math.max(50, this.props.PanelHeight()); }
+    @computed get waveHeight() { return Math.max(50, this.props.PanelHeight); }
     @computed get clipStart() { return this.props.clipStart; }
     @computed get clipEnd() { return this.props.clipEnd; }
     @computed get zoomFactor() { return this.props.zoomFactor; }
@@ -88,10 +89,17 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
     render() {
         return (
             <div className="audioWaveform">
+                {/* <Waveform
+                    barWidth={2}
+                    width={() => this.props.PanelWidth}
+                    height={this.props.PanelHeight}
+                    peaks={this.audioBuckets}
+                    color={Colors.MEDIUM_BLUE}
+                /> */}
                 <Waveform
                     color={Colors.MEDIUM_BLUE_ALT}
                     height={this.waveHeight}
-                    barWidth={2}
+                    barWidth={200 / this.audioBuckets.length}
                     pos={this.props.duration}
                     duration={this.props.duration}
                     peaks={this.audioBuckets}
@@ -103,14 +111,102 @@ export class AudioWaveform extends React.Component<AudioWaveformProps> {
 }
 
 
-// export interface WaveformProps {
-//     barWidth: number;
-//     width: () => number;
-//     height: () => number;
-//     peaks: number[];
-//     color: string;
-// }
+export interface WaveformProps {
+    barWidth: number;
+    width: () => number;
+    height: () => number;
+    peaks: number[];
+    color: string;
+}
 
+// @observer
 // export class Waveform extends React.Component<WaveformProps> {
+//     private _canvas: HTMLCanvasElement | null = null;
+
+//     get width() { return this.props.width(); }
+//     get height() { return this.props.height(); }
+//     get peaks() { return this.props.peaks; }
+
+//     componentDidMount() {
+//         this.drawBars();
+//     }
+
+//     drawBars() {
+//         const waveCanvasCtx = this._canvas?.getContext("2d");
+
+//         if (waveCanvasCtx) {
+//             const pixelRatio = window.devicePixelRatio;
+//             console.log(pixelRatio);
+
+//             const displayWidth = Math.round(this.width);
+//             const displayHeight = Math.round(this.height);
+//             waveCanvasCtx.canvas.width = this.width;
+//             waveCanvasCtx.canvas.height = this.height;
+//             waveCanvasCtx.canvas.style.width = `${displayWidth}px`;
+//             waveCanvasCtx.canvas.style.height = `${displayHeight}px`;
+
+//             waveCanvasCtx.clearRect(0, 0, this.width, this.height);
+
+//             const hasMinVals = [].some.call(this.peaks, (val) => val < 0);
+//             let filteredPeaks = this.peaks;
+//             if (hasMinVals) {
+//                 // If the first value is negative, add 1 to the filtered indices
+//                 let indexOffset = 0;
+//                 if (this.peaks[0] < 0) {
+//                     indexOffset = 1;
+//                 }
+//                 filteredPeaks = [].filter.call(
+//                     this.peaks,
+//                     (_, index) => (index + indexOffset) % 2 == 0
+//                 );
+//             }
+
+//             const $ = 0.5;
+//             const height = this.height;
+//             const offsetY = 0;
+//             const halfH = this.height / 2;
+//             const length = filteredPeaks.length;
+//             const bar = this.props.barWidth;
+//             const gap = 2;
+//             const step = bar + gap;
+
+//             let absmax = 1;
+//             absmax = this.absMax(filteredPeaks);
+
+//             const scale = length / this.width;
+
+//             waveCanvasCtx.fillStyle = this.props.color;
+
+//             for (let i = 0; i < this.width; i += step) {
+//                 let h = Math.round(filteredPeaks[Math.floor(i * scale)] / absmax * halfH)
+//                 if (h === 0) {
+//                     h = 1
+//                 }
+//                 waveCanvasCtx.fillRect(i + $, halfH - h + offsetY, bar + $, h * 2)
+//             }
+//         }
+//     }
+
+//     absMax = (values: number[]) => {
+//         let max = -Infinity;
+//         for (const i in values) {
+//             const num = Math.abs(values[i]);
+//             if (num > max) {
+//                 max = num;
+//             }
+//         }
+
+//         return max;
+//     }
+
 
+//     render() {
+//         return this.props.peaks ? (
+//             <canvas
+//                 ref={(instance) => {
+//                     this._canvas = instance;
+//                 }}
+//             />
+//         ) : null
+//     }
 // }
\ No newline at end of file