Feed clips with a mouse: a big play/pause in the middle on hover that plays or pauses in place, a click on a playing clip pauses it (a paused one still opens the pager), and a tall clip is held to three quarters of a computer screen with its box narrowed to the clip's shapeHEADmaster

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01QjVvE4YAcK3AGwV7kZXeN4

37 files changed, 154 insertions, 25 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index c82bd0e..74b7d4a 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -7949,7 +7949,7 @@ export function messagesFeature(ctx) {
   // known, never taller than the screen; only a clip taller than that sits
   // in a black frame, rather than in a strip at the left.
   const videoBoxStyle = (d) => d && d.width && d.height
-    ? `width:100%;aspect-ratio:${d.width}/${d.height};max-height:100vh;object-fit:contain`
+    ? `width:100%;aspect-ratio:${d.width}/${d.height};max-height:var(--vid-cap);object-fit:contain`
     : 'width:100%;aspect-ratio:16/9;object-fit:contain';
   // Over a clip that waits for a tap: what it costs, and the tap that plays
   // it (with sound — the reader asked for this one). The box is left alone
@@ -8095,10 +8095,19 @@ export function messagesFeature(ctx) {
     });
   }
   // A tap on the picture itself (not the player's own play button or its
-  // control bar): inline, it goes full screen — the corner button is a
+  // control bar): inline, a mouse click pauses a playing clip; a paused one
+  // (or any touch) goes full screen — the corner button is a
   // reach on a phone. Full screen, it pauses a playing clip, and a tap on a
   // paused one comes back out. The player's controls are inside the video
   // element, so where they sit is judged from the tap's position.
+  // The big play/pause over a feed clip is for a mouse: <html> carries
+  // .has-mouse while the last pointer was one (a touch laptop switches with
+  // the hand), and CSS shows the button on :hover (a repaint can't drop it).
+  if (typeof document !== 'undefined') {
+    const mouseIs = (on) => document.documentElement.classList.toggle('has-mouse', on);
+    document.addEventListener('pointermove', (e) => { if (e.pointerType === 'mouse') mouseIs(true); }, { passive: true });
+    document.addEventListener('pointerdown', (e) => { if (e.pointerType !== 'mouse') mouseIs(false); }, { passive: true });
+  }
   const fsElement = () => (typeof document !== 'undefined' && (document.fullscreenElement || document.webkitFullscreenElement)) || null;
   let videoTapAt = 0; // a touch's tap on a clip, taken at pointerup: the click after it lands on whatever opened
   function videoTap(e, url) {
@@ -8120,6 +8129,18 @@ export function messagesFeature(ctx) {
       else (document.exitFullscreen || document.webkitExitFullscreen || (() => {})).call(document)?.catch?.(() => {});
       return true;
     }
+    // a mouse click on a playing clip just pauses it (Adam: "clicking on a
+    // video that's playing should pause the video, not full screen it"); it
+    // keeps its controls and the middle button resumes it, and a click on it
+    // paused opens the pager. A touch has no middle button: its tap still opens.
+    if (!v.paused && e.pointerType === 'mouse') {
+      v.pause();
+      wokeClips.add(url);
+      const box = v.closest('.note-video-box');
+      if (box) { box.classList.remove('idle'); box._skipMorph = true; }
+      v.controls = true;
+      return true;
+    }
     if (openClip(v, url)) return true;
     // a clip still idle (autoplaying, no controls) becomes the reader's
     wokeClips.add(url);
@@ -8187,8 +8208,33 @@ export function messagesFeature(ctx) {
       if (videoTap(e, url)) el._tapAt = videoTapAt = Date.now();
     });
     v.muted = !loud; // the property, not just the attribute: a script-made element autoplays only muted
-    const box = h('div', { class: 'note-video-box' + (idle ? ' idle' : '') }, v);
+    // a tall clip is held to the cap's height and the box narrows to its
+    // shape, instead of a full-width box of black bars (Adam, on a 1920 screen)
+    const boxCap = (w, ht) => w && ht ? `max-width:calc(var(--vid-cap) * ${w} / ${ht})` : undefined;
+    const known = feedMedia(url);
+    const box = h('div', { class: 'note-video-box' + (idle ? ' idle' : ''), style: boxCap(known && known.width, known && known.height) }, v);
+    v.addEventListener('loadedmetadata', () => { if (v.videoWidth && v.videoHeight) box.style.maxWidth = `calc(var(--vid-cap) * ${v.videoWidth} / ${v.videoHeight})`; });
     if (loud) box._skipMorph = true;
