/* The session's scatter: the same stars for every sky in it, and for the page's starfield once they settle. Polar about the centre, with the tier's line width and a colour at a fixed alpha. */ window.__agoraSkyScatter = function (seed, w, h) { var rnd = (function (a) { return function () { a = (a + 0x6d2b79f5) >>> 0; var t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; })(seed); var COLOURS = [[200, 225, 255], [120, 170, 255], [255, 240, 214], [255, 183, 0]]; var SIZES = [[0.7, 0.4], [1.2, 0.62], [1.9, 0.9]]; var px = w / 2, py = h / 2; var count = Math.max(220, Math.round(w * h * 0.00035)); var m = Math.hypot(w, h) * 0.06; var stars = []; for (var i = 0; i < count; i++) { var x = -m + rnd() * (w + 2 * m), y = -m + rnd() * (h + 2 * m); var r = Math.hypot(x - px, y - py); if (r < 12) continue; var t = rnd(); var size = SIZES[t < 0.7 ? 0 : t < 0.94 ? 1 : 2]; var c = rnd(); var col = COLOURS[c < 0.62 ? 0 : c < 0.84 ? 1 : c < 0.95 ? 2 : 3]; var alpha = +(size[1] * (rnd() < 0.5 ? 0.72 : 1)).toFixed(2); stars.push({ r: r, a: Math.atan2(y - py, x - px), w: size[0], col: col, alpha: alpha }); } return stars; }; /* How far a session's sky has turned after s seconds: gathering speed over the first moments, then steady. */ window.__agoraSkyTurned = function (S, s) { var R = S.ramp; return S.speed * (s - R + R * Math.exp(-s / R)); }; window.__agoraSky = function (trails, heads, center, o) { o = o || {}; var MARK_AT = o.markAt == null ? 1000 : o.markAt; var none = { stop: function () {}, elapsed: 0 }; if (!trails || !heads || trails.dataset.live) return none; var ctx = trails.getContext('2d'), hctx = heads.getContext('2d'); if (!ctx || !hctx) return none; // At the screen's own resolution: the trails are hairlines, and at // anything less they go soft on a phone or a retina display. Capped at // 3x, which is every screen made. var dpr = Math.min(3, window.devicePixelRatio || 1); var w = window.innerWidth, h = window.innerHeight; var now0 = performance.now(); var S = window.__agoraSkySession; // Continue the session while another sky is live (a page's own loading // screen under the boot splash, a fallback under the chrome's overlay) // or within a beat of the last one stopping; a settled session is // over, and anything after it is a fresh sky. var handoff = S && S.frozen == null && S.w === w && S.h === h && (S.live > 0 || (S.lastStop && now0 - S.lastStop <= 400)); // A sky carried over from the page before (window.__agoraEnter). var carried = !handoff && o.carry && window.__agoraSkyTakeCarry ? window.__agoraSkyTakeCarry() : null; // Only continuing: with nothing live and nothing carried, no sky at all. if (!handoff && !carried && o.only) return { stop: function () {}, elapsed: 0, idle: true }; trails.dataset.live = '1'; if (!handoff) { S = window.__agoraSkySession = carried ? { // The same stars — scattered for the size they were made for, about // this screen's centre — on the same clock, already turning. seed: carried.seed, start: now0 - Math.max(0, Date.now() - carried.wall), w: w, h: h, lastStop: 0, live: 0, speed: carried.speed, ramp: carried.ramp, stars: window.__agoraSkyScatter(carried.seed, carried.w, carried.h), frozen: null, reduced: false, leaving: 0, } : { seed: (Math.random() * 4294967296) >>> 0, start: null, w: w, h: h, lastStop: 0, live: 0, speed: o.speed || 1.3, ramp: o.ramp || 0.2, stars: null, frozen: null, reduced: false, leaving: 0, }; } S.live++; window.__agoraSkyLiveCount = (window.__agoraSkyLiveCount || 0) + 1; var elapsed0 = S.start == null ? 0 : now0 - S.start; // Taking over the sky brought up over a page (window.__agoraSkyOver): // once this screen has been on screen for a frame, that one steps // aside, the same stars at the same angle underneath it. if (handoff) { var over = document.querySelector('.ld-enter[data-over]'); if (over && !over.contains(trails)) { requestAnimationFrame(function () { requestAnimationFrame(function () { window.__agoraSkyOverEnd(over, false); }); }); } } var stopped = false, raf = 0, markTimer = 0, counted = true; var retire = function () { if (!counted) return; counted = false; S.live = Math.max(0, S.live - 1); window.__agoraSkyLiveCount = Math.max(0, (window.__agoraSkyLiveCount || 1) - 1); S.lastStop = performance.now(); delete trails.dataset.live; }; var stop = function () { stopped = true; cancelAnimationFrame(raf); clearTimeout(markTimer); delete trails.dataset.live; retire(); }; [[trails, ctx], [heads, hctx]].forEach(function (p) { p[0].width = Math.round(w * dpr); p[0].height = Math.round(h * dpr); p[1].setTransform(dpr, 0, 0, dpr, 0, 0); p[1].globalCompositeOperation = 'lighter'; }); var px = w / 2, py = h / 2; // The session's stars, grouped by colour and width for stroking. var stars = S.stars || (S.stars = window.__agoraSkyScatter(S.seed, w, h)); var groups = [], key = {}; for (var i = 0; i < stars.length; i++) { var st = stars[i]; var style = 'rgba(' + st.col[0] + ',' + st.col[1] + ',' + st.col[2] + ',' + st.alpha + ')'; var k = style + '/' + st.w; var g = key[k]; if (!g) { g = key[k] = { style: style, width: st.w, stars: [] }; groups.push(g); } g.stars.push(st); } function sweep(from, to) { for (var gi = 0; gi < groups.length; gi++) { var g = groups[gi]; ctx.beginPath(); ctx.strokeStyle = g.style; ctx.lineWidth = g.width; for (var si = 0; si < g.stars.length; si++) { var s = g.stars[si], a0 = s.a + from; ctx.moveTo(px + s.r * Math.cos(a0), py + s.r * Math.sin(a0)); ctx.arc(px, py, s.r, a0, s.a + to); } ctx.stroke(); } } // Heads for the two brighter tiers only — the faint ones read as // trail tips anyway, and they are seven in ten of the stars. function drawHeads(theta) { hctx.clearRect(0, 0, w, h); for (var gi = 0; gi < groups.length; gi++) { var g = groups[gi], rad = g.width * 0.9; if (g.width < 1) continue; hctx.beginPath(); hctx.fillStyle = g.style; for (var si = 0; si < g.stars.length; si++) { var s = g.stars[si], a = s.a + theta; var x = px + s.r * Math.cos(a), y = py + s.r * Math.sin(a); hctx.moveTo(x + rad, y); hctx.arc(x, y, rad, 0, Math.PI * 2); } hctx.fill(); } } function showMark(atOnce) { if (!center) return; if (atOnce) center.classList.add('is-still'); center.classList.add('is-on'); } function turned(s) { return window.__agoraSkyTurned(S, s); } ctx.clearRect(0, 0, w, h); ctx.lineCap = 'round'; sweep(0, 0.0001); // Reduced motion: the still sky, stars as points, the mark at once. if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { S.reduced = true; drawHeads(0); showMark(true); return { stop: stop, elapsed: elapsed0 }; } ctx.lineCap = 'butt'; // The sky as it stands, if this continues an earlier one. var drawn = turned(elapsed0 / 1000); if (drawn > 0) sweep(0, drawn); drawHeads(drawn); if (elapsed0 >= MARK_AT) showMark(true); else if (S.start != null) markTimer = setTimeout(showMark, MARK_AT - elapsed0); function frame(now) { if (stopped) return; // Settled: the page's starfield has the stars now; hold this frame. if (S.frozen != null) { counted = false; return; } if (!trails.isConnected || trails.offsetWidth === 0) { retire(); return; } if (S.start == null) { S.start = now; markTimer = setTimeout(showMark, MARK_AT); } var theta = turned((now - S.start) / 1000); if (theta > drawn) { sweep(drawn, theta); drawn = theta; drawHeads(theta); } raf = requestAnimationFrame(frame); } raf = requestAnimationFrame(frame); return { stop: stop, elapsed: elapsed0 }; }; /* Carrying the sky into the next document: the seed it was scattered from (and the size it was scattered for), its speed, and the wall- clock moment its clock started — performance.now() does not survive a page load, Date.now() does. Taken once, by the next page's first sky, and only within twenty seconds. */ window.__agoraSkyCarry = function () { var S = window.__agoraSkySession; if (!S || S.frozen != null) return; var wall = S.start == null ? Date.now() : Date.now() - (performance.now() - S.start); try { sessionStorage.setItem('ag-sky-carry', JSON.stringify({ seed: S.seed, w: S.w, h: S.h, speed: S.speed, ramp: S.ramp, wall: wall, at: Date.now() })); } catch (e) {} }; window.__agoraSkyTakeCarry = function () { var c = null; try { c = JSON.parse(sessionStorage.getItem('ag-sky-carry') || 'null'); sessionStorage.removeItem('ag-sky-carry'); } catch (e) { return null; } if (!c || typeof c.seed !== 'number' || !(Date.now() - c.at < 20000)) return null; return c; }; /* The entry screen: a sky over everything on the page, and at its centre the AS mark over "Entering the Agora", as the room's own screens carry them on (LoadingScreen). No bar. */ window.__agoraEnterScreen = function () { var el = document.createElement('div'); el.className = 'ld-screen ld-enter'; el.setAttribute('role', 'status'); el.setAttribute('aria-label', 'Entering the Agora'); var a = document.createElement('canvas'), b = document.createElement('canvas'); a.className = 'ld-sky'; b.className = 'ld-sky'; el.appendChild(a); el.appendChild(b); var center = document.createElement('div'); center.className = 'ld-center'; center.innerHTML = ' AgoraSphere

' + '

Entering the Agora

'; el.appendChild(center); document.body.appendChild(el); return el; }; /* Into a live room: the sky comes up over the page you are on, and once it is on screen the room loads and carries on with it (see the note at the top). */ window.__agoraEnter = function (url) { var go = function () { if (window.__agoraSkyCarry) window.__agoraSkyCarry(); window.location.href = url; }; if (!window.__agoraSky || document.querySelector('.ld-enter')) { go(); return; } var el = window.__agoraEnterScreen(); window.__agoraSky(el.children[0], el.children[1], el.querySelector('.ld-center')); // Two frames: the first starts the sky's clock, the second is on screen. requestAnimationFrame(function () { requestAnimationFrame(go); }); // Back to this page from the cache: nothing is being entered any more. window.addEventListener('pageshow', function (e) { if (e.persisted && el.isConnected) el.remove(); }, { once: true }); }; /* Into a room without leaving the page — a room you have just made, which opens in the app: the same sky comes up over the page, and the room's own screens pick it up as they mount (a hand-off in one document), at which point this one steps aside (__agoraSky, above). If nothing has taken it over in fifteen seconds, the room never came: it fades away. */ window.__agoraSkyOver = function () { if (!window.__agoraSky || document.querySelector('.ld-enter')) return; var el = window.__agoraEnterScreen(); el.setAttribute('data-over', ''); el.__agoraStop = window.__agoraSky(el.children[0], el.children[1], el.querySelector('.ld-center')).stop; el.__agoraTimer = setTimeout(function () { window.__agoraSkyOverEnd(el, true); }, 15000); }; window.__agoraSkyOverEnd = function (el, fade) { if (!el || !el.isConnected || el.__agoraEnding) return; el.__agoraEnding = true; clearTimeout(el.__agoraTimer); var end = function () { if (el.__agoraStop) el.__agoraStop(); el.remove(); }; if (!fade) { end(); return; } el.style.transition = 'opacity 0.3s ease'; el.style.opacity = '0'; setTimeout(end, 320); }; /* The end of a session's sky: freeze it where it stands and hand the stars to the page's starfield (agora:sky-settle, and window.__agoraSkySettled for a starfield that mounts a moment later). Idempotent; the same snapshot comes back. */ window.__agoraSkySettle = function () { var S = window.__agoraSkySession; if (!S || !S.stars) return null; if (S.frozen == null) { var elapsed = S.start == null ? 0 : performance.now() - S.start; S.frozen = S.reduced ? 0 : window.__agoraSkyTurned(S, elapsed / 1000); S.live = 0; window.__agoraSkyLiveCount = 0; } var snap = { at: performance.now(), w: S.w, h: S.h, theta: S.frozen, stars: S.stars }; window.__agoraSkySettled = snap; window.dispatchEvent(new CustomEvent('agora:sky-settle', { detail: snap })); return snap; }; /* A sky is leaving — its screen is about to fade. The session settles once every live sky is leaving, so the boot splash and the home page's first-load wait, which overlap, hand the stars over exactly once, from whichever of them goes last. */ window.__agoraSkyLeaving = function () { var S = window.__agoraSkySession; if (!S) return null; S.leaving = (S.leaving || 0) + 1; return S.leaving >= S.live ? window.__agoraSkySettle() : null; }; /* Leaving for a full page load inside a session: the thin bar at the top of the page until the next document takes over (the same bar as lib/progress.ts uses for in-place navigation). */ window.__agoraLeave = function () { if (document.querySelector('.sk-progress[data-nav]:not(.is-done)')) return; var bar = document.createElement('div'); bar.className = 'sk-progress'; bar.setAttribute('data-nav', '1'); bar.setAttribute('aria-hidden', 'true'); document.body.appendChild(bar); setTimeout(function () { if (bar.isConnected) bar.remove(); }, 10000); }; // Any same-origin link that will load a whole page (Next's own links // call preventDefault and route in place — those are skipped). On the // window, not the document: React handles clicks at the document, and // this script runs before React loads, so a document listener here // would fire first and see nothing prevented yet — every in-app link // would put the splash up over a page that then changes underneath it. // Window listeners run after the document's, whoever registered first. window.addEventListener('click', function (e) { if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; var a = e.target && e.target.closest ? e.target.closest('a[href]') : null; if (!a || a.target === '_blank' || a.hasAttribute('download')) return; var href = a.getAttribute('href') || ''; if (href.charAt(0) === '#') return; // in-page: menus, "#" placeholders var u; try { u = new URL(a.href, location.href); } catch (err) { return; } if (u.origin !== location.origin) return; if (u.pathname === location.pathname && u.search === location.search && u.hash) return; if (window.__agoraLeave) window.__agoraLeave(); });