feature: live viewers (#394)

lukepolo · web-flow · commit 07d5f7b1a178 · 2026-05-25T15:26:56.000-04:00
diff --git a/components/StreamGlobal.vue b/components/StreamGlobal.vue
@@ -2,7 +2,7 @@
 import StreamEmbed from "~/components/StreamEmbed.vue";
 import LiveStreamPlayer from "~/components/match/LiveStreamPlayer.vue";
 import { Cross2Icon } from "@radix-icons/vue";
-import { ArrowUpRight, ExternalLink } from "lucide-vue-next";
+import { ArrowUpRight } from "lucide-vue-next";
 </script>
 
 <template>
@@ -30,18 +30,8 @@ import { ArrowUpRight, ExternalLink } from "lucide-vue-next";
       <div class="w-3 h-3 border-l-2 border-t-2 border-foreground/40"></div>
     </div>
     <div class="absolute top-2 right-2 z-10 flex items-center gap-1">
-      <button
-        v-if="isGameStreamer && stream.match_id"
-        type="button"
-        class="w-6 h-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity bg-background/80 hover:bg-background border border-border flex items-center justify-center"
-        :title="$t('match.open_popout')"
-        @click="openPopoutWindow"
-      >
-        <ExternalLink class="w-4 h-4" />
-        <span class="sr-only">{{ $t("match.open_popout") }}</span>
-      </button>
       <NuxtLink
-        v-if="stream.match_id"
+        v-if="stream.match_id && !isOnMatchPage"
         :to="`/matches/${stream.match_id}`"
         class="w-6 h-6 rounded-sm opacity-70 hover:opacity-100 transition-opacity bg-background/80 hover:bg-background border border-border flex items-center justify-center"
         :title="$t('match.open_match')"
@@ -85,6 +75,14 @@ export default {
     isGameStreamer() {
       return (this.stream as any)?.is_game_streamer === true;
     },
+    isOnMatchPage() {
+      const matchId = (this.stream as any)?.match_id;
+      if (!matchId) return false;
+      return (
+        this.$route.name === "matches-id" &&
+        String(this.$route.params.id) === String(matchId)
+      );
+    },
     containerStyle() {
       return {
         width: `${this.width}px`,
@@ -125,18 +123,6 @@ export default {
     closePreview() {
       useApplicationSettingsStore().setGlobalStream();
     },
-    openPopoutWindow() {
-      const matchId = (this.stream as any)?.match_id;
-      if (!matchId || typeof window === "undefined") {
-        return;
-      }
-      window.open(
-        `/match-popout/${matchId}`,
-        `match-popout-${matchId}`,
-        "popup=yes,width=960,height=640,resizable=yes,scrollbars=no",
-      );
-      this.closePreview();
-    },
     startResize(e: MouseEvent) {
       this.isResizing = true;
       this.resizeStart = {
diff --git a/components/match/LiveStreamFeatureCard.vue b/components/match/LiveStreamFeatureCard.vue
@@ -5,6 +5,7 @@ import TwitchIcon from "~/components/icons/TwitchIcon.vue";
 import YouTubeIcon from "~/components/icons/YouTubeIcon.vue";
 import KickIcon from "~/components/icons/KickIcon.vue";
 import MatchTableRow from "~/components/MatchTableRow.vue";
+import StreamViewerBadge from "~/components/match/StreamViewerBadge.vue";
 
 type Stream = {
   id: string;
@@ -173,6 +174,10 @@ function onWatchClick(e: Event) {
         +{{ extraStreamCount }}
       </div>
 
+      <div class="absolute bottom-2 left-2">
+        <StreamViewerBadge :match-id="match.id" size="md" />
+      </div>
+
       <button
         type="button"
         :title="$t('match.stream.watch')"
diff --git a/components/match/LiveStreamPlayer.vue b/components/match/LiveStreamPlayer.vue
@@ -8,6 +8,7 @@ import { ExternalLink, PictureInPicture } from "lucide-vue-next";
 import { generateSubscription } from "~/graphql/graphqlGen";
 import StreamCanvas from "~/components/match/StreamCanvas.vue";
 import MatchScoreboardOverlay from "~/components/match/MatchScoreboardOverlay.vue";
+import StreamViewerBadge from "~/components/match/StreamViewerBadge.vue";
 import { useApplicationSettingsStore } from "~/stores/ApplicationSettings";
 import { useAuthStore } from "~/stores/AuthStore";
 import { useStreamerStore } from "~/stores/StreamerStore";
@@ -136,7 +137,12 @@ function teardownLocalSubscription() {
   localStream.value = null;
 }
 
+const coarsePointer = ref(false);
+
 onMounted(() => {
+  if (typeof window !== "undefined" && window.matchMedia) {
+    coarsePointer.value = window.matchMedia("(pointer: coarse)").matches;
+  }
   if (shouldRunLocalSubscription()) ensureLocalSubscription();
 });
 
@@ -237,10 +243,16 @@ function openPopoutWindow() {
       />
 
       <div
-        v-if="isLive && !inGlobal && !inPopout"
-        class="absolute bottom-3 left-3 z-10 flex items-center gap-2 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150"
+        v-if="isLive && !inPopout"
+        class="absolute bottom-3 left-12 z-10 flex items-center gap-2 transition-opacity duration-150"
+        :class="
+          coarsePointer
+            ? ''
+            : 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'
+        "
       >
         <button
+          v-if="!inGlobal"
           type="button"
           :title="$t('ui.pin_overlay')"
           :aria-label="$t('ui.pin_overlay')"
@@ -250,6 +262,7 @@ function openPopoutWindow() {
           <PictureInPicture class="size-3.5" />
         </button>
         <button
+          v-if="!coarsePointer"
           type="button"
           :title="$t('ui.open_new_window')"
           :aria-label="$t('ui.open_new_window')"
@@ -258,6 +271,7 @@ function openPopoutWindow() {
         >
           <ExternalLink class="size-3.5" />
         </button>
+        <StreamViewerBadge :match-id="matchId" size="md" />
       </div>
     </StreamCanvas>
   </div>
diff --git a/components/match/MatchLiveStreams.vue b/components/match/MatchLiveStreams.vue
@@ -31,6 +31,7 @@ import Empty from "@/components/ui/empty/Empty.vue";
 import { e_player_roles_enum } from "~/generated/zeus";
 import StreamEmbed from "~/components/StreamEmbed.vue";
 import LiveStreamPlayer from "~/components/match/LiveStreamPlayer.vue";
+import StreamViewerBadge from "~/components/match/StreamViewerBadge.vue";
 </script>
 
 <template>
@@ -137,6 +138,10 @@ import LiveStreamPlayer from "~/components/match/LiveStreamPlayer.vue";
                       >
                         {{ $t("streams.live_badge") }}
                       </Badge>
+                      <StreamViewerBadge
+                        v-if="stream.is_game_streamer && stream.is_live"
+                        :match-id="match.id"
+                      />
                       <!-- Mode badge — Direct (live) has no GOTV delay,
                            TV honors `tv_delay`. Always shown for the
                            system row so operators can tell the two
diff --git a/components/match/StreamViewerBadge.vue b/components/match/StreamViewerBadge.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Eye } from "lucide-vue-next";
+import { useStreamViewers } from "~/composables/useStreamViewers";
+
+const props = withDefaults(
+  defineProps<{
+    matchId: string;
+    size?: "sm" | "md";
+  }>(),
+  { size: "sm" },
+);
+
+const { getCount } = useStreamViewers();
+const count = getCount(props.matchId);
+
+const formatted = computed(() => {
+  const n = count.value;
+  if (n === null || n < 0) return "0";
+  if (n >= 10_000) return `${(n / 1000).toFixed(0)}K`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+  return String(n);
+});
+
+const sizeClasses = computed(() =>
+  props.size === "md"
+    ? "text-xs px-3 py-1.5 gap-1.5 leading-none"
+    : "text-[10px] px-1.5 py-0 gap-1",
+);
+
+const iconClasses = computed(() =>
+  props.size === "md" ? "h-3.5 w-3.5" : "h-3 w-3",
+);
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center rounded border border-white/20 bg-black/60 font-medium text-white backdrop-blur-sm"
+    :class="sizeClasses"
+    :title="`${count ?? 0} watching`"
+  >
+    <Eye :class="iconClasses" />
+    {{ formatted }}
+  </span>
+</template>
diff --git a/components/match/WhepPlayer.vue b/components/match/WhepPlayer.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
-import {
-  Volume2,
-  VolumeX,
-  Maximize2,
-  Minimize2,
-  PictureInPicture,
-} from "lucide-vue-next";
+import { Volume2, VolumeX, Maximize2, Minimize2 } from "lucide-vue-next";
 import { useClipRenderActive } from "~/composables/useClipRenderActive";
 
 const { active: clipRenderActive } = useClipRenderActive();
@@ -137,66 +131,6 @@ function onWebkitEndFullscreen() {
 }
 
 // Picture-in-Picture — only surfaced on mobile for live game streams.
-// Demo/highlights set `enablePip=false` and keep `disablepictureinpicture`
-// on the <video>, which is what Chrome reads when deciding whether to
-// honor a PIP request.
-const isPip = ref(false);
-const showPip = computed(() => {
-  if (!props.enablePip) return false;
-  if (!coarsePointer.value) return false;
-  if (typeof document === "undefined") return false;
-  const doc = document as Document & { pictureInPictureEnabled?: boolean };
-  const video = videoRef.value as IosVideo | null;
-  return !!(
-    doc.pictureInPictureEnabled ||
-    video?.webkitSupportsPresentationMode?.("picture-in-picture")
-  );
-});
-
-async function togglePip() {
-  const video = videoRef.value as IosVideo | null;
-  if (!video) return;
-  const doc = document as Document & {
-    pictureInPictureElement?: Element | null;
-    exitPictureInPicture?: () => Promise<void>;
-  };
-  try {
-    // iOS Safari path: standard requestPictureInPicture is shipped on
-    // iPadOS 14+ but iPhone Safari still routes everything through the
-    // webkit presentation-mode API.
-    if (
-      video.webkitSupportsPresentationMode?.("picture-in-picture") &&
-      typeof video.webkitSetPresentationMode === "function" &&
-      !doc.pictureInPictureEnabled
-    ) {
-      const next =
-        video.webkitPresentationMode === "picture-in-picture"
-          ? "inline"
-          : "picture-in-picture";
-      video.webkitSetPresentationMode(next);
-      return;
-    }
-    if (doc.pictureInPictureElement) {
-      await doc.exitPictureInPicture?.();
-    } else {
-      await video.requestPictureInPicture();
-    }
-  } catch (err) {
-    console.debug("[whep] pip toggle failed:", err);
-  }
-}
-
-function onEnterPip() {
-  isPip.value = true;
-}
-function onLeavePip() {
-  isPip.value = false;
-}
-function onWebkitPresentationModeChanged() {
-  const video = videoRef.value as IosVideo | null;
-  isPip.value = video?.webkitPresentationMode === "picture-in-picture";
-}
-
 function onKeyDown(e: KeyboardEvent) {
   if (e.metaKey || e.ctrlKey || e.altKey) return;
   const target = e.target;
@@ -504,12 +438,6 @@ onMounted(() => {
     // instead of the document fullscreenchange path.
     video.addEventListener("webkitbeginfullscreen", onWebkitBeginFullscreen);
     video.addEventListener("webkitendfullscreen", onWebkitEndFullscreen);
-    video.addEventListener("enterpictureinpicture", onEnterPip);
-    video.addEventListener("leavepictureinpicture", onLeavePip);
-    video.addEventListener(
-      "webkitpresentationmodechanged",
-      onWebkitPresentationModeChanged,
-    );
     video.addEventListener("pause", onInvoluntaryPause);
   }
 });
@@ -550,12 +478,6 @@ onBeforeUnmount(() => {
   if (video) {
     video.removeEventListener("webkitbeginfullscreen", onWebkitBeginFullscreen);
     video.removeEventListener("webkitendfullscreen", onWebkitEndFullscreen);
-    video.removeEventListener("enterpictureinpicture", onEnterPip);
-    video.removeEventListener("leavepictureinpicture", onLeavePip);
-    video.removeEventListener(
-      "webkitpresentationmodechanged",
-      onWebkitPresentationModeChanged,
-    );
     video.removeEventListener("pause", onInvoluntaryPause);
   }
 });
@@ -646,10 +568,7 @@ defineExpose({ connect, teardown });
       </span>
     </button>
 
-    <!-- Audio + fullscreen tray (visible only when audio is on).
-         On coarse pointers (touch) drop the hover-gated opacity so the
-         tray stays reachable — hover is a flaky proxy for "is the
-         viewer engaged" on phones and tablets. -->
+    <!-- Audio tray (right) — visible only when audio is on. -->
     <div
       v-if="status === 'playing' && !useFallback && !isMuted"
       class="absolute bottom-2 right-2 z-10 flex items-center gap-2 transition-opacity duration-150"
@@ -679,43 +598,18 @@ defineExpose({ connect, teardown });
           @input="setVolume(Number(($event.target as HTMLInputElement).value))"
         />
       </div>
-      <button
-        v-if="showPip"
-        type="button"
-        :aria-label="
-          isPip
-            ? $t('ui_extras.exit_picture_in_picture')
-            : $t('ui_extras.picture_in_picture')
-        "
-        :title="$t('replay_extras.picture_in_picture')"
-        class="inline-flex size-7 items-center justify-center rounded-full border border-white/20 bg-black/60 text-white/90 backdrop-blur-sm transition-all duration-150 hover:bg-black/80 hover:text-white hover:scale-110 cursor-pointer"
-        @click="togglePip"
-      >
-        <PictureInPicture class="size-3.5" />
-      </button>
-      <button
-        type="button"
-        :aria-label="
-          isFullscreen
-            ? $t('ui_extras.exit_fullscreen')
-            : $t('ui_extras.fullscreen')
-        "
-        :title="$t('replay_extras.fullscreen_key')"
-        class="inline-flex size-7 items-center justify-center rounded-full border border-white/20 bg-black/60 text-white/90 backdrop-blur-sm transition-all duration-150 hover:bg-black/80 hover:text-white hover:scale-110 cursor-pointer"
-        @click="toggleFullscreen"
-      >
-        <Minimize2 v-if="isFullscreen" class="size-3.5" />
-        <Maximize2 v-else class="size-3.5" />
-      </button>
     </div>
 
-    <!-- Always-available fullscreen + PIP entry, bottom-left while the
-         unmute pill is occupying the bottom-right corner. Touch devices
-         keep these buttons visible (no hover gating). -->
+    <!-- Fullscreen — single left-side button. Hover-gated on desktop;
+         always visible on touch devices. -->
     <div
-      v-if="status === 'playing' && !useFallback && isMuted"
+      v-if="status === 'playing' && !useFallback"
       class="absolute bottom-3 left-3 z-10 flex items-center gap-2 transition-opacity duration-150"
-      :class="coarsePointer ? '' : 'opacity-0 group-hover:opacity-100'"
+      :class="
+        coarsePointer
+          ? ''
+          : 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'
+      "
     >
       <button
         type="button"
@@ -731,20 +625,6 @@ defineExpose({ connect, teardown });
         <Minimize2 v-if="isFullscreen" class="size-3.5" />
         <Maximize2 v-else class="size-3.5" />
       </button>
-      <button
-        v-if="showPip"
-        type="button"
-        :aria-label="
-          isPip
-            ? $t('ui_extras.exit_picture_in_picture')
-            : $t('ui_extras.picture_in_picture')
-        "
-        :title="$t('replay_extras.picture_in_picture')"
-        class="inline-flex size-7 items-center justify-center rounded-full border border-white/20 bg-black/60 text-white/90 backdrop-blur-sm transition-all duration-150 hover:bg-black/80 hover:text-white hover:scale-110 cursor-pointer"
-        @click="togglePip"
-      >
-        <PictureInPicture class="size-3.5" />
-      </button>
     </div>
     <!-- "Rendering clip" chip. Shown over the last-good frame while
          the pod has stopped its publisher to free the GPU for a
diff --git a/composables/useStreamViewers.ts b/composables/useStreamViewers.ts
diff --git a/pages/stream-deck/[matchId].vue b/pages/stream-deck/[matchId].vue
diff --git a/pages/stream-deck/index.vue b/pages/stream-deck/index.vue
