ui(player): drop native controls, branded camera-pulse loader

User feedback (with three reproduction screenshots): the live-feed
tiles look "ugly" during the connect window — refreshing the dashboard
shows a generic browser spinner stacked over the default HTML5 video
control bar (play/pause, scrubber, 0:00/0:00, mute, fullscreen icons),
which then keeps showing during steady-state playback too.

Two-line root cause:

  1. <video controls /> renders the browser's default control bar.
     None of those controls do anything useful here — every player is
     `muted`, live streams aren't seekable, autoplay starts on
     MANIFEST_PARSED so play/pause is moot, and the dedicated
     Fullscreen button beneath the video already replaces the native
     fullscreen icon. Pure visual noise.

  2. .loading-spinner is the generic ring used everywhere (auth pages,
     empty states, settings). It's correct but unbranded — it says
     "something is loading" but not "this product is loading".

Changes:

  - HlsPlayer.jsx: drop the `controls` attribute. Video element is now
    chromeless. The custom Fullscreen button below the video stays
    in place; it was already wired to video.requestFullscreen().

  - HlsPlayer.jsx: replace the generic .loading-spinner div with an
    inline SVG camera icon scoped to .hls-player-loading. Kept the
    "Connecting to stream..." text underneath. SVG is the standard
    feather-icons-style camera (rect + chevron); no external dep.

  - index.css: add .hls-player-loading .camera-pulse (56×56, accent-
    green, soft glow) plus a 1.6s opacity+scale pulse keyframe. The
    rule is scoped under .hls-player-loading so the global
    .loading-spinner stays untouched for every other use site.

  - prefers-reduced-motion media query honors the OS setting — pulse
    drops to a steady mid-opacity icon so vestibular-sensitive users
    aren't forced to watch it breathe.

Side effects worth knowing:

  - Right-click "Save video as" on the live feed is gone (the menu
    was a side effect of the native controls). Considered a security
    nicety, not a regression.

  - On iOS Safari, native controls used to provide a tap-to-unmute
    shortcut. We're already `muted` + `playsInline` so autoplay works
    without it; the user can still long-press to access browser
    actions if needed.

Risk: zero functional. Steady-state playback path unchanged. Connect
window is the only visual surface that moved, which is the surface
the user explicitly flagged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Sbussiso

frontend/src/components/HlsPlayer.jsx

@@ -252,15 +252,46 @@ function HlsPlayer({ cameraId, cameraName }) {
             <div className="hls-player-video-wrapper">
                 {loading && (
                     <div className="hls-player-loading">
-                        <div className="loading-spinner"></div>
+                        {/*
+                            Custom loading state — branded camera-pulse SVG instead
+                            of the generic .loading-spinner (which is shared with
+                            auth pages and empty states).  Keeps the connecting UI
+                            on-brand and matches the SourceBox green accent.
+                        */}
+                        <svg
+                            className="camera-pulse"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="1.75"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            aria-hidden="true"
+                        >
+                            <path d="M23 7l-7 5 7 5V7z" />
+                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+                        </svg>
                         <p>Connecting to stream...</p>
                     </div>
                 )}
-                
+
+                {/*
+                    No `controls` attribute on purpose.  The native HTML5 control
+                    bar (play/pause, scrubber, time, mute, fullscreen) renders on
+                    top of the video and is visible during the connect window AND
+                    during normal playback — pure visual noise for our use case:
+                      - every player is `muted` (line below) so volume is moot
+                      - live streams aren't seekable
+                      - autoplay starts on MANIFEST_PARSED so play/pause is moot
+                      - the dedicated Fullscreen button below replaces the native
+                        fullscreen icon
+                    Removing `controls` cleans up both the loading state and the
+                    steady-state playback view.  Right-click "Save video as" goes
+                    away too, which is a nice security adjacent.
+                */}
                 <video
                     ref={videoRef}
                     className="hls-player-video"
-                    controls
                     playsInline
                     muted
                 />

frontend/src/index.css

@@ -5678,12 +5678,48 @@ body {
     align-items: center;
     justify-content: center;
     background: rgba(0, 0, 0, 0.8);
-    color: var(--text-primary);
+    color: var(--accent-green);
 }
 
 .hls-player-loading p {
     margin-top: 1rem;
     color: var(--text-muted);
+    font-size: 0.875rem;
+    letter-spacing: 0.02em;
+}
+
+/*
+    Branded loading icon for the HLS player.  Lightweight SVG camera —
+    no bitmap, scales cleanly at any size — pulsing in the SourceBox
+    green accent so the connecting state reads as "we're trying"
+    rather than "something is broken".  Keep this scoped under
+    .hls-player-loading so the global .loading-spinner used elsewhere
+    (auth pages, empty states, settings) is unaffected.
+*/
+.hls-player-loading .camera-pulse {
+    width: 56px;
+    height: 56px;
+    color: var(--accent-green);
+    animation: hls-camera-pulse 1.6s ease-in-out infinite;
+    filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.35));
+}
+
+@keyframes hls-camera-pulse {
+    0%, 100% { opacity: 0.35; transform: scale(0.96); }
+    50%      { opacity: 1;    transform: scale(1.04); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    /*
+        Honor the OS-level reduced-motion preference.  The pulse is
+        decorative — drop the animation and just hold a steady mid-
+        opacity icon so users with vestibular sensitivity aren't
+        forced to watch it breathe.
+    */
+    .hls-player-loading .camera-pulse {
+        animation: none;
+        opacity: 0.7;
+    }
 }
 
 .hls-player-error {