From 516a8d65208e86431510df9cc25b3d0720f92d65 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Sat, 12 Sep 2026 16:24:51 -0400
Subject: [PATCH] Update new view

---
 src/views/Profile/VideoView.vue | 343 ++++++++++++++++++--------------
 1 file changed, 192 insertions(+), 151 deletions(-)

diff --git a/src/views/Profile/VideoView.vue b/src/views/Profile/VideoView.vue
index 525e2476..f22fc81e 100644
--- a/src/views/Profile/VideoView.vue
+++ b/src/views/Profile/VideoView.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import {
+  PhCaretRight,
   PhFilmReel,
   PhPlay,
   PhUploadSimple,
@@ -204,55 +205,51 @@ const copyToClipboard = (text) => {
 <template>
   <LayoutAuthenticated>
     <SectionMain>
-      <UserCard class="mb-6" use-small even-smaller />
+      <UserCard class="mb-4 sm:mb-6" use-small even-smaller />
 
       <template v-if="newestVideo">
         <SectionTitleLine :icon="PhVideo" title="Video Player" main />
 
-        <CardBox class="mb-6">
+        <CardBox class="mb-4 sm:mb-6">
           <div
             v-if="selectedVideo?.data?.status === 'uploaded'"
-            class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]"
+            class="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,2fr)_minmax(300px,1fr)] xl:gap-5"
           >
-            <div>
-              <video
-                :key="selectedVideo?.data?.url"
-                controls
-                autoplay
-                class="aspect-video w-full rounded-xl bg-black object-contain"
-              >
-                <source :src="selectedVideo?.data?.url" type="video/mp4" />
-                Your browser does not support the video tag.
-              </video>
-            </div>
-
-            <div
-              class="grid grid-cols-1 content-start gap-6 text-center xl:text-left"
+            <video
+              :key="selectedVideo?.data?.url"
+              controls
+              autoplay
+              class="aspect-video w-full rounded-lg bg-black object-contain sm:rounded-xl"
             >
-              <div class="space-y-2">
-                <div>
-                  <h1 class="text-2xl font-bold xl:text-4xl">
-                    {{ selectedVideo?.name }}
-                  </h1>
+              <source :src="selectedVideo?.data?.url" type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
 
-                  <h2 class="text-xl font-semibold xl:text-3xl">
-                    {{ selectedVideo?.artist }}
-                  </h2>
-                </div>
+            <div class="flex flex-col justify-center text-center xl:text-left">
+              <div class="space-y-1">
+                <h1 class="truncate text-xl font-bold sm:text-2xl">
+                  {{ selectedVideo?.name }}
+                </h1>
+
+                <h2
+                  class="truncate text-base font-semibold text-slate-400 sm:text-xl"
+                >
+                  {{ selectedVideo?.artist }}
+                </h2>
 
                 <BaseDivider class="mx-1" />
 
-                <h3 class="text-xl font-light xl:text-2xl">
+                <p class="text-sm text-slate-400">
                   {{ selectedVideo?.game }}
                   {{ selectedVideo?.version }}
-                </h3>
+                </p>
 
-                <p>
+                <p class="text-xs text-slate-500">
                   {{ selectedVideo?.timestamp }}
                 </p>
               </div>
 
-              <div class="flex justify-center gap-2 xl:justify-start">
+              <div class="mt-4 flex justify-center xl:justify-start">
                 <BaseButton
                   color="info"
                   label="Share"
@@ -262,163 +259,207 @@ const copyToClipboard = (text) => {
             </div>
           </div>
 
-          <div v-else>
-            <div class="space-y-1 text-center">
-              <h1 class="text-2xl font-bold xl:text-4xl">
-                Your video is still uploading!
-              </h1>
+          <div v-else class="py-4 text-center sm:py-8">
+            <h1 class="text-xl font-bold sm:text-2xl">
+              Your video is still uploading!
+            </h1>
 
-              <h2 class="text-xl font-light xl:text-2xl">
-                Please wait for the upload to complete.
-              </h2>
+            <p class="mt-1 text-sm text-slate-400 sm:text-base">
+              Please wait for the upload to complete.
+            </p>
 
-              <h2 class="text-xl">
-                Upload started at {{ selectedVideo?.timestamp }}
-              </h2>
-            </div>
+            <p class="mt-2 text-xs text-slate-500 sm:text-sm">
+              Upload started at {{ selectedVideo?.timestamp }}
+            </p>
           </div>
         </CardBox>
       </template>
 
-      <div class="flex items-center justify-between">
+      <div class="mb-2 flex items-center justify-between gap-3">
         <SectionTitleLine :icon="PhFilmReel" title="Video Library" main />
         <div
-          class="-mt-4 flex items-center rounded-2xl bg-slate-900 p-3.5 drop-shadow-2xl"
+          class="-mt-3 flex shrink-0 items-center rounded-xl bg-slate-900 px-3 py-2 text-xs font-medium text-slate-300 drop-shadow-xl sm:-mt-4 sm:px-3.5 sm:py-2.5 sm:text-sm"
         >
-          <span>{{ videoData.length }} videos</span>
+          {{ videoData.length }} videos
         </div>
       </div>
 
       <CardBox>
-        <div class="space-y-10">
-          <div
-            v-for="dateGroup in groupedVideos"
+        <div class="space-y-2">
+          <details
+            v-for="(dateGroup, dateIndex) in groupedVideos"
             :key="dateGroup.key"
-            class="space-y-5"
+            :open="dateIndex === 0"
+            class="group"
           >
-            <div class="flex items-center gap-4">
-              <div class="h-px flex-1 bg-slate-800" />
-              <h2 class="text-sm font-semibold tracking-wider text-slate-400">
-                {{ dateGroup.label }}
-              </h2>
-              <div class="h-px flex-1 bg-slate-800" />
-            </div>
-
-            <div
-              v-for="gameGroup in dateGroup.games"
-              :key="gameGroup.key"
-              class="space-y-3"
+            <summary
+              class="flex cursor-pointer list-none items-center gap-2 rounded-lg px-2 py-2.5 transition-colors hover:bg-slate-800/60 [&::-webkit-details-marker]:hidden"
             >
-              <div class="flex items-center gap-2">
-                <h3
-                  class="text-base font-semibold text-slate-700 dark:text-slate-200"
-                >
-                  {{ gameGroup.name }}
-                </h3>
-                <span
-                  class="rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-500 dark:bg-slate-800 dark:text-slate-400"
-                >
-                  {{ gameGroup.videos.length }}
-                </span>
+              <div
+                class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-slate-800 text-slate-400 transition-transform group-open:rotate-90"
+              >
+                <BaseIcon :icon="PhCaretRight" :size="15" />
               </div>
 
-              <div
-                class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+              <span
+                class="min-w-0 flex-1 truncate text-sm font-semibold text-slate-300"
               >
-                <button
-                  v-for="video in gameGroup.videos"
-                  :key="video.id"
-                  type="button"
-                  class="group overflow-hidden rounded-xl border text-left transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-info"
-                  :class="
-                    selectedVideo?.id === video.id
-                      ? 'border-blue-400 bg-slate-800 ring-2 ring-blue-400'
-                      : 'border-slate-800 hover:border-info/60 hover:shadow-md'
-                  "
-                  @click="selectVideo(video)"
+                {{ dateGroup.label }}
+              </span>
+
+              <span
+                class="shrink-0 rounded-full bg-slate-800 px-2 py-0.5 text-[10px] font-medium text-slate-500 sm:text-xs"
+              >
+                {{
+                  dateGroup.games.reduce(
+                    (total, game) => total + game.videos.length,
+                    0,
+                  )
+                }}
+              </span>
+            </summary>
+
+            <div class="ml-2 border-l border-slate-800 pl-2 sm:ml-3 sm:pl-3">
+              <div class="space-y-1">
+                <details
+                  v-for="(gameGroup, gameIndex) in dateGroup.games"
+                  :key="gameGroup.key"
+                  :open="dateIndex === 0 && gameIndex === 0"
+                  class="group"
                 >
-                  <div
-                    class="relative aspect-video overflow-hidden bg-slate-900"
+                  <summary
+                    class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2 py-2 transition-colors hover:bg-slate-800/40 [&::-webkit-details-marker]:hidden"
                   >
-                    <video
-                      v-if="video?.data?.status === 'uploaded'"
-                      :src="video?.data?.url"
-                      preload="metadata"
-                      muted
-                      playsinline
-                      class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
-                    />
-
                     <div
-                      v-if="video?.data?.status === 'uploaded'"
-                      class="absolute inset-0 flex items-center justify-center bg-black/10 transition-colors group-hover:bg-black/30"
+                      class="flex h-4 w-4 shrink-0 items-center justify-center text-slate-500 transition-transform group-open:rotate-90"
                     >
-                      <div
-                        class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200/90 text-slate-800/90 shadow-lg transition-transform group-hover:scale-110"
+                      <BaseIcon :icon="PhCaretRight" :size="10" />
+                    </div>
+
+                    <span
+                      class="min-w-0 flex-1 truncate text-xs font-semibold text-slate-400 sm:text-sm"
+                    >
+                      {{ gameGroup.name }}
+                    </span>
+
+                    <span
+                      class="shrink-0 text-[10px] tabular-nums text-slate-600 sm:text-xs"
+                    >
+                      {{ gameGroup.videos.length }}
+                    </span>
+                  </summary>
+
+                  <div class="pb-3 pl-2 pt-1 sm:pl-3">
+                    <div
+                      class="grid grid-cols-2 gap-2 sm:grid-cols-3 sm:gap-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6"
+                    >
+                      <button
+                        v-for="video in gameGroup.videos"
+                        :key="video.id"
+                        type="button"
+                        class="group/card overflow-hidden rounded-lg border text-left transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-info"
+                        :class="
+                          selectedVideo?.id === video.id
+                            ? 'border-blue-400 bg-slate-800 ring-1 ring-blue-400'
+                            : 'border-slate-800 bg-slate-900/40 hover:border-slate-700 hover:bg-slate-800/60'
+                        "
+                        @click="selectVideo(video)"
                       >
-                        <template v-if="selectedVideo?.id === video.id">
-                          <BaseIcon
-                            :icon="PhPlay"
-                            :size="24"
-                            class="animate-pulse text-emerald-700"
+                        <div
+                          class="relative aspect-video overflow-hidden bg-slate-950"
+                        >
+                          <video
+                            v-if="video?.data?.status === 'uploaded'"
+                            :src="video?.data?.url"
+                            preload="none"
+                            muted
+                            playsinline
+                            class="h-full w-full object-cover transition-transform duration-200 group-hover/card:scale-105"
                           />
-                        </template>
-                        <template v-else>
-                          <BaseIcon :icon="PhPlay" :size="24" />
-                        </template>
-                      </div>
-                    </div>
 
-                    <div
-                      v-else
-                      class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900"
-                    >
-                      <BaseIcon :icon="PhUploadSimple" :size="20" />
-                      <span class="text-sm font-medium"> Uploading </span>
-                    </div>
-                    <div
-                      v-if="selectedVideo?.id === video.id"
-                      class="absolute right-2 top-2 rounded-full bg-info px-2 py-1 text-xs font-semibold text-slate-100 drop-shadow-2xl"
-                    >
-                      <span>Selected</span>
+                          <div
+                            v-if="video?.data?.status === 'uploaded'"
+                            class="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-hover/card:bg-black/20"
+                          >
+                            <div
+                              class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-200/90 text-slate-800 shadow-lg sm:h-9 sm:w-9"
+                            >
+                              <BaseIcon
+                                :icon="PhPlay"
+                                :size="16"
+                                :class="
+                                  selectedVideo?.id === video.id
+                                    ? 'text-emerald-700'
+                                    : ''
+                                "
+                              />
+                            </div>
+                          </div>
+
+                          <div
+                            v-else
+                            class="absolute inset-0 flex flex-col items-center justify-center bg-slate-900"
+                          >
+                            <BaseIcon :icon="PhUploadSimple" :size="16" />
+                            <span
+                              class="mt-1 text-[10px] font-medium text-slate-400"
+                            >
+                              Uploading
+                            </span>
+                          </div>
+
+                          <div
+                            v-if="selectedVideo?.id === video.id"
+                            class="absolute left-1.5 top-1.5 h-2 w-2 rounded-full bg-emerald-400 shadow-lg shadow-emerald-400/50"
+                          />
+                        </div>
+
+                        <div class="min-w-0 px-2 py-1.5">
+                          <h3
+                            class="truncate text-xs font-semibold text-slate-200 sm:text-sm"
+                            :title="video?.name"
+                          >
+                            {{ video?.name }}
+                          </h3>
+
+                          <p
+                            class="truncate text-[10px] text-slate-500 sm:text-xs"
+                            :title="video?.artist"
+                          >
+                            {{ video?.artist }}
+                          </p>
+
+                          <div
+                            class="mt-0.5 hidden items-center justify-between gap-1 text-[10px] text-slate-600 sm:flex"
+                          >
+                            <span class="truncate">
+                              {{ video?.version }}
+                            </span>
+
+                            <span class="shrink-0">
+                              {{ video?.timestamp }}
+                            </span>
+                          </div>
+                        </div>
+                      </button>
                     </div>
                   </div>
-
-                  <div class="space-y-1 p-4">
-                    <h3 class="truncate font-semibold" :title="video?.name">
-                      {{ video?.name }}
-                    </h3>
-                    <p
-                      class="truncate text-sm text-slate-500 dark:text-slate-400"
-                    >
-                      {{ video?.artist }}
-                    </p>
-                    <div
-                      class="flex items-center justify-between gap-2 pt-2 text-xs text-slate-400"
-                    >
-                      <span class="truncate">
-                        {{ video?.version }}
-                      </span>
-                      <span class="shrink-0">
-                        {{ video?.timestamp }}
-                      </span>
-                    </div>
-                  </div>
-                </button>
+                </details>
               </div>
             </div>
-          </div>
+          </details>
 
           <div
             v-if="!videoData.length"
-            class="py-12 text-center text-slate-500 dark:text-slate-400"
+            class="py-8 text-center text-slate-500 sm:py-12"
           >
-            <h3
-              class="text-lg font-semibold text-slate-700 dark:text-slate-200"
-            >
+            <h3 class="text-base font-semibold text-slate-300 sm:text-lg">
               No videos yet
             </h3>
-            <p class="mt-1">Your uploaded videos will appear here.</p>
+
+            <p class="mt-1 text-xs sm:text-sm">
+              Your uploaded videos will appear here.
+            </p>
           </div>
         </div>
       </CardBox>