feat: add emoji support for comments section in video page

* i18n: remove `ago` key

src/_locales/cmn-CN.yml

@@ -3,14 +3,13 @@ common:
   loading: 加载中...
   undo: 还原
   view: 次
-  ago: 前
-  year: 年
-  month: 个月
-  week: 个星期
-  day: 天
-  hour: 小时
-  minute: 分钟
-  second: 秒
+  year: 年前
+  month: 个月前
+  week: 个星期前
+  day: 天前
+  hour: 小时前
+  minute: 分钟前
+  second: 秒前
 settings:
   title: 设置
   select_language: 界面语文

src/_locales/cmn-TW.yml

@@ -3,14 +3,13 @@ common:
   loading: 載入中...
   undo: 復原
   view: 次
-  ago: 前
-  year: 年
-  month: 個月
-  week: 個禮拜
-  day: 天
-  hour: 小時
-  minute: 分鐘
-  second: 秒
+  year: 年前
+  month: 個月前
+  week: 個禮拜前
+  day: 天前
+  hour: 小時前
+  minute: 分鐘前
+  second: 秒前
 settings:
   title: 設定
   select_language: 介面語文

src/_locales/en.yml

@@ -3,14 +3,13 @@ common:
   loading: Loading...
   undo: UNDO
   view: no view | view | views
-  ago: ago
-  year: year | years
-  month: month | momths
-  week: week | weeks
-  day: day | days
-  hour: hour | hours
-  minute: minute | minutes
-  second: second | seconds
+  year: year ago | years ago
+  month: month ago | months ago
+  week: week ago | weeks ago
+  day: day ago | days ago
+  hour: hour ago | hours ago
+  minute: minute ago | minutes ago
+  second: second ago | seconds ago
 settings:
   title: Settings
   select_language: Language

src/_locales/jyut.yml

@@ -3,14 +3,13 @@ common:
   loading: 撈緊...
   undo: 整返
   view: 次
-  ago: 前
-  year: 年
-  month: 個月
-  week: 個禮拜
-  day: 日
-  hour: 個鐘頭
-  minute: 分鐘
-  second: 秒
+  year: 年前
+  month: 個月前
+  week: 個禮拜前
+  day: 日前
+  hour: 個鐘頭前
+  minute: 分鐘前
+  second: 秒前
 settings:
   title: 校做
   select_language: 介面語文

src/components/Topbar/TopbarMomentsPop.vue

@@ -394,10 +394,6 @@ function scrollToTop(element: HTMLElement, duration: number) {
                       moment.ctime
                         ? calcTimeSince(new Date(moment.ctime * 1000))
                         : moment.ctime
-                    }}{{
-                      language === LanguageType.English
-                        ? ` ${$t('common.ago')}`
-                        : $t('common.ago')
                     }}
                   </div>
 

src/components/VideoCard/VideoCard.vue

@@ -309,12 +309,7 @@ function gotoChannel(mid: number) {
                 : $t('common.view', videoData.stat.view)
             }}
             <span class="text-xs font-light">•</span>
-            {{ calcTimeSince(videoData.pubdate * 1000)
-            }}{{
-              language === LanguageType.English
-                ? ` ${$t('common.ago')}`
-                : $t('common.ago')
-            }}
+            {{ calcTimeSince(videoData.pubdate * 1000) }}
           </div>
         </div>
       </div>

src/contentScripts/views/Video/Video.vue

@@ -2,7 +2,7 @@
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { useDateFormat } from '@vueuse/core'
 import type { Comment, VideoInfo } from './types'
-import { getCSRF, removeHttpFromUrl } from '~/utils'
+import { calcTimeSince, getCSRF, removeHttpFromUrl } from '~/utils'
 
 const videoContent = ref() as Ref<HTMLElement>
 // const commentContent = ref() as Ref<HTMLElement>
@@ -124,6 +124,7 @@ function getVideoComments() {
     csrf: getCSRF(),
     oid: videoInfo.aid,
     pn: 1,
+    sort: 1,
   }).then((res) => {
     if (res.code === 0) {
       Object.assign(commentList, res.data.replies)
@@ -131,6 +132,31 @@ function getVideoComments() {
     }
   })
 }
+
+function setupCommentEmote(content: string, emote: any) {
+  let result = `${content}`
+
+  if (!emote || Object.keys(emote).length === 0)
+    return content
+
+  Object.keys(emote).forEach((key) => {
+    if (emote[key].meta.size === 1) {
+      result = result.replaceAll(key, `
+      <img 
+        src="${removeHttpFromUrl(emote[key].url)}@40w_40h.webp" width="20" height="20" 
+        style="vertical-align: text-bottom; display: inline" 
+      />`)
+    }
+    else {
+      result = result.replaceAll(key, `
+      <img 
+        src="${removeHttpFromUrl(emote[key].url)}@112w_112h.webp" width="50" height="50" 
+        style="vertical-align: text-bottom; display: inline" 
+      />`)
+    }
+  })
+  return result
+}
 </script>
 
 <template>
