From 852a934a900b9a4b389e76c05ccdf22f47cd8a60 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Mon, 3 May 2021 15:16:53 -0500
Subject: [PATCH] Move TV page title into player cover

---
 components/video/player.vue | 20 ++++++++++++++++++--
 pages/tv/_slug.vue          | 21 ++++++++++++---------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/components/video/player.vue b/components/video/player.vue
index 624481b..4cfa35a 100644
--- a/components/video/player.vue
+++ b/components/video/player.vue
@@ -35,10 +35,17 @@
                         >
                     </picture>
                     <div
-                        class="video-card-overlay absolute inset-0 flex justify-center items-center bg-gradient-to-tr from-black to-transparent p-4"
+                        class="video-card-overlay absolute inset-0 flex flex-col justify-center items-center bg-gradient-to-tr from-black to-transparent p-4"
                         style="--gradient-from-color:rgba(0, 0, 0, 1); --gradient-to-color:rgba(0, 0, 0, 0.7);"
                     >
-                        <div class="play-circle w-16 h-16 bg-white-2 flex justify-center items-center outline-0 rounded-full ease">
+                        <div class="cover-top h-full">
+                            <slot name="cover-top">
+                                <!-- Top -->
+                            </slot>
+                        </div>
+
+
+                        <div class="play-circle bg-white-2 bg-blur flex justify-center items-center outline-0 rounded-full ease p-4">
                             <svg
                                 viewBox="0 0 18 18"
                                 style="width:18px;height:18px;margin-left:3px"
@@ -49,6 +56,15 @@
                                 />
                             </svg>
                         </div>
+
+                        <div class="cover-bottom h-full">
+
+                            <slot name="cover-bottom">
+                                <!-- Bottom -->
+                            </slot>
+
+                        </div>
+
                     </div>
                 </div>
                 <iframe
diff --git a/pages/tv/_slug.vue b/pages/tv/_slug.vue
index 451ece7..e0dcc52 100644
--- a/pages/tv/_slug.vue
+++ b/pages/tv/_slug.vue
@@ -4,14 +4,23 @@
             <VideoPlayer
                 :video="video"
                 class="pt-16"
-            />
+            >
+
+                <template v-slot:cover-bottom>
+                    <div class="page-heading h-full flex items-end md:p-4">
+                        <h1 class="title text-xs text-left md:text-2xl font-bold">
+                            {{ video.name }}
+                        </h1>
+                    </div>
+                </template>
+            </VideoPlayer>
 
             <div
                 class="md:flex w-full justify-between space-y-4 md:space-y-0 md:px-10"
             >
-                <h1 class="title text-lg md:text-2xl font-bold">
+                <!-- <h1 class="title text-lg md:text-2xl font-bold">
                     {{ video.name }}
-                </h1>
+                </h1> -->
 
                 <ChannelCredit
                     :video="video"
@@ -151,12 +160,6 @@ export default {
         //     payload = endpoint.payload
         // }
 
-        // console.log({
-        //     video,
-        //     featuredApps,
-        //     relatedVideos
-        // })
-
         return {
             video: payload.video,
             featuredApps: payload.featuredApps,