Reencode the media as webm hevc and av1 for smaller files

.typos.toml

@@ -1,7 +1,7 @@
 [files]
 extend-exclude = [
     # files thta make no sense to be searched for typos
-    "*.jpg", "*.js*", "*.json", "*.mov", "*.png", "*.svg", "*.asc",
+    "*.jpg", "*.js*", "*.json", "*.mov", "*.png", "*.svg", "*.asc", "*.mp4", "*.webm",
     "/static/jira",
     "/static/blog/wp-content/uploads/2016/07/predisclosure.signed.txt",
     # external typo that must be replicated for technical correctness

content/blog/2021/09/2021-09-17-this-week-in-matrix-2021-09-17.md

@@ -14,15 +14,15 @@ image = "/blog/img/2021-09-17-NcMmi-cinny-space-release.png"
 
 {{ youtube_player(video_id="5sXzSiMCh6c") }}
 
-We've been chatting with Denis about the vulnerabilities disclosed by Element this Monday. 
+We've been chatting with Denis about the vulnerabilities disclosed by Element this Monday.
 
 ## Dept of Spec 📜
 
 ### Spec
 
 [anoa](https://matrix.to/#/@andrewm:amorgan.xyz) said:
 
-> Here's your weekly spec update! The heart of Matrix is the specification - and this is modified by Matrix Spec Change (MSC) proposals. Learn more about how the process works at https://spec.matrix.org/unstable/proposals.
+> Here's your weekly spec update! The heart of Matrix is the specification - and this is modified by Matrix Spec Change (MSC) proposals. Learn more about how the process works at <https://spec.matrix.org/unstable/proposals>.
 >
 > #### MSC Status
 >
@@ -92,7 +92,6 @@ With rooms version 9 as the default, it feels like Spaces are trying hard to esc
 
 [Heisenbridge](https://github.com/hifi/heisenbridge/) is a bouncer-style Matrix IRC bridge.
 
-
 [hifi](https://matrix.to/#/@hifi:vi.fi) told us:
 
 > Heisenbridge roundup!
@@ -113,8 +112,6 @@ With rooms version 9 as the default, it feels like Spaces are trying hard to esc
 >
 > Thanks!
 
-
-
 ### mautrix-googlechat
 
 [Tulir](https://matrix.to/#/@tulir:maunium.net) said:
@@ -141,21 +138,23 @@ With rooms version 9 as the default, it feels like Spaces are trying hard to esc
 > * There now a toggle to view your password on login/register page.
 >
 > * And there will be an error message when client disconnect to server.
+>
 > #### Bugs
 >
 > * Fixed scroll on login page.
 >
 > * Fixed notification badge color in dark themes.
+>
 > #### Others
 >
 > * We are also started shipping an official docker image which you can find on [DockerHub ajbura/cinny](https://hub.docker.com/repository/docker/ajbura/cinny).
 >
-> Find more about Cinny at https://cinny.in/
+> Find more about Cinny at <https://cinny.in/>
 >
 > Join our channel at: [#cinny:matrix.org](https://matrix.to/#/#cinny:matrix.org)
-> Github: https://github.com/ajbura/cinny
+> Github: <https://github.com/ajbura/cinny>
 >
-> Twitter: https://twitter.com/@cinnyapp
+> Twitter: <https://twitter.com/@cinnyapp>
 
 ![2021-09-17-NcMmi-cinny-space-release.png](/blog/img/2021-09-17-NcMmi-cinny-space-release.png)
 
@@ -165,21 +164,21 @@ I’m thrilled about Spaces support and I'm certain we’ll hear more about Cinn
 
 [Alexandre Franke](https://matrix.to/#/@afranke:matrix.org) got a bit carried away and announced in French:
 
-> La grande nouvelle de la semaine est l’arrivée du [chargement de l’historique](https://gitlab.gnome.org/GNOME/fractal/-/merge_requests/826), implémenté par Julian. Nous avons également 2 nouveaux contributeurs : 
+> La grande nouvelle de la semaine est l’arrivée du [chargement de l’historique](https://gitlab.gnome.org/GNOME/fractal/-/merge_requests/826), implémenté par Julian. Nous avons également 2 nouveaux contributeurs :
 >
 > * djenren a [corrigé l’écran de connexion](https://gitlab.gnome.org/GNOME/fractal/-/merge_requests/834) et [mis à jour la version de Rust suggérée](https://gitlab.gnome.org/GNOME/fractal/-/merge_requests/833)
 >
 > * Dave Patrick a [amélioré le style du code en remplaçant des appels à `nth()` par `get_index()`](https://gitlab.gnome.org/GNOME/fractal/-/merge_requests/836)
 
 ### Hydrogen
 
-A minimal Matrix chat client, focused on performance, offline functionality, and broad browser support. https://github.com/vector-im/hydrogen-web/
+A minimal Matrix chat client, focused on performance, offline functionality, and broad browser support. <https://github.com/vector-im/hydrogen-web/>
 
 [Bruno](https://matrix.to/#/@bwindels:matrix.org) told us:
 
 > Released [0.2.9](https://github.com/vector-im/hydrogen-web/releases/tag/v0.2.9) & [0.2.10](https://github.com/vector-im/hydrogen-web/releases/tag/v0.2.10) this week with the main thing being improvements in preventing scroll jumps when resizing or loading more content in the timeline. Not 100% of scroll jumps will be solved with this release, but it should be improved a lot. Please report any issues you may encounter in this area! There were also a few bugs fixed, see the linked release notes. Try it out at [hydrogen.element.io](https://hydrogen.element.io)!
 
-### Beeper 
+### Beeper
 
 [Brad Murray](https://matrix.to/#/@brad:beeper.com) offered:
 
@@ -193,40 +192,40 @@ A minimal Matrix chat client, focused on performance, offline functionality, and
 >
 > * New verification flow for Desktop, Android, and iOS! Logging in and verifying your session is now super easy to do. This is extra important for Beeper because we enable secure backup by default and require all users to set up a security key.
 
-<video style="max-width:900px" src="/blog/img/2021-09-17-ehqRx-BeeperVerification.m4v" controls></video>
+{{figureVideo(vid="/blog/img/2021-09-17-ehqRx-BeeperVerification.m4v",caption="The new Beeper verification flow")}}
 
 > #### Desktop
 >
 > * Added the ability to view your rooms using our Smart Inbox that places the most important messages at the top, or with Classic which leaves the room in a reverse chronological order.
 >
 > * You can now select network by network which messages should appear in your inbox using our Inbox Filtering feature
-> * We now have beta support for Custom CSS theming! Check out some of the themes that have already been made by the community. https://gitlab.com/beeper/beeper-themes
+> * We now have beta support for Custom CSS theming! Check out some of the themes that have already been made by the community. <https://gitlab.com/beeper/beeper-themes>
 >
 > * Previously we only supported DMs for Discord out of the box, but now you can pick and choose which Discord servers to sync into Beeper
 >
 
 ![2021-09-17-qoIOe-BeeperDesktop.png](/blog/img/2021-09-17-qoIOe-BeeperDesktop.png)
 
-
 > #### iOS
 >
 > * A complete beautiful rewrite of the Room List using SwiftUI. The room list now looks much more native to iOS, while still feeling like Beeper.
 
-<video style="max-width:900px" src="/blog/img/2021-09-17-rQfxH-BeeperiOSRoomList.mp4" controls></video>
+{{figureVideo(vid="/blog/img/2021-09-17-rQfxH-BeeperiOSRoomList.mp4",caption="The Beeper Roomlist Rewrite in Action")}}
 
 > #### Android
 >
 > * Redesigned room list: we started a redesign of our Android app and adopted the Material design language.
 >
-> * Integrated Android SMS bridge: Our previous Android Messages bridge was built on a shakey puppeteer foundation, so we rewrote it. Our new Android SMS uses native APIs to send/receive SMS. RCS remains elusively out of our grasp for now. We open sourced our bridge at https://gitlab.com/beeper/android-sms
+> * Integrated Android SMS bridge: Our previous Android Messages bridge was built on a shakey puppeteer foundation, so we rewrote it. Our new Android SMS uses native APIs to send/receive SMS. RCS remains elusively out of our grasp for now. We open sourced our bridge at <https://gitlab.com/beeper/android-sms>
 
 ![2021-09-17-aqgDm-BeeperAndroidRoomList.png](/blog/img/2021-09-17-aqgDm-BeeperAndroidRoomList.png)
 
 > #### Bots
 >
-> * Wrote a bot for managing Linear issues from Matrix: https://gitlab.com/beeper/linear-maubot
+> * Wrote a bot for managing Linear issues from Matrix: <https://gitlab.com/beeper/linear-maubot>
+>
+> * Wrote a bot to mirror chats into Chatwoot (an open source Intercom-like customer support platform): <https://gitlab.com/beeper/chatwoot>
 >
-> * Wrote a bot to mirror chats into Chatwoot (an open source Intercom-like customer support platform): https://gitlab.com/beeper/chatwoot
 > #### Hiring
 >
 > * We are hiring! Come join many other Matrix community members who have joined the Beeper team including @tulir:maunium.net, @annie:beeper.com, @kilian:beeper.com, @spiritcroc:beeper.com and @sumner:beeper.com (who replied to our last TWIM job post and got a job at Beeper within a week!)
@@ -253,8 +252,6 @@ A minimal Matrix chat client, focused on performance, offline functionality, and
 >
 > I hope this clears up some of the confusion. Feel free to visit us in [#nheko:nheko.im](https://matrix.to/#/#nheko:nheko.im) and tell me, that I am wrong.
 
-
-
 ![2021-09-17-QUWSp-clipboard.png](/blog/img/2021-09-17-QUWSp-clipboard.png)
 
 ![2021-09-17-aYmoK-clipboard.png](/blog/img/2021-09-17-aYmoK-clipboard.png)
@@ -273,6 +270,7 @@ A minimal Matrix chat client, focused on performance, offline functionality, and
 * Continuing discovery of threads.
 * Cross-signing bug fixes.
 * We’re going to involve the community in testing the product. More details to come early next week if you want to lend a hand!
+
 #### iOS
 
 * Made another Release candidate 1.5.4 because of reported regressions. It will be available on the app store on Monday
@@ -316,7 +314,7 @@ A minimal Matrix chat client, focused on performance, offline functionality, and
 >
 > [Polyjuice Client](https://hex.pm/packages/polyjuice_client) 0.4.3 has been released.  This release adds functions for getting room membership (thanks to multi prise) and checking the server spec versions, along with some bug fixes.
 >
-> Finally, the Polyjuice libraries have moved their git repositories from https://gitlab.com/uhoreg to https://gitlab.com/polyjuice.  The old locations should automatically redirect to the new locations.
+> Finally, the Polyjuice libraries have moved their git repositories from <https://gitlab.com/uhoreg> to <https://gitlab.com/polyjuice>.  The old locations should automatically redirect to the new locations.
 
 ## Dept of Ops 🛠
 
@@ -338,7 +336,7 @@ A minimal Matrix chat client, focused on performance, offline functionality, and
 
 ![2021-09-17-G_vQu-sample-interaction.png](/blog/img/2021-09-17-G_vQu-sample-interaction.png)
 
-> You can find the source code here: https://sr.ht/~sumner/standupbot/
+> You can find the source code here: <https://sr.ht/~sumner/standupbot/>
 
 ## Dept of Events and Talks 🗣️
 
@@ -372,19 +370,19 @@ A minimal Matrix chat client, focused on performance, offline functionality, and
 >
 > **Links and further reading:**
 >
-> Play with it at: https://toger5.github.io/TheBoard/ (feel free to join: https://matrix.to/#/#PublicWhiteboardTest_TheBoard:matrix.org with the account used for testing to join the first collaborative board)
-> Join the matrix room: https://matrix.to/#/#TheBoard:matrix.org
+> Play with it at: <https://toger5.github.io/TheBoard/> (feel free to join: <https://matrix.to/#/#PublicWhiteboardTest_TheBoard:matrix.org> with the account used for testing to join the first collaborative board)
+> Join the matrix room: <https://matrix.to/#/#TheBoard:matrix.org>
 >
-> GitHub: https://github.com/toger5/TheBoard
-> Technical Details: https://github.com/toger5/TheBoard/blob/main/spec.md
+> GitHub: <https://github.com/toger5/TheBoard>
+> Technical Details: <https://github.com/toger5/TheBoard/blob/main/spec.md>
 
 ![2021-09-17-eCmKF-image.png](/blog/img/2021-09-17-eCmKF-image.png)
 
 The Board is very exciting! I could see in [the planned use cases](https://github.com/toger5/TheBoard#planned-use-cases) that Timo already intends to make a widget out of it. It would be very useful for real-time collaboration, but that's not all! When asked if a standalone app will come, [Timo](https://matrix.to/#/@toger5:matrix.org) confirmed:
 
 > Indeed. I wasn't thinking about a builtin home-server yet. But a standalone app is still planned because I want the app to be able to manage different boards. Therefore I need to be able to control room creation and listing rooms. It should basically feel like onenote if you intend to use it like that.
 
-## Dept of *Built on Matrix* 🏗️
+## Dept of _Built on Matrix_ 🏗️
 
 ### AAGRINDER
 
@@ -404,7 +402,7 @@ I love the retro vibe of the game, it's really cool!
 >
 > There's a lot more info in my talk from last night at the Open Metaverse Interoperability Demo Night (my talk starts at 37:43)
 >
-> https://youtu.be/e26UJRCGfGk?t=2263
+> <https://youtu.be/e26UJRCGfGk?t=2263>
 >
 > If you want to chat more about Third Room, you can join our Matrix room: [#thirdroom-dev:matrix.org](https://matrix.to/#/#thirdroom-dev:matrix.org)
 
@@ -421,6 +419,7 @@ Beeper mentioned they have several positions open, and [Element is also talents
 Here we reveal, rank, and applaud the homeservers with the lowest ping, as measured by [pingbot](https://github.com/maubot/echo), a [maubot](https://github.com/maubot/maubot) that you can host on your own server.
 
 ### [#ping:maunium.net](https://matrix.to/#/#ping:maunium.net)
+
 Join [#ping:maunium.net](https://matrix.to/#/#ping:maunium.net) to experience the fun live, and to find out how to add YOUR server to the game.
 
 |Rank|Hostname|Median MS|
@@ -437,6 +436,7 @@ Join [#ping:maunium.net](https://matrix.to/#/#ping:maunium.net) to experience th
 |10|eisfunke.com|2014|
 
 ### [#ping-no-synapse:maunium.net](https://matrix.to/#/#ping-no-synapse:maunium.net)
+
 Join [#ping-no-synapse:maunium.net](https://matrix.to/#/#ping-no-synapse:maunium.net) to experience the fun live, and to find out how to add YOUR server to the game.
 
 |Rank|Hostname|Median MS|

content/blog/2022/05/2022-05-30-welcoming-rocket-chat-to-matrix.md

@@ -26,7 +26,7 @@ Rocket.Chat’s implementation follows the “[How do you make an existing chat
 
 You can see a quick preview of a Rocket.Chat user chatting away with an Element user on matrix.org via Matrix here:
 
-<video style="width: 100%" src="/blog/img/164530391-e8b17ecd-a4d0-4ef8-a8b7-81230c1773d3.mp4" controls></video>
+{{figureVideo(vid="/blog/img/164530391-e8b17ecd-a4d0-4ef8-a8b7-81230c1773d3.mp4",caption="Rocket Chat user chatting with an Element user on matrix.org via Matrix")}}
 
 So, exciting times ahead - needless to say we’ll be doing everything we can to support Rocket.Chat and ensure their Matrix integration is a success.  And at this rate, they might be distinctly ahead of the curve if they start shipping Dendrite!  Meanwhile, we have to wonder who will be next? Nextcloud? Mattermost? Place your bets… ;)
 

content/blog/2022/06/2022-06-17-this-week-in-matrix-2022-06-17.md

@@ -78,7 +78,7 @@ Desktop client for Matrix using Qt and C++17.
 > That's it, I hope your eyes didn't glaze over with me babbling on about things. See you next time! :3
 > ![](/blog/img/eGhFKqsIshkzBIdbPPXetisW.png)
 
-<video style="max-width:900px" src="/blog/img/PfjbGGIojTBWFovFCVWZphxR.webm" controls />
+{{figureVideo(vid="/blog/img/PfjbGGIojTBWFovFCVWZphxR.webm",caption="Speedrun between nheko and element")}}
 
 ### Element Web/Desktop ([website](https://github.com/vector-im/element-web))
 

content/blog/2023/09/2023-09-29-twim.md

@@ -155,7 +155,7 @@ Secure and independent communication, connected via Matrix. Come talk with us in
 > Be sure that you trust everyone with access your bridge before deploying, until we have figured out how to make it safer.
 > 
 > We apologize for the subpar audio and glitches. We had limited time and equipment to record the demo and will try to do better next time
-> {{< video src="vrcDiEGzmollhUGuTEONHVCE.m4v" >}}
+> {{figureVideo(vid="/blog/img/vrcDiEGzmollhUGuTEONHVCE.m4v",caption="A pretty app lock screen")}}
 
 ## Dept of SDKs and Frameworks 🧰
 

content/blog/2023/10/2023-10-20-twim.md

@@ -132,7 +132,7 @@ A total rewrite of Element-iOS using the Matrix Rust SDK underneath and targetin
 >
 > ![An iOS dialog saying "Set up recovery" at the top, a description explaining the recovery key and a button to generate it. At the very bottom is a "Done" Button.](/blog/img/kxBZWSQHjOHIsFFJPFFzPhgy.png)
 >
-> <video controls width="250"><source src="/blog/img/AVgKmzJozBGdUgaaDJcOOORd.mp4" type="video/mp4" /></video>
+> {{figureVideo(vid="/blog/img/AVgKmzJozBGdUgaaDJcOOORd.mp4",caption="A pretty app lock screen")}}
 
 ### Element Web/Desktop ([website](https://github.com/vector-im/element-web))
 
@@ -219,7 +219,7 @@ Matrix compliance test suite
 
 [Kegan](https://matrix.to/#/@kegan:matrix.org) announces
 
-> *Complement is an end-to-end testing suite for matrix homeservers. It's used by Synapse, Dendrite and Conduit to test client/federation APIs.*
+> _Complement is an end-to-end testing suite for matrix homeservers. It's used by Synapse, Dendrite and Conduit to test client/federation APIs._
 >
 > Complement has had some much needed improvements to the API over the past week or two. A summary of the main changes:
 >

convert_videos.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+pushd static/blog/img
+
+rm -r av1
+rm -r hevc
+rm -r vp9
+mkdir av1
+mkdir hevc
+mkdir vp9
+
+for i in *.{mp4,m4v,webm,mov};
+  do
+  name=`echo "$i" | cut -d'.' -f1`
+  echo "Converting ${name}"
+  ffmpeg -i "$i" -map 0:v -c:v libvpx-vp9 -map "0:a?" -af aformat=channel_layouts="7.1|5.1|stereo" -c:a libopus -map "0:s?" -c:s copy -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "./vp9/${name}.webm"
+  ffmpeg -i "$i" -map 0:v -c:v libsvtav1 -g 240 -b:v 4M -svtav1-params pass=0:lookahead=42:scd=1:film-grain=0:lp=4 -preset 5 -map "0:a?" -af aformat=channel_layouts="7.1|5.1|stereo" -c:a libopus -map "0:s?" -c:s copy -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "./av1/${name}.webm"
+  ffmpeg -i "$i" -map_metadata -1 -c:a libopus -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" "./hevc/${name}.mp4"
+done
+
+popd

templates/shortcodes/figureVideo.html

@@ -1,7 +1,13 @@
+{%- set av1_filename = vid | regex_replace(pattern=`\..+`, rep=`.webm`) | replace(from='/blog/img/', to='/blog/img/av1/') -%}
+{%- set vp9_filename = vid | regex_replace(pattern=`\..+`, rep=`.webm`) | replace(from='/blog/img/', to='/blog/img/vp9/') -%}
+{%- set hevc_filename = vid | regex_replace(pattern=`\..+`, rep=`.mp4`) | replace(from='/blog/img/', to='/blog/img/hevc/') -%}
 <figure>
     <video controls preload="auto">
+        <source src="{{ av1_filename }}" type="video/webm">
+        <source src="{{ vp9_filename }}" type="video/webm">
+        <source src="{{ hevc_filename }}" type="video/mp4">
         <source src="{{ vid }}" type="video/mp4">
         Your browser does not support the video tag.
     </video>
     <figcaption>{{ caption | markdown | safe }}</figcaption>
-</figure>
+</figure>