From 9d083ce44acef6730990eef15ab78fea10b065df Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 7 Mar 2023 02:12:43 +0800
Subject: [PATCH] feat: add comment content in video page * style(main.scss,
 reset.scss): remove useless styles

---
 src/contentScripts/views/Video/Video.vue | 93 ++++++++++++++++--------
 src/contentScripts/views/Video/types.ts  |  2 +-
 src/styles/main.scss                     | 66 +++++++++--------
 src/styles/reset.scss                    |  1 -
 4 files changed, 102 insertions(+), 60 deletions(-)

diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue
index 2a0f0895..c3aec272 100644
--- a/src/contentScripts/views/Video/Video.vue
+++ b/src/contentScripts/views/Video/Video.vue
@@ -1,15 +1,16 @@
 <script lang="ts" setup>
 import type { Ref, UnwrapNestedRefs } from 'vue'
-import type { VideoInfo } from './types'
+import type { Comment, VideoInfo } from './types'
 import { getCSRF, removeHttpFromUrl } from '~/utils'
 
 const videoContent = ref() as Ref<HTMLElement>
-const commentContent = ref() as Ref<HTMLElement>
+// const commentContent = ref() as Ref<HTMLElement>
 const danmukuContent = ref() as Ref<HTMLElement>
 const recommendedContent = ref() as Ref<HTMLElement>
 const videoEpisodeList = ref() as Ref<HTMLElement>
 const videoInfo = reactive<VideoInfo | {}>({}) as UnwrapNestedRefs<VideoInfo>
 const videoPlayerPreviousPosition = reactive<{ right: string; bottom: string }>({ right: '0', bottom: '0' })
