From 274c97acbe7470cfa8a83622e9b061d4e33aa9b4 Mon Sep 17 00:00:00 2001
From: Matt LaPaglia <mlapaglia@gmail.com>
Date: Sat, 31 Oct 2026 10:55:07 -0400
Subject: [PATCH 1/5] feat(lightbox): play live photos from a dock button in v7
 and v8

Hide the LivePhotosKit LIVE badge in the main lightbox and add a play/stop toggle to the dock. While on, a muted looping video of the clip plays over the still until the button is turned off. Viewers without edit rights get a dock with only this button. Flow and Moderation keep the native controls.

Spec impact: FR-100-06, S-100-25, S-100-26, UI-100-04 added to feature 100
---
 .../features/100-google-motion-photos/plan.md |   7 ++
 .../features/100-google-motion-photos/spec.md |  24 +++-
 .../100-google-motion-photos/tasks.md         |  17 ++-
 docs/specs/4-architecture/knowledge-map.md    |   1 +
 .../photo/useLivePhotoToggle.test.ts          |  97 ++++++++++++++++
 .../composables/photo/useLivePhotoToggle.ts   |  59 ++++++++++
 resources/js/stores/PhotoState.ts             |  13 +++
 .../components/gallery/photoModule/Dock.vue   | 107 ++++++++++--------
 .../gallery/photoModule/PhotoBox.vue          |  37 +++++-
 .../gallery/photoModule/PhotoPanel.vue        |   7 +-
 .../components/gallery/photoModule/Dock.vue   |  64 +++++++----
 .../gallery/photoModule/PhotoBox.vue          |  30 ++++-
 .../gallery/photoModule/PhotoPanel.vue        |  14 ++-
 13 files changed, 391 insertions(+), 86 deletions(-)
 create mode 100644 resources/js/composables/photo/useLivePhotoToggle.test.ts
 create mode 100644 resources/js/composables/photo/useLivePhotoToggle.ts

diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/plan.md b/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
index 2632f23374c..e0d35764de5 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
@@ -75,6 +75,9 @@ After T-100-15, during T-100-16, compare every FR/NFR/S-ID against the tests nam
    - _Commands:_ `php artisan test --filter=PhotosAddHandlerImagickTest`.
 10. **I10 – Docs + drift gate**
     - _Steps:_ knowledge map, `1-concepts/photos.md`, `request-lifecycle-photo-upload.md`, roadmap; drift gate report.
+11. **I14 – Lightbox live button in the dock, v8 then v7** (FR-100-06, S-100-25, S-100-26, UI-100-04)
+    - _Steps:_ failing Vitest `useLivePhotoToggle.test.ts` (play, stop, restart on `ended` while playing, no restart after stop, detach resets) → composable; `PhotoBox` augments with `showsNativeControls: false` in the main lightbox and registers `LivePhotoControls` in `PhotoState`; `Dock` live button; `PhotoPanel` shows the dock to non-editors when controls are registered.
+    - _Commands:_ `npx vp test useLivePhotoToggle`, `npx vp check` (no `--fix`), `npx vp run typecheck`; manual check in the lightbox on an Apple and a Google live photo.
 
 ## Scenario Tracking
 
@@ -93,6 +96,7 @@ After T-100-15, during T-100-16, compare every FR/NFR/S-ID against the tests nam
 | S-100-11 … 14 | I6 / T-100-10 | `ExtractMotionPhotosTest` |
 | S-100-15 … 18 | I8 / T-100-13, T-100-14 | `useMotionHover.test.ts` + manual |
 | S-100-19, 20 | I8 / T-100-13, T-100-17 | `useMotionHover.test.ts` + manual per view |
+| S-100-25, 26 | I14 / T-100-23 … T-100-26 | `useLivePhotoToggle.test.ts` + manual |
 
 ## Analysis Gate
 
@@ -120,6 +124,9 @@ Run 2026-10-17 by the agent (owner review pending).
 - v7 grid playback, if requested.
 
 ## Intent Log
