@livekit/react-native 2.5.1 → 2.6.1

package/lib/typescript/lib/commonjs/components/BarVisualizer.d.ts

@@ -0,0 +1,32 @@
+export const __esModule: boolean;
+/**
+ * @beta
+ */
+/**
+ * Visualizes audio signals from a TrackReference as bars.
+ * If the `state` prop is set, it automatically transitions between VoiceAssistant states.
+ * @beta
+ *
+ * @remarks For VoiceAssistant state transitions this component requires a voice assistant agent running with livekit-agents \>= 0.9.0
+ *
+ * @example
+ * ```tsx
+ * function SimpleVoiceAssistant() {
+ *   const { state, audioTrack } = useVoiceAssistant();
+ *   return (
+ *    <BarVisualizer
+ *      state={state}
+ *      trackRef={audioTrack}
+ *    />
+ *   );
+ * }
+ * ```
+ */
+export function BarVisualizer({ style, state, barCount, trackRef, options }: {
+    style?: {} | undefined;
+    state: any;
+    barCount?: number | undefined;
+    trackRef: any;
+    options: any;
+}): any;
+export function useBarAnimator(state: any, columns: any, interval: any): any;

package/lib/typescript/lib/commonjs/events/EventEmitter.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: boolean;
+export function addListener(listener: any, eventName: any, eventHandler: any): void;
+export function removeListener(listener: any): void;
+export function setupNativeEvents(): void;

package/lib/typescript/lib/commonjs/hooks/useMultibandTrackVolume.d.ts

@@ -0,0 +1,8 @@
+export const __esModule: boolean;
+/**
+ * A hook for tracking the volume of an audio track across multiple frequency bands.
+ *
+ * @param trackOrTrackReference
+ * @returns A number array containing the volume for each frequency band.
+ */
+export function useMultibandTrackVolume(trackOrTrackReference: any, options?: {}): any;

package/lib/typescript/lib/commonjs/hooks/useTrackVolume.d.ts

@@ -0,0 +1,8 @@
+export const __esModule: boolean;
+/**
+ * A hook for tracking the volume of an audio track.
+ *
+ * @param trackOrTrackReference
+ * @returns A number between 0-1 representing the volume.
+ */
+export function useTrackVolume(trackOrTrackReference: any): any;

package/lib/typescript/lib/module/LKNativeModule.d.ts

@@ -0,0 +1,2 @@
+export default LiveKitModule;
+declare const LiveKitModule: any;

package/lib/typescript/lib/module/components/BarVisualizer.d.ts

@@ -0,0 +1,10 @@
+export function BarVisualizer({ style, state, barCount, trackRef, options }: {
+    style?: {} | undefined;
+    state: any;
+    barCount?: number | undefined;
+    trackRef: any;
+    options: any;
+}): React.CElement<import("react-native").ViewProps, View>;
+export function useBarAnimator(state: any, columns: any, interval: any): never[];
+import { View } from 'react-native';
+import React from 'react';

package/lib/typescript/lib/module/events/EventEmitter.d.ts

@@ -0,0 +1,3 @@
+export function setupNativeEvents(): void;
+export function addListener(listener: any, eventName: any, eventHandler: any): void;
+export function removeListener(listener: any): void;

package/lib/typescript/lib/module/hooks/useMultibandTrackVolume.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook for tracking the volume of an audio track across multiple frequency bands.
+ *
+ * @param trackOrTrackReference
+ * @returns A number array containing the volume for each frequency band.
+ */
+export function useMultibandTrackVolume(trackOrTrackReference: any, options?: {}): never[];

package/lib/typescript/lib/module/hooks/useTrackVolume.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook for tracking the volume of an audio track.
+ *
+ * @param trackOrTrackReference
+ * @returns A number between 0-1 representing the volume.
+ */
+export function useTrackVolume(trackOrTrackReference: any): number;

package/lib/typescript/lib/module/hooks.d.ts

@@ -1,2 +1,4 @@
 export * from "./hooks/useE2EEManager";
+export * from "./hooks/useTrackVolume";
+export * from "./hooks/useMultibandTrackVolume";
 export { useConnectionState, useDataChannel, useIsSpeaking, useLocalParticipant, useLocalParticipantPermissions, useParticipantInfo, useParticipants, useRemoteParticipants, useRemoteParticipant, useSpeakingParticipants, useSortedParticipants, useChat, useIsEncrypted, useRoomInfo, useIsMuted, useParticipantTracks, useLiveKitRoom, RoomContext, useRoomContext, ParticipantContext, useParticipantContext, TrackRefContext, useTrackRefContext, useTracks, isTrackReference, useEnsureTrackRef, useTrackMutedIndicator, useVisualStableUpdate } from "@livekit/components-react";