+    // With a mouse: a big play/pause button in the middle while the pointer is
+    // over the clip. It plays or pauses in place, never full screen (a click
+    // elsewhere on a paused clip opens the pager). Touch keeps its taps.
+    const pp = h('button', { class: 'vid-pp', type: 'button', 'aria-label': t('videoPlay'), onClick: (e) => {
+      e.stopPropagation(); e.preventDefault();
+      const player = e.currentTarget.closest('.note-video-box')?.querySelector('video');
+      if (!player) return;
+      if (player.paused) { tappedClips.add(url); player.play().catch(() => {}); } else player.pause();
+    } }, h('span', { class: 'vid-pp-i', 'aria-hidden': 'true' }));
+    const ppState = () => {
+      const live = v.closest('.note-video-box');
+      const b = live && live.querySelector('.vid-pp');
+      if (!b) return;
+      b.classList.toggle('playing', !v.paused);
+      b.setAttribute('aria-label', t(v.paused ? 'videoPlay' : 'videoPause'));
+    };
+    v.addEventListener('play', ppState);
+    v.addEventListener('pause', ppState);
+    box.append(pp);
+
     // remembered by clip, so a repaint draws the box as it now stands
     const wake = () => {
       wokeClips.add(url);
diff --git a/src/i18n.js b/src/i18n.js
index 4514175..1e71e95 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -282,6 +282,8 @@ const STR = {
     clipsAll: 'All shapes',
     clipsToggleTitle: 'Which clips to show: the ones that fit the screen, or all',
     videoTapToPlay: "Tap to play",
+    videoPlay: "Play",
+    videoPause: "Pause",
     pagerFetchingVideo: "Fetching the next video…",
     pagerFetchingPictures: "Fetching more pictures…",
     pagerCaughtUp: "That’s everything for now",
diff --git a/src/locales/ar.json b/src/locales/ar.json
index f112568..28af336 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "لا صور في هذه الخلاصة بعد.",
   "mediaNoVideos": "لا فيديوهات عمودية في هذه الخلاصة بعد.",
   "videoTapToPlay": "انقر للتشغيل",
+  "videoPlay": "تشغيل",
+  "videoPause": "إيقاف مؤقت",
   "videoLargeTitle": "الفيديوهات",
   "videoLargeToggle": "تشغيل الفيديوهات الكبيرة تلقائيًا",
   "videoLargeHelp": "الفيديوهات التي تزيد على {mb} ميغابايت أو تتجاوز 1080p تنتظر نقرة، حتى لا تستهلك الخلاصة بياناتك. الحد أقل على الاتصال البطيء أو عند توفير البيانات.",
diff --git a/src/locales/bn.json b/src/locales/bn.json
index 85ce58a..d3d6253 100644
--- a/src/locales/bn.json
+++ b/src/locales/bn.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "এই ফিডে এখনও কোনো ছবি নেই।",
   "mediaNoVideos": "এই ফিডে এখনও কোনো খাড়া ভিডিও নেই।",
   "videoTapToPlay": "চালাতে ট্যাপ করুন",
+  "videoPlay": "চালান",
+  "videoPause": "বিরতি",
   "videoLargeTitle": "ভিডিও",
   "videoLargeToggle": "বড় ভিডিও নিজে থেকে চালান",
   "videoLargeHelp": "{mb} MB-এর বেশি বা 1080p-এর ওপরের ভিডিও ট্যাপের অপেক্ষায় থাকে, যাতে ফিড আপনার ডেটা না খায়। ধীর বা ডেটা-সেভার সংযোগে সীমা কম।",
diff --git a/src/locales/de.json b/src/locales/de.json
index 0210332..c5a981f 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Noch keine Bilder in diesem Feed.",
   "mediaNoVideos": "Noch keine Hochkant-Videos in diesem Feed.",
   "videoTapToPlay": "Zum Abspielen tippen",
+  "videoPlay": "Abspielen",
+  "videoPause": "Pause",
   "videoLargeTitle": "Videos",
   "videoLargeToggle": "Große Videos automatisch abspielen",
   "videoLargeHelp": "Videos über {mb} MB oder über 1080p warten auf einen Tipp, damit der Feed nicht dein Datenvolumen frisst. Bei langsamer Verbindung oder Datensparmodus ist die Grenze niedriger.",
diff --git a/src/locales/es.json b/src/locales/es.json
index 9637b0a..781a2e8 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Aún no hay imágenes en este feed.",
   "mediaNoVideos": "Aún no hay vídeos verticales en este feed.",
   "videoTapToPlay": "Toca para reproducir",
+  "videoPlay": "Reproducir",
+  "videoPause": "Pausa",
   "videoLargeTitle": "Vídeos",
   "videoLargeToggle": "Reproducir vídeos grandes automáticamente",
   "videoLargeHelp": "Los vídeos de más de {mb} MB o por encima de 1080p esperan a que los toques, para que el feed no se coma tus datos. El límite es menor con una conexión lenta o en ahorro de datos.",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 280be04..da332ae 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Pas encore d’images dans ce fil.",
   "mediaNoVideos": "Pas encore de vidéos verticales dans ce fil.",
   "videoTapToPlay": "Touchez pour lire",
+  "videoPlay": "Lire",
+  "videoPause": "Pause",
   "videoLargeTitle": "Vidéos",
   "videoLargeToggle": "Lire automatiquement les grosses vidéos",
   "videoLargeHelp": "Les vidéos de plus de {mb} Mo ou au-delà de 1080p attendent un toucher, pour que le fil ne dévore pas vos données. La limite est plus basse sur une connexion lente ou en économie de données.",
diff --git a/src/locales/hi.json b/src/locales/hi.json
index 8057344..2b0f5a6 100644
--- a/src/locales/hi.json
+++ b/src/locales/hi.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "इस फ़ीड में अभी कोई तस्वीर नहीं।",
   "mediaNoVideos": "इस फ़ीड में अभी कोई वर्टिकल वीडियो नहीं।",
   "videoTapToPlay": "चलाने के लिए टैप करें",
+  "videoPlay": "चलाएँ",
+  "videoPause": "रोकें",
   "videoLargeTitle": "वीडियो",
   "videoLargeToggle": "बड़े वीडियो अपने आप चलाएँ",
   "videoLargeHelp": "{mb} MB से बड़े या 1080p से ऊपर के वीडियो टैप का इंतज़ार करते हैं, ताकि फ़ीड आपका डेटा न खाए। धीमे या डेटा-सेवर कनेक्शन पर सीमा कम होती है।",
diff --git a/src/locales/id.json b/src/locales/id.json
index 6773d96..6a6f24a 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "Belum ada gambar di feed ini.",
   "mediaNoVideos": "Belum ada video vertikal di feed ini.",
   "videoTapToPlay": "Ketuk untuk memutar",
+  "videoPlay": "Putar",
+  "videoPause": "Jeda",
   "videoLargeTitle": "Video",
   "videoLargeToggle": "Putar otomatis video besar",
   "videoLargeHelp": "Video di atas {mb} MB atau lebih dari 1080p menunggu ketukan, agar feed tidak menghabiskan kuota. Batasnya lebih rendah di koneksi lambat atau mode hemat data.",
diff --git a/src/locales/it.json b/src/locales/it.json
index 7ac8b00..196b4c8 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -222,6 +222,8 @@
  "playVideo": "Riproduci",
  "videoUnmute": "Attiva audio",
  "videoTapToPlay": "Tocca per riprodurre",
+ "videoPlay": "Riproduci",
+ "videoPause": "Pausa",
  "videoNoPicture": "Questo browser non riesce a mostrare l'immagine di questo video",
  "videoOpenFile": "Apri il file",
  "videoLargeTitle": "Video",
diff --git a/src/locales/ja.json b/src/locales/ja.json
index b8968cc..c37ebf3 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "このフィードにはまだ画像がありません。",
   "mediaNoVideos": "このフィードにはまだ縦型動画がありません。",
   "videoTapToPlay": "タップして再生",
+  "videoPlay": "再生",
+  "videoPause": "一時停止",
   "videoLargeTitle": "動画",
   "videoLargeToggle": "大きな動画を自動再生",
   "videoLargeHelp": "{mb} MBを超える動画や1080pを超える動画は、データを使いすぎないようタップするまで再生しません。低速回線やデータセーバー時は上限が下がります。",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index e4bf342..58da658 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -909,6 +909,8 @@
   "mediaNoImages": "이 피드에는 아직 이미지가 없습니다.",
   "mediaNoVideos": "이 피드에는 아직 세로 동영상이 없습니다.",
   "videoTapToPlay": "탭하여 재생",
+  "videoPlay": "재생",
+  "videoPause": "일시정지",
   "videoLargeTitle": "동영상",
   "videoLargeToggle": "큰 동영상 자동 재생",
   "videoLargeHelp": "{mb}MB를 넘거나 1080p보다 높은 동영상은 데이터를 아끼기 위해 탭할 때까지 기다립니다. 느린 연결이나 데이터 절약 모드에서는 한도가 더 낮습니다.",
diff --git a/src/locales/mr.json b/src/locales/mr.json
index 17ee1d5..5936679 100644
--- a/src/locales/mr.json
+++ b/src/locales/mr.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "या फीडमध्ये अजून चित्रे नाहीत.",
   "mediaNoVideos": "या फीडमध्ये अजून उभे व्हिडिओ नाहीत.",
   "videoTapToPlay": "चालवण्यासाठी टॅप करा",
+  "videoPlay": "चालवा",
+  "videoPause": "थांबवा",
   "videoLargeTitle": "व्हिडिओ",
   "videoLargeToggle": "मोठे व्हिडिओ आपोआप चालवा",
   "videoLargeHelp": "{mb} MB पेक्षा मोठे किंवा 1080p पेक्षा वरचे व्हिडिओ तुमचा डेटा वाचवण्यासाठी टॅपची वाट पाहतात. धीम्या किंवा डेटा-सेव्हर कनेक्शनवर मर्यादा कमी असते.",
diff --git a/src/locales/pt.json b/src/locales/pt.json
index 11ff22c..b206ee0 100644
--- a/src/locales/pt.json
+++ b/src/locales/pt.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "Ainda não há imagens neste feed.",
   "mediaNoVideos": "Ainda não há vídeos verticais neste feed.",
   "videoTapToPlay": "Toque para reproduzir",
+  "videoPlay": "Reproduzir",
+  "videoPause": "Pausar",
   "videoLargeTitle": "Vídeos",
   "videoLargeToggle": "Reproduzir vídeos grandes automaticamente",
   "videoLargeHelp": "Vídeos acima de {mb} MB ou de 1080p esperam um toque, para o feed não consumir seus dados. O limite é menor em conexões lentas ou com economia de dados.",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 0f2936d..910e781 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "В этой ленте пока нет фото.",
   "mediaNoVideos": "В этой ленте пока нет вертикальных видео.",
   "videoTapToPlay": "Нажмите, чтобы воспроизвести",
+  "videoPlay": "Воспроизвести",
+  "videoPause": "Пауза",
   "videoLargeTitle": "Видео",
   "videoLargeToggle": "Автовоспроизведение больших видео",
   "videoLargeHelp": "Видео больше {mb} МБ или выше 1080p ждут нажатия, чтобы лента не съедала трафик. На медленном соединении или в режиме экономии лимит ниже.",
diff --git a/src/locales/sw.json b/src/locales/sw.json
index b130faf..5fcc4f0 100644
--- a/src/locales/sw.json
+++ b/src/locales/sw.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "Bado hakuna picha kwenye mlisho huu.",
   "mediaNoVideos": "Bado hakuna video wima kwenye mlisho huu.",
   "videoTapToPlay": "Gusa ili kucheza",
+  "videoPlay": "Cheza",
+  "videoPause": "Sitisha",
   "videoLargeTitle": "Video",
   "videoLargeToggle": "Cheza video kubwa zenyewe",
   "videoLargeHelp": "Video zaidi ya MB {mb} au juu ya 1080p husubiri uguse, ili mlisho usimalize data yako. Kikomo ni cha chini kwenye muunganisho wa polepole au wa kuokoa data.",
diff --git a/src/locales/ta.json b/src/locales/ta.json
index da4e5b0..e866428 100644
--- a/src/locales/ta.json
+++ b/src/locales/ta.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "இந்த ஊட்டத்தில் இன்னும் படங்கள் இல்லை.",
   "mediaNoVideos": "இந்த ஊட்டத்தில் இன்னும் செங்குத்து வீடியோக்கள் இல்லை.",
   "videoTapToPlay": "இயக்கத் தட்டவும்",
+  "videoPlay": "இயக்கு",
+  "videoPause": "இடைநிறுத்து",
   "videoLargeTitle": "வீடியோக்கள்",
   "videoLargeToggle": "பெரிய வீடியோக்களைத் தானாக இயக்கு",
   "videoLargeHelp": "{mb} MB-க்கு மேல் அல்லது 1080p-க்கு மேலான வீடியோக்கள் உங்கள் டேட்டாவைச் சேமிக்க, தட்டும் வரை காத்திருக்கும். மெதுவான அல்லது டேட்டா சேமிப்பு இணைப்பில் வரம்பு குறைவு.",
diff --git a/src/locales/te.json b/src/locales/te.json
index 7e60eaf..40ba4ad 100644
--- a/src/locales/te.json
+++ b/src/locales/te.json
@@ -245,6 +245,8 @@
   "mediaNoImages": "ఈ ఫీడ్‌లో ఇంకా చిత్రాలు లేవు.",
   "mediaNoVideos": "ఈ ఫీడ్‌లో ఇంకా నిలువు వీడియోలు లేవు.",
   "videoTapToPlay": "ప్లే చేయడానికి నొక్కండి",
+  "videoPlay": "ప్లే",
+  "videoPause": "పాజ్",
   "videoLargeTitle": "వీడియోలు",
   "videoLargeToggle": "పెద్ద వీడియోలను ఆటో‌ప్లే చేయి",
   "videoLargeHelp": "{mb} MB కంటే పెద్దవి లేదా 1080p పైబడిన వీడియోలు మీ డేటా ఆదా కోసం నొక్కే వరకు ఆగుతాయి. నెమ్మదైన లేదా డేటా సేవర్ కనెక్షన్‌లో పరిమితి తక్కువ.",
diff --git a/src/locales/tr.json b/src/locales/tr.json
index 1e60eeb..31734b9 100644
--- a/src/locales/tr.json
+++ b/src/locales/tr.json
@@ -909,6 +909,8 @@
   "mediaNoImages": "Bu akışta henüz görsel yok.",
   "mediaNoVideos": "Bu akışta henüz dikey video yok.",
   "videoTapToPlay": "Oynatmak için dokun",
+  "videoPlay": "Oynat",
+  "videoPause": "Duraklat",
   "videoLargeTitle": "Videolar",
   "videoLargeToggle": "Büyük videoları otomatik oynat",
   "videoLargeHelp": "{mb} MB’den büyük veya 1080p’nin üzerindeki videolar, akış verini tüketmesin diye dokunmanı bekler. Yavaş ya da veri tasarruflu bağlantıda sınır daha düşüktür.",
diff --git a/src/locales/ur.json b/src/locales/ur.json
index 6efb6ec..0fb30a2 100644
--- a/src/locales/ur.json
+++ b/src/locales/ur.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "اس فیڈ میں ابھی کوئی تصویر نہیں۔",
   "mediaNoVideos": "اس فیڈ میں ابھی کوئی عمودی ویڈیو نہیں۔",
   "videoTapToPlay": "چلانے کے لیے ٹیپ کریں",
+  "videoPlay": "چلائیں",
+  "videoPause": "روکیں",
   "videoLargeTitle": "ویڈیوز",
   "videoLargeToggle": "بڑی ویڈیوز خود چلائیں",
   "videoLargeHelp": "{mb} MB سے بڑی یا 1080p سے اوپر کی ویڈیوز ٹیپ کا انتظار کرتی ہیں، تاکہ فیڈ آپ کا ڈیٹا نہ کھائے۔ سست یا ڈیٹا بچت والے کنکشن پر حد کم ہوتی ہے۔",
diff --git a/src/locales/vi.json b/src/locales/vi.json
index 415f4e7..92e3362 100644
--- a/src/locales/vi.json
+++ b/src/locales/vi.json
@@ -247,6 +247,8 @@
   "mediaNoImages": "Bảng tin này chưa có ảnh.",
   "mediaNoVideos": "Bảng tin này chưa có video dọc.",
   "videoTapToPlay": "Chạm để phát",
+  "videoPlay": "Phát",
+  "videoPause": "Tạm dừng",
   "videoLargeTitle": "Video",
   "videoLargeToggle": "Tự động phát video lớn",
   "videoLargeHelp": "Video trên {mb} MB hoặc cao hơn 1080p sẽ chờ bạn chạm, để bảng tin không ngốn dữ liệu. Giới hạn thấp hơn khi kết nối chậm hoặc tiết kiệm dữ liệu.",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index 6b3cc49..502e12a 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -910,6 +910,8 @@
   "mediaNoImages": "此动态中还没有图片。",
   "mediaNoVideos": "此动态中还没有竖屏视频。",
   "videoTapToPlay": "点按播放",
+  "videoPlay": "播放",
+  "videoPause": "暂停",
   "videoLargeTitle": "视频",
   "videoLargeToggle": "自动播放大视频",
   "videoLargeHelp": "超过 {mb} MB 或高于 1080p 的视频会等你点按再播放，以免动态耗尽流量。在慢速或省流量连接下，上限更低。",
diff --git a/src/style.css b/src/style.css
index 384b6d6..a895054 100644
--- a/src/style.css
+++ b/src/style.css
@@ -847,11 +847,26 @@ html.no-scroll { overflow: hidden; scrollbar-gutter: auto; }
 }
 .lightbox-x:hover { background: rgba(255, 255, 255, .24); }
 @keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
-.note-video { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
+.note-video { display: block; width: 100%; height: auto; max-height: var(--vid-cap); object-fit: contain; border-radius: 10px; margin-top: 6px; background: #000; }
 /* a video plays by itself, muted, while it is on screen; the corner button
    turns the sound on (see autoplay in messages.js) */
 .note-video-box { position: relative; display: block; max-width: 100%; margin-top: 6px; }
 .note-video-box .note-video { margin-top: 0; }
+/* the height a feed clip may take: the whole screen on a phone, three
+   quarters of it on a computer (a portrait clip on a 1920 screen ran off it) */
+:root { --vid-cap: 100vh; }
+@media (min-width: 900px) { :root { --vid-cap: 75vh; } }
+/* with a mouse: the big play/pause in the middle, while the pointer is over the clip */
+.vid-pp {
+  position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0;
+  border: 0; border-radius: 50%; background: rgba(18, 18, 18, .6); color: #fff; cursor: pointer;
+  display: none; align-items: center; justify-content: center;
+}
+.vid-pp:hover { background: rgba(18, 18, 18, .85); }
+.vid-pp-i { width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; }
+.vid-pp.playing .vid-pp-i { width: 20px; height: 24px; margin: 0; border-width: 0 7px; border-color: #fff; }
+.has-mouse .note-video-box:hover .vid-pp, .vid-pp:focus-visible { display: flex; }
+.note-video-box:has(.vid-heavy) .vid-pp { display: none; }
 .vid-sound {
   position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: 4px 10px; border: 0;
   border-radius: 999px; background: rgba(18, 18, 18, .7); color: #fff; font-size: 13px; line-height: 1.3;
diff --git a/tools/feed-video-pager-test.js b/tools/feed-video-pager-test.js
index cccde41..61119a0 100644
--- a/tools/feed-video-pager-test.js
+++ b/tools/feed-video-pager-test.js
@@ -67,6 +67,8 @@ const openClip = async (word) => {
   await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); }, word);
   await sleep(400);
   const at = await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; }, word);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
   await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000);
 };
