diff --git a/index.html b/index.html index 217703c..71168a8 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - + - + - + - - + + @@ -64,7 +58,7 @@ _paq.push(['trackPageView']) _paq.push(['enableLinkTracking']) ;(function() { - var u = 'https://data.undersco.re/' + var u = 'https://data.underscore/' _paq.push(['setTrackerUrl', u + 'matomo.php']) _paq.push(['setSiteId', '5']) var d = document, diff --git a/package.json b/package.json index 1a0dd86..6d94751 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "start": "yarn parcel index.html", "dev": "yarn parcel watch index.html", - "build": "yarn parcel build index.js", + "build": "yarn parcel build index.js && cp -r static dist/static", "deploy": "yarn parcel build; rsync rsync -aP ./dist/ inu@95.216.203.71:/media/www/stream.undersco.re/" }, "alias": { @@ -21,6 +21,7 @@ "date-fns-tz": "^1.1.4", "datebook": "^7.0.7", "dotenv": "^10.0.0", + "he": "^1.2.0", "ical": "^0.8.0", "ical.js": "^1.4.0", "markdown-to-jsx": "^7.1.2", diff --git a/src/assets/img/main_thumb.png b/src/assets/img/main_thumb.png deleted file mode 100644 index 258a7d9..0000000 Binary files a/src/assets/img/main_thumb.png and /dev/null differ diff --git a/src/components/Markdown/index.js b/src/components/Markdown/index.js index 2ed227b..316611e 100644 --- a/src/components/Markdown/index.js +++ b/src/components/Markdown/index.js @@ -1,5 +1,6 @@ /* eslint-disable jsx-a11y/anchor-has-content */ import { h, Fragment } from 'preact' +import { decode } from 'he' import MarkdownRenderer from 'markdown-to-jsx' import { MarkdownWrapper } from './styles' import { P, A, H1, H2, H3, Span } from '../Text' @@ -44,7 +45,7 @@ const Markdown = ({ children, withLinebreaks, options, theme, ...rest }) => ( }} {...rest} > - {children} + {decode(children)} ) diff --git a/src/components/Markdown/styles.js b/src/components/Markdown/styles.js index 5709e50..f6cc328 100644 --- a/src/components/Markdown/styles.js +++ b/src/components/Markdown/styles.js @@ -9,7 +9,7 @@ export const MarkdownWrapper = styled.span` } img { - max-width: 200px; + max-width: 300px; float: left; padding: 0 12px 6px 0; } @@ -22,6 +22,10 @@ export const MarkdownWrapper = styled.span` margin-bottom: 0.5em; } + h3 { + margin: 1em 0 0.5em 0; + } + p { margin-bottom: ${props => (props.$withLinebreaks ? '32px' : '0')}; } diff --git a/src/components/SeriesCard/index.js b/src/components/SeriesCard/index.js index 69be5a3..f39d276 100644 --- a/src/components/SeriesCard/index.js +++ b/src/components/SeriesCard/index.js @@ -7,11 +7,19 @@ import { Img, LabelBlock, Wrapper } from './styles' import { andList } from '../../helpers/string' import { colours } from '../../assets/theme' -const SeriesCard = ({ series: { image, episodes: allEpisodes, title, subtitle, hosts: hostsArray, slug, }, isPast, ...rest }) => { - const episodes = allEpisodes[isPast ? 'past' : 'future'] +const SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsArray, slug, }, isPast, ...rest }) => { const hosts = hostsArray.map(({ actor }) => actor.name) - // return episodes.length ? ( + const episodesLength = episodes.past.length + episodes.future.length + + const getNextLastStreamText = () => { + const hasFutureEpisodes = episodes.future.length + const prefix = hasFutureEpisodes ? strings.en.nextStream : strings.en.lastStream + const mainText = formatDistanceToNow(new Date(episodes[hasFutureEpisodes ? 'future' : 'past'][0][hasFutureEpisodes ? 'endsOn' : 'beginsOn']), { addSuffix: true }) + + return `${prefix} ${mainText}` + } + return ( @@ -19,12 +27,12 @@ const SeriesCard = ({ series: { image, episodes: allEpisodes, title, subtitle, h - {episodes.length} {episodes.length === 1 ? strings.en.episode : strings.en.episodes} + {episodesLength} {episodesLength === 1 ? strings.en.episode : strings.en.episodes} - {isPast ? strings.en.lastStream : strings.en.nextStream} {episodes && episodes.length && formatDistanceToNow(new Date(episodes[0][isPast ? 'endsOn' : 'beginsOn']), { addSuffix: true })} + {getNextLastStreamText()} @@ -34,7 +42,6 @@ const SeriesCard = ({ series: { image, episodes: allEpisodes, title, subtitle, h ) - // ) : null } export default SeriesCard diff --git a/src/data/config.js b/src/data/config.js index 3ab1656..9d4c09a 100644 --- a/src/data/config.js +++ b/src/data/config.js @@ -1,7 +1,6 @@ export default { peertube_root: 'https://tv.undersco.re', - EVENTS_API_URL: 'http://localhost:3031', - seriesTrailerId: 'b-JQ5Bo4JnI', + EVENTS_API_URL: 'https://api.undersco.re', calendarId: 'Nt767W2KeKFSTZ8x', chat: { diff --git a/src/data/navigation.js b/src/data/navigation.js index 50e4224..4b5cb74 100644 --- a/src/data/navigation.js +++ b/src/data/navigation.js @@ -10,7 +10,7 @@ export default { }, { label: 'Archive', - href: 'https://tv.undersco.re/' + href: 'https://tv.undersco.re/search?sort=-match&searchTarget=local&search=livestream' } ] } \ No newline at end of file diff --git a/src/helpers/string.js b/src/helpers/string.js index d9b40c4..1feb990 100644 --- a/src/helpers/string.js +++ b/src/helpers/string.js @@ -1,7 +1,7 @@ export const slugify = (title) => { let str = title ? title.replace(/^\s+|\s+$/g, '') : null // trim - if (!str) return title; + if (!str) return title str = str.toLowerCase() @@ -22,15 +22,11 @@ export const slugify = (title) => { } export const capitaliseFirstLetter = word => - word ? `${word?.charAt(0).toUpperCase()}${word?.slice(1)}` : ''; + word ? `${word.charAt(0).toUpperCase()}${word.slice(1)}` : word -export const camelise = str => { - return str ? str - .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => { - return index === 0 ? letter.toLowerCase() : letter.toUpperCase(); - }) - .replace(/\s+/g, '') : str -}; +export const camelise = str => str ? str + .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.toUpperCase()) + .replace(/\s+/g, '') : str /** * @@ -45,23 +41,23 @@ export const camelise = str => { * */ export const andList = (list, connector = '&', wrapEachItem, replace = '{#}') => { - if (!Array.isArray(list)) return list; + if (!Array.isArray(list)) return list const wrapItem = (item) => { if (wrapEachItem) { if (Array.isArray(item)) { - return `${wrapEachItem.before.replace(replace, item[1])}${item[0]}${wrapEachItem.after.replace(replace, item[1])}`; + return `${wrapEachItem.before.replace(replace, item[1])}${item[0]}${wrapEachItem.after.replace(replace, item[1])}` } - return `${wrapEachItem.before}${item}${wrapEachItem.after}`; + return `${wrapEachItem.before}${item}${wrapEachItem.after}` } - return item; - }; + return item + } return list.map((item, index) => { if (index + 1 === list.length && index !== 0) { - return ` ${connector} ${wrapItem(item)}`; + return ` ${connector} ${wrapItem(item)}` } - return list.length === 1 || index === list.length - 2 ? wrapItem(item) : `${wrapItem(item)}, `; - }).join(''); -}; \ No newline at end of file + return list.length === 1 || index === list.length - 2 ? wrapItem(item) : `${wrapItem(item)}, ` + }).join('') +} \ No newline at end of file diff --git a/src/layouts/InfoLayout/styles.js b/src/layouts/InfoLayout/styles.js index c7f9832..4f12f5f 100644 --- a/src/layouts/InfoLayout/styles.js +++ b/src/layouts/InfoLayout/styles.js @@ -61,7 +61,7 @@ export const Hero = styled.div` height: 100vh; background: url(${(props) => props.image}); background-size: cover; - background-position-x: right; + background-position-x: center; position: fixed; padding: 0; right: 0; @@ -86,7 +86,7 @@ export const Hero = styled.div` font-size: 9vw; } @media screen and (min-width: ${screenSizes.lg}px) { - font-size: 14vw; + font-size: 12vw; } }} diff --git a/src/pages/Program/styles.js b/src/pages/Program/styles.js index 9f23e4f..eae1b4c 100644 --- a/src/pages/Program/styles.js +++ b/src/pages/Program/styles.js @@ -8,6 +8,7 @@ export const SeriesGrid = styled.div` export const ScheduleList = styled.ul` display: flex; flex-direction: column; + width: 100%; ` export const Day = styled.div` @@ -38,6 +39,8 @@ export const Content = styled.div` ::-webkit-scrollbar { display: none; } + + scrollbar-width: none; ` /* ${mediaQuery.lessThan('lg')` max-height: calc(100vh - 200px); diff --git a/src/pages/Series/index.js b/src/pages/Series/index.js index 4f2d5eb..bdbdda9 100644 --- a/src/pages/Series/index.js +++ b/src/pages/Series/index.js @@ -1,5 +1,5 @@ /* eslint-disable react/prop-types */ -import { isWithinInterval } from 'date-fns' +import { addYears, isFuture } from 'date-fns' import { Fragment, h } from 'preact' import { H1, H2 } from '../../components/Text' import strings from '../../data/strings' @@ -15,34 +15,40 @@ const Series = () => { const pastSeries = [] const currentSeries = data.series ? data.series.filter(series => { - // const seriesInTheLastMonth = series.episodes.past.filter(episode => { - // }) if (series.episodes.future.length) { return true } + if (series.episodes.past.every(({ beginsOn }) => isFuture(addYears(new Date(beginsOn), 1)))) { + return true + } pastSeries.push(series) return false }) : [] + console.log({ currentSeries }) + return ( - {currentSeries.map(series => ( - - {strings.en.currentSeries} - + + {strings.en.currentSeries} + + {currentSeries.reverse().map(series => ( + ))} + + + {pastSeries.length ? ( + + {strings.en.pastSeries} + + {pastSeries.map(series => ( + + ))} - - ))} - {strings.en.pastSeries} - - {pastSeries.map(series => ( - - ))} - + ) : null} ) diff --git a/src/pages/Series/styles.js b/src/pages/Series/styles.js index b26cb20..b0ac7df 100644 --- a/src/pages/Series/styles.js +++ b/src/pages/Series/styles.js @@ -16,25 +16,27 @@ export const Content = styled.div` ::-webkit-scrollbar { display: none; } + scrollbar-width: none; + ` export const SeriesGrid = styled.div` display: grid; - grid-column-gap: ${spacing[4]}px; + grid-column-gap: ${spacing[5]}px; grid-row-gap: ${spacing[6]}px; margin-bottom: 5em; padding: 0 2px; @media screen and (min-width: ${screenSizes.sm}px) { - grid-template-columns: repeat(1, minmax(0, 1fr)); + grid-template-columns: repeat(1, minmax(380px, 1fr)); } @media screen and (min-width: ${screenSizes.md}px) { - grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-columns: repeat(2, minmax(380px, 1fr)); } @media screen and (min-width: ${screenSizes.lg}px) { - grid-template-columns: repeat(3, minmax(0, 1fr)); + grid-template-columns: repeat(3, minmax(380px, 1fr)); } @media screen and (min-width: ${screenSizes.xl}px) { - grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-columns: repeat(4, minmax(380px, 1fr)); } ` diff --git a/src/pages/SeriesPage/index.js b/src/pages/SeriesPage/index.js index 231690a..6d2edd4 100644 --- a/src/pages/SeriesPage/index.js +++ b/src/pages/SeriesPage/index.js @@ -106,7 +106,6 @@ const SeriesPage = ({ data }) => { ) : null} {credits ? - Credits {credits} : null} diff --git a/src/store/index.js b/src/store/index.js index b657c90..37a66fc 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -26,7 +26,7 @@ export const useTheme = create(set => ({ export const useUiStore = create((set, get) => ({ mobileMenuOpen: false, - streamPreviewMinimized: true, + streamPreviewMinimized: false, streamActive: false, // Methods diff --git a/static/meta.png b/static/meta.png index 2749e96..0bfcfc2 100644 Binary files a/static/meta.png and b/static/meta.png differ