Remotion with Stoat Video Preview

This is a fork of the remotion-dev/template-helloworld repo to demo how to use Stoat to preview your Remotion video. Also see this tutorial for details.

1. Install the Stoat App for the repo.

2. Create a GitHub workflow for preview. An example can be found in .github/workflows/preview-video.yml.

   name: Preview videoon:
   push:
   branches:
   - mainpull_request:
   branches:
   - mainjobs:
   render:
   name: Render videoruns-on: ubuntu-lateststeps:
   - uses: actions/checkout@v3
   - uses: actions/setup-node@v3with:
   node-version: '16'cache: npm
   - run: sudo apt update
   - run: sudo apt install ffmpeg
   - run: npm i
   - name: Generate videorun: npm run build
   - name: Generate gifrun: ffmpeg -i out/video.mp4 -vf "fps=10,scale=640:-1" -pix_fmt rgb24 out/video.gif
   - name: Run Stoat Actionuses: stoat-dev/stoat-action@v0if: always()

3. Add the Stoat config in .stoat/config.yaml.

   ---
   version: 1enabled: truecomment_template_file: .stoat/comment.hbsplugins:
   static_hosting:
   video_preview:
   # This file is generated by remotion in the# "Generate video" step of the GitHub workflow.path: out/video.mp4gif_preview:
   # This file is generated from the remotion video in the# "Generate gif" step of the GitHub workflow.path: out/video.gif

4. Add the Stoat template in .stoat/comment.hbs.

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

   The template file path must match the comment_template_file field in the Stoat config.

5. That's it. Now each time you make changes to the repo and opens a pull request, a comment will show up to provide a preview of the generated video like this:

   

   (Click the GIF go to the full video.)

   Check out this pull request for details.