parent
7e7aa8f6f4
commit
a93426ded2
@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import type { Item } from '@/jfapi'
|
||||
import jfapi from '@/jfapi'
|
||||
import { onBeforeMount, ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: Item
|
||||
}>()
|
||||
|
||||
// const episodes = ref<Item[]>([])
|
||||
|
||||
// onBeforeMount(async () => {
|
||||
// const response = await jfapi.GetEpisodes(props.item.Id)
|
||||
// })
|
||||
</script>
|
||||
@ -1,31 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import type { FeedItem } from '@/feed'
|
||||
import jfapi, { type Item } from '@/jfapi'
|
||||
import { getDisplayDuration, ticksToMH } from '@/utils'
|
||||
import { onBeforeMount, ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
item: FeedItem
|
||||
endsAt: boolean
|
||||
itemId: string
|
||||
endsAt?: boolean
|
||||
size: string
|
||||
}>()
|
||||
|
||||
const item = ref<Item>()
|
||||
const timeString = ref('')
|
||||
onBeforeMount(async () => {
|
||||
const data = await jfapi.GetItem(props.itemId)
|
||||
if (data) {
|
||||
item.value = data
|
||||
const now = new Date()
|
||||
const runtime = ticksToMH(data.RunTimeTicks)
|
||||
const endTime = new Date(now.getTime() + 60 * 1000 * (runtime.hours * 60 + runtime.minutes))
|
||||
timeString.value = `${endTime.toLocaleString('default', { hour: 'numeric', minute: 'numeric' }).replace(' PM', 'pm').replace(' AM', 'am')}`
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="info-misc">
|
||||
<div class="misc-info-year">2019</div>
|
||||
<div class="misc-info-runtime">2h 12m</div>
|
||||
<div class="misc-info imdb-rating">
|
||||
<font-awesome-icon icon="fa-solid fa-star" size="xs" class="star-rating" /> 7.6
|
||||
<div
|
||||
class="info-misc"
|
||||
:style="{ fontSize: `${props.size}px`, gap: `${size === 'sm' ? '1.4' : '3'}em` }"
|
||||
>
|
||||
<div class="misc-info-year">{{ item?.ProductionYear }}</div>
|
||||
<div class="misc-info-runtime" v-if="item?.RunTimeTicks">
|
||||
{{ getDisplayDuration(item?.RunTimeTicks) }}
|
||||
</div>
|
||||
<div class="misc-info imdb-rating" v-if="item?.CommunityRating">
|
||||
<font-awesome-icon icon="fa-solid fa-star" size="xs" class="star-rating" />
|
||||
{{ item?.CommunityRating.toFixed(2) }}
|
||||
</div>
|
||||
<div class="misc-info-age-rating" v-if="item?.OfficialRating">
|
||||
<span :class="`age-rating ${props.size ? props.size : ''}`">{{ item?.OfficialRating }}</span>
|
||||
</div>
|
||||
<div class="misc-info-age-rating"><span class="age-rating">R</span></div>
|
||||
<div class="media-showcase-end-time" v-if="props.endsAt">Ends at 6:23pm</div>
|
||||
<div class="media-showcase-end-time" v-if="props.endsAt">{{ `Ends at ${timeString}` }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.info-misc {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 3em;
|
||||
justify-content: space-between;
|
||||
color: var(--color-text);
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="search-box">
|
||||
<input type="text" name="" id="" />
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in new issue