finishing touches on new version

index.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"
-      content="The Para-Real: Finding the Future in Unexpected Places - A livestream series about subcultures building livelihoods in spite of platform exploitation."
+      content="Quality live programming from beyond the surveillance economy.."
     />
     <link
       rel="icon"
@@ -25,32 +25,26 @@
     <link rel="mask-icon" href="static/safari-pinned-tab.svg" color="#5bbad5" />
     <meta name="msapplication-TileColor" content="#da532c" />
     <meta name="theme-color" content="#ffffff" />
-    <meta
+    <meta content="Underscore Streams" property="og:site_name" />
-      content="The Para-Real: Finding the Future in Unexpected Places"
-      property="og:site_name"
-    />
 
     <meta name="twitter:card" content="summary" />
-    <meta
+    <meta name="twitter:title" content="Underscore Streams" />
-      name="twitter:title"
-      content="The Para-Real: Finding the Future in Unexpected Places"
-    />
     <meta
       name="twitter:description"
-      content="The NEW DESIGN CONGRESS x RECLAIMFUTURES present a livestream series about subcultures building livelihoods in spite of platform exploitation."
+      content="Quality live programming from beyond the surveillance economy."
     />
     <meta name="twitter:image" content="https://i.ibb.co/vcyKrKw/twitter.jpg" />
 
-    <meta
+    <meta property="og:title" content="Underscore Streams" />
-      property="og:title"
-      content="The Para-Real: Finding the Future in Unexpected Places"
-    />
     <meta
       property="og:description"
-      content="The NEW DESIGN CONGRESS x RECLAIMFUTURES present a livestream series about subcultures building livelihoods in spite of platform exploitation"
+      content="Quality live programming from beyond the surveillance economy."
     />
-    <meta property="og:image" content="static/meta.png" />
+    <meta
-    <meta property="og:url" content="https://stream.undersco.re/" />
+      property="og:image"
+      content="https://stream.underscore/static/meta.png"
+    />
+    <meta property="og:url" content="https://stream.underscore/" />
 
     <link rel="stylesheet" href="./src/assets/styles/index.scss" />
   </head>
@@ -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,

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",

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)}
     </MarkdownRenderer>
   </MarkdownWrapper>
 )

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')};
   }

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 SeriesCard = ({ series: { image, episodes, title, subtitle, hosts: hostsArray, slug, }, isPast, ...rest }) => {
-  const episodes = allEpisodes[isPast ? 'past' : 'future']
   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 (
     <Link to={`series/${slug}`}>
       <Wrapper {...rest}>
@@ -19,12 +27,12 @@ const SeriesCard = ({ series: { image, episodes: allEpisodes, title, subtitle, h
           <LabelBlock
             $position="top"
           >
-            {episodes.length} {episodes.length === 1 ? strings.en.episode : strings.en.episodes}
+            {episodesLength} {episodesLength === 1 ? strings.en.episode : strings.en.episodes}
           </LabelBlock>
           <LabelBlock
             $position="bottom"
           >
-            {isPast ? strings.en.lastStream : strings.en.nextStream} {episodes && episodes.length && formatDistanceToNow(new Date(episodes[0][isPast ? 'endsOn' : 'beginsOn']), { addSuffix: true })}
+            {getNextLastStreamText()}
           </LabelBlock>
         </Img>
 
@@ -34,7 +42,6 @@ const SeriesCard = ({ series: { image, episodes: allEpisodes, title, subtitle, h
       </Wrapper>
     </Link>
   )
-  // ) : null
 }
 
 export default SeriesCard

src/data/config.js

@@ -1,7 +1,6 @@
 export default {
   peertube_root: 'https://tv.undersco.re',
-  EVENTS_API_URL: 'http://localhost:3031',
+  EVENTS_API_URL: 'https://api.undersco.re',
-  seriesTrailerId: 'b-JQ5Bo4JnI',
 
   calendarId: 'Nt767W2KeKFSTZ8x',
   chat: {

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'
     }
   ]
 }

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 => {
+export const camelise = str => str ? str
-  return str ? str
+  .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => index === 0 ? letter.toLowerCase() : letter.toUpperCase())
-    .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => {
-      return 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)}, `;
+    return list.length === 1 || index === list.length - 2 ? wrapItem(item) : `${wrapItem(item)}, `
-  }).join('');
+  }).join('')
-};
+}

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;
     }
   }}
   

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);

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 (
     <Page title={strings.en.series}>
       <Content>
-        {currentSeries.map(series => (
         <Fragment>
           <Title colour={colours.rose}>{strings.en.currentSeries}</Title>
           <SeriesGrid>
+            {currentSeries.reverse().map(series => (
               <SeriesCard series={series} />
+            ))}
           </SeriesGrid>
         </Fragment>
-        ))}
+        {pastSeries.length ? (
+          <Fragment>
             <Title colour={colours.rose}>{strings.en.pastSeries}</Title>
             <SeriesGrid>
               {pastSeries.map(series => (
                 <SeriesCard series={series} isPast />
               ))}
             </SeriesGrid>
+          </Fragment>) : null}
       </Content>
     </Page>
   )

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));
   }
 `
 

src/pages/SeriesPage/index.js

@@ -106,7 +106,6 @@ const SeriesPage = ({ data }) => {
             </Fragment>
           ) : null}
           {credits ? <InfoContent>
-            <Title>Credits</Title>
             <Markdown theme={theme}>{credits}</Markdown>
           </InfoContent> : null}
         </Fragment>

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