From b2b660cd64347a619691fc4ccdcd0f4d674c52fd Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 30 May 2023 01:48:19 +0800
Subject: [PATCH] feat: update watch later interface

---
 .../views/WatchLater/WatchLater.vue           | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index e9737bd2..1a91f9d4 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -239,7 +239,37 @@ function jumpToLoginPage() {
     </main>
 
     <aside relative w="full md:40% lg:30% xl:25%" order="1 md:2 lg:2">
-      <div pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full>
+      <div
+        pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full h="[calc(100vh-160px)]" p-6
+        rounded="$bew-radius" overflow-hidden
+      >
+        <img
+          v-if="watchLaterList[0]" :src="removeHttpFromUrl(`${watchLaterList[0].pic}@480w_270h_1c`)"
+          rounded="$bew-radius"
+        >
+
+        <h3 text="3xl" fw-600>
+          Watch later ({{ watchLaterList.length }}/100)
+        </h3>
+        <p flex gap-4>
+          <Button flex-1>
+            Play all
+          </Button>
+          <Button flex-1>
+            Shuffle
+          </Button>
+        </p>
+        <div
+          v-if="watchLaterList[0]"
+          pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1 opacity-60
+        >
+          <div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" />
+          <img
+            v-if="watchLaterList[0]"
+            :src="removeHttpFromUrl(`${watchLaterList[0].pic}@480w_270h_1c`)"
+            w-full h-full object="cover center"
+          >
+        </div>
         <!-- <Button shadow="$bew-shadow-1" @click="handleClearAllWatchHistory">
           <template #left>
             <tabler:trash />