From 4973f351aa2d72a823cc5cdc371df3504433ea4f Mon Sep 17 00:00:00 2001 From: Benjamin Jones Date: Wed, 10 Mar 2021 14:51:24 +0100 Subject: [PATCH] added more detailed info page + styles. Commit rest before refactor --- app.js | 40 ++++++++++---------- index.js | 4 +- package.json | 1 + src/assets/hooks/calendar.js | 23 ++++++++++++ src/assets/theme/index.js | 9 ++++- src/components/Chat/styles.js | 3 +- src/components/Info/index.js | 40 ++++++++++++++++---- src/components/Info/styles.js | 31 ++++++++++++++- src/components/InfoLayout/index.js | 34 +++++++++++++++++ src/components/InfoLayout/styles.js | 54 +++++++++++++++++++++++++++ src/components/Logo/index.js | 17 ++------- src/components/Text/index.js | 19 ++++++++-- src/components/Text/styles.js | 6 +++ src/components/Video/index.js | 21 ++++++++--- src/components/VideoOverlay/index.js | 34 +++++++++++++++++ src/components/VideoOverlay/styles.js | 21 +++++++++++ src/data/conf.json | 9 ----- src/data/config.js | 14 +++++++ src/data/strings.js | 4 +- yarn.lock | 19 +++++++++- 20 files changed, 337 insertions(+), 66 deletions(-) create mode 100644 src/assets/hooks/calendar.js create mode 100644 src/components/InfoLayout/index.js create mode 100644 src/components/InfoLayout/styles.js create mode 100644 src/components/VideoOverlay/index.js create mode 100644 src/components/VideoOverlay/styles.js delete mode 100644 src/data/conf.json create mode 100644 src/data/config.js 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 ? ( -
) } 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} > - - - +