Peer-to-Peer Streaming

.eslintrc.json

@@ -27,7 +27,8 @@
         }
     },
     "globals": {
-        "YT": "readonly"
+        "YT": "readonly",
+        "ICE_SERVERS": "readonly"
     },
     "rules": {
         "indent": [
@@ -53,12 +54,15 @@
             "error",
             "always"
         ],
+        "no-unused-vars": [
+            "warn"
+        ],
         "no-console": [
-            "error",
+            "warn",
             { "allow": ["info", "warn", "error"] }
         ],
         "no-inline-comments": [
-            "error"
+            "warn"
         ],
         "spaced-comment": [
             "error",

Makefile

@@ -18,10 +18,10 @@ lint:
 	npx eslint src/* --ext .js,.json --fix
 
 start-client:
-	php -S 0.0.0.0:8000 -t build
+	php -S 0.0.0.0:8020 -t build
 
 start-server:
-	node bin/server.js 8001
+	node bin/server.js 8021
 
 # Publish package
 publish: build

assets/css/components/buttons.scss

@@ -37,4 +37,8 @@
     &[disabled] .icon-loader {
         color: $color-primary;
     }
+
+    &.active, &.active:hover {
+        color: $color-primary;
+    }
 }

assets/css/components/user-list.scss

@@ -19,9 +19,17 @@
         border-radius: 100%;
 
         sup {
-            font-size: 0.6em;
+            font-size: 0.5em;
             position: absolute;
-            top: 0;
+            top: -0.2em;
+            right: 0;
+            text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.66);
+        }
+
+        sub {
+            font-size: 0.4em;
+            position: absolute;
+            bottom: -0.2em;
             right: 0;
             text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.66);
         }
@@ -34,6 +42,10 @@
             color: green;
         }
 
+        &.streaming sub {
+            color: $color-primary;
+        }
+
         &.loading sup {
             color: red;
         }

assets/css/core/icons.scss

@@ -22,6 +22,7 @@ $icons: (
   "volume-low": "\e911",
   "volume-medium": "\e912",
   "volume-none": "\e910",
+  "stream": "\e90f",
 );
 
 @font-face {

package.json

@@ -21,7 +21,8 @@
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "reset-css": "^5.0.1",
-    "tom32i-event-emitter.js": "^2.0.5"
+    "tom32i-event-emitter.js": "^2.0.5",
+    "webrtc-adapter": "^7.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",

src/client/components/Controls.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Button from '@client/components/Button';
 import VolumeControl from '@client/components/VolumeControl';
+import StreamButton from '@client/components/StreamButton';
 
 class Controls extends Component {
     static propTypes = {
@@ -13,6 +14,12 @@ class Controls extends Component {
         onStop: PropTypes.func.isRequired,
         onBackward: PropTypes.func.isRequired,
         onForward: PropTypes.func.isRequired,
+        toggleStream: PropTypes.func,
+        streamable: PropTypes.bool.isRequired,
+    };
+
+    static defaultProps = {
+        toggleStream: null,
     };
 
     constructor(props) {
@@ -102,14 +109,15 @@ class Controls extends Component {
     }
 
     render() {
-        const { playing, loaded, onStop, onBackward, onForward } = this.props;
+        const { playing, loaded, streamable, onStop, onBackward, onForward, toggleStream } = this.props;
         const playIcon = loaded ? playing ? 'icon-pause' : 'icon-play' : 'icon-loader';
         const screenIcon = this.fullscreen ? 'icon-minimise' : 'icon-maximise';
 
         return (
             <div className="player-controls">
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-stop" />} onClick={onStop} />
+                    {streamable ? <StreamButton disabled={!loaded} onClick={toggleStream} /> : null}
                 </div>
                 <div className="group">
                     <Button disabled={!loaded} label={<span className="icon-backward" onClick={onBackward} />} />
@@ -129,5 +137,6 @@ export default connect(
     state => ({
         playing: state.player.playing,
         loaded: state.player.loaded,
-    })
+        streamable: state.player.source === 'file',
+    }),
 )(Controls);