https://github.com/ut42tech/synchronized-screensaver
Web Based Screensaver, Svelte
https://github.com/ut42tech/synchronized-screensaver
Last synced: about 1 month ago
JSON representation
Web Based Screensaver, Svelte
- Host: GitHub
- URL: https://github.com/ut42tech/synchronized-screensaver
- Owner: ut42tech
- License: mit
- Created: 2026-02-23T01:50:09.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-02-23T04:58:35.000Z (4 months ago)
- Last Synced: 2026-02-23T11:47:17.814Z (4 months ago)
- Language: TypeScript
- Size: 3.88 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🖥️ Synchronized Screensaver
**[🇯🇵 日本語版 README](docs/README.ja.md)**
> Time-synced full-screen video playback across multiple devices — no server communication required.
Multiple Macs (or any device with a web browser) play the **same video at exactly the same position** by calculating the playback offset from the current UTC time. Designed to run as a macOS screensaver via [WebViewScreenSaver](https://github.com/nickthedude/WebViewScreenSaver).
## ✨ How It Works
```
targetTime = (Date.now() / 1000) % video.duration
```
Every device independently computes where in the video loop it should be, based on the system clock. No WebSocket, no signaling server — just synchronized clocks.
**Drift correction** — every 10 seconds, drift is checked and corrected via seek when it exceeds 100ms. No `playbackRate` manipulation for maximum cross-browser compatibility.
Clients opened late **wait on a black screen** until initial sync is confirmed, then fade in.
## 🚀 Quick Start
```bash
# Clone & install
git clone https://github.com/ut42tech/synchronized-screensaver.git
cd synchronized-screensaver
pnpm install
# Start dev server
pnpm run dev
```
Open `http://localhost:5173` in multiple tabs — playback is already synchronized.
## ☁️ Deploy to Cloud
Deploy your own instance with one click:
[](https://vercel.com/new/clone?repository-url=https://github.com/ut42tech/synchronized-screensaver)
[](https://app.netlify.com/start/deploy?repository=https://github.com/ut42tech/synchronized-screensaver)
## 🏠 LAN Deployment (Docker)
For lab/office environments where all devices are on the same network:
```bash
# Build the app
pnpm run build
# Start Nginx container
docker compose up -d
```
All clients on the LAN can access `http:///` and will play in perfect sync.
### Updating the Video
Simply add or replace `.mp4` files in `public/videos/` and restart:
```bash
cp /path/to/new-promo.mp4 public/videos/
docker compose restart
```
The app automatically discovers all `.mp4` files in the videos directory — no code changes required.
## 🍎 macOS Screensaver Setup
1. Install [WebViewScreenSaver](https://github.com/nickthedude/WebViewScreenSaver)
2. Open **System Settings → Screen Saver**
3. Select **WebViewScreenSaver**
4. Set the URL to your deployment (e.g. `http://192.168.1.100/`)
5. Adjust idle timeout and display sleep settings as needed
## 🎬 Using Your Own Video
1. Place your `.mp4` file(s) in `public/videos/`
2. Rebuild if using Docker: `pnpm run build && docker compose up -d --build`
The app automatically discovers the first `.mp4` file (alphabetically) in the directory.
> [!TIP]
> Large production videos are excluded from Git by default (`.gitignore`).
## 🛠️ Tech Stack
| Layer | Technology |
| ------------- | ----------------------------------- |
| Frontend | Vite + Svelte 5 (TypeScript) |
| LAN Hosting | Docker Compose + Nginx |
| Cloud Hosting | Vercel / Netlify / Cloudflare Pages |
| Client | macOS + WebViewScreenSaver |
## 📄 License
[MIT](LICENSE)