iulian/soundwave
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit - SoundWave v1.0

Browse source 
- Full PWA support with offline capabilities
- Comprehensive search across songs, playlists, and channels
- Offline playlist manager with download tracking
- Pre-built frontend for zero-build deployment
- Docker-based deployment with docker compose
- Material-UI dark theme interface
- YouTube audio download and management
- Multi-user authentication support
This commit is contained in:
Iulian 2025-12-16 23:43:07 +00:00
commit 51679d1943
254 changed files with 37281 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

355
docs/LOGO_AND_ICONS.md Normal file
View file

@ -0,0 +1,355 @@
# 🎨 SoundWave - Official Logo & PWA Icons
## Overview
This document describes the official SoundWave logo and all generated PWA icons for the application.
## 🎯 Logo Design
### Color Palette
- **Primary Blue**: `#0F4C75` (Dark blue - main brand color)
- **Accent Cyan**: `#00C8C8` (Bright cyan - highlights and energy)
- **Background**: `#A8D5D8` (Light turquoise - calming backdrop)
### Design Elements
1. **Play Button Icon**: Central triangular play symbol representing audio playback
2. **Sound Waves**: Circular waves emanating from the center, suggesting audio propagation
3. **Equalizer Bars**: Side decorative bars representing audio visualization
4. **Typography**: Modern sans-serif "soundwave" wordmark with split coloring
### Visual Concept
The logo combines musical elements (play button, sound waves, equalizer) into a cohesive design that represents:
- ✨ Audio streaming and playback
- 🎵 Music and sound waves
- 📱 Modern PWA technology
- 🚀 Dynamic and energetic brand
## 📱 Generated Icons
### Standard Icons (Any Purpose)
All standard icons are optimized for general use across all platforms.
| Size | Filename | Use Case | File Size |
|------|----------|----------|-----------|
| 72×72 | `icon-72x72.png` | Small displays, older devices | 7.4 KB |
| 96×96 | `icon-96x96.png` | Medium displays | 12 KB |
| 128×128 | `icon-128x128.png` | Desktop taskbar | 18 KB |
| 144×144 | `icon-144x144.png` | Windows tiles | 22 KB |
| 152×152 | `icon-152x152.png` | iPad, older iOS | 24 KB |
| 192×192 | `icon-192x192.png` | Android home screen | 33 KB |
| 384×384 | `icon-384x384.png` | High-DPI displays | 82 KB |
| 512×512 | `icon-512x512.png` | Splash screens, app stores | 112 KB |
### Maskable Icons (Android Adaptive)
Maskable icons have safe zone padding to work with Android's adaptive icon system.
| Size | Filename | Purpose | File Size |
|------|----------|---------|-----------|
| 192×192 | `icon-192x192-maskable.png` | Android adaptive icon | 33 KB |
| 512×512 | `icon-512x512-maskable.png` | Android HD adaptive icon | 112 KB |
**What are maskable icons?**
- Android can crop icons into different shapes (circle, square, rounded square, etc.)
- Maskable icons ensure important content stays visible regardless of mask shape
- Uses safe zone: 80% of icon area guaranteed to be visible
### Platform-Specific Icons
#### Apple Touch Icon (iOS/Safari)
| Size | Filename | Use Case | File Size |
|------|----------|----------|-----------|
| 180×180 | `apple-touch-icon.png` | iOS home screen, Safari | 30 KB |
**iOS Notes:**
- Automatically rounded by iOS
- Displayed on home screen when "Add to Home Screen" is used
- No transparency (fills with white if present)
#### Favicon (Browsers)
| Format | Filename | Sizes | Use Case | File Size |
|--------|----------|-------|----------|-----------|
| ICO | `favicon.ico` | 16×16, 32×32, 48×48 | Browser tabs, bookmarks | 15 KB |
## 📂 File Structure
```
frontend/public/
├── img/
│ ├── favicon.ico (multi-size ICO file)
│ └── icons/
│ ├── logo-source.svg (original vector logo)
│ ├── icon-72x72.png
│ ├── icon-96x96.png
│ ├── icon-128x128.png
│ ├── icon-144x144.png
│ ├── icon-152x152.png
│ ├── icon-192x192.png
│ ├── icon-192x192-maskable.png
│ ├── icon-384x384.png
│ ├── icon-512x512.png
│ ├── icon-512x512-maskable.png
│ └── apple-touch-icon.png
├── manifest.json (references all icons)
├── index.html (includes favicon and apple icon links)
└── icon-preview.html (preview all icons)
```
## 🔧 Configuration Files
### manifest.json
All icons are properly referenced in the PWA manifest:
```json
{
"icons": [
{
"src": "/img/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
// ... all 8 standard sizes
{
"src": "/img/icons/icon-192x192-maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/icons/icon-512x512-maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
```
### index.html
Favicon and Apple icons are linked in the HTML head:
```html
<!-- Icons -->
<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/icon-72x72.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/img/icons/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png" />
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png" />
```
## 🎨 Preview
To view all generated icons visually:
1. Start the dev server: `npm run dev`
2. Navigate to: `http://localhost:5173/icon-preview.html`
3. See all icons displayed with their sizes and purposes
## 📊 Statistics
- **Total Icons**: 11 PNG files + 1 ICO file
- **Total Size**: ~508 KB
- **Format**: PNG (RGB, 8-bit)
- **Compression**: Optimized
- **Color Profile**: sRGB
## 🌐 Platform Support
### ✅ Full Support
- **Chrome**: All icons work perfectly
- **Edge**: All icons work perfectly
- **Android Chrome**: Standard + maskable icons
- **Safari**: Standard + Apple touch icon
- **iOS Safari**: Apple touch icon + home screen
### ⚠️ Partial Support
- **Firefox**: Standard icons (no maskable support)
- **Opera**: Standard icons work
### 📱 Where Icons Appear
#### Desktop
- Browser tab favicon (16×16, 32×32)
- Taskbar (128×128)
- Installation prompt (192×192)
- Start menu/dock after install (192×192, 512×512)
- Windows tiles (144×144)
#### Android
- Home screen shortcut (192×192 or maskable)
- App drawer (192×192 or maskable)
- Recent apps (192×192)
- Splash screen (512×512)
- Notification icon (192×192)
#### iOS
- Home screen icon (180×180 apple-touch-icon)
- Splash screen (512×512)
- Safari bookmark (apple-touch-icon)
## 🔄 Regenerating Icons
If you need to regenerate icons from a new source image:
### Method 1: Use Existing Script
```bash
cd frontend/public/img/icons
# Replace logo-source.svg with your new design
./../../../../scripts/generate-pwa-icons.sh
```
### Method 2: Manual Generation
```bash
cd frontend/public/img/icons
# Generate standard sizes
for size in 72 96 128 144 152 192 384 512; do
convert logo-source.svg -resize ${size}x${size} icon-${size}x${size}.png
done
# Generate maskable icons
for size in 192 512; do
convert logo-source.svg -resize ${size}x${size} -gravity center -extent ${size}x${size} \
icon-${size}x${size}-maskable.png
done
# Generate Apple touch icon
convert logo-source.svg -resize 180x180 apple-touch-icon.png
# Generate favicon
convert logo-source.svg -define icon:auto-resize=16,32,48 ../favicon.ico
```
### Method 3: Online Tools
Use [PWA Builder Image Generator](https://www.pwabuilder.com/imageGenerator):
1. Upload source image (512×512 minimum)
2. Download generated icon pack
3. Replace files in `frontend/public/img/icons/`
## 🎯 Best Practices
### Source Image Requirements
- **Format**: PNG or SVG (vector preferred)
- **Minimum Size**: 512×512 pixels
- **Aspect Ratio**: 1:1 (square)
- **Background**: Include background color (don't rely on transparency)
- **Safe Zone**: Keep important content in center 80% for maskable icons
### Icon Design Guidelines
✅ **Do:**
- Use simple, recognizable shapes
- Maintain good contrast
- Test at small sizes (16×16)
- Include brand colors
- Use vector source when possible
❌ **Don't:**
- Use thin lines (< 2px)
- Include small text
- Rely on fine details
- Use complex gradients
- Leave transparent backgrounds
## 🚀 Testing Icons
### Browser Testing
```bash
# Build and preview
npm run build
npm run preview
# Test in browsers:
# - Chrome DevTools > Application > Manifest
# - Check all icon sizes load
# - Verify no 404 errors
```
### Lighthouse Audit
1. Open Chrome DevTools
2. Lighthouse tab
3. Progressive Web App
4. Check "Provides a valid apple-touch-icon"
5. Check "Has a `<meta name="theme-color">` tag"
6. Check "Manifest includes a maskable icon"
### Device Testing
**Android:**
1. Install PWA via "Add to Home Screen"
2. Check icon appearance in:
- Home screen
- App drawer
- Recent apps
- Notifications
**iOS:**
1. Safari > Share > "Add to Home Screen"
2. Check icon on home screen
3. Verify rounded corners applied correctly
**Desktop:**
1. Chrome > Install app (⊕ icon in address bar)
2. Check icon in:
- Taskbar/dock
- Start menu/launcher
- Window title bar
## 📝 Troubleshooting
### Icons not showing in browser
- Check file paths in manifest.json
- Verify files exist in `public/img/icons/`
- Clear browser cache
- Check browser console for 404 errors
### Icons blurry on high-DPI displays
- Ensure you have 384×384 and 512×512 sizes
- Use vector source (SVG) for regeneration
- Check PNG compression quality
### Maskable icons cropped incorrectly
- Ensure 20% padding around all edges
- Keep logo centered
- Test with [Maskable.app](https://maskable.app/)
### Apple touch icon not working on iOS
- Verify file is 180×180 pixels
- Ensure no transparency
- Check `<link rel="apple-touch-icon">` in HTML
- File must be PNG format
## 📚 Resources
- [PWA Builder](https://www.pwabuilder.com/) - Icon generator
- [Maskable.app](https://maskable.app/) - Test maskable icons
- [Web.dev PWA Icons](https://web.dev/add-manifest/#icons) - Icon guidelines
- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/app-icons) - iOS icon specs
- [Android Adaptive Icons](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive) - Android specs
## ✅ Checklist
PWA Icon Implementation:
- [x] Source logo created (SVG)
- [x] 8 standard icon sizes generated (72px-512px)
- [x] 2 maskable icons created (192px, 512px)
- [x] Apple touch icon generated (180px)
- [x] Favicon created (multi-size ICO)
- [x] manifest.json updated with all icons
- [x] index.html updated with favicon/apple icon links
- [x] Icon preview page created
- [x] All files verified and tested
- [x] Total size optimized (~508KB)
- [x] Documentation completed
## 🎉 Summary
Your SoundWave PWA now has a complete, professional icon set that works across all platforms:
- ✅ **11 PNG icons** covering all size requirements
- ✅ **Maskable icons** for Android adaptive icons
- ✅ **Apple touch icon** for iOS home screen
- ✅ **Favicon** for browser tabs and bookmarks
- ✅ **Optimized file sizes** (~508KB total)
- ✅ **Properly configured** in manifest and HTML
- ✅ **Ready for production** deployment
The official SoundWave logo is now consistently used across your entire PWA!