src/linkedin-video/AnimGraphScene.tsx

import ExcitedSubtitles from "../subtitles/excited_Subtitles";
import { OriginalManuscript, Transcript } from 'common-utils';
import * as go from 'gojs';
import React, { useEffect, useRef, useCallback, useState } from 'react';
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from 'reactflow';

import 'reactflow/dist/style.css';
import RemoveAttributionExample, * as Test from './Test'
import { RenderUtils } from "../RenderUtils";
import { Audio, useCurrentFrame, AbsoluteFill, staticFile } from "remotion";
import { GenerateWordGroupRanges } from "../ig-reel/IGSimpleScene";
import { Group } from "../models/Types";
import GeneralSubtitles from "../subtitles/general_Subtitles";


export function AnimGraphScene(props: any) {

  let item: Transcript = props.item
  const [subtitles, setSubtitles] = useState(undefined)
  const [groups, setGroups] = useState(undefined)
  let { audioCaptionFile, durationInSeconds } = item
  const { script } = props
  const { meta } = script
  const { fps } = meta
  const frame = useCurrentFrame();
  let speechPath: any = RenderUtils.getFileName(item?.audioFullPath)


  useEffect(() => {
    GenerateWordGroupRanges(audioCaptionFile, setSubtitles, setGroups)
  }, [])

  if (!groups) {
    return (<></>)
  }


  let curSecond: Number = frame / fps
  let word = RenderUtils.findCurrentWord(curSecond, subtitles)
  let group: Group = RenderUtils.findCurrentGroupByTime(curSecond, groups)

  return (
    <AbsoluteFill style={{
      width: '100%',
      height: '100%',
    }} className='relative'>
      <Audio volume={1} loop src={staticFile(speechPath)} />
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
      }}><DiagramComponent /></div>

      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
      }}>
        <div style={{
          zIndex: 20,
        }} className='absolute inset-0'>
          <GeneralSubtitles position='end' group={group} word={word} />
        </div>
      </div>
      //@ts-ignore

    </AbsoluteFill>
  )

}






function DiagramComponent() {
  return (
    <RemoveAttributionExample />
  )
}