fix 'last stream' message on series card

This commit is contained in:
sunda 2022-05-06 15:10:53 +02:00
parent e29bc39075
commit 6462f327c9
3 changed files with 65 additions and 44 deletions

View File

@ -7,15 +7,32 @@ import { Img, LabelBlock, Wrapper } from './styles'
import { andList } from '../../helpers/string' import { andList } from '../../helpers/string'
import { colours } from '../../assets/theme' import { colours } from '../../assets/theme'
const SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsArray, slug, }, isPast, ...rest }) => { const SeriesCard = ({
series: { image, episodes, title, subtitle, hosts: hostsArray, slug },
isPast,
...rest
}) => {
const hosts = hostsArray.map(({ actor }) => actor.name) const hosts = hostsArray.map(({ actor }) => actor.name)
const episodesLength = episodes.past.length + episodes.future.length const episodesLength = episodes.past.length + episodes.future.length
const getNextLastStreamText = () => { const getNextLastStreamText = () => {
const hasFutureEpisodes = episodes.future.length const hasFutureEpisodes = episodes.future.length
const prefix = hasFutureEpisodes ? strings.en.nextStream : strings.en.lastStream const prefix = hasFutureEpisodes
const mainText = formatDistanceToNow(new Date(episodes[hasFutureEpisodes ? 'future' : 'past'][0][hasFutureEpisodes ? 'endsOn' : 'beginsOn']), { addSuffix: true }) ? strings.en.nextStream
: strings.en.lastStream
console.log({ el1: episodes })
const episodesList = episodes[hasFutureEpisodes ? 'future' : 'past']
const mainText = formatDistanceToNow(
new Date(
episodesList[hasFutureEpisodes ? 0 : episodesList.length - 1][
hasFutureEpisodes ? 'endsOn' : 'beginsOn'
]
),
{ addSuffix: true }
)
return `${prefix} ${mainText}` return `${prefix} ${mainText}`
} }
@ -24,21 +41,24 @@ const SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsAr
<Link to={`series/${slug}`}> <Link to={`series/${slug}`}>
<Wrapper {...rest}> <Wrapper {...rest}>
<Img src={image}> <Img src={image}>
<LabelBlock <LabelBlock $position="top">
$position="top" {episodesLength}{' '}
> {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
{episodesLength} {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
</LabelBlock>
<LabelBlock
$position="bottom"
>
{getNextLastStreamText()}
</LabelBlock> </LabelBlock>
<LabelBlock $position="bottom">{getNextLastStreamText()}</LabelBlock>
</Img> </Img>
<H2 size={32} colour={colours.rose}>{title}</H2> <H2 size={32} colour={colours.rose}>
<H3 size={21} colour={colours.rose}>{subtitle}</H3> {title}
{hosts.length ? <Label size={16} colour={colours.rose}> {andList(hosts)}</Label> : null} </H2>
<H3 size={21} colour={colours.rose}>
{subtitle}
</H3>
{hosts.length ? (
<Label size={16} colour={colours.rose}>
{andList(hosts)}
</Label>
) : null}
</Wrapper> </Wrapper>
</Link> </Link>
) )

View File

@ -1,13 +1,7 @@
import { h } from 'preact' import { h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks' import { useEffect, useRef, useState } from 'preact/hooks'
import { import { instanceOf, number, object, shape, string } from 'prop-types'
instanceOf,
number,
object,
shape,
string,
} from 'prop-types'
import 'regenerator-runtime/runtime'
import { PeerTubePlayer } from '@peertube/embed-api' import { PeerTubePlayer } from '@peertube/embed-api'
import Chat from '../Chat' import Chat from '../Chat'
@ -57,7 +51,6 @@ const Video = () => {
setVideo() setVideo()
}, []) }, [])
const playVideo = () => { const playVideo = () => {
const { current: player } = ptVideo const { current: player } = ptVideo
if (!videoReady) return if (!videoReady) return
@ -84,7 +77,6 @@ const Video = () => {
} }
} }
const toggleVideo = () => { const toggleVideo = () => {
if (isPlaying) { if (isPlaying) {
pauseVideo() pauseVideo()
@ -125,7 +117,6 @@ const Video = () => {
console.log({ vol }) console.log({ vol })
} }
const handleKeyPress = keyCode => { const handleKeyPress = keyCode => {
if (keyCode === 32) { if (keyCode === 32) {
// key == 'space' // key == 'space'

View File

@ -1,12 +1,13 @@
import { h, render } from 'preact' import { h } from 'preact'
import { useEffect, useState } from 'preact/hooks' import { useEffect, useState } from 'preact/hooks'
// eslint-disable-next-line import/no-extraneous-dependencies
import { secondsToMilliseconds } from 'date-fns'
import axios from 'axios' import axios from 'axios'
import ICAL from 'ical.js' import ICAL from 'ical.js'
import config from '../data/config' import config from '../data/config'
import { useSeriesStore, useStreamStore } from '../store/index' import { useSeriesStore, useStreamStore } from '../store/index'
import 'regenerator-runtime/runtime'
import { useInterval } from './timerHooks' import { useInterval } from './timerHooks'
import { secondsToMilliseconds } from 'date-fns'
export const useEventCalendar = () => { export const useEventCalendar = () => {
const [data, setData] = useState([]) const [data, setData] = useState([])
@ -29,7 +30,7 @@ export const useEventCalendar = () => {
vevent.getFirstPropertyValue('status') === null || vevent.getFirstPropertyValue('status') === null ||
(vevent.getFirstPropertyValue('status') && (vevent.getFirstPropertyValue('status') &&
vevent.getFirstPropertyValue('status').toUpperCase() === vevent.getFirstPropertyValue('status').toUpperCase() ===
'CONFIRMED') 'CONFIRMED')
) )
.map(vevent => { .map(vevent => {
const event = new ICAL.Event(vevent) const event = new ICAL.Event(vevent)
@ -99,10 +100,11 @@ export const useEventCalendar = () => {
return { loading, data } return { loading, data }
} }
export const useEventApi = () => { export const useEventApi = () => {
const [data, setData] = useSeriesStore(store => [store.series, store.setSeries]) const [data, setData] = useSeriesStore(store => [
store.series,
store.setSeries,
])
const [error, setError] = useState(null) const [error, setError] = useState(null)
const [loading, setLoading] = useState(!!data.length) const [loading, setLoading] = useState(!!data.length)
@ -111,15 +113,14 @@ export const useEventApi = () => {
setLoading(true) setLoading(true)
try { try {
const { data: responseData } = await axios.get( const { data: responseData } = await axios.get(
`${config.EVENTS_API_URL}/events` `${config.EVENTS_API_URL}/events`
) )
console.log({ responseData })
setData(responseData) setData(responseData)
console.log({ data: responseData }) console.log({ data: responseData })
setLoading(false) setLoading(false)
} } catch (err) {
catch (err) {
console.log('ERROR') console.log('ERROR')
setError(err) setError(err)
setLoading(false) setLoading(false)
@ -135,7 +136,12 @@ export const useEventApi = () => {
} }
export const usePeertubeApi = async () => { export const usePeertubeApi = async () => {
const { currentStream, setCurrentStream, setStreamIsLive, streamIsLive } = useStreamStore(store => store) const {
currentStream,
setCurrentStream,
setStreamIsLive,
streamIsLive,
} = useStreamStore(store => store)
if (!currentStream) return if (!currentStream) return
@ -143,10 +149,11 @@ export const usePeertubeApi = async () => {
const { peertubeLive } = currentStream const { peertubeLive } = currentStream
if (!peertubeLive || !peertubeLive.id) return if (!peertubeLive || !peertubeLive.id) return
const { const {
data: { state, embedPath } data: { state, embedPath },
} = await axios.get(`https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`) } = await axios.get(
`https://tv.undersco.re/api/v1/videos/${peertubeLive.id}`
)
setStreamIsLive(state.id === 1) setStreamIsLive(state.id === 1)
setCurrentStream({ ...currentStream, embedPath }) setCurrentStream({ ...currentStream, embedPath })
@ -156,7 +163,10 @@ export const usePeertubeApi = async () => {
fetchData() fetchData()
}, []) }, [])
useInterval(() => { useInterval(
fetchData() () => {
}, streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1)) fetchData()
} },
streamIsLive ? secondsToMilliseconds(15) : secondsToMilliseconds(1)
)
}