diff --git a/tools/fullscreen-notice-test.js b/tools/fullscreen-notice-test.js
index cf15f8c..d3b2785 100644
--- a/tools/fullscreen-notice-test.js
+++ b/tools/fullscreen-notice-test.js
@@ -68,6 +68,8 @@ async function run(lockOk) {
     await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); }, word);
     await sleep(400);
     const at = await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; }, word);
+    // a mouse click on a playing clip pauses it; a paused one opens
+    await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
     await page.mouse.click(at.x, at.y);
     await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000);
   };
diff --git a/tools/pager-caption-test.js b/tools/pager-caption-test.js
index 5952d81..50ffe4f 100644
--- a/tools/pager-caption-test.js
+++ b/tools/pager-caption-test.js
@@ -55,6 +55,8 @@ const openClip = async (word) => {
   await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); }, word);
   await sleep(400);
   const at = await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; }, word);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
   const opened = await waitFor(() => !!document.querySelector('.media-pager.videos .mp-slide'), null, 4000);
   // the caption and the counts show on a tap on the clip (details), as a reader sees them
@@ -72,6 +74,8 @@ const clickIn = async (sel, where) => {
     // the caption's first word sits at its left edge; a link in the middle
     return where === 'start' ? { x: r.left + 12, y: r.top + 9 } : { x: r.left + r.width / 2, y: r.top + r.height / 2 };
   }, ['(' + CAP + ')', sel, where]);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
 };
 const toFeed = async () => { await page.evaluate(() => document.querySelector('.app-nav-button[aria-label="Feed"]').click()); await waitFor(() => !!document.querySelector('.notes-feed video.note-video'), null, 8000); };
