feat: update icons for extension and website, automate responsive logo sizes in build pipeline
Timo
|
After Width: | Height: | Size: 692 KiB |
|
After Width: | Height: | Size: 99 KiB |
@@ -0,0 +1,33 @@
|
||||
Synchronize video playback on YouTube, Netflix, Emby, Jellyfin, and any HTML5 site in real-time with friends.
|
||||
|
||||
KoalaSync: The Privacy-First Watch Party Extension
|
||||
|
||||
Synchronize movies, series, and videos in real-time with friends.
|
||||
100% free, secure, and no account required.
|
||||
|
||||
Whether you're binge-watching Netflix, streaming from your own self-hosted Emby, Jellyfin, or Plex servers, or watching on virtually any other website with a video player — KoalaSync keeps everyone perfectly in sync. Lightweight, open-source, and built for absolute data sovereignty.
|
||||
|
||||
✨ CORE FEATURES
|
||||
• No Account Needed: Just create a room and share the link. No emails, no passwords, no hassle. A random nickname is assigned automatically, or pick your own.
|
||||
• Universal HTML5 Sync: Flawlessly synchronizes play, pause, and seeking on Netflix, Jellyfin, Emby, YouTube, and almost any website hosting a standard HTML5 <video> tag.
|
||||
• Smart Binge-Watching (Auto-Sync): When a new episode loads, KoalaSync automatically pauses playback in a smart lobby until everyone's video is ready. No spoilers, no one left behind.
|
||||
• One-Click Invitations: Generate a smart invite link. Once clicked, the extension instantly configures room credentials and server settings for your guests.
|
||||
• Zero-Latency Protocol: Powered by a custom WebSocket architecture designed for real-time coordination without buffering loops.
|
||||
|
||||
🛡️ UNCOMPROMISING PRIVACY
|
||||
No data collection. No compromises.
|
||||
• 100% Anonymous: Zero tracking, zero analytics, zero telemetry.
|
||||
• Ready Out-Of-The-Box: No technical knowledge needed. Install and start watching immediately using the official public server.
|
||||
• RAM-Only Public Server: The official relay server operates entirely in volatile RAM. No databases, no logs, no watch history — nothing persists.
|
||||
• Self-Hostable: Take total control by deploying a private relay server in seconds via Docker. Optional, never required.
|
||||
|
||||
🚀 HOW IT WORKS
|
||||
1. Install KoalaSync and click "Create Room" to spin up a secure lobby.
|
||||
2. Copy the invite link and send it to your friends.
|
||||
3. Open your favorite streaming site and set the video tab as the active target.
|
||||
4. Press play — everyone stays perfectly in sync.
|
||||
|
||||
💻 OPEN SOURCE
|
||||
KoalaSync was built by a solo developer who needed a fast, secure way to watch movies with friends — and builds tools worth using. The code is fully transparent under the MIT license: audit it, fork it, improve it. Found a bug or have a feature idea? Open an issue on GitHub. Contributions and code reviews are always welcome.
|
||||
• Website: https://sync.koalastuff.net
|
||||
• GitHub: https://github.com/Shik3i/KoalaSync
|
||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 852 B After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 4.9 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 10 KiB |
@@ -32,7 +32,8 @@ function runCheck([label, command, args, options = {}]) {
|
||||
const child = spawn(command, args, {
|
||||
cwd: options.cwd || repoRoot,
|
||||
env: { ...process.env, ...(options.env || {}) },
|
||||
stdio: 'inherit'
|
||||
stdio: 'inherit',
|
||||
shell: process.platform === 'win32'
|
||||
});
|
||||
child.on('error', reject);
|
||||
child.on('exit', (code) => {
|
||||
|
||||
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
@@ -72,6 +72,51 @@ async function compile() {
|
||||
const wwwDir = path.join(websiteDir, 'www');
|
||||
fs.mkdirSync(wwwDir, { recursive: true });
|
||||
|
||||
// ── 0. Auto-generate website logo sizes and sync favicons ──
|
||||
console.log('Generating responsive website logos...');
|
||||
const rawLogoSrc = path.join(websiteDir, '..', 'assets', 'icon', 'TwoPointZero_Logo_Icon_600.webp');
|
||||
const targetAssetsDir = path.join(websiteDir, 'assets');
|
||||
|
||||
if (fs.existsSync(rawLogoSrc)) {
|
||||
fs.mkdirSync(targetAssetsDir, { recursive: true });
|
||||
|
||||
// Generate NewLogoIcon_64.webp (64x64)
|
||||
await sharp(rawLogoSrc)
|
||||
.resize(64, 64)
|
||||
.toFile(path.join(targetAssetsDir, 'NewLogoIcon_64.webp'));
|
||||
|
||||
// Generate NewLogoIcon_128.webp (128x128)
|
||||
await sharp(rawLogoSrc)
|
||||
.resize(128, 128)
|
||||
.toFile(path.join(targetAssetsDir, 'NewLogoIcon_128.webp'));
|
||||
|
||||
// Generate NewLogoIcon.webp (256x256)
|
||||
await sharp(rawLogoSrc)
|
||||
.resize(256, 256)
|
||||
.toFile(path.join(targetAssetsDir, 'NewLogoIcon.webp'));
|
||||
|
||||
console.log(' ✓ WebP logo variants successfully generated in website/assets/');
|
||||
} else {
|
||||
console.warn(` ⚠️ Warning: Source logo ${rawLogoSrc} not found. Skipping auto-generation.`);
|
||||
}
|
||||
|
||||
const pngMappings = [
|
||||
{ src: 'TwoPointZero_Logo_Icon_16.png', dest: 'favicon-16x16.png' },
|
||||
{ src: 'TwoPointZero_Logo_Icon_32.png', dest: 'favicon-32x32.png' },
|
||||
{ src: 'TwoPointZero_Logo_Icon_256.png', dest: 'apple-touch-icon.png' },
|
||||
{ src: 'TwoPointZero_Logo_Icon_256.png', dest: 'icon-192x192.png' }
|
||||
];
|
||||
for (const mapping of pngMappings) {
|
||||
const srcPath = path.join(websiteDir, '..', 'assets', 'icon', mapping.src);
|
||||
const destPath = path.join(targetAssetsDir, mapping.dest);
|
||||
if (fs.existsSync(srcPath)) {
|
||||
fs.copyFileSync(srcPath, destPath);
|
||||
} else {
|
||||
console.warn(` ⚠️ Warning: Source PNG ${srcPath} not found.`);
|
||||
}
|
||||
}
|
||||
console.log(' ✓ Favicons/touch icons successfully synced to website/assets/');
|
||||
|
||||
// ── 1. Minify CSS/JS (must happen first so hashes go into HTML) ──
|
||||
console.log('Minifying CSS/JS...');
|
||||
const styleRaw = fs.readFileSync(path.join(websiteDir, 'style.css'), 'utf8');
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<nav>
|
||||
<div class="container nav-content">
|
||||
<div class="logo-area">
|
||||
<img src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
|
||||
<img src="{{ASSET_PATH}}assets/NewLogoIcon_128.webp" srcset="{{ASSET_PATH}}assets/NewLogoIcon_64.webp 64w, {{ASSET_PATH}}assets/NewLogoIcon_128.webp 128w, {{ASSET_PATH}}assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64">
|
||||
<span>KoalaSync</span>
|
||||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" width="12" height="12"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 5.1 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.6 KiB |
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
@@ -178,7 +178,7 @@
|
||||
<nav>
|
||||
<div class="container nav-content">
|
||||
<div class="logo-area">
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 256w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<span>KoalaSync</span>
|
||||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<nav>
|
||||
<div class="container nav-content">
|
||||
<div class="logo-area">
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 256w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<span>KoalaSync</span>
|
||||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<nav>
|
||||
<div class="container nav-content">
|
||||
<div class="logo-area">
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 256w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<span>KoalaSync</span>
|
||||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<nav>
|
||||
<div class="container nav-content">
|
||||
<div class="logo-area">
|
||||
<picture><source srcset="assets/NewLogoIcon_64.avif 64w, assets/NewLogoIcon_128.avif 128w, assets/NewLogoIcon.avif 200w" type="image/avif"><img src="assets/NewLogoIcon_128.webp" srcset="assets/NewLogoIcon_64.webp 64w, assets/NewLogoIcon_128.webp 128w, assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<picture><source srcset="assets/NewLogoIcon_64.avif 64w, assets/NewLogoIcon_128.avif 128w, assets/NewLogoIcon.avif 256w" type="image/avif"><img src="assets/NewLogoIcon_128.webp" srcset="assets/NewLogoIcon_64.webp 64w, assets/NewLogoIcon_128.webp 128w, assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<span>KoalaSync</span>
|
||||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<nav>
|
||||
<div class="container nav-content">
|
||||
<div class="logo-area">
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 256w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<span>KoalaSync</span>
|
||||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
|
||||
@@ -178,7 +178,7 @@
|
||||
<nav>
|
||||
<div class="container nav-content">
|
||||
<div class="logo-area">
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 200w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 200w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<picture><source srcset="../assets/NewLogoIcon_64.avif 64w, ../assets/NewLogoIcon_128.avif 128w, ../assets/NewLogoIcon.avif 256w" type="image/avif"><img src="../assets/NewLogoIcon_128.webp" srcset="../assets/NewLogoIcon_64.webp 64w, ../assets/NewLogoIcon_128.webp 128w, ../assets/NewLogoIcon.webp 256w" sizes="64px" alt="KoalaSync Logo" width="64" height="64"></picture>
|
||||
<span>KoalaSync</span>
|
||||
<div id="nav-extension-status" class="nav-ext-status" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
|
||||