diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..f9796f6 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,8 @@ +{ + "extends": "flying-rocket", + "rules": { + "indent": ["error", 2], + "import/prefer-default-export": 0, + "react/require-default-props": 0 + } +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..65071cf --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "singleQuote": true, + "trailingComma": "es5", + "semi": false, + "tabWidth": 2 +} \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..958a1dd --- /dev/null +++ b/app.js @@ -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 ( +
+ {videoUrl && ( +
+ ) +} diff --git a/assets/svg/logo.svg b/assets/svg/logo.svg deleted file mode 100644 index 878bf50..0000000 --- a/assets/svg/logo.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/index.html b/index.html index 90dd317..b5f8c4b 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,10 @@ UNDERSCORE STREAMS - + -
+ + +
+ - + diff --git a/index.js b/index.js new file mode 100644 index 0000000..dc91d52 --- /dev/null +++ b/index.js @@ -0,0 +1,6 @@ +import { h, render } from 'preact' +import App from './app' + +const AppEl = document.getElementById('app') + +render(, AppEl) diff --git a/package.json b/package.json index 067a379..9d197e2 100644 --- a/package.json +++ b/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" } } diff --git a/src/assets/fonts/Karla/Karla-Bold.ttf b/src/assets/fonts/Karla/Karla-Bold.ttf new file mode 100644 index 0000000..c58a746 Binary files /dev/null and b/src/assets/fonts/Karla/Karla-Bold.ttf differ diff --git a/src/assets/fonts/Karla/Karla-Medium.ttf b/src/assets/fonts/Karla/Karla-Medium.ttf new file mode 100644 index 0000000..3e8098f Binary files /dev/null and b/src/assets/fonts/Karla/Karla-Medium.ttf differ diff --git a/src/assets/fonts/Karla/Karla-VariableFont_wght.ttf b/src/assets/fonts/Karla/Karla-VariableFont_wght.ttf new file mode 100644 index 0000000..172b500 Binary files /dev/null and b/src/assets/fonts/Karla/Karla-VariableFont_wght.ttf differ diff --git a/assets/js/chat.js b/src/assets/js/chat.js similarity index 100% rename from assets/js/chat.js rename to src/assets/js/chat.js diff --git a/assets/js/index.js b/src/assets/js/index.js similarity index 100% rename from assets/js/index.js rename to src/assets/js/index.js diff --git a/assets/js/scheduling.js b/src/assets/js/scheduling.js similarity index 100% rename from assets/js/scheduling.js rename to src/assets/js/scheduling.js diff --git a/assets/js/video-controls.js b/src/assets/js/video-controls.js similarity index 100% rename from assets/js/video-controls.js rename to src/assets/js/video-controls.js diff --git a/assets/styles/chat.scss b/src/assets/styles/chat.scss similarity index 100% rename from assets/styles/chat.scss rename to src/assets/styles/chat.scss diff --git a/src/assets/styles/fontface.css b/src/assets/styles/fontface.css new file mode 100644 index 0000000..b943fbf --- /dev/null +++ b/src/assets/styles/fontface.css @@ -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; +} diff --git a/assets/styles/index.scss b/src/assets/styles/index.scss similarity index 100% rename from assets/styles/index.scss rename to src/assets/styles/index.scss diff --git a/assets/styles/layout.scss b/src/assets/styles/layout.scss similarity index 100% rename from assets/styles/layout.scss rename to src/assets/styles/layout.scss diff --git a/assets/styles/reset.scss b/src/assets/styles/reset.css similarity index 100% rename from assets/styles/reset.scss rename to src/assets/styles/reset.css diff --git a/assets/styles/variables.scss b/src/assets/styles/variables.scss similarity index 100% rename from assets/styles/variables.scss rename to src/assets/styles/variables.scss diff --git a/assets/styles/video-player.scss b/src/assets/styles/video-player.scss similarity index 100% rename from assets/styles/video-player.scss rename to src/assets/styles/video-player.scss diff --git a/src/assets/theme/index.js b/src/assets/theme/index.js new file mode 100644 index 0000000..a9dc5f9 --- /dev/null +++ b/src/assets/theme/index.js @@ -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, +} diff --git a/src/components/Logo/index.js b/src/components/Logo/index.js new file mode 100644 index 0000000..c55bf4e --- /dev/null +++ b/src/components/Logo/index.js @@ -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 }) => ( + + + +) + +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 diff --git a/src/components/Video/index.js b/src/components/Video/index.js new file mode 100644 index 0000000..6f09c17 --- /dev/null +++ b/src/components/Video/index.js @@ -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 ( + setPlaying(!playing)} + onMouseMove={activateOverlay} + > + + + +