diff --git a/tools/pager-close-test.js b/tools/pager-close-test.js
index 73aa15b..a7c6c12 100644
--- a/tools/pager-close-test.js
+++ b/tools/pager-close-test.js
@@ -84,6 +84,8 @@ const st = () => page.evaluate(() => ({ pager: !!document.querySelector('.media-
 const openFirst = async () => {
   const r = await page.evaluate(() => { const row = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('clip zero')); row.querySelector('video.note-video').scrollIntoView({ block: 'center' }); const b = row.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; });
   await sleep(400);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [r.x, r.y]);
   await page.mouse.click(r.x, r.y);
   return waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000);
 };
diff --git a/tools/pager-eager-test.js b/tools/pager-eager-test.js
index 3b5c5c3..3d980fb 100644
--- a/tools/pager-eager-test.js
+++ b/tools/pager-eager-test.js
@@ -117,6 +117,8 @@ async function run(saveData, slow = false) {
     await waitFor(() => { const v = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('clip c0 here')).querySelector('video.note-video'); return v && !v.paused && v.currentTime > 0; }, null, 10000);
     const r = await feedRow('clip c0 here');
     log = log.filter((e) => e.clip === 'c0');
+    // a mouse click on a playing clip pauses it; a paused one opens
+    await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [r.x, r.y]);
     await page.mouse.click(r.x, r.y);
     check('the pager opens', await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000));
     await sleep(slow ? 8000 : 3000);
