Preview Remotion videos in PRs

Stoat can help preview videos generated by Remotion as part of the build in a comment on any pull request. In the future we will be able to compare versions of a video with previous versions or the version in the main branch.

Add link to video preview

1. Set up Stoat with our getting started guide.

2. Create a GitHub workflow that renders the Remotion video.

   name: Preview video
   on:
     push:
       branches:
         - main
     pull_request:
       branches:
         - main
   jobs:
     render:
       name: Render video
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v3
         - uses: actions/setup-node@v3
           with:
             node-version: '16'
             cache: npm
         - run: sudo apt update
         - run: sudo apt install ffmpeg
         - run: npm i
         - name: Generate video
           run: npm run build
         - name: Run Stoat Action
           uses: stoat-dev/stoat-action@v0
           if: always()

3. Update the Stoat config with a video preview task and a gif preview task under the static_hosting plugin:

   .stoat/config.yaml

   version: 1
   enabled: true
   plugins:
    static_hosting:
      video_preview:
        # This file is generated by remotion in the
        # "Generate video" step of the GitHub workflow.
        path: out/video.mp4

That's it. If we create a pull request now, when the build completes, we should see a link to the generated video hosted by Stoat.

Static Hosting

Name	Link	Commit	Status
video_preview	Visit	dd480c1	✅

Click on the link will take us to the hosted video right away.

Add GIF preview

The above example has one flaw: we still need one click to preview the video. This is because GitHub doesn't support embedding videos in comments, unless the video is uploaded to GitHub directly. To get around this, we can generate a GIF from the video and embed that in the Stoat comment.

1. To do so, we need to first update our workflow by adding one step after "Generate video":

   - name: Generate video
     run: npm run build
   
   # This is the new step.
   - name: Generate gif
     run: ffmpeg -i out/video.mp4 -vf "fps=10,scale=640:-1" -pix_fmt rgb24 out/video.gif
   
   - name: Run Stoat Action
     uses: stoat-dev/stoat-action@v0
     if: always()

2. Add a Stoat template

   The default comment shows a table listing all the statically hosted build artifacts, which is not good enough for video preview. The good news is that Stoat is highly customizable. So let's add a comment template just for our use case. Add a file at .stoat/comment.hbs with the following content:

   ## Preview
   
   [![preview]({{ plugins.static_hosting.gif_preview.link }})]({{ plugins.static_hosting.video_preview.link }})
   
   (Click the GIF go to the full video.)

3. Update the Stoat config

   version: 1
   enabled: true
   # This field references the above comment template.
   comment_template_file: .stoat/comment.hbs
   plugins:
     static_hosting:
       video_preview:
         # This file is generated by remotion in the
         # "Generate video" step of the GitHub workflow.
         path: out/video.mp4
       gif_preview:
         # This file is generated from the remotion video in the
         # "Generate gif" step of the GitHub workflow.
         path: out/video.gif

When the build completes, the Stoat comment will be updated to this:

Preview

(Click the GIF go to the full video.)

It is a clickable GIF that provides both a preview and a link to the full video, and it is fully automated by Stoat.

Example Repo

See a Remotion template repo integrated with Stoat here: stoat-dev/example-remotion. It is forked from the official remotion-dev/template-helloworld project.

Here is the pull request that demonstrates the preview: link.