feature: event highlights

components/events/EventHighlights.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  watchEffect,
+} from "vue";
+import { useI18n } from "vue-i18n";
+import { useApolloClient } from "@vue/apollo-composable";
+import { Film } from "lucide-vue-next";
+import HighlightCard from "~/components/clips/HighlightCard.vue";
+import HighlightSkeleton from "~/components/clips/HighlightSkeleton.vue";
+import AnimatedFilters from "~/components/common/AnimatedFilters.vue";
+import EventPlayerFilter from "~/components/events/EventPlayerFilter.vue";
+import { $, order_by } from "~/generated/zeus";
+import { typedGql } from "~/generated/zeus/typedDocumentNode";
+import { matchClipFields } from "~/graphql/matchClip";
+import { useClipModal, type ClipQueueItem } from "~/composables/useClipModal";
+import type { Clip } from "~/types/clip";
+
+const props = defineProps<{
+  eventId: string;
+}>();
+
+const PAGE_SIZE = 12;
+
+const HIGHLIGHTS_SUBSCRIPTION = typedGql("subscription")({
+  match_clips: [
+    {
+      where: $("where", "match_clips_bool_exp!"),
+      order_by: $("orderBy", "[match_clips_order_by!]!"),
+      limit: $("limit", "Int!"),
+    },
+    matchClipFields,
+  ],
+});
+
+const { t } = useI18n();
+const { client: apolloClient } = useApolloClient();
+
+const sort = ref("views");
+const sortOptions = computed(() => [
+  { key: "views", label: t("pages.highlights.sort.views") },
+  { key: "recent", label: t("pages.highlights.sort.recent") },
+]);
+
+const filterPlayer = ref<{ steam_id: string | number; name?: string } | null>(
+  null,
+);
+
+const clips = ref<Clip[]>([]);
+const loading = ref(true);
+const limit = ref(PAGE_SIZE);
+const reachedEnd = ref(false);
+const inFlight = ref(false);
+// Hides the toolbar only when the event has no highlights at all; a filter
+// that matches nothing must keep it so the filter can be cleared.
+const eventHasClips = ref(false);
+
+let activeSub: { unsubscribe: () => void } | null = null;
+function subscribe() {
+  activeSub?.unsubscribe();
+  loading.value = true;
+
+  const filtered = filterPlayer.value !== null;
+  const filters: any[] = [
+    { visibility: { _eq: "public" } },
+    {
+      match_map: {
+        match: { event_links: { event_id: { _eq: props.eventId } } },
+      },
+    },
+  ];
+  if (filterPlayer.value) {
+    filters.push({
+      target_steam_id: { _eq: String(filterPlayer.value.steam_id) },
+    });
+  }
+
+  activeSub = apolloClient
+    .subscribe({
+      query: HIGHLIGHTS_SUBSCRIPTION,
+      variables: {
+        where: { _and: filters },
+        orderBy:
+          sort.value === "views"
+            ? [
+                { views_count: order_by.desc_nulls_last },
+                { created_at: order_by.desc },
+              ]
+            : [{ created_at: order_by.desc }],
+        limit: limit.value,
+      },
+    })
+    .subscribe({
+      next: ({ data }: any) => {
+        const next = (data?.match_clips ?? []) as Clip[];
+        reachedEnd.value = next.length < limit.value;
+        clips.value = next;
+        if (!filtered && next.length > 0) {
+          eventHasClips.value = true;
+        }
+        loading.value = false;
+        inFlight.value = false;
+      },
+      error: (error: any) => {
+        console.error("Error subscribing to event highlights:", error);
+        loading.value = false;
+        inFlight.value = false;
+      },
+    });
+}
+
+watch(
+  [() => props.eventId, sort, () => filterPlayer.value?.steam_id],
+  () => {
+    limit.value = PAGE_SIZE;
+    subscribe();
+  },
+  { immediate: true },
+);
+
+const { setClipQueue, clearClipQueue } = useClipModal();
+const clipQueueScope = computed(() => `event-highlights:${props.eventId}`);
+function clipQueueItem(clip: Clip): ClipQueueItem {
+  return {
+    id: clip.id,
+    title: clip.title,
+    playerName: clip.target?.name ?? null,
+    teamName: null,
+    durationMs: clip.duration_ms,
+    thumbnailUrl: clip.thumbnail_download_url,
+    posterUrl: clip.match_map?.map?.poster ?? null,
+  };
+}
+watchEffect(() => {
+  if (clips.value.length === 0) {
+    return;
+  }
+  setClipQueue(clips.value.map(clipQueueItem), clipQueueScope.value);
+});
+
+function loadMore() {
+  if (reachedEnd.value || inFlight.value || loading.value) {
+    return;
+  }
+  inFlight.value = true;
+  limit.value += PAGE_SIZE;
+  subscribe();
+}
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        loadMore();
+      }
+    },
+    { rootMargin: "600px 0px" },
+  );
+  watch(
+    sentinel,
+    (el) => {
+      observer?.disconnect();
+      if (el) {
+        observer?.observe(el);
+      }
+    },
+    { immediate: true },
+  );
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+  activeSub?.unsubscribe();
+  clearClipQueue(clipQueueScope.value);
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div
+      v-if="eventHasClips"
+      class="flex flex-wrap items-center justify-between gap-2"
+    >
+      <div class="w-full max-w-xs">
+        <EventPlayerFilter
+          v-model="filterPlayer"
+          :event-id="eventId"
+          :label="$t('event.media.filter_by_player')"
+        />
+      </div>
+      <AnimatedFilters v-model="sort" :options="sortOptions" square />
+    </div>
+
+    <div
+      v-if="loading && clips.length === 0"
+      class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+    >
+      <HighlightSkeleton v-for="i in 6" :key="i" />
+    </div>
+
+    <div
+      v-else-if="clips.length === 0"
+      class="flex flex-col items-center gap-3 rounded-md border border-dashed border-border px-4 py-16 text-center"
+    >
+      <Film class="h-6 w-6 text-muted-foreground" />
+      <p class="text-sm text-muted-foreground">
+        {{
+          filterPlayer
+            ? $t("event.highlights.none_for_player")
+            : $t("event.highlights.none")
+        }}
+      </p>
+    </div>
+
+    <template v-else>
+      <TransitionGroup
+        tag="div"
+        class="grid grid-cols-1 gap-3 transition-opacity sm:grid-cols-2 lg:grid-cols-3"
+        :class="{ 'opacity-60': loading && !inFlight }"
+        enter-active-class="transition-[opacity,transform] duration-500 ease-out"
+        enter-from-class="opacity-0 translate-y-3"
+        move-class="transition-transform duration-300 ease-out"
+      >
+        <HighlightCard v-for="clip in clips" :key="clip.id" :clip="clip" />
+      </TransitionGroup>
+
+      <div
+        v-if="!reachedEnd"
+        ref="sentinel"
+        class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
+      >
+        <HighlightSkeleton v-for="i in 3" :key="i" />
+      </div>
+    </template>
+  </div>
+</template>

