music VibratoWaveformPreview.tsx

0% Statements 0/10

0% Branches 0/4

0% Functions 0/2

0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useContext } from "react";
import { ThemeContext } from "styled-components";
 
interface VibratoWaveformPreviewProps {
  waveform: string;
}
export const VibratoWaveformPreview = ({
  waveform,
}: VibratoWaveformPreviewProps) => {
  const themeContext = useContext(ThemeContext);
 
  let path = "";
 
  [...waveform].forEach((l: string, i: number) => {
    path += `${i * 10},${5 + (parseInt(l) - 1) * -10} ${(i + 1) * 10},${
      5 + (parseInt(l) - 1) * -10
    } `;
  });
 
  const defaultColor = themeContext?.colors.highlight;
 
  return (
    <div style={{ height: 20 }}>
      <svg width="100%" height="100%">
        <polyline
          points={path}
          stroke={defaultColor}
          fill="none"
          strokeWidth="1"
        />
      </svg>
    </div>
  );
};