+const commentList = reactive<Comment[]>([])
 
 onMounted(async () => {
   window.onload = () => {
@@ -17,9 +18,9 @@ onMounted(async () => {
     if (videoContent.value && videoPlayer)
       videoContent.value.appendChild(videoPlayer)
 
-    const comment = document.querySelector('#comment') as HTMLElement
-    if (commentContent.value && comment)
-      commentContent.value.appendChild(comment)
+    // const comment = document.querySelector('#comment') as HTMLElement
+    // if (commentContent.value && comment)
+    //   commentContent.value.appendChild(comment)
 
     const danmukuBox = document.querySelector('#danmukuBox') as HTMLElement
     if (danmukuContent.value && danmukuBox)
@@ -39,12 +40,12 @@ onMounted(async () => {
     videoPlayerContainer.style.right = '0'
     videoPlayerContainer.style.bottom = '0'
 
-    const app = document.querySelector('#app') as HTMLElement
-    app.innerHTML = ''
+    // const app = document.querySelector('#app') as HTMLElement
+    // app.innerHTML = ''
   }
 
   await getVideoInfo()
-  // getVideoComments()
+  getVideoComments()
 })
 
 onUnmounted(() => {
@@ -123,7 +124,7 @@ function getVideoComments() {
     pn: 1,
   }).then((res) => {
     if (res.code === 0)
-      console.log(res)
+      Object.assign(commentList, res.data.replies)
   })
 }
 </script>
@@ -137,33 +138,67 @@ function getVideoComments() {
           {{ videoInfo.title }}
         </p>
       </section>
-      <section flex justify-between bg="$bew-content-solid-1" rounded="$bew-radius" p-4>
-        <div flex>
-          <img
-            v-if="videoInfo.owner?.face"
-            :src="`${videoInfo.owner?.face}@60w_60h_1c`"
-            :alt="videoInfo.owner.name" rounded="$bew-radius-half" aspect-square
-            w-40px mr-4 shrink-0
-          >
-          <div>
-            <p text-xl fw-500>
-              {{ videoInfo.owner?.name }}
-            </p>
-            <!-- <Button @click="changeUrl">
-              click me
-            </Button> -->
-            <!-- <p>{{ videoInfo.owner }}</p> -->
+      <section bg="$bew-content-solid-1" rounded="$bew-radius" p-4>
+        <section flex justify-between bg="$bew-fill-1" rounded="$bew-radius" p-2 mb-4>
+          <div flex>
+            <img
+              v-if="videoInfo.owner?.face"
+              :src="`${videoInfo.owner?.face}@60w_60h_1c`"
+              :alt="videoInfo.owner.name" rounded="$bew-radius" aspect-square
+              w-40px mr-4 shrink-0
+            >
+            <div>
+              <p text-xl fw-500>
+                {{ videoInfo.owner?.name }}
+              </p>
+              <!-- <Button @click="changeUrl">
+                click me
+              </Button> -->
+              <!-- <p>{{ videoInfo.owner }}</p> -->
+            </div>
           </div>
-        </div>
+        </section>
+        <section style="white-space: pre-wrap" v-html="(videoInfo.desc_v2 ?? [''])[0].raw_text" />
       </section>
-      <section style="white-space: pre-wrap" v-html="(videoInfo.desc_v2 ?? [''])[0].raw_text" />
-      <!-- <section ref="commentContent" /> -->
+
       <section>
         <ul>
-          <li />
+          <li v-for="comment in commentList" :key="comment.rpid" flex="~ gap-6" mb-6>
+            <div shrink-0>
+              <img
+                :src="`${removeHttpFromUrl(comment.member.avatar)}@60w_60h_1c`" alt=""
+                aspect-square w-40px
+                rounded="$bew-radius-half"
+              >
+            </div>
+            <div>
+              <h3 fw-600 lh-6>
+                {{ comment.member.uname }}
+              </h3>
+              <div>
+                {{ comment.content.message }}
+                <ul v-if="comment.replies" mt-6>
+                  <li v-for="reply in comment.replies" :key="reply.rpid" flex="~ gap-6" mb-6>
+                    <div shrink-0>
+                      <img
+                        :src="`${removeHttpFromUrl(reply.member.avatar)}@60w_60h_1c`" alt=""
+                        aspect-square w-40px
+                        rounded="$bew-radius-half"
+                      >
+                    </div>
+                    <h3 fw-600 lh-6>
+                      {{ reply.member.uname }}
+                    </h3>
+                    <p>{{ reply.content.message }}</p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </li>
         </ul>
       </section>
     </main>
+
     <aside w="1/4" min-w-400px>
       <section ref="danmukuContent" rounded="$bew-radius" shadow="$bew-shadow-1" mb-3 />
       <section ref="videoEpisodeList" rounded="$bew-radius" shadow="$bew-shadow-1" />
diff --git a/src/contentScripts/views/Video/types.ts b/src/contentScripts/views/Video/types.ts
index 5846194a..fc335701 100644
--- a/src/contentScripts/views/Video/types.ts
+++ b/src/contentScripts/views/Video/types.ts
@@ -287,7 +287,7 @@ export interface Comment {
     'jump_url': {}
     'max_line': 6
   }
-  'replies': Array<Comment>
+  'replies'?: Comment[]
   'up_action': {
     'like': false
     'reply': false
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 7e322eb9..fc590be6 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -2,6 +2,10 @@
   color-scheme: dark;
 }
 
+html, body {
+  font-size: 14px;
+}
+
 html,
 body,
 #app {
@@ -26,34 +30,38 @@ body {
   -webkit-line-clamp: 2;
 }
 
-.btn {
-  --at-apply: px-4 py-2 rounded-$bew-radius inline-block
-    cursor-pointer transform duration-300
-    filter outline-none
-    border-2 border-solid border-$bew-theme-color
-    bg-$bew-theme-color text-white
-    active:scale-95 active:bg-$bew-theme-color active:brightness-110
-    focus:bg-$bew-theme-color
-    disabled:cursor-default disabled:bg-$bew-fill-4 disabled:opacity-50
-    disabled:border-$bew-fill-4;
+h1, h2, h3, h4, h5, h6 {
+  --at-apply: color-$bew-text-1;
 }
 
-.line-btn {
-  --at-apply: px-4 py-2 rounded-$bew-radius inline-block
-    cursor-pointer transform duration-300
-    bg-transparent filter
-    border-2 border-solid border-$bew-fill-4
-    text-$bew-fill-4
-    active:scale-95 active:brightness-110
-    disabled:cursor-default disabled:bg-$bew-fill-4 disabled:opacity-50;
-}
+// .btn {
+//   --at-apply: px-4 py-2 rounded-$bew-radius inline-block
+//     cursor-pointer transform duration-300
+//     filter outline-none
+//     border-2 border-solid border-$bew-theme-color
+//     bg-$bew-theme-color text-white
+//     active:scale-95 active:bg-$bew-theme-color active:brightness-110
+//     focus:bg-$bew-theme-color
+//     disabled:cursor-default disabled:bg-$bew-fill-4 disabled:opacity-50
+//     disabled:border-$bew-fill-4;
+// }
 
-.icon-btn {
-  --at-apply: inline-block cursor-pointer select-none
-    opacity-75 transition duration-200 ease-in-out
-    hover:opacity-100 hover:text-$bew-theme-color;
-  font-size: 1rem;
-}
+// .line-btn {
+//   --at-apply: px-4 py-2 rounded-$bew-radius inline-block
+//     cursor-pointer transform duration-300
+//     bg-transparent filter
+//     border-2 border-solid border-$bew-fill-4
+//     text-$bew-fill-4
+//     active:scale-95 active:brightness-110
+//     disabled:cursor-default disabled:bg-$bew-fill-4 disabled:opacity-50;
+// }
+
+// .icon-btn {
+//   --at-apply: inline-block cursor-pointer select-none
+//     opacity-75 transition duration-200 ease-in-out
+//     hover:opacity-100 hover:text-$bew-theme-color;
+//   font-size: 1rem;
+// }
 
 .chk-btn {
   --at-apply: flex px-4 py-2 items-center select-none;
@@ -63,7 +71,7 @@ body {
   }
 }
 
-select {
-  --at-apply: px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
-    text-center appearance-none text-$bew-text-1 outline-none;
-}
+// select {
+//   --at-apply: px-4 py-2 bg-$bew-fill-1 rounded-$bew-radius border-none
+//     text-center appearance-none text-$bew-text-1 outline-none;
+// }
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index ed42f911..1ed462e2 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -17,7 +17,6 @@
 
 html,
 body {
-  font-size: 14px;
   min-width: unset !important;
 }