components/events/EventMediaPanel.vue

@@ -3,12 +3,11 @@ import { computed, ref } from "vue";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import Empty from "~/components/ui/empty/Empty.vue";
-import { Upload, FileCheck2, FileWarning, X, Plus } from "lucide-vue-next";
+import { Upload, FileCheck2, FileWarning, Plus } from "lucide-vue-next";
 import EventMediaCard from "~/components/events/EventMediaCard.vue";
 import EventMediaDropzone from "~/components/events/EventMediaDropzone.vue";
 import EventAddMediaDialog from "~/components/events/EventAddMediaDialog.vue";
-import EventPlayerPicker from "~/components/events/EventPlayerPicker.vue";
-import PlayerDisplay from "~/components/PlayerDisplay.vue";
+import EventPlayerFilter from "~/components/events/EventPlayerFilter.vue";
 import { useEventMediaQueue } from "~/composables/useEventMediaQueue";
 
 type EventMedia = {
@@ -173,35 +172,10 @@ function formatBytes(bytes: number): string {
       <!-- Filter (left) + Add media (right) on one row. -->
       <div class="flex items-center justify-between gap-2">
         <div class="w-full max-w-xs">
-          <span
-            v-if="filterPlayer"
-            class="inline-flex items-center gap-1.5 rounded-md border border-border/70 bg-card/50 py-1 pl-1.5 pr-1"
-          >
-            <PlayerDisplay
-              :player="filterPlayer"
-              size="xs"
-              compact
-              :show-flag="false"
-              :show-role="false"
-              :show-elo="false"
-              :show-online="false"
-              :tooltip="false"
-              :linkable="false"
-            />
-            <button
-              type="button"
-              class="rounded p-0.5 text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
-              :aria-label="$t('common.remove')"
-              @click="filterPlayer = null"
-            >
-              <X class="h-3 w-3" />
-            </button>
-          </span>
-          <EventPlayerPicker
-            v-else
+          <EventPlayerFilter
+            v-model="filterPlayer"
             :event-id="event.id"
             :label="$t('event.media.filter_by_player')"
-            @selected="filterPlayer = $event"
           />
         </div>
         <Button

components/events/EventOverview.vue

@@ -19,7 +19,7 @@ import {
 
 const props = defineProps<{
   event: any;
-  matches: any[];
+  refreshKey: string;
   myMatches: any[];
   matchesLoading: boolean;
   leaderboardRows: any[];
@@ -127,13 +127,16 @@ const myTiles = computed(() => [
   { key: "matches", value: fmt(myStats.value?.matches_played) },
 ]);
 
-// Top public highlights for the event's matches.
 const TOP_CLIPS_QUERY = typedGql("query")({
   match_clips: [
     {
       where: {
         visibility: { _eq: "public" },
-        match_map: { match_id: { _in: $("matchIds", "[uuid!]!") } },
+        match_map: {
+          match: {
+            event_links: { event_id: { _eq: $("eventId", "uuid!") } },
+          },
+        },
       },
       order_by: [{ views_count: order_by.desc_nulls_last }],
       limit: 6,
@@ -146,18 +149,17 @@ const clips = ref<Clip[]>([]);
 
 let clipsGeneration = 0;
 watch(
-  () => props.matches.map((match) => match.id).join(","),
-  async () => {
-    const matchIds = props.matches.map((match) => match.id);
-    if (matchIds.length === 0) {
+  [() => props.event?.id, () => props.refreshKey],
+  async ([eventId]) => {
+    if (!eventId) {
       clips.value = [];
       return;
     }
     const gen = ++clipsGeneration;
     try {
       const { data } = await apolloClient.query({
         query: TOP_CLIPS_QUERY,
-        variables: { matchIds },
+        variables: { eventId },
         fetchPolicy: "network-only",
       });
       if (gen !== clipsGeneration) return;
@@ -399,6 +401,13 @@ const RANK_TEXT = [
           <span :class="tacticalSectionTickClasses"></span>
           {{ $t("event.story.highlights") }}
         </span>
+        <button
+          class="inline-flex items-center gap-1 font-mono text-[0.65rem] normal-case tracking-[0.16em] text-muted-foreground transition-colors hover:text-foreground"
+          @click="emit('go', 'highlights')"
+        >
+          {{ $t("common.see_all") }}
+          <ArrowRight class="h-3 w-3" />
+        </button>
       </div>
 
       <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">