mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-10 19:48:28 +00:00
Timo
60 lines
18 KiB
JavaScript
60 lines
18 KiB
JavaScript
document.addEventListener("DOMContentLoaded",()=>{const T=document.querySelectorAll("[data-reveal]"),w=new IntersectionObserver(n=>{n.forEach(i=>{i.isIntersecting&&(i.target.classList.add("revealed"),w.unobserve(i.target))})},{rootMargin:"0px 0px -150px 0px",threshold:.1});T.forEach(n=>w.observe(n));const v=document.querySelector("nav");window.addEventListener("scroll",()=>{window.scrollY>50?(v.style.padding="0.75rem 0",v.style.background="rgba(15, 23, 42, 0.9)"):(v.style.padding="1rem 0",v.style.background="rgba(30, 41, 59, 0.7)")}),document.querySelectorAll('a[href^="#"]').forEach(n=>{n.addEventListener("click",function(i){i.preventDefault();const t=document.querySelector(this.getAttribute("href"));t&&t.scrollIntoView({behavior:"smooth",block:"start"})})});const k=()=>{const n=window.location.pathname.includes("join");let t=new URLSearchParams(window.location.search).get("dev");if(!t){const o=window.location.hash.startsWith("#")?window.location.hash.substring(1):window.location.hash;t=new URLSearchParams(o).get("dev")}if(t||((window.location.hash.includes("devsuccess")||window.location.search.includes("devsuccess"))&&(t="success"),(window.location.hash.includes("devfailure")||window.location.search.includes("devfailure"))&&(t="failure")),n&&t){setTimeout(()=>{const o=document.getElementById("display-room-id"),e=document.getElementById("join-actions");o&&(o.textContent="DEV-ROOM"),e&&(e.innerHTML=`
|
|
<div class="joining-spinner" style="text-align:center; padding: 1rem;">
|
|
<div class="join-spinner"></div>
|
|
<div style="font-weight: 600; color: var(--accent);">
|
|
<span lang="en">Simulating connection (DEV)...</span><span lang="de">Verbindung wird simuliert (DEV)...</span>
|
|
</div>
|
|
<p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">
|
|
<span lang="en">Simulating status event in 1.5 seconds.</span><span lang="de">Status-Event wird in 1,5 Sekunden simuliert.</span>
|
|
</p>
|
|
</div>
|
|
`,setTimeout(()=>{window.dispatchEvent(new CustomEvent("KOALASYNC_STATUS",{detail:{success:t==="success",message:t==="failure"?"Simulated Connection Timeout!":""}}))},1500))},600);return}setTimeout(()=>{const o=document.documentElement.dataset.koalasyncInstalled==="true";if(window.location.hash.startsWith("#join:")){const e=window.location.hash.split(":");if(e.length>=3){const l=e[1],u=e[2],c=e[3]||"0",s=e[4]?decodeURIComponent(e[4]):"";if(n){const a=document.getElementById("display-room-id"),r=document.getElementById("join-actions");a&&(a.textContent=l),r&&(o?(r.innerHTML=`
|
|
<div class="joining-spinner" style="text-align:center; padding: 1rem;">
|
|
<div class="join-spinner"></div>
|
|
<div style="font-weight: 600; color: var(--accent);">
|
|
<span lang="en">Joining room automatically...</span><span lang="de">Raum wird automatisch betreten...</span>
|
|
</div>
|
|
<p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;">
|
|
<span lang="en">Your extension is taking care of it.</span><span lang="de">Deine Erweiterung k\xFCmmert sich darum.</span>
|
|
</p>
|
|
</div>
|
|
`,setTimeout(()=>{window.dispatchEvent(new CustomEvent("KOALASYNC_JOIN_REQUEST",{detail:{roomId:l,password:u,useCustomServer:c==="1",serverUrl:s}}))},500)):navigator.userAgent.includes("Firefox")?r.innerHTML=`
|
|
<div class="join-card-actions">
|
|
<a href="https://addons.mozilla.org/de/firefox/addon/koalasync/" class="btn btn-primary btn-firefox">
|
|
<img src="assets/firefox.svg" alt="Firefox" width="20" style="display: block;">
|
|
<span lang="en">GET IT ON MOZILLA ADD-ONS</span><span lang="de">IM FIREFOX ADD-ON STORE HERUNTERLADEN</span>
|
|
</a>
|
|
<a href="https://github.com/shik3i/KoalaSync" target="_blank" class="btn btn-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
<span lang="en">Download via GitHub</span><span lang="de">\xDCber GitHub herunterladen</span>
|
|
</a>
|
|
</div>
|
|
<p style="text-align:center; font-size:0.8rem; opacity:0.7; margin-top: 1.2rem; color: var(--text-muted);">
|
|
<span lang="en">The extension is required to join and sync videos.</span>
|
|
<span lang="de">Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren.</span>
|
|
</p>
|
|
`:r.innerHTML=`
|
|
<div class="join-card-actions">
|
|
<a href="https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc" class="btn btn-primary">
|
|
<img src="assets/chrome.svg" alt="Chrome" width="20" style="display: block;">
|
|
<span lang="en">GET IT ON CHROME WEBSTORE</span><span lang="de">IM CHROME WEB STORE HERUNTERLADEN</span>
|
|
</a>
|
|
<a href="https://github.com/shik3i/KoalaSync" target="_blank" class="btn btn-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16" aria-hidden="true" style="display: block;"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
<span lang="en">Download via GitHub</span><span lang="de">\xDCber GitHub herunterladen</span>
|
|
</a>
|
|
</div>
|
|
<p style="text-align:center; font-size:0.8rem; opacity:0.7; margin-top: 1.2rem; color: var(--text-muted);">
|
|
<span lang="en">The extension is required to join and sync videos.</span>
|
|
<span lang="de">Die Erweiterung ist erforderlich, um beizutreten und Videos zu synchronisieren.</span>
|
|
</p>
|
|
`)}else if(!document.getElementById("koala-banner")){const a=document.createElement("div");a.className="invite-banner",a.id="koala-banner";const r=document.createElement("div");r.className="container",r.style.cssText="display:flex; justify-content:space-between; align-items:center;";const d=document.createElement("span");d.appendChild(document.createTextNode("\u{1F3AB} Invitation for "));const m=document.createElement("b");m.textContent=l,d.appendChild(m),d.appendChild(document.createTextNode(" detected!"));const h=document.createElement("a");h.href="join"+window.location.hash,h.className="btn-banner",h.textContent="OPEN JOIN PAGE",r.appendChild(d),r.appendChild(h),a.appendChild(r),document.body.prepend(a)}document.addEventListener("click",a=>{a.target&&a.target.id==="webJoinBtn"&&(a.target.textContent="JOINING...",a.target.disabled=!0,window.dispatchEvent(new CustomEvent("KOALASYNC_JOIN_REQUEST",{detail:{roomId:l,password:u,useCustomServer:c==="1",serverUrl:s}})))})}}},600)};window.addEventListener("KOALASYNC_STATUS",n=>{const{success:i,message:t}=n.detail;if(window.location.pathname.includes("join")){const e=document.getElementById("join-status-icon"),l=document.getElementById("join-title"),u=document.getElementById("join-actions"),c=document.getElementById("join-desc"),s=document.getElementById("status-ring");if(i){s&&(s.classList.remove("active-pulse"),s.style.display="none"),e&&(e.innerHTML='<img src="assets/KoalaThumbsUp.webp" alt="Success" class="join-status-mascot">',e.style.transform="scale(1)");const a=document.documentElement.classList.contains("lang-de");l.textContent=a?"Erfolgreich!":"Success!",c.innerHTML=a?'Verbunden! <br><span style="color:var(--accent); font-weight:bold;">W\xE4hle jetzt einen Video-Tab in der Erweiterung aus.</span>':'Connected! <br><span style="color:var(--accent); font-weight:bold;">Now select a video tab in the extension.</span>';let r=3;const d=()=>{r<=0?(window.close(),c.textContent=a?"Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schlie\xDFen.":"Joined successfully! You can close this tab manually."):(r--,setTimeout(d,1e3))};setTimeout(d,1e3);const m=a?"TAB JETZT SCHLIESSEN":"CLOSE TAB NOW";u.innerHTML=`
|
|
<div class="join-card-actions">
|
|
<button class="btn btn-success" onclick="window.close()">${m}</button>
|
|
</div>
|
|
`}else{s&&(s.classList.remove("active-pulse"),s.style.display="none"),e&&(e.innerHTML=`<img src="assets/KoalaThumbsDown.webp" alt="Error" class="join-status-mascot" onerror="this.outerHTML='\u274C'">`,e.style.transform="scale(1)");const a=document.documentElement.classList.contains("lang-de");l.textContent=a?"Fehler":"Error",c.textContent=a?`Beitritt fehlgeschlagen: ${t}`:`Join failed: ${t}`;const r=a?"ERNEUT VERSUCHEN":"TRY AGAIN";u.innerHTML=`
|
|
<div class="join-card-actions">
|
|
<button class="btn btn-primary" onclick="location.reload()">${r}</button>
|
|
</div>
|
|
`}}else{const e=document.getElementById("koala-banner");if(e)if(i)e.style.background="var(--success)",e.innerHTML='<div class="container">\u2705 Joined! This tab will close in 2s...</div>',setTimeout(()=>window.close(),2e3);else{e.style.background="var(--error)",e.innerHTML="";const l=document.createElement("div");l.className="container",l.textContent="\u274C Error: "+t,e.appendChild(l)}}});const C=async()=>{try{const n=document.documentElement.lang==="de"?"../version.json":"version.json",i=await fetch(n);if(!i.ok)return;const t=await i.json(),{version:o,date:e}=t;if(!o||!e)return;const l=new Date(e),c=new Date-l,s=Math.floor(c/(1e3*60*60*24)),a=Math.floor(c/(1e3*60*60)),r=Math.floor(c/(1e3*60));let d="",m="";s>0?(d=`${s} ${s===1?"day":"days"} ago`,m=`vor ${s} ${s===1?"Tag":"Tagen"}`):a>0?(d=`${a} ${a===1?"hour":"hours"} ago`,m=`vor ${a} ${a===1?"Stunde":"Stunden"}`):r>0?(d=`${r} ${r===1?"minute":"minutes"} ago`,m=`vor ${r} ${r===1?"Minute":"Minuten"}`):(d="just now",m="gerade eben");const h=document.querySelector(".version-text-en"),x=document.querySelector(".version-text-de");h&&(h.textContent=`v${o} OUT NOW \u2022 ${d}`),x&&(x.textContent=`v${o} JETZT VERF\xDCGBAR \u2022 ${m}`);const E=document.getElementById("schema-software");if(E)try{const y=JSON.parse(E.textContent);y.softwareVersion=o,E.textContent=JSON.stringify(y,null,2)}catch(y){console.warn("Failed to dynamically update schema version:",y)}}catch(n){console.warn("Failed to fetch dynamic version info:",n)}},b=document.querySelectorAll(".mock-tab"),A=document.querySelectorAll(".mock-screen");b.forEach(n=>{n.addEventListener("click",()=>{b.forEach(o=>o.classList.remove("active")),A.forEach(o=>o.classList.remove("active")),n.classList.add("active");const i=n.getAttribute("data-target"),t=document.getElementById(i);t&&t.classList.add("active")})});const L=document.querySelectorAll(".terminal-tab-btn"),I=document.querySelectorAll(".terminal-pane");L.forEach(n=>{n.addEventListener("click",()=>{L.forEach(o=>o.classList.remove("active")),I.forEach(o=>o.classList.remove("active")),n.classList.add("active");const i=n.getAttribute("data-tab"),t=document.getElementById(i);t&&t.classList.add("active")})});const g=document.querySelector(".terminal-copy-btn");g&&g.addEventListener("click",()=>{const n=document.querySelector(".terminal-pane.active");if(!n)return;const i=n.querySelector("code");if(!i)return;const t=i.innerText||i.textContent;navigator.clipboard.writeText(t).then(()=>{const o=document.documentElement.classList.contains("lang-de"),e=g.innerHTML;g.innerHTML=o?"\u2705 Kopiert!":"\u2705 Copied!",g.disabled=!0,setTimeout(()=>{g.innerHTML=e,g.disabled=!1},2e3)}).catch(o=>{console.error("Failed to copy text: ",o)})});const f=document.querySelector(".hamburger"),p=document.querySelector("#primary-nav");if(f&&p){f.setAttribute("aria-expanded","false");const n=()=>{p.classList.add("open"),f.setAttribute("aria-expanded","true"),document.addEventListener("keydown",o)},i=()=>{p.classList.remove("open"),f.setAttribute("aria-expanded","false"),document.removeEventListener("keydown",o)},t=()=>p.classList.contains("open")?i():n(),o=e=>{e.key==="Escape"&&i()};f.addEventListener("click",t),p.querySelectorAll("a").forEach(e=>e.addEventListener("click",i))}const S=()=>{const n=localStorage.getItem("koala_lang")||(navigator.language.startsWith("de")?"de":"en");window.location.pathname.split("/").some(e=>["de","fr","es","pt-BR","ru"].includes(e))||document.querySelectorAll('a[href="./"], a[href="de/"], a[href="fr/"], a[href="es/"], a[href="pt-BR/"], a[href="ru/"]').forEach(l=>{l.href=n==="en"?"./":`${n}/`})},B=n=>{const t=n.currentTarget.value,o=window.location.pathname;if(localStorage.setItem("koala_lang",t),!(o.includes("impressum")||o.includes("datenschutz")||o.includes("join"))){const c=o.split("/").some(a=>["de","fr","es","pt-BR","ru"].includes(a));let s;t==="en"?c?s="../":s="./":c?s="../"+t+"/":s=t+"/",window.location.href=s}else{const u=document.documentElement;u.classList.remove("lang-en","lang-de","lang-fr","lang-es","lang-pt-br","lang-ru");const c=t==="de"?"de":"en";if(u.classList.add("lang-"+c),u.lang=c,document.querySelectorAll(".lang-dropdown").forEach(a=>{a.value=t}),o.includes("join")){const a={en:"Join Room | KoalaSync",de:"Raum beitreten | KoalaSync"};document.title=a[c]||a.en}S()}};document.querySelectorAll(".lang-dropdown").forEach(n=>{n.addEventListener("change",B)});const j=()=>{const n=localStorage.getItem("koala_lang"),i=navigator.language.startsWith("de")?"de":"en",t=n||i;document.querySelectorAll(".lang-dropdown").forEach(o=>{o.value=t})};document.querySelectorAll(".email-reveal").forEach(n=>{n.addEventListener("click",function(){const i=this.getAttribute("data-user"),t=this.getAttribute("data-domain");i&&t&&(this.innerHTML=`${i}@${t}`)})}),(()=>{const n=navigator.userAgent.includes("Firefox"),i=navigator.userAgent.includes("Chrome")||navigator.userAgent.includes("Chromium"),t=document.querySelectorAll(".btn-primary"),o=document.querySelectorAll(".btn-firefox");n&&t.length>0&&o.length>0?(t.forEach(e=>{e.classList.remove("btn-primary"),e.classList.add("btn-secondary")}),o.forEach(e=>{e.style.order="-1",e.style.transform="scale(1.05)",e.addEventListener("mouseleave",()=>{e.style.transform="scale(1)"}),e.addEventListener("mouseenter",()=>{e.style.transform="scale(1.05) translateY(-2px)"})})):i&&t.length>0&&o.length>0&&o.forEach(e=>{e.classList.remove("btn-firefox"),e.classList.add("btn-secondary"),e.style.color="var(--text)",e.style.background="var(--card)",e.style.border="1px solid var(--glass-border)",e.style.boxShadow="none"}),setTimeout(()=>{const e=document.documentElement.dataset.koalasyncInstalled==="true",l=document.getElementById("nav-extension-status");e&&l&&(l.style.display="inline-flex");const u=document.querySelectorAll(".illus-store-btn.chrome"),c=document.querySelectorAll(".illus-store-btn.firefox");if(n&&c.length>0?(c.forEach(s=>{s.style.order="-1",e||(s.classList.add("install-breathe"),s.style.cursor="pointer",s.onclick=()=>window.open("https://addons.mozilla.org/de/firefox/addon/koalasync/","_blank"))}),u.forEach(s=>{s.style.opacity="0.5",s.style.transform="scale(0.95)"})):i&&u.length>0&&(u.forEach(s=>{s.style.order="-1",e||(s.classList.add("install-breathe"),s.style.cursor="pointer",s.onclick=()=>window.open("https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc","_blank"))}),c.forEach(s=>{s.style.opacity="0.5",s.style.transform="scale(0.95)"})),!e){const s=document.querySelectorAll(n?".btn-firefox":i?".btn-primary":null);s&&s.length>0&&s.forEach(a=>{const d=a.classList.contains("btn-firefox")?"rgba(249, 115, 22, ":"rgba(99, 102, 241, ";a.animate([{transform:"scale(1)",boxShadow:`0 0 15px ${d}0.2)`},{transform:"scale(1.05)",boxShadow:`0 0 25px ${d}0.5)`},{transform:"scale(1)",boxShadow:`0 0 15px ${d}0.2)`}],{duration:2500,iterations:1/0,easing:"ease-in-out"})})}},600)})(),k(),C(),S(),j()});
|