diff --git a/tools/pager-first-frame-test.js b/tools/pager-first-frame-test.js
index 6507607..0d477b7 100644
--- a/tools/pager-first-frame-test.js
+++ b/tools/pager-first-frame-test.js
@@ -99,6 +99,8 @@ try {
   await page.evaluate(() => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('a wide one')); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); });
   await sleep(600);
   const at = await page.evaluate(() => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('a wide one')); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; });
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
   check('the pager opens', await waitFor(() => !!document.querySelector('.media-pager.videos .mp-slide'), null, 4000));
   check('the clip on screen plays', await waitFor(() => [...document.querySelectorAll('.mp-slide.mp-cur video.mp-media')].some((v) => !v.paused), null, 8000));
diff --git a/tools/pager-no-poster-test.js b/tools/pager-no-poster-test.js
index 0930834..332eb53 100644
--- a/tools/pager-no-poster-test.js
+++ b/tools/pager-no-poster-test.js
@@ -64,6 +64,8 @@ const openClip = async (word) => {
   await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); }, word);
   await sleep(400);
   const at = await page.evaluate((w) => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes(w)); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; }, word);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
   await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000);
 };
diff --git a/tools/pager-prime-test.js b/tools/pager-prime-test.js
index 7263ee1..4989790 100644
--- a/tools/pager-prime-test.js
+++ b/tools/pager-prime-test.js
@@ -114,6 +114,8 @@ async function run() {
     await page.waitForSelector('.notes-feed video.note-video', { timeout: 20000 });
     const r = await page.evaluate(() => { const row = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('clip c0 here')); row.querySelector('.note-video-box').scrollIntoView({ block: 'center' }); const v = row.querySelector('video.note-video').getBoundingClientRect(); return { x: v.x + v.width * 0.2, y: v.y + v.height * 0.3 }; });
     await sleep(800);
