From ccab04b2dc312e885507598b70dc765a0ec4e883 Mon Sep 17 00:00:00 2001
From: Masaya Kazama <miyaokamiyao@gmail.com>
Date: Thu, 3 Oct 2024 12:14:42 +0000
Subject: [PATCH 1/4] =?UTF-8?q?=E9=80=9A=E7=9F=A5=E7=A2=BA=E8=AA=8D?=
 =?UTF-8?q?=E7=94=A8=E3=81=AB=E9=96=8B=E5=A7=8B=E6=99=82=E9=96=93=E3=82=92?=
 =?UTF-8?q?=E9=81=8E=E3=81=8E=E3=81=9F=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=81=AB=E3=82=82=E9=80=9A=E7=9F=A5=E3=83=9C=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/streams/detail/LiverEventDetailPopover.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/streams/detail/LiverEventDetailPopover.vue b/src/components/streams/detail/LiverEventDetailPopover.vue
index 492b926..a51596a 100644
--- a/src/components/streams/detail/LiverEventDetailPopover.vue
+++ b/src/components/streams/detail/LiverEventDetailPopover.vue
@@ -50,8 +50,9 @@ function setSearchString(str: string) {
 // 通知機能が使えるか
 const canSetNotify = computed(() => {
   if (!notificationStore.isSupported) return false;
+  return true;
   // 開始時間前なら通知可能
-  return beforeStartTime.value && !isFinished.value;
+  // return beforeStartTime.value && !isFinished.value;
 });
 
 async function onClickNotify(id: string) {

From 97ac14aa2e2cd13924bc34df54c279bf7b250652 Mon Sep 17 00:00:00 2001
From: Masaya Kazama <miyaokamiyao@gmail.com>
Date: Fri, 4 Oct 2024 03:39:09 +0000
Subject: [PATCH 2/4] =?UTF-8?q?elapsedTime=E3=81=A8hour=E3=82=92=E5=88=86?=
 =?UTF-8?q?=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/streams/useLiverEvent.ts | 36 ++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/streams/useLiverEvent.ts b/src/components/streams/useLiverEvent.ts
index 5465ee1..7c63302 100644
--- a/src/components/streams/useLiverEvent.ts
+++ b/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 = dateStore.currentTime - startTime.value;
     // 現在時刻を過ぎていなければ開始前
-    if (elapsed < 0) return false;
+    if (elapsed <= 0) return false;
+
     // ホロライブの場合
     if (liverEvent.value.affilication === "hololive") {
       // 配信開始直後は開始時間が更新されてもliveになっていない場合があるので一定時間判定しない
@@ -49,19 +48,19 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
 
   const elapsedTime = computed(() => {
     const { isLive, endAt } = liverEvent.value;
+    // 終了時間があれば終了時間から開始時間を引く
+    if (endAt) {
+      return endAt.getTime() - startTime.value;
+    }
+    // ライブ中なら現在時刻から開始時間を引く
+    if (isLive) {
+      return dateStore.currentTime - startTime.value;
+    }
+    return 0;
+  });
 
-    const time = (() => {
-      // 終了時間があれば終了時間から開始時間を引く
-      if (endAt) {
-        return endAt.getTime() - startTime.value;
-      }
-      // ライブ中なら現在時刻から開始時間を引く
-      if (isLive) {
-        return dateStore.currentTime - startTime.value;
-      }
-      return 0;
-    })();
-
+  const elapsedHour = computed(() => {
+    const time = elapsedTime.value;
     if (time === 0) return null;
 
     const hour = time / oneHour;
@@ -90,6 +89,7 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
   return {
     isFinished,
     elapsedTime,
+    elapsedHour,
     isNew,
     hasBookmark,
     hasNotify,

From 0445c0a3832d12f31d73caefc693a762d6693438 Mon Sep 17 00:00:00 2001
From: Masaya Kazama <miyaokamiyao@gmail.com>
Date: Fri, 4 Oct 2024 03:47:07 +0000
Subject: [PATCH 3/4] =?UTF-8?q?toRefs=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/streams/LiverEventCard.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/streams/LiverEventCard.vue b/src/components/streams/LiverEventCard.vue
index 6642d68..ca4e119 100644
--- a/src/components/streams/LiverEventCard.vue
+++ b/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, elapsedHour, 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="elapsedHour">
           <span class="font-normal">
-            {{ `(${elapsedTime.fixed}h)` }}
+            {{ `(${elapsedHour.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 elapsedHour.count" :key="time" :class="`i-mdi-clock h-4 w-4`" />
           </div>
         </template>
       </div>

From 75627251f4ce27784818ed243ac2ff8b6bec39a8 Mon Sep 17 00:00:00 2001
From: Masaya Kazama <miyaokamiyao@gmail.com>
Date: Fri, 4 Oct 2024 04:18:55 +0000
Subject: [PATCH 4/4] refactor

---
 src/components/streams/LiverEventCard.vue |  8 ++--
 src/components/streams/useLiverEvent.ts   | 45 +++++++++++++++--------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/components/streams/LiverEventCard.vue b/src/components/streams/LiverEventCard.vue
index ca4e119..c68819f 100644
--- a/src/components/streams/LiverEventCard.vue
+++ b/src/components/streams/LiverEventCard.vue
@@ -16,7 +16,7 @@ const { liverEvent } = toRefs(props);
 
 const focusStore = useFocusStore();
 const searchStore = useSearchStore();
-const { isFinished, elapsedHour, isNew, hasBookmark, hasNotify } = useLiverEvent(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="elapsedHour">
+        <template v-if="liveDurationLabel">
           <span class="font-normal">
-            {{ `(${elapsedHour.fixed}h)` }}
+            {{ `(${liveDurationLabel.fixed}h)` }}
           </span>
           <div class="flex items-center opacity-50">
-            <i v-for="time in elapsedHour.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>
diff --git a/src/components/streams/useLiverEvent.ts b/src/components/streams/useLiverEvent.ts
index 7c63302..77d30e8 100644
--- a/src/components/streams/useLiverEvent.ts
+++ b/src/components/streams/useLiverEvent.ts
@@ -23,9 +23,9 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
     if (liverEvent.value.isLive) return false;
 
     // 配信していない場合、経過時間で判定
-    const elapsed = dateStore.currentTime - startTime.value;
+    const elapsed = elapsedTime.value;
     // 現在時刻を過ぎていなければ開始前
-    if (elapsed <= 0) return false;
+    if (elapsed === 0) return false;
 
     // ホロライブの場合
     if (liverEvent.value.affilication === "hololive") {
@@ -46,24 +46,36 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
     return liverEvent.value.startAt.getTime();
   });
 
+  // 開始時刻からの経過時間
   const elapsedTime = computed(() => {
-    const { isLive, endAt } = liverEvent.value;
-    // 終了時間があれば終了時間から開始時間を引く
-    if (endAt) {
-      return endAt.getTime() - startTime.value;
-    }
-    // ライブ中なら現在時刻から開始時間を引く
-    if (isLive) {
-      return dateStore.currentTime - startTime.value;
-    }
+    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 elapsedHour = computed(() => {
-    const time = elapsedTime.value;
-    if (time === 0) return null;
+  // 配信時間をラベル表示用に整形
+  const liveDurationLabel = computed(() => {
+    if (liveDuration.value === 0) return null;
 
-    const hour = time / oneHour;
+    const hour = liveDuration.value / oneHour;
     return {
       fixed: hour.toFixed(1),
       count: Math.min(12, Math.max(1, Math.round(hour))),
@@ -89,7 +101,8 @@ export const useLiverEvent = (liverEvent: Ref<LiverEvent>) => {
   return {
     isFinished,
     elapsedTime,
-    elapsedHour,
+    liveDuration,
+    liveDurationLabel,
     isNew,
     hasBookmark,
     hasNotify,