mirror of
https://github.com/streamwall/streamwall.git
synced 2026-01-26 15:12:47 -05:00
Initial release
This commit is contained in:
Max Goodhart
3
src/browser/.babelrc.json
Normal file
3
src/browser/.babelrc.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env"]
|
||||
}
|
||||
14
src/browser/control.html
Normal file
14
src/browser/control.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Woke Streams</title>
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; style-src 'self' 'unsafe-inline'"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<script src="control.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
209
src/browser/control.js
Normal file
209
src/browser/control.js
Normal file
@@ -0,0 +1,209 @@
|
||||
import { ipcRenderer } from 'electron'
|
||||
import range from 'lodash/range'
|
||||
import { h, render } from 'preact'
|
||||
import { useEffect, useState, useCallback } from 'preact/hooks'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import './index.css'
|
||||
import SoundIcon from './static/volume-up-solid.svg'
|
||||
|
||||
function App() {
|
||||
const [streamData, setStreamData] = useState()
|
||||
const [spaceIdxMap, setSpaceIdxMap] = useState(new Map())
|
||||
const [listeningIdx, setListeningIdx] = useState()
|
||||
|
||||
useEffect(() => {
|
||||
ipcRenderer.on('stream-data', (ev, data) => {
|
||||
setStreamData(data)
|
||||
})
|
||||
}, [])
|
||||
|
||||
const handleSetSpace = useCallback(
|
||||
(idx, value) => {
|
||||
const newSpaceIdxMap = new Map(spaceIdxMap)
|
||||
if (value !== undefined) {
|
||||
newSpaceIdxMap.set(idx, value)
|
||||
} else {
|
||||
newSpaceIdxMap.delete(idx)
|
||||
}
|
||||
setSpaceIdxMap(newSpaceIdxMap)
|
||||
|
||||
const newSpaceURLMap = new Map(
|
||||
Array.from(newSpaceIdxMap, ([spaceIdx, dataIdx]) => [
|
||||
spaceIdx,
|
||||
streamData[dataIdx].Link,
|
||||
]),
|
||||
)
|
||||
ipcRenderer.send('set-videos', newSpaceURLMap)
|
||||
},
|
||||
[streamData, spaceIdxMap],
|
||||
)
|
||||
|
||||
const handleSetListening = useCallback(
|
||||
(idx) => {
|
||||
const newIdx = idx === listeningIdx ? null : idx
|
||||
setListeningIdx(newIdx)
|
||||
ipcRenderer.send('set-sound-source', newIdx)
|
||||
},
|
||||
[listeningIdx],
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Stream Wall</h1>
|
||||
<div>
|
||||
{range(0, 3).map((y) => (
|
||||
<StyledGridLine>
|
||||
{range(0, 3).map((x) => {
|
||||
const idx = 3 * y + x
|
||||
return (
|
||||
<GridInput
|
||||
idx={idx}
|
||||
onChangeSpace={handleSetSpace}
|
||||
spaceValue={spaceIdxMap.get(idx)}
|
||||
isListening={idx === listeningIdx}
|
||||
onSetListening={handleSetListening}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</StyledGridLine>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
{streamData
|
||||
? streamData.map((row, idx) => <StreamLine idx={idx} row={row} />)
|
||||
: 'loading...'}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function StreamLine({ idx, row: { Source, Title, Link, Notes } }) {
|
||||
return (
|
||||
<StyledStreamLine>
|
||||
<StyledIdx>{idx}</StyledIdx>
|
||||
<div>
|
||||
<strong>{Source}</strong> <a href={Link}>{Title || Link}</a> {Notes}
|
||||
</div>
|
||||
</StyledStreamLine>
|
||||
)
|
||||
}
|
||||
|
||||
function GridInput({
|
||||
idx,
|
||||
onChangeSpace,
|
||||
spaceValue,
|
||||
isListening,
|
||||
onSetListening,
|
||||
}) {
|
||||
const handleChange = useCallback(
|
||||
(ev) => {
|
||||
const { name, value } = ev.target
|
||||
const newValue = value ? Number(value) : NaN
|
||||
onChangeSpace(
|
||||
Number(name),
|
||||
Number.isFinite(newValue) ? newValue : undefined,
|
||||
)
|
||||
},
|
||||
[onChangeSpace],
|
||||
)
|
||||
const handleListeningClick = useCallback(() => onSetListening(idx), [
|
||||
idx,
|
||||
onSetListening,
|
||||
])
|
||||
const handleClick = useCallback((ev) => {
|
||||
ev.target.select()
|
||||
})
|
||||
return (
|
||||
<StyledGridContainer>
|
||||
<ListeningButton
|
||||
isListening={isListening}
|
||||
onClick={handleListeningClick}
|
||||
/>
|
||||
<StyledGridInput
|
||||
name={idx}
|
||||
value={spaceValue}
|
||||
onClick={handleClick}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</StyledGridContainer>
|
||||
)
|
||||
}
|
||||
|
||||
function ListeningButton(props) {
|
||||
return (
|
||||
<StyledListeningButton {...props}>
|
||||
<SoundIcon />
|
||||
</StyledListeningButton>
|
||||
)
|
||||
}
|
||||
|
||||
const StyledGridLine = styled.div`
|
||||
display: flex;
|
||||
`
|
||||
|
||||
const StyledListeningButton = styled.button`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2px solid gray;
|
||||
border-color: ${({ isListening }) => (isListening ? 'red' : 'gray')};
|
||||
background: ${({ isListening }) => (isListening ? '#c77' : '#ccc')};
|
||||
border-radius: 5px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 10px orange inset;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledGridContainer = styled.div`
|
||||
position: relative;
|
||||
|
||||
${StyledListeningButton} {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledGridInput = styled.input`
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
padding: 20px;
|
||||
border: 2px solid black;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px orange inset;
|
||||
}
|
||||
`
|
||||
|
||||
const StyledIdx = styled.div`
|
||||
flex-shrink: 0;
|
||||
margin-right: 5px;
|
||||
background: #333;
|
||||
color: white;
|
||||
padding: 3px;
|
||||
border-radius: 5px;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
`
|
||||
|
||||
const StyledStreamLine = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0.5em 0;
|
||||
`
|
||||
|
||||
function main() {
|
||||
render(<App />, document.body)
|
||||
}
|
||||
|
||||
main()
|
||||
15
src/browser/index.css
Normal file
15
src/browser/index.css
Normal file
@@ -0,0 +1,15 @@
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: normal;
|
||||
src: url(./static/NotoSans-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Noto Sans';
|
||||
font-weight: 600;
|
||||
src: url(./static/NotoSans-SemiBold.ttf) format('truetype');
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans';
|
||||
}
|
||||
14
src/browser/overlay.html
Normal file
14
src/browser/overlay.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Woke Stream Overlay</title>
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; style-src 'self' 'unsafe-inline'"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<script src="overlay.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
167
src/browser/overlay.js
Normal file
167
src/browser/overlay.js
Normal file
@@ -0,0 +1,167 @@
|
||||
import { ipcRenderer } from 'electron'
|
||||
import { h, Fragment, render } from 'preact'
|
||||
import { useEffect, useState } from 'preact/hooks'
|
||||
import { State } from 'xstate'
|
||||
import styled from 'styled-components'
|
||||
import Mousetrap from 'mousetrap'
|
||||
import { TailSpin } from 'svg-loaders-react'
|
||||
|
||||
import './index.css'
|
||||
import { WIDTH, HEIGHT } from '../constants'
|
||||
|
||||
import InstagramIcon from './static/instagram.svg'
|
||||
import FacebookIcon from './static/facebook.svg'
|
||||
import PeriscopeIcon from './static/periscope.svg'
|
||||
import TwitchIcon from './static/twitch.svg'
|
||||
import YouTubeIcon from './static/youtube.svg'
|
||||
import SoundIcon from './static/volume-up-solid.svg'
|
||||
|
||||
Mousetrap.bind('ctrl+shift+i', () => {
|
||||
ipcRenderer.send('devtools-overlay')
|
||||
})
|
||||
|
||||
function Overlay({ spaces, streamData }) {
|
||||
const activeSpaces = spaces.filter((s) => s.matches('displaying'))
|
||||
return (
|
||||
<div>
|
||||
{activeSpaces.map((spaceState) => {
|
||||
const { url, bounds } = spaceState.context
|
||||
const data = streamData.find((d) => url === d.Link)
|
||||
const isListening = spaceState.matches('displaying.running.listening')
|
||||
const isLoading = spaceState.matches('displaying.loading')
|
||||
return (
|
||||
<SpaceBorder bounds={bounds} isListening={isListening}>
|
||||
{data && (
|
||||
<>
|
||||
<StreamTitle>
|
||||
<StreamIcon url={url} />
|
||||
{data.Source} – {data.City} {data.State}
|
||||
</StreamTitle>
|
||||
</>
|
||||
)}
|
||||
{isLoading && <LoadingSpinner />}
|
||||
{isListening && <ListeningIndicator />}
|
||||
</SpaceBorder>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [spaces, setSpaces] = useState([])
|
||||
const [streamData, setStreamData] = useState([])
|
||||
|
||||
useEffect(() => {
|
||||
const spaceStateMap = new Map()
|
||||
ipcRenderer.on('space-state', (ev, idx, { state, context }) => {
|
||||
spaceStateMap.set(idx, State.from(state, context))
|
||||
setSpaces([...spaceStateMap.values()])
|
||||
})
|
||||
ipcRenderer.on('stream-data', (ev, data) => {
|
||||
setStreamData(data)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return <Overlay spaces={spaces} streamData={streamData} />
|
||||
}
|
||||
|
||||
function StreamIcon({ url, ...props }) {
|
||||
let parsedURL
|
||||
try {
|
||||
parsedURL = new URL(url)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
|
||||
let { host } = parsedURL
|
||||
host = host.replace(/^www\./, '')
|
||||
if (host === 'youtube.com' || host === 'youtu.be') {
|
||||
return <YouTubeIcon {...props} />
|
||||
} else if (host === 'facebook.com' || host === 'm.facebook.com') {
|
||||
return <FacebookIcon {...props} />
|
||||
} else if (host === 'twitch.tv') {
|
||||
return <TwitchIcon {...props} />
|
||||
} else if (host === 'periscope.tv' || host === 'pscp.tv') {
|
||||
return <PeriscopeIcon {...props} />
|
||||
} else if (host === 'instagram.com') {
|
||||
return <InstagramIcon {...props} />
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const SpaceBorder = styled.div.attrs((props) => ({
|
||||
borderWidth: 2,
|
||||
}))`
|
||||
position: fixed;
|
||||
left: ${({ bounds }) => bounds.x}px;
|
||||
top: ${({ bounds }) => bounds.y}px;
|
||||
width: ${({ bounds }) => bounds.width}px;
|
||||
height: ${({ bounds }) => bounds.height}px;
|
||||
border: 0 solid black;
|
||||
border-left-width: ${({ bounds, borderWidth }) =>
|
||||
bounds.x === 0 ? 0 : borderWidth}px;
|
||||
border-right-width: ${({ bounds, borderWidth }) =>
|
||||
bounds.x + bounds.width === WIDTH ? 0 : borderWidth}px;
|
||||
border-top-width: ${({ bounds, borderWidth }) =>
|
||||
bounds.y === 0 ? 0 : borderWidth}px;
|
||||
border-bottom-width: ${({ bounds, borderWidth }) =>
|
||||
bounds.y + bounds.height === HEIGHT ? 0 : borderWidth}px;
|
||||
box-shadow: ${({ isListening }) =>
|
||||
isListening ? '0 0 10px red inset' : 'none'};
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
`
|
||||
|
||||
const StreamTitle = styled.div`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 10px;
|
||||
margin: 5px;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
text-shadow: 0 0 4px black;
|
||||
letter-spacing: -0.025em;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
backdrop-filter: blur(10px);
|
||||
|
||||
svg {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-right: 0.35em;
|
||||
overflow: visible;
|
||||
filter: drop-shadow(0 0 4px black);
|
||||
|
||||
path {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const LoadingSpinner = styled(TailSpin)`
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
opacity: 0.5;
|
||||
`
|
||||
|
||||
const ListeningIndicator = styled(SoundIcon)`
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0.9;
|
||||
|
||||
path {
|
||||
fill: red;
|
||||
}
|
||||
`
|
||||
|
||||
render(<App />, document.body)
|
||||
BIN
src/browser/static/NotoSans-Regular.ttf
Normal file
BIN
src/browser/static/NotoSans-Regular.ttf
Normal file
Binary file not shown.
BIN
src/browser/static/NotoSans-SemiBold.ttf
Normal file
BIN
src/browser/static/NotoSans-SemiBold.ttf
Normal file
Binary file not shown.
1
src/browser/static/facebook.svg
Normal file
1
src/browser/static/facebook.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>
|
||||
|
After Width: | Height: | Size: 344 B |
1
src/browser/static/instagram.svg
Normal file
1
src/browser/static/instagram.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
|
||||
|
After Width: | Height: | Size: 1002 B |
1
src/browser/static/periscope.svg
Normal file
1
src/browser/static/periscope.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M370 63.6C331.4 22.6 280.5 0 226.6 0 111.9 0 18.5 96.2 18.5 214.4c0 75.1 57.8 159.8 82.7 192.7C137.8 455.5 192.6 512 226.6 512c41.6 0 112.9-94.2 120.9-105 24.6-33.1 82-118.3 82-192.6 0-56.5-21.1-110.1-59.5-150.8zM226.6 493.9c-42.5 0-190-167.3-190-279.4 0-107.4 83.9-196.3 190-196.3 100.8 0 184.7 89 184.7 196.3.1 112.1-147.4 279.4-184.7 279.4zM338 206.8c0 59.1-51.1 109.7-110.8 109.7-100.6 0-150.7-108.2-92.9-181.8v.4c0 24.5 20.1 44.4 44.8 44.4 24.7 0 44.8-19.9 44.8-44.4 0-18.2-11.1-33.8-26.9-40.7 76.6-19.2 141 39.3 141 112.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 608 B |
1
src/browser/static/twitch.svg
Normal file
1
src/browser/static/twitch.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z"/></svg>
|
||||
|
After Width: | Height: | Size: 281 B |
1
src/browser/static/volume-up-solid.svg
Normal file
1
src/browser/static/volume-up-solid.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="volume-up" class="svg-inline--fa fa-volume-up fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/browser/static/youtube.svg
Normal file
1
src/browser/static/youtube.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
|
||||
|
After Width: | Height: | Size: 550 B |
Reference in New Issue
Block a user