xrdwb17xu: Hide native video controls until play and move the author aside while a slide video plays

src/components/MobileFeed.tsx

@@ -54,7 +54,7 @@ function SlideMedia({ media, author }: { media: CardMedia; author: string }) {
     return (
       <div className="slide-media slide-video" ref={box}>
         <div className="slide-art">
-          <VideoPlayer mp4Url={media.mp4Url} hlsUrl={media.hlsUrl} poster={media.src} label={`Video from ${author}`} />
+          <VideoPlayer mp4Url={media.mp4Url} hlsUrl={media.hlsUrl} poster={media.src} label={`Video from ${author}`} controls={started} />
         </div>
         {started ? null : (
           <>
@@ -85,9 +85,19 @@ function SlideMedia({ media, author }: { media: CardMedia; author: string }) {
 function PostSlide({ post, index, current, p }: { post: CardPost; index: number; current: boolean; p: FeedViewProps }) {
   const media = post.media.find((m) => m.kind === "video" || m.src) ?? null;
   const own = canDelete(post, p.feedUserId) && !!p.onDelete;
-  const cls = `slide ${media ? "slide-on-media" : "slide-on-text"}${current ? " is-cur" : ""}`;
+  // While a video plays, the author and text step aside so the native controls stay clear.
+  const [playing, setPlaying] = useState(false);
+  const cls = `slide ${media ? "slide-on-media" : "slide-on-text"}${current ? " is-cur" : ""}${playing ? " slide-playing" : ""}`;
   return (
-    <section className={cls} data-index={index} data-testid="feed-slide" aria-label={`Post by ${post.authorName}`}>
+    <section
+      className={cls}
+      data-index={index}
+      data-testid="feed-slide"
+      aria-label={`Post by ${post.authorName}`}
+      onPlayCapture={() => setPlaying(true)}
+      onPauseCapture={() => setPlaying(false)}
+      onEndedCapture={() => setPlaying(false)}
+    >
       {media ? (
         <>
           <SlideMedia media={media} author={post.authorName} />