AudiOhm/design-system/pages/player.md

Player Page Design Override

Purpose

This file contains page-specific design rules that override the master design system for the Audio Player page.

Key Differences from Master

Layout

• Full-screen overlay mode for immersive experience
• Larger touch targets (minimum 56px for player controls)
• Fixed bottom mini-player (height: 90px)

Visual Hierarchy

• Album art is the primary visual element (dominates 40% of viewport)
• Track info is secondary (artist name smaller, muted color)
• Controls are tertiary but highly accessible

Typography

• Track title: 24px, weight 600 (larger than master H3)
• Artist name: 16px, weight 400, color #9BA3B8
• Timestamps: 13px, weight 500, color #6B7280

Colors (Same as Master)

• Background: #0A0E27
• Surface: #151932
• Primary Neon: #00F0FF (progress bar, play button)
• Secondary Neon: #BF00FF (like button active)

Components

Progress Bar

/* Custom progress bar styling */
.progress-container {
  height: 4px;
  background: #2A2F4A;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00F0FF 0%, #00C8FF 100%);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.progress-handle {
  width: 12px;
  height: 12px;
  background: #00F0FF;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
  opacity: 0;
  transition: opacity 200ms ease;
}

.progress-container:hover .progress-handle {
  opacity: 1;
}

Control Buttons

/* Primary Control (Play/Pause) */
.btn-play-primary {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #00F0FF 0%, #00C8FF 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 240, 255, 0.4);
  cursor: pointer;
  transition: all 200ms ease;
}

.btn-play-primary:hover {
  box-shadow: 0 6px 32px rgba(0, 240, 255, 0.6);
  transform: scale(1.05);
}

/* Secondary Controls (Prev, Next, Shuffle) */
.btn-control-secondary {
  width: 48px;
  height: 48px;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9BA3B8;
  cursor: pointer;
  transition: all 200ms ease;
}

.btn-control-secondary:hover {
  color: #F0F4F8;
  background: rgba(240, 244, 248, 0.05);
}

.btn-control-secondary.active {
  color: #00F0FF;
}

Album Art Display

/* Large album art with glow */
.album-art-container {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1/1;
  margin: 0 auto;
  position: relative;
}

.album-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 240, 255, 0.2);
}

/* Playing animation (subtle pulse) */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 20px 60px rgba(0, 240, 255, 0.2);
  }
  50% {
    box-shadow: 0 20px 80px rgba(0, 240, 255, 0.3);
  }
}

.album-art.playing {
  animation: pulse-glow 3s ease-in-out infinite;
}

Mini Player (Bottom Bar)

/* Persistent bottom mini-player */
.mini-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(21,25,50,0.95) 0%, rgba(10,14,39,0.98) 100%);
  backdrop-filter: blur(20px);
  border-top: 1px solid #2A2F4A;
  padding: 12px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  z-index: 100;
}

.mini-album-art {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
}

.mini-track-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mini-track-title {
  font-size: 16px;
  font-weight: 600;
  color: #F0F4F8;
}

.mini-artist-name {
  font-size: 14px;
  font-weight: 400;
  color: #9BA3B8;
}

.mini-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

Volume Control

.volume-slider {
  -webkit-appearance: none;
  width: 100px;
  height: 4px;
  background: #2A2F4A;
  border-radius: 2px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #00F0FF;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

Queue Panel (Slide-out)

.queue-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: #151932;
  border-left: 1px solid #2A2F4A;
  transform: translateX(100%);
  transition: transform 300ms ease;
  z-index: 50;
  overflow-y: auto;
}

.queue-panel.open {
  transform: translateX(0);
}

.queue-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 200ms ease;
}

.queue-item:hover {
  background: rgba(0, 240, 255, 0.05);
}

.queue-item.active {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid #00F0FF;
}

Responsive Adjustments

Mobile (< 768px)

• Mini player: Height 80px
• Album art: Max-width 300px
• Control buttons: 56px primary, 44px secondary
• Queue panel: Full-width (100%)

Tablet (768px - 1024px)

• Mini player: Height 85px
• Album art: Max-width 350px
• Queue panel: Width 350px

Desktop (> 1024px)

• Use default sizes above

Accessibility (Beyond Master)

Keyboard Shortcuts

• Space: Play/Pause
• Arrow Left/Right: Seek ±10s
• Arrow Up/Down: Volume ±10%
• Shift + Arrow Left/Right: Previous/Next track
• M: Mute/Unmute
• F: Toggle fullscreen mode

Screen Reader Announcements

• Announce track changes (title + artist)
• Announce playback state (playing/paused)
• Announce volume changes (percentage)
• Announce queue position ("Track 3 of 15")

ARIA Labels

<!-- Play/Pause Button -->
<button aria-label="Pause" aria-pressed="true">
  <!-- Pause Icon -->
</button>

<!-- Progress Bar -->
<div role="slider" aria-label="Track progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45">
  <!-- Progress UI -->
</div>

<!-- Volume Slider -->
<input type="range" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">

Additional Anti-Patterns for Player

❌ NEVER auto-play audio without user interaction - Wait for explicit play action ❌ NEVER hide controls during video playback - Keep controls always visible ❌ NEVER use instant seek jumps - Animate progress bar smoothly ❌ NEVER skip keyboard navigation - All controls must be keyboard-accessible ❌ NEVER ignore audio focus - Pause when another app plays audio

---

These page-specific rules override the master design system for the player page only.