+    // a mouse click on a playing clip pauses it; a paused one opens
+    await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [r.x, r.y]);
     await page.mouse.click(r.x, r.y);
     check('the pager opens', await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000));
     check('the next clip\'s warm player has played a moment, unheard, and waits paused a frame or two in', await waitFor(() => { const s = [...document.querySelectorAll('.mp-slide')].find((x) => x.getAttribute('data-k').endsWith('/c1.webm')); const v = s && s.querySelector('video.mp-media'); return v && v.paused && v.currentTime >= 0.03 && v.currentTime < 0.6; }, null, 10000), JSON.stringify(await vid('c1')));
diff --git a/tools/pager-rotate-test.js b/tools/pager-rotate-test.js
index 9912b7a..9dcc7e3 100644
--- a/tools/pager-rotate-test.js
+++ b/tools/pager-rotate-test.js
@@ -91,6 +91,8 @@ async function run(unmuteFirst) {
       await sleep(800);
     }
     const at = await rowOf(); await sleep(300);
+    // a mouse click on a playing clip pauses it; a paused one opens
+    await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
     await page.mouse.click(at.x, at.y);
     check('the pager opens', await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000));
     await waitFor(() => { const v = document.querySelector('.media-pager video[src]'); return v && !v.paused && v.currentTime > 1.5; }, null, 8000);
