Spaces:
Running
Running
File size: 2,277 Bytes
721c5b3 b32a2e0 721c5b3 b32a2e0 721c5b3 b32a2e0 721c5b3 b32a2e0 721c5b3 b32a2e0 721c5b3 b32a2e0 721c5b3 |
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
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 />
)
} |