player controls ui wip

package.json

@@ -9,6 +9,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.15",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
     "approximate-number": "^2.0.0",
     "array-buffer-to-hex": "^1.0.0",
     "blessed": "^0.1.81",
@@ -43,6 +45,7 @@
     "qs": "^6.6.0",
     "react": "^16.4.2",
     "react-app-rewired": "^2.1.0",
+    "react-compound-slider": "^1.2.1",
     "react-dom": "^16.4.2",
     "react-force-graph-3d": "^1.6.1",
     "react-router-dom": "^4.3.1",
@@ -55,6 +58,7 @@
     "tinyqueue": "^2.0.0",
     "urlsafe-base64": "^1.0.0",
     "use-events": "^1.2.0",
+    "use-fullscreen": "^0.0.5",
     "uuid": "^3.3.2",
     "worker-loader": "^2.0.0",
     "wrtc": "^0.3.5",

src/components/App.js

@@ -0,0 +1,86 @@
+import React, {useEffect, useState} from 'react';
+import URI from '../ppspp/uri';
+import {Client} from '../client';
+import {ConnManager} from '../wrtc';
+import PlayButton from './PlayButton';
+import {useTimeout, useAsync} from 'react-use';
+import useQuery from '../hooks/useQuery';
+import VideoPlayer from './VideoPlayer';
+
+import './App.scss';
+
+const NoiseLogger = React.lazy(() => import('./NoiseLogger'));
+const PubSubLogger = React.lazy(() => import('./PubSubLogger'));
+
+const getDefaultBootstrapAddress = () => {
+  const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+  const host = process.env.NODE_ENV === 'development'
+    ? window.location.hostname + ':8080'
+    : window.location.host;
+  return `${proto}://${host}`;
+};
+
+const useSwarm = ({ppsppClient} = {}) => {
+  const [swarm, setSwarm] = useState(null);
+  const join = uri => setSwarm(ppsppClient.joinSwarm(URI.parse(uri)));
+  return [swarm, join];
+};
+
+const App = ({
+  location,
+  match: {params},
+  clientTimeoutMs = 5000,
+}) => {
+  const query = useQuery(location.search);
+  const autoPlay = 'autoplay' in query;
+  const bootstrapAddress = query.bootstrap || getDefaultBootstrapAddress();
+  const swarmName = params.name;
+
+  const clientTimeout = useTimeout(clientTimeoutMs);
+  const {
+    loading: clientLoading,
+    error: clientError,
+    value: client,
+  } = useAsync(() =>  Client.create(new ConnManager(bootstrapAddress)), []);
+
+  const [swarm, joinSwarm] = useSwarm(client);
+
+  const swarmDesc = client?.bootstrap.swarms.find(desc => desc.name === swarmName);
+  const error = clientError || (autoPlay && clientTimeout) || !(clientLoading || swarmDesc);
+
+  useEffect(() => {
+    if (autoPlay && swarmDesc) {
+      setImmediate(() => joinSwarm(swarmDesc.uri));
+    }
+  }, [autoPlay, swarmDesc]);
+
+  if (swarm) {
+    const Component = {
+      'application/octet-stream': NoiseLogger,
+      'application/json': PubSubLogger,
+      'video/mpeg-ts': VideoPlayer,
+    }[swarmDesc.contentType];
+
+    return (
+      <Component swarm={swarm} />
+    );
+  }
+
+  return (
+    <>
+      <div className="idle">
+        <div className="noise"></div>
+      </div>
+      <PlayButton
+        disabled={clientLoading || autoPlay || error}
+        onClick={() => joinSwarm(swarmDesc.uri)}
+        pulse={!clientLoading && !autoPlay}
+        flicker={clientLoading || autoPlay}
+        error={error}
+        blur
+      />
+    </>
+  );
+};
+
+export default App;