added simple chat and begining of Info panel (next streams announcement etc

This commit is contained in:
Benjamin Jones 2021-03-05 14:37:53 +01:00
parent 78777e167c
commit fec192846e
17 changed files with 338 additions and 17 deletions

5
app.js
View File

@ -6,6 +6,7 @@ import { useEffect, useState } from 'preact/hooks'
import Video from './src/components/Video'
import config from './src/data/conf.json'
import Info from './src/components/Info'
export default () => {
const [isPlaying, setIsPlaying] = useState(false)
@ -27,8 +28,10 @@ export default () => {
return (
<div>
{videoUrl && (
{videoUrl ? (
<Video playing={isPlaying} setPlaying={setIsPlaying} src={videoUrl} />
) : (
<Info />
)}
</div>
)

View File

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UNDERSCORE STREAMS</title>
<link rel="stylesheet" href="./src//assets/styles/reset.css" />
<link rel="stylesheet" href="./src/assets/styles/index.scss" />
</head>
<body>
<!-- <div id="overlay" class="active">

View File

@ -28,6 +28,8 @@
"eslint-config-flying-rocket": "^1.1.1",
"module-alias": "^2.0.3",
"parcel-bundler": "1.12.3",
"prettier": "^1.9.1"
"prettier": "^1.9.1",
"sass": "^1.32.8",
"scss": "^0.2.4"
}
}

Binary file not shown.

View File

@ -1,4 +1,4 @@
/* Medium */
/* Karla Medium */
@font-face {
font-family: 'Karla';
src: url('../fonts/Karla/Karla-Medium.ttf') format('ttf');
@ -6,10 +6,18 @@
font-style: normal;
}
/* Bold */
/* Karla Bold */
@font-face {
font-family: 'Karla';
src: url('../fonts/Karla/Karla-Bold.ttf') format('ttf');
font-weight: 700;
font-style: normal;
}
/* Lunchtype24 Medium */
@font-face {
font-family: 'Lunchtype24';
src: url('../fonts/Lunchtype/lunchtype24-medium.ttf') format('ttf');
font-weight: 500;
font-style: normal;
}

View File

@ -1,5 +1,2 @@
@import 'variables';
@import 'reset';
@import 'layout';
@import 'video-player';
@import 'chat';
@import 'fontface';

View File

@ -4,7 +4,7 @@ export const colours = {
white: '#fff',
highlight: '#03a59e',
rose: '#f6f4f5',
rose: '#FEB9B3',
}
colours.text = colours.offwhite

View File

@ -0,0 +1,20 @@
import { h } from 'preact'
import { ChatWrapper } from './styles'
const Chat = ({}) => {
return (
<ChatWrapper>
<iframe
src="https://titanembeds.com/embed/803918964082212905?css=215&defaultchannel=817134294199566356&lang=en_EN"
height="500"
width="350"
frameBorder="0"
title="discord-chat"
class="titanembed"
/>
</ChatWrapper>
)
}
export default Chat

View File

@ -0,0 +1,9 @@
import styled from 'styled-components'
import { colours } from '../../assets/theme'
export const ChatWrapper = styled.div`
position: fixed;
z-index: 10;
bottom: 0;
right: 32px;
`

View File

@ -0,0 +1,18 @@
import { h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
import Logo from '../Logo'
import { H1, P } from '../Text'
import { Wrapper } from './styles'
const Info = ({ data }) => {
return (
<Wrapper>
<Logo active />
<H1>Next Stream</H1>
<P>dsdas</P>
</Wrapper>
)
}
export default Info

View File

@ -0,0 +1,9 @@
import styled from 'styled-components'
import { colours } from '../../assets/theme'
export const Wrapper = styled.div`
height: 100vh;
width: 100vw;
background-color: ${colours.rose};
`

View File

@ -0,0 +1,119 @@
import { h } from 'preact'
import { oneOf, bool, string, number, oneOfType, node } from 'prop-types'
import { colours } from '../../assets/theme'
import { TextBase } from './styles'
const Text = ({
tag = 'span',
weight = '500',
colour: colourProp,
lineHeight = '16px',
fontFamily = 'Karla',
children,
size,
selectable = true,
...rest
}) => {
const colour = colourProp || colours.text
return (
<TextBase
colour={colour}
as={tag}
weight={weight}
lineHeight={lineHeight}
$fontFamily={fontFamily}
size={size}
selectable={selectable}
{...rest}
>
{children}
</TextBase>
)
}
Text.propTypes = {
tag: oneOf([
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'p',
'span',
'a',
'li',
'div',
'small',
'q',
'label',
]),
weight: oneOf(['500', '700', 'inherit']),
colour: string,
align: string,
size: oneOfType([string, number]),
lineHeight: number,
fontFamily: oneOfType([string, oneOf([0, 1])]),
children: node,
selectable: bool,
}
export const H1 = ({ children, ...rest }) => {
console.log({ children })
return (
<Text tag="h1" weight="700" size="48" fontFamily="Lunchtype24" {...rest}>
{children}
</Text>
)
}
export const H2 = ({ children, ...rest }) => (
<Text tag="h2" weight="700" size="25" fontFamily="Lunchtype24" {...rest}>
{children}
</Text>
)
export const P = ({ children, ...rest }) => (
<Text
tag="p"
weight="500"
size="13"
lineHeight="16px"
fontFamily="Karla"
{...rest}
>
{children}
</Text>
)
export const Span = ({ children, ...rest }) => (
<Text tag="span" size="inherit" weight="inherit" {...rest}>
{children}
</Text>
)
export const Label = ({ children, ...rest }) => (
<Text
tag="label"
weight="500"
size="13"
lineHeight="13px"
fontFamily="Karla"
{...rest}
>
{children}
</Text>
)
export const A = ({ children, ...rest }) => (
<Text tag="a" colour={colours.highlight} {...rest}>
{children}
</Text>
)
export const Li = ({ children, ...rest }) => (
<Text tag="li" {...rest}>
{children}
</Text>
)
export default Text

View File

@ -0,0 +1,25 @@
import styled, { css } from 'styled-components'
export const TextBase = styled.span`
${({
size,
weight,
colour,
align,
lineHeight,
opacity = 1,
$fontFamily: fontFamily,
selectable,
underline,
}) => css`
font-family: ${fontFamily};
font-weight: ${weight};
text-align: ${align};
color: ${colour};
line-height: ${lineHeight};
opacity: ${opacity};
user-select: ${selectable ? 'inherit' : 'none'};
text-decoration: ${underline ? 'underline' : 'none'};
font-size: ${size}px;
`}
`

View File

@ -1,10 +1,11 @@
import { h } from 'preact'
import Logo from '../Logo'
import 'regenerator-runtime/runtime'
import { PeerTubePlayer } from '@peertube/embed-api'
import { VideoWrapper, Iframe, Overlay } from './styles'
import { useEffect, useRef, useState } from 'preact/hooks'
import 'regenerator-runtime/runtime'
import { PeerTubePlayer } from '@peertube/embed-api'
import Logo from '../Logo'
import Chat from '../Chat'
import { VideoWrapper, Iframe, Overlay } from './styles'
const Video = ({ playing, setPlaying, src }) => {
const videoiFrame = useRef(null)
@ -65,6 +66,7 @@ const Video = ({ playing, setPlaying, src }) => {
allowfullscreen
ref={videoiFrame}
/>
<Chat></Chat>
</VideoWrapper>
)
}

5
src/data/strings.js Normal file
View File

@ -0,0 +1,5 @@
export default {
en: {
nextStream: 'Next stream:',
},
}

108
yarn.lock
View File

@ -943,6 +943,14 @@ anymatch@^2.0.0:
micromatch "^3.1.4"
normalize-path "^2.1.1"
anymatch@~3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
dependencies:
normalize-path "^3.0.0"
picomatch "^2.0.4"
argparse@^1.0.7:
version "1.0.10"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@ -1647,6 +1655,11 @@ binary-extensions@^1.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
binary-extensions@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
bindings@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@ -1693,6 +1706,13 @@ braces@^2.3.1, braces@^2.3.2:
split-string "^3.0.2"
to-regex "^3.0.1"
braces@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
dependencies:
fill-range "^7.0.1"
brfs@^1.2.0:
version "1.6.1"
resolved "https://registry.yarnpkg.com/brfs/-/brfs-1.6.1.tgz#b78ce2336d818e25eea04a0947cba6d4fb8849c3"
@ -1944,6 +1964,21 @@ chardet@^0.4.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
"chokidar@>=2.0.0 <4.0.0":
version "3.5.1"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
dependencies:
anymatch "~3.1.1"
braces "~3.0.2"
glob-parent "~5.1.0"
is-binary-path "~2.1.0"
is-glob "~4.0.1"
normalize-path "~3.0.0"
readdirp "~3.5.0"
optionalDependencies:
fsevents "~2.3.1"
chokidar@^2.1.5:
version "2.1.8"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@ -3180,6 +3215,13 @@ fill-range@^4.0.0:
repeat-string "^1.6.1"
to-regex-range "^2.1.0"
fill-range@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
dependencies:
to-regex-range "^5.0.1"
find-up@^2.0.0, find-up@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@ -3251,6 +3293,11 @@ fsevents@^1.2.7:
bindings "^1.5.0"
nan "^2.12.1"
fsevents@~2.3.1:
version "2.3.2"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@ -3300,6 +3347,13 @@ glob-parent@^3.1.0:
is-glob "^3.1.0"
path-dirname "^1.0.0"
glob-parent@~5.1.0:
version "5.1.1"
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
dependencies:
is-glob "^4.0.1"
glob-to-regexp@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
@ -3691,6 +3745,13 @@ is-binary-path@^1.0.0:
dependencies:
binary-extensions "^1.0.0"
is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
dependencies:
binary-extensions "^2.0.0"
is-boolean-object@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.0.tgz#e2aaad3a3a8fca34c28f6eee135b156ed2587ff0"
@ -3798,7 +3859,7 @@ is-glob@^3.1.0:
dependencies:
is-extglob "^2.1.0"
is-glob@^4.0.0:
is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
@ -3829,6 +3890,11 @@ is-number@^3.0.0:
dependencies:
kind-of "^3.0.2"
is-number@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
is-obj@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
@ -4451,7 +4517,7 @@ normalize-path@^2.1.1:
dependencies:
remove-trailing-separator "^1.0.1"
normalize-path@^3.0.0:
normalize-path@^3.0.0, normalize-path@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@ -4570,6 +4636,11 @@ object.values@^1.1.0, object.values@^1.1.1:
es-abstract "^1.18.0-next.2"
has "^1.0.3"
ometa@0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/ometa/-/ometa-0.2.2.tgz#f53c4735ba6d56af5a46b04dfb7c4334c596d44e"
integrity sha1-9TxHNbptVq9aRrBN+3xDNMWW1E4=
on-finished@~2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
@ -4828,6 +4899,11 @@ physical-cpu-count@^2.0.0:
resolved "https://registry.yarnpkg.com/physical-cpu-count/-/physical-cpu-count-2.0.0.tgz#18de2f97e4bf7a9551ad7511942b5496f7aba660"
integrity sha1-GN4vl+S/epVRrXURlCtUlverpmA=
picomatch@^2.0.4, picomatch@^2.2.1:
version "2.2.2"
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
pify@^2.0.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -5440,6 +5516,13 @@ readdirp@^2.2.1:
micromatch "^3.1.10"
readable-stream "^2.0.2"
readdirp@~3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
dependencies:
picomatch "^2.2.1"
regenerate-unicode-properties@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@ -5738,6 +5821,13 @@ safer-eval@^1.3.0:
dependencies:
clones "^1.2.0"
sass@^1.32.8:
version "1.32.8"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.8.tgz#f16a9abd8dc530add8834e506878a2808c037bdc"
integrity sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==
dependencies:
chokidar ">=2.0.0 <4.0.0"
sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@ -5750,6 +5840,13 @@ saxes@^3.1.9:
dependencies:
xmlchars "^2.1.1"
scss@^0.2.4:
version "0.2.4"
resolved "https://registry.yarnpkg.com/scss/-/scss-0.2.4.tgz#040d903ed37c5d4fa4ad33ae1fd389ac12a4e065"
integrity sha1-BA2QPtN8XU+krTOuH9OJrBKk4GU=
dependencies:
ometa "0.2.2"
"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.6.0:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@ -6323,6 +6420,13 @@ to-regex-range@^2.1.0:
is-number "^3.0.0"
repeat-string "^1.6.1"
to-regex-range@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
dependencies:
is-number "^7.0.0"
to-regex@^3.0.1, to-regex@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"