nodejs-audio-visualizer 2.1.4 → 4.0.0

package/src/image.ts

@@ -2,6 +2,7 @@ import { RotationAliasName } from './index';
 import { decode, BmpDecoder } from 'bmp-js';
 import { EncodedBmp } from './bpmEncoder';
 import Jimp from 'jimp';
+import { SpectrumEffect } from './config';
 
 export interface Color {
   red: number;
@@ -25,7 +26,7 @@ interface MixColorProps {
   backgroundColor: Color;
 }
 
-export const mixValues =(value1: number, value1Opacity: number, value2: number) =>
+export const mixValues = (value1: number, value1Opacity: number, value2: number) =>
   Math.round(value2 * (1 - value1Opacity) + value1 * value1Opacity);
 
 export const mixColors = ({
@@ -100,6 +101,126 @@ export const drawRect = ({
   }
 };
 
+interface Edge {
+  yMin: number;
+  yMax: number;
+  x: number;
+  dx: number;
+}
+
+interface FillRectProps {
+  imageDstBuffer: EncodedBmp;
+  points: [Position, Position, Position, Position];
+  color: Color;
+  opacity: number;
+}
+
+const buildQuadEdgeTable = (points: [Position, Position, Position, Position]): Edge[] => {
+  const edges: Edge[] = [];
+
+  for (let i = 0; i < points.length; i++) {
+    const p1 = points[i];
+    const p2 = points[(i + 1) % points.length];
+
+    if (p1.y === p2.y) continue; // Skip horizontal edges
+
+    const yMin = Math.min(p1.y, p2.y);
+    const yMax = Math.max(p1.y, p2.y);
+    const x = p1.y < p2.y ? p1.x : p2.x;
+    const dx = (p2.x - p1.x) / (p2.y - p1.y);
+
+    edges.push({ yMin, yMax, x, dx });
+  }
+
+  return edges.sort((a, b) => a.yMin - b.yMin);
+};
+
+/**
+ * Fills a quadrilateral (4-sided polygon) using scan-line algorithm
+ * Only the outer edges are anti-aliased
+ */
+export const fillRect = ({
+  imageDstBuffer,
+  points,
+  color,
+  opacity,
+}: FillRectProps) => {
+  // Build edge table from all 4 vertices
+  const edgeTable = buildQuadEdgeTable(points);
+  if (edgeTable.length === 0) return;
+
+  // Find the bounding box
+  const yMin = Math.min(...points.map(p => p.y));
+  const yMax = Math.max(...points.map(p => p.y));
+
+  // Active Edge Table for scan line algorithm
+  const activeEdges: Edge[] = [];
+
+  // Scan line algorithm: process each horizontal line
+  for (let y = Math.floor(yMin); y <= Math.ceil(yMax); y++) {
+    // Add edges that start at this scanline to AET
+    for (const edge of edgeTable) {
+      if (Math.floor(edge.yMin) === y) {
+        activeEdges.push({ ...edge });
+      }
+    }
+
+    // Remove edges that end at this scanline from AET
+    for (let i = activeEdges.length - 1; i >= 0; i--) {
+      if (Math.ceil(activeEdges[i].yMax) <= y) {
+        activeEdges.splice(i, 1);
+      }
+    }
+
+    // Sort active edges by x coordinate
+    activeEdges.sort((a, b) => a.x - b.x);
+
+    // Fill pixels between pairs of intersections
+    for (let i = 0; i < activeEdges.length; i += 2) {
+      if (i + 1 < activeEdges.length) {
+        const xStart = activeEdges[i].x;
+        const xEnd = activeEdges[i + 1].x;
+
+        // Anti-aliased rendering with sub-pixel precision
+        const xStartFloor = Math.floor(xStart);
+        const xEndCeil = Math.ceil(xEnd);
+
+        for (let x = xStartFloor; x < xEndCeil; x++) {
+          const pixelIndex = imageDstBuffer.shiftPos + y * imageDstBuffer.rowBytes + x * 3;
+
+          // Calculate coverage for anti-aliasing
+          let coverage = 1.0;
+          if (x === xStartFloor) {
+            // Left edge pixel - calculate fractional coverage
+            coverage = Math.min(1.0, 1.0 - (xStart - xStartFloor));
+          } else if (x === xEndCeil - 1) {
+            // Right edge pixel - calculate fractional coverage
+            coverage = Math.min(1.0, xEnd - Math.floor(xEnd));
+          }
+
+          // Apply coverage to opacity for smooth edges
+          const effectiveOpacity = opacity * coverage;
+
+          const pixelColor = getRectPixelColor({
+            imageDstBuffer,
+            pixelIndex,
+            color,
+            opacity: effectiveOpacity,
+          });
+          imageDstBuffer.data[pixelIndex] = pixelColor.blue;
+          imageDstBuffer.data[pixelIndex + 1] = pixelColor.green;
+          imageDstBuffer.data[pixelIndex + 2] = pixelColor.red;
+        }
+      }
+    }
+
+    // Update x coordinates for next scanline (x' = x + dx)
+    for (const edge of activeEdges) {
+      edge.x += edge.dx;
+    }
+  }
+};
+
 interface DrawSpectrumProps {
   imageDstBuffer: EncodedBmp;
   spectrum: number[];
@@ -111,6 +232,27 @@ interface DrawSpectrumProps {
   opacity: number;
 }
 
+const getRectY = (rotation: RotationAliasName, top: number, height: number, rectHeight: number) => {
+  switch (rotation) {
+    case 'up':
+      return top + height - rectHeight;
+    case 'mirror':
+      return top + Math.trunc((height - rectHeight) / 2);
+    default:
+      return top;
+  }
+};
+
+const minRectHeight = 2;
+
+const getRectHeight = (height: number, spectrumValue: number) => {
+  const rectHeight = Math.trunc(height * spectrumValue);
+  if (rectHeight < minRectHeight) {
+    return minRectHeight;
+  }
+  return rectHeight;
+};
+
 const drawSpectrum = ({
   imageDstBuffer,
   spectrum,
@@ -133,8 +275,8 @@ const drawSpectrum = ({
     }
 
     const rectX = left + busWidth * spectrumX;
-    const rectHeight = Math.trunc(height * spectrumValue);
-    const rectY = (rotation === 'up') ? top + height - rectHeight : top;
+    const rectHeight = getRectHeight(height, spectrumValue);
+    const rectY = getRectY(rotation, top, height, rectHeight);
     drawRect({
       imageDstBuffer,
       position: { x: rectX + margin, y: rectY },
@@ -145,42 +287,225 @@ const drawSpectrum = ({
   }
 };
 
-interface CreateVisualizerFrameProps {
+const calcCirclePoint = (angleRadians: number, radius: number): Position => {
+  const circleX = radius * Math.cos(angleRadians);
+  const circleY = radius * Math.sin(angleRadians);
+  return { x: circleX, y: circleY };
+};
+
+const lerp = (start: number, end: number, t: number) =>
+  start + (end - start) * t;
+
+interface DrawPolarSpectrumProps {
+  imageDstBuffer: EncodedBmp;
+  spectrum: number[];
+  centerX: number;
+  centerY: number;
+  innerRadius: number;
+  maxBarLength: number;
+  barWidth: number;
+  color: Color;
+  opacity: number;
+}
+
+const drawPolarSpectrum = ({
+  imageDstBuffer,
+  spectrum,
+  centerX,
+  centerY,
+  innerRadius,
+  maxBarLength,
+  barWidth,
+  color,
+  opacity,
+}: DrawPolarSpectrumProps) => {
+  const angleStep = (2 * Math.PI) / spectrum.length;
+  const innerLength = innerRadius * 2 * Math.PI;
+  const radiansPerPixel = 2 * Math.PI / innerLength;
+  const barWidthInRadians = radiansPerPixel * barWidth;
+  const spectrumAverage = spectrum.reduce((a, b) => a + b, 0) / spectrum.length;
+  const scaleFactor = lerp(0.75, 1, spectrumAverage);
+  const scaledMaxOuterRadius = (innerRadius + maxBarLength) * scaleFactor;
+  const scaledInnerRadius = innerRadius * scaleFactor;
+  for (let i = 0; i < spectrum.length; i++) {
+    const currentSpectrumValue = spectrum[i] || 0;
+    const busRadius = lerp(scaledInnerRadius, scaledMaxOuterRadius, currentSpectrumValue);
+    const angle = i * angleStep;
+    const angleRadiansStart = angle;
+    const angleRadiansEnd = angle + barWidthInRadians;
+
+    const point1 = calcCirclePoint(angleRadiansStart, scaledInnerRadius);
+    const point2 = calcCirclePoint(angleRadiansStart, busRadius);
+
+    const point3 = calcCirclePoint(angleRadiansEnd, scaledInnerRadius);
+    const point4 = calcCirclePoint(angleRadiansEnd, busRadius);
+
+    fillRect({
+      imageDstBuffer,
+      points: [
+        { x: centerX + Math.round(point1.x), y: centerY + Math.round(point1.y) },
+        { x: centerX + Math.round(point2.x), y: centerY + Math.round(point2.y) },
+        { x: centerX + Math.round(point4.x), y: centerY + Math.round(point4.y) },
+        { x: centerX + Math.round(point3.x), y: centerY + Math.round(point3.y) },
+      ],
+      color,
+      opacity,
+    });
+  }
+};
+
+export interface CommonVisualizerFrameProps {
   backgroundImageBuffer: EncodedBmp;
   spectrum: number[];
+}
+
+export interface CreateVisualizerFrameProps {
   size: Size;
   position: Position;
   rotation: RotationAliasName;
   margin: number;
   color: Color | string;
   opacity: number;
+  spectrumEffect?: SpectrumEffect;
 }
 
-export const createVisualizerFrame = ({
-  backgroundImageBuffer,
-  spectrum,
-  size,
-  position,
-  rotation,
-  margin,
-  color,
-  opacity,
-}: CreateVisualizerFrameProps) => {
-  const imageDstBuffer = Object.assign({}, backgroundImageBuffer);
-  imageDstBuffer.data = Buffer.from(backgroundImageBuffer.data);
+export interface CreatePolarVisualizerFrameProps {
+  centerX: number;
+  centerY: number;
+  innerRadius: number;
+  maxBarLength: number;
+  barWidth: number;
+  color: Color | string;
+  opacity: number;
+  spectrumEffect?: SpectrumEffect;
+}
 
-  const rgbSpectrumColor = (typeof color === 'string') ? hexToRgb(color) : color;
-  drawSpectrum({
-    imageDstBuffer,
+export const createSpectrumVisualizerFrameGenerator = () => {
+  let prevSpectrum: number[] | null = null;
+
+  return ({
+    backgroundImageBuffer,
     spectrum,
     size,
     position,
     rotation,
     margin,
-    color: rgbSpectrumColor,
+    color,
     opacity,
-  });
-  return imageDstBuffer;
+    spectrumEffect,
+  }: CommonVisualizerFrameProps & CreateVisualizerFrameProps) => {
+    const imageDstBuffer = Object.assign({}, backgroundImageBuffer);
+    imageDstBuffer.data = Buffer.from(backgroundImageBuffer.data);
+
+    const rgbSpectrumColor = (typeof color === 'string') ? hexToRgb(color) : color;
+    if (spectrumEffect === 'volume') {
+      drawSpectrum({
+        imageDstBuffer,
+        spectrum,
+        size,
+        position: { x: position.x + 2, y: position.y + 2 },
+        rotation,
+        margin,
+        color: rgbSpectrumColor,
+        opacity: opacity * 0.5,
+      });
+    }
+    if (spectrumEffect === 'smooth' && prevSpectrum) {
+      drawSpectrum({
+        imageDstBuffer,
+        spectrum: prevSpectrum,
+        size,
+        position,
+        rotation,
+        margin,
+        color: rgbSpectrumColor,
+        opacity: opacity * 0.3,
+      });
+    }
+    drawSpectrum({
+      imageDstBuffer,
+      spectrum,
+      size,
+      position,
+      rotation,
+      margin,
+      color: rgbSpectrumColor,
+      opacity,
+    });
+
+    prevSpectrum = spectrum;
+
+    return imageDstBuffer;
+  };
+};
+
+export const createPolarVisualizerFrameGenerator = () => {
+  let prevSpectrum: number[] | null = null;
+
+  return ({
+    backgroundImageBuffer,
+    spectrum,
+    centerX,
+    centerY,
+    innerRadius,
+    maxBarLength,
+    barWidth,
+    color,
+    opacity,
+    spectrumEffect,
+  }: CommonVisualizerFrameProps & CreatePolarVisualizerFrameProps) => {
+    const imageDstBuffer = Object.assign({}, backgroundImageBuffer);
+    imageDstBuffer.data = Buffer.from(backgroundImageBuffer.data);
+
+    const rgbSpectrumColor = (typeof color === 'string') ? hexToRgb(color) : color;
+
+    // Draw shadow/volume effect
+    if (spectrumEffect === 'volume') {
+      drawPolarSpectrum({
+        imageDstBuffer,
+        spectrum,
+        centerX: centerX + 2,
+        centerY: centerY + 2,
+        innerRadius,
+        maxBarLength,
+        barWidth,
+        color: rgbSpectrumColor,
+        opacity: opacity * 0.5,
+      });
+    }
+
+    // Draw smooth/trail effect with previous frame
+    if (spectrumEffect === 'smooth' && prevSpectrum) {
+      drawPolarSpectrum({
+        imageDstBuffer,
+        spectrum: prevSpectrum,
+        centerX,
+        centerY,
+        innerRadius,
+        maxBarLength,
+        barWidth,
+        color: rgbSpectrumColor,
+        opacity: opacity * 0.3,
+      });
+    }
+
+    // Draw main spectrum
+    drawPolarSpectrum({
+      imageDstBuffer,
+      spectrum,
+      centerX,
+      centerY,
+      innerRadius,
+      maxBarLength,
+      barWidth,
+      color: rgbSpectrumColor,
+      opacity,
+    });
+
+    prevSpectrum = spectrum;
+
+    return imageDstBuffer;
+  };
 };
 
 export const convertToBmp = async (filePath: string) =>

package/src/index.ts

@@ -3,7 +3,6 @@ import {
   getBackgroundImagePath,
   getOutVideoPath,
   getFPS,
-  getSpectrumBusesCount,
   getSpectrumBusMargin,
   getSpectrumWidthAbsolute,
   getSpectrumHeightAbsolute,
@@ -15,12 +14,23 @@ import {
   getFfmpeg_preset,
   getFrame_processing_delay,
   rotationAliasValues,
-  getSpectrumRotation
+  getSpectrumRotation,
+  getSpectrumEffect,
+  SpectrumEffect,
+  getPolarXAbsolute,
+  getPolarYAbsolute,
+  getPolarInnerRadius,
+  getPolarMaxBarLength,
+  getPolarBarWidth,
+  getPolarEffect,
+  getPolarColor,
+  getPolarOpacityParsed,
 } from './config';
 import { createAudioBuffer, bufferToUInt8, createSpectrumsProcessor } from './audio';
-import { parseImage, createVisualizerFrame, getImageColor, invertColor, Color, convertToBmp } from './image';
+import { parseImage, getImageColor, invertColor, Color, convertToBmp, createSpectrumVisualizerFrameGenerator, createPolarVisualizerFrameGenerator, CreatePolarVisualizerFrameProps, CreateVisualizerFrameProps, CommonVisualizerFrameProps } from './image';
 import { spawnFfmpegVideoWriter, getProgress, calculateProgress, waitDrain } from './video';
-import { createBpmEncoder } from './bpmEncoder';
+import { createBpmEncoder, EncodedBmp } from './bpmEncoder';
+import { BmpDecoder } from 'bmp-js';
 
 export const PCM_FORMAT = {
   bit: 8,
@@ -28,6 +38,7 @@ export const PCM_FORMAT = {
   parseFunction: bufferToUInt8
 };
 const FFMPEG_FORMAT = `${PCM_FORMAT.sign}${PCM_FORMAT.bit}`;
+const PROCESSING_BUFFER_SIZE = Math.pow(2, 12);
 
 export interface Config {
   audio: {
@@ -45,6 +56,17 @@ export interface Config {
       x?: number | PositionAliasName;
       y?: number | PositionAliasName;
       rotation?: RotationAliasName;
+      effect?: SpectrumEffect;
+      color?: Color | string;
+      opacity?: string;
+    };
+    polar?: {
+      x?: number | PositionAliasName;
+      y?: number | PositionAliasName;
+      innerRadius?: number;
+      maxBarLength?: number;
+      barWidth?: number;
+      effect?: SpectrumEffect;
       color?: Color | string;
       opacity?: string;
     }
@@ -71,8 +93,67 @@ export type RotationAliasName = typeof rotationAliasValues[number];
 const sleep = (timeout: number) =>
   new Promise(resolve => setTimeout(resolve, timeout));
 
+const createVisualizerFrameGenerator = (
+  config: Config,
+  backgroundImage: BmpDecoder,
+  spectrumBusMargin: number
+): (params: CommonVisualizerFrameProps) => EncodedBmp => {
+  if (!config.outVideo.spectrum) {
+    const createPolarVisualizerFrame = createPolarVisualizerFrameGenerator();
+    const polarX = getPolarXAbsolute(config, backgroundImage.width);
+    const polarY = getPolarYAbsolute(config, backgroundImage.height);
+    const polarInnerRadius = getPolarInnerRadius(config);
+    const polarMaxBarLength = getPolarMaxBarLength(config);
+    const polarBarWidth = getPolarBarWidth(config);
+    const polarColor = getPolarColor(config) || invertColor(getImageColor(backgroundImage));
+    const polarEffect = getPolarEffect(config);
+    const polarOpacity = getPolarOpacityParsed(config);
+
+    return (params: CommonVisualizerFrameProps) => {
+      return createPolarVisualizerFrame({
+        ...params,
+        centerX: polarX,
+        centerY: polarY,
+        innerRadius: polarInnerRadius,
+        maxBarLength: polarMaxBarLength,
+        barWidth: polarBarWidth,
+        color: polarColor,
+        opacity: polarOpacity,
+        spectrumEffect: polarEffect,
+      });
+    };
+  }
+  const createPolarVisualizerFrame = createSpectrumVisualizerFrameGenerator();
+  const spectrumWidth = getSpectrumWidthAbsolute(config, backgroundImage.width);
+  const spectrumHeight = getSpectrumHeightAbsolute(config, backgroundImage.height);
+  const spectrumX = getSpectrumXAbsolute(config, spectrumWidth, backgroundImage.width);
+  const spectrumY = getSpectrumYAbsolute(config, spectrumHeight, backgroundImage.height);
+  const spectrumRotation = getSpectrumRotation(config);
+  const spectrumColor = getSpectrumColor(config) || invertColor(getImageColor(backgroundImage));
+  const spectrumEffect = getSpectrumEffect(config);
+  const spectrumOpacity = getSpectrumOpacityParsed(config);
+
+  return (params: CommonVisualizerFrameProps) => {
+    return createPolarVisualizerFrame({
+      ...params,
+      size: { width: spectrumWidth, height: spectrumHeight },
+      position: { x: spectrumX, y: spectrumY },
+      rotation: spectrumRotation,
+      margin: spectrumBusMargin,
+      color: spectrumColor,
+      opacity: spectrumOpacity,
+      spectrumEffect,
+    });
+  };
+};
+
 export const renderAudioVisualizer = (config: Config, onProgress?: (progress: number) => any, shouldStop?: () => boolean) =>
   new Promise<number>(async (resolve) => {
+    // Validate that only one visualizer type is specified
+    if (config.outVideo.spectrum && config.outVideo.polar) {
+      throw new Error('Cannot use both "spectrum" and "polar" options. Please specify only one visualizer type.');
+    }
+
     const audioFilePath = getAudioFilePath(config);
     const backgroundImagePath = getBackgroundImagePath(config);
     const outVideoPath = getOutVideoPath(config);
@@ -86,30 +167,18 @@ export const renderAudioVisualizer = (config: Config, onProgress?: (progress: nu
       throw new Error('ffmpeg didn\'t show audio sample rate');
     }
 
-    const spectrumBusesCount = getSpectrumBusesCount();
     const spectrumBusMargin = getSpectrumBusMargin();
     const FPS = getFPS(config);
-    const spectrumWidth =
-      getSpectrumWidthAbsolute(config, backgroundImage.width);
-    const spectrumHeight =
-      getSpectrumHeightAbsolute(config, backgroundImage.height);
-    const spectrumX =
-      getSpectrumXAbsolute(config, spectrumWidth, backgroundImage.width);
-    const spectrumY =
-      getSpectrumYAbsolute(config, spectrumHeight, backgroundImage.height);
-    const spectrumRotation =
-      getSpectrumRotation(config);
-    const spectrumColor =
-      getSpectrumColor(config) ||
-      invertColor(getImageColor(backgroundImage));
-    const spectrumOpacity = getSpectrumOpacityParsed(config);
     const ffmpeg_cfr = getFfmpeg_cfr(config);
     const ffmpeg_preset = getFfmpeg_preset(config);
     const frame_processing_delay = getFrame_processing_delay(config);
 
+    const createVisualizerFrame = createVisualizerFrameGenerator(config, backgroundImage, spectrumBusMargin);
+
     const audioDuration = audioBuffer.length / sampleRate;
     const framesCount = Math.trunc(audioDuration * FPS);
     const audioDataStep = Math.trunc(audioBuffer.length / framesCount);
+    const processingBuffer = new Float32Array(PROCESSING_BUFFER_SIZE).fill(0);
 
     const ffmpegVideoWriter = spawnFfmpegVideoWriter({
       audioFilename: audioFilePath,
@@ -123,21 +192,21 @@ export const renderAudioVisualizer = (config: Config, onProgress?: (progress: nu
 
     const bpmEncoder = createBpmEncoder({ width: backgroundImage.width, height: backgroundImage.height });
     const backgroundImageBuffer = bpmEncoder(backgroundImage.data);
-    const processSpectrum = createSpectrumsProcessor(spectrumBusesCount);
+    const skipFramesCount = FPS < 45 ? 1 : 2;
+    const processSpectrum = createSpectrumsProcessor(sampleRate, skipFramesCount);
+
     for (let i = 0; i < framesCount; i++) {
-      const audioDataParser = () =>
-        PCM_FORMAT.parseFunction(audioBuffer, i * audioDataStep, i * audioDataStep + audioDataStep);
-      const spectrum = processSpectrum(i, audioDataParser);
-      const frameImage = createVisualizerFrame({
+      const currentFrameData = PCM_FORMAT.parseFunction(audioBuffer, i * audioDataStep, i * audioDataStep + audioDataStep);
+      processingBuffer.copyWithin(0, currentFrameData.length);
+      processingBuffer.set(currentFrameData, PROCESSING_BUFFER_SIZE - currentFrameData.length);
+
+      const audioDataParser = () => Array.from(processingBuffer);
+      const spectrum = processSpectrum(audioDataParser);
+      const commonVisualizerFrameProps: CommonVisualizerFrameProps = {
         backgroundImageBuffer,
         spectrum,
-        size: { width: spectrumWidth, height: spectrumHeight },
-        position: { x: spectrumX, y: spectrumY },
-        rotation: spectrumRotation,
-        margin: spectrumBusMargin,
-        color: spectrumColor,
-        opacity: spectrumOpacity,
-      });
+      };
+      const frameImage = createVisualizerFrame(commonVisualizerFrameProps);
       const isFrameProcessed = ffmpegVideoWriter.stdin.write(frameImage.data);
       if (!isFrameProcessed) {
         await waitDrain(ffmpegVideoWriter.stdin);

package/src/tests/audio.test.ts

@@ -8,7 +8,6 @@ import {
   skipEvery,
   getPeaks,
   correctPeaks,
-  smoothValues,
   createSpectrumsProcessor,
 } from '../audio';
 import { createSandbox } from 'sinon';
@@ -85,21 +84,13 @@ describe('audio', function () {
     expect(result).deep.equal(expected);
   });
 
-  it('smoothValues', () => {
-    const spectrums = [1, 2, 3, 4];
-    const prevSpectrums = [2, 4, 6, 3];
-    const result = smoothValues(spectrums, prevSpectrums);
-    const expected = [1.5, 3, 4.5, 3.5];
-    expect(result).deep.equal(expected);
-  });
 
   it('createSpectrumsProcessor', () => {
-    const busesCount = 2;
-    const spectrumsProcessor = createSpectrumsProcessor(busesCount);
+    const spectrumsProcessor = createSpectrumsProcessor(44100);
     
-    const frame0 = spectrumsProcessor(0, () => ([1, 2, 3, 4]));
-    expect(frame0).to.have.length(2);
-    const frame1 = spectrumsProcessor(1, () => ([2, 2, 6, 2]));
-    expect(frame1).to.have.length(2);
+    const frame0 = spectrumsProcessor(() => ([1, 2, 3, 4]));
+    expect(frame0).to.have.length(24);
+    const frame1 = spectrumsProcessor(() => ([2, 2, 6, 2]));
+    expect(frame1).to.have.length(24);
   });
 });

package/src/tests/config.test.ts

@@ -79,9 +79,9 @@ describe('config', function() {
     );
 
     const result2 = getSpectrumWidthAbsolute({
-      outVideo: { spectrum: { width: 420 }}
+      outVideo: { spectrum: { width: 600 }}
     } as Config, backgroundImageWidth);
-    expect(result2).equal(420);
+    expect(result2).equal(600);
 
     const result3 = getSpectrumWidthAbsolute({
       outVideo: { spectrum: { width: '69%' }}
@@ -117,13 +117,11 @@ describe('config', function() {
   });
 
   it('getSpectrumHeightAbsolute', function() {
-    const backgroundImageHeight = 768;
+    const backgroundImageHeight = 720;
     const result1 = getSpectrumHeightAbsolute({
       outVideo: {}
     } as Config, backgroundImageHeight);
-    expect(result1).equal(
-      backgroundImageHeight * (parseInt(defaults.spectrumHeight) / 100)
-    );
+    expect(result1).equal(160);
 
     const result2 = getSpectrumHeightAbsolute({
       outVideo: { spectrum: { height: 420 }}
@@ -212,7 +210,7 @@ describe('config', function() {
 
   it('getSpectrumYAbsolute', function() {
     const spectrumHeight = 125;
-    const backgroundImageHeight = 768;
+    const backgroundImageHeight = 721;
     const result1 = getSpectrumYAbsolute(
       {
         outVideo: {},
@@ -221,7 +219,7 @@ describe('config', function() {
       backgroundImageHeight
     );
     expect(result1).equal(
-      0
+      298
     );
 
     const result2 = getSpectrumYAbsolute(