openvibers/openvibe.live Commits

Reduced motion stops the five animations that ignored it (#508)

OP OpenVibers committed 12 days ago · b90121e8c8 · 5 files, +5 −0

The design lint (tools/design-lint, rule missing_reduced_motion) found five files that animate and never ask
prefers-reduced-motion: the studio preview's LIVE badge pulse, the dashboard's connection dot, the media player's
loading ring (still, at 70% opacity, instead), the messenger panel's slide-up and the kiosk's live dot. Each now
stops under reduced motion. Live is at 0 for that rule.

Changes

ddiff --git a/public/css/broadcast.css b/public/css/broadcast.css
iindex 36e5965d..e9d855c1 100644
---- a/public/css/broadcast.css
++++ b/public/css/broadcast.css
@@@ -284,6 +284,7 @@
      align-items: center;
      gap: 6px;
  }
++@media (prefers-reduced-motion: reduce) { .bc-live-badge { animation: none; } }
  
  .bc-live-badge i {
      font-size: 0.6rem;
ddiff --git a/public/css/features/dashboard.css b/public/css/features/dashboard.css
iindex 4f2b8892..c81081e5 100644
---- a/public/css/features/dashboard.css
++++ b/public/css/features/dashboard.css
@@@ -7,6 +7,7 @@
  .pc-status { font-size: 0.92rem; display: flex; align-items: center; gap: 8px; min-height: 22px; }
  .pc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
  .pc-dot-on { background: #53fc18; box-shadow: 0 0 6px rgba(83,252,24,0.6); animation: pcDotPulse 2.2s ease-in-out infinite; }
++@media (prefers-reduced-motion: reduce) { .pc-dot-on { animation: none; } }
  .pc-kind { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 7px; border-radius: 6px; margin-left: 4px; vertical-align: middle; }
  .pc-kind-app { background: rgba(83,252,24,0.16); color: #6ee34a; }
  .pc-kind-test { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-light, #e1b77d); }
ddiff --git a/public/css/media-player.css b/public/css/media-player.css
iindex 70b3740a..592dd622 100644
---- a/public/css/media-player.css
++++ b/public/css/media-player.css
@@@ -82,6 +82,7 @@ code { background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 6px;
      animation: mp-pulse 1.4s ease-out infinite;   /* a ring that pulses out: nothing spins */
  }
  @keyframes mp-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mp-accent) 55%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
++@media (prefers-reduced-motion: reduce) { .mp-spinner { animation: none; opacity: .7; } }   /* a still ring while it loads */
  
  /* ── Custom player controls ──────────────────────────────── */
  .mp-controls {
ddiff --git a/public/css/messenger.css b/public/css/messenger.css
iindex f43fb8bd..1bdc3aa1 100644
---- a/public/css/messenger.css
++++ b/public/css/messenger.css
@@@ -67,6 +67,7 @@
      overflow: hidden;
      animation: msgSlideUp 0.2s ease-out;
  }
++@media (prefers-reduced-motion: reduce) { .messenger-panel { animation: none; } }
  .messenger-panel.open {
      display: flex;
  }
ddiff --git a/public/kiosk.html b/public/kiosk.html
iindex 1597c433..10da19d2 100644
---- a/public/kiosk.html
++++ b/public/kiosk.html
@@@ -146,6 +146,7 @@ button{font:inherit}
    box-shadow:0 0 12px var(--red);animation:pulse 1.6s infinite
  }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
++@media (prefers-reduced-motion:reduce){.hero-side .live-pill .pulse{animation:none}}
  .hero-side span.tag{
    display:block;margin-top:.8vh;
    font-size:.78vw;color:var(--muted);font-weight:850;