From 70b68be9e48bb6a5d3dc83e209e8c9fca4d0179a Mon Sep 17 00:00:00 2001
From: Masaya Kazama <miyaokamiyao@gmail.com>
Date: Fri, 4 Oct 2024 03:47:07 +0000
Subject: [PATCH] =?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>