Initial commit - SoundWave v1.0
- 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
commit
51679d1943
254 changed files with 37281 additions and 0 deletions
197
docs/LOGO_UPDATE_INSTRUCTIONS.md
Normal file
197
docs/LOGO_UPDATE_INSTRUCTIONS.md
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
# 🎨 Logo Update - Complete Instructions
|
||||
|
||||
## ✅ What's Been Done
|
||||
|
||||
All code references have been updated to use your new logo:
|
||||
|
||||
### Updated Files:
|
||||
- ✅ `frontend/src/components/Sidebar.tsx` - Logo next to "SoundWave" text
|
||||
- ✅ `frontend/src/components/SplashScreen.tsx` - Loading screen logo
|
||||
- ✅ `frontend/src/pages/LoginPage.tsx` - Main login page animated logo
|
||||
|
||||
All now reference: `/img/logo.png`
|
||||
|
||||
---
|
||||
|
||||
## 📥 Step 1: Save Your Logo
|
||||
|
||||
**Save the circular SoundWave logo image you provided to:**
|
||||
|
||||
```
|
||||
frontend/public/img/logo.png
|
||||
```
|
||||
|
||||
**How to do this:**
|
||||
1. Download/save the image I showed you (with the play button, circles, and "soundwave" text)
|
||||
2. Name it exactly: `logo.png`
|
||||
3. Place it in: `frontend/public/img/` folder
|
||||
|
||||
---
|
||||
|
||||
## 🤖 Step 2: Generate PWA Icons (Automatic)
|
||||
|
||||
Run this command from the project root:
|
||||
|
||||
```bash
|
||||
./scripts/update-logo.sh
|
||||
```
|
||||
|
||||
This will automatically create:
|
||||
- ✅ 8 PWA icon sizes (72px to 512px)
|
||||
- ✅ 2 maskable icons for Android
|
||||
- ✅ Multi-size favicon.ico
|
||||
|
||||
**Prerequisites:** Make sure ImageMagick is installed (it's already available on your system ✅)
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Step 3: Rebuild Frontend
|
||||
|
||||
```bash
|
||||
cd frontend
|
||||
npm run build
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐳 Step 4: Restart Application
|
||||
|
||||
```bash
|
||||
docker restart soundwave
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Where Your New Logo Will Appear
|
||||
|
||||
### Login & Authentication
|
||||
- ✅ Login page (large animated logo)
|
||||
- ✅ 2FA verification page
|
||||
- ✅ Password reset pages
|
||||
|
||||
### Main Application
|
||||
- ✅ Sidebar (next to "SoundWave" text)
|
||||
- ✅ Splash/loading screen
|
||||
- ✅ App header
|
||||
|
||||
### PWA & Mobile
|
||||
- ✅ Home screen icon (when installed)
|
||||
- ✅ App switcher/multitasking view
|
||||
- ✅ Splash screen on app launch
|
||||
- ✅ Notification icon
|
||||
|
||||
### Browser
|
||||
- ✅ Browser tab favicon
|
||||
- ✅ Bookmarks
|
||||
- ✅ Browser history
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Verification
|
||||
|
||||
After completing all steps:
|
||||
|
||||
1. **Clear browser cache** (Ctrl+Shift+Delete)
|
||||
2. **Hard refresh** (Ctrl+Shift+R)
|
||||
3. **Check login page** - Should show new circular logo
|
||||
4. **Check sidebar** - Should show new logo next to text
|
||||
5. **Check browser tab** - Should show new favicon
|
||||
|
||||
---
|
||||
|
||||
## 📱 PWA Users
|
||||
|
||||
If users already have the PWA installed:
|
||||
1. They may need to **uninstall** and **reinstall** the PWA to see the new icon
|
||||
2. Or wait for the service worker to update (24-48 hours)
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ Troubleshooting
|
||||
|
||||
**Logo not showing?**
|
||||
- Verify file is at: `frontend/public/img/logo.png`
|
||||
- Check filename is exact (case-sensitive)
|
||||
- Clear browser cache completely
|
||||
- Check browser console for 404 errors
|
||||
|
||||
**Icons not generating?**
|
||||
```bash
|
||||
# Check ImageMagick is installed
|
||||
which convert
|
||||
|
||||
# If not installed:
|
||||
sudo apt-get install imagemagick # Ubuntu/Debian
|
||||
```
|
||||
|
||||
**Still seeing old logo?**
|
||||
- Check if old `logo.svg` file exists and delete it
|
||||
- Do a hard refresh in browser
|
||||
- Check if build completed successfully
|
||||
|
||||
---
|
||||
|
||||
## 📊 Current Status
|
||||
|
||||
```
|
||||
✅ Code updated (3 files)
|
||||
✅ Script created (update-logo.sh)
|
||||
✅ Documentation created
|
||||
⏳ Waiting for: You to save logo.png
|
||||
⏳ Waiting for: Running the update script
|
||||
⏳ Waiting for: Rebuild & restart
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Logo Specifications
|
||||
|
||||
Your logo perfectly matches these requirements:
|
||||
|
||||
**Visual Elements:**
|
||||
- ✅ Circular play button in center
|
||||
- ✅ Concentric circle patterns (sound waves)
|
||||
- ✅ Sound wave visualization bars on sides
|
||||
- ✅ "soundwave" text in modern typography
|
||||
- ✅ Professional color palette (teal/turquoise + navy blue)
|
||||
|
||||
**Technical:**
|
||||
- ✅ Format: PNG with transparency
|
||||
- ✅ Recommended size: 1024x1024 or higher
|
||||
- ✅ Suitable for all screen densities
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Commands
|
||||
|
||||
```bash
|
||||
# Full update process
|
||||
cd /home/iulian/projects/zi-tube/soundwave
|
||||
|
||||
# 1. Place your logo.png in frontend/public/img/
|
||||
|
||||
# 2. Generate icons
|
||||
./scripts/update-logo.sh
|
||||
|
||||
# 3. Rebuild
|
||||
cd frontend && npm run build && cd ..
|
||||
|
||||
# 4. Restart
|
||||
docker restart soundwave
|
||||
|
||||
# 5. Clear cache and refresh browser
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📞 Need Help?
|
||||
|
||||
If you encounter any issues:
|
||||
1. Check the script output for errors
|
||||
2. Verify ImageMagick is installed: `convert --version`
|
||||
3. Check file permissions on logo.png
|
||||
4. Look for error messages in terminal
|
||||
|
||||
---
|
||||
|
||||
**That's it! Your new professional logo will be displayed everywhere in the app! 🎉**
|
||||
Loading…
Add table
Add a link
Reference in a new issue