<Image/> component about remotion HOT 8 CLOSED

Awesome, that fixed the iframe flickering, thanks!

For other cases, maybe you can hide the handle, delayRender, and continueRender details inside one hook:

function useResumer() {
  const [handle] = useState(() => delayRender());

  const resumeRender = useCallback(() => {
    continueRender(handle);
  }, [handle]);

  return resumeRender;
}

or something like that.

from remotion.

Maybe iframes have a similar problem? They consistently disappear in some frames. Here's an example.

from remotion.

Good point! Let's also make an IFrame component then.

Can you try if this <IFrame> component solves your problem?

import {useCallback, useState} from 'react';
import {continueRender, delayRender} from 'remotion';

export const IFrame: React.FC<Omit<
	React.DetailedHTMLProps<
		React.IframeHTMLAttributes<HTMLIFrameElement>,
		HTMLIFrameElement
	>,
	'onLoad'
>> = (props) => {
	const [handle] = useState(() => delayRender());

	const onLoad = useCallback(() => {
		continueRender(handle);
	}, [handle]);

	return <iframe {...props} onLoad={onLoad} />;
};

I'll then add it to Remotion Core, add documentation and improve DX by adding an ESLint Rule to the Remotion plugin!

from remotion.

Hey @JonnyBurger awesome project!

I think that suspense can help with this issue!

We can create custom suspense catcher and delayRender inside, like this

import {continueRender, delayRender} from 'remotion';

class VideoSuspense extends Component {
  constructor () {
    this.state = {
      loading: false
    }
  }
  
  componentDidCatch(promise) {
    if (isPromise(promise)) {
      this.setState({ loading: true })
      delayRender()
      promise.then(() => {
        this.setState({ loading: true })
        continueRender()
      })

    } else {
      throw promise
    }
  }

  render () {
    return this.state.loading ? null : this.props.children
  }
}



// root

<VideoSuspense>
  <Video/>
</VideoSuspense>

it should be better, because we don't need to wrap components that already support suspense with remotion delayRender/continueRender, and can use existed ones

what do you think about that? I can help with implementation

from remotion.

@jeetiss If that is possible using Suspense, then that's definitely preferrable!

But how does it work? Where does that promise come from? How do we hook into the onLoad function of img, iframe component?

from remotion.

Since a lot of people are affected, I am going ahead with the original plan and will merge #32. There is now also an ESLint rule enabled which will warn you if you use the native or <iframe> component!

from remotion.

Fixed by #32

from remotion.

@JonnyBurger, yes ofc! i am going to open new issue for suspense

But how does it work?

I'm not the best explainer) super simple scheme:

• Component loads some resource and throws a promise
• ErrorBoundary catch this promise and wait until it resolves and continue render

Where does that promise come from?

Components throw them:

• https://github.com/vercel/swr/blob/master/src/use-swr.ts#L801
• https://github.com/mbrevda/react-image/blob/master/src/useImage.tsx#L80
• https://github.com/jaredpalmer/the-platform/blob/master/src/Img.tsx

iframe component?

Iframe component is not so trivial for suspense, but can be implemented with hacks:
https://gist.github.com/threepointone/e73a87f7bbbebc78cf71744469ec5a15

Suspense is still experimental, but react community have a lot components that supports this feature
So i think it fit great for remotion

from remotion.