Skip to content

Commit 1c7c1f3

Browse files
JonnysolJonnysol
committed
🚀 Add Web Deployment System
✨ Features: - Static HTML build script (build_web.py) - GitHub Actions workflow for auto-deployment - Complete web version with 222,219 videos embedded - localStorage-based favorites system - All CRT effects and keyboard controls working - Ready for tv.jonny.sh deployment 🔧 Technical: - 42MB static HTML with all video data - No backend dependencies - Pure client-side JavaScript - Assets included (static GIF, sound effects) - Multiple deployment options (GitHub Pages, Netlify, Vercel) 🎯 Perfect for: - Live demos to potential customers - Portfolio showcase - Public access to TimeCapsuleTV experience - Testing hardware device concept online Ready to deploy to tv.jonny.sh! 🌐
1 parent fe54ab1 commit 1c7c1f3

7 files changed

Lines changed: 373 additions & 0 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
name: 🚀 Deploy TimeCapsuleTV to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ web-deployment ]
6+
pull_request:
7+
branches: [ web-deployment ]
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
build:
20+
runs-on: ubuntu-latest
21+
22+
steps:
23+
- name: 📥 Checkout code
24+
uses: actions/checkout@v4
25+
26+
- name: 🐍 Set up Python
27+
uses: actions/setup-python@v4
28+
with:
29+
python-version: '3.11'
30+
31+
- name: 📦 Install dependencies
32+
run: |
33+
python -m pip install --upgrade pip
34+
# No external dependencies needed for static build
35+
36+
- name: 🔨 Build static web app
37+
run: |
38+
python build_web.py
39+
40+
- name: 📊 Build stats
41+
run: |
42+
echo "📁 Build directory contents:"
43+
ls -la web-build/
44+
echo ""
45+
echo "📏 File sizes:"
46+
du -h web-build/*
47+
echo ""
48+
echo "🎬 Video data embedded in HTML"
49+
50+
- name: 📤 Upload Pages artifact
51+
uses: actions/upload-pages-artifact@v3
52+
with:
53+
path: ./web-build
54+
55+
deploy:
56+
environment:
57+
name: github-pages
58+
url: ${{ steps.deployment.outputs.page_url }}
59+
runs-on: ubuntu-latest
60+
needs: build
61+
62+
steps:
63+
- name: 🚀 Deploy to GitHub Pages
64+
id: deployment
65+
uses: actions/deploy-pages@v4

‎build_web.py‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
#!/usr/bin/env python3
2+
"""
3+
Web Build Script for TimeCapsuleTV
4+
Generates a static HTML version that can be deployed to any web host
5+
"""
6+
7+
import json
8+
import os
9+
import shutil
10+
from pathlib import Path
11+
12+
# Import our existing components
13+
from src.data.loader import load_all_decades_data
14+
from src.core.generator import HTMLGenerator
15+
16+
class WebBuilder:
17+
"""Builds static web version of TimeCapsuleTV"""
18+
19+
def __init__(self):
20+
self.build_dir = Path("web-build")
21+
self.assets_dir = self.build_dir / "assets"
22+
23+
def clean_build_dir(self):
24+
"""Clean and recreate build directory"""
25+
if self.build_dir.exists():
26+
shutil.rmtree(self.build_dir)
27+
self.build_dir.mkdir()
28+
self.assets_dir.mkdir()
29+
print(f"✅ Created clean build directory: {self.build_dir}")
30+
31+
def copy_assets(self):
32+
"""Copy static assets to build directory"""
33+
# Copy static GIF
34+
src_static = Path("src/assets/tvstatic.gif")
35+
if src_static.exists():
36+
shutil.copy2(src_static, self.assets_dir / "tvstatic.gif")
37+
print("✅ Copied tvstatic.gif")
38+
39+
# Copy sound effects
40+
src_sounds = Path("src/assets/sounds")
41+
if src_sounds.exists():
42+
sounds_dir = self.assets_dir / "sounds"
43+
sounds_dir.mkdir()
44+
for sound_file in src_sounds.glob("*.mp3"):
45+
shutil.copy2(sound_file, sounds_dir / sound_file.name)
46+
print("✅ Copied sound effects")
47+
48+
def generate_static_html(self):
49+
"""Generate static HTML with embedded data"""
50+
print("🔄 Loading video data...")
51+
all_decades_data = load_all_decades_data()
52+
53+
print("🔄 Generating HTML...")
54+
generator = HTMLGenerator(all_decades_data)
55+
html_content = generator.generate_html()
56+
57+
# Modify the HTML for static deployment
58+
html_content = self.modify_html_for_static(html_content)
59+
60+
# Write to build directory
61+
html_file = self.build_dir / "index.html"
62+
with open(html_file, 'w', encoding='utf-8') as f:
63+
f.write(html_content)
64+
65+
print(f"✅ Generated static HTML: {html_file}")
66+
return html_file
67+
68+
def modify_html_for_static(self, html_content):
69+
"""Modify HTML for static deployment"""
70+
# Fix asset paths for web deployment
71+
html_content = html_content.replace('src="src/assets/', 'src="assets/')
72+
73+
# Remove backend-dependent features for now (can be added back with serverless functions)
74+
# Remove favorites backend calls and make it localStorage-based
75+
html_content = html_content.replace(
76+
'loadFavoritesFromBackend();',
77+
'loadFavoritesFromLocalStorage();'
78+
)
79+
80+
# Add localStorage-based favorites system
81+
favorites_js = '''
82+
83+
// Static web version - use localStorage for favorites
84+
function loadFavoritesFromLocalStorage() {
85+
try {
86+
const stored = localStorage.getItem('timecapsule_favorites');
87+
if (stored) {
88+
favorites = JSON.parse(stored);
89+
console.log(`📚 Loaded ${favorites.length} favorites from localStorage`);
90+
} else {
91+
console.log('No existing favorites found');
92+
}
93+
} catch (error) {
94+
console.error('Error loading favorites:', error);
95+
}
96+
}
97+
98+
function saveFavoritesToLocalStorage() {
99+
try {
100+
localStorage.setItem('timecapsule_favorites', JSON.stringify(favorites));
101+
console.log(`💾 Saved ${favorites.length} favorites to localStorage`);
102+
} catch (error) {
103+
console.error('Error saving favorites:', error);
104+
}
105+
}
106+
107+
// Override backend functions for static version
108+
async function saveFavoritesToBackend() {
109+
saveFavoritesToLocalStorage();
110+
}
111+
112+
async function loadFavoritesFromBackend() {
113+
loadFavoritesFromLocalStorage();
114+
}
115+
116+
// Disable categorization features for static version
117+
function showCategorizationOverlay() {
118+
alert('Categorization feature is not available in the web version. Use the desktop app for full features!');
119+
}
120+
121+
async function saveCategory() {
122+
alert('Categorization feature is not available in the web version. Use the desktop app for full features!');
123+
}
124+
'''
125+
126+
# Insert the localStorage functions before the closing script tag
127+
html_content = html_content.replace('</script>', favorites_js + '\n</script>')
128+
129+
return html_content
130+
131+
def create_readme(self):
132+
"""Create README for web build"""
133+
readme_content = """# TimeCapsuleTV - Web Version
134+
135+
🎬 **Live Demo**: Experience 222,219 videos from 1950s-2000s in an authentic retro TV interface!
136+
137+
## Features
138+
- 🎮 **Full Keyboard Controls**: Arrow keys, decade switching (5,6,7,8,9,0)
139+
- ❤️ **Favorites System**: Press X to favorite, F to view favorites (localStorage)
140+
- 📺 **Authentic CRT Effects**: Static, glow, noise - just like old TVs
141+
- 🎵 **Sound Effects**: Click sounds and static audio
142+
- 🎯 **222,219 Videos**: Spanning 6 decades of content
143+
144+
## Controls
145+
- `↑/↓`: Cycle categories
146+
- `←/→`: Navigate videos within category
147+
- `R`: Random mode
148+
- `X`: Add to favorites ❤️
149+
- `F`: View favorites
150+
- `5,6,7,8,9,0`: Switch decades (50s-00s)
151+
- `N`: Cycle noise levels
152+
- `S`: Skip video
153+
- `ESC`: Exit fullscreen
154+
155+
## Technical
156+
- **Static HTML/CSS/JS**: No backend required
157+
- **YouTube IFrame API**: Direct video playback
158+
- **localStorage**: Favorites persistence
159+
- **Responsive Design**: Works on desktop and mobile
160+
161+
Built with ❤️ for retro TV nostalgia!
162+
"""
163+
164+
readme_file = self.build_dir / "README.md"
165+
with open(readme_file, 'w') as f:
166+
f.write(readme_content)
167+
print(f"✅ Created README: {readme_file}")
168+
169+
def build(self):
170+
"""Main build process"""
171+
print("🚀 Starting TimeCapsuleTV Web Build...")
172+
173+
self.clean_build_dir()
174+
self.copy_assets()
175+
self.generate_static_html()
176+
self.create_readme()
177+
178+
print(f"""
179+
🎉 Web build complete!
180+
181+
📁 Build directory: {self.build_dir}
182+
🌐 Open: {self.build_dir}/index.html
183+
🚀 Ready for deployment to any static host!
184+
185+
Files generated:
186+
- index.html (Complete static app)
187+
- assets/ (Static files)
188+
- README.md (Documentation)
189+
""")
190+
191+
if __name__ == "__main__":
192+
builder = WebBuilder()
193+
builder.build()

‎deploy-to-domain.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# 🚀 Deploy TimeCapsuleTV to tv.jonny.sh
2+
3+
## Option 1: GitHub Pages + Custom Domain (Recommended)
4+
5+
1. **Enable GitHub Pages**:
6+
- Go to your GitHub repo settings
7+
- Navigate to "Pages" section
8+
- Source: "GitHub Actions"
9+
- Custom domain: `tv.jonny.sh`
10+
11+
2. **DNS Setup** (on your domain provider):
12+
```
13+
CNAME tv.jonny.sh -> yourusername.github.io
14+
```
15+
16+
3. **Push to trigger deployment**:
17+
```bash
18+
git add .
19+
git commit -m "🚀 Add web deployment system"
20+
git push origin web-deployment
21+
```
22+
23+
## Option 2: Direct Upload to Server
24+
25+
If you have SSH access to your server:
26+
27+
```bash
28+
# Build locally
29+
python build_web.py
30+
31+
# Upload to your server
32+
scp -r web-build/* user@jonny.sh:/var/www/tv/
33+
```
34+
35+
## Option 3: Netlify Drop (Super Easy)
36+
37+
1. Run: `python build_web.py`
38+
2. Go to [netlify.com/drop](https://netlify.com/drop)
39+
3. Drag the `web-build` folder
40+
4. Set custom domain to `tv.jonny.sh`
41+
42+
## Option 4: Vercel
43+
44+
```bash
45+
# Install Vercel CLI
46+
npm i -g vercel
47+
48+
# Deploy
49+
cd web-build
50+
vercel --prod
51+
vercel domains add tv.jonny.sh
52+
```
53+
54+
## Features in Web Version
55+
56+
✅ **Working**:
57+
- All 222,219 videos embedded
58+
- Full keyboard controls (5,6,7,8,9,0 for decades)
59+
- Favorites system (localStorage)
60+
- CRT effects and sound
61+
- YouTube playback
62+
63+
⚠️ **Limited** (vs desktop app):
64+
- No video categorization (read-only)
65+
- Favorites stored in browser only
66+
- No backend features
67+
68+
## File Structure
69+
70+
```
71+
web-build/
72+
├── index.html # Complete app (42MB with all video data)
73+
├── assets/
74+
│ ├── tvstatic.gif # CRT static overlay
75+
│ └── sounds/ # Click and static audio
76+
└── README.md # Documentation
77+
```
78+
79+
## Performance
80+
81+
- **Initial Load**: ~42MB (one-time download)
82+
- **Runtime**: Pure client-side, no server calls
83+
- **Caching**: Browser caches everything after first visit
84+
- **Mobile**: Works on mobile devices
85+
86+
Perfect for showcasing your project to potential customers! 🎬

‎web-build/README.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# TimeCapsuleTV - Web Version
2+
3+
🎬 **Live Demo**: Experience 222,219 videos from 1950s-2000s in an authentic retro TV interface!
4+
5+
## Features
6+
- 🎮 **Full Keyboard Controls**: Arrow keys, decade switching (5,6,7,8,9,0)
7+
- ❤️ **Favorites System**: Press X to favorite, F to view favorites (localStorage)
8+
- 📺 **Authentic CRT Effects**: Static, glow, noise - just like old TVs
9+
- 🎵 **Sound Effects**: Click sounds and static audio
10+
- 🎯 **222,219 Videos**: Spanning 6 decades of content
11+
12+
## Controls
13+
- `↑/↓`: Cycle categories
14+
- `←/→`: Navigate videos within category
15+
- `R`: Random mode
16+
- `X`: Add to favorites ❤️
17+
- `F`: View favorites
18+
- `5,6,7,8,9,0`: Switch decades (50s-00s)
19+
- `N`: Cycle noise levels
20+
- `S`: Skip video
21+
- `ESC`: Exit fullscreen
22+
23+
## Technical
24+
- **Static HTML/CSS/JS**: No backend required
25+
- **YouTube IFrame API**: Direct video playback
26+
- **localStorage**: Favorites persistence
27+
- **Responsive Design**: Works on desktop and mobile
28+
29+
Built with ❤️ for retro TV nostalgia!

‎web-build/assets/sounds/click.mp3‎

94.7 KB
Binary file not shown.

‎web-build/assets/sounds/static.mp3‎

20.2 KB
Binary file not shown.

‎web-build/assets/tvstatic.gif‎

90.6 KB
Loading

0 commit comments

Comments
 (0)