package/lib/typescript/lib/module/index.d.ts

@@ -5,6 +5,7 @@
  */
 export function registerGlobals(): void;
 export * from "./hooks";
+export * from "./components/BarVisualizer";
 export * from "./components/LiveKitRoom";
 export * from "./components/VideoTrack";
 export * from "./components/VideoView";

package/lib/typescript/src/LKNativeModule.d.ts

@@ -0,0 +1,2 @@
+declare const LiveKitModule: any;
+export default LiveKitModule;

package/lib/typescript/src/components/BarVisualizer.d.ts

@@ -0,0 +1,49 @@
+import { type AgentState, type TrackReferenceOrPlaceholder } from '@livekit/components-react';
+import { type ColorValue, type DimensionValue, type ViewStyle } from 'react-native';
+import React from 'react';
+export type BarVisualizerOptions = {
+    /** decimal values from 0 to 1 */
+    maxHeight?: number;
+    /** decimal values from 0 to 1 */
+    minHeight?: number;
+    barColor?: ColorValue;
+    barWidth?: DimensionValue;
+    barBorderRadius?: number;
+};
+/**
+ * @beta
+ */
+export interface BarVisualizerProps {
+    /** If set, the visualizer will transition between different voice assistant states */
+    state?: AgentState;
+    /** Number of bars that show up in the visualizer */
+    barCount?: number;
+    trackRef?: TrackReferenceOrPlaceholder;
+    options?: BarVisualizerOptions;
+    /**
+     * Custom React Native styles for the container.
+     */
+    style?: ViewStyle;
+}
+/**
+ * Visualizes audio signals from a TrackReference as bars.
+ * If the `state` prop is set, it automatically transitions between VoiceAssistant states.
+ * @beta
+ *
+ * @remarks For VoiceAssistant state transitions this component requires a voice assistant agent running with livekit-agents \>= 0.9.0
+ *
+ * @example
+ * ```tsx
+ * function SimpleVoiceAssistant() {
+ *   const { state, audioTrack } = useVoiceAssistant();
+ *   return (
+ *    <BarVisualizer
+ *      state={state}
+ *      trackRef={audioTrack}
+ *    />
+ *   );
+ * }
+ * ```
+ */
+export declare const BarVisualizer: ({ style, state, barCount, trackRef, options, }: BarVisualizerProps) => React.JSX.Element;
+export declare const useBarAnimator: (state: AgentState | undefined, columns: number, interval: number) => number[];

package/lib/typescript/src/events/EventEmitter.d.ts

@@ -0,0 +1,6 @@
+export declare function setupNativeEvents(): void;
+type EventHandler = (event: unknown) => void;
+type Listener = unknown;
+export declare function addListener(listener: Listener, eventName: string, eventHandler: EventHandler): void;
+export declare function removeListener(listener: Listener): void;
+export {};

package/lib/typescript/src/hooks/useMultibandTrackVolume.d.ts

@@ -0,0 +1,31 @@
+import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';
+import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
+/**
+ * Interface for configuring options for the useMultibandTrackVolume hook.
+ * @alpha
+ */
+export interface MultiBandTrackVolumeOptions {
+    /**
+     * the number of bands to split the audio into
+     */
+    bands?: number;
+    /**
+     * cut off frequency on the lower end
+     */
+    minFrequency?: number;
+    /**
+     * cut off frequency on the higher end
+     */
+    maxFrequency?: number;
+    /**
+     * update should run every x ms
+     */
+    updateInterval?: number;
+}
+/**
+ * A hook for tracking the volume of an audio track across multiple frequency bands.
+ *
+ * @param trackOrTrackReference
+ * @returns A number array containing the volume for each frequency band.
+ */
+export declare function useMultibandTrackVolume(trackOrTrackReference?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder, options?: MultiBandTrackVolumeOptions): number[];

package/lib/typescript/src/hooks/useTrackVolume.d.ts

@@ -0,0 +1,9 @@
+import { type TrackReferenceOrPlaceholder } from '@livekit/components-react';
+import { type LocalAudioTrack, type RemoteAudioTrack } from 'livekit-client';
+/**
+ * A hook for tracking the volume of an audio track.
+ *
+ * @param trackOrTrackReference
+ * @returns A number between 0-1 representing the volume.
+ */
+export declare function useTrackVolume(trackOrTrackReference?: LocalAudioTrack | RemoteAudioTrack | TrackReferenceOrPlaceholder): number;

