@acms-subir/core 0.2.0 → 0.3.1

package/src/components/LiveCard.astro

@@ -0,0 +1,174 @@
+---
+import { getRepo } from '../lib/repo';
+import { liveState, publicSnapshot } from '../lib/live/service';
+import { liveView } from '../lib/live/view';
+import '../styles/live.css';
+
+// One component for every live placement. Layout:
+//   compact (links page) → 'links'; display 'player' → 'split' with an
+//   in-page player; otherwise the owner's card style (poster/split/row).
+// Theme hooks: .pc-live-* classes, --live-* tokens, [data-layout], [data-status].
+interface Props { compact?: boolean; display?: string }
+const { compact = false, display = 'card' } = Astro.props;
+const { config, snapshot: raw } = await liveState(await getRepo(Astro.locals));
+const snapshot = publicSnapshot(raw, config);
+const now = Date.now();
+const v = liveView(snapshot, now);
+const player = !compact && display === 'player';
+const layout = compact ? 'links' : player ? 'split' : config.display.style;
+---
+<section
+  class="pc-live"
+  data-live-card
+  data-layout={layout}
+  data-player={player ? '' : undefined}
+  data-pin={compact ? '' : undefined}
+  data-status={v?.status ?? 'offline'}
+  data-snapshot={JSON.stringify(snapshot)}
+  data-server-now={now}
+  hidden={!v}
+  aria-label="Live video"
+>
+  <div class="pc-live-off">
+    <i class="pc-live-off-dot" aria-hidden="true"></i>
+    <span>Not live right now</span>
+    <a data-live-watch href={v?.watchUrl || '#'} target="_blank" rel="noopener noreferrer">{v?.watchLabel}</a>
+  </div>
+  <div class="pc-live-body">
+    <div class="pc-live-media">
+      <a class="pc-live-poster" data-live-poster href={v?.watchUrl || '#'} target="_blank" rel="noopener noreferrer" aria-label={v ? `${v.watchLabel.replace(' ↗', '')}: ${v.title}` : undefined}>
+        <span class="pc-live-ph" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2" /><path d="M16.2 7.8a6 6 0 0 1 0 8.4M7.8 16.2a6 6 0 0 1 0-8.4M19 5a10 10 0 0 1 0 14M5 19A10 10 0 0 1 5 5" /></svg>
+        </span>
+        <img data-live-thumb src={v?.thumbUrl || undefined} alt="" loading="lazy" decoding="async" hidden={!v?.thumbUrl} />
+        <span class="pc-live-tag" data-live-tag>{v?.tag}</span>
+        <span class="pc-live-viewers" data-live-viewers hidden={!v?.viewers}>{v?.viewers}</span>
+        <span class="pc-live-play" data-live-playicon aria-hidden="true" hidden></span>
+      </a>
+      <div class="pc-live-player" data-live-player hidden></div>
+    </div>
+    <div class="pc-live-info">
+      <span class="pc-live-kicker" data-live-kicker>{v?.kicker}</span>
+      <h2 class="pc-live-title"><span class="pc-live-title-text" data-live-title>{v?.title}</span></h2>
+      <p class="pc-live-meta" data-live-meta hidden={!v?.meta}>{v?.meta}</p>
+      <div class="pc-live-actions">
+        <button type="button" class="pc-live-btn" data-live-load hidden>Play here</button>
+        <a class="pc-live-btn" data-live-watch href={v?.watchUrl || '#'} target="_blank" rel="noopener noreferrer">{v?.watchLabel}</a>
+      </div>
+      <small class="pc-live-privacy" data-live-privacy hidden></small>
+    </div>
+  </div>
+</section>
+<script>
+  import { subscribeLive, currentLive, serverNow } from '../lib/live/client';
+  import { liveView, PROVIDER_NAMES } from '../lib/live/view';
+  import type { PublicLiveSnapshot } from '../lib/live/types';
+
+  const q = <T extends HTMLElement>(root: Element, sel: string) => root.querySelector<T>(sel)!;
+  const qa = <T extends HTMLElement>(root: Element, sel: string) => Array.from(root.querySelectorAll<T>(sel));
+
+  function setupLiveCards() {
+    const cards = Array.from(document.querySelectorAll<HTMLElement>('[data-live-card]')).filter((c) => !c.dataset.initialized);
+    for (const card of cards) {
+      card.dataset.initialized = 'true';
+      let shownKey = '';
+      // the links page lifts its live block to the top while live; a marker
+      // remembers where the owner placed it
+      const home = card.hasAttribute('data-pin') ? document.createComment('live-block') : null;
+      if (home) card.before(home);
+
+      const media = q(card, '.pc-live-media');
+      const poster = q<HTMLAnchorElement>(card, '[data-live-poster]');
+      const player = q(card, '[data-live-player]');
+      const load = q(card, '[data-live-load]');
+      const img = q<HTMLImageElement>(card, '[data-live-thumb]');
+      img.addEventListener('load', () => { img.hidden = false; });
+      img.addEventListener('error', () => { img.hidden = true; });
+
+      const eligible = (s: PublicLiveSnapshot | null) =>
+        card.hasAttribute('data-player') && !!s?.embedId && s.status === 'live' &&
+        (s.provider === 'youtube' || (s.provider === 'twitch' && media.clientWidth >= 400));
+
+      function reset() {
+        player.replaceChildren();
+        player.hidden = true;
+        poster.hidden = false;
+      }
+
+      function play() {
+        const s = currentLive();
+        if (!s || !eligible(s)) return false;
+        let src = '';
+        if (s.provider === 'youtube' && /^[\w-]{11}$/.test(s.embedId)) src = `https://www.youtube-nocookie.com/embed/${s.embedId}?autoplay=0`;
+        if (s.provider === 'twitch' && /^[a-z0-9_]{1,25}$/.test(s.embedId)) {
+          const u = new URL('https://player.twitch.tv/');
+          u.searchParams.set('channel', s.embedId);
+          u.searchParams.set('parent', location.hostname);
+          u.searchParams.set('autoplay', 'false');
+          src = u.href;
+        }
+        if (!src) return false;
+        const iframe = document.createElement('iframe');
+        iframe.src = src;
+        iframe.title = s.title || 'Live video';
+        iframe.allowFullscreen = true;
+        iframe.allow = 'fullscreen; picture-in-picture; encrypted-media';
+        iframe.referrerPolicy = 'strict-origin-when-cross-origin';
+        player.replaceChildren(iframe);
+        player.hidden = false;
+        poster.hidden = true;
+        load.hidden = true;
+        return true;
+      }
+      poster.addEventListener('click', (e) => { if (play()) e.preventDefault(); });
+      load.addEventListener('click', () => { play(); });
+
+      function pin(live: boolean) {
+        if (!home) return;
+        const slot = document.querySelector('[data-live-slot]');
+        if (live && slot) slot.after(card);
+        else if (!live && home.isConnected) home.after(card);
+      }
+
+      function render(s: PublicLiveSnapshot | null, now: number) {
+        const v = liveView(s, now);
+        card.hidden = !v;
+        const key = s ? `${s.provider}:${s.id}:${s.status}:${s.embedId}` : '';
+        if (key !== shownKey || !eligible(s)) { if (!player.hidden) reset(); }
+        shownKey = key;
+        pin(v?.status === 'live');
+        if (!v) return;
+        card.dataset.status = v.status;
+        q(card, '[data-live-tag]').textContent = v.tag;
+        q(card, '[data-live-kicker]').textContent = v.kicker;
+        q(card, '[data-live-title]').textContent = v.title;
+        const meta = q(card, '[data-live-meta]');
+        meta.textContent = v.meta;
+        meta.hidden = !v.meta;
+        const viewers = q(card, '[data-live-viewers]');
+        viewers.textContent = v.viewers;
+        viewers.hidden = !v.viewers;
+        for (const a of [poster, ...qa<HTMLAnchorElement>(card, '[data-live-watch]')]) a.href = v.watchUrl;
+        for (const a of qa(card, '[data-live-watch]')) a.textContent = v.watchLabel;
+        if (!v.thumbUrl) { img.hidden = true; img.removeAttribute('src'); }
+        else if (img.getAttribute('src') !== v.thumbUrl) img.src = v.thumbUrl;
+        const canPlay = eligible(s);
+        const name = PROVIDER_NAMES[v.provider] || 'the platform';
+        poster.setAttribute('aria-label', canPlay ? `Play ${v.title} here` : `${v.watchLabel.replace(' ↗', '')}: ${v.title}`);
+        q(card, '[data-live-playicon]').hidden = !canPlay;
+        load.hidden = !canPlay || !player.hidden;
+        const privacy = q(card, '[data-live-privacy]');
+        privacy.hidden = !canPlay;
+        privacy.textContent = `Playing loads video from ${name}.`;
+        card.dataset.playable = canPlay ? 'true' : 'false';
+      }
+
+      let initial: PublicLiveSnapshot | null = null;
+      try { initial = JSON.parse(card.dataset.snapshot || 'null'); } catch { /* no initial state */ }
+      subscribeLive(card, render, { snapshot: initial, serverNow: Number(card.dataset.serverNow) || Date.now() });
+      new ResizeObserver(() => render(currentLive(), serverNow())).observe(media);
+    }
+  }
+  setupLiveCards();
+  document.addEventListener('astro:page-load', setupLiveCards);
+</script>