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
```css
/* 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
```css
/* 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
```css
/* 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)
```css
/* 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
```css
.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)
```css
.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
```html
<!-- 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.*