package/lib/typescript/src/hooks.d.ts

@@ -2,4 +2,6 @@ export { useConnectionState, useDataChannel, useIsSpeaking, useLocalParticipant,
 export type { UseLocalParticipantOptions, UseParticipantInfoOptions, UseParticipantsOptions, UseRemoteParticipantOptions, UseRemoteParticipantsOptions, UseTracksOptions, TrackReference, TrackReferenceOrPlaceholder, UseVisualStableUpdateOptions, } from '@livekit/components-react';
 export type { ReceivedDataMessage } from '@livekit/components-core';
 export * from './hooks/useE2EEManager';
+export * from './hooks/useTrackVolume';
+export * from './hooks/useMultibandTrackVolume';
 export type { UseRNE2EEManagerOptions } from './hooks/useE2EEManager';

package/lib/typescript/src/index.d.ts

@@ -11,6 +11,7 @@ import RNKeyProvider, { type RNKeyProviderOptions } from './e2ee/RNKeyProvider';
  */
 export declare function registerGlobals(): void;
 export * from './hooks';
+export * from './components/BarVisualizer';
 export * from './components/LiveKitRoom';
 export * from './components/VideoTrack';
 export * from './components/VideoView';

package/livekit-react-native.podspec

@@ -1,6 +1,7 @@
 require "json"
 
 package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
 
 Pod::Spec.new do |s|
   s.name         = "livekit-react-native"
@@ -13,15 +14,34 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => "10.0" }
   s.source       = { :git => "https://github.com/livekit/client-sdk-react-native.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm}"
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
 
   s.framework    = 'AVFAudio'
 
-  s.dependency "React-Core"
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
+
   s.dependency "livekit-react-native-webrtc"
 
-  # Swift/Objective-C compatibility
-  s.pod_target_xcconfig = {
-    'DEFINES_MODULE' => 'YES'
-  }
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+    # Don't install the dependencies when we run `pod install` in the old architecture.
+    if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig    = {
+          "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+          "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+          "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+      }
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
+  end
 end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livekit/react-native",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "description": "LiveKit for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -42,10 +42,10 @@
     "android"
   ],
   "dependencies": {
-    "@livekit/components-react": "^2.0.6",
+    "@livekit/components-react": "^2.8.1",
     "array.prototype.at": "^1.1.1",
     "events": "^3.3.0",
-    "livekit-client": "^2.7.5",
+    "livekit-client": "^2.9.0",
     "loglevel": "^1.8.0",
     "promise.allsettled": "^1.0.5",
     "react-native-url-polyfill": "^1.3.0",
@@ -57,7 +57,7 @@
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@commitlint/config-conventional": "^16.2.1",
-    "@livekit/react-native-webrtc": "^125.0.7",
+    "@livekit/react-native-webrtc": "^125.0.8",
     "@react-native/babel-preset": "0.74.84",
     "@react-native/eslint-config": "0.74.84",
     "@react-native/metro-config": "0.74.84",
@@ -83,7 +83,7 @@
     "typescript": "5.0.4"
   },
   "peerDependencies": {
-    "@livekit/react-native-webrtc": "^125.0.7",
+    "@livekit/react-native-webrtc": "^125.0.8",
     "react": "*",
     "react-native": "*"
   },

package/src/LKNativeModule.ts

@@ -0,0 +1,19 @@
+import { NativeModules, Platform } from 'react-native';
+const LINKING_ERROR =
+  `The package '@livekit/react-native' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+const LiveKitModule = NativeModules.LivekitReactNativeModule
+  ? NativeModules.LivekitReactNativeModule
+  : new Proxy(
+      {},
+      {
+        get() {
+          throw new Error(LINKING_ERROR);
+        },
+      }
+    );
+
+export default LiveKitModule;

package/src/audio/AudioSession.ts

@@ -1,20 +1,5 @@
-import { NativeModules, Platform } from 'react-native';
-const LINKING_ERROR =
-  `The package '@livekit/react-native' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo managed workflow\n';
-
-const LivekitReactNative = NativeModules.LivekitReactNative
-  ? NativeModules.LivekitReactNative
-  : new Proxy(
-      {},
-      {
-        get() {
-          throw new Error(LINKING_ERROR);
-        },
-      }
-    );
+import { Platform } from 'react-native';
+import LiveKitModule from '../LKNativeModule';
 
 /**
  * Configuration for the underlying AudioSession.
@@ -252,21 +237,21 @@ export default class AudioSession {
    * See also useIOSAudioManagement for automatic configuration of iOS audio options.
    */
   static configureAudio = async (config: AudioConfiguration) => {
-    await LivekitReactNative.configureAudio(config);
+    await LiveKitModule.configureAudio(config);
   };
 
   /**
    * Starts an AudioSession.
    */
   static startAudioSession = async () => {
-    await LivekitReactNative.startAudioSession();
+    await LiveKitModule.startAudioSession();
   };
 
   /**
    * Stops the existing AudioSession.
    */
   static stopAudioSession = async () => {
-    await LivekitReactNative.stopAudioSession();
+    await LiveKitModule.stopAudioSession();
   };
 
   /**
@@ -297,7 +282,7 @@ export default class AudioSession {
     if (Platform.OS === 'ios') {
       return ['default', 'force_speaker'];
     } else if (Platform.OS === 'android') {
-      return (await LivekitReactNative.getAudioOutputs()) as string[];
+      return (await LiveKitModule.getAudioOutputs()) as string[];
     } else {
       return [];
     }
@@ -311,7 +296,7 @@ export default class AudioSession {
    * @param deviceId A deviceId retrieved from {@link getAudioOutputs}
    */
   static selectAudioOutput = async (deviceId: string) => {
-    await LivekitReactNative.selectAudioOutput(deviceId);
+    await LiveKitModule.selectAudioOutput(deviceId);
   };
 
   /**
@@ -321,7 +306,7 @@ export default class AudioSession {
    */
   static showAudioRoutePicker = async () => {
     if (Platform.OS === 'ios') {
-      await LivekitReactNative.showAudioRoutePicker();
+      await LiveKitModule.showAudioRoutePicker();
     }
   };
 
@@ -335,7 +320,7 @@ export default class AudioSession {
     config: AppleAudioConfiguration
   ) => {
     if (Platform.OS === 'ios') {
-      await LivekitReactNative.setAppleAudioConfiguration(config);
+      await LiveKitModule.setAppleAudioConfiguration(config);
     }
   };
 }

