Coach reviews: in-player capture strip, draggable overlay, timeline UI
Capture strip - Twin of the point-capture strip, embedded inside #ytpWrap. Two time slots (Start + optional End) with the scrubber driving whichever is "active". Editable mm:ss inputs, zoom (1x/5x/20x), inline note + coach name + emoji chip picker. Cancel / Save on the right; Delete in edit mode. - ▶ preview button plays Start → End and auto-pauses at End; click again to stop early. Playback uses the live overlay so previewing shows what the viewer will see. - Removed the #reviewModal popup; openAddReviewModal(), setReviewEmoji(), saveReview() and the reviewForm submit binding are gone. Live-preview overlay + drag-to-position - As the user types, the coach-note overlay updates on the video in real time. In capture mode the overlay is grab-able and draggable to any spot over the video (mouse + touch), with a red dashed outline + "↕ drag me" hint. - Overlay position is stored as normalized 0..1 CENTER coords of the video wrap and applied via `left: X%; top: Y%; transform: translate(-50%,-50%)` so the overlay stays at the same relative spot on any resize / fullscreen. - Font-size, padding and border-radius scale with the player width via CSS container queries (`container-type: inline-size` on #ytpWrap + `clamp(...cqi)`), so the note grows/shrinks proportionally. - Draggable overlay lives above the strip (z-index 70 vs 60) so it can be dropped anywhere including over the strip. Persistence (schema change) - Migration 2026_08_08_000001_add_position_to_coach_reviews: adds nullable decimal(6,4) position_x / position_y to coach_reviews. - CoachReview fillable + casts updated. store/updateReview validate position_x / position_y as numeric between 0 and 1 and persist them. - showCoachNoteOverlay(text, pos) applies the saved position on playback. Cards: timeline design (Option B from the mockup) - Vertical spine with red dots on the left; each review is a chapter-style time label above a subtle card. Card body: emoji as the leading indicator, note text, then coach name + tools (▶⏳ / ✏️ / 🗑). - ▶⏳ = playReviewSlowmo(id): plays Start → End once at 1×, then loops back and plays again at 0.5×, then pauses and hides the overlay. Only rendered when the review has an end_time > start_time. - Card body still clickable for the classic "jump-and-play-once" behaviour. - Fixes a latent bug where the primary Save button stayed disabled after a successful save, silently swallowing the next click. Both the review and point capture strips now re-enable the button in their cancel handlers. Also - Design mockup file at public/coach-review-mockups.html shows the four candidate layouts side by side (kept for future design iterations). Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
1 parent
057ce87564
commit
716693a74f
6 files changed
+1387
-263
No files matched your search
@@ -207,6 +207,8 @@ class MatchEventController extends Controller
|
||||
'note' => 'required|string|max:1000',
|
||||
'coach_name' => 'required|string|max:100',
|
||||
'emoji' => 'nullable|string|max:10',
|
||||
'position_x' => 'nullable|numeric|between:0,1',
|
||||
'position_y' => 'nullable|numeric|between:0,1',
|
||||
]);
|
||||
|
||||
// Check if user owns the video
|
||||
@@ -222,6 +224,8 @@ class MatchEventController extends Controller
|
||||
'note' => $request->note,
|
||||
'coach_name' => $request->coach_name,
|
||||
'emoji' => $request->emoji ?? '🔥',
|
||||
'position_x' => $request->position_x,
|
||||
'position_y' => $request->position_y,
|
||||
]);
|
||||
|
||||
return response()->json([
|
||||
@@ -239,6 +243,8 @@ class MatchEventController extends Controller
|
||||
'note' => 'required|string|max:1000',
|
||||
'coach_name' => 'required|string|max:100',
|
||||
'emoji' => 'nullable|string|max:10',
|
||||
'position_x' => 'nullable|numeric|between:0,1',
|
||||
'position_y' => 'nullable|numeric|between:0,1',
|
||||
]);
|
||||
|
||||
// Check if user owns the video
|
||||
@@ -252,6 +258,8 @@ class MatchEventController extends Controller
|
||||
'note' => $request->note,
|
||||
'coach_name' => $request->coach_name,
|
||||
'emoji' => $request->emoji,
|
||||
'position_x' => $request->position_x,
|
||||
'position_y' => $request->position_y,
|
||||
]);
|
||||
|
||||
return response()->json([
|
||||
|
||||
Reference in new issue
Block a user