+- 2026-10-31: owner reported the motion did not loop until the button was turned off, and that Firefox highlighted the button without playing. Agent probed LivePhotosKit in Chromium with Playwright (Firefox would not start in the sandbox; running it outside was declined), found the gap-after-`ended` and the stall on non-Apple clips, and switched the dock path to a looping `<video>` overlay, the technique the grid hover already uses in Firefox (FR-100-06, T-100-26).
+- 2026-10-31: owner asked for the same change in v7. Agent mirrored it in the v7 `PhotoBox`/`Dock`/`PhotoPanel` (new `is-live-dock-enabled` prop, as v7 `PhotoBox` has no zoom prop; PrimeIcons `pi-bullseye`, the closest glyph to the Live Photo rings) and moved `useLivePhotoToggle` to `resources/js/composables/photo/`, as v7 never imports from `@/v8`.
+- 2026-10-31: owner asked to move the lightbox "LIVE" button into the dock next to highlight/move/delete, styled like the other dock buttons, click to play and click again to stop and show the still. Agent read `PhotoBox`, `Dock`, `DockButton`, `PhotoPanel`, the LivePhotosKit typings (`showsNativeControls`, `play`/`stop`, `ended` event); chose to keep playing (restart on `ended`) until the second click so the button state always matches what is shown, to show the dock to viewers without edit rights for live photos, and to keep the native controls in Flow/Moderation where there is no dock (FR-100-06).
 - 2026-10-17: owner asked for a plan for Google motion photos (#753, #1283) with grid hover or play button. Agent surveyed the live photo pipeline (Explore agent + direct reads of `GoogleMotionPictureHandler`, `ExtractGoogleMotionPictures`, `Extractor`, php-exif 1.4.0 mapper via `gh api`), parsed the existing sample's XMP with a Python one-off (legacy format confirmed), drafted spec + Q-100-01 … 06. Owner chose Option A for all six. While planning FR-100-03 the agent found v3 tiles lack `live_photo_url` until tier-3 details load → Q-100-07; owner chose Option A (details on hover) → FR-100-05, T-100-17. Owner supplied a Pixel 11 Pro motion photo; agent stripped GPS, C2PA and the HDR+ maker note with exiftool (owner asked for GPS removal so they cannot be identified; C2PA/maker note removed as device fingerprints), verified trailer bytes identical and inspected the still and video frames for identifying content (none), placed it as FX-100-03 at full resolution; findings (Primary item without `Item:Length`, HEVC video) folded into the spec Appendix. Grep of v8 thumbnail hosts: `PhotoThumbPanel`, `PhotoThumbPanelVirtual`, `TimelineDatesV3`, `ResultPanel`, views `Timeline`, `Search`, `Flow`; Ken Burns hover is CSS-only, no conflict.
 
 ## Review Follow-up (PR #4900, 2026-10-18)
diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
index ab102affd68..c703142113a 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
@@ -3,7 +3,7 @@
 | Field | Value |
 |-------|-------|
 | Status | Implemented |
-| Last updated | 2026-10-17 |
+| Last updated | 2026-10-31 |
 | Owners | mlapaglia |
 | Linked plan | [plan.md](plan.md) |
 | Linked tasks | [tasks.md](tasks.md) |
@@ -27,7 +27,7 @@ Affected layers: metadata extraction (`app/Metadata`), one artisan command, v8 g
 - HEIC/AVIF motion photos (primary image other than JPEG).
 - Honouring `MotionPhotoPresentationTimestampUs`.
 - Transcoding Apple Live Photo videos (separate `.mov` partners); only clips embedded in Google Motion Photos are transcoded (Q-100-09).
-- Changing the lightbox player (LivePhotosKit stays).
+- Replacing LivePhotosKit in the lightbox: it still renders the still and keeps playing in Flow/Moderation; only the main lightbox's play control moves to the dock and plays a plain `<video>` (FR-100-06).
 - v7 grid playback (Q-100-05).
 - Inline playback on touch devices (Q-100-01).
 
@@ -40,6 +40,7 @@ Affected layers: metadata extraction (`app/Metadata`), one artisan command, v8 g
 | FR-100-03 | Grid motion playback (v8, every live photo). | `PhotoThumb.vue` and `PhotoThumbVirtual.vue`: a motion badge (`ThumbBadge` with `lucide:smartphone` on `bg-purple-700`, the icon and colour of the list-view "Live" label, FR-014-06; its new `label` prop sets `title` and `aria-label` to `gallery.motion_photo`) in the badge row whenever `precomputed.is_livephoto`. On devices matching `(hover: hover) and (pointer: fine)`, after 250 ms of continuous hover a muted, looping, `playsinline` `<video>` fades in over the thumbnail (`object-cover`, same box) and plays `live_photo_url`; on `mouseleave` it pauses, its `src` is removed and the still shows again. When `live_photo_url` is still `null` at `mouseenter`, the URL is fetched per FR-100-05; playback starts once both the 250 ms have passed and the URL is set, and never if the pointer left first. The overlay covers the still, so the Ken Burns hover zoom (when enabled) keeps running unseen underneath. | Only tiles with `is_livephoto === true`; nothing when `prefers-reduced-motion: reduce` (badge only); nothing on touch-only devices (badge only, tap opens the lightbox as today). | Video `error` event → overlay removed, still stays, no toast, no retry during that hover. | None (frontend only). | Owner request, Q-100-01, Q-100-03, Q-100-05 |
 | FR-100-04 | Backfill already-imported photos. | `php artisan lychee:extract_motion_photos {limit=100} {tm=600} {--after=} {--album=} {--dry-run} {--reencode}` walks photos with `type = 'image/jpeg'` and `live_photo_short_path IS NULL`, ordered by id with an `--after` cursor (as `lychee:detect_360`). For each it uses the original in place when hosted locally, or a downloaded temporary copy otherwise (as `SizeVariantDefaultFactory`), runs `PHPExif\MotionPhoto\MotionPhotoLocator::locate()` on its path, and when the length > 0 extracts via `GoogleMotionPictureHandler` and writes `GoogleMotionPictureHandler::videoPathNextTo(<original path>)` on the original's disk (the helper the upload pipe `PlaceGoogleMotionVideo` now shares), then sets `live_photo_short_path` and dispatches `PhotoSaved` for the extracted ids. Output: `Motion photo: <id> (<title>)` per hit, then `Checked N photos: X motion photos extracted, Y failed.` (`found (dry run)` with `--dry-run`), and `More photos may remain: continue with --after=<last id>` when `N = limit`; nothing to scan → `No photos require motion photo extraction.` | `--reencode` switches the candidates to Google motion photos that already have a video (`live_photo_short_path` set, `live_photo_content_id` null) and re-extracts each clip from the original into its current path, transcoding as in FR-100-02; the summary says `re-extracted`. Every clip the command writes is staged at `<target>.part` on the same disk and then moved over the target, so a failed write leaves an existing clip intact (PR #4900 review). `--dry-run` writes nothing and does not need FFmpeg. `--album` restricts to that album's direct photos; unknown id → `Album <id> not found.`, exit 1. FFmpeg disabled without `--dry-run` → `FFmpeg is required to extract motion photo videos (or use --dry-run).`, exit 1, before the scan. | Missing original or any per-photo error → `Log::warning` and `Failed: <id> (<title>): <reason>` on the console, counted as failed, loop continues; exit 1 when any failed. When the batch is full and some photos failed, the cursor line is followed by `N photos failed in this batch and would be skipped by that cursor: run it again with --after=<same value> (or without --after) to retry them first.` (PR #4900 review). Plain JPEGs stay candidates, so a re-run checks them again (no "checked" marker; the cursor bounds each run). | Command output only. | Q-100-04 |
 | FR-100-05 | Video URL for v3 grid tiles. | Each v8 view that renders photo thumbnails provides a `MotionUrlLoader` (`(photoIds: string[]) => Promise<void>`, Vue `provide`/`inject` key in `resources/js/v8/composables/photo/motionUrlLoader.ts`) wrapping its store's existing deduped details loader: `AlbumPanel.vue` → `AlbumState.loadPhotoDetails`, `Timeline.vue` → `TimelineState.loadPhotoDetailsV3`, `Search.vue` → `SearchState.loadPhotoDetailsV3`. `Flow.vue` renders its own cards, not these thumbnails, and the tag and favourites views use v2 `PhotoResource` payloads that already carry `live_photo_url`, so they provide none. The thumbnail calls it with its own id on `mouseenter` when `is_livephoto` and `live_photo_url === null`, on hover-capable devices only; the result lands in `live_photo_url` through `mergePhotoDetail()`. | No call when the URL is already set, the tile is not a live photo, or the device/motion gates of FR-100-03 fail. A view that provides no loader plays only tiles whose URL is already loaded. | Loader rejects or leaves the URL `null` → no playback for that hover, no toast; the next hover tries again (the store's dedupe makes a resolved id free). A request still in flight is reused when the pointer leaves and re-enters, because the stores mark an id resolved only once its response arrives (PR #4900 review). | None. | Q-100-07 |
+| FR-100-06 | Lightbox play/stop from the dock (v7 and v8). | In the main lightbox (v8: `PhotoPanel` → `PhotoBox` with `is-zoom-enabled`; v7: `PhotoPanel` → `PhotoBox` with `is-live-dock-enabled`) LivePhotosKit only shows the still: it is augmented with `showsNativeControls: false`, so its "LIVE" badge and hover playback are gone. `PhotoBox` registers `LivePhotoControls` (`{ toggle }`) in `PhotoState.live_photo_controls` and mirrors the playing state into `PhotoState.is_live_playing` through `resources/js/composables/photo/useLivePhotoToggle.ts`, with the same ownership rule as the zoom controls (Feature 078). `Dock.vue` shows a `DockButton` (v8 `lucide:circle-dot-dashed`, v7 PrimeIcons `pi-bullseye`; tooltip `gallery.motion_photo`) first in the button row while controls are registered: white with the primary hover colour when idle, primary colour while playing. First click shows a muted, `loop`, `autoplay`, `playsinline` `<video>` of `live_photo_url` over the still (same box and size classes as the still, `object-contain`, `pointer-events-none`; the LivePhotosKit divs carry `isolate` so its z-indexed render layers stay below the video), so the motion loops without a gap until the next click removes it and the still shows again. The dock is shown to every viewer of a live photo, not only to editors: viewers without edit rights see the live button alone. | Flow (`LigtBox.vue`), Moderation and NSFW findings (v8), Flow and Moderation (v7) mount `PhotoBox` without that prop and keep the native LivePhotosKit controls. No button for photos that are not live photos or have no `live_photo_url`. Moving to another photo or closing the lightbox drops the controls; the next live photo starts stopped. Hidden with the rest of the dock during the slideshow. | Video `error` (e.g. HEVC in Firefox) → overlay removed, button back to idle, still visible, no toast. | None (frontend only). | Owner request 2026-10-31; LivePhotosKit playback was dropped from the dock path because its "full" style always ends (a restart on `ended` leaves a ~350 ms gap on the still), it played nothing in Firefox, and in Chromium it stalled at frame 0 on a Google clip without Apple timing metadata |
 
 ## Non-Functional Requirements
 
@@ -68,6 +69,21 @@ Affected layers: metadata extraction (`app/Metadata`), one artisan command, v8 g
  Touch / reduced motion → badge only; tap opens the lightbox (LivePhotosKit plays it).
 ```
 
+Lightbox dock (FR-100-06):
+
+```
+ Live photo, stopped                               Live photo, playing (after a click on ◌)
+┌───────────────────────────────────────────┐      ┌───────────────────────────────────────────┐
+│        ◌  ⚑  🖼  ⟲  ⟳  📁  🗑              │      │        ◉  ⚑  🖼  ⟲  ⟳  📁  🗑              │
+│                                           │      │                                           │
+│              still photo                  │      │   <video loop> over the still, no gap     │
+│        (no LivePhotosKit "LIVE" badge)    │      │        click ◉ again → stops, still shown │
+└───────────────────────────────────────────┘      └───────────────────────────────────────────┘
+ ◌ = live button (v8 lucide:circle-dot-dashed, v7 pi-bullseye; white, primary on hover; tooltip "Motion photo")
+ ◉ = same button in the primary colour while playing
+ Viewer without edit rights: the dock holds only ◌.
+```
+
 ## Branch & Scenario Matrix
 
 | Scenario ID | Description / Expected outcome |
@@ -96,6 +112,8 @@ Affected layers: metadata extraction (`app/Metadata`), one artisan command, v8 g
 | S-100-18 | Grid: video fails to load (e.g. HEVC in Firefox) → still stays, no toast. |
 | S-100-19 | Grid on a v3 payload, URL not loaded: `mouseenter` triggers one details request for that id; playback starts after 250 ms or when the URL arrives, whichever is later; a second hover sends no request, including one that starts before the first request has answered. |
 | S-100-20 | Details request fails or the pointer leaves before the URL arrives → no playback, no toast, no stray `<video>`. |
+| S-100-25 | Lightbox, live photo: no native "LIVE" badge; the dock shows the live button; click → motion plays and keeps playing; click again → stops, still visible. |
+| S-100-26 | Lightbox, live photo, viewer without edit rights → dock with the live button only. Non-live photo → no live button. |
 
 ## Test Strategy
 - **Unit:** in php-exif since 1.5.0 (`tests/PHPExif/MotionPhoto/`: `JpegXmpReaderTest`, `MotionPhotoXmpTest`, `MotionPhotoLocatorTest`, `ReaderMotionPhotoTest`), over synthetic byte layouts and the v1/Ultra HDR samples (S-100-01, 03, 04, 05, 08, 09, 10; NFR-100-02). Lychee covers the integration through the upload and command tests below.
@@ -141,6 +159,7 @@ Provided by `lychee-org/php-exif` 1.5.0 (LycheeOrg/php-exif#83, ADR-100-01); Lyc
 | UI-100-01 | Motion badge | `precomputed.is_livephoto` → badge in the thumbnail badge row. |
 | UI-100-02 | Hover playback | FR-100-03 success path. |
 | UI-100-03 | Playback failed | Video error → back to UI-100-01. |
+| UI-100-04 | Lightbox live button | FR-100-06: idle (white) ↔ playing (primary colour). |
 
 ## Telemetry & Observability
 No new events. Extraction keeps the `photo.extract_google_motion_pictures` span. Locator failures log `Log::warning` with the file basename (no path); FFmpeg failures go through `Handler::reportSafely` as today.
@@ -172,6 +191,7 @@ ui_states:
   - { id: UI-100-01, description: Motion badge on live photo thumbnails }
   - { id: UI-100-02, description: Muted looping hover playback }
   - { id: UI-100-03, description: Playback failure falls back to the still }
+  - { id: UI-100-04, description: Lightbox dock live button toggles LivePhotosKit playback }
 ```
 
 ## Appendix – Motion Photo 1.0 layout
diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md b/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
index 7a7685cfc38..c91ddcf2433 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
@@ -1,7 +1,7 @@
 # Feature 100 Tasks – Google Motion Photos
 
 _Status: Complete_  
-_Last updated: 2026-10-17_
+_Last updated: 2026-10-31_
 
 > Keep this checklist aligned with the feature plan increments. Stage tests before implementation, record verification commands beside each task, and prefer bite-sized entries (≤90 minutes).
 > **Mark tasks `[x]` immediately** after each one passes verification—do not batch completions. Update the roadmap status when all tasks are done.
@@ -134,6 +134,21 @@ _Last updated: 2026-10-17_
 - [x] T-100-22 – Failing test `testReencodeKeepsTheStoredClipWhenTheWriteFails` (a directory blocks the staging path), then stage the clip at `<target>.part` and move it over the target in `ExtractMotionPhotos::extract()` (F-100-04, S-100-24).  
   _Verification commands:_ `php artisan test --filter=ExtractMotionPhotosTest` (red, then 13/13), `vendor/bin/php-cs-fixer fix`, `make phpstan`.  
 
+### I14 – Lightbox live button in the dock (FR-100-06)
+- [x] T-100-23 – Failing Vitest `useLivePhotoToggle.test.ts`, then `resources/js/composables/photo/useLivePhotoToggle.ts` (shared by v7 and v8) (F-100-06, S-100-25).  
+  _Verification commands:_ `npx vp test useLivePhotoToggle` (red, then green)  
+- [x] T-100-24 – `PhotoState.live_photo_controls` / `is_live_playing`, `PhotoBox` without native controls in the main lightbox, `Dock` live button, `PhotoPanel` dock gate for viewers (F-100-06, S-100-25, S-100-26, UI-100-04).  
+  _Verification commands:_ `npx vp check` (no `--fix`), `npx vp run typecheck`, manual lightbox check.  
+  _Notes:_ 2026-10-31: `npx vp test useLivePhotoToggle` 5/5, `npx vp check` on the six files clean, `npx vp run typecheck` green. Manual lightbox check (Apple + Google live photo, viewer without edit rights) still to be done by the owner.  
+- [x] T-100-25 – Same change in v7: `PhotoBox` `is-live-dock-enabled` prop, `Dock` live button (`pi-bullseye`) and `can-edit` gate, `PhotoPanel` dock gate for viewers; composable moved to `resources/js/composables/photo/` (F-100-06, S-100-25, S-100-26, UI-100-04).  
+  _Verification commands:_ `npx vp test useLivePhotoToggle`, `npx vp check` (no `--fix`), `npx vp run typecheck`, manual v7 lightbox check.  
+  _Notes:_ 2026-10-31: `npx vp test useLivePhotoToggle` 5/5, `npx vp check` on the seven touched files clean, `npx vp run typecheck` green. Manual v7 lightbox check still to be done by the owner.  
+- [x] T-100-26 – Owner feedback: the motion must loop until the button is turned off, and nothing played in Firefox. Rewrote `useLivePhotoToggle` (failing tests first: registration, toggle, `stop()`, release, slide-transition ownership) to own the store registration; both `PhotoBox` versions show a looping `<video>` over the still instead of driving LivePhotosKit (F-100-06, S-100-25, S-100-26).  
+  _Verification commands:_ `npx vp test useLivePhotoToggle` (4 red, then 5/5), `npx vp test` (108), `npx vp check` on the nine touched files, `npx vp run typecheck`.  
+  _Notes:_ Diagnosis with a scratch Playwright page over `train.jpg`/`train.mov` and a Google clip extracted from `google_motion_photo.jpg`: in Chromium LivePhotosKit `play()` returns `false` right after `ended` and only restarts on the next `canplay` (~350 ms on the still); on the Google clip it threw `Offset is outside the bounds of the DataView` and stayed at `currentTime` 0.004 while `isPlaying` was true. A plain looping `<video>` wrapped continuously on both clips. Firefox could not be launched in the agent sandbox; manual Firefox check by the owner pending.  
+- [x] T-100-27 – Owner feedback: the `<video>` was hidden under `.lpk-live-photo-renderer` (its layers carry z-index 1–4 and `#livephoto` formed no stacking context). Added `isolate` to the live photo divs in both `PhotoBox` versions (F-100-06, S-100-25).  
+  _Verification commands:_ scratch Playwright page in Chromium: `elementFromPoint` at the centre is `CANVAS.lpk-photo` without `isolate`, `VIDEO` with it; `npx vp check` on both `PhotoBox` files, `npx vp run typecheck`.  
+
 ## Notes / TODOs
 - 2026-10-17: local toolchain installed (PHP 8.4 + imagick, Composer, exiftool, FFmpeg, `vendor/`, `node_modules/`); `vp` is not global, run it as `npx vp …` (e.g. `npx vp check` (never `--fix`: it rewrites unrelated files), `npx vp run typecheck`, `npx vp test`).
 - Image-processing tests skip silently without exiftool/FFmpeg (`assertHasExifToolOrSkip`, `assertHasFFMpegOrSkip`): a "green" run without them proves nothing for T-100-08/09/11/15.
diff --git a/docs/specs/4-architecture/knowledge-map.md b/docs/specs/4-architecture/knowledge-map.md
index 254e86e358a..ad2cae648ed 100644
--- a/docs/specs/4-architecture/knowledge-map.md
+++ b/docs/specs/4-architecture/knowledge-map.md
@@ -440,6 +440,7 @@ Detection: `lychee-org/php-exif` 1.4.0 maps XMP-GPano into `Exif` getters (`getP
 ### Google Motion Photos (Feature 100)
 Detection: `lychee-org/php-exif` 1.5.0 reads the motion photo itself: `Reader::read()` calls `PHPExif\MotionPhoto\MotionPhotoLocator::locate()` whenever the adapter returned no `MicroVideoOffset` (so every reader, exiftool, Imagick or Native, reports legacy and Motion Photo 1.0 files the same way); the locator walks the JPEG header to the standard XMP, reads `GCamera:MotionPhoto`/`MicroVideoOffset` and the `Container:Item` with `Item:Semantic="MotionPhoto"`, checks a declared length against an MP4 `ftyp` box, and otherwise scans after the primary image's EOI. `Extractor::createFromFile()` just copies `getMicroVideoOffset()` into `Extractor::$micro_video_offset` (bytes from end of file), so the unchanged pipes `ExtractGoogleMotionPictures` → `GoogleMotionPictureHandler` (FFmpeg: H.264 copied into `.mov` with `MOVFormat`, any other codec such as Pixel HEVC transcoded with `H264MOVFormat`, Q-100-09) → `PlaceGoogleMotionVideo` store it in `photos.live_photo_short_path`; `GoogleMotionPictureHandler::videoPathNextTo()` is shared with `lychee:extract_motion_photos` (backfill of JPEGs without a video, `--after`/`--album`/`--dry-run`, `--reencode` to redo stored Google clips, calls the php-exif locator directly). ADR-100-01.
 Grid: v8 `PhotoThumb.vue`/`PhotoThumbVirtual.vue` show a `ThumbBadge` (`lucide:smartphone`, `label` → `title`/`aria-label`) for `precomputed.is_livephoto` and play the clip on hover via `v8/composables/photo/useMotionHover.ts` (250 ms intent, `(hover: hover) and (pointer: fine)` and no reduced motion, `<video>` only after intent, fade-in on `playing`, removed on `error`). v3 tiles get `live_photo_url` on hover through `MOTION_URL_LOADER` (`v8/composables/photo/motionUrlLoader.ts`), provided by `AlbumPanel` (`AlbumState.loadPhotoDetails`), `Timeline.vue` and `Search.vue` (`loadPhotoDetailsV3`); tag and favourites views use v2 payloads that already carry the URL. Lightbox playback is the existing LivePhotosKit path.
+Lightbox: in the main lightbox (v7 and v8) `PhotoBox.vue` keeps LivePhotosKit for the still only (`showsNativeControls: false`) and, while playing, lays a muted looping `<video>` of `live_photo_url` over it. The shared `composables/photo/useLivePhotoToggle.ts` registers `LivePhotoControls` (`PhotoState.live_photo_controls`, playing state mirrored in `is_live_playing`, ownership-checked like `zoom_controls`); `Dock.vue` shows the play/stop button (v8 `lucide:circle-dot-dashed`, v7 `pi-bullseye`), also to viewers without edit rights (`PhotoPanel.vue` passes `can-edit`) (FR-100-06). Flow and Moderation keep the native LivePhotosKit controls.
 
 ### Library Insights (Feature 085, v8 only)
 `GET /api/v3/Insights` (`InsightsController`, `support:se`) backs the v8 Insights page, which replaces the v8 Statistics page; v7 keeps its Statistics page and `Statistics::getCountsOverTime`, and the unused `Statistics::userSpace` is removed; `Statistics::sizeVariantSpace`, `::albumSpace` (rows now carry the album `id`) and `::totalAlbumSpace` stay for the Insights Storage section, the space diagram, the album selector and the album statistics drawer. `GetInsightsRequest` builds an `InsightsScope` (one owner, every owner for administrators, or one album tree for its owner or an administrator, ADR-085-02) and an `InsightsPeriod` (library, year, inclusive local-date range). `InsightsScopeQuery` applies the scope (owner filter, or `EXISTS` over `photo_album` + `albums._lft` range). `CachedInsights` keys the Laravel cache on scope, period and `InsightsRevision` (count and latest `updated_at` of the scope's photos and albums, one-hour TTL); `ComputeInsights` streams a narrow `photos` projection once (`lazyById`, `EXISTS` album flag, ORIGINAL size variant `filesize`/`width`/`height` via left join), converts capture times with `Helpers\LocalCaptureTime`, narrows Year/Range periods to a UTC window widened by 14 hours, and feeds six accumulators (`Accumulators\Overview`, `Time`, `Device`, `Exposure`, `Format`, `Timeline`) built on pure helpers (`StreakCalculator`, `Distribution`, `ExposureParser`, `DeviceNormaliser`, `AspectRatioClassifier`, `MilestoneFinder`). Albums and people for a period come from keyset/`lazyById` side streams filtered the same way (ADR-085-03). Thumbnail URLs of the time-span photos are resolved per request by `ResolveInsightsThumbs`, outside the cache. Frontend: `resources/js/v8/views/Insights.vue` (scope and album selectors, period toggle, `LycheeLoadingIcon` while loading) with section components in `resources/js/v8/components/insights/` (calendar squares, timeline, focal cones and dimension frames as SVG, sunburst/treemap space diagram), ECharts option builders in `resources/js/v8/utils/insights/options/`, colours from Nuxt UI tokens via `useInsightsTheme`, SE preview data from `usePreviewData().getInsightsData()`.
diff --git a/resources/js/composables/photo/useLivePhotoToggle.test.ts b/resources/js/composables/photo/useLivePhotoToggle.test.ts
new file mode 100644
index 00000000000..4eb5c527217
--- /dev/null
+++ b/resources/js/composables/photo/useLivePhotoToggle.test.ts
@@ -0,0 +1,97 @@
+/**
+ * SPDX-License-Identifier: MIT
+ * Copyright (c) 2017-2018 Tobias Reich
+ * Copyright (c) 2018-2026 LycheeOrg.
+ */
+
+import { beforeEach, describe, expect, it } from "vite-plus/test";
+import { createPinia, setActivePinia } from "pinia";
+import { effectScope, nextTick, ref } from "vue";
+import { usePhotoStore } from "@/stores/PhotoState";
+import { useLivePhotoToggle } from "@/composables/photo/useLivePhotoToggle";
+
+/** One `PhotoBox`: its own scope (disposed on unmount) and its "is a dock-controlled live photo" flag. */
+function mountBox(isActive = true) {
+	const active = ref(isActive);
+	const scope = effectScope();
+	const live = scope.run(() => useLivePhotoToggle(() => active.value))!;
+	return { live, active, unmount: () => scope.stop() };
+}
+
+beforeEach(() => {
+	setActivePinia(createPinia());
+});
+
+describe("useLivePhotoToggle (FR-100-06)", () => {
+	it("registers dock controls for a live photo and toggles play/stop (S-100-25)", async () => {
+		const store = usePhotoStore();
+		const { live } = mountBox();
+
+		expect(store.live_photo_controls).toBeDefined();
+		expect(live.isPlaying.value).toBe(false);
+
+		store.live_photo_controls!.toggle();
+		await nextTick();
+		expect(live.isPlaying.value).toBe(true);
+		expect(store.is_live_playing).toBe(true);
+
+		store.live_photo_controls!.toggle();
+		await nextTick();
+		expect(live.isPlaying.value).toBe(false);
+		expect(store.is_live_playing).toBe(false);
+	});
+
+	it("registers nothing when the box is not a dock-controlled live photo (S-100-26)", () => {
+		const store = usePhotoStore();
+		mountBox(false);
+
+		expect(store.live_photo_controls).toBeUndefined();
+	});
+
+	it("stop() shows the still again, e.g. when the clip fails to load", async () => {
+		const store = usePhotoStore();
+		const { live } = mountBox();
+		store.live_photo_controls!.toggle();
+
+		live.stop();
+		await nextTick();
+
+		expect(live.isPlaying.value).toBe(false);
+		expect(store.is_live_playing).toBe(false);
+	});
+
+	it("releases its controls when it stops being a live photo", async () => {
+		const store = usePhotoStore();
+		const { active } = mountBox();
+		store.live_photo_controls!.toggle();
+
+		active.value = false;
+		await nextTick();
+
+		expect(store.live_photo_controls).toBeUndefined();
+		expect(store.is_live_playing).toBe(false);
+	});
+
+	it("the next photo starts stopped, and the leaving box does not clear its registration", async () => {
+		const store = usePhotoStore();
+		const leaving = mountBox();
+		store.live_photo_controls!.toggle();
+		await nextTick();
+
+		// Slide transition: the next box mounts before the previous one unmounts.
+		const next = mountBox();
+		await nextTick();
+		expect(store.is_live_playing).toBe(false);
+
+		leaving.unmount();
+		expect(store.live_photo_controls).toBeDefined();
+
+		store.live_photo_controls!.toggle();
+		await nextTick();
+		expect(next.live.isPlaying.value).toBe(true);
+		expect(leaving.live.isPlaying.value).toBe(false);
+
+		next.unmount();
+		expect(store.live_photo_controls).toBeUndefined();
+	});
+});
diff --git a/resources/js/composables/photo/useLivePhotoToggle.ts b/resources/js/composables/photo/useLivePhotoToggle.ts
new file mode 100644
index 00000000000..8c12bb4800c
--- /dev/null
+++ b/resources/js/composables/photo/useLivePhotoToggle.ts
@@ -0,0 +1,59 @@
+/**
+ * SPDX-License-Identifier: MIT
+ * Copyright (c) 2017-2018 Tobias Reich
+ * Copyright (c) 2018-2026 LycheeOrg.
+ */
+
+import { markRaw, onScopeDispose, ref, watch } from "vue";
+import { usePhotoStore, type LivePhotoControls } from "@/stores/PhotoState";
+
+/**
+ * Play/stop of the lightbox Live Photo from the dock (FR-100-06), for one `PhotoBox`.
+ *
+ * While `isActive()` (main lightbox, live photo with a video URL) the box registers its
+ * controls in the photo store, as it does for the zoom controls, and mirrors `isPlaying`
+ * into `is_live_playing`. The box shows a looping `<video>` over the still while
+ * `isPlaying` is true. The next photo's box mounts before this one leaves (slide
+ * transition), so only our own registration is ever cleared.
+ */
+export function useLivePhotoToggle(isActive: () => boolean) {
+	const photoStore = usePhotoStore();
+	const isPlaying = ref(false);
+	const controls: LivePhotoControls = markRaw({ toggle: () => (isPlaying.value = !isPlaying.value) });
+
+	function stop() {
+		isPlaying.value = false;
+	}
+
+	function release() {
+		stop();
+		if (photoStore.live_photo_controls === controls) {
+			photoStore.live_photo_controls = undefined;
+			photoStore.is_live_playing = false;
+		}
+	}
+
+	watch(
+		isActive,
+		(active) => {
+			if (!active) {
+				release();
+				return;
+			}
+			stop();
+			photoStore.live_photo_controls = controls;
+			photoStore.is_live_playing = false;
+		},
+		{ immediate: true },
+	);
+
+	watch(isPlaying, (playing) => {
+		if (photoStore.live_photo_controls === controls) {
+			photoStore.is_live_playing = playing;
+		}
+	});
+
+	onScopeDispose(release);
+
+	return { isPlaying, stop };
+}
diff --git a/resources/js/stores/PhotoState.ts b/resources/js/stores/PhotoState.ts
index 5b62fda7c3e..870d520d067 100644
--- a/resources/js/stores/PhotoState.ts
+++ b/resources/js/stores/PhotoState.ts
@@ -22,6 +22,14 @@ export type ZoomControls = {
 	reset: () => void;
 };
 
+/**
+ * Play/stop of the Live Photo shown by the main lightbox `PhotoBox`, v7 and v8 (Feature 100,
+ * FR-100-06), used by the dock. The playing state stays in `PhotoBox`.
+ */
+export type LivePhotoControls = {
+	toggle: () => void;
+};
+
 /**
  * Darkened thumb background for the previous/next buttons. A neighbour synthesised from a
  * Struct-of-Arrays listing has no size variants until its details are merged: no background
@@ -75,6 +83,9 @@ export const usePhotoStore = defineStore("photo-store", {
 		// Feature 078: written by the v8 `PhotoBox` only (mounted, zoomable photo).
 		is_zoomed: false,
 		zoom_controls: undefined as ZoomControls | undefined,
+		// Feature 100 (FR-100-06): written by the main lightbox `PhotoBox` (v7 or v8) only (mounted live photo).
+		is_live_playing: false,
+		live_photo_controls: undefined as LivePhotoControls | undefined,
 		// Feature 082: photo switched to its flat view (FR-082-09), photo whose sphere failed (FR-082-15).
 		sphere_flat_photo_id: undefined as string | undefined,
 		sphere_failed_photo_id: undefined as string | undefined,
@@ -88,6 +99,8 @@ export const usePhotoStore = defineStore("photo-store", {
 			this.transition = "slide-next";
 			this.is_zoomed = false;
 			this.zoom_controls = undefined;
+			this.is_live_playing = false;
+			this.live_photo_controls = undefined;
 			this.sphere_flat_photo_id = undefined;
 			this.sphere_failed_photo_id = undefined;
 			this.details_failed_photo_id = undefined;
diff --git a/resources/js/v7/components/gallery/photoModule/Dock.vue b/resources/js/v7/components/gallery/photoModule/Dock.vue
index 5bed670077d..d57dd550c64 100644
--- a/resources/js/v7/components/gallery/photoModule/Dock.vue
+++ b/resources/js/v7/components/gallery/photoModule/Dock.vue
@@ -16,56 +16,65 @@
 	>
 		<span class="absolute left-1/2 -translate-x-1/2 p-1 min-w-[25%] w-full filter-shadow text-center">
 			<DockButton
-				v-if="photoStore.photo.is_highlighted"
-				v-tooltip.bottom="$t('gallery.photo.actions.unhighlight')"
-				pi="flag-fill"
-				class="text-yellow-500 lg:hover:text-yellow-100"
-				@click="emits('toggleHighlight')"
+				v-if="photoStore.live_photo_controls !== undefined"
+				v-tooltip.bottom="$t('gallery.motion_photo')"
+				pi="bullseye"
+				:class="photoStore.is_live_playing ? 'text-primary-500' : 'text-white lg:hover:text-primary-500'"
+				@click="photoStore.live_photo_controls?.toggle()"
 			/>
-			<DockButton
-				v-else
-				v-tooltip.bottom="$t('gallery.photo.actions.highlight')"
-				pi="flag"
-				class="text-white lg:hover:text-yellow-500"
-				@click="emits('toggleHighlight')"
-			/>
-			<DockButton
-				v-tooltip.bottom="$t('gallery.photo.actions.set_album_header')"
-				v-if="!isTimeline"
-				pi="image"
-				class="lg:hover:text-primary-500 text-white"
-				@click="emits('setAlbumHeader')"
-			/>
-			<DockButton
-				v-if="isWatermarkerEnabled"
-				v-tooltip.bottom="'Watermark'"
-				pi="barcode"
-				class="lg:hover:text-primary-500 text-white"
-				@click="watermark"
-			/>
-			<DockButton
-				v-if="isFaceRecognitionEnabled"
-				v-tooltip.bottom="$t('people.scan_faces')"
-				pi="face-smile"
-				class="lg:hover:text-primary-500 text-white"
-				@click="scanFaces"
-			/>
-			<template v-if="lycheeStore.can_rotate">
-				<DockButton icon="counterclockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCCW')" />
-				<DockButton icon="clockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCW')" />
+			<template v-if="props.canEdit">
+				<DockButton
+					v-if="photoStore.photo.is_highlighted"
+					v-tooltip.bottom="$t('gallery.photo.actions.unhighlight')"
+					pi="flag-fill"
+					class="text-yellow-500 lg:hover:text-yellow-100"
+					@click="emits('toggleHighlight')"
+				/>
+				<DockButton
+					v-else
+					v-tooltip.bottom="$t('gallery.photo.actions.highlight')"
+					pi="flag"
+					class="text-white lg:hover:text-yellow-500"
+					@click="emits('toggleHighlight')"
+				/>
+				<DockButton
+					v-tooltip.bottom="$t('gallery.photo.actions.set_album_header')"
+					v-if="!isTimeline"
+					pi="image"
+					class="lg:hover:text-primary-500 text-white"
+					@click="emits('setAlbumHeader')"
+				/>
+				<DockButton
+					v-if="isWatermarkerEnabled"
+					v-tooltip.bottom="'Watermark'"
+					pi="barcode"
+					class="lg:hover:text-primary-500 text-white"
+					@click="watermark"
+				/>
+				<DockButton
+					v-if="isFaceRecognitionEnabled"
+					v-tooltip.bottom="$t('people.scan_faces')"
+					pi="face-smile"
+					class="lg:hover:text-primary-500 text-white"
+					@click="scanFaces"
+				/>
+				<template v-if="lycheeStore.can_rotate">
+					<DockButton icon="counterclockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCCW')" />
+					<DockButton icon="clockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCW')" />
+				</template>
+				<DockButton
+					v-tooltip.bottom="$t('gallery.photo.actions.move')"
+					pi="folder"
+					class="lg:hover:text-primary-500 text-white"
+					@click="emits('toggleMove')"
+				/>
+				<DockButton
+					v-tooltip.bottom="$t('gallery.photo.actions.delete')"
+					icon="trash"
+					class="fill-red-600 lg:fill-white lg:hover:fill-red-600"
+					@click="emits('toggleDelete')"
+				/>
 			</template>
-			<DockButton
-				v-tooltip.bottom="$t('gallery.photo.actions.move')"
-				pi="folder"
-				class="lg:hover:text-primary-500 text-white"
-				@click="emits('toggleMove')"
-			/>
-			<DockButton
-				v-tooltip.bottom="$t('gallery.photo.actions.delete')"
-				icon="trash"
-				class="fill-red-600 lg:fill-white lg:hover:fill-red-600"
-				@click="emits('toggleDelete')"
-			/>
 		</span>
 	</div>
 </template>
@@ -96,6 +105,8 @@ const { is_slideshow_active, are_details_open } = storeToRefs(togglableStore);
 
 const props = defineProps<{
 	isNarrowMenu: boolean;
+	/** Edit buttons; without them the dock holds only the live button (FR-100-06). */
+	canEdit: boolean;
 }>();
 
 const isWatermarkerEnabled = computed(
diff --git a/resources/js/v7/components/gallery/photoModule/PhotoBox.vue b/resources/js/v7/components/gallery/photoModule/PhotoBox.vue
index da0651f07e5..448457f75e1 100644
--- a/resources/js/v7/components/gallery/photoModule/PhotoBox.vue
+++ b/resources/js/v7/components/gallery/photoModule/PhotoBox.vue
@@ -82,7 +82,7 @@
 			data-proactively-loads-video="true"
 			:data-photo-src="photoStore.photo.size_variants.medium?.url"
 			:data-video-src="photoStore.photo.live_photo_url"
-			class="absolute m-auto w-auto h-auto"
+			class="absolute m-auto w-auto h-auto isolate"
 			:class="is_full_screen || is_slideshow_active ? 'max-w-full max-h-full' : 'max-w-full md:max-w-[calc(100%-56px)] max-h-[calc(100%-56px)]'"
 			:style="photoStore.style"
 		></div>
@@ -95,10 +95,26 @@
 			data-proactively-loads-video="true"
 			:data-photo-src="photoStore.photo.size_variants.original?.url"
 			:data-video-src="photoStore.photo.live_photo_url"
-			class="absolute m-auto w-auto h-auto"
+			class="absolute m-auto w-auto h-auto isolate"
 			:class="is_full_screen || is_slideshow_active ? 'max-w-full max-h-full' : 'max-w-full md:max-w-[calc(100%-56px)] max-h-[calc(100%-56px)]'"
 			:style="photoStore.style"
 		></div>
+		<!-- FR-100-06: the dock plays the live photo's motion over the still, looping until stopped.
+		     The live photo divs are `isolate`: LivePhotosKit's z-indexed layers stay below this video. -->
+		<video
+			v-if="isLivePlaying && liveVideoUrl !== null"
+			:src="liveVideoUrl"
+			class="absolute m-auto w-auto h-auto object-contain pointer-events-none"
+			:class="is_full_screen || is_slideshow_active ? 'max-w-full max-h-full' : 'max-w-full md:max-w-[calc(100%-56px)] max-h-[calc(100%-56px)]'"
+			:style="photoStore.style"
+			muted
+			loop
+			autoplay
+			playsinline
+			disablepictureinpicture
+			aria-hidden="true"
+			@error="stopLivePhoto"
+		></video>
 		<!-- Face overlay: positioned to exactly match the rendered image via BoundingClientRect -->
 		<div
 			v-if="isFaceEnabled && (loadedFaces.length > 0 || hiddenFaceCount > 0)"
@@ -125,6 +141,7 @@ import { storeToRefs } from "pinia";
 import { computed, reactive, watch, watchEffect, onUnmounted, ref } from "vue";
 import { useLtRorRtL } from "@/utils/Helpers";
 import { ImageViewMode, usePhotoStore } from "@/stores/PhotoState";
+import { useLivePhotoToggle } from "@/composables/photo/useLivePhotoToggle";
 import FaceOverlay from "./FaceOverlay.vue";
 import NsfwDetectionOverlay from "./NsfwDetectionOverlay.vue";
 
@@ -138,6 +155,11 @@ const togglableStore = useTogglablesStateStore();
 const lycheeStore = useLycheeStateStore();
 const photoStore = usePhotoStore();
 
+const props = defineProps<{
+	/** Main lightbox: the dock plays Live Photos (FR-100-06); Flow and Moderation keep the native controls. */
+	isLiveDockEnabled?: boolean;
+}>();
+
 const isFaceEnabled = computed(() => lycheeStore.is_face_recognition_enabled);
 const isNsfwEnabled = computed(() => lycheeStore.is_nsfw_classifier_enabled);
 
@@ -204,6 +226,15 @@ watchEffect(
 
 onUnmounted(() => imageResizeObserver?.disconnect());
 
+// In the main lightbox the dock plays the Live Photo (FR-100-06): a looping `<video>` over the
+// still, so LivePhotosKit only shows the still there, without its native "LIVE" badge.
+const isLiveDockControlled = computed(() => props.isLiveDockEnabled === true);
+const isLivePhotoMode = computed(
+	() => photoStore.imageViewMode === ImageViewMode.LivePhotoMedium || photoStore.imageViewMode === ImageViewMode.LivePhotoOriginal,
+);
+const liveVideoUrl = computed(() => (isLivePhotoMode.value ? (photoStore.photo?.live_photo_url ?? null) : null));
+const { isPlaying: isLivePlaying, stop: stopLivePhoto } = useLivePhotoToggle(() => isLiveDockControlled.value && liveVideoUrl.value !== null);
+
 // Live Photos aren't scanned for automatically past initial page load (LivePhotosKit only
 // auto-augments `[data-live-photo]` elements present at DOMContentLoaded), and the div here
 // is destroyed/recreated by v-if on every mode switch, so it must be augmented explicitly
@@ -215,7 +246,7 @@ watchEffect(
 		if (!el) {
 			return;
 		}
-		LivePhotosKit.augmentElementAsPlayer(el);
+		LivePhotosKit.augmentElementAsPlayer(el, { showsNativeControls: !isLiveDockControlled.value });
 	},
 	{ flush: "post" },
 );
diff --git a/resources/js/v7/components/gallery/photoModule/PhotoPanel.vue b/resources/js/v7/components/gallery/photoModule/PhotoPanel.vue
index 64eb8616eca..18d654b22c8 100644
--- a/resources/js/v7/components/gallery/photoModule/PhotoPanel.vue
+++ b/resources/js/v7/components/gallery/photoModule/PhotoPanel.vue
@@ -6,6 +6,7 @@
 				<Transition :name="disable_swipe_effect ? '' : photoStore.transition">
 					<PhotoBox
 						:key="photoStore.photo.id"
+						:is-live-dock-enabled="true"
 						@go-back="emits('goBack')"
 						@next="emits('next')"
 						@previous="emits('previous')"
@@ -28,7 +29,8 @@
 			<Overlay v-if="!is_exif_disabled && photoStore.imageViewMode !== ImageViewMode.Pdf" />
 			<PhotoRatingOverlay />
 			<Dock
-				v-if="canEditCurrentPhoto && !is_photo_edit_open"
+				v-if="isDockShown"
+				:can-edit="canEditCurrentPhoto"
 				:is-narrow-menu="photoStore.imageViewMode === ImageViewMode.Pdf"
 				@toggle-highlight="emits('toggleHighlight')"
 				@set-album-header="emits('setAlbumHeader')"
@@ -88,6 +90,9 @@ const canEditCurrentPhoto = computed(() => {
 	return true;
 });
 
+/** Editors get the edit buttons; any viewer of a live photo gets its play button (FR-100-06). */
+const isDockShown = computed(() => (canEditCurrentPhoto.value || photoStore.live_photo_controls !== undefined) && !is_photo_edit_open.value);
+
 const props = defineProps<{
 	isMapVisible: boolean;
 }>();
diff --git a/resources/js/v8/components/gallery/photoModule/Dock.vue b/resources/js/v8/components/gallery/photoModule/Dock.vue
index 86721d5d1e3..e2ca30de42e 100644
--- a/resources/js/v8/components/gallery/photoModule/Dock.vue
+++ b/resources/js/v8/components/gallery/photoModule/Dock.vue
@@ -16,35 +16,44 @@
 		}"
 	>
 		<span class="absolute left-1/2 -translate-x-1/2 p-1 min-w-[25%] w-full filter-shadow text-center">
-			<UTooltip v-if="photoStore.photo.is_highlighted" :text="$t('gallery.photo.actions.unhighlight')">
+			<UTooltip v-if="photoStore.live_photo_controls !== undefined" :text="$t('gallery.motion_photo')">
 				<DockButton
-					:pi="`lucide:flag ${FILL_OVERRIDE_CLASS}`"
-					class="text-yellow-500 lg:hover:text-yellow-100"
-					@click="emits('toggleHighlight')"
+					pi="lucide:circle-dot-dashed"
+					:class="photoStore.is_live_playing ? 'text-primary-500' : 'text-white lg:hover:text-primary-500'"
+					@click="photoStore.live_photo_controls?.toggle()"
 				/>
 			</UTooltip>
-			<UTooltip v-else :text="$t('gallery.photo.actions.highlight')">
-				<DockButton pi="lucide:flag" class="text-white lg:hover:text-yellow-500" @click="emits('toggleHighlight')" />
-			</UTooltip>
-			<UTooltip v-if="!isTimeline" :text="$t('gallery.photo.actions.set_album_header')">
-				<DockButton pi="lucide:image" class="lg:hover:text-primary-500 text-white" @click="emits('setAlbumHeader')" />
-			</UTooltip>
-			<UTooltip v-if="isWatermarkerEnabled" text="Watermark">
-				<DockButton pi="lucide:barcode" class="lg:hover:text-primary-500 text-white" @click="watermark" />
-			</UTooltip>
-			<UTooltip v-if="isFaceRecognitionEnabled" :text="$t('people.scan_faces')">
-				<DockButton pi="lucide:smile" class="lg:hover:text-primary-500 text-white" @click="scanFaces" />
-			</UTooltip>
-			<template v-if="lycheeStore.can_rotate && !photoStore.photo.precomputed.is_360">
-				<DockButton icon="counterclockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCCW')" />
-				<DockButton icon="clockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCW')" />
+			<template v-if="props.canEdit">
+				<UTooltip v-if="photoStore.photo.is_highlighted" :text="$t('gallery.photo.actions.unhighlight')">
+					<DockButton
+						:pi="`lucide:flag ${FILL_OVERRIDE_CLASS}`"
+						class="text-yellow-500 lg:hover:text-yellow-100"
+						@click="emits('toggleHighlight')"
+					/>
+				</UTooltip>
+				<UTooltip v-else :text="$t('gallery.photo.actions.highlight')">
+					<DockButton pi="lucide:flag" class="text-white lg:hover:text-yellow-500" @click="emits('toggleHighlight')" />
+				</UTooltip>
+				<UTooltip v-if="!isTimeline" :text="$t('gallery.photo.actions.set_album_header')">
+					<DockButton pi="lucide:image" class="lg:hover:text-primary-500 text-white" @click="emits('setAlbumHeader')" />
+				</UTooltip>
+				<UTooltip v-if="isWatermarkerEnabled" text="Watermark">
+					<DockButton pi="lucide:barcode" class="lg:hover:text-primary-500 text-white" @click="watermark" />
+				</UTooltip>
+				<UTooltip v-if="isFaceRecognitionEnabled" :text="$t('people.scan_faces')">
+					<DockButton pi="lucide:smile" class="lg:hover:text-primary-500 text-white" @click="scanFaces" />
+				</UTooltip>
+				<template v-if="lycheeStore.can_rotate && !photoStore.photo.precomputed.is_360">
+					<DockButton icon="counterclockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCCW')" />
+					<DockButton icon="clockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCW')" />
+				</template>
+				<UTooltip v-if="albumStore.rights?.can_move_content" :text="$t('gallery.photo.actions.move')">
+					<DockButton pi="lucide:folder" class="lg:hover:text-primary-500 text-white" @click="emits('toggleMove')" />
+				</UTooltip>
+				<UTooltip :text="$t('gallery.photo.actions.delete')">
+					<DockButton icon="trash" class="fill-red-600 lg:fill-white lg:hover:fill-red-600" @click="emits('toggleDelete')" />
+				</UTooltip>
 			</template>
-			<UTooltip v-if="albumStore.rights?.can_move_content" :text="$t('gallery.photo.actions.move')">
-				<DockButton pi="lucide:folder" class="lg:hover:text-primary-500 text-white" @click="emits('toggleMove')" />
-			</UTooltip>
-			<UTooltip :text="$t('gallery.photo.actions.delete')">
-				<DockButton icon="trash" class="fill-red-600 lg:fill-white lg:hover:fill-red-600" @click="emits('toggleDelete')" />
-			</UTooltip>
 		</span>
 	</div>
 </template>
@@ -125,6 +134,11 @@ function scanFaces() {
 		});
 }
 
+const props = defineProps<{
+	/** Edit buttons; without them the dock holds only the live button (FR-100-06). */
+	canEdit: boolean;
+}>();
+
 const emits = defineEmits<{
 	toggleHighlight: [];
 	setAlbumHeader: [];
diff --git a/resources/js/v8/components/gallery/photoModule/PhotoBox.vue b/resources/js/v8/components/gallery/photoModule/PhotoBox.vue
index ad3fe6e0306..0e452c87a71 100644
--- a/resources/js/v8/components/gallery/photoModule/PhotoBox.vue
+++ b/resources/js/v8/components/gallery/photoModule/PhotoBox.vue
@@ -136,7 +136,7 @@
 			data-proactively-loads-video="true"
 			:data-photo-src="photoStore.photo.size_variants.medium?.url"
 			:data-video-src="photoStore.photo.live_photo_url"
-			class="absolute m-auto w-auto h-auto"
+			class="absolute m-auto w-auto h-auto isolate"
 			:class="is_full_screen || is_slideshow_active ? 'max-w-full max-h-full' : 'max-w-full md:max-w-[calc(100%-56px)] max-h-[calc(100%-56px)]'"
 			:style="photoStore.style"
 		></div>
@@ -149,10 +149,26 @@
 			data-proactively-loads-video="true"
 			:data-photo-src="photoStore.photo.size_variants.original?.url"
 			:data-video-src="photoStore.photo.live_photo_url"
-			class="absolute m-auto w-auto h-auto"
+			class="absolute m-auto w-auto h-auto isolate"
 			:class="is_full_screen || is_slideshow_active ? 'max-w-full max-h-full' : 'max-w-full md:max-w-[calc(100%-56px)] max-h-[calc(100%-56px)]'"
 			:style="photoStore.style"
 		></div>
+		<!-- FR-100-06: the dock plays the live photo's motion over the still, looping until stopped.
+		     The live photo divs are `isolate`: LivePhotosKit's z-indexed layers stay below this video. -->
+		<video
+			v-if="isLivePlaying && liveVideoUrl !== null"
+			:src="liveVideoUrl"
+			class="absolute m-auto w-auto h-auto object-contain pointer-events-none"
+			:class="is_full_screen || is_slideshow_active ? 'max-w-full max-h-full' : 'max-w-full md:max-w-[calc(100%-56px)] max-h-[calc(100%-56px)]'"
+			:style="photoStore.style"
+			muted
+			loop
+			autoplay
+			playsinline
+			disablepictureinpicture
+			aria-hidden="true"
+			@error="stopLivePhoto"
+		></video>
 		<ZoomMinimap
 			v-if="isMinimapVisible && panZoom.fit.value !== undefined"
 			:src="minimapSrc"
@@ -187,6 +203,7 @@ import { storeToRefs } from "pinia";
 import { computed, defineAsyncComponent, markRaw, nextTick, reactive, watch, watchEffect, onUnmounted, ref } from "vue";
 import { useLtRorRtL } from "@/utils/Helpers";
 import { ImageViewMode, usePhotoStore, type ZoomControls } from "@/stores/PhotoState";
+import { useLivePhotoToggle } from "@/composables/photo/useLivePhotoToggle";
 import FaceOverlay from "./FaceOverlay.vue";
 import FaceAssignmentModal from "@/v8/components/modals/faceRecog/FaceAssignmentModal.vue";
 import NsfwDetectionOverlay from "./NsfwDetectionOverlay.vue";
@@ -596,6 +613,13 @@ watchEffect(
 
 onUnmounted(() => imageResizeObserver?.disconnect());
 
+// In the main lightbox the dock plays the Live Photo (FR-100-06): a looping `<video>` over the
+// still, so LivePhotosKit only shows the still there, without its native "LIVE" badge.
+const isLiveDockControlled = computed(() => props.isZoomEnabled === true);
+const isLivePhotoMode = computed(() => viewMode.value === ImageViewMode.LivePhotoMedium || viewMode.value === ImageViewMode.LivePhotoOriginal);
+const liveVideoUrl = computed(() => (isLivePhotoMode.value && isMediaReady.value ? (photoStore.photo?.live_photo_url ?? null) : null));
+const { isPlaying: isLivePlaying, stop: stopLivePhoto } = useLivePhotoToggle(() => isLiveDockControlled.value && liveVideoUrl.value !== null);
+
 // Live Photos aren't scanned for automatically past initial page load (LivePhotosKit only
 // auto-augments `[data-live-photo]` elements present at DOMContentLoaded), and the div here
 // is destroyed/recreated by v-if on every mode switch, so it must be augmented explicitly
@@ -607,7 +631,7 @@ watchEffect(
 		if (!el) {
 			return;
 		}
-		LivePhotosKit.augmentElementAsPlayer(el);
+		LivePhotosKit.augmentElementAsPlayer(el, { showsNativeControls: !isLiveDockControlled.value });
 	},
 	{ flush: "post" },
 );
diff --git a/resources/js/v8/components/gallery/photoModule/PhotoPanel.vue b/resources/js/v8/components/gallery/photoModule/PhotoPanel.vue
index 0f424bb1429..7e377745a1a 100644
--- a/resources/js/v8/components/gallery/photoModule/PhotoPanel.vue
+++ b/resources/js/v8/components/gallery/photoModule/PhotoPanel.vue
@@ -39,9 +39,8 @@
 						<Overlay v-if="!is_exif_disabled && photoStore.imageViewMode !== ImageViewMode.Pdf" />
 						<PhotoRatingOverlay />
 						<Dock
-							v-if="
-								canEditCurrentPhoto && !is_photo_edit_open && !photoStore.is_zoomed && photoStore.imageViewMode !== ImageViewMode.Pdf
-							"
+							v-if="isDockShown"
+							:can-edit="canEditCurrentPhoto"
 							@toggle-highlight="emits('toggleHighlight')"
 							@set-album-header="emits('setAlbumHeader')"
 							@rotate-photo-c-c-w="emits('rotatePhotoCCW')"
@@ -109,6 +108,15 @@ const canEditCurrentPhoto = computed(() => {
 	return true;
 });
 
+/** Editors get the edit buttons; any viewer of a live photo gets its play button (FR-100-06). */
+const isDockShown = computed(
+	() =>
+		(canEditCurrentPhoto.value || photoStore.live_photo_controls !== undefined) &&
+		!is_photo_edit_open.value &&
+		!photoStore.is_zoomed &&
+		photoStore.imageViewMode !== ImageViewMode.Pdf,
+);
+
 const props = defineProps<{
 	isMapVisible: boolean;
 }>();

From 1ffe498b6fc4aed7aae5b22fa538a36f54074ac2 Mon Sep 17 00:00:00 2001
From: Matt LaPaglia <mlapaglia@gmail.com>
Date: Sat, 31 Oct 2026 11:11:42 -0400
Subject: [PATCH 2/5] fix(lightbox): make dock buttons keyboard-operable

DockButton renders a button instead of an anchor without href in v7 and v8, so every dock button can be focused and triggered with Enter or Space. The live photo button gets an aria-label and aria-pressed. Record the owner's Firefox and Chrome checks on the feature 100 tasks.

Spec impact: FR-100-06 accessibility details, T-100-28 added
---
 .../features/100-google-motion-photos/plan.md            | 3 ++-
 .../features/100-google-motion-photos/spec.md            | 2 +-
 .../features/100-google-motion-photos/tasks.md           | 9 ++++++---
 resources/js/v7/components/gallery/photoModule/Dock.vue  | 2 ++
 .../js/v7/components/gallery/photoModule/DockButton.vue  | 4 ++--
 resources/js/v8/components/gallery/photoModule/Dock.vue  | 2 ++
 .../js/v8/components/gallery/photoModule/DockButton.vue  | 8 ++++++--
 7 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/plan.md b/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
index e0d35764de5..d0629c698c0 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
@@ -96,7 +96,7 @@ After T-100-15, during T-100-16, compare every FR/NFR/S-ID against the tests nam
 | S-100-11 … 14 | I6 / T-100-10 | `ExtractMotionPhotosTest` |
 | S-100-15 … 18 | I8 / T-100-13, T-100-14 | `useMotionHover.test.ts` + manual |
 | S-100-19, 20 | I8 / T-100-13, T-100-17 | `useMotionHover.test.ts` + manual per view |
-| S-100-25, 26 | I14 / T-100-23 … T-100-26 | `useLivePhotoToggle.test.ts` + manual |
+| S-100-25, 26 | I14 / T-100-23 … T-100-28 | `useLivePhotoToggle.test.ts` + manual |
 
 ## Analysis Gate
 
@@ -124,6 +124,7 @@ Run 2026-10-17 by the agent (owner review pending).
 - v7 grid playback, if requested.
 
 ## Intent Log
+- 2026-10-31: owner tested the dock button in Firefox and Chrome (working) and asked to address the PR #4933 review. CodeRabbit asked to keep T-100-24/25 open until the manual checks passed (now recorded as passed) and to make the live control keyboard-operable: `DockButton` became a `<button type="button">` in v7 and v8, the live button got `aria-label`/`aria-pressed` (T-100-28).
 - 2026-10-31: owner reported the motion did not loop until the button was turned off, and that Firefox highlighted the button without playing. Agent probed LivePhotosKit in Chromium with Playwright (Firefox would not start in the sandbox; running it outside was declined), found the gap-after-`ended` and the stall on non-Apple clips, and switched the dock path to a looping `<video>` overlay, the technique the grid hover already uses in Firefox (FR-100-06, T-100-26).
 - 2026-10-31: owner asked for the same change in v7. Agent mirrored it in the v7 `PhotoBox`/`Dock`/`PhotoPanel` (new `is-live-dock-enabled` prop, as v7 `PhotoBox` has no zoom prop; PrimeIcons `pi-bullseye`, the closest glyph to the Live Photo rings) and moved `useLivePhotoToggle` to `resources/js/composables/photo/`, as v7 never imports from `@/v8`.
 - 2026-10-31: owner asked to move the lightbox "LIVE" button into the dock next to highlight/move/delete, styled like the other dock buttons, click to play and click again to stop and show the still. Agent read `PhotoBox`, `Dock`, `DockButton`, `PhotoPanel`, the LivePhotosKit typings (`showsNativeControls`, `play`/`stop`, `ended` event); chose to keep playing (restart on `ended`) until the second click so the button state always matches what is shown, to show the dock to viewers without edit rights for live photos, and to keep the native controls in Flow/Moderation where there is no dock (FR-100-06).
diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
index c703142113a..ebc22c56a6a 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
@@ -40,7 +40,7 @@ Affected layers: metadata extraction (`app/Metadata`), one artisan command, v8 g
 | FR-100-03 | Grid motion playback (v8, every live photo). | `PhotoThumb.vue` and `PhotoThumbVirtual.vue`: a motion badge (`ThumbBadge` with `lucide:smartphone` on `bg-purple-700`, the icon and colour of the list-view "Live" label, FR-014-06; its new `label` prop sets `title` and `aria-label` to `gallery.motion_photo`) in the badge row whenever `precomputed.is_livephoto`. On devices matching `(hover: hover) and (pointer: fine)`, after 250 ms of continuous hover a muted, looping, `playsinline` `<video>` fades in over the thumbnail (`object-cover`, same box) and plays `live_photo_url`; on `mouseleave` it pauses, its `src` is removed and the still shows again. When `live_photo_url` is still `null` at `mouseenter`, the URL is fetched per FR-100-05; playback starts once both the 250 ms have passed and the URL is set, and never if the pointer left first. The overlay covers the still, so the Ken Burns hover zoom (when enabled) keeps running unseen underneath. | Only tiles with `is_livephoto === true`; nothing when `prefers-reduced-motion: reduce` (badge only); nothing on touch-only devices (badge only, tap opens the lightbox as today). | Video `error` event → overlay removed, still stays, no toast, no retry during that hover. | None (frontend only). | Owner request, Q-100-01, Q-100-03, Q-100-05 |
 | FR-100-04 | Backfill already-imported photos. | `php artisan lychee:extract_motion_photos {limit=100} {tm=600} {--after=} {--album=} {--dry-run} {--reencode}` walks photos with `type = 'image/jpeg'` and `live_photo_short_path IS NULL`, ordered by id with an `--after` cursor (as `lychee:detect_360`). For each it uses the original in place when hosted locally, or a downloaded temporary copy otherwise (as `SizeVariantDefaultFactory`), runs `PHPExif\MotionPhoto\MotionPhotoLocator::locate()` on its path, and when the length > 0 extracts via `GoogleMotionPictureHandler` and writes `GoogleMotionPictureHandler::videoPathNextTo(<original path>)` on the original's disk (the helper the upload pipe `PlaceGoogleMotionVideo` now shares), then sets `live_photo_short_path` and dispatches `PhotoSaved` for the extracted ids. Output: `Motion photo: <id> (<title>)` per hit, then `Checked N photos: X motion photos extracted, Y failed.` (`found (dry run)` with `--dry-run`), and `More photos may remain: continue with --after=<last id>` when `N = limit`; nothing to scan → `No photos require motion photo extraction.` | `--reencode` switches the candidates to Google motion photos that already have a video (`live_photo_short_path` set, `live_photo_content_id` null) and re-extracts each clip from the original into its current path, transcoding as in FR-100-02; the summary says `re-extracted`. Every clip the command writes is staged at `<target>.part` on the same disk and then moved over the target, so a failed write leaves an existing clip intact (PR #4900 review). `--dry-run` writes nothing and does not need FFmpeg. `--album` restricts to that album's direct photos; unknown id → `Album <id> not found.`, exit 1. FFmpeg disabled without `--dry-run` → `FFmpeg is required to extract motion photo videos (or use --dry-run).`, exit 1, before the scan. | Missing original or any per-photo error → `Log::warning` and `Failed: <id> (<title>): <reason>` on the console, counted as failed, loop continues; exit 1 when any failed. When the batch is full and some photos failed, the cursor line is followed by `N photos failed in this batch and would be skipped by that cursor: run it again with --after=<same value> (or without --after) to retry them first.` (PR #4900 review). Plain JPEGs stay candidates, so a re-run checks them again (no "checked" marker; the cursor bounds each run). | Command output only. | Q-100-04 |
 | FR-100-05 | Video URL for v3 grid tiles. | Each v8 view that renders photo thumbnails provides a `MotionUrlLoader` (`(photoIds: string[]) => Promise<void>`, Vue `provide`/`inject` key in `resources/js/v8/composables/photo/motionUrlLoader.ts`) wrapping its store's existing deduped details loader: `AlbumPanel.vue` → `AlbumState.loadPhotoDetails`, `Timeline.vue` → `TimelineState.loadPhotoDetailsV3`, `Search.vue` → `SearchState.loadPhotoDetailsV3`. `Flow.vue` renders its own cards, not these thumbnails, and the tag and favourites views use v2 `PhotoResource` payloads that already carry `live_photo_url`, so they provide none. The thumbnail calls it with its own id on `mouseenter` when `is_livephoto` and `live_photo_url === null`, on hover-capable devices only; the result lands in `live_photo_url` through `mergePhotoDetail()`. | No call when the URL is already set, the tile is not a live photo, or the device/motion gates of FR-100-03 fail. A view that provides no loader plays only tiles whose URL is already loaded. | Loader rejects or leaves the URL `null` → no playback for that hover, no toast; the next hover tries again (the store's dedupe makes a resolved id free). A request still in flight is reused when the pointer leaves and re-enters, because the stores mark an id resolved only once its response arrives (PR #4900 review). | None. | Q-100-07 |
-| FR-100-06 | Lightbox play/stop from the dock (v7 and v8). | In the main lightbox (v8: `PhotoPanel` → `PhotoBox` with `is-zoom-enabled`; v7: `PhotoPanel` → `PhotoBox` with `is-live-dock-enabled`) LivePhotosKit only shows the still: it is augmented with `showsNativeControls: false`, so its "LIVE" badge and hover playback are gone. `PhotoBox` registers `LivePhotoControls` (`{ toggle }`) in `PhotoState.live_photo_controls` and mirrors the playing state into `PhotoState.is_live_playing` through `resources/js/composables/photo/useLivePhotoToggle.ts`, with the same ownership rule as the zoom controls (Feature 078). `Dock.vue` shows a `DockButton` (v8 `lucide:circle-dot-dashed`, v7 PrimeIcons `pi-bullseye`; tooltip `gallery.motion_photo`) first in the button row while controls are registered: white with the primary hover colour when idle, primary colour while playing. First click shows a muted, `loop`, `autoplay`, `playsinline` `<video>` of `live_photo_url` over the still (same box and size classes as the still, `object-contain`, `pointer-events-none`; the LivePhotosKit divs carry `isolate` so its z-indexed render layers stay below the video), so the motion loops without a gap until the next click removes it and the still shows again. The dock is shown to every viewer of a live photo, not only to editors: viewers without edit rights see the live button alone. | Flow (`LigtBox.vue`), Moderation and NSFW findings (v8), Flow and Moderation (v7) mount `PhotoBox` without that prop and keep the native LivePhotosKit controls. No button for photos that are not live photos or have no `live_photo_url`. Moving to another photo or closing the lightbox drops the controls; the next live photo starts stopped. Hidden with the rest of the dock during the slideshow. | Video `error` (e.g. HEVC in Firefox) → overlay removed, button back to idle, still visible, no toast. | None (frontend only). | Owner request 2026-10-31; LivePhotosKit playback was dropped from the dock path because its "full" style always ends (a restart on `ended` leaves a ~350 ms gap on the still), it played nothing in Firefox, and in Chromium it stalled at frame 0 on a Google clip without Apple timing metadata |
+| FR-100-06 | Lightbox play/stop from the dock (v7 and v8). | In the main lightbox (v8: `PhotoPanel` → `PhotoBox` with `is-zoom-enabled`; v7: `PhotoPanel` → `PhotoBox` with `is-live-dock-enabled`) LivePhotosKit only shows the still: it is augmented with `showsNativeControls: false`, so its "LIVE" badge and hover playback are gone. `PhotoBox` registers `LivePhotoControls` (`{ toggle }`) in `PhotoState.live_photo_controls` and mirrors the playing state into `PhotoState.is_live_playing` through `resources/js/composables/photo/useLivePhotoToggle.ts`, with the same ownership rule as the zoom controls (Feature 078). `Dock.vue` shows a `DockButton` (v8 `lucide:circle-dot-dashed`, v7 PrimeIcons `pi-bullseye`; tooltip and `aria-label` `gallery.motion_photo`, `aria-pressed` = playing; `DockButton` is a `<button type="button">`, so it is keyboard-operable) first in the button row while controls are registered: white with the primary hover colour when idle, primary colour while playing. First click shows a muted, `loop`, `autoplay`, `playsinline` `<video>` of `live_photo_url` over the still (same box and size classes as the still, `object-contain`, `pointer-events-none`; the LivePhotosKit divs carry `isolate` so its z-indexed render layers stay below the video), so the motion loops without a gap until the next click removes it and the still shows again. The dock is shown to every viewer of a live photo, not only to editors: viewers without edit rights see the live button alone. | Flow (`LigtBox.vue`), Moderation and NSFW findings (v8), Flow and Moderation (v7) mount `PhotoBox` without that prop and keep the native LivePhotosKit controls. No button for photos that are not live photos or have no `live_photo_url`. Moving to another photo or closing the lightbox drops the controls; the next live photo starts stopped. Hidden with the rest of the dock during the slideshow. | Video `error` (e.g. HEVC in Firefox) → overlay removed, button back to idle, still visible, no toast. | None (frontend only). | Owner request 2026-10-31; LivePhotosKit playback was dropped from the dock path because its "full" style always ends (a restart on `ended` leaves a ~350 ms gap on the still), it played nothing in Firefox, and in Chromium it stalled at frame 0 on a Google clip without Apple timing metadata |
 
 ## Non-Functional Requirements
 
diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md b/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
index c91ddcf2433..9c9f6a64129 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
@@ -139,15 +139,18 @@ _Last updated: 2026-10-31_
   _Verification commands:_ `npx vp test useLivePhotoToggle` (red, then green)  
 - [x] T-100-24 – `PhotoState.live_photo_controls` / `is_live_playing`, `PhotoBox` without native controls in the main lightbox, `Dock` live button, `PhotoPanel` dock gate for viewers (F-100-06, S-100-25, S-100-26, UI-100-04).  
   _Verification commands:_ `npx vp check` (no `--fix`), `npx vp run typecheck`, manual lightbox check.  
-  _Notes:_ 2026-10-31: `npx vp test useLivePhotoToggle` 5/5, `npx vp check` on the six files clean, `npx vp run typecheck` green. Manual lightbox check (Apple + Google live photo, viewer without edit rights) still to be done by the owner.  
+  _Notes:_ 2026-10-31: `npx vp test useLivePhotoToggle` 5/5, `npx vp check` on the six files clean, `npx vp run typecheck` green. Manual lightbox check passed: owner tested in Firefox and Chrome on 2026-10-31.  
 - [x] T-100-25 – Same change in v7: `PhotoBox` `is-live-dock-enabled` prop, `Dock` live button (`pi-bullseye`) and `can-edit` gate, `PhotoPanel` dock gate for viewers; composable moved to `resources/js/composables/photo/` (F-100-06, S-100-25, S-100-26, UI-100-04).  
   _Verification commands:_ `npx vp test useLivePhotoToggle`, `npx vp check` (no `--fix`), `npx vp run typecheck`, manual v7 lightbox check.  
-  _Notes:_ 2026-10-31: `npx vp test useLivePhotoToggle` 5/5, `npx vp check` on the seven touched files clean, `npx vp run typecheck` green. Manual v7 lightbox check still to be done by the owner.  
+  _Notes:_ 2026-10-31: `npx vp test useLivePhotoToggle` 5/5, `npx vp check` on the seven touched files clean, `npx vp run typecheck` green. Manual check passed: owner tested in Firefox and Chrome on 2026-10-31.  
 - [x] T-100-26 – Owner feedback: the motion must loop until the button is turned off, and nothing played in Firefox. Rewrote `useLivePhotoToggle` (failing tests first: registration, toggle, `stop()`, release, slide-transition ownership) to own the store registration; both `PhotoBox` versions show a looping `<video>` over the still instead of driving LivePhotosKit (F-100-06, S-100-25, S-100-26).  
   _Verification commands:_ `npx vp test useLivePhotoToggle` (4 red, then 5/5), `npx vp test` (108), `npx vp check` on the nine touched files, `npx vp run typecheck`.  
-  _Notes:_ Diagnosis with a scratch Playwright page over `train.jpg`/`train.mov` and a Google clip extracted from `google_motion_photo.jpg`: in Chromium LivePhotosKit `play()` returns `false` right after `ended` and only restarts on the next `canplay` (~350 ms on the still); on the Google clip it threw `Offset is outside the bounds of the DataView` and stayed at `currentTime` 0.004 while `isPlaying` was true. A plain looping `<video>` wrapped continuously on both clips. Firefox could not be launched in the agent sandbox; manual Firefox check by the owner pending.  
+  _Notes:_ Diagnosis with a scratch Playwright page over `train.jpg`/`train.mov` and a Google clip extracted from `google_motion_photo.jpg`: in Chromium LivePhotosKit `play()` returns `false` right after `ended` and only restarts on the next `canplay` (~350 ms on the still); on the Google clip it threw `Offset is outside the bounds of the DataView` and stayed at `currentTime` 0.004 while `isPlaying` was true. A plain looping `<video>` wrapped continuously on both clips. Firefox could not be launched in the agent sandbox; owner tested in Firefox and Chrome on 2026-10-31: working.  
 - [x] T-100-27 – Owner feedback: the `<video>` was hidden under `.lpk-live-photo-renderer` (its layers carry z-index 1–4 and `#livephoto` formed no stacking context). Added `isolate` to the live photo divs in both `PhotoBox` versions (F-100-06, S-100-25).  
   _Verification commands:_ scratch Playwright page in Chromium: `elementFromPoint` at the centre is `CANVAS.lpk-photo` without `isolate`, `VIDEO` with it; `npx vp check` on both `PhotoBox` files, `npx vp run typecheck`.  
+- [x] T-100-28 – PR #4933 review: `DockButton` (v7 and v8) renders a `<button type="button">` instead of an `<a>` without `href`, so every dock button is focusable and works with Enter/Space; the live button carries `aria-label` (`gallery.motion_photo`) and `aria-pressed` (`is_live_playing`) (F-100-06, NFR-100-04).  
+  _Verification commands:_ `npx vp check` on both `Dock.vue` and `DockButton.vue`, `npx vp run typecheck`.  
+  _Notes:_ Tailwind preflight (imported by `app.css` and `app-v8.css`) resets the button chrome, so the dock looks unchanged.  
 
 ## Notes / TODOs
 - 2026-10-17: local toolchain installed (PHP 8.4 + imagick, Composer, exiftool, FFmpeg, `vendor/`, `node_modules/`); `vp` is not global, run it as `npx vp …` (e.g. `npx vp check` (never `--fix`: it rewrites unrelated files), `npx vp run typecheck`, `npx vp test`).
diff --git a/resources/js/v7/components/gallery/photoModule/Dock.vue b/resources/js/v7/components/gallery/photoModule/Dock.vue
index d57dd550c64..b67e7d162fd 100644
--- a/resources/js/v7/components/gallery/photoModule/Dock.vue
+++ b/resources/js/v7/components/gallery/photoModule/Dock.vue
@@ -19,6 +19,8 @@
 				v-if="photoStore.live_photo_controls !== undefined"
 				v-tooltip.bottom="$t('gallery.motion_photo')"
 				pi="bullseye"
+				:aria-label="$t('gallery.motion_photo')"
+				:aria-pressed="photoStore.is_live_playing"
 				:class="photoStore.is_live_playing ? 'text-primary-500' : 'text-white lg:hover:text-primary-500'"
 				@click="photoStore.live_photo_controls?.toggle()"
 			/>
diff --git a/resources/js/v7/components/gallery/photoModule/DockButton.vue b/resources/js/v7/components/gallery/photoModule/DockButton.vue
index 62dac88cfbd..9fc4ad938c2 100644
--- a/resources/js/v7/components/gallery/photoModule/DockButton.vue
+++ b/resources/js/v7/components/gallery/photoModule/DockButton.vue
@@ -1,8 +1,8 @@
 <template>
-	<a class="px-3 py-2.5 cursor-pointer transition-all duration-300 ease-in h-full inline-flex" :class="props.class">
+	<button type="button" class="px-3 py-2.5 cursor-pointer transition-all duration-300 ease-in h-full inline-flex" :class="props.class">
 		<MiniIcon v-if="props.icon" :icon="props.icon" fill="" class="my-0 w-4 h-4 mr-0 ml-0" />
 		<i :class="piClass" class="m-0" />
-	</a>
+	</button>
 </template>
 <script setup lang="ts">
 import MiniIcon from "@/v7/components/icons/MiniIcon.vue";
diff --git a/resources/js/v8/components/gallery/photoModule/Dock.vue b/resources/js/v8/components/gallery/photoModule/Dock.vue
index e2ca30de42e..11440de4931 100644
--- a/resources/js/v8/components/gallery/photoModule/Dock.vue
+++ b/resources/js/v8/components/gallery/photoModule/Dock.vue
@@ -19,6 +19,8 @@
 			<UTooltip v-if="photoStore.live_photo_controls !== undefined" :text="$t('gallery.motion_photo')">
 				<DockButton
 					pi="lucide:circle-dot-dashed"
+					:aria-label="$t('gallery.motion_photo')"
+					:aria-pressed="photoStore.is_live_playing"
 					:class="photoStore.is_live_playing ? 'text-primary-500' : 'text-white lg:hover:text-primary-500'"
 					@click="photoStore.live_photo_controls?.toggle()"
 				/>
diff --git a/resources/js/v8/components/gallery/photoModule/DockButton.vue b/resources/js/v8/components/gallery/photoModule/DockButton.vue
index 813006e3883..b4ea6fbad8c 100644
--- a/resources/js/v8/components/gallery/photoModule/DockButton.vue
+++ b/resources/js/v8/components/gallery/photoModule/DockButton.vue
@@ -1,8 +1,12 @@
 <template>
-	<a class="pointer-events-auto px-3 py-2.5 cursor-pointer transition-all duration-300 ease-in h-full inline-flex" :class="props.class">
+	<button
+		type="button"
+		class="pointer-events-auto px-3 py-2.5 cursor-pointer transition-all duration-300 ease-in h-full inline-flex"
+		:class="props.class"
+	>
 		<MiniIcon v-if="props.icon" :icon="props.icon" fill="" class="my-0 w-4 h-4 mr-0 ml-0" />
 		<UIcon v-if="props.pi" :name="piIconName" class="m-0" :class="piExtraClasses" />
-	</a>
+	</button>
 </template>
 <script setup lang="ts">
 import { computed } from "vue";

From ed01f9c65f271d799d183e1f84ab0991a745b28a Mon Sep 17 00:00:00 2001
From: Matt LaPaglia <mlapaglia@gmail.com>
Date: Sat, 31 Oct 2026 12:03:34 -0400
Subject: [PATCH 3/5] trigger rabbit


From 88ba0f7720820d035d53997b3249479abaa796c2 Mon Sep 17 00:00:00 2001
From: Matt LaPaglia <mlapaglia@gmail.com>
Date: Sat, 31 Oct 2026 12:19:42 -0400
Subject: [PATCH 4/5] fix(lightbox): label dock buttons and sync feature 100
 docs

Every icon-only dock button in v7 and v8 gets a translated aria-label, with new gallery.photo.actions.rotate_ccw and rotate_cw keys in all locales. The watermark tooltip uses the existing translated key instead of a hard-coded string.

Align the plan scope, FR-100-06, UI-100-04 and the knowledge map with the dock video overlay and the useLivePhotoToggle composable that owns the control registration.

Spec impact: FR-100-06 and UI-100-04 wording, T-100-29 added
---
 .../features/100-google-motion-photos/plan.md |  9 +--
 .../features/100-google-motion-photos/spec.md |  6 +-
 .../100-google-motion-photos/tasks.md         |  2 +
 docs/specs/4-architecture/knowledge-map.md    |  2 +-
 lang/ar/gallery.php                           |  2 +
 lang/bg/gallery.php                           |  2 +
 lang/cz/gallery.php                           |  2 +
 lang/de/gallery.php                           |  2 +
 lang/el/gallery.php                           |  2 +
 lang/en/gallery.php                           |  2 +
 lang/es/gallery.php                           |  2 +
 lang/fa/gallery.php                           |  2 +
 lang/fr/gallery.php                           |  2 +
 lang/hu/gallery.php                           |  2 +
 lang/it/gallery.php                           |  2 +
 lang/ja/gallery.php                           |  2 +
 lang/nl/gallery.php                           |  2 +
 lang/no/gallery.php                           |  2 +
 lang/pl/gallery.php                           |  2 +
 lang/pt/gallery.php                           |  2 +
 lang/ru/gallery.php                           |  2 +
 lang/sk/gallery.php                           |  2 +
 lang/sv/gallery.php                           |  2 +
 lang/tr/gallery.php                           |  2 +
 lang/vi/gallery.php                           |  2 +
 lang/zh_CN/gallery.php                        |  2 +
 lang/zh_TW/gallery.php                        |  2 +
 .../components/gallery/photoModule/Dock.vue   | 23 +++++++-
 .../components/gallery/photoModule/Dock.vue   | 59 ++++++++++++++++---
 29 files changed, 127 insertions(+), 20 deletions(-)

diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/plan.md b/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
index d0629c698c0..96de77e43fb 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/plan.md
@@ -15,8 +15,8 @@ A photo taken on a current Android phone shows its motion in Lychee: in the ligh
 - Quality gate green: `php-cs-fixer`, `make phpstan`, scoped `php artisan test`, `npx vp check` (no `--fix`), `vp run typecheck`, `vp test`.
 
 ## Scope Alignment
-- **In scope:** `App\Metadata\MotionPhoto` reader (FR-100-01); `Extractor` wiring (FR-100-01/02); backfill command (FR-100-04); v8 badge and hover playback for every live photo (FR-100-03); fixtures; docs.
-- **Out of scope:** Spec Non-Goals (Samsung legacy trailer, HEIC motion photos, presentation timestamp, HEVC transcoding, lightbox player change, v7 grid, touch inline playback).
+- **In scope:** `App\Metadata\MotionPhoto` reader (FR-100-01); `Extractor` wiring (FR-100-01/02); backfill command (FR-100-04); v8 badge and hover playback for every live photo (FR-100-03); main-lightbox play/stop dock button with a looping `<video>` overlay, v7 and v8 (FR-100-06, I14); fixtures; docs.
+- **Out of scope:** Spec Non-Goals (Samsung legacy trailer, HEIC motion photos, presentation timestamp, HEVC transcoding, replacing LivePhotosKit (it still renders the lightbox still and keeps playing in Flow/Moderation, which have no dock), v7 grid, touch inline playback).
 
 ## Dependencies & Interfaces
 - `App\Metadata\Extractor::createFromFile` (call site of the locator), `PanoramaDetector` (style precedent: final class, pure helpers, readonly record).
@@ -76,7 +76,7 @@ After T-100-15, during T-100-16, compare every FR/NFR/S-ID against the tests nam
 10. **I10 – Docs + drift gate**
     - _Steps:_ knowledge map, `1-concepts/photos.md`, `request-lifecycle-photo-upload.md`, roadmap; drift gate report.
 11. **I14 – Lightbox live button in the dock, v8 then v7** (FR-100-06, S-100-25, S-100-26, UI-100-04)
-    - _Steps:_ failing Vitest `useLivePhotoToggle.test.ts` (play, stop, restart on `ended` while playing, no restart after stop, detach resets) → composable; `PhotoBox` augments with `showsNativeControls: false` in the main lightbox and registers `LivePhotoControls` in `PhotoState`; `Dock` live button; `PhotoPanel` shows the dock to non-editors when controls are registered.
+    - _Steps:_ failing Vitest `useLivePhotoToggle.test.ts` (registration, toggle, `stop()`, release, slide-transition ownership) → shared composable `resources/js/composables/photo/useLivePhotoToggle.ts`, which registers and releases `LivePhotoControls` in `PhotoState`; `PhotoBox` calls it, augments LivePhotosKit with `showsNativeControls: false` in the main lightbox and shows the looping `<video>` overlay while playing; `Dock` live button; `PhotoPanel` shows the dock to non-editors when controls are registered. (The first iteration drove LivePhotosKit `play()`/`stop()`; replaced in T-100-26.)
     - _Commands:_ `npx vp test useLivePhotoToggle`, `npx vp check` (no `--fix`), `npx vp run typecheck`; manual check in the lightbox on an Apple and a Google live photo.
 
 ## Scenario Tracking
@@ -96,7 +96,7 @@ After T-100-15, during T-100-16, compare every FR/NFR/S-ID against the tests nam
 | S-100-11 … 14 | I6 / T-100-10 | `ExtractMotionPhotosTest` |
 | S-100-15 … 18 | I8 / T-100-13, T-100-14 | `useMotionHover.test.ts` + manual |
 | S-100-19, 20 | I8 / T-100-13, T-100-17 | `useMotionHover.test.ts` + manual per view |
-| S-100-25, 26 | I14 / T-100-23 … T-100-28 | `useLivePhotoToggle.test.ts` + manual |
+| S-100-25, 26 | I14 / T-100-23 … T-100-29 | `useLivePhotoToggle.test.ts` + manual |
 
 ## Analysis Gate
 
@@ -124,6 +124,7 @@ Run 2026-10-17 by the agent (owner review pending).
 - v7 grid playback, if requested.
 
 ## Intent Log
+- 2026-10-31: owner asked to address CodeRabbit's second review of PR #4933: four doc-sync findings (plan scope, ownership in FR-100-06, UI-100-04 wording, knowledge-map contradiction) and translated `aria-label`s for every icon-only dock button, which needed new rotate keys in all 23 locales (T-100-29).
 - 2026-10-31: owner tested the dock button in Firefox and Chrome (working) and asked to address the PR #4933 review. CodeRabbit asked to keep T-100-24/25 open until the manual checks passed (now recorded as passed) and to make the live control keyboard-operable: `DockButton` became a `<button type="button">` in v7 and v8, the live button got `aria-label`/`aria-pressed` (T-100-28).
 - 2026-10-31: owner reported the motion did not loop until the button was turned off, and that Firefox highlighted the button without playing. Agent probed LivePhotosKit in Chromium with Playwright (Firefox would not start in the sandbox; running it outside was declined), found the gap-after-`ended` and the stall on non-Apple clips, and switched the dock path to a looping `<video>` overlay, the technique the grid hover already uses in Firefox (FR-100-06, T-100-26).
 - 2026-10-31: owner asked for the same change in v7. Agent mirrored it in the v7 `PhotoBox`/`Dock`/`PhotoPanel` (new `is-live-dock-enabled` prop, as v7 `PhotoBox` has no zoom prop; PrimeIcons `pi-bullseye`, the closest glyph to the Live Photo rings) and moved `useLivePhotoToggle` to `resources/js/composables/photo/`, as v7 never imports from `@/v8`.
diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
index ebc22c56a6a..d7d41508996 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
@@ -40,7 +40,7 @@ Affected layers: metadata extraction (`app/Metadata`), one artisan command, v8 g
 | FR-100-03 | Grid motion playback (v8, every live photo). | `PhotoThumb.vue` and `PhotoThumbVirtual.vue`: a motion badge (`ThumbBadge` with `lucide:smartphone` on `bg-purple-700`, the icon and colour of the list-view "Live" label, FR-014-06; its new `label` prop sets `title` and `aria-label` to `gallery.motion_photo`) in the badge row whenever `precomputed.is_livephoto`. On devices matching `(hover: hover) and (pointer: fine)`, after 250 ms of continuous hover a muted, looping, `playsinline` `<video>` fades in over the thumbnail (`object-cover`, same box) and plays `live_photo_url`; on `mouseleave` it pauses, its `src` is removed and the still shows again. When `live_photo_url` is still `null` at `mouseenter`, the URL is fetched per FR-100-05; playback starts once both the 250 ms have passed and the URL is set, and never if the pointer left first. The overlay covers the still, so the Ken Burns hover zoom (when enabled) keeps running unseen underneath. | Only tiles with `is_livephoto === true`; nothing when `prefers-reduced-motion: reduce` (badge only); nothing on touch-only devices (badge only, tap opens the lightbox as today). | Video `error` event → overlay removed, still stays, no toast, no retry during that hover. | None (frontend only). | Owner request, Q-100-01, Q-100-03, Q-100-05 |
 | FR-100-04 | Backfill already-imported photos. | `php artisan lychee:extract_motion_photos {limit=100} {tm=600} {--after=} {--album=} {--dry-run} {--reencode}` walks photos with `type = 'image/jpeg'` and `live_photo_short_path IS NULL`, ordered by id with an `--after` cursor (as `lychee:detect_360`). For each it uses the original in place when hosted locally, or a downloaded temporary copy otherwise (as `SizeVariantDefaultFactory`), runs `PHPExif\MotionPhoto\MotionPhotoLocator::locate()` on its path, and when the length > 0 extracts via `GoogleMotionPictureHandler` and writes `GoogleMotionPictureHandler::videoPathNextTo(<original path>)` on the original's disk (the helper the upload pipe `PlaceGoogleMotionVideo` now shares), then sets `live_photo_short_path` and dispatches `PhotoSaved` for the extracted ids. Output: `Motion photo: <id> (<title>)` per hit, then `Checked N photos: X motion photos extracted, Y failed.` (`found (dry run)` with `--dry-run`), and `More photos may remain: continue with --after=<last id>` when `N = limit`; nothing to scan → `No photos require motion photo extraction.` | `--reencode` switches the candidates to Google motion photos that already have a video (`live_photo_short_path` set, `live_photo_content_id` null) and re-extracts each clip from the original into its current path, transcoding as in FR-100-02; the summary says `re-extracted`. Every clip the command writes is staged at `<target>.part` on the same disk and then moved over the target, so a failed write leaves an existing clip intact (PR #4900 review). `--dry-run` writes nothing and does not need FFmpeg. `--album` restricts to that album's direct photos; unknown id → `Album <id> not found.`, exit 1. FFmpeg disabled without `--dry-run` → `FFmpeg is required to extract motion photo videos (or use --dry-run).`, exit 1, before the scan. | Missing original or any per-photo error → `Log::warning` and `Failed: <id> (<title>): <reason>` on the console, counted as failed, loop continues; exit 1 when any failed. When the batch is full and some photos failed, the cursor line is followed by `N photos failed in this batch and would be skipped by that cursor: run it again with --after=<same value> (or without --after) to retry them first.` (PR #4900 review). Plain JPEGs stay candidates, so a re-run checks them again (no "checked" marker; the cursor bounds each run). | Command output only. | Q-100-04 |
 | FR-100-05 | Video URL for v3 grid tiles. | Each v8 view that renders photo thumbnails provides a `MotionUrlLoader` (`(photoIds: string[]) => Promise<void>`, Vue `provide`/`inject` key in `resources/js/v8/composables/photo/motionUrlLoader.ts`) wrapping its store's existing deduped details loader: `AlbumPanel.vue` → `AlbumState.loadPhotoDetails`, `Timeline.vue` → `TimelineState.loadPhotoDetailsV3`, `Search.vue` → `SearchState.loadPhotoDetailsV3`. `Flow.vue` renders its own cards, not these thumbnails, and the tag and favourites views use v2 `PhotoResource` payloads that already carry `live_photo_url`, so they provide none. The thumbnail calls it with its own id on `mouseenter` when `is_livephoto` and `live_photo_url === null`, on hover-capable devices only; the result lands in `live_photo_url` through `mergePhotoDetail()`. | No call when the URL is already set, the tile is not a live photo, or the device/motion gates of FR-100-03 fail. A view that provides no loader plays only tiles whose URL is already loaded. | Loader rejects or leaves the URL `null` → no playback for that hover, no toast; the next hover tries again (the store's dedupe makes a resolved id free). A request still in flight is reused when the pointer leaves and re-enters, because the stores mark an id resolved only once its response arrives (PR #4900 review). | None. | Q-100-07 |
-| FR-100-06 | Lightbox play/stop from the dock (v7 and v8). | In the main lightbox (v8: `PhotoPanel` → `PhotoBox` with `is-zoom-enabled`; v7: `PhotoPanel` → `PhotoBox` with `is-live-dock-enabled`) LivePhotosKit only shows the still: it is augmented with `showsNativeControls: false`, so its "LIVE" badge and hover playback are gone. `PhotoBox` registers `LivePhotoControls` (`{ toggle }`) in `PhotoState.live_photo_controls` and mirrors the playing state into `PhotoState.is_live_playing` through `resources/js/composables/photo/useLivePhotoToggle.ts`, with the same ownership rule as the zoom controls (Feature 078). `Dock.vue` shows a `DockButton` (v8 `lucide:circle-dot-dashed`, v7 PrimeIcons `pi-bullseye`; tooltip and `aria-label` `gallery.motion_photo`, `aria-pressed` = playing; `DockButton` is a `<button type="button">`, so it is keyboard-operable) first in the button row while controls are registered: white with the primary hover colour when idle, primary colour while playing. First click shows a muted, `loop`, `autoplay`, `playsinline` `<video>` of `live_photo_url` over the still (same box and size classes as the still, `object-contain`, `pointer-events-none`; the LivePhotosKit divs carry `isolate` so its z-indexed render layers stay below the video), so the motion loops without a gap until the next click removes it and the still shows again. The dock is shown to every viewer of a live photo, not only to editors: viewers without edit rights see the live button alone. | Flow (`LigtBox.vue`), Moderation and NSFW findings (v8), Flow and Moderation (v7) mount `PhotoBox` without that prop and keep the native LivePhotosKit controls. No button for photos that are not live photos or have no `live_photo_url`. Moving to another photo or closing the lightbox drops the controls; the next live photo starts stopped. Hidden with the rest of the dock during the slideshow. | Video `error` (e.g. HEVC in Firefox) → overlay removed, button back to idle, still visible, no toast. | None (frontend only). | Owner request 2026-10-31; LivePhotosKit playback was dropped from the dock path because its "full" style always ends (a restart on `ended` leaves a ~350 ms gap on the still), it played nothing in Firefox, and in Chromium it stalled at frame 0 on a Google clip without Apple timing metadata |
+| FR-100-06 | Lightbox play/stop from the dock (v7 and v8). | In the main lightbox (v8: `PhotoPanel` → `PhotoBox` with `is-zoom-enabled`; v7: `PhotoPanel` → `PhotoBox` with `is-live-dock-enabled`) LivePhotosKit only shows the still: it is augmented with `showsNativeControls: false`, so its "LIVE" badge and hover playback are gone. `PhotoBox` calls `resources/js/composables/photo/useLivePhotoToggle.ts`, which registers `LivePhotoControls` (`{ toggle }`) in `PhotoState.live_photo_controls` while the box shows a dock-controlled live photo, mirrors the playing state into `PhotoState.is_live_playing`, and releases both when the photo changes or the box unmounts, with the same ownership rule as the zoom controls (Feature 078). `Dock.vue` shows a `DockButton` (v8 `lucide:circle-dot-dashed`, v7 PrimeIcons `pi-bullseye`; tooltip and `aria-label` `gallery.motion_photo`, `aria-pressed` = playing; `DockButton` is a `<button type="button">`, so it is keyboard-operable, and every dock button carries a translated `aria-label`) first in the button row while controls are registered: white with the primary hover colour when idle, primary colour while playing. First click shows a muted, `loop`, `autoplay`, `playsinline` `<video>` of `live_photo_url` over the still (same box and size classes as the still, `object-contain`, `pointer-events-none`; the LivePhotosKit divs carry `isolate` so its z-indexed render layers stay below the video), so the motion loops without a gap until the next click removes it and the still shows again. The dock is shown to every viewer of a live photo, not only to editors: viewers without edit rights see the live button alone. | Flow (`LigtBox.vue`), Moderation and NSFW findings (v8), Flow and Moderation (v7) mount `PhotoBox` without that prop and keep the native LivePhotosKit controls. No button for photos that are not live photos or have no `live_photo_url`. Moving to another photo or closing the lightbox drops the controls; the next live photo starts stopped. Hidden with the rest of the dock during the slideshow. | Video `error` (e.g. HEVC in Firefox) → overlay removed, button back to idle, still visible, no toast. | None (frontend only). | Owner request 2026-10-31; LivePhotosKit playback was dropped from the dock path because its "full" style always ends (a restart on `ended` leaves a ~350 ms gap on the still), it played nothing in Firefox, and in Chromium it stalled at frame 0 on a Google clip without Apple timing metadata |
 
 ## Non-Functional Requirements
 
@@ -159,7 +159,7 @@ Provided by `lychee-org/php-exif` 1.5.0 (LycheeOrg/php-exif#83, ADR-100-01); Lyc
 | UI-100-01 | Motion badge | `precomputed.is_livephoto` → badge in the thumbnail badge row. |
 | UI-100-02 | Hover playback | FR-100-03 success path. |
 | UI-100-03 | Playback failed | Video error → back to UI-100-01. |
-| UI-100-04 | Lightbox live button | FR-100-06: idle (white) ↔ playing (primary colour). |
+| UI-100-04 | Lightbox live button | FR-100-06: idle (white, still visible) ↔ playing (primary colour, looping `<video>` overlay over the still). |
 
 ## Telemetry & Observability
 No new events. Extraction keeps the `photo.extract_google_motion_pictures` span. Locator failures log `Log::warning` with the file basename (no path); FFmpeg failures go through `Handler::reportSafely` as today.
@@ -191,7 +191,7 @@ ui_states:
   - { id: UI-100-01, description: Motion badge on live photo thumbnails }
   - { id: UI-100-02, description: Muted looping hover playback }
   - { id: UI-100-03, description: Playback failure falls back to the still }
-  - { id: UI-100-04, description: Lightbox dock live button toggles LivePhotosKit playback }
+  - { id: UI-100-04, description: Lightbox dock live button toggles a looping video overlay over the still }
 ```
 
 ## Appendix – Motion Photo 1.0 layout
diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md b/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
index 9c9f6a64129..5107c770ea0 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/tasks.md
@@ -151,6 +151,8 @@ _Last updated: 2026-10-31_
 - [x] T-100-28 – PR #4933 review: `DockButton` (v7 and v8) renders a `<button type="button">` instead of an `<a>` without `href`, so every dock button is focusable and works with Enter/Space; the live button carries `aria-label` (`gallery.motion_photo`) and `aria-pressed` (`is_live_playing`) (F-100-06, NFR-100-04).  
   _Verification commands:_ `npx vp check` on both `Dock.vue` and `DockButton.vue`, `npx vp run typecheck`.  
   _Notes:_ Tailwind preflight (imported by `app.css` and `app-v8.css`) resets the button chrome, so the dock looks unchanged.  
+- [x] T-100-29 – PR #4933 second review: every icon-only dock button (v7 and v8) gets a translated `aria-label` (highlight/unhighlight, album header, watermark, face scan, rotate, move, delete); new `gallery.photo.actions.rotate_ccw`/`rotate_cw` keys in the 23 locales; the hard-coded "Watermark" tooltip uses `gallery.album.hero.watermark`. Docs aligned: plan scope, composable ownership in FR-100-06 and I14, UI-100-04, knowledge-map lightbox summary (F-100-06, NFR-100-04).  
+  _Verification commands:_ `php artisan test --filter=LangTest`, `npx vp check` on both `Dock.vue`, `npx vp run typecheck`.  
 
 ## Notes / TODOs
 - 2026-10-17: local toolchain installed (PHP 8.4 + imagick, Composer, exiftool, FFmpeg, `vendor/`, `node_modules/`); `vp` is not global, run it as `npx vp …` (e.g. `npx vp check` (never `--fix`: it rewrites unrelated files), `npx vp run typecheck`, `npx vp test`).
diff --git a/docs/specs/4-architecture/knowledge-map.md b/docs/specs/4-architecture/knowledge-map.md
index ad2cae648ed..03999c7a47d 100644
--- a/docs/specs/4-architecture/knowledge-map.md
+++ b/docs/specs/4-architecture/knowledge-map.md
@@ -439,7 +439,7 @@ Detection: `lychee-org/php-exif` 1.4.0 maps XMP-GPano into `Exif` getters (`getP
 
 ### Google Motion Photos (Feature 100)
 Detection: `lychee-org/php-exif` 1.5.0 reads the motion photo itself: `Reader::read()` calls `PHPExif\MotionPhoto\MotionPhotoLocator::locate()` whenever the adapter returned no `MicroVideoOffset` (so every reader, exiftool, Imagick or Native, reports legacy and Motion Photo 1.0 files the same way); the locator walks the JPEG header to the standard XMP, reads `GCamera:MotionPhoto`/`MicroVideoOffset` and the `Container:Item` with `Item:Semantic="MotionPhoto"`, checks a declared length against an MP4 `ftyp` box, and otherwise scans after the primary image's EOI. `Extractor::createFromFile()` just copies `getMicroVideoOffset()` into `Extractor::$micro_video_offset` (bytes from end of file), so the unchanged pipes `ExtractGoogleMotionPictures` → `GoogleMotionPictureHandler` (FFmpeg: H.264 copied into `.mov` with `MOVFormat`, any other codec such as Pixel HEVC transcoded with `H264MOVFormat`, Q-100-09) → `PlaceGoogleMotionVideo` store it in `photos.live_photo_short_path`; `GoogleMotionPictureHandler::videoPathNextTo()` is shared with `lychee:extract_motion_photos` (backfill of JPEGs without a video, `--after`/`--album`/`--dry-run`, `--reencode` to redo stored Google clips, calls the php-exif locator directly). ADR-100-01.
-Grid: v8 `PhotoThumb.vue`/`PhotoThumbVirtual.vue` show a `ThumbBadge` (`lucide:smartphone`, `label` → `title`/`aria-label`) for `precomputed.is_livephoto` and play the clip on hover via `v8/composables/photo/useMotionHover.ts` (250 ms intent, `(hover: hover) and (pointer: fine)` and no reduced motion, `<video>` only after intent, fade-in on `playing`, removed on `error`). v3 tiles get `live_photo_url` on hover through `MOTION_URL_LOADER` (`v8/composables/photo/motionUrlLoader.ts`), provided by `AlbumPanel` (`AlbumState.loadPhotoDetails`), `Timeline.vue` and `Search.vue` (`loadPhotoDetailsV3`); tag and favourites views use v2 payloads that already carry the URL. Lightbox playback is the existing LivePhotosKit path.
+Grid: v8 `PhotoThumb.vue`/`PhotoThumbVirtual.vue` show a `ThumbBadge` (`lucide:smartphone`, `label` → `title`/`aria-label`) for `precomputed.is_livephoto` and play the clip on hover via `v8/composables/photo/useMotionHover.ts` (250 ms intent, `(hover: hover) and (pointer: fine)` and no reduced motion, `<video>` only after intent, fade-in on `playing`, removed on `error`). v3 tiles get `live_photo_url` on hover through `MOTION_URL_LOADER` (`v8/composables/photo/motionUrlLoader.ts`), provided by `AlbumPanel` (`AlbumState.loadPhotoDetails`), `Timeline.vue` and `Search.vue` (`loadPhotoDetailsV3`); tag and favourites views use v2 payloads that already carry the URL. Lightbox playback: the main v7/v8 lightbox plays through the dock (next line); Flow and Moderation use the existing LivePhotosKit path.
 Lightbox: in the main lightbox (v7 and v8) `PhotoBox.vue` keeps LivePhotosKit for the still only (`showsNativeControls: false`) and, while playing, lays a muted looping `<video>` of `live_photo_url` over it. The shared `composables/photo/useLivePhotoToggle.ts` registers `LivePhotoControls` (`PhotoState.live_photo_controls`, playing state mirrored in `is_live_playing`, ownership-checked like `zoom_controls`); `Dock.vue` shows the play/stop button (v8 `lucide:circle-dot-dashed`, v7 `pi-bullseye`), also to viewers without edit rights (`PhotoPanel.vue` passes `can-edit`) (FR-100-06). Flow and Moderation keep the native LivePhotosKit controls.
 
 ### Library Insights (Feature 085, v8 only)
diff --git a/lang/ar/gallery.php b/lang/ar/gallery.php
index fb1f4e2a474..533e5eeb1ca 100644
--- a/lang/ar/gallery.php
+++ b/lang/ar/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'بطاقة المشاركة',
             'show_sphere' => 'عرض ككرة',
             'show_flat' => 'عرض مسطح',
+            'rotate_ccw' => 'تدوير عكس عقارب الساعة',
+            'rotate_cw' => 'تدوير مع عقارب الساعة',
             'set_album_header' => 'تعيين كعنوان ألبوم',
             'move' => 'نقل',
             'delete' => 'حذف',
diff --git a/lang/bg/gallery.php b/lang/bg/gallery.php
index 16cf3716824..81f8db7e3e6 100644
--- a/lang/bg/gallery.php
+++ b/lang/bg/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Карта за споделяне',
             'show_sphere' => 'Покажи като сфера',
             'show_flat' => 'Покажи плоско',
+            'rotate_ccw' => 'Завъртане обратно на часовниковата стрелка',
+            'rotate_cw' => 'Завъртане по часовниковата стрелка',
             'set_album_header' => 'Задай като заглавка на албума',
             'move' => 'Премести',
             'delete' => 'Изтрий',
diff --git a/lang/cz/gallery.php b/lang/cz/gallery.php
index 926760283ea..f41b691a9ff 100644
--- a/lang/cz/gallery.php
+++ b/lang/cz/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Sdílecí karta',
             'show_sphere' => 'Zobrazit jako kouli',
             'show_flat' => 'Zobrazit plošně',
+            'rotate_ccw' => 'Otočit proti směru hodinových ručiček',
+            'rotate_cw' => 'Otočit po směru hodinových ručiček',
             'set_album_header' => 'Nastavit jako záhlaví alba',
             'move' => 'Přesunout',
             'delete' => 'Smazat',
diff --git a/lang/de/gallery.php b/lang/de/gallery.php
index 40d06362121..4bd2d6d4955 100644
--- a/lang/de/gallery.php
+++ b/lang/de/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Fotokarte teilen',
             'show_sphere' => 'Als Kugel anzeigen',
             'show_flat' => 'Flach anzeigen',
+            'rotate_ccw' => 'Gegen den Uhrzeigersinn drehen',
+            'rotate_cw' => 'Im Uhrzeigersinn drehen',
             'set_album_header' => 'Als Album-Header festlegen',
             'move' => 'Verschieben',
             'delete' => 'Löschen',
diff --git a/lang/el/gallery.php b/lang/el/gallery.php
index 1152c4bf88d..dcf1ac61214 100644
--- a/lang/el/gallery.php
+++ b/lang/el/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Κάρτα κοινής χρήσης',
             'show_sphere' => 'Εμφάνιση ως σφαίρα',
             'show_flat' => 'Επίπεδη εμφάνιση',
+            'rotate_ccw' => 'Περιστροφή αριστερόστροφα',
+            'rotate_cw' => 'Περιστροφή δεξιόστροφα',
             'set_album_header' => 'Ορισμός ως κεφαλίδα άλμπουμ',
             'move' => 'Μετακίνηση',
             'delete' => 'Διαγραφή',
diff --git a/lang/en/gallery.php b/lang/en/gallery.php
index 9e7dd5bc8f5..1b956a72dec 100644
--- a/lang/en/gallery.php
+++ b/lang/en/gallery.php
@@ -260,6 +260,8 @@
             'share_card' => 'Share Card',
             'show_sphere' => 'Show as sphere',
             'show_flat' => 'Show flat',
+            'rotate_ccw' => 'Rotate counterclockwise',
+            'rotate_cw' => 'Rotate clockwise',
             'set_album_header' => 'Set as album header',
             'move' => 'Move',
             'delete' => 'Delete',
diff --git a/lang/es/gallery.php b/lang/es/gallery.php
index 5fa860efe20..c2e3c31ab83 100644
--- a/lang/es/gallery.php
+++ b/lang/es/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Tarjeta para compartir',
             'show_sphere' => 'Mostrar como esfera',
             'show_flat' => 'Mostrar plana',
+            'rotate_ccw' => 'Girar en sentido antihorario',
+            'rotate_cw' => 'Girar en sentido horario',
             'set_album_header' => 'Establecer como encabezado de álbum',
             'move' => 'Mover',
             'delete' => 'Borrar',
diff --git a/lang/fa/gallery.php b/lang/fa/gallery.php
index f495d01da35..62fa1c713db 100644
--- a/lang/fa/gallery.php
+++ b/lang/fa/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'کارت اشتراک‌گذاری',
             'show_sphere' => 'نمایش به‌صورت کروی',
             'show_flat' => 'نمایش تخت',
+            'rotate_ccw' => 'چرخش پادساعتگرد',
+            'rotate_cw' => 'چرخش ساعتگرد',
             'set_album_header' => 'تنظیم به عنوان هدر آلبوم',
             'move' => 'انتقال',
             'delete' => 'حذف',
diff --git a/lang/fr/gallery.php b/lang/fr/gallery.php
index 127c85695a6..e9ffc52f334 100644
--- a/lang/fr/gallery.php
+++ b/lang/fr/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Carte de partage',
             'show_sphere' => 'Afficher en sphère',
             'show_flat' => 'Afficher à plat',
+            'rotate_ccw' => 'Pivoter dans le sens antihoraire',
+            'rotate_cw' => 'Pivoter dans le sens horaire',
             'set_album_header' => 'Définir comme en-tête d’album',
             'move' => 'Déplacer',
             'delete' => 'Supprimer',
diff --git a/lang/hu/gallery.php b/lang/hu/gallery.php
index 384c6f686b4..31b03e65c51 100644
--- a/lang/hu/gallery.php
+++ b/lang/hu/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Megosztókártya',
             'show_sphere' => 'Megjelenítés gömbként',
             'show_flat' => 'Sík megjelenítés',
+            'rotate_ccw' => 'Forgatás az óramutató járásával ellentétesen',
+            'rotate_cw' => 'Forgatás az óramutató járásával megegyezően',
             'set_album_header' => 'Beállítás album fejléceként',
             'move' => 'Áthelyezés',
             'delete' => 'Törlés',
diff --git a/lang/it/gallery.php b/lang/it/gallery.php
index 807fffa48e7..1c412509829 100644
--- a/lang/it/gallery.php
+++ b/lang/it/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Scheda di condivisione',
             'show_sphere' => 'Mostra come sfera',
             'show_flat' => 'Mostra piatta',
+            'rotate_ccw' => 'Ruota in senso antiorario',
+            'rotate_cw' => 'Ruota in senso orario',
             'set_album_header' => 'Imposta come intestazione dell\'album',
             'move' => 'Sposta',
             'delete' => 'Elimina',
diff --git a/lang/ja/gallery.php b/lang/ja/gallery.php
index 739469afebb..0f6711a1217 100644
--- a/lang/ja/gallery.php
+++ b/lang/ja/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => '共有カード',
             'show_sphere' => '球面で表示',
             'show_flat' => '平面で表示',
+            'rotate_ccw' => '反時計回りに回転',
+            'rotate_cw' => '時計回りに回転',
             'set_album_header' => 'アルバムヘッダーに設定',
             'move' => '移動',
             'delete' => '削除',
diff --git a/lang/nl/gallery.php b/lang/nl/gallery.php
index 9e13b5ae5aa..3cd65dcf516 100644
--- a/lang/nl/gallery.php
+++ b/lang/nl/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Deelkaart',
             'show_sphere' => 'Als bol tonen',
             'show_flat' => 'Plat tonen',
+            'rotate_ccw' => 'Linksom draaien',
+            'rotate_cw' => 'Rechtsom draaien',
             'set_album_header' => 'Instellen als albumkop',
             'move' => 'Verplaatsen',
             'delete' => 'Verwijderen',
diff --git a/lang/no/gallery.php b/lang/no/gallery.php
index 1015e955912..b67c8a4e6b7 100644
--- a/lang/no/gallery.php
+++ b/lang/no/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Delekort',
             'show_sphere' => 'Vis som sfære',
             'show_flat' => 'Vis flatt',
+            'rotate_ccw' => 'Roter mot klokken',
+            'rotate_cw' => 'Roter med klokken',
             'set_album_header' => 'Angi som albumoverskrift',
             'move' => 'Flytt',
             'delete' => 'Slett',
diff --git a/lang/pl/gallery.php b/lang/pl/gallery.php
index e4fdf806af2..256893636f4 100644
--- a/lang/pl/gallery.php
+++ b/lang/pl/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Karta udostępniania',
             'show_sphere' => 'Pokaż jako sferę',
             'show_flat' => 'Pokaż płasko',
+            'rotate_ccw' => 'Obróć w lewo',
+            'rotate_cw' => 'Obróć w prawo',
             'set_album_header' => 'Ustaw jako nagłówek albumu',
             'move' => 'Przenieś',
             'delete' => 'Usuń',
diff --git a/lang/pt/gallery.php b/lang/pt/gallery.php
index 55131005700..f526fdd4b04 100644
--- a/lang/pt/gallery.php
+++ b/lang/pt/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Cartão de partilha',
             'show_sphere' => 'Mostrar como esfera',
             'show_flat' => 'Mostrar plana',
+            'rotate_ccw' => 'Rodar no sentido anti-horário',
+            'rotate_cw' => 'Rodar no sentido horário',
             'set_album_header' => 'Definir como cabeçalho do álbum',
             'move' => 'Mover',
             'delete' => 'Eliminar',
diff --git a/lang/ru/gallery.php b/lang/ru/gallery.php
index 8b34deea0ae..5c198c9bc57 100644
--- a/lang/ru/gallery.php
+++ b/lang/ru/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Поделиться карточкой',
             'show_sphere' => 'Показать как сферу',
             'show_flat' => 'Показать плоско',
+            'rotate_ccw' => 'Повернуть против часовой стрелки',
+            'rotate_cw' => 'Повернуть по часовой стрелке',
             'set_album_header' => 'Установить как заголовок альбома',
             'move' => 'Переместить',
             'delete' => 'Удалить',
diff --git a/lang/sk/gallery.php b/lang/sk/gallery.php
index ec80caf4698..fad6c075c1f 100644
--- a/lang/sk/gallery.php
+++ b/lang/sk/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Zdieľacia karta',
             'show_sphere' => 'Zobraziť ako guľu',
             'show_flat' => 'Zobraziť plocho',
+            'rotate_ccw' => 'Otočiť proti smeru hodinových ručičiek',
+            'rotate_cw' => 'Otočiť v smere hodinových ručičiek',
             'set_album_header' => 'Nastaviť ako hlavičku albumu',
             'move' => 'Presunúť',
             'delete' => 'Odstrániť',
diff --git a/lang/sv/gallery.php b/lang/sv/gallery.php
index 9b3c32c2e1c..1be30598f24 100644
--- a/lang/sv/gallery.php
+++ b/lang/sv/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Delningskort',
             'show_sphere' => 'Visa som sfär',
             'show_flat' => 'Visa platt',
+            'rotate_ccw' => 'Rotera moturs',
+            'rotate_cw' => 'Rotera medurs',
             'set_album_header' => 'Ange som albumets sidhuvud',
             'move' => 'Flytta',
             'delete' => 'Ta bort',
diff --git a/lang/tr/gallery.php b/lang/tr/gallery.php
index e1c8ff6412b..1ebf9f4aeb8 100644
--- a/lang/tr/gallery.php
+++ b/lang/tr/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Paylaşım Kartı',
             'show_sphere' => 'Küre olarak göster',
             'show_flat' => 'Düz göster',
+            'rotate_ccw' => 'Saat yönünün tersine döndür',
+            'rotate_cw' => 'Saat yönünde döndür',
             'set_album_header' => 'Albüm başlık görseli olarak ayarla',
             'move' => 'Taşı',
             'delete' => 'Sil',
diff --git a/lang/vi/gallery.php b/lang/vi/gallery.php
index 66ac9e1d1c1..84f85c127c2 100644
--- a/lang/vi/gallery.php
+++ b/lang/vi/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => 'Thẻ chia sẻ',
             'show_sphere' => 'Hiển thị dạng cầu',
             'show_flat' => 'Hiển thị phẳng',
+            'rotate_ccw' => 'Xoay ngược chiều kim đồng hồ',
+            'rotate_cw' => 'Xoay theo chiều kim đồng hồ',
             'set_album_header' => 'Đặt làm ảnh đầu trang album',
             'move' => 'Di chuyển',
             'delete' => 'Xóa',
diff --git a/lang/zh_CN/gallery.php b/lang/zh_CN/gallery.php
index 789e5d319a4..bf4a4b8d18a 100644
--- a/lang/zh_CN/gallery.php
+++ b/lang/zh_CN/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => '分享卡片',
             'show_sphere' => '以球面显示',
             'show_flat' => '平面显示',
+            'rotate_ccw' => '逆时针旋转',
+            'rotate_cw' => '顺时针旋转',
             'set_album_header' => '设为相册页眉图片',
             'move' => '移动',
             'delete' => '删除',
diff --git a/lang/zh_TW/gallery.php b/lang/zh_TW/gallery.php
index 85f69004aef..fd9e7f5fa4f 100644
--- a/lang/zh_TW/gallery.php
+++ b/lang/zh_TW/gallery.php
@@ -259,6 +259,8 @@
             'share_card' => '分享卡片',
             'show_sphere' => '以球形顯示',
             'show_flat' => '以平面顯示',
+            'rotate_ccw' => '逆時針旋轉',
+            'rotate_cw' => '順時針旋轉',
             'set_album_header' => '設為相簿頁首',
             'move' => '移動',
             'delete' => '刪除',
diff --git a/resources/js/v7/components/gallery/photoModule/Dock.vue b/resources/js/v7/components/gallery/photoModule/Dock.vue
index b67e7d162fd..9dbf3fd7677 100644
--- a/resources/js/v7/components/gallery/photoModule/Dock.vue
+++ b/resources/js/v7/components/gallery/photoModule/Dock.vue
@@ -28,6 +28,7 @@
 				<DockButton
 					v-if="photoStore.photo.is_highlighted"
 					v-tooltip.bottom="$t('gallery.photo.actions.unhighlight')"
+					:aria-label="$t('gallery.photo.actions.unhighlight')"
 					pi="flag-fill"
 					class="text-yellow-500 lg:hover:text-yellow-100"
 					@click="emits('toggleHighlight')"
@@ -35,12 +36,14 @@
 				<DockButton
 					v-else
 					v-tooltip.bottom="$t('gallery.photo.actions.highlight')"
+					:aria-label="$t('gallery.photo.actions.highlight')"
 					pi="flag"
 					class="text-white lg:hover:text-yellow-500"
 					@click="emits('toggleHighlight')"
 				/>
 				<DockButton
 					v-tooltip.bottom="$t('gallery.photo.actions.set_album_header')"
+					:aria-label="$t('gallery.photo.actions.set_album_header')"
 					v-if="!isTimeline"
 					pi="image"
 					class="lg:hover:text-primary-500 text-white"
@@ -48,7 +51,8 @@
 				/>
 				<DockButton
 					v-if="isWatermarkerEnabled"
-					v-tooltip.bottom="'Watermark'"
+					v-tooltip.bottom="$t('gallery.album.hero.watermark')"
+					:aria-label="$t('gallery.album.hero.watermark')"
 					pi="barcode"
 					class="lg:hover:text-primary-500 text-white"
 					@click="watermark"
@@ -56,22 +60,35 @@
 				<DockButton
 					v-if="isFaceRecognitionEnabled"
 					v-tooltip.bottom="$t('people.scan_faces')"
+					:aria-label="$t('people.scan_faces')"
 					pi="face-smile"
 					class="lg:hover:text-primary-500 text-white"
 					@click="scanFaces"
 				/>
 				<template v-if="lycheeStore.can_rotate">
-					<DockButton icon="counterclockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCCW')" />
-					<DockButton icon="clockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCW')" />
+					<DockButton
+						icon="counterclockwise"
+						:aria-label="$t('gallery.photo.actions.rotate_ccw')"
+						class="fill-white lg:hover:fill-primary-500"
+						@click="emits('rotatePhotoCCW')"
+					/>
+					<DockButton
+						icon="clockwise"
+						:aria-label="$t('gallery.photo.actions.rotate_cw')"
+						class="fill-white lg:hover:fill-primary-500"
+						@click="emits('rotatePhotoCW')"
+					/>
 				</template>
 				<DockButton
 					v-tooltip.bottom="$t('gallery.photo.actions.move')"
+					:aria-label="$t('gallery.photo.actions.move')"
 					pi="folder"
 					class="lg:hover:text-primary-500 text-white"
 					@click="emits('toggleMove')"
 				/>
 				<DockButton
 					v-tooltip.bottom="$t('gallery.photo.actions.delete')"
+					:aria-label="$t('gallery.photo.actions.delete')"
 					icon="trash"
 					class="fill-red-600 lg:fill-white lg:hover:fill-red-600"
 					@click="emits('toggleDelete')"
diff --git a/resources/js/v8/components/gallery/photoModule/Dock.vue b/resources/js/v8/components/gallery/photoModule/Dock.vue
index 11440de4931..17770d43304 100644
--- a/resources/js/v8/components/gallery/photoModule/Dock.vue
+++ b/resources/js/v8/components/gallery/photoModule/Dock.vue
@@ -29,31 +29,72 @@
 				<UTooltip v-if="photoStore.photo.is_highlighted" :text="$t('gallery.photo.actions.unhighlight')">
 					<DockButton
 						:pi="`lucide:flag ${FILL_OVERRIDE_CLASS}`"
+						:aria-label="$t('gallery.photo.actions.unhighlight')"
 						class="text-yellow-500 lg:hover:text-yellow-100"
 						@click="emits('toggleHighlight')"
 					/>
 				</UTooltip>
 				<UTooltip v-else :text="$t('gallery.photo.actions.highlight')">
-					<DockButton pi="lucide:flag" class="text-white lg:hover:text-yellow-500" @click="emits('toggleHighlight')" />
+					<DockButton
+						pi="lucide:flag"
+						:aria-label="$t('gallery.photo.actions.highlight')"
+						class="text-white lg:hover:text-yellow-500"
+						@click="emits('toggleHighlight')"
+					/>
 				</UTooltip>
 				<UTooltip v-if="!isTimeline" :text="$t('gallery.photo.actions.set_album_header')">
-					<DockButton pi="lucide:image" class="lg:hover:text-primary-500 text-white" @click="emits('setAlbumHeader')" />
+					<DockButton
+						pi="lucide:image"
+						:aria-label="$t('gallery.photo.actions.set_album_header')"
+						class="lg:hover:text-primary-500 text-white"
+						@click="emits('setAlbumHeader')"
+					/>
 				</UTooltip>
-				<UTooltip v-if="isWatermarkerEnabled" text="Watermark">
-					<DockButton pi="lucide:barcode" class="lg:hover:text-primary-500 text-white" @click="watermark" />
+				<UTooltip v-if="isWatermarkerEnabled" :text="$t('gallery.album.hero.watermark')">
+					<DockButton
+						pi="lucide:barcode"
+						:aria-label="$t('gallery.album.hero.watermark')"
+						class="lg:hover:text-primary-500 text-white"
+						@click="watermark"
+					/>
 				</UTooltip>
 				<UTooltip v-if="isFaceRecognitionEnabled" :text="$t('people.scan_faces')">
-					<DockButton pi="lucide:smile" class="lg:hover:text-primary-500 text-white" @click="scanFaces" />
+					<DockButton
+						pi="lucide:smile"
+						:aria-label="$t('people.scan_faces')"
+						class="lg:hover:text-primary-500 text-white"
+						@click="scanFaces"
+					/>
 				</UTooltip>
 				<template v-if="lycheeStore.can_rotate && !photoStore.photo.precomputed.is_360">
-					<DockButton icon="counterclockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCCW')" />
-					<DockButton icon="clockwise" class="fill-white lg:hover:fill-primary-500" @click="emits('rotatePhotoCW')" />
+					<DockButton
+						icon="counterclockwise"
+						:aria-label="$t('gallery.photo.actions.rotate_ccw')"
+						class="fill-white lg:hover:fill-primary-500"
+						@click="emits('rotatePhotoCCW')"
+					/>
+					<DockButton
+						icon="clockwise"
+						:aria-label="$t('gallery.photo.actions.rotate_cw')"
+						class="fill-white lg:hover:fill-primary-500"
+						@click="emits('rotatePhotoCW')"
+					/>
 				</template>
 				<UTooltip v-if="albumStore.rights?.can_move_content" :text="$t('gallery.photo.actions.move')">
-					<DockButton pi="lucide:folder" class="lg:hover:text-primary-500 text-white" @click="emits('toggleMove')" />
+					<DockButton
+						pi="lucide:folder"
+						:aria-label="$t('gallery.photo.actions.move')"
+						class="lg:hover:text-primary-500 text-white"
+						@click="emits('toggleMove')"
+					/>
 				</UTooltip>
 				<UTooltip :text="$t('gallery.photo.actions.delete')">
-					<DockButton icon="trash" class="fill-red-600 lg:fill-white lg:hover:fill-red-600" @click="emits('toggleDelete')" />
+					<DockButton
+						icon="trash"
+						:aria-label="$t('gallery.photo.actions.delete')"
+						class="fill-red-600 lg:fill-white lg:hover:fill-red-600"
+						@click="emits('toggleDelete')"
+					/>
 				</UTooltip>
 			</template>
 		</span>

From 4e7a985e0bd8f394d031ec3591b0b1a994f2383e Mon Sep 17 00:00:00 2001
From: Matt LaPaglia <mlapaglia@gmail.com>
Date: Sat, 31 Oct 2026 12:33:06 -0400
Subject: [PATCH 5/5] docs(spec): state when the dock is hidden in FR-100-06

The dock stays hidden while photo edit is open and, in v8, while the photo is zoomed.

Spec impact: FR-100-06 visibility wording
---
 .../4-architecture/features/100-google-motion-photos/spec.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
index d7d41508996..2b679d529c2 100644
--- a/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
+++ b/docs/specs/4-architecture/features/100-google-motion-photos/spec.md
@@ -40,7 +40,7 @@ Affected layers: metadata extraction (`app/Metadata`), one artisan command, v8 g
 | FR-100-03 | Grid motion playback (v8, every live photo). | `PhotoThumb.vue` and `PhotoThumbVirtual.vue`: a motion badge (`ThumbBadge` with `lucide:smartphone` on `bg-purple-700`, the icon and colour of the list-view "Live" label, FR-014-06; its new `label` prop sets `title` and `aria-label` to `gallery.motion_photo`) in the badge row whenever `precomputed.is_livephoto`. On devices matching `(hover: hover) and (pointer: fine)`, after 250 ms of continuous hover a muted, looping, `playsinline` `<video>` fades in over the thumbnail (`object-cover`, same box) and plays `live_photo_url`; on `mouseleave` it pauses, its `src` is removed and the still shows again. When `live_photo_url` is still `null` at `mouseenter`, the URL is fetched per FR-100-05; playback starts once both the 250 ms have passed and the URL is set, and never if the pointer left first. The overlay covers the still, so the Ken Burns hover zoom (when enabled) keeps running unseen underneath. | Only tiles with `is_livephoto === true`; nothing when `prefers-reduced-motion: reduce` (badge only); nothing on touch-only devices (badge only, tap opens the lightbox as today). | Video `error` event → overlay removed, still stays, no toast, no retry during that hover. | None (frontend only). | Owner request, Q-100-01, Q-100-03, Q-100-05 |
 | FR-100-04 | Backfill already-imported photos. | `php artisan lychee:extract_motion_photos {limit=100} {tm=600} {--after=} {--album=} {--dry-run} {--reencode}` walks photos with `type = 'image/jpeg'` and `live_photo_short_path IS NULL`, ordered by id with an `--after` cursor (as `lychee:detect_360`). For each it uses the original in place when hosted locally, or a downloaded temporary copy otherwise (as `SizeVariantDefaultFactory`), runs `PHPExif\MotionPhoto\MotionPhotoLocator::locate()` on its path, and when the length > 0 extracts via `GoogleMotionPictureHandler` and writes `GoogleMotionPictureHandler::videoPathNextTo(<original path>)` on the original's disk (the helper the upload pipe `PlaceGoogleMotionVideo` now shares), then sets `live_photo_short_path` and dispatches `PhotoSaved` for the extracted ids. Output: `Motion photo: <id> (<title>)` per hit, then `Checked N photos: X motion photos extracted, Y failed.` (`found (dry run)` with `--dry-run`), and `More photos may remain: continue with --after=<last id>` when `N = limit`; nothing to scan → `No photos require motion photo extraction.` | `--reencode` switches the candidates to Google motion photos that already have a video (`live_photo_short_path` set, `live_photo_content_id` null) and re-extracts each clip from the original into its current path, transcoding as in FR-100-02; the summary says `re-extracted`. Every clip the command writes is staged at `<target>.part` on the same disk and then moved over the target, so a failed write leaves an existing clip intact (PR #4900 review). `--dry-run` writes nothing and does not need FFmpeg. `--album` restricts to that album's direct photos; unknown id → `Album <id> not found.`, exit 1. FFmpeg disabled without `--dry-run` → `FFmpeg is required to extract motion photo videos (or use --dry-run).`, exit 1, before the scan. | Missing original or any per-photo error → `Log::warning` and `Failed: <id> (<title>): <reason>` on the console, counted as failed, loop continues; exit 1 when any failed. When the batch is full and some photos failed, the cursor line is followed by `N photos failed in this batch and would be skipped by that cursor: run it again with --after=<same value> (or without --after) to retry them first.` (PR #4900 review). Plain JPEGs stay candidates, so a re-run checks them again (no "checked" marker; the cursor bounds each run). | Command output only. | Q-100-04 |
 | FR-100-05 | Video URL for v3 grid tiles. | Each v8 view that renders photo thumbnails provides a `MotionUrlLoader` (`(photoIds: string[]) => Promise<void>`, Vue `provide`/`inject` key in `resources/js/v8/composables/photo/motionUrlLoader.ts`) wrapping its store's existing deduped details loader: `AlbumPanel.vue` → `AlbumState.loadPhotoDetails`, `Timeline.vue` → `TimelineState.loadPhotoDetailsV3`, `Search.vue` → `SearchState.loadPhotoDetailsV3`. `Flow.vue` renders its own cards, not these thumbnails, and the tag and favourites views use v2 `PhotoResource` payloads that already carry `live_photo_url`, so they provide none. The thumbnail calls it with its own id on `mouseenter` when `is_livephoto` and `live_photo_url === null`, on hover-capable devices only; the result lands in `live_photo_url` through `mergePhotoDetail()`. | No call when the URL is already set, the tile is not a live photo, or the device/motion gates of FR-100-03 fail. A view that provides no loader plays only tiles whose URL is already loaded. | Loader rejects or leaves the URL `null` → no playback for that hover, no toast; the next hover tries again (the store's dedupe makes a resolved id free). A request still in flight is reused when the pointer leaves and re-enters, because the stores mark an id resolved only once its response arrives (PR #4900 review). | None. | Q-100-07 |
-| FR-100-06 | Lightbox play/stop from the dock (v7 and v8). | In the main lightbox (v8: `PhotoPanel` → `PhotoBox` with `is-zoom-enabled`; v7: `PhotoPanel` → `PhotoBox` with `is-live-dock-enabled`) LivePhotosKit only shows the still: it is augmented with `showsNativeControls: false`, so its "LIVE" badge and hover playback are gone. `PhotoBox` calls `resources/js/composables/photo/useLivePhotoToggle.ts`, which registers `LivePhotoControls` (`{ toggle }`) in `PhotoState.live_photo_controls` while the box shows a dock-controlled live photo, mirrors the playing state into `PhotoState.is_live_playing`, and releases both when the photo changes or the box unmounts, with the same ownership rule as the zoom controls (Feature 078). `Dock.vue` shows a `DockButton` (v8 `lucide:circle-dot-dashed`, v7 PrimeIcons `pi-bullseye`; tooltip and `aria-label` `gallery.motion_photo`, `aria-pressed` = playing; `DockButton` is a `<button type="button">`, so it is keyboard-operable, and every dock button carries a translated `aria-label`) first in the button row while controls are registered: white with the primary hover colour when idle, primary colour while playing. First click shows a muted, `loop`, `autoplay`, `playsinline` `<video>` of `live_photo_url` over the still (same box and size classes as the still, `object-contain`, `pointer-events-none`; the LivePhotosKit divs carry `isolate` so its z-indexed render layers stay below the video), so the motion loops without a gap until the next click removes it and the still shows again. The dock is shown to every viewer of a live photo, not only to editors: viewers without edit rights see the live button alone. | Flow (`LigtBox.vue`), Moderation and NSFW findings (v8), Flow and Moderation (v7) mount `PhotoBox` without that prop and keep the native LivePhotosKit controls. No button for photos that are not live photos or have no `live_photo_url`. Moving to another photo or closing the lightbox drops the controls; the next live photo starts stopped. Hidden with the rest of the dock during the slideshow. | Video `error` (e.g. HEVC in Firefox) → overlay removed, button back to idle, still visible, no toast. | None (frontend only). | Owner request 2026-10-31; LivePhotosKit playback was dropped from the dock path because its "full" style always ends (a restart on `ended` leaves a ~350 ms gap on the still), it played nothing in Firefox, and in Chromium it stalled at frame 0 on a Google clip without Apple timing metadata |
+| FR-100-06 | Lightbox play/stop from the dock (v7 and v8). | In the main lightbox (v8: `PhotoPanel` → `PhotoBox` with `is-zoom-enabled`; v7: `PhotoPanel` → `PhotoBox` with `is-live-dock-enabled`) LivePhotosKit only shows the still: it is augmented with `showsNativeControls: false`, so its "LIVE" badge and hover playback are gone. `PhotoBox` calls `resources/js/composables/photo/useLivePhotoToggle.ts`, which registers `LivePhotoControls` (`{ toggle }`) in `PhotoState.live_photo_controls` while the box shows a dock-controlled live photo, mirrors the playing state into `PhotoState.is_live_playing`, and releases both when the photo changes or the box unmounts, with the same ownership rule as the zoom controls (Feature 078). `Dock.vue` shows a `DockButton` (v8 `lucide:circle-dot-dashed`, v7 PrimeIcons `pi-bullseye`; tooltip and `aria-label` `gallery.motion_photo`, `aria-pressed` = playing; `DockButton` is a `<button type="button">`, so it is keyboard-operable, and every dock button carries a translated `aria-label`) first in the button row while controls are registered: white with the primary hover colour when idle, primary colour while playing. First click shows a muted, `loop`, `autoplay`, `playsinline` `<video>` of `live_photo_url` over the still (same box and size classes as the still, `object-contain`, `pointer-events-none`; the LivePhotosKit divs carry `isolate` so its z-indexed render layers stay below the video), so the motion loops without a gap until the next click removes it and the still shows again. The dock is shown to every viewer of a live photo, not only to editors: viewers without edit rights see the live button alone. Visibility is otherwise unchanged: the dock is hidden while photo edit is open (v7 and v8) and, in v8, while the photo is zoomed (live photos are not zoomable, Feature 078). | Flow (`LigtBox.vue`), Moderation and NSFW findings (v8), Flow and Moderation (v7) mount `PhotoBox` without that prop and keep the native LivePhotosKit controls. No button for photos that are not live photos or have no `live_photo_url`. Moving to another photo or closing the lightbox drops the controls; the next live photo starts stopped. Hidden with the rest of the dock during the slideshow. | Video `error` (e.g. HEVC in Firefox) → overlay removed, button back to idle, still visible, no toast. | None (frontend only). | Owner request 2026-10-31; LivePhotosKit playback was dropped from the dock path because its "full" style always ends (a restart on `ended` leaves a ~350 ms gap on the still), it played nothing in Firefox, and in Chromium it stalled at frame 0 on a Google clip without Apple timing metadata |
 
 ## Non-Functional Requirements