package/src/components/BarVisualizer.tsx

@@ -0,0 +1,252 @@
+import {
+  type AgentState,
+  type TrackReferenceOrPlaceholder,
+  useMaybeTrackRefContext,
+} from '@livekit/components-react';
+import {
+  Animated,
+  StyleSheet,
+  View,
+  type ColorValue,
+  type DimensionValue,
+  type ViewStyle,
+} from 'react-native';
+import { useMultibandTrackVolume } from '../hooks';
+import React, { useEffect, useRef, useState } from 'react';
+export type BarVisualizerOptions = {
+  /** decimal values from 0 to 1 */
+  maxHeight?: number;
+  /** decimal values from 0 to 1 */
+  minHeight?: number;
+
+  barColor?: ColorValue;
+  barWidth?: DimensionValue;
+  barBorderRadius?: number;
+};
+
+const defaultBarOptions = {
+  maxHeight: 1,
+  minHeight: 0.2,
+  barColor: '#888888',
+  barWidth: 24,
+  barBorderRadius: 12,
+} as const satisfies BarVisualizerOptions;
+
+const sequencerIntervals = new Map<AgentState, number>([
+  ['connecting', 2000],
+  ['initializing', 2000],
+  ['listening', 500],
+  ['thinking', 150],
+]);
+
+const getSequencerInterval = (
+  state: AgentState | undefined,
+  barCount: number
+): number | undefined => {
+  if (state === undefined) {
+    return 1000;
+  }
+  let interval = sequencerIntervals.get(state);
+  if (interval) {
+    switch (state) {
+      case 'connecting':
+        // case 'thinking':
+        interval /= barCount;
+        break;
+
+      default:
+        break;
+    }
+  }
+  return interval;
+};
+/**
+ * @beta
+ */
+export interface BarVisualizerProps {
+  /** If set, the visualizer will transition between different voice assistant states */
+  state?: AgentState;
+  /** Number of bars that show up in the visualizer */
+  barCount?: number;
+  trackRef?: TrackReferenceOrPlaceholder;
+  options?: BarVisualizerOptions;
+  /**
+   * Custom React Native styles for the container.
+   */
+  style?: ViewStyle;
+}
+
+/**
+ * Visualizes audio signals from a TrackReference as bars.
+ * If the `state` prop is set, it automatically transitions between VoiceAssistant states.
+ * @beta
+ *
+ * @remarks For VoiceAssistant state transitions this component requires a voice assistant agent running with livekit-agents \>= 0.9.0
+ *
+ * @example
+ * ```tsx
+ * function SimpleVoiceAssistant() {
+ *   const { state, audioTrack } = useVoiceAssistant();
+ *   return (
+ *    <BarVisualizer
+ *      state={state}
+ *      trackRef={audioTrack}
+ *    />
+ *   );
+ * }
+ * ```
+ */
+export const BarVisualizer = ({
+  style = {},
+  state,
+  barCount = 5,
+  trackRef,
+  options,
+}: BarVisualizerProps) => {
+  let trackReference = useMaybeTrackRefContext();
+
+  if (trackRef) {
+    trackReference = trackRef;
+  }
+
+  const opacityAnimations = useRef<Animated.Value[]>([]).current;
+  let magnitudes = useMultibandTrackVolume(trackReference, { bands: barCount });
+
+  let opts = { ...defaultBarOptions, ...options };
+
+  const highlightedIndices = useBarAnimator(
+    state,
+    barCount,
+    getSequencerInterval(state, barCount) ?? 100
+  );
+
+  useEffect(() => {
+    let animations = [];
+    for (let i = 0; i < barCount; i++) {
+      if (!opacityAnimations[i]) {
+        opacityAnimations[i] = new Animated.Value(0.3);
+      }
+      let targetOpacity = 0.3;
+      if (highlightedIndices.includes(i)) {
+        targetOpacity = 1;
+      }
+      animations.push(
+        Animated.timing(opacityAnimations[i], {
+          toValue: targetOpacity,
+          duration: 250,
+          useNativeDriver: true,
+        })
+      );
+    }
+
+    let parallel = Animated.parallel(animations);
+    parallel.start();
+    return () => {
+      parallel.stop();
+    };
+  }, [highlightedIndices, barCount, opacityAnimations]);
+
+  let bars: React.ReactNode[] = [];
+  magnitudes.forEach((value, index) => {
+    let coerced = Math.min(opts.maxHeight, Math.max(opts.minHeight, value));
+    let coercedPercent = Math.min(100, Math.max(0, coerced * 100 + 5));
+    let opacity = opacityAnimations[index] ?? new Animated.Value(0.3);
+    let barStyle = {
+      opacity: opacity,
+      backgroundColor: opts.barColor,
+      borderRadius: opts.barBorderRadius,
+      width: opts.barWidth,
+    };
+    bars.push(
+      <Animated.View
+        key={index}
+        style={[
+          { height: `${coercedPercent}%` },
+          barStyle,
+          styles.volumeIndicator,
+        ]}
+      />
+    );
+  });
+
+  return <View style={{ ...style, ...styles.container }}>{bars}</View>;
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+  },
+  volumeIndicator: {
+    borderRadius: 12,
+  },
+});
+
+export const useBarAnimator = (
+  state: AgentState | undefined,
+  columns: number,
+  interval: number
+): number[] => {
+  const [index, setIndex] = useState(0);
+  const [sequence, setSequence] = useState<number[][]>([[]]);
+
+  useEffect(() => {
+    if (state === 'thinking') {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === 'connecting' || state === 'initializing') {
+      const seq = [...generateConnectingSequenceBar(columns)];
+      setSequence(seq);
+    } else if (state === 'listening') {
+      setSequence(generateListeningSequenceBar(columns));
+    } else if (state === undefined) {
+      // highlight everything
+      setSequence([new Array(columns).fill(0).map((_, idx) => idx)]);
+    } else {
+      setSequence([[]]);
+    }
+    setIndex(0);
+  }, [state, columns]);
+
+  const animationFrameId = useRef<number | null>(null);
+  useEffect(() => {
+    let startTime = performance.now();
+
+    const animate = (time: number) => {
+      const timeElapsed = time - startTime;
+
+      if (timeElapsed >= interval) {
+        setIndex((prev) => prev + 1);
+        startTime = time;
+      }
+
+      animationFrameId.current = requestAnimationFrame(animate);
+    };
+
+    animationFrameId.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current);
+      }
+    };
+  }, [interval, columns, state, sequence.length]);
+
+  return sequence[index % sequence.length];
+};
+
+const generateListeningSequenceBar = (columns: number): number[][] => {
+  const center = Math.floor(columns / 2);
+  const noIndex = -1;
+
+  return [[center], [noIndex]];
+};
+
+const generateConnectingSequenceBar = (columns: number): number[][] => {
+  const seq: number[][] = [[]];
+
+  for (let x = 0; x < columns; x++) {
+    seq.push([x, columns - 1 - x]);
+  }
+
+  return seq;
+};