refactored for preact
This commit is contained in:
Benjamin Jones
parent
d778be3a46
commit
78777e167c
8
.eslintrc
Normal file
8
.eslintrc
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "flying-rocket",
|
||||
"rules": {
|
||||
"indent": ["error", 2],
|
||||
"import/prefer-default-export": 0,
|
||||
"react/require-default-props": 0
|
||||
}
|
||||
}
|
||||
6
.prettierrc
Normal file
6
.prettierrc
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"semi": false,
|
||||
"tabWidth": 2
|
||||
}
|
||||
35
app.js
Normal file
35
app.js
Normal file
@ -0,0 +1,35 @@
|
||||
import { h } from 'preact'
|
||||
import axios from 'axios'
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import 'regenerator-runtime/runtime'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
|
||||
import Video from './src/components/Video'
|
||||
import config from './src/data/conf.json'
|
||||
|
||||
export default () => {
|
||||
const [isPlaying, setIsPlaying] = useState(false)
|
||||
const [videoUrl, setVideoUrl] = useState(null)
|
||||
|
||||
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()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
{videoUrl && (
|
||||
<Video playing={isPlaying} setPlaying={setIsPlaying} src={videoUrl} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 865 140">
|
||||
<defs/>
|
||||
<path fill="#fff" d="M0 0h865v140H0z"/>
|
||||
<path fill="#1D3949" d="M61.2 34.15h9.75v75H61.2v-7.2c-4.5 5.9-11.75 8.85-21.75 8.85-9.7 0-17.2-2.6-22.5-7.8C11.65 97.8 9 90.5 9 81.1V34.15h9.75V81.1c0 6.5 1.9 11.6 5.7 15.3 3.8 3.6 9.2 5.4 16.2 5.4 6.6 0 11.65-1.6 15.15-4.8 3.6-3.2 5.4-7.5 5.4-12.9V34.15zm86.609 28.05c0-6.5-1.9-11.55-5.7-15.15-3.7-3.7-9.05-5.55-16.05-5.55-6.1 0-10.95 1.35-14.55 4.05-3.5 2.7-5.5 6.4-6 11.1v52.5h-9.75v-75h9.75v6.9c4.5-5.7 11.7-8.55 21.6-8.55 9.7 0 17.2 2.6 22.5 7.8 5.3 5.2 7.95 12.5 7.95 21.9v46.95h-9.75V62.2zm87.808 46.95v-6.45c-4.5 5.3-11.75 7.95-21.75 7.95-11.2 0-19.8-3.3-25.8-9.9-5.9-6.7-8.85-16.3-8.85-28.8s2.95-22.2 8.85-29.1c6-6.9 14.6-10.35 25.8-10.35 10.1 0 17.35 2.9 21.75 8.7V13h-27.75V4h37.5v105.15h-9.75zm-21.9-7.5c6.7 0 12-1.3 15.9-3.9 4-2.7 6-6.45 6-11.25V58.9c0-5.4-1.9-9.65-5.7-12.75-3.7-3.1-8.95-4.65-15.75-4.65-16.8 0-25.2 10.4-25.2 31.2 0 9.9 1.95 17.2 5.85 21.9 4 4.7 10.3 7.05 18.9 7.05zm87.659 0c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zm58.408-25.5c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm91.559 61.35c7.9 0 13.75-1.3 17.55-3.9 3.9-2.7 5.85-6.2 5.85-10.5 0-4.2-1.85-7.3-5.55-9.3-3.7-2-9.5-3-17.4-3-21 0-31.5-6.85-31.5-20.55 0-7 2.6-12.4 7.8-16.2 5.3-3.8 12.65-5.7 22.05-5.7 10.3 0 18.2 2.25 23.7 6.75 5.5 4.4 8.25 10.55 8.25 18.45h-9.75c0-5.3-1.75-9.3-5.25-12-3.4-2.8-8.75-4.2-16.05-4.2-6.6 0-11.75 1.1-15.45 3.3-3.7 2.2-5.55 5.3-5.55 9.3 0 3.8 1.85 6.65 5.55 8.55 3.7 1.9 9.5 2.85 17.4 2.85 21 0 31.5 6.9 31.5 20.7 0 7.4-2.8 13.35-8.4 17.85-5.6 4.4-13.7 6.6-24.3 6.6-10.7 0-19-2.25-24.9-6.75-5.8-4.6-8.7-10.8-8.7-18.6h9.75c0 5.3 1.9 9.35 5.7 12.15 3.8 2.8 9.7 4.2 17.7 4.2zm119.159-16.2c0 3.7-.8 7.1-2.4 10.2-1.6 3.1-3.8 5.8-6.6 8.1-2.8 2.2-6.1 3.9-9.9 5.1-3.8 1.2-7.95 1.8-12.45 1.8-10.7 0-19.2-3.45-25.5-10.35-6.2-7-9.3-16.75-9.3-29.25 0-12.4 3.05-21.9 9.15-28.5 6.2-6.7 14.65-10.05 25.35-10.05 4.6 0 8.85.65 12.75 1.95 3.9 1.2 7.25 2.9 10.05 5.1 2.8 2.2 4.95 4.85 6.45 7.95 1.6 3.1 2.4 6.55 2.4 10.35h-9.75c0-4.8-2.05-8.65-6.15-11.55-4.1-3-9.4-4.5-15.9-4.5-7.9 0-14 2.45-18.3 7.35-4.2 4.9-6.3 12.35-6.3 22.35 0 10.2 2.15 17.8 6.45 22.8 4.3 4.9 10.45 7.35 18.45 7.35 6.3 0 11.5-1.45 15.6-4.35 4.1-2.9 6.15-6.85 6.15-11.85h9.75zM649.76 32.5c5.3 0 10.1.9 14.4 2.7 4.3 1.7 7.95 4.2 10.95 7.5 3.1 3.3 5.45 7.35 7.05 12.15 1.7 4.8 2.55 10.3 2.55 16.5 0 6.1-.85 11.6-2.55 16.5-1.6 4.8-3.9 8.9-6.9 12.3-3 3.4-6.65 6-10.95 7.8-4.3 1.8-9.15 2.7-14.55 2.7-5.3 0-10.1-.85-14.4-2.55-4.3-1.8-8-4.4-11.1-7.8-3.1-3.4-5.5-7.5-7.2-12.3-1.6-4.9-2.4-10.4-2.4-16.5s.8-11.55 2.4-16.35c1.7-4.8 4.05-8.85 7.05-12.15 3.1-3.4 6.8-6 11.1-7.8 4.3-1.8 9.15-2.7 14.55-2.7zm0 69.15c7.7 0 13.8-2.65 18.3-7.95 4.6-5.4 6.9-12.85 6.9-22.35 0-9.5-2.3-16.85-6.9-22.05-4.6-5.2-10.7-7.8-18.3-7.8-7.7 0-13.85 2.6-18.45 7.8-4.6 5.2-6.9 12.55-6.9 22.05 0 9.6 2.3 17.05 6.9 22.35 4.7 5.3 10.85 7.95 18.45 7.95zm80.459-61.35c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm93.508 61.35c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zM600.26 127.9h87v7.5h-87v-7.5z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.2 KiB |
11
index.html
11
index.html
@ -5,10 +5,10 @@
|
||||
<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="./assets/styles/index.scss" />
|
||||
<link rel="stylesheet" href="./src//assets/styles/reset.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="overlay" class="active">
|
||||
<!-- <div id="overlay" class="active">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 865 140" class="underscore-logo">
|
||||
<defs />
|
||||
<path
|
||||
@ -28,7 +28,10 @@
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div id="app"></div>
|
||||
<script src="./index.js"></script>
|
||||
|
||||
<!-- <div id="chat-container">
|
||||
<iframe
|
||||
@ -41,6 +44,6 @@
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<script src="./assets/js/index.js"></script>
|
||||
<!-- <script src="./assets/js/index.js"></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
6
index.js
Normal file
6
index.js
Normal file
@ -0,0 +1,6 @@
|
||||
import { h, render } from 'preact'
|
||||
import App from './app'
|
||||
|
||||
const AppEl = document.getElementById('app')
|
||||
|
||||
render(<App />, AppEl)
|
||||
26
package.json
26
package.json
@ -4,14 +4,30 @@
|
||||
"main": "index.js",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "yarn parcel index.html"
|
||||
"start": "yarn parcel index.html",
|
||||
"dev": "yarn parcel watch index.html",
|
||||
"build": "yarn parcel build index.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"parcel-bundler": "1.12.3",
|
||||
"sass": "^1.32.8"
|
||||
"alias": {
|
||||
"react": "preact/compat",
|
||||
"react-dom/test-utils": "preact/test-utils",
|
||||
"react-dom": "preact/compat"
|
||||
},
|
||||
"dependencies": {
|
||||
"@peertube/embed-api": "^0.0.4",
|
||||
"axios": "^0.21.1"
|
||||
"axios": "^0.21.1",
|
||||
"preact": "^10.5.12",
|
||||
"prop-types": "^15.7.2",
|
||||
"styled-components": "^5.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel": "^6.23.0",
|
||||
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||
"babel-preset-env": "^1.6.1",
|
||||
"eslint": "^4.12.1",
|
||||
"eslint-config-flying-rocket": "^1.1.1",
|
||||
"module-alias": "^2.0.3",
|
||||
"parcel-bundler": "1.12.3",
|
||||
"prettier": "^1.9.1"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
src/assets/fonts/Karla/Karla-Bold.ttf
Normal file
BIN
src/assets/fonts/Karla/Karla-Bold.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Karla/Karla-Medium.ttf
Normal file
BIN
src/assets/fonts/Karla/Karla-Medium.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/Karla/Karla-VariableFont_wght.ttf
Normal file
BIN
src/assets/fonts/Karla/Karla-VariableFont_wght.ttf
Normal file
Binary file not shown.
15
src/assets/styles/fontface.css
Normal file
15
src/assets/styles/fontface.css
Normal file
@ -0,0 +1,15 @@
|
||||
/* Medium */
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url('../fonts/Karla/Karla-Medium.ttf') format('ttf');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Bold */
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
src: url('../fonts/Karla/Karla-Bold.ttf') format('ttf');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
25
src/assets/theme/index.js
Normal file
25
src/assets/theme/index.js
Normal file
@ -0,0 +1,25 @@
|
||||
export const colours = {
|
||||
midnight: '#233b4a',
|
||||
offwhite: '#f6f4f5',
|
||||
|
||||
white: '#fff',
|
||||
highlight: '#03a59e',
|
||||
rose: '#f6f4f5',
|
||||
}
|
||||
|
||||
colours.text = colours.offwhite
|
||||
|
||||
export const textSizes = {
|
||||
xs: 11,
|
||||
sm: 14,
|
||||
md: 16,
|
||||
lg: 21,
|
||||
xl: 32,
|
||||
xxl: 92,
|
||||
hg: 200,
|
||||
}
|
||||
|
||||
export default {
|
||||
colours,
|
||||
textSizes,
|
||||
}
|
||||
41
src/components/Logo/index.js
Normal file
41
src/components/Logo/index.js
Normal file
@ -0,0 +1,41 @@
|
||||
import { h } from 'preact'
|
||||
import { bool, string } from 'prop-types'
|
||||
import styled, { css } from 'styled-components'
|
||||
import { colours } from '../../assets/theme'
|
||||
|
||||
const Logo = ({ colour = colours.offwhite, active }) => (
|
||||
<LogoSvg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 865 140"
|
||||
$active={active}
|
||||
>
|
||||
<path
|
||||
fill={colour}
|
||||
d="M61.2 34.15h9.75v75H61.2v-7.2c-4.5 5.9-11.75 8.85-21.75 8.85-9.7 0-17.2-2.6-22.5-7.8C11.65 97.8 9 90.5 9 81.1V34.15h9.75V81.1c0 6.5 1.9 11.6 5.7 15.3 3.8 3.6 9.2 5.4 16.2 5.4 6.6 0 11.65-1.6 15.15-4.8 3.6-3.2 5.4-7.5 5.4-12.9V34.15zm86.609 28.05c0-6.5-1.9-11.55-5.7-15.15-3.7-3.7-9.05-5.55-16.05-5.55-6.1 0-10.95 1.35-14.55 4.05-3.5 2.7-5.5 6.4-6 11.1v52.5h-9.75v-75h9.75v6.9c4.5-5.7 11.7-8.55 21.6-8.55 9.7 0 17.2 2.6 22.5 7.8 5.3 5.2 7.95 12.5 7.95 21.9v46.95h-9.75V62.2zm87.808 46.95v-6.45c-4.5 5.3-11.75 7.95-21.75 7.95-11.2 0-19.8-3.3-25.8-9.9-5.9-6.7-8.85-16.3-8.85-28.8s2.95-22.2 8.85-29.1c6-6.9 14.6-10.35 25.8-10.35 10.1 0 17.35 2.9 21.75 8.7V13h-27.75V4h37.5v105.15h-9.75zm-21.9-7.5c6.7 0 12-1.3 15.9-3.9 4-2.7 6-6.45 6-11.25V58.9c0-5.4-1.9-9.65-5.7-12.75-3.7-3.1-8.95-4.65-15.75-4.65-16.8 0-25.2 10.4-25.2 31.2 0 9.9 1.95 17.2 5.85 21.9 4 4.7 10.3 7.05 18.9 7.05zm87.659 0c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zm58.408-25.5c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm91.559 61.35c7.9 0 13.75-1.3 17.55-3.9 3.9-2.7 5.85-6.2 5.85-10.5 0-4.2-1.85-7.3-5.55-9.3-3.7-2-9.5-3-17.4-3-21 0-31.5-6.85-31.5-20.55 0-7 2.6-12.4 7.8-16.2 5.3-3.8 12.65-5.7 22.05-5.7 10.3 0 18.2 2.25 23.7 6.75 5.5 4.4 8.25 10.55 8.25 18.45h-9.75c0-5.3-1.75-9.3-5.25-12-3.4-2.8-8.75-4.2-16.05-4.2-6.6 0-11.75 1.1-15.45 3.3-3.7 2.2-5.55 5.3-5.55 9.3 0 3.8 1.85 6.65 5.55 8.55 3.7 1.9 9.5 2.85 17.4 2.85 21 0 31.5 6.9 31.5 20.7 0 7.4-2.8 13.35-8.4 17.85-5.6 4.4-13.7 6.6-24.3 6.6-10.7 0-19-2.25-24.9-6.75-5.8-4.6-8.7-10.8-8.7-18.6h9.75c0 5.3 1.9 9.35 5.7 12.15 3.8 2.8 9.7 4.2 17.7 4.2zm119.159-16.2c0 3.7-.8 7.1-2.4 10.2-1.6 3.1-3.8 5.8-6.6 8.1-2.8 2.2-6.1 3.9-9.9 5.1-3.8 1.2-7.95 1.8-12.45 1.8-10.7 0-19.2-3.45-25.5-10.35-6.2-7-9.3-16.75-9.3-29.25 0-12.4 3.05-21.9 9.15-28.5 6.2-6.7 14.65-10.05 25.35-10.05 4.6 0 8.85.65 12.75 1.95 3.9 1.2 7.25 2.9 10.05 5.1 2.8 2.2 4.95 4.85 6.45 7.95 1.6 3.1 2.4 6.55 2.4 10.35h-9.75c0-4.8-2.05-8.65-6.15-11.55-4.1-3-9.4-4.5-15.9-4.5-7.9 0-14 2.45-18.3 7.35-4.2 4.9-6.3 12.35-6.3 22.35 0 10.2 2.15 17.8 6.45 22.8 4.3 4.9 10.45 7.35 18.45 7.35 6.3 0 11.5-1.45 15.6-4.35 4.1-2.9 6.15-6.85 6.15-11.85h9.75zM649.76 32.5c5.3 0 10.1.9 14.4 2.7 4.3 1.7 7.95 4.2 10.95 7.5 3.1 3.3 5.45 7.35 7.05 12.15 1.7 4.8 2.55 10.3 2.55 16.5 0 6.1-.85 11.6-2.55 16.5-1.6 4.8-3.9 8.9-6.9 12.3-3 3.4-6.65 6-10.95 7.8-4.3 1.8-9.15 2.7-14.55 2.7-5.3 0-10.1-.85-14.4-2.55-4.3-1.8-8-4.4-11.1-7.8-3.1-3.4-5.5-7.5-7.2-12.3-1.6-4.9-2.4-10.4-2.4-16.5s.8-11.55 2.4-16.35c1.7-4.8 4.05-8.85 7.05-12.15 3.1-3.4 6.8-6 11.1-7.8 4.3-1.8 9.15-2.7 14.55-2.7zm0 69.15c7.7 0 13.8-2.65 18.3-7.95 4.6-5.4 6.9-12.85 6.9-22.35 0-9.5-2.3-16.85-6.9-22.05-4.6-5.2-10.7-7.8-18.3-7.8-7.7 0-13.85 2.6-18.45 7.8-4.6 5.2-6.9 12.55-6.9 22.05 0 9.6 2.3 17.05 6.9 22.35 4.7 5.3 10.85 7.95 18.45 7.95zm80.459-61.35c4.1-5.2 10.3-7.8 18.6-7.8 8.8 0 15.55 2.75 20.25 8.25 4.8 5.5 7.2 13.1 7.2 22.8h-9.75c0-6.9-1.6-12.3-4.8-16.2-3.1-3.9-7.65-5.85-13.65-5.85-5.1 0-9.25 1.4-12.45 4.2-3.1 2.7-4.9 6.4-5.4 11.1v43.35h25.05v9h-63.9v-9h29.1v-57h-19.8v-9h29.55v6.15zm93.508 61.35c7.1 0 12.55-1.4 16.35-4.2 3.9-2.8 5.85-6.8 5.85-12h9.75c0 3.7-.8 7.1-2.4 10.2-1.5 3.1-3.7 5.8-6.6 8.1-2.8 2.2-6.15 3.9-10.05 5.1-3.9 1.2-8.25 1.8-13.05 1.8-11.3 0-20.05-3.35-26.25-10.05-6.2-6.8-9.3-16.45-9.3-28.95s3.05-22.1 9.15-28.8c6.1-6.8 14.75-10.2 25.95-10.2 10.3 0 18.3 2.85 24 8.55 5.7 5.6 8.55 13.5 8.55 23.7v9.9h-57.9c.5 9.3 2.8 16.1 6.9 20.4 4.2 4.3 10.55 6.45 19.05 6.45zm22.2-35.85c0-16.1-7.65-24.15-22.95-24.15-15.1 0-23.4 8.05-24.9 24.15h47.85zM600.26 127.9h87v7.5h-87v-7.5z"
|
||||
/>
|
||||
</LogoSvg>
|
||||
)
|
||||
|
||||
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 = {
|
||||
colour: string,
|
||||
active: bool,
|
||||
}
|
||||
|
||||
export default Logo
|
||||
72
src/components/Video/index.js
Normal file
72
src/components/Video/index.js
Normal file
@ -0,0 +1,72 @@
|
||||
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'
|
||||
|
||||
const Video = ({ playing, setPlaying, src }) => {
|
||||
const videoiFrame = useRef(null)
|
||||
const overlayTimeout = useRef(null)
|
||||
const [videoReady, setVideoReady] = useState(false)
|
||||
const [overlayActive, setOverlayActiveState] = useState(true)
|
||||
const ptVideo = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const setVideo = async () => {
|
||||
const player = new PeerTubePlayer(videoiFrame.current)
|
||||
await player.ready
|
||||
|
||||
ptVideo.current = player
|
||||
player.setVolume(100)
|
||||
setVideoReady(true)
|
||||
}
|
||||
setVideo()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const { current: player } = ptVideo
|
||||
|
||||
if (!videoReady) return
|
||||
|
||||
if (playing) {
|
||||
setOverlayActiveState(false)
|
||||
player.play()
|
||||
} else {
|
||||
setOverlayActiveState(true)
|
||||
player.pause()
|
||||
}
|
||||
}, [playing])
|
||||
|
||||
const activateOverlay = () => {
|
||||
clearTimeout(overlayTimeout.current)
|
||||
setOverlayActiveState(true)
|
||||
|
||||
overlayTimeout.current = setTimeout(
|
||||
() => setOverlayActiveState(false),
|
||||
2000
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<VideoWrapper
|
||||
$active={overlayActive || !playing}
|
||||
onClick={() => setPlaying(!playing)}
|
||||
onMouseMove={activateOverlay}
|
||||
>
|
||||
<Overlay>
|
||||
<Logo active={overlayActive || !playing}></Logo>
|
||||
</Overlay>
|
||||
<Iframe
|
||||
sandbox="allow-same-origin allow-scripts allow-popups"
|
||||
src={`${src}?api=1&controls=false`}
|
||||
frameborder="0"
|
||||
allowfullscreen
|
||||
ref={videoiFrame}
|
||||
/>
|
||||
</VideoWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default Video
|
||||
24
src/components/Video/styles.js
Normal file
24
src/components/Video/styles.js
Normal file
@ -0,0 +1,24 @@
|
||||
import styled from 'styled-components'
|
||||
|
||||
export const VideoWrapper = styled.div`
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
cursor: ${props => (props.$active ? 'pointer' : 'none')};
|
||||
`
|
||||
export const Iframe = styled.iframe`
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
pointer-events: none;
|
||||
`
|
||||
export const Overlay = styled.div`
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
`
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"peertube_root": "https://tv.undersco.re",
|
||||
"next_stream": {
|
||||
"title": "Femboy Photoshoot",
|
||||
"peertube_id": "cafce2b3-550b-4656-bae0-c167d3994a0d",
|
||||
"peertube_id": "5c457282-e8d0-4464-9c07-cb6bb71d7153",
|
||||
"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"
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user