diff --git a/tools/pager-seek-hide-test.js b/tools/pager-seek-hide-test.js
index f25ff49..50863ba 100644
--- a/tools/pager-seek-hide-test.js
+++ b/tools/pager-seek-hide-test.js
@@ -88,6 +88,8 @@ try {
   await page.evaluate(() => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('a wide one')); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); });
   await sleep(400);
   const at = await page.evaluate(() => { const r = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('a wide one')); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; });
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
   check('the pager opens', await waitFor(() => !!document.querySelector('.media-pager.videos .mp-slide'), null, 4000));
 
diff --git a/tools/pager-tail-test.js b/tools/pager-tail-test.js
index b294b8f..9d537e1 100644
--- a/tools/pager-tail-test.js
+++ b/tools/pager-tail-test.js
@@ -103,6 +103,8 @@ try {
 
   const r = await page.evaluate(() => { const row = [...document.querySelectorAll('.notes-feed [data-key]')].find((n) => n.textContent.includes('clip zero')); row.querySelector('video.note-video').scrollIntoView({ block: 'center' }); const b = row.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; });
   await sleep(400);
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [r.x, r.y]);
   await page.mouse.click(r.x, r.y);
   check('the pager opens on the first clip', await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000) && await resting('c0'), await at());
   check('a loading screen waits at the end, after the clips', (await tail())?.last, JSON.stringify(await tail()));
diff --git a/tools/quoted-clip-fullscreen-test.js b/tools/quoted-clip-fullscreen-test.js
index bd8dd45..41984a2 100644
--- a/tools/quoted-clip-fullscreen-test.js
+++ b/tools/quoted-clip-fullscreen-test.js
@@ -70,6 +70,8 @@ try {
 
   console.log('\n[a tap on the picture]');
   const box = await (await page.$(SEL)).boundingBox();
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [box.x + box.width / 2, box.y + box.height * 0.25]);
   await page.mouse.click(box.x + box.width / 2, box.y + box.height * 0.25); // above the middle: not the play button
   check('the clip goes full screen', await waitFor(() => document.fullscreenElement && document.fullscreenElement.matches('video'), 4000), JSON.stringify(await state()));
   await sleep(600);
