#Do not allow gif to loop

4 messages · Page 1 of 1 (latest)

tiny cosmos
#

Hi !
Is there a way with @remotion/gif package <Gif/> to stop the gif at the end of its first play ?

tiny cosmos
#

Well here is the solution I found :

import { Gif, getGifDurationInSeconds } from '@remotion/gif'
import { useCallback, useEffect, useState } from 'react'
import {
    continueRender,
    delayRender,
    Freeze,
    useCurrentFrame,
    useVideoConfig,
} from 'remotion'

interface MediaElementProps {
    src: string
    style?: React.CSSProperties
}

export const NotLoopingGif = ({ src, style }: MediaElementProps) => {
    const frame = useCurrentFrame()
    const { fps } = useVideoConfig()
    const [handle] = useState(() => delayRender())
    const [gifDurationInSeconds, setGifDurationInSeconds] = useState<
        number | null
    >(null)

    const getDuration = useCallback(async () => {
        const duration = await getGifDurationInSeconds(src)
        setGifDurationInSeconds(duration)
        continueRender(handle)
    }, [])

    useEffect(() => {
        getDuration()
    }, [])

    if (!src || !gifDurationInSeconds) return null

    const gifDurationInFrames = Math.ceil(fps * gifDurationInSeconds)

    if (frame >= gifDurationInFrames) {
        return (
            <Freeze frame={gifDurationInFrames - 1}>
                <Gif src={src} style={style} />
            </Freeze>
        )
    }

    return <Gif src={src} style={style} />
}
fresh panther
#

@tiny cosmos good idea! if you want you can make an issue and we'll implement a prop that will stop the gif from looping.
your solution works well too!

tiny cosmos