From e07fc8c5101181202d37e037ea014ceb01351a14 Mon Sep 17 00:00:00 2001
From: Benjamin Jones <benjamin@tbnt.digital>
Date: Mon, 17 May 2021 01:08:25 +0200
Subject: [PATCH] added timezone adaptation, trailer etc

---
 package.json                        |  1 +
 src/components/Info/index.js        | 14 ++++++++-
 src/components/Info/styles.js       | 18 ++++++++----
 src/components/Svg/Play.js          |  1 +
 src/components/Video/index.js       |  2 +-
 src/components/VideoEmbed/index.js  | 44 +++++++++++++++++++++++++++++
 src/components/VideoEmbed/styles.js | 41 +++++++++++++++++++++++++++
 src/data/config.js                  | 12 ++------
 src/data/strings.js                 |  2 ++
 src/hooks/data.js                   | 13 ++++++++-
 10 files changed, 131 insertions(+), 17 deletions(-)
 create mode 100644 src/components/VideoEmbed/index.js
 create mode 100644 src/components/VideoEmbed/styles.js

diff --git a/package.json b/package.json
index 93bde34..25b9893 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@peertube/embed-api": "^0.0.4",
     "axios": "^0.21.1",
     "date-fns": "^2.19.0",
+    "date-fns-tz": "^1.1.4",
     "ical": "^0.8.0",
     "ical.js": "^1.4.0",
     "markdown-to-jsx": "^7.1.2",
diff --git a/src/components/Info/index.js b/src/components/Info/index.js
index 901da88..4375d9a 100644
--- a/src/components/Info/index.js
+++ b/src/components/Info/index.js
@@ -1,11 +1,13 @@
 /* eslint-disable react/prop-types */
 import { h, Fragment } from 'preact'
+import { useState, useEffect } from 'preact/hooks'
 import { isFuture, isPast } from 'date-fns'
 
 import { H1 } from '../Text'
 import Markdown from '../Markdown'
 import translations from '../../data/strings'
 import InfoLayout from '../InfoLayout'
