mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-16 14:28:20 +00:00
Timo
60 lines
20 KiB
JavaScript
60 lines
20 KiB
JavaScript
document.addEventListener("DOMContentLoaded",()=>{const E=s=>{try{return localStorage.getItem(s)}catch{return null}},C=(s,o)=>{try{localStorage.setItem(s,o)}catch{return}},A=document.querySelectorAll("[data-reveal]"),b=new IntersectionObserver(s=>{s.forEach(o=>{o.isIntersecting&&(o.target.classList.add("revealed"),b.unobserve(o.target))})},{rootMargin:"0px 0px -150px 0px",threshold:.1});A.forEach(s=>b.observe(s));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(s=>{s.addEventListener("click",function(o){o.preventDefault();const a=document.querySelector(this.getAttribute("href"));a&&a.scrollIntoView({behavior:"smooth",block:"start"})})});const I=()=>{const s=window.location.pathname.includes("join");let a=new URLSearchParams(window.location.search).get("dev");if(!a){const t=window.location.hash.startsWith("#")?window.location.hash.substring(1):window.location.hash;a=new URLSearchParams(t).get("dev")}if(a||((window.location.hash.includes("devsuccess")||window.location.search.includes("devsuccess"))&&(a="success"),(window.location.hash.includes("devfailure")||window.location.search.includes("devfailure"))&&(a="failure")),s&&a){setTimeout(()=>{const t=document.getElementById("display-room-id"),e=document.getElementById("join-actions");t&&(t.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:a==="success",message:a==="failure"?"Simulated Connection Timeout!":""}}))},1500))},600);return}setTimeout(()=>{const t=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],r=e[3]||"0",n=e[4]?decodeURIComponent(e[4]):"";if(s){const i=document.getElementById("display-room-id"),c=document.getElementById("join-actions");i&&(i.textContent=l),c&&(t?(c.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:r==="1",serverUrl:n}}))},500)):navigator.userAgent.includes("Firefox")?c.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>
|
|
`:c.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 i=document.createElement("div");i.className="invite-banner",i.id="koala-banner";const c=document.createElement("div");c.className="container",c.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 g=document.createElement("a");g.href="join"+window.location.hash,g.className="btn-banner",g.textContent="OPEN JOIN PAGE",c.appendChild(d),c.appendChild(g),i.appendChild(c),document.body.prepend(i)}document.addEventListener("click",i=>{i.target&&i.target.id==="webJoinBtn"&&(i.target.textContent="JOINING...",i.target.disabled=!0,window.dispatchEvent(new CustomEvent("KOALASYNC_JOIN_REQUEST",{detail:{roomId:l,password:u,useCustomServer:r==="1",serverUrl:n}})))})}}},600)};window.addEventListener("KOALASYNC_STATUS",s=>{const{success:o,message:a}=s.detail;if(window.location.pathname.includes("join")){const e=document.getElementById("join-status-icon"),l=document.getElementById("join-title"),u=document.getElementById("join-actions"),r=document.getElementById("join-desc"),n=document.getElementById("status-ring");if(o){n&&(n.classList.remove("active-pulse"),n.style.display="none"),e&&(e.innerHTML='<img src="assets/KoalaThumbsUp.webp" alt="Success" class="join-status-mascot">',e.style.transform="scale(1)");const i=document.documentElement.classList.contains("lang-de");l.textContent=i?"Erfolgreich!":"Success!",r.innerHTML=i?'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 c=3;const d=()=>{c<=0?(window.close(),r.textContent=i?"Beitritt erfolgreich! Du kannst diesen Tab jetzt manuell schlie\xDFen.":"Joined successfully! You can close this tab manually."):(c--,setTimeout(d,1e3))};setTimeout(d,1e3);const m=i?"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{n&&(n.classList.remove("active-pulse"),n.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 i=document.documentElement.classList.contains("lang-de");l.textContent=i?"Fehler":"Error",r.textContent=i?`Beitritt fehlgeschlagen: ${a}`:`Join failed: ${a}`;const c=i?"ERNEUT VERSUCHEN":"TRY AGAIN";u.innerHTML=`
|
|
<div class="join-card-actions">
|
|
<button class="btn btn-primary" onclick="location.reload()">${c}</button>
|
|
</div>
|
|
`}}else{const e=document.getElementById("koala-banner");if(e)if(o)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: "+a,e.appendChild(l)}}});const j=async()=>{try{const s=document.documentElement.lang==="en"?"version.json":"../version.json",o=await fetch(s);if(!o.ok)return;const a=await o.json(),{version:t,date:e}=a;if(!t||!e)return;const l=new Date(e),r=new Date-l,n=Math.floor(r/(1e3*60*60*24)),i=Math.floor(r/(1e3*60*60)),c=Math.floor(r/(1e3*60));let d="",m="";n>0?(d=`${n} ${n===1?"day":"days"} ago`,m=`vor ${n} ${n===1?"Tag":"Tagen"}`):i>0?(d=`${i} ${i===1?"hour":"hours"} ago`,m=`vor ${i} ${i===1?"Stunde":"Stunden"}`):c>0?(d=`${c} ${c===1?"minute":"minutes"} ago`,m=`vor ${c} ${c===1?"Minute":"Minuten"}`):(d="just now",m="gerade eben");const g=document.querySelector(".version-text-en"),T=document.querySelector(".version-text-de");g&&(g.textContent=`v${t} OUT NOW \u2022 ${d}`),T&&(T.textContent=`v${t} JETZT VERF\xDCGBAR \u2022 ${m}`);const w=document.getElementById("schema-software");if(w)try{const y=JSON.parse(w.textContent);y.softwareVersion=t,w.textContent=JSON.stringify(y,null,2)}catch(y){console.warn("Failed to dynamically update schema version:",y)}}catch(s){console.warn("Failed to fetch dynamic version info:",s)}},S=document.querySelectorAll(".mock-tab"),B=document.querySelectorAll(".mock-screen");S.forEach(s=>{s.addEventListener("click",()=>{S.forEach(t=>t.classList.remove("active")),B.forEach(t=>t.classList.remove("active")),s.classList.add("active");const o=s.getAttribute("data-target"),a=document.getElementById(o);a&&a.classList.add("active")})});const L=document.querySelectorAll(".terminal-tab-btn"),M=document.querySelectorAll(".terminal-pane");L.forEach(s=>{s.addEventListener("click",()=>{L.forEach(t=>t.classList.remove("active")),M.forEach(t=>t.classList.remove("active")),s.classList.add("active");const o=s.getAttribute("data-tab"),a=document.getElementById(o);a&&a.classList.add("active")})});const h=document.querySelector(".terminal-copy-btn");h&&h.addEventListener("click",()=>{const s=document.querySelector(".terminal-pane.active");if(!s)return;const o=s.querySelector("code");if(!o)return;const a=o.innerText||o.textContent;navigator.clipboard.writeText(a).then(()=>{const t=document.documentElement.classList.contains("lang-de"),e=h.innerHTML;h.innerHTML=t?"\u2705 Kopiert!":"\u2705 Copied!",h.disabled=!0,setTimeout(()=>{h.innerHTML=e,h.disabled=!1},2e3)}).catch(t=>{console.error("Failed to copy text: ",t)})});const p=document.querySelector(".hamburger"),f=document.querySelector("#primary-nav");if(p&&f){p.setAttribute("aria-expanded","false");const s=()=>{f.classList.add("open"),p.setAttribute("aria-expanded","true"),document.addEventListener("keydown",t)},o=()=>{f.classList.remove("open"),p.setAttribute("aria-expanded","false"),document.removeEventListener("keydown",t)},a=()=>f.classList.contains("open")?o():s(),t=e=>{e.key==="Escape"&&o()};p.addEventListener("click",a),f.querySelectorAll("a").forEach(e=>e.addEventListener("click",o))}const x=()=>{const s=E("koala_lang")||(navigator.language.startsWith("de")?"de":"en");window.location.pathname.split("/").some(e=>["de","fr","es","pt-BR","ru","it","pl","tr","nl","ja","ko","pt"].includes(e))||document.querySelectorAll('a[href="./"], a[href="de/"], a[href="fr/"], a[href="es/"], a[href="pt-BR/"], a[href="ru/"], a[href="it/"], a[href="pl/"], a[href="tr/"], a[href="nl/"], a[href="ja/"], a[href="ko/"], a[href="pt/"]').forEach(l=>{l.href=s==="en"?"./":`${s}/`})},N=s=>{const a=s.currentTarget.value,t=window.location.pathname;C("koala_lang",a);const e=t.includes("impressum")||t.includes("imprint"),l=t.includes("datenschutz")||t.includes("privacy");if(e){let r;const n=t.endsWith(".html");a==="de"?(r=n?"de/impressum.html":"de/impressum",t.includes("/de/")&&(r=n?"impressum.html":"impressum")):(r=n?"imprint.html":"imprint",t.includes("/de/")&&(r=n?"../imprint.html":"../imprint")),window.location.href=r;return}else if(l){let r;const n=t.endsWith(".html");a==="de"?(r=n?"de/datenschutz.html":"de/datenschutz",t.includes("/de/")&&(r=n?"datenschutz.html":"datenschutz")):(r=n?"privacy.html":"privacy",t.includes("/de/")&&(r=n?"../privacy.html":"../privacy")),window.location.href=r;return}if(!t.includes("join")){const n=t.split("/").some(c=>["de","fr","es","pt-BR","ru","it","pl","tr","nl","ja","ko","pt"].includes(c));let i;a==="en"?n?i="../":i="./":n?i="../"+a+"/":i=a+"/",window.location.href=i}else{const r=document.documentElement;r.classList.remove("lang-en","lang-de","lang-fr","lang-es","lang-pt-br","lang-ru","lang-it","lang-pl","lang-tr","lang-nl","lang-ja","lang-ko","lang-pt");const n=a==="de"?"de":"en";if(r.classList.add("lang-"+n),r.lang=n,document.querySelectorAll(".lang-dropdown").forEach(c=>{c.value=a}),t.includes("join")){const c={en:"Join Room | KoalaSync",de:"Raum beitreten | KoalaSync"};document.title=c[n]||c.en}x()}},k=()=>{document.querySelectorAll(".lang-dropdown").forEach(s=>{const o=document.createElement("span"),a=window.getComputedStyle(s);o.style.fontFamily=a.fontFamily,o.style.fontSize=a.fontSize,o.style.fontWeight=a.fontWeight,o.style.visibility="hidden",o.style.position="absolute",o.style.whiteSpace="nowrap";const t=s.options[s.selectedIndex];if(t){o.textContent=t.textContent,document.body.appendChild(o);const e=o.getBoundingClientRect().width;s.style.width=e+18+"px",document.body.removeChild(o)}})};document.querySelectorAll(".lang-dropdown").forEach(s=>{s.addEventListener("change",o=>{N(o),k()})});const O=()=>{const s=E("koala_lang"),o=navigator.language.startsWith("de")?"de":"en",a=s||o;document.querySelectorAll(".lang-dropdown").forEach(t=>{t.value=a}),k()};document.querySelectorAll(".email-reveal").forEach(s=>{s.addEventListener("click",function(){const o=this.getAttribute("data-user"),a=this.getAttribute("data-domain");o&&a&&(this.textContent=`${o}@${a}`)})}),(()=>{const s=navigator.userAgent.includes("Firefox"),o=navigator.userAgent.includes("Chrome")||navigator.userAgent.includes("Chromium"),a=document.querySelectorAll(".btn-primary"),t=document.querySelectorAll(".btn-firefox");s&&a.length>0&&t.length>0?(a.forEach(e=>{e.classList.remove("btn-primary"),e.classList.add("btn-secondary")}),t.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)"})})):o&&a.length>0&&t.length>0&&t.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"),r=document.querySelectorAll(".illus-store-btn.firefox");if(s&&r.length>0?(r.forEach(n=>{n.style.order="-1",e||(n.classList.add("install-breathe"),n.style.cursor="pointer",n.onclick=()=>window.open("https://addons.mozilla.org/de/firefox/addon/koalasync/","_blank"))}),u.forEach(n=>{n.style.opacity="0.5",n.style.transform="scale(0.95)"})):o&&u.length>0&&(u.forEach(n=>{n.style.order="-1",e||(n.classList.add("install-breathe"),n.style.cursor="pointer",n.onclick=()=>window.open("https://chromewebstore.google.com/detail/koalasync/obbnmkmlaaddodakcbdljknjpagklifc","_blank"))}),r.forEach(n=>{n.style.opacity="0.5",n.style.transform="scale(0.95)"})),!e){const n=document.querySelectorAll(s?".btn-firefox":o?".btn-primary":null);n&&n.length>0&&n.forEach(i=>{const d=i.classList.contains("btn-firefox")?"rgba(249, 115, 22, ":"rgba(99, 102, 241, ";i.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)})(),I(),j(),x(),O()});
|