Remotion's player components are a render behind when using input fields to control the props.

[floral nova]

As title says. I have some caption boxes which are all connected to a Zustand state and update the state for each interval. Whenever I type in one of them, they are one update behind. For example changing 'text' -> 'textt' in a caption box still displays as 'text' in the Player. Pressing Pause/Play on the player resets the player to the initial state of my captions object, and completely stops updating no matter what I type until I refresh the page.

Also, how to prevent my state from being reset on page reload?

Code Gists with my store, hooks and the Caption components:
https://gist.github.com/polooner/4adc157bbc6b9c51b442f47f1dfaba80

[lucid agate]

this is very likely an issue in your state implementation. Throw some console.log()s throughout your state updates and check where things get to when you are updating inputs.
If it were a Remotion problem, you would be seeing the issue when updating the inputProps in Remotion Studio as well

[shrewd pagoda]

@floral nova if you have data that changes, we highly recommend that you put the state outside of the player.

const [text, setText] = useState()

<Player component={MyComp} inputProps={{text, setText}} /> (ideally memoize inputProps too)

you then get text and setText passed as props to MyComp. that should for sure fix the play/pause bug, maybe also being one update behind? although I do not see an obvious bug from reading the code.

from what I understand, the state management currently happens completely inside your composition. it would be interesting to also see how you use the <Player> component, if you can add that to your example

[floral nova]

Definitely! Will do that and let you know, thank you. Here’s the player:

https://gist.github.com/polooner/fa482491a35aafde66022b34db137d88

[shrewd pagoda]

alright! the player code looks fine to me 🤔

[floral nova]

will move the state stuff to input props like you said and lets see

[floral nova]

hey, just realized it might also be helpful to share my Clip component being used. would you say this is implemented correctly?

export const Clip = ({ text }: z.infer<typeof KeyFrameCompositionProps>) => {
  const frames = useMakeKlips().getKeyFrames();


  return (
    <AbsoluteFill className='bg-gray-100 justify-center items-center'>
      {frames.map((frame, index) => {
        return (
          <Sequence
            from={frame.timeFrom}
            key={`${frame.id}-${index}`}
            durationInFrames={frame.timeTo - frame.timeFrom}
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              marginTop: '',
            }}
          >
            <Caption text={frame.text} marginTop={frame.data?.marginTop} />
          </Sequence>
        );
      })}
    </AbsoluteFill>
  );
};