Merge pull request #764 from LiviaMedeiros/ft-navdrawer-time-title

Add `title` showing stream start time on navdrawer
HolodexNet · Mar 27, 2024 · 3cf03cd · 3cf03cd
2 parents a798527 + 8afc723
commit 3cf03cd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 22 deletions.
diff --git a/src/components/nav/NavDrawer.vue b/src/components/nav/NavDrawer.vue
@@ -103,7 +103,9 @@
               <v-avatar v-if="vid.host_channel" :size="20">
                 <ChannelImg :channel="vid.host_channel" :size="20" />
               </v-avatar>
-              {{ formatDurationUpcoming(vid.available_at) }}
+              <time v-if="vid.available_at" :datetime="vid.available_at" :title="absoluteTimeString(vid)">
+                {{ formatDurationUpcoming(vid.available_at) }}
+              </time>
             </div>
           </v-list-item-action-text>
         </v-list-item>
@@ -152,7 +154,7 @@
 import ChannelImg from "@/components/channel/ChannelImg.vue";
 import ChannelInfo from "@/components/channel/ChannelInfo.vue";
 import { langs } from "@/plugins/vuetify";
-import { dayjs, formatDurationShort } from "@/utils/time";
+import { dayjs, formatDurationShort, titleTimeString } from "@/utils/time";
 import { mdiTuneVariant, mdiPatreon, mdiChevronUp, mdiChevronDown } from "@mdi/js";
 import Settings from "@/views/Settings.vue";
 import MusicdexLogo from "@/components/common/MusicdexLogo.vue";
@@ -298,6 +300,9 @@ export default {
             const secs = dayjs(ts).diff(dayjs()) / 1000;
             return formatDurationShort(Math.abs(secs));
         },
+        absoluteTimeString(video) {
+            return titleTimeString(video.available_at);
+        },
         isLive(video) {
             return video.status === "live";
         },

diff --git a/src/components/video/VideoCard.vue b/src/components/video/VideoCard.vue
@@ -307,7 +307,7 @@ import {
     formatDuration,
     formatDistance,
     dayjs,
-    localizedDayjs,
+    titleTimeString,
 } from "@/utils/time";
 import { mdiBroadcast, mdiTwitch, mdiTwitter } from "@mdi/js";
 import VideoCardMenu from "../common/VideoCardMenu.vue";
@@ -454,16 +454,7 @@ export default {
             );
         },
         absoluteTimeString() {
-            const ts = localizedDayjs(this.data.available_at, this.lang);
-
-            const ts1 = ts.format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
-            const ts2 = ts
-                .tz("Asia/Tokyo")
-                .format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
-            if (ts1 === ts2) {
-                return ts1;
-            }
-            return `${ts1}\n${ts2}`;
+            return titleTimeString(this.data.available_at, this.lang);
         },
         videoTitle() {
             return this.title;

diff --git a/src/components/watch/WatchInfo.vue b/src/components/watch/WatchInfo.vue
@@ -156,6 +156,7 @@ import {
     formatDistance,
     dayjs,
     localizedDayjs,
+    titleTimeString,
 } from "@/utils/time";
 import TruncatedText from "@/components/common/TruncatedText.vue";
 import { mdiAt } from "@mdi/js";
@@ -202,15 +203,7 @@ export default {
             return this.$store.state.settings.lang;
         },
         absoluteTimeString() {
-            const ts = localizedDayjs(this.video.available_at, this.lang);
-            const ts1 = ts.format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
-            const ts2 = ts
-                .tz("Asia/Tokyo")
-                .format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
-            if (ts1 === ts2) {
-                return ts1;
-            }
-            return `${ts1}\n${ts2}`;
+            return titleTimeString(this.video.available_at, this.lang);
         },
         formattedTime() {
             switch (this.video.status) {

diff --git a/src/utils/time.js b/src/utils/time.js
@@ -54,6 +54,19 @@ export function localizedDayjs(time, lang) {
     // lang = dayjsName[lang] || lang;
     return dayjs(time);
 }
+
+export function titleTimeString(available_at, lang ) {
+    const ts = localizedDayjs(available_at, lang);
+    const ts1 = ts.format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
+    const ts2 = ts
+        .tz("Asia/Tokyo")
+        .format(`${ts.isTomorrow() ? "ddd " : ""}LT zzz`);
+    if (ts1 === ts2) {
+        return ts1;
+    }
+    return `${ts1}\n${ts2}`;
+}
+
 export function formatDistance(time, lang, $t, allowNegative = true, now = dayjs()) {
     let diff;
     if (!time) return "?";