diff --git a/app.js b/app.js
index 217cb9d..6f1169f 100644
--- a/app.js
+++ b/app.js
@@ -5,34 +5,36 @@ import 'regenerator-runtime/runtime'
import { useEffect, useState } from 'preact/hooks'
import Video from './src/components/Video'
-import config from './src/data/conf.json'
+import config from './src/data/config'
import Info from './src/components/Info'
+import { useFetch } from './src/assets/hooks/calendar'
+import { P } from './src/components/Text'
+
+// const appStates = [
+// 'noStream',
+// 'streamLive',
+// 'streamFinished'
+// ]
export default () => {
const [isPlaying, setIsPlaying] = useState(false)
const [videoUrl, setVideoUrl] = useState(null)
+ // const [feedData, setFeedData] = useState([])
- useEffect(() => {
- const getData = async () => {
- const { data } = await axios.get(
- `${config.peertube_root}/api/v1/videos/${config.next_stream.peertube_id}`
- )
- console.log(data)
- const src = `${config.peertube_root}${data.embedPath}`
- console.log('src', src)
- setVideoUrl(src)
- }
-
- getData()
- }, [])
+ const { data: feedData, loading } = useFetch(`${config.calendar}`)
return (
- {videoUrl ? (
-
- ) : (
-
- )}
+ {/* {false ? (
+
+ ) : ( */}
+ {loading ?
LOADING :)
:
}
)
}
diff --git a/index.js b/index.js
index dc91d52..ea7a11b 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,6 @@
import { h, render } from 'preact'
import App from './app'
-const AppEl = document.getElementById('app')
+const appEl = document.getElementById('app')
-render(, AppEl)
+render(, appEl)
diff --git a/package.json b/package.json
index 06d9066..cca5985 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"styled-components": "^5.2.1"
},
"devDependencies": {
+ "@babel/eslint-parser": "^7.13.10",
"babel": "^6.23.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.6.1",
diff --git a/src/assets/hooks/calendar.js b/src/assets/hooks/calendar.js
new file mode 100644
index 0000000..b2c88b8
--- /dev/null
+++ b/src/assets/hooks/calendar.js
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'preact/hooks'
+import axios from 'axios'
+
+export const useFetch = url => {
+ const [data, setData] = useState(null)
+ const [loading, setLoading] = useState(true)
+
+ async function fetchData() {
+ setLoading(true)
+
+ const { data: responseData } = await axios.get(url)
+ console.log('url', url)
+ console.log('responseData', responseData)
+ setData(responseData)
+ setLoading(false)
+ }
+
+ useEffect(() => {
+ fetchData()
+ }, [])
+
+ return { loading, data }
+}
diff --git a/src/assets/theme/index.js b/src/assets/theme/index.js
index 460c136..3471bfb 100644
--- a/src/assets/theme/index.js
+++ b/src/assets/theme/index.js
@@ -1,14 +1,20 @@
export const colours = {
midnight: '#233b4a',
+ midnightDarker: '#112B39',
offwhite: '#f6f4f5',
white: '#fff',
highlight: '#03a59e',
- rose: '#FEB9B3',
+ roseDarker: '#FEB9B3',
+ rose: '#F1CFCD',
}
colours.text = colours.offwhite
+export const ui = {
+ borderRadius: 4,
+}
+
export const textSizes = {
xs: 11,
sm: 14,
@@ -22,4 +28,5 @@ export const textSizes = {
export default {
colours,
textSizes,
+ ui,
}
diff --git a/src/components/Chat/styles.js b/src/components/Chat/styles.js
index 4603d1f..7ff7a2b 100644
--- a/src/components/Chat/styles.js
+++ b/src/components/Chat/styles.js
@@ -1,9 +1,10 @@
import styled from 'styled-components'
-import { colours } from '../../assets/theme'
+import { colours, ui } from '../../assets/theme'
export const ChatWrapper = styled.div`
position: fixed;
z-index: 10;
bottom: 0;
right: 32px;
+ border-radius: ${ui.borderRadius}px;
`
diff --git a/src/components/Info/index.js b/src/components/Info/index.js
index 46d80f7..46d1ad1 100644
--- a/src/components/Info/index.js
+++ b/src/components/Info/index.js
@@ -1,18 +1,42 @@
import { h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
-import Logo from '../Logo'
-import { H1, P } from '../Text'
-import { Wrapper } from './styles'
+import { H1, H2, P } from '../Text'
+import {
+ Wrapper,
+ PositionedLogo as Logo,
+ TaglineContainer,
+ Top,
+} from './styles'
+import translations from '../../data/strings'
+import InfoLayout from '../InfoLayout'
+
+const allowedChannels = [7, 4] // ReclaimFutures, NDC
const Info = ({ data }) => {
+ // const [feed, setFeed] = useState([])
+
+ // useEffect(() => {
+ // setFeed(sortData(data))
+ // }, [data])
+
+ useEffect(() => {
+ console.log({ data })
+ }, [data])
+
return (
-
-
- Next Stream
- dsdas
-
+
+ ding dong
+
)
}
+const sortData = data => {
+ // if (!data || data?.length === 0) return
+ // console.log('data', data)
+ // return data.filter(feedItem => {
+ // return allowedChannels.includes(feedItem.channel.id) && feedItem.isLive
+ // })
+}
+
export default Info
diff --git a/src/components/Info/styles.js b/src/components/Info/styles.js
index 5e55f5a..0b403ea 100644
--- a/src/components/Info/styles.js
+++ b/src/components/Info/styles.js
@@ -1,9 +1,38 @@
import styled from 'styled-components'
import { colours } from '../../assets/theme'
+import Logo from '../Logo'
export const Wrapper = styled.div`
height: 100vh;
width: 100vw;
+ padding: 2em;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
- background-color: ${colours.rose};
+ background: url(https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=3031&q=80)
+ ${colours.rose};
+ box-sizing: border-box;
+ background-size: cover;
+ background-position-y: 50%;
+ background-position-x: 20vw;
+ background-blend-mode: soft-light;
+
+ p,
+ h1,
+ h2 {
+ color: ${colours.midnightDarker};
+ }
+`
+
+export const Top = styled.div``
+
+export const PositionedLogo = styled(Logo)`
+ margin-bottom: 64px;
+`
+
+export const TaglineContainer = styled.div`
+ h1 {
+ margin-top: 32px;
+ }
`
diff --git a/src/components/InfoLayout/index.js b/src/components/InfoLayout/index.js
new file mode 100644
index 0000000..ab3ec95
--- /dev/null
+++ b/src/components/InfoLayout/index.js
@@ -0,0 +1,34 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+import { H1, H2, P } from '../Text'
+import {
+ Wrapper,
+ PositionedLogo as Logo,
+ TaglineContainer,
+ Top,
+ Content,
+} from './styles'
+import translations from '../../data/strings'
+import { colours } from '../../assets/theme'
+
+const InfoLayout = ({ title, children }) => {
+ return (
+
+
+
+ {title}
+ {children}
+
+
+
+ {translations &&
+ translations.en.underscoreTagline.map(line => (
+ {line}
+ ))}
+
+
+ )
+}
+
+export default InfoLayout
diff --git a/src/components/InfoLayout/styles.js b/src/components/InfoLayout/styles.js
new file mode 100644
index 0000000..e2a385a
--- /dev/null
+++ b/src/components/InfoLayout/styles.js
@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+import { colours } from '../../assets/theme'
+import Logo from '../Logo'
+
+export const Wrapper = styled.div`
+ height: 100vh;
+ width: 100vw;
+ padding: 6em 2em 2em 2em;
+ display: flex;
+ /* justify-content: space-between; */
+ /* flex-direction: column; */
+
+ background: url(https://images.unsplash.com/photo-1579762715118-a6f1d4b934f1?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=3031&q=80)
+ ${colours.rose};
+ box-sizing: border-box;
+ background-size: cover;
+ background-position-y: 50%;
+ background-position-x: 23vw;
+ background-blend-mode: soft-light;
+ position: fixed;
+ overflow-y: scroll;
+
+ p,
+ h1,
+ h2 {
+ color: ${colours.midnightDarker};
+ }
+
+ @media screen and (max-width: 1200px) {
+ padding: 6em 1.5em 1.5em 1.5em;
+ background-size: 150%;
+ background-position-x: 0vw;
+ }
+ @media screen and (max-width: 800px) {
+ padding: 6em 1em 1em 1em;
+ background-size: 250%;
+ background-position-x: -50vw;
+ }
+`
+
+export const Top = styled.div`
+ width: 50%;
+`
+export const Content = styled.div``
+
+export const PositionedLogo = styled(Logo)`
+ position: fixed;
+ top: 2em;
+`
+
+export const TaglineContainer = styled.div`
+ position: fixed;
+ bottom: 2em;
+`
diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js
index c55bf4e..aabbcfc 100644
--- a/src/components/Logo/index.js
+++ b/src/components/Logo/index.js
@@ -1,14 +1,15 @@
import { h } from 'preact'
import { bool, string } from 'prop-types'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
import { colours } from '../../assets/theme'
-const Logo = ({ colour = colours.offwhite, active }) => (
+const Logo = ({ colour = colours.offwhite, active, ...rest }) => (
(
const LogoSvg = styled.svg`
width: 200px;
- padding: 1em;
- transform: translateY(-20%);
- transition: all 0.2s ease-in-out;
- opacity: 0;
- pointer-events: none;
-
- ${props =>
- props.$active &&
- css`
- transform: translateY(0%);
- opacity: 1;
- `}
`
Logo.propTypes = {
diff --git a/src/components/Text/index.js b/src/components/Text/index.js
index 876e253..1d97be1 100644
--- a/src/components/Text/index.js
+++ b/src/components/Text/index.js
@@ -62,16 +62,29 @@ Text.propTypes = {
}
export const H1 = ({ children, ...rest }) => {
- console.log({ children })
return (
-
+
{children}
)
}
export const H2 = ({ children, ...rest }) => (
-
+
{children}
)
diff --git a/src/components/Text/styles.js b/src/components/Text/styles.js
index b1b3a03..bc2c5ff 100644
--- a/src/components/Text/styles.js
+++ b/src/components/Text/styles.js
@@ -1,4 +1,5 @@
import styled, { css } from 'styled-components'
+import { colours } from '../../assets/theme'
export const TextBase = styled.span`
${({
@@ -21,5 +22,10 @@ export const TextBase = styled.span`
user-select: ${selectable ? 'inherit' : 'none'};
text-decoration: ${underline ? 'underline' : 'none'};
font-size: ${size}px;
+
+ ::selection {
+ background-color: ${colours.midnightDarker};
+ color: ${colours.offwhite};
+ }
`}
`
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
index 2d7d6cd..4569656 100644
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@@ -1,13 +1,16 @@
import { h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
+import { bool, func, string } from 'prop-types'
import 'regenerator-runtime/runtime'
import { PeerTubePlayer } from '@peertube/embed-api'
import Logo from '../Logo'
import Chat from '../Chat'
-import { VideoWrapper, Iframe, Overlay } from './styles'
+import { H2 } from '../Text'
+import Overlay from '../VideoOverlay'
+import { VideoWrapper, Iframe } from './styles'
-const Video = ({ playing, setPlaying, src }) => {
+const Video = ({ playing, setPlaying, src, title, org }) => {
const videoiFrame = useRef(null)
const overlayTimeout = useRef(null)
const [videoReady, setVideoReady] = useState(false)
@@ -56,9 +59,7 @@ const Video = ({ playing, setPlaying, src }) => {
onClick={() => setPlaying(!playing)}
onMouseMove={activateOverlay}
>
-
-
-
+