gistfile1.txt

```  return (
    <AbsoluteFill>

      <AbsoluteFill>
      <OffthreadVideo pauseWhenBuffering={true} src={src} />      
      </AbsoluteFill>

      {/* Render Broll Videos */}
      {groupedBroll.map((brollGroup: any, index: number) => {
        if (!brollGroup.broll) return null;

        const startFrame = Math.round(brollGroup.start * fps);
        const endFrame = Math.round(brollGroup.end * fps);
        const durationInFrames = endFrame - startFrame;

        return (
          <Sequence key={`broll-${index}`} from={startFrame} premountFor={100}>
            <OffthreadVideo pauseWhenBuffering={true}
              src={brollGroup.broll.url}
              startFrom={Math.max(0, startFrame)}
              endAt={Math.max(0, endFrame)}
              style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '200%',
                height: '100%',
                transform: 'scale(1.2)',
              }}
            />
          </Sequence>
        );
      })}

      {subtitleGroups.map((group, index) => {
        const startFrame = Math.round(group.start * fps);
        const endFrame = Math.round(group.end * fps);
        const durationInFrames = endFrame - startFrame;

        if (durationInFrames <= 0) {
          return null;
        }

        return (<>
          <Sequence
            key={index}
            from={startFrame}
            durationInFrames={durationInFrames}
          >

            <Subtitle 
              font_size={(group.font_size != 0) ? group.font_size : style.fontSize} 
              position_y={(group.position_y != 0) ? group.position_y : style.positionY} 
              frame={frame} 
              group={group} 
              words={group.words} 
              maxWordsPerLine={group.words.length} 
              style={style}
            />
          </Sequence></>
        );
      })}
      {!loading && subtitleGroups.length === 0 && <NoCaptionFile />}
    </AbsoluteFill>
  );
};```