page.tsx

'use client';

import CaptionBox, { Captions } from '@/components/CaptionBox';

import Timeline from '@/components/Timeline';

import { useRemotionPlayer } from '@/lib/hooks/use-remotion-player';
import { Clip } from '@/remotion/Clip';
import { KeyFrame } from '@/types';

import { CompositionProps, defaultMyCompProps } from '@/types/constants';
import { Player, PlayerRef } from '@remotion/player';

import { useMemo, useRef, useState } from 'react';
import { z } from 'zod';
import { createStore } from 'zustand';

export const useZustandStore = createStore<{ isPlaying: boolean }>((set) => ({
  isPlaying: false,
}));
export default function Home() {
  const playerRef = useRef<PlayerRef>(null);
  const { togglePlayPause } = useRemotionPlayer(playerRef, {
    onPause: () => useZustandStore.setState({ isPlaying: false }),
    onPlay: () => useZustandStore.setState({ isPlaying: true }),
  });

  const inputProps: z.infer<typeof CompositionProps> = useMemo(() => {
    return {
      text: 'lol',
      textColor: 'white',
    };
  }, []);      

  const COMPOSITION_HEIGHT = 576;

  return (
    <div className='flex flex-col w-screen h-screen items-center'>
      {/* TODO: set max-height of captions to be the height of player. define a variable */}
      <div
        className={`flex relative flex-row w-full max-h-[${COMPOSITION_HEIGHT}px] justify-between`}
      >
        <Captions  />

        <Player
          ref={playerRef}
          inputProps={inputProps}
          className='border-white border-2 w-fit h-fit'
          component={Clip}
          posterFillMode='composition-size'
          durationInFrames={180}
          compositionWidth={324}
          compositionHeight={COMPOSITION_HEIGHT}
          fps={60}
          controls
          autoPlay
          loop
        />
      </div>
    </div>
  );
}