@@ -143,8 +169,19 @@ function getVideoComments() {
         </p>
       </section>
       <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>
+        <section
+          flex justify-between bg="$bew-fill-1" rounded="$bew-radius" p-2 mb-4 relative z-1
+          overflow-hidden
+        >
+          <img
+            v-if="videoInfo.owner?.face"
+            :src="`${videoInfo.owner?.face}@60w_60h_1c`"
+            :alt="videoInfo.owner.name" object-cover
+            blur-lg pointer-events-none z--1
+            w-full h-full pos="absolute top-0 left-0"
+            opacity-30
+          >
+          <div flex relative z-1>
             <img
               v-if="videoInfo.owner?.face"
               :src="`${videoInfo.owner?.face}@60w_60h_1c`"
@@ -165,40 +202,72 @@ function getVideoComments() {
         <section style="white-space: pre-wrap" v-html="(videoInfo.desc_v2 ?? [''])[0].raw_text" />
       </section>
 
+      <!-- Comments -->
       <section>
         <h2 text-2xl bold mb-6>
           {{ commentPageInfo.acount }} Comments
         </h2>
         <ul>
-          <li v-for="comment in commentList" :key="comment.rpid" flex="~ gap-6" mb-6>
+          <li
+            v-for="comment in commentList" :key="comment.rpid" flex="~ gap-4" mb-6
+          >
             <div shrink-0>
               <img
                 :src="`${removeHttpFromUrl(comment.member.avatar)}@60w_60h_1c`" alt=""
                 aspect-square w-40px
-                rounded="$bew-radius-half"
+                rounded="$bew-radius"
               >
             </div>
-            <div>
-              <h3 fw-600 lh-6 mb-2>
-                {{ comment.member.uname }}
-              </h3>
+            <div w-full>
+              <!-- username & sending time -->
+              <div mb-2 lh-6 flex gap-2 items-center>
+                <h3 fw-600>
+                  {{ comment.member.uname }}
+                </h3>
+                <div class="group">
+                  <span text="$bew-text-2" cursor-pointer v-text="calcTimeSince(comment.ctime * 1000)" />
+                  <span
+                    bg="black dark:white" text="white dark:black sm"
+                    p="x-2 y-1" ml-2 rounded-8 pointer-events-none
+                    opacity="0 group-hover:100" duration-300
+                    v-text="useDateFormat(comment.ctime * 1000, 'YYYY-MM-DD HH:mm:ss').value"
+                  />
+                </div>
+              </div>
+
+              <span v-html="setupCommentEmote(comment.content.message, comment.content.emote)" />
+
               <div>
-                <p>{{ comment.content.message }}</p>
-                <p>{{ useDateFormat(comment.ctime * 1000, 'YYYY-MM-DD HH:mm:ss') }}</p>
                 <ul v-if="comment.replies" mt-6>
-                  <li v-for="reply in comment.replies" :key="reply.rpid" flex="~ gap-6" mb-6>
+                  <li
+                    v-for="reply in comment.replies" :key="reply.rpid" flex="~ gap-4" mb-6
+                  >
                     <div shrink-0>
                       <img
                         :src="`${removeHttpFromUrl(reply.member.avatar)}@60w_60h_1c`" alt=""
-                        aspect-square w-40px
-                        rounded="$bew-radius-half"
+                        aspect-square w-30px
+                        rounded="$bew-radius"
                       >
                     </div>
                     <div>
-                      <h3 fw-600 lh-6 mb-2>
-                        {{ reply.member.uname }}
-                      </h3>
-                      <p>{{ reply.content.message }}</p>
+                      <!-- username & sending time -->
+                      <div mb-2 lh-6 flex gap-2 items-center>
+                        <h3 fw-600>
+                          {{ reply.member.uname }}
+                        </h3>
+                        <div class="group">
+                          <span text="$bew-text-2" cursor-pointer v-text="calcTimeSince(reply.ctime * 1000)" />
+                          <span
+                            bg="black dark:white" text="white dark:black sm"
+                            p="x-2 y-1" ml-2 rounded-8 pointer-events-none
+                            opacity="0 group-hover:100"
+                            duration-300
+                            v-text="useDateFormat(reply.ctime * 1000, 'YYYY-MM-DD HH:mm:ss').value"
+                          />
+                        </div>
+                      </div>
+
+                      <span v-html="setupCommentEmote(reply.content.message, reply.content.emote)" />
                     </div>
                   </li>
                 </ul>

src/styles/variables.scss

@@ -76,7 +76,7 @@
   // #region text colors
   --bew-text-1: hsl(217, 33%, 17%);
   --bew-text-2: hsl(215, 19%, 35%);
-  --bew-text-3: hsl(215, 19%, 55%);
+  --bew-text-3: hsl(215, 19%, 58%);
   --bew-text-4: hsl(215, 19%, 72%);
   // #endregion
 

src/utils/dataFormatter.ts

@@ -36,7 +36,7 @@ export const numFormatter = (num: number) => {
   return item ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol : '0'
 }
 
-export const calcTimeSince = (date: number | string) => {
+export const calcTimeSince = (date: number | string | Date) => {
   const seconds = Math.floor(((Number(new Date())) - Number(date)) / 1000)
   let interval = seconds / 31536000
   if (interval > 1)

src/utils/i18n.ts

@@ -4,6 +4,7 @@ import messages from '@intlify/unplugin-vue-i18n/messages'
 export const i18n = createI18n({
   legacy: false,
   locale: 'en',
+  fallbackLocale: 'en',
   globalInjection: true,
   messages,
 })