+import TrailerEmbed from '../VideoEmbed'
 import {
   VideoCard,
   Title,
@@ -19,8 +21,12 @@ import credits from '../../data/credits.md'
 import Button from '../Button'
 import PlaySvg from '../Svg/Play'
 import { colours } from '../../assets/theme'
+import config from '../../data/config'
 
 const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
+  const [trailerActive, setTrailerActive] = useState(false)
+  const toggleTrailerActive = () =>
+    setTrailerActive(trailerState => !trailerState)
   const pastStreams =
     data && data.length
       ? data.filter(feeditem => isPast(new Date(feeditem.end)))
@@ -44,6 +50,12 @@ const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
 
   return (
     <InfoLayout loading={loading}>
+      {trailerActive && (
+        <TrailerEmbed
+          onClose={toggleTrailerActive}
+          url={config.seriesTrailer}
+        />
+      )}
       {infoActive && <CrossSvg onClick={() => setInfoActive(false)} />}
       {!loading && (
         <Fragment>
@@ -51,7 +63,7 @@ const Info = ({ data, loading, infoActive, setInfoActive, currentVideo }) => {
             <H1>The Para-Real:</H1>
             <H1>Finding the Future in Unexpected Places</H1>
             <Markdown withLinebreaks>{intro}</Markdown>
-            <Button>
+            <Button onClick={toggleTrailerActive}>
               <PlaySvg colour={colours.midnightDarker} size="20" />
               Watch the trailer
             </Button>
diff --git a/src/components/Info/styles.js b/src/components/Info/styles.js
index abf9c6d..729c073 100644
--- a/src/components/Info/styles.js
+++ b/src/components/Info/styles.js
@@ -1,5 +1,5 @@
-import { format } from 'date-fns'
 import { h, Fragment } from 'preact'
+import { zonedTimeToUtc, utcToZonedTime, format } from 'date-fns-tz'
 import styled from 'styled-components'
 import { colours, textSizes } from '../../assets/theme'
 import config from '../../data/config'
@@ -121,15 +121,19 @@ export const VideoCard = ({
   hasPassed,
   videoUrl,
 }) => {
-  console.log('start', start)
+  const startDate = new Date(start)
+  const utcDate = zonedTimeToUtc(startDate, 'Europe/Berlin')
+
+  const { timeZone } = Intl.DateTimeFormat().resolvedOptions()
+  const zonedDate = utcToZonedTime(utcDate, timeZone)
   return (
     <VCWrapper>
       <DateLabel colour={colours.midnight} size={textSizes.lg}>
         {`${hasPassed ? translations.en.streamDatePast : ''}`}
         <Span bold colour={colours.midnight}>
           {hasPassed
-            ? format(new Date(start), 'dd/MM/yy')
-            : format(new Date(start), 'do LLLL y // HH:mm')}
+            ? format(zonedDate, 'dd/MM/yy')
+            : format(zonedDate, 'do LLLL y // HH:mm')}
         </Span>
       </DateLabel>
       {videoUrl && hasPassed ? (
@@ -144,7 +148,11 @@ export const VideoCard = ({
         </Fragment>
       )}
       <P>{description}</P>
-      <Button>Subscribe to this event</Button>
+      <a href="webcal://cloud.undersco.re/remote.php/dav/public-calendars/9FzomgAfidHWCQcx/?export">
+        <Button>
+          {hasPassed ? translations.en.watchEpisode : translations.en.subEvent}
+        </Button>
+      </a>
     </VCWrapper>
   )
 }
diff --git a/src/components/Svg/Play.js b/src/components/Svg/Play.js
index 68264ab..410606a 100644
--- a/src/components/Svg/Play.js
+++ b/src/components/Svg/Play.js
@@ -4,6 +4,7 @@ import { number, string } from 'prop-types'
 const Play = ({ size = '24', colour = 'inherit', ...rest }) => (
   <svg viewBox="0 0 24 24" height={size} width={size} {...rest}>
     <path
+      strokeWidth="1.5"
       stroke={colour}
       fill="transparent"
       d="M2.12436,1.73205 C2.12436,0.96225 2.95769,0.481125 3.62436,0.866025 L21.6244,11.2583 C22.291,11.6432 22.291,12.6055 21.6244,12.9904 L3.62436,23.3827 C2.95769,23.7676 2.12436,23.2865 2.12436,22.5167 L2.12436,1.73205 Z"
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
index bfefb4a..81d8b4f 100644
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@@ -123,7 +123,7 @@ const Video = ({ video, org, setInfoActive }) => {
       />
       <Iframe
         sandbox="allow-same-origin allow-scripts allow-popups"
-        src={`${config.peertube_root}${video.embedPath}?api=1&controls=false`}
+        src={`${config.peertube_root}${video.embedPath}?api=1&controls=false&vq=hd1080`}
         frameborder="0"
         allowfullscreen
         allow="autoplay"
diff --git a/src/components/VideoEmbed/index.js b/src/components/VideoEmbed/index.js
new file mode 100644
index 0000000..e608b3e
--- /dev/null
+++ b/src/components/VideoEmbed/index.js
@@ -0,0 +1,44 @@
+import { Fragment, h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+import { string } from 'prop-types'
+
+import { VideoWrapper, Iframe, StyledCrossSvg as CrossSvg } from './styles'
+
+const Video = ({ url, onClose }) => {
+  const overlayTimeout = useRef(null)
+  const [overlayActive, setOverlayActiveState] = useState(false)
+
+  const activateOverlay = () => {
+    clearTimeout(overlayTimeout.current)
+    overlayTimeout.current = null
+    setOverlayActiveState(true)
+
+    console.log('overlayTimeout.current', overlayTimeout.current)
+    overlayTimeout.current = setTimeout(
+      () => setOverlayActiveState(false),
+      1500
+    )
+  }
+  return (
+    <Fragment>
+      <VideoWrapper onMouseMove={activateOverlay} $active={overlayActive}>
+        <CrossSvg $active={overlayActive} onClick={onClose} size="64" />
+      </VideoWrapper>
+      <Iframe
+        width="560"
+        height="315"
+        src="https://www.youtube-nocookie.com/embed/Ye5qTm9vqcE?controls=0&autoplay=1"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      />
+    </Fragment>
+  )
+}
+
+Video.propTypes = {
+  url: string,
+}
+
+export default Video
diff --git a/src/components/VideoEmbed/styles.js b/src/components/VideoEmbed/styles.js
new file mode 100644
index 0000000..0cdd234
--- /dev/null
+++ b/src/components/VideoEmbed/styles.js
@@ -0,0 +1,41 @@
+import styled from 'styled-components'
+import { colours } from '../../assets/theme'
+import CrossSvg from '../Svg/Cross'
+
+export const VideoWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  z-index: 12;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  /* background-color: ${props => (props.$active ? 'red' : 'green')}; */
+`
+export const Iframe = styled.iframe`
+  z-index: 1;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`
+
+export const StyledCrossSvg = styled(CrossSvg)`
+  position: fixed;
+  right: 2.5em;
+  top: 2em;
+  width: 64px;
+  height: 64px;
+  cursor: pointer;
+  stroke: ${colours.midnightDarker};
+  z-index: 12;
+  opacity: ${props => (props.$active ? '1' : '0.2')};
+
+  &:hover {
+    opacity: 1;
+  }
+`
diff --git a/src/data/config.js b/src/data/config.js
index 70bdab7..450656b 100644
--- a/src/data/config.js
+++ b/src/data/config.js
@@ -1,14 +1,8 @@
 export default {
   peertube_root: 'https://tv.undersco.re',
+  seriesTrailer:
+    'https://tv.undersco.re/videos/embed/5e29327c-41de-4b48-b567-ee28b181336f',
+
   calendar:
     'https://cloud.undersco.re/remote.php/dav/public-calendars/9FzomgAfidHWCQcx?export',
-  next_stream: {
-    title: 'Femboy Photoshoot',
-    peertube_id: 'cafce2b3-550b-4656-bae0-c167d3994a0d',
-    org: 'New Design Congress',
-    startDate:
-      'Fri Mar 05 2021 21:00:00 GMT+0100 (Central European Standard Time',
-    endDate:
-      'Fri Mar 05 2021 21:00:00 GMT+0100 (Central European Standard Time',
-  },
 }
diff --git a/src/data/strings.js b/src/data/strings.js
index 1f43059..31501bb 100644
--- a/src/data/strings.js
+++ b/src/data/strings.js
@@ -7,6 +7,8 @@ export default {
     underscoreTagline: ['LEAVE THE', 'SURVEILLANCE ECONOMY', '— TOGETHER.'],
     streamDateFuture: 'Going live at: ',
     streamDatePast: 'First broadcast: ',
+    subEvent: 'Subscribe to this event',
+    watchEpisode: 'Watch Episode',
     main_text:
       "[NEW DESIGN CONGRESS](https://newdesigncongress.org) x [RECLAIMFUTURES](https://reclaimfutures.org) present *The Para-Real: Finding the Future in Unexpected Places,* a Spring/Summer livestream series about economic subcultures and emergent technology use. Over 12 episodes streamed weekly, we meet filmmakers who have never met their actors, artists building their own networks of value, documentarians exploring digital identity, and members of resilient subcultures. All of these people share a commonality: they have an innate understanding of the *Para-Real,* and have seized upon it to better their surroundings. \nBetween the digital realm and our physical world is a third space, equally material but poorly understood. The *Para-Real* is a tangible place where class structures, economics and the outcomes of hardware and infrastructure design collide. The Para-Real manifests in many ways — It can be the desire for play that turns young Minecraft players into network administrators, the drive that fosters the resilience of subculture-driven mutually-supportive marketplaces, or the tension of class structures inherent in Virtual Reality's encroachment on living room space.\n\nWe shape our tools, and thereafter our tools shape us.* The Para-Real is everywhere. Whether attending a Furcon at the height of pandemic, organising community for resilience, or navigating a commissioned open world, we must consider ourselves as inhabiting not a real or online world, but a bridge between the two, one whose rules are not yet settled. *The future is not a Zoom call*. The digital systems we are confined to today merge protocol with platform to prey on isolation and extract value from labour. That we grapple with this incarnation of the digital realm indicates a dominant cartel in decline. In its place is a vacuum. We must resist the immature groupthink of the 90s’ vision of what the Internet can be — the Para-Real is a contested space*. Never trust someone who says the Internet is boring.* Thanks to the Para-Real, the Internet has never been weirder.",
   },
diff --git a/src/hooks/data.js b/src/hooks/data.js
index 52a7f46..7789d75 100644
--- a/src/hooks/data.js
+++ b/src/hooks/data.js
@@ -17,7 +17,18 @@ export const useEventStream = () => {
     const vevents = comp.getAllSubcomponents('vevent')
 
     const calEvents = vevents
-      .map(vevent => new ICAL.Event(vevent))
+      .filter(
+        vevent =>
+          vevent.getFirstPropertyValue('status') === null ||
+          (vevent.getFirstPropertyValue('status') &&
+            vevent.getFirstPropertyValue('status').toUpperCase() ===
+              'CONFIRMED')
+      )
+      .map(vevent => {
+        const event = new ICAL.Event(vevent)
+        console.log('eventstat', vevent.getFirstPropertyValue('status'))
+        return event
+      })
       .sort((a, b) => a.startDate.toJSDate() - b.startDate.toJSDate())
 
     await Promise.all(