Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions .github/workflows/check-mov-files.yml
Original file line number Diff line number Diff line change
@@ -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 -fflags +genpts -i \"\$f\" -vf fps=60 -c:v libx264 -pix_fmt yuv420p -movflags +faststart \"\${f%.*}.mp4\""
echo "done"
echo "' sh {} +"
exit 1
fi
echo "No .mov files found ✅"
2 changes: 1 addition & 1 deletion docs/blog/2024-05-13-release-1-12/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/blog/2025-12-01-release-1-20/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions docs/blog/2026-03-16-release-1-21/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
/>

Expand Down Expand Up @@ -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 }}
/>

Expand Down
8 changes: 4 additions & 4 deletions docs/docs/api/components/keyboard-chat-scroll-view.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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" }}
/>

Expand Down Expand Up @@ -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" }}
/>

Expand All @@ -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" }}
/>

Expand All @@ -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" }}
/>

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/api/hooks/input/use-focused-input-handler.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
2 changes: 1 addition & 1 deletion docs/docs/guides/building-chat-app.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
/>

Expand Down
Binary file removed docs/static/video/kav-choppy.mov
Binary file not shown.
Binary file added docs/static/video/kav-choppy.mp4
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file removed docs/static/video/selection-demo.mov
Binary file not shown.
Binary file added docs/static/video/selection-demo.mp4
Binary file not shown.
Binary file removed docs/static/video/validation-with-scroll.mov
Binary file not shown.
Binary file added docs/static/video/validation-with-scroll.mp4
Binary file not shown.
Binary file removed docs/static/video/validation-without-scroll.mov
Binary file not shown.
Binary file added docs/static/video/validation-without-scroll.mp4
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Loading