diff --git a/tools/video-events-test.js b/tools/video-events-test.js
index bef0956..c024949 100644
--- a/tools/video-events-test.js
+++ b/tools/video-events-test.js
@@ -128,6 +128,8 @@ try {
   await page.evaluate(() => { const r = [...document.querySelectorAll('.notes-feed > [data-key]')].find((n) => n.textContent.includes('A normal clip')); r.querySelector('video.note-video').scrollIntoView({ block: 'center' }); });
   await sleep(500);
   const at = await page.evaluate(() => { const r = [...document.querySelectorAll('.notes-feed > [data-key]')].find((n) => n.textContent.includes('A normal clip')); const b = r.querySelector('video.note-video').getBoundingClientRect(); return { x: b.x + b.width * 0.2, y: b.y + b.height * 0.3 }; });
+  // a mouse click on a playing clip pauses it; a paused one opens
+  await page.evaluate(([x, y]) => { const v = document.elementFromPoint(x, y); if (v && v.tagName === 'VIDEO') v.pause(); }, [at.x, at.y]);
   await page.mouse.click(at.x, at.y);
   check('a tap opens the pager', await waitFor(() => !!document.querySelector('.media-pager.videos'), null, 4000));
   const slides = await page.evaluate(() => [...document.querySelectorAll('.mp-slide')].map((s) => s.getAttribute('data-k').split('|')[1].replace(location.origin, '')));
diff --git a/tools/video-tap-test.js b/tools/video-tap-test.js
index f82238b..50e5a69 100644
--- a/tools/video-tap-test.js
+++ b/tools/video-tap-test.js
@@ -1,8 +1,7 @@
-// Tapping a video: in the feed it opens the media pager (feed-video-pager-
-// test.js has the rest). In a thread, anywhere on the picture (not the
-// player's own play button or control bar) goes full screen — the corner
-// button is a reach on a phone. Full screen, a tap pauses a playing clip; a
-// tap on a paused one comes back out. Taps on the controls stay the player's.
+// Tapping a video: inline, a playing clip pauses. A paused one, in the feed,
+// and in a thread opens the media pager (feed-video-pager-test.js has the
+// rest). With a mouse the middle of the clip is a big play/pause button that
+// never goes full screen.
 // Run: bun tools/video-tap-test.js
 import puppeteer from './puppeteer.js';
 import { cacheKeyFor } from '../src/wallet.js';
@@ -69,8 +68,18 @@ try {
   for (let i = 0; i < 40 && (await st()).paused; i++) await sleep(250);
   check('the clip autoplays in the feed', !(await st()).paused);
 
+  // the hover button: pauses and plays in place
+  const pp = async () => { const b = await page.evaluate(() => { const r = document.querySelector('.notes-feed .note-video-box').getBoundingClientRect(); return { x: r.x + r.width / 2, y: r.y + r.height / 2 }; }); await page.mouse.move(b.x - 40, b.y); await page.mouse.move(b.x, b.y, { steps: 3 }); await sleep(250); if (!(await page.evaluate(() => getComputedStyle(document.querySelector('.notes-feed .vid-pp')).display === 'flex'))) check('a mouse over the clip brings up the middle button', false); await page.mouse.click(b.x, b.y); await sleep(700); };
+  check('no middle button until a mouse comes over the clip', await page.evaluate(() => getComputedStyle(document.querySelector('.notes-feed .vid-pp')).display === 'none'));
+  await pp();
+  check('the middle button pauses the clip in place', await page.evaluate(() => document.querySelector('video.note-video').paused && !document.querySelector('.media-pager') && !document.fullscreenElement));
+  check('...and shows play while paused', await page.evaluate(() => !document.querySelector('.vid-pp').classList.contains('playing')));
+  await pp();
+  check('the middle button plays it again, still inline', await page.evaluate(() => !document.querySelector('video.note-video').paused && !document.querySelector('.media-pager') && !document.fullscreenElement));
   await tap(0.2, 0.3);
-  check('in the feed, a tap opens the media pager', await page.evaluate(() => !!document.querySelector('.media-pager.videos')));
+  check('in the feed, a tap on a playing clip pauses it, no pager', await page.evaluate(() => document.querySelector('video.note-video').paused && !document.querySelector('.media-pager')));
+  await tap(0.2, 0.3);
+  check('a tap on the paused clip opens the media pager', await page.evaluate(() => !!document.querySelector('.media-pager.videos')));
   await page.keyboard.press('Escape'); await sleep(700);
   check('...which Escape closes', await page.evaluate(() => !document.querySelector('.media-pager') && !document.fullscreenElement));
   // the thread: the post's words open it
@@ -87,22 +96,11 @@ try {
   for (let i = 0; i < 40 && (await st()).paused; i++) await sleep(250);
   await tap(0.2, 0.3);
   let s = await st();
-  check('in a thread, a tap on the picture goes full screen', s.fs, JSON.stringify(s));
-  check('...and not the pager', await page.evaluate(() => !document.querySelector('.media-pager')));
-  await tap(0.25, 0.3);
-  s = await st();
-  check('full screen, a tap pauses the playing clip', s.fs && s.paused, JSON.stringify(s));
-  await tap(0.5, 0.5);
-  s = await st();
-  check('a tap on the paused clip\'s play button is left to the player', s.fs, JSON.stringify(s));
-  await page.evaluate(() => document.querySelector('.thread-card video.note-video').pause()); await sleep(300);
+  check('in a thread, a tap on the playing clip pauses it in place', !s.fs && s.paused, JSON.stringify(s));
   await tap(0.2, 0.3);
-  s = await st();
-  check('a tap elsewhere on the paused clip comes out of full screen', !s.fs, JSON.stringify(s));
-  await tap(0.3, 0.97);
-  s = await st();
-  check('a tap on the control bar stays the player\'s', !s.fs, JSON.stringify(s));
+  check('a tap on the paused clip opens the media pager there too', await page.evaluate(() => !!document.querySelector('.media-pager.videos')));
+  await page.keyboard.press('Escape'); await sleep(700);
   check('no page errors', errs.length === 0, errs.slice(0, 2).join(' | '));
 } finally { await browser.close(); server.stop(true); }
-console.log(ok ? '\n✅ video taps: full screen, pause, back out' : '\n❌ failed');
+console.log(ok ? '\n✅ video taps: pause in place, pager when paused, middle button' : '\n❌ failed');
 process.exit(ok ? 0 : 1);