|
|
|
@ -1,8 +1,8 @@
|
|
|
|
<script setup lang="ts">
|
|
|
|
<script setup lang="ts">
|
|
|
|
import EpisodeThumb from '@/components/EpisodeThumb.vue'
|
|
|
|
import EpisodeThumb from '@/components/EpisodeThumb.vue'
|
|
|
|
import MediaInfo from '@/components/MediaInfo.vue'
|
|
|
|
import MediaInfo from '@/components/MediaInfo.vue'
|
|
|
|
import jfapi, { type Item } from '@/jfapi'
|
|
|
|
import jfapi, { type Item, type MediaStream } from '@/jfapi'
|
|
|
|
import { ref } from 'vue'
|
|
|
|
import { onBeforeMount, ref } from 'vue'
|
|
|
|
import { useRoute, RouterLink } from 'vue-router'
|
|
|
|
import { useRoute, RouterLink } from 'vue-router'
|
|
|
|
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
const route = useRoute()
|
|
|
|
@ -12,12 +12,15 @@ const itemId = String(route.params.id)
|
|
|
|
const item = ref<Item>()
|
|
|
|
const item = ref<Item>()
|
|
|
|
const directors = ref<string[]>([])
|
|
|
|
const directors = ref<string[]>([])
|
|
|
|
const writers = ref<string[]>([])
|
|
|
|
const writers = ref<string[]>([])
|
|
|
|
const selectSubTrack = ref('')
|
|
|
|
const selectSubTrack = ref<MediaStream>()
|
|
|
|
const selectAudioTrack = ref('')
|
|
|
|
const selectAudioTrack = ref<MediaStream>()
|
|
|
|
const nextUp = ref<Item>()
|
|
|
|
const nextUp = ref<Item>()
|
|
|
|
const numAudioStreams = ref(0)
|
|
|
|
const numAudioStreams = ref(0)
|
|
|
|
const userid = localStorage.getItem('jf_userid') || ''
|
|
|
|
const VideoStream = ref<MediaStream>()
|
|
|
|
jfapi.GetItem(userid, itemId).then((data) => {
|
|
|
|
const AudioStreams = ref<MediaStream[]>([])
|
|
|
|
|
|
|
|
const SubtitleStreams = ref<MediaStream[]>([])
|
|
|
|
|
|
|
|
onBeforeMount(() => {
|
|
|
|
|
|
|
|
jfapi.GetItem(itemId).then((data) => {
|
|
|
|
if (data === null) {
|
|
|
|
if (data === null) {
|
|
|
|
// error
|
|
|
|
// error
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
@ -25,11 +28,11 @@ jfapi.GetItem(userid, itemId).then((data) => {
|
|
|
|
if (item.value.IsFolder) {
|
|
|
|
if (item.value.IsFolder) {
|
|
|
|
console.log('Item is a Series')
|
|
|
|
console.log('Item is a Series')
|
|
|
|
// item is a full series
|
|
|
|
// item is a full series
|
|
|
|
jfapi.GetNextUpInSeries(userid, item.value.Id || '').then((data) => {
|
|
|
|
jfapi.GetNextUpInSeries(item.value.Id || '').then((data) => {
|
|
|
|
if (data?.Items && data.Items.length > 0) {
|
|
|
|
if (data?.Items && data.Items.length > 0) {
|
|
|
|
nextUp.value = data.Items[0]
|
|
|
|
nextUp.value = data.Items[0]
|
|
|
|
} else {
|
|
|
|
} else {
|
|
|
|
jfapi.GetFirstEpisode(userid, item.value?.Id).then((data) => {
|
|
|
|
jfapi.GetFirstEpisode(item.value?.Id || '').then((data) => {
|
|
|
|
if (data?.Items) {
|
|
|
|
if (data?.Items) {
|
|
|
|
nextUp.value = data.Items[0]
|
|
|
|
nextUp.value = data.Items[0]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -40,27 +43,31 @@ jfapi.GetItem(userid, itemId).then((data) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (item.value !== undefined && item.value.MediaStreams !== undefined) {
|
|
|
|
if (item.value !== undefined && item.value.MediaStreams !== undefined) {
|
|
|
|
for (const stream of item.value.MediaStreams) {
|
|
|
|
for (const stream of item.value.MediaStreams) {
|
|
|
|
if (stream.Type.toLowerCase() === 'audio') {
|
|
|
|
if (stream.Type.toLowerCase() === 'video') {
|
|
|
|
|
|
|
|
VideoStream.value = stream
|
|
|
|
|
|
|
|
} else if (stream.Type.toLowerCase() === 'audio') {
|
|
|
|
|
|
|
|
AudioStreams.value.push(stream)
|
|
|
|
numAudioStreams.value++
|
|
|
|
numAudioStreams.value++
|
|
|
|
if (stream.IsForced && !selectAudioTrack.value.includes('Forced')) {
|
|
|
|
if (stream.IsForced && !selectAudioTrack.value?.DisplayTitle.includes('Forced')) {
|
|
|
|
selectAudioTrack.value = stream.DisplayTitle
|
|
|
|
selectAudioTrack.value = stream
|
|
|
|
} else if (
|
|
|
|
} else if (
|
|
|
|
stream.IsDefault &&
|
|
|
|
stream.IsDefault &&
|
|
|
|
!selectAudioTrack.value.includes('Forced') &&
|
|
|
|
!selectAudioTrack.value?.DisplayTitle.includes('Forced') &&
|
|
|
|
!selectAudioTrack.value.includes('Default')
|
|
|
|
!selectAudioTrack.value?.DisplayTitle.includes('Default')
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
selectAudioTrack.value = stream.DisplayTitle
|
|
|
|
selectAudioTrack.value = stream
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (stream.Type.toLowerCase() === 'subtitle') {
|
|
|
|
} else if (stream.Type.toLowerCase() === 'subtitle') {
|
|
|
|
if (stream.IsForced && !selectSubTrack.value.includes('Forced')) {
|
|
|
|
SubtitleStreams.value.push(stream)
|
|
|
|
selectSubTrack.value = stream.DisplayTitle
|
|
|
|
if (stream.IsForced && !selectSubTrack.value?.DisplayTitle.includes('Forced')) {
|
|
|
|
|
|
|
|
selectSubTrack.value = stream
|
|
|
|
} else if (
|
|
|
|
} else if (
|
|
|
|
stream.IsDefault &&
|
|
|
|
stream.IsDefault &&
|
|
|
|
!selectSubTrack.value.includes('Forced') &&
|
|
|
|
!selectSubTrack.value?.DisplayTitle.includes('Forced') &&
|
|
|
|
!selectSubTrack.value.includes('Default')
|
|
|
|
!selectSubTrack.value?.DisplayTitle.includes('Default')
|
|
|
|
) {
|
|
|
|
) {
|
|
|
|
console.log(stream)
|
|
|
|
console.log(stream)
|
|
|
|
selectSubTrack.value = stream.DisplayTitle
|
|
|
|
selectSubTrack.value = stream
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -74,8 +81,10 @@ jfapi.GetItem(userid, itemId).then((data) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
console.log(writers.value, directors.value)
|
|
|
|
console.log(writers.value, directors.value)
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const arrayRange = (start: number, stop: number) =>
|
|
|
|
const arrayRange = (start: number, stop: number) =>
|
|
|
|
Array.from({ length: (stop - start) / 1 + 1 }, (value, index) => start + index * 1)
|
|
|
|
Array.from({ length: (stop - start) / 1 }, (value, index) => start + index * 1)
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
@ -105,12 +114,12 @@ const arrayRange = (start: number, stop: number) =>
|
|
|
|
:src="`${
|
|
|
|
:src="`${
|
|
|
|
item.ParentLogoImageTag && item.ParentLogoItemId
|
|
|
|
item.ParentLogoImageTag && item.ParentLogoItemId
|
|
|
|
? jfapi.LogoImageUrl(item.ParentLogoItemId, item.ParentLogoImageTag)
|
|
|
|
? jfapi.LogoImageUrl(item.ParentLogoItemId, item.ParentLogoImageTag)
|
|
|
|
: jfapi.LogoImageUrl(item.Id, item.ImageTags.Logo)
|
|
|
|
: jfapi.LogoImageUrl(item.Id, item.ImageTags.Logo || '')
|
|
|
|
}`"
|
|
|
|
}`"
|
|
|
|
alt=""
|
|
|
|
alt=""
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
<div class="title" v-else>{{ item.SeriesName ? item.SeriesName : item.Name }}</div>
|
|
|
|
<div class="title" v-else>{{ item.SeriesName ? item.SeriesName : item.Name }}</div>
|
|
|
|
<MediaInfo />
|
|
|
|
<MediaInfo :itemId="item.Id" :endsAt="item.Type !== 'Series'" size="lg" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-wrapper">
|
|
|
|
<div class="info-wrapper">
|
|
|
|
@ -135,22 +144,22 @@ const arrayRange = (start: number, stop: number) =>
|
|
|
|
<div class="media-streams" v-if="item.MediaStreams !== undefined">
|
|
|
|
<div class="media-streams" v-if="item.MediaStreams !== undefined">
|
|
|
|
<div class="info-item">
|
|
|
|
<div class="info-item">
|
|
|
|
<div class="stream-type">Video</div>
|
|
|
|
<div class="stream-type">Video</div>
|
|
|
|
<div class="stream-value">{{ item?.MediaStreams[0].DisplayTitle }}</div>
|
|
|
|
<div class="stream-value">{{ VideoStream?.DisplayTitle }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
|
|
<div class="info-item">
|
|
|
|
<div class="stream-type">Audio</div>
|
|
|
|
<div class="stream-type">Audio</div>
|
|
|
|
<div class="stream-selector" v-if="numAudioStreams > 1">
|
|
|
|
<div class="stream-selector" v-if="AudioStreams.length > 1">
|
|
|
|
<select name="audio-stream-select" :id="`${item?.Id}-audio-select`">
|
|
|
|
<select name="audio-stream-select" :id="`${item?.Id}-audio-select`">
|
|
|
|
<option
|
|
|
|
<option
|
|
|
|
:value="`${item?.MediaStreams}`"
|
|
|
|
:value="`${AudioStreams[i].DisplayTitle}`"
|
|
|
|
v-for="i in arrayRange(1, numAudioStreams)"
|
|
|
|
v-for="i in arrayRange(0, AudioStreams.length)"
|
|
|
|
:key="`audio-stream-${i}`"
|
|
|
|
:key="`audio-stream-${i}`"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{{ item?.MediaStreams[i].DisplayTitle }}
|
|
|
|
{{ AudioStreams[i].DisplayTitle }}
|
|
|
|
</option>
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="stream-value" v-else>{{ item?.MediaStreams[1].DisplayTitle }}</div>
|
|
|
|
<div class="stream-value" v-else>{{ AudioStreams[0].DisplayTitle }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
|
|
<div class="info-item">
|
|
|
|
<div class="stream-type">Subtitles</div>
|
|
|
|
<div class="stream-type">Subtitles</div>
|
|
|
|
@ -158,16 +167,16 @@ const arrayRange = (start: number, stop: number) =>
|
|
|
|
<select
|
|
|
|
<select
|
|
|
|
name="subtitle-stream-select"
|
|
|
|
name="subtitle-stream-select"
|
|
|
|
:id="`${item?.Id}-subtitle-select`"
|
|
|
|
:id="`${item?.Id}-subtitle-select`"
|
|
|
|
v-if="item?.MediaStreams.length > numAudioStreams + 1"
|
|
|
|
v-if="SubtitleStreams.length > 0"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<option value="Off">Off</option>
|
|
|
|
<option value="Off">Off</option>
|
|
|
|
<option
|
|
|
|
<option
|
|
|
|
:value="`${item?.MediaStreams[i].DisplayTitle}`"
|
|
|
|
v-for="i in arrayRange(0, SubtitleStreams.length)"
|
|
|
|
v-for="i in arrayRange(numAudioStreams + 1, item.MediaStreams.length - 1)"
|
|
|
|
:value="`${SubtitleStreams[i]?.DisplayTitle}`"
|
|
|
|
:selected="item?.MediaStreams[i].DisplayTitle === selectSubTrack"
|
|
|
|
:selected="SubtitleStreams[i]?.DisplayTitle === selectSubTrack?.DisplayTitle"
|
|
|
|
:key="`subtitle-stream-${i}`"
|
|
|
|
:key="`subtitle-stream-${i}`"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
{{ item?.MediaStreams[i].DisplayTitle }}
|
|
|
|
{{ SubtitleStreams[i]?.DisplayTitle }}
|
|
|
|
</option>
|
|
|
|
</option>
|
|
|
|
</select>
|
|
|
|
</select>
|
|
|
|
<div class="stream-value" v-else>None</div>
|
|
|
|
<div class="stream-value" v-else>None</div>
|
|
|
|
@ -175,6 +184,9 @@ const arrayRange = (start: number, stop: number) =>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="title episode-title" v-if="item.Type === 'Episode'">
|
|
|
|
|
|
|
|
{{ `S${item.ParentIndexNumber}:E${item.IndexNumber} - ${item.Name}` }}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<blockquote class="tagline" v-if="item?.Taglines.length > 0">
|
|
|
|
<blockquote class="tagline" v-if="item?.Taglines.length > 0">
|
|
|
|
{{ item?.Taglines[0] }}
|
|
|
|
{{ item?.Taglines[0] }}
|
|
|
|
</blockquote>
|
|
|
|
</blockquote>
|
|
|
|
@ -218,6 +230,9 @@ const arrayRange = (start: number, stop: number) =>
|
|
|
|
margin: auto;
|
|
|
|
margin: auto;
|
|
|
|
padding: 3em 0;
|
|
|
|
padding: 3em 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.subheading {
|
|
|
|
|
|
|
|
width: 70%;
|
|
|
|
|
|
|
|
}
|
|
|
|
.item-info {
|
|
|
|
.item-info {
|
|
|
|
padding: 3em 4em;
|
|
|
|
padding: 3em 4em;
|
|
|
|
width: 800px;
|
|
|
|
width: 800px;
|
|
|
|
@ -238,8 +253,7 @@ const arrayRange = (start: number, stop: number) =>
|
|
|
|
justify-content: space-between;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 1.5em;
|
|
|
|
gap: 1.5em;
|
|
|
|
width: 95%;
|
|
|
|
width: 95%;
|
|
|
|
margin: 0 auto;
|
|
|
|
margin: 2em auto;
|
|
|
|
margin-top: 2em;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.media-title {
|
|
|
|
.media-title {
|
|
|
|
min-height: 200px;
|
|
|
|
min-height: 200px;
|
|
|
|
@ -252,6 +266,13 @@ const arrayRange = (start: number, stop: number) =>
|
|
|
|
font-size: 52px;
|
|
|
|
font-size: 52px;
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
font-family: 'DM Sans', sans-serif;
|
|
|
|
font-family: 'DM Sans', sans-serif;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
width: 90%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.title.episode-title {
|
|
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.logo {
|
|
|
|
.logo {
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
|
