fix: use webp format for less bandwidth

[dylanjha]

• use webp format for thumbnail and storyboard

Even with signed URLs, this works with the same token. See:

Thumbnail token:

• thumbnail jpg
• thumbnail webp

And the storyboard token:

• storyboard.vtt with jpg
• storyboard.vtt with webp

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
elements-demo-create-react-app	✅ Ready (Inspect)	Visit Preview	Dec 16, 2022 at 10:49PM (UTC)
elements-demo-nextjs	✅ Ready (Inspect)	Visit Preview	Dec 16, 2022 at 10:49PM (UTC)
elements-demo-svelte-kit	✅ Ready (Inspect)	Visit Preview	Dec 16, 2022 at 10:49PM (UTC)
elements-demo-vanilla	✅ Ready (Inspect)	Visit Preview	Dec 16, 2022 at 10:49PM (UTC)
elements-demo-vue	✅ Ready (Inspect)	Visit Preview	Dec 16, 2022 at 10:49PM (UTC)

[gkatsev]

👍🏻

Looks like goes from ~220KB transferred to ~131KB

[codecov]

Codecov Report

Merging #525 (d6a427f) into main (5c27059) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             main     #525   +/-   ##
=======================================
  Coverage   83.11%   83.11%           
=======================================
  Files          26       26           
  Lines        6183     6184    +1     
  Branches      266      266           
=======================================
+ Hits         5139     5140    +1     
  Misses       1043     1043           
  Partials        1        1           

Impacted Files	Coverage Δ
packages/mux-player/src/helpers.ts	87.94% <100.00%> (+0.05%)	⬆️

[dylanjha]

@gkatsev yeah that's what I'm seeing for the thumbnail, for the storyboard I'm seeing:

• 212 KB for jpg
• 145 KB for webp

Also, this asset is a short duration, so it only has 24 images in the storyboard. Longer assets will max out at 100 images iirc