Merge pull request #43 from miyaoka/fix-elapsed

配信終了判定を修正

src/components/streams/LiverEventCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRaw, toRef } from "vue";
+import { computed, toRaw, toRefs } from "vue";
 import { useLiverEvent } from "./useLiverEvent";
 import type { LiverEvent } from "@/services/api";
 import { getThumnail } from "@/lib/youtube";
@@ -12,11 +12,11 @@ const props = defineProps<{
   liverEvent: LiverEvent;
 }>();
 
+const { liverEvent } = toRefs(props);
+
 const focusStore = useFocusStore();
 const searchStore = useSearchStore();
-const { isFinished, elapsedTime, isNew, hasBookmark, hasNotify } = useLiverEvent(
-  toRef(props.liverEvent),
-);
+const { isFinished, liveDurationLabel, isNew, hasBookmark, hasNotify } = useLiverEvent(liverEvent);
 
 const timeDisplay = computed(() => {
   const { isLive, startAt } = props.liverEvent;
@@ -96,12 +96,12 @@ function setSearchString(str: string) {
       >
         <i v-if="liverEvent.isLive" class="i-mdi-play-circle size-5" />
         <span>{{ timeDisplay }}</span>
-        <template v-if="elapsedTime">
+        <template v-if="liveDurationLabel">
           <span class="font-normal">
-            {{ `(${elapsedTime.fixed}h)` }}
+            {{ `(${liveDurationLabel.fixed}h)` }}
           </span>
           <div class="flex items-center opacity-50">
-            <i v-for="time in elapsedTime.count" :key="time" :class="`i-mdi-clock h-4 w-4`" />
+            <i v-for="time in liveDurationLabel.count" :key="time" :class="`i-mdi-clock h-4 w-4`" />
           </div>
         </template>
       </div>

src/components/streams/useLiverEvent.ts

@@ -6,7 +6,7 @@ import { useEventListStore } from "@/store/eventListStore";
 
 const oneHour = 60 * 60 * 1000;
 
-// ホロライブのライブ判定開始用
+// ホロライブのライブ開始判定用
 const liveStartDuration = 20 * 60 * 1000;
 const liveEndDuration = 60 * 60 * 1000;
 
@@ -22,12 +22,11 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
     // 配信中か
     if (liverEvent.value.isLive) return false;
 
-    // 配信していない場合
-    const now = dateStore.currentTime;
-
-    const elapsed = now - startTime.value;
+    // 配信していない場合、経過時間で判定
+    const elapsed = elapsedTime.value;
     // 現在時刻を過ぎていなければ開始前
-    if (elapsed < 0) return false;
+    if (elapsed === 0) return false;
+
     // ホロライブの場合
     if (liverEvent.value.affilication === "hololive") {
       // 配信開始直後は開始時間が更新されてもliveになっていない場合があるので一定時間判定しない
@@ -47,24 +46,36 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
     return liverEvent.value.startAt.getTime();
   });
 
+  // 開始時刻からの経過時間
   const elapsedTime = computed(() => {
-    const { isLive, endAt } = liverEvent.value;
-
-    const time = (() => {
-      // 終了時間があれば終了時間から開始時間を引く
-      if (endAt) {
-        return endAt.getTime() - startTime.value;
-      }
-      // ライブ中なら現在時刻から開始時間を引く
-      if (isLive) {
-        return dateStore.currentTime - startTime.value;
-      }
-      return 0;
-    })();
-
-    if (time === 0) return null;
-
-    const hour = time / oneHour;
+    return Math.max(0, dateStore.currentTime - startTime.value);
+  });
+
+  // イベント開始から終了までの経過時間
+  const startToEndDuration = computed(() => {
+    const { endAt } = liverEvent.value;
+    if (!endAt) return null;
+    return endAt.getTime() - startTime.value;
+  });
+
+  // 配信した時間
+  const liveDuration = computed(() => {
+    // 終了時間が設定されている場合はそれを返す
+    if (startToEndDuration.value) return startToEndDuration.value;
+
+    // 配信中の場合は経過時間を返す
+    const { isLive } = liverEvent.value;
+    if (isLive) return elapsedTime.value;
+
+    // それ以外の場合は0を返す
+    return 0;
+  });
+
+  // 配信時間をラベル表示用に整形
+  const liveDurationLabel = computed(() => {
+    if (liveDuration.value === 0) return null;
+
+    const hour = liveDuration.value / oneHour;
     return {
       fixed: hour.toFixed(1),
       count: Math.min(12, Math.max(1, Math.round(hour))),
@@ -90,6 +101,8 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
   return {
     isFinished,
     elapsedTime,
+    liveDuration,
+    liveDurationLabel,
     isNew,
     hasBookmark,
     hasNotify,