docs: prefer .mp4 file over .mov

Author: kirillzyusko

.github/workflows/check-mov-files.yml

@@ -0,0 +1,34 @@
+name: 🎬 Check .mov files
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check-mov:
+    runs-on: ubuntu-latest
+    name: 🔍 check .mov files
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Check for .mov files
+        run: |
+          MOV_FILES=$(find . -type f -iname "*.mov")
+          if [ -n "$MOV_FILES" ]; then
+            echo "::error::Found .mov files that should be converted to .mp4 (Google Chrome does not support .mov codec):"
+            echo "$MOV_FILES"
+            echo ""
+            echo "Please convert them using:"
+            echo ""
+            echo "find . -type f -iname \"*.mov\" -exec sh -c '"
+            echo "for f do"
+            echo "  ffmpeg -i \"\$f\" -c:v libx264 -pix_fmt yuv420p -movflags +faststart \"\${f%.*}.mp4\""
+            echo "done"
+            echo "' sh {} +"
+            exit 1
+          fi
+          echo "No .mov files found ✅"

docs/blog/2024-05-13-release-1-12/index.mdx

@@ -29,7 +29,7 @@ These details allow you to draw elements behind the cursor, making interaction w
 
 import Video from "@site/src/components/Video";
 
-<Video src="/video/selection-demo.mov" width={65} />
+<Video src="/video/selection-demo.mp4" width={65} />
 <br />
 
 Later on I'm planning to extend `KeyboardAwareScrollView` to react on selection tracking, so if your selection is overlapped with keyboard then `KeyboardAwareScrollView` will automatically scroll and avoid an overlap.

docs/blog/2025-12-01-release-1-20/index.mdx

@@ -79,8 +79,8 @@ import ComparisonTable from "@site/src/components/ComparisonTable";
 import Video from "@site/src/components/Video";
 
 <ComparisonTable
-  left={<Video src="/video/validation-without-scroll.mov" width={65} />}
-  right={<Video src="/video/validation-with-scroll.mov" width={65} />}
+  left={<Video src="/video/validation-without-scroll.mp4" width={65} />}
+  right={<Video src="/video/validation-with-scroll.mp4" width={65} />}
   leftText={<i>Focused input gets hidden after validation</i>}
   rightText={
     <i>Focused input remains visible after validation and gets auto-scrolled</i>

docs/blog/2026-03-16-release-1-21/index.mdx

@@ -39,7 +39,7 @@ React Native's layout engine has to re-measure and re-position the entire view t
 - **Performance**: the layout engine is not free, and running it at 60 (or 120) FPS per frame adds up.
 
 <Video
-  src="/video/kav-choppy.mov"
+  src="/video/kav-choppy.mp4"
   style={{ height: "40vh", marginBottom: 20 }}
 />
 
@@ -119,7 +119,7 @@ With this cross-platform `contentInset` primitive in place, we can now build scr
 ## `KeyboardChatScrollView`
 
 <Video
-  src="/video/keyboard-chat-scroll-view/always.mov"
+  src="/video/keyboard-chat-scroll-view/always.mp4"
   style={{ height: "40vh", marginBottom: 20 }}
 />
 

docs/docs/api/components/keyboard-chat-scroll-view.mdx

@@ -5,7 +5,7 @@
 import Video from "@site/src/components/Video";
 
 <Video
-  src="/video/keyboard-chat-scroll-view/always.mov"
+  src="/video/keyboard-chat-scroll-view/always.mp4"
   style={{ height: "40vh" }}
 />
 
@@ -47,7 +47,7 @@ Controls how the chat content responds when the keyboard appears. Defaults to `"
 Content always lifts with the keyboard, keeping the bottom messages visible **regardless** of the current scroll position. This is the most common chat app behavior, used by **Telegram**, **WhatsApp**, and others.
 
 <Video
-  src="/video/keyboard-chat-scroll-view/always.mov"
+  src="/video/keyboard-chat-scroll-view/always.mp4"
   style={{ height: "40vh" }}
 />
 
@@ -56,7 +56,7 @@ Content always lifts with the keyboard, keeping the bottom messages visible **re
 Content lifts only when the scroll view is **at the end** (i.e., the last message is visible or near the bottom). If the user has scrolled up to read older messages, the keyboard won't push the content around. This matches the **ChatGPT** mobile app behavior.
 
 <Video
-  src="/video/keyboard-chat-scroll-view/when-at-end.mov"
+  src="/video/keyboard-chat-scroll-view/when-at-end.mp4"
   style={{ height: "40vh" }}
 />
 
@@ -74,7 +74,7 @@ Content lifts when the keyboard appears, but **does not drop back** when the key
 Content never moves in response to the keyboard. The keyboard simply overlaps the chat. This matches the **Perplexity** app behavior.
 
 <Video
-  src="/video/keyboard-chat-scroll-view/never.mov"
+  src="/video/keyboard-chat-scroll-view/never.mp4"
   style={{ height: "40vh" }}
 />
 

docs/docs/api/hooks/input/use-focused-input-handler.mdx

@@ -83,4 +83,4 @@ This handler can be handy when you need to have an access to input on a global l
 
 import Video from "@site/src/components/Video";
 
-<Video src="/video/selection-demo.mov" width={60} />
+<Video src="/video/selection-demo.mp4" width={60} />

docs/docs/guides/building-chat-app.mdx

@@ -18,7 +18,7 @@ Keyboard handling in chat applications has always been one of the trickiest prob
 import Video from "@site/src/components/Video";
 
 <Video
-  src="/video/keyboard-chat-scroll-view/always.mov"
+  src="/video/keyboard-chat-scroll-view/always.mp4"
   style={{ height: "40vh", marginBottom: 20 }}
 />