added footer images on series type + other dertails
This commit is contained in:
sunda
parent
2651e1cb37
commit
3ab937bdb2
2
index.js
2
index.js
@ -60,8 +60,6 @@ const App = () => {
|
||||
}
|
||||
}, [eventsLoading])
|
||||
|
||||
// console.log({ episodes: data.episodes, series: data.series })
|
||||
|
||||
const seriesData = data.series ? Object.values(data.series) : []
|
||||
|
||||
return (
|
||||
|
||||
@ -47,4 +47,4 @@
|
||||
"sass": "^1.32.8",
|
||||
"scss": "^0.2.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,9 +22,8 @@ const SeriesCard = ({
|
||||
? 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][
|
||||
|
||||
@ -4,101 +4,101 @@ import { useEffect, useState } from 'preact/hooks'
|
||||
|
||||
import { secondsToMilliseconds } from 'date-fns'
|
||||
import axios from 'axios'
|
||||
import ICAL from 'ical.js'
|
||||
// import ICAL from 'ical.js'
|
||||
import config from '../data/config'
|
||||
import { useSeriesStore, useStreamStore } from '../store/index'
|
||||
import { useInterval } from './timerHooks'
|
||||
|
||||
export const useEventCalendar = () => {
|
||||
const [data, setData] = useState([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
// export const useEventCalendar = () => {
|
||||
// const [data, setData] = useState([])
|
||||
// const [loading, setLoading] = useState(true)
|
||||
|
||||
async function fetchData() {
|
||||
setLoading(true)
|
||||
// async function fetchData() {
|
||||
// setLoading(true)
|
||||
|
||||
const { data: responseData } = await axios.get(
|
||||
`https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
|
||||
)
|
||||
const jCalData = ICAL.parse(responseData)
|
||||
const comp = new ICAL.Component(jCalData)
|
||||
// const { data: responseData } = await axios.get(
|
||||
// `https://cloud.undersco.re/remote.php/dav/public-calendars/${config.calendarId}/?export`
|
||||
// )
|
||||
// const jCalData = ICAL.parse(responseData)
|
||||
// const comp = new ICAL.Component(jCalData)
|
||||
|
||||
const vevents = comp.getAllSubcomponents('vevent')
|
||||
// const vevents = comp.getAllSubcomponents('vevent')
|
||||
|
||||
const calEvents = vevents
|
||||
.filter(
|
||||
vevent =>
|
||||
vevent.getFirstPropertyValue('status') === null ||
|
||||
(vevent.getFirstPropertyValue('status') &&
|
||||
vevent.getFirstPropertyValue('status').toUpperCase() ===
|
||||
'CONFIRMED')
|
||||
)
|
||||
.map(vevent => {
|
||||
const event = new ICAL.Event(vevent)
|
||||
return event
|
||||
})
|
||||
.sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
|
||||
// const calEvents = vevents
|
||||
// .filter(
|
||||
// vevent =>
|
||||
// vevent.getFirstPropertyValue('status') === null ||
|
||||
// (vevent.getFirstPropertyValue('status') &&
|
||||
// vevent.getFirstPropertyValue('status').toUpperCase() ===
|
||||
// 'CONFIRMED')
|
||||
// )
|
||||
// .map(vevent => {
|
||||
// const event = new ICAL.Event(vevent)
|
||||
// return event
|
||||
// })
|
||||
// .sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
|
||||
|
||||
await Promise.all(
|
||||
calEvents.map(async calItem => {
|
||||
const url = calItem.component.getAllProperties('url')[0]
|
||||
if (url) {
|
||||
const id = url
|
||||
.getFirstValue()
|
||||
.split('/')
|
||||
.pop()
|
||||
const {
|
||||
data: {
|
||||
account,
|
||||
category,
|
||||
channel,
|
||||
embedPath,
|
||||
language,
|
||||
state,
|
||||
previewPath,
|
||||
views,
|
||||
duration,
|
||||
},
|
||||
} = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)
|
||||
// await Promise.all(
|
||||
// calEvents.map(async calItem => {
|
||||
// const url = calItem.component.getAllProperties('url')[0]
|
||||
// if (url) {
|
||||
// const id = url
|
||||
// .getFirstValue()
|
||||
// .split('/')
|
||||
// .pop()
|
||||
// const {
|
||||
// data: {
|
||||
// account,
|
||||
// category,
|
||||
// channel,
|
||||
// embedPath,
|
||||
// language,
|
||||
// state,
|
||||
// previewPath,
|
||||
// views,
|
||||
// duration,
|
||||
// },
|
||||
// } = await axios.get(`https://tv.undersco.re/api/v1/videos/${id}`)
|
||||
|
||||
const item = {
|
||||
title: calItem.summary,
|
||||
account,
|
||||
category,
|
||||
channel,
|
||||
description: calItem.description,
|
||||
embedPath,
|
||||
language,
|
||||
state,
|
||||
previewPath,
|
||||
views,
|
||||
start: calItem.startDate.toJSDate(),
|
||||
end: calItem.endDate.toJSDate(),
|
||||
id,
|
||||
duration,
|
||||
videoUrl: url.getFirstValue(),
|
||||
}
|
||||
setData(arr => [...arr, item])
|
||||
} else {
|
||||
const item = {
|
||||
title: calItem.summary,
|
||||
description: calItem.description,
|
||||
start: calItem.startDate.toJSDate(),
|
||||
end: calItem.endDate.toJSDate(),
|
||||
}
|
||||
setData(arr => [...arr, item])
|
||||
}
|
||||
})
|
||||
)
|
||||
// const item = {
|
||||
// title: calItem.summary,
|
||||
// account,
|
||||
// category,
|
||||
// channel,
|
||||
// description: calItem.description,
|
||||
// embedPath,
|
||||
// language,
|
||||
// state,
|
||||
// previewPath,
|
||||
// views,
|
||||
// start: calItem.startDate.toJSDate(),
|
||||
// end: calItem.endDate.toJSDate(),
|
||||
// id,
|
||||
// duration,
|
||||
// videoUrl: url.getFirstValue(),
|
||||
// }
|
||||
// setData(arr => [...arr, item])
|
||||
// } else {
|
||||
// const item = {
|
||||
// title: calItem.summary,
|
||||
// description: calItem.description,
|
||||
// start: calItem.startDate.toJSDate(),
|
||||
// end: calItem.endDate.toJSDate(),
|
||||
// }
|
||||
// setData(arr => [...arr, item])
|
||||
// }
|
||||
// })
|
||||
// )
|
||||
|
||||
setLoading(false)
|
||||
}
|
||||
// setLoading(false)
|
||||
// }
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [])
|
||||
// useEffect(() => {
|
||||
// fetchData()
|
||||
// }, [])
|
||||
|
||||
return { loading, data }
|
||||
}
|
||||
// return { loading, data }
|
||||
// }
|
||||
|
||||
export const useEventApi = () => {
|
||||
const [data, setData] = useSeriesStore(store => [
|
||||
@ -116,9 +116,7 @@ export const useEventApi = () => {
|
||||
const { data: responseData } = await axios.get(
|
||||
`${config.EVENTS_API_URL}/events`
|
||||
)
|
||||
console.log({ responseData })
|
||||
setData(responseData)
|
||||
console.log({ data: responseData })
|
||||
setLoading(false)
|
||||
} catch (err) {
|
||||
console.log('ERROR')
|
||||
|
||||
@ -14,6 +14,7 @@ import {
|
||||
InfoContent,
|
||||
Row,
|
||||
LogosRow,
|
||||
FooterImage,
|
||||
ActionButton as Button,
|
||||
TrailerContainer,
|
||||
} from './styles'
|
||||
@ -34,12 +35,13 @@ const SeriesPage = ({ data }) => {
|
||||
: null
|
||||
|
||||
const orgsList = Object.values(orgs || {})
|
||||
console.log({ orgsList })
|
||||
|
||||
const footerImages = data?.resources?.filter(({ title }) =>
|
||||
title.includes('FOOTER_IMG')
|
||||
)
|
||||
|
||||
const links = data.links.length ? splitArray(data.links, 2) : null
|
||||
|
||||
console.log({ description: data.description })
|
||||
|
||||
return (
|
||||
<Page title={data.title} theme={data.theme} withHeader={false}>
|
||||
<InfoLayout
|
||||
@ -122,6 +124,14 @@ const SeriesPage = ({ data }) => {
|
||||
))}
|
||||
</LogosRow>
|
||||
) : null}
|
||||
{footerImages.length
|
||||
? footerImages.map(image => (
|
||||
<FooterImage
|
||||
src={image.resourceUrl}
|
||||
alt={`${image.orgName} logo`}
|
||||
/>
|
||||
))
|
||||
: null}
|
||||
</InfoLayout>
|
||||
</Page>
|
||||
)
|
||||
|
||||
@ -80,6 +80,11 @@ export const LogosRow = styled(Row)`
|
||||
}
|
||||
`
|
||||
|
||||
export const FooterImage = styled.img`
|
||||
max-width: 600px;
|
||||
padding: 32px 0;
|
||||
`
|
||||
|
||||
export const InfoContent = styled.div`
|
||||
max-width: 600px;
|
||||
margin: 0 0 0em 2px;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user