Salastil/streamwall
1
0
Fork 0
mirror of https://github.com/streamwall/streamwall.git synced 2026-01-30 00:42:48 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add support for background and overlay pages

Browse Source
This commit is contained in:
Max Goodhart
2020-07-27 11:50:54 -07:00
parent bb4d62050c
commit 38ea3df625
6 changed files with 97 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/browser/background.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Woke Stream Background</title>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; style-src 'self' 'unsafe-inline'"
/>
</head>
<body>
<script src="background.js" type="module"></script>
</body>
</html>

43
src/browser/background.js Normal file
View File

@@ -0,0 +1,43 @@
import { ipcRenderer } from 'electron'
import { h, render } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import styled from 'styled-components'
import '../index.css'
function Background({ streams }) {
const backgrounds = streams.filter((s) => s.kind === 'background')
return (
<div>
{backgrounds.map((s) => (
<BackgroundIFrame key={s._id} src={s.link} sandbox="allow-scripts" />
))}
</div>
)
}
function App() {
const [state, setState] = useState({
streams: [],
})
useEffect(() => {
ipcRenderer.on('state', (ev, state) => {
setState(state)
})
}, [])
const { streams } = state
return <Background streams={streams} />
}
const BackgroundIFrame = styled.iframe`
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
border: none;
`
render(<App />, document.body)

14
src/browser/overlay.js
View File

@@ -20,6 +20,7 @@ function Overlay({ config, views, streams }) {
const activeViews = views const activeViews = views
.map(({ state, context }) => State.from(state, context)) .map(({ state, context }) => State.from(state, context))
.filter((s) => s.matches('displaying') && !s.matches('displaying.error')) .filter((s) => s.matches('displaying') && !s.matches('displaying.error'))
const overlays = streams.filter((s) => s.kind === 'overlay')
return ( return (
<div> <div>
{activeViews.map((viewState) => { {activeViews.map((viewState) => {
@@ -57,6 +58,9 @@ function Overlay({ config, views, streams }) {
</SpaceBorder> </SpaceBorder>
) )
})} })}
{overlays.map((s) => (
<OverlayIFrame key={s._id} src={s.link} sandbox="allow-scripts" />
))}
</div> </div>
) )
} }
@@ -208,4 +212,14 @@ const BlurCover = styled.div`
backdrop-filter: ${({ isBlurred }) => (isBlurred ? 'blur(30px)' : 'blur(0)')}; backdrop-filter: ${({ isBlurred }) => (isBlurred ? 'blur(30px)' : 'blur(0)')};
` `
const OverlayIFrame = styled.iframe`
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
border: none;
pointer-events: none;
`
render(<App />, document.body) render(<App />, document.body)

17
src/node/StreamWindow.js
View File

@@ -18,6 +18,7 @@ export default class StreamWindow extends EventEmitter {
this.win = null this.win = null
this.offscreenWin = null this.offscreenWin = null
this.backgroundView = null
this.overlayView = null this.overlayView = null
this.views = [] this.views = []
this.viewActions = null this.viewActions = null
@@ -65,6 +66,21 @@ export default class StreamWindow extends EventEmitter {
}) })
this.offscreenWin = offscreenWin this.offscreenWin = offscreenWin
const backgroundView = new BrowserView({
webPreferences: {
nodeIntegration: true,
},
})
win.addBrowserView(backgroundView)
backgroundView.setBounds({
x: 0,
y: 0,
width,
height,
})
backgroundView.webContents.loadFile('background.html')
this.backgroundView = backgroundView
const overlayView = new BrowserView({ const overlayView = new BrowserView({
webPreferences: { webPreferences: {
nodeIntegration: true, nodeIntegration: true,
@@ -254,5 +270,6 @@ export default class StreamWindow extends EventEmitter {
send(...args) { send(...args) {
this.overlayView.webContents.send(...args) this.overlayView.webContents.send(...args)
this.backgroundView.webContents.send(...args)
} }
} }

8
src/web/control.js
View File

@@ -366,6 +366,10 @@ function App({ wsEndpoint }) {
[setStreamCensored], [setStreamCensored],
) )
const normalStreams = streams.filter(
(s) => !s.kind || s.kind === 'video' || s.kind === 'web',
)
return ( return (
<div> <div>
<h1>Streamwall ({location.host})</h1> <h1>Streamwall ({location.host})</h1>
@@ -417,7 +421,7 @@ function App({ wsEndpoint }) {
</div> </div>
<div> <div>
{isConnected {isConnected
? streams.map((row) => ( ? normalStreams.map((row) => (
<StreamLine id={row._id} row={row} onClickId={handleClickId} /> <StreamLine id={row._id} row={row} onClickId={handleClickId} />
)) ))
: 'loading...'} : 'loading...'}
@@ -669,6 +673,8 @@ function CustomStreamInput({ idx, onChange, ...props }) {
<select onChange={handleChangeKind} value={props.kind}> <select onChange={handleChangeKind} value={props.kind}>
<option value="video">video</option> <option value="video">video</option>
<option value="web">web</option> <option value="web">web</option>
<option value="overlay">overlay</option>
<option value="background">background</option>
</select> </select>
</div> </div>
) )

3
webpack.config.js
View File

@@ -78,11 +78,12 @@ const browserConfig = {
devtool: 'cheap-source-map', devtool: 'cheap-source-map',
target: 'electron-renderer', target: 'electron-renderer',
entry: { entry: {
background: './src/browser/background.js',
overlay: './src/browser/overlay.js', overlay: './src/browser/overlay.js',
}, },
plugins: [ plugins: [
new CopyPlugin({ new CopyPlugin({
patterns: [{ from: 'src/browser/overlay.html', to: '[name].html' }], patterns: [{ from: 'src/browser/*.html', to: '[name].html' }],
}), }),
], ],
} }