Added some missing libraries to package.json and ability to run webpack-dev-server with hot module replacement

package.json

@@ -4,8 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "webpack -d --watch",
+    "dev": "webpack-dev-server --inline --hot",
     "build": "webpack -p"
   },
   "repository": {
@@ -19,12 +18,14 @@
   },
   "homepage": "https://github.com/yanas/jitsi-react-experiments#readme",
   "devDependencies": {
+    "babel": "^6.5.2",
     "babel-core": "^6.8.0",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
     "jquery": "^2.1.1",
     "jsx-loader": "^0.13.2",
     "less": "^2.5.3",
@@ -33,9 +34,13 @@
     "postcss-loader": "^0.9.1",
     "react": "^15.0.2",
     "react-dom": "^15.0.2",
+    "react-redux": "^4.4.5",
+    "redux": "^3.5.2",
     "sass-loader": "^3.2.0",
     "style-loader": "^0.13.1",
     "toolbox-loader": "0.0.3",
-    "webpack": "^1.13.0"
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1"
   }
 }

src/index.js

@@ -5,6 +5,7 @@ import toolbar from './toolbar';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux'
 import jitsiReducer from './jitsiReducer'
+import * as videoActions from './video/actions';
 
 let store = createStore(jitsiReducer, {},
     window.devToolsExtension && window.devToolsExtension()
@@ -15,7 +16,30 @@ class App extends React.Component {
         return <div>
             <toolbar.ui.ToolbarContainer></toolbar.ui.ToolbarContainer>
             <video.ui.LocalVideoView></video.ui.LocalVideoView>
-            <video.ui.RemoteVideoView></video.ui.RemoteVideoView>
+
+            <button onClick={() => {
+                navigator.webkitGetUserMedia({ audio: true, video: true }, (stream) => {
+                    let audioStream = new webkitMediaStream();
+                    let videoStream = new webkitMediaStream();
+
+                    var audioTracks = stream.getAudioTracks();
+                    if (audioTracks.length) {
+                        for (var i = 0; i < audioTracks.length; i++) {
+                            audioStream.addTrack(audioTracks[i]);
+                        }
+                    }
+
+                    var videoTracks = stream.getVideoTracks();
+                    if (videoTracks.length) {
+                        for (var j = 0; j < videoTracks.length; j++) {
+                            videoStream.addTrack(videoTracks[j]);
+                        }
+                    }
+
+                    store.dispatch(videoActions.setLocalAudioStream(audioStream));
+                    store.dispatch(videoActions.setLocalVideoStream(videoStream));
+                }, () => {});
+            }}>Set local video and audio streams</button>
         </div>;
     }
 }

src/video/actionTypes.js

@@ -1,3 +1,9 @@
 /**
  * Created by ystamcheva on 18/05/2016.
  */
+
+export const SET_LOCAL_VIDEO_STREAM = 'video/SET_LOCAL_VIDEO_STREAM';
+export const SET_LOCAL_AUDIO_STREAM = 'video/SET_LOCAL_AUDIO_STREAM';
+export const SET_REMOTE_VIDEO_STREAM = 'video/SET_REMOTE_VIDEO_STREAM';
+export const SET_REMOTE_AUDIO_STREAM = 'video/SET_REMOTE_AUDIO_STREAM';
+

src/video/actions.js

@@ -1,3 +1,11 @@
-/**
- * Created by ystamcheva on 18/05/2016.
- */
+import * as t from './actionTypes';
+
+export const setLocalAudioStream = (audioStream) => ({
+    type: t.SET_LOCAL_AUDIO_STREAM,
+    audioStream
+});
+
+export const setLocalVideoStream = (videoStream) => ({
+    type: t.SET_LOCAL_VIDEO_STREAM,
+    videoStream
+});

src/video/components/AudioElementView.js

@@ -0,0 +1,29 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+// TODO: add real functionality
+class AudioElementView extends React.Component {
+    render() {
+        // TODO: use URL.releaseObjectURL on componentDid/WillUnmount
+        let src = this.props.stream
+            ? URL.createObjectURL(this.props.stream)
+            : '';
+
+        return (
+            <audio autoPlay
+                muted={this.props.muted}
+                src={src}
+            ></audio>
+        );
+    }
+}
+
+AudioElementView.propTypes = {
+    stream: React.PropTypes.object,
+    muted: React.PropTypes.bool
+};
+
+export default AudioElementView;

src/video/components/LocalVideoView.js

@@ -1,12 +1,30 @@
-/**
- * Created by ystamcheva on 18/05/2016.
- */
 import React from 'react';
+import VideoThumbnailView from './VideoThumbnailView';
+import { connect } from 'react-redux';
 
 class LocalVideoView extends React.Component {
     render () {
-        return <p> Local Video View </p>;
+        let localVideo = this.props.local;
+
+        return (
+            <VideoThumbnailView
+                audioStream={localVideo.audioStream}
+                videoStream={localVideo.videoStream}
+                muteVideoElement={false}
+                muteAudioElement={false}
+                isModerator={true}
+                isDominantSpeaker={true}
+                isVideoMuted={true}
+                isAudioMuted={true}
+                isModerator={true}
+                displayName="test"
+            ></VideoThumbnailView>
+        );
     }
 }
 
-export default LocalVideoView;
+const mapStateToProps = (state) => {
+    return { local: state.video.local }
+};
+
+export default connect(mapStateToProps)(LocalVideoView);

src/video/components/ThumbnailAvatarView.js

@@ -0,0 +1,14 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+// TODO: add real functionality
+const ThumbnailAvatarView = () => {
+    return (
+        <img className="userAvatar" src="https://robohash.org/34550f6ce7bdc03a03fd85998ab44dc9.png?size=200x200"/>
+    );
+};
+
+export default ThumbnailAvatarView;

src/video/components/ThumbnailConnectionIndicatorView.js

@@ -0,0 +1,15 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+// TODO: add real functionality
+const ThumbnailConnectionIndicatorView = () => {
+    return (<div className="connectionindicator">
+        <span className="connection connection_empty"><i className="icon-connection"></i></span>
+        <span className="connection connection_full"><i className="icon-connection"></i></span>
+    </div>);
+};
+
+export default ThumbnailConnectionIndicatorView;

src/video/components/ThumbnailDisplayNameView.js

@@ -0,0 +1,15 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+// TODO: add real functionality
+const ThumbnailDisplayNameView = (props) => {
+    return (
+        <span className="displayname" style={{display:'inline-block'}}>
+            {props.name}
+        </span>)
+};
+
+export default ThumbnailDisplayNameView;

src/video/components/ThumbnailDominantSpeakerIndicatorView.js

@@ -0,0 +1,15 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+
+// TODO: add real functionality
+const ThumbnailDominantSpeakerIndicatorView = () => {
+    return (<span className="dominantspeakerindicator" data-i18n="[data-content]speaker" data-toggle="popover" data-placement="left" data-html="true" data-container="body" data-content="Speaker">
+        <i id="speakerindicatoricon" className="fa fa-bullhorn"></i>
+    </span>)
+};
+
+export default ThumbnailDominantSpeakerIndicatorView;

src/video/components/ThumbnailModeratorIndicatorView.js

@@ -0,0 +1,15 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+
+// TODO: add real functionality
+const ThumbnailModeratorIndicatorView = () => {
+    return (<span className="focusindicator" data-i18n="[data-content]videothumbnail.moderator" data-toggle="popover" data-placement="top" data-html="true" data-container="body" data-content="The owner of<br/>this conference">
+        <i className="fa fa-star"></i>
+    </span>)
+};
+
+export default ThumbnailModeratorIndicatorView;

src/video/components/ThumbnailMutedAudioIndicatorView.js

@@ -0,0 +1,15 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+
+// TODO: add real functionality
+const ThumbnailMutedAudioIndicatorView = () => {
+    return (<span className="audioMuted" data-i18n="[data-content]videothumbnail.mute" data-toggle="popover" data-placement="top" data-html="true" data-container="body" data-content="Participant is muted">
+        <i className="icon-mic-disabled"></i>
+    </span>)
+};
+
+export default ThumbnailMutedAudioIndicatorView;

src/video/components/ThumbnailMutedVideoIndicatorView.js

@@ -0,0 +1,14 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+// TODO: add real functionality
+const ThumbnailMutedVideoIndicatorView = () => {
+    return (<span className="videoMuted">
+        <i className="icon-camera-disabled" data-i18n="[data-content]videothumbnail.videomute" data-toggle="popover" data-placement="top" data-html="true" data-container="body" data-content="Participant has<br/>stopped the camera."></i>
+    </span>);
+};
+
+export default ThumbnailMutedVideoIndicatorView;

src/video/components/VideoElementView.js

@@ -0,0 +1,29 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+
+// TODO: add real functionality
+class VideoElementView extends React.Component {
+    render() {
+        // TODO: use URL.releaseObjectURL on componentDid/WillUnmount
+        let src = this.props.stream
+            ? URL.createObjectURL(this.props.stream)
+            : '';
+
+        return (
+            <video autoPlay
+                muted={this.props.muted}
+                src={src}
+            ></video>
+        );
+    }
+}
+
+VideoElementView.propTypes = {
+    stream: React.PropTypes.object,
+    muted: React.PropTypes.bool
+};
+
+export default VideoElementView;

src/video/components/VideoThumbnailView.js

@@ -0,0 +1,57 @@
+/**
+ * Created by tsareg on 03.06.16.
+ */
+
+import React from 'react';
+import ThumbnailDisplayNameView from './ThumbnailDisplayNameView';
+import ThumbnailAvatarView from './ThumbnailAvatarView';
+import VideoElementView from './VideoElementView';
+import AudioElementView from './AudioElementView';
+import ThumbnailConnectionIndicatorView from './ThumbnailConnectionIndicatorView';
+import ThumbnailModeratorIndicatorView from './ThumbnailModeratorIndicatorView';
+import ThumbnailDominantSpeakerIndicatorView from './ThumbnailDominantSpeakerIndicatorView';
+import ThumbnailMutedVideoIndicatorView from './ThumbnailMutedVideoIndicatorView';
+import ThumbnailMutedAudioIndicatorView from './ThumbnailMutedAudioIndicatorView';
+
+class VideoThumbnailView extends React.Component {
+    render() {
+        let props = this.props;
+
+        return (
+            <span className="videocontainer">
+                <VideoElementView muted={props.muteVideoElement} stream={props.videoStream}/>
+
+                <AudioElementView muted={props.muteAudioElement} stream={props.audioStream}/>
+
+                <ThumbnailDisplayNameView name={props.displayName} isEditable={props.isDisplayNameEditable}/>
+
+                {(!props.videoStream || props.isVideoMuted) &&
+                    <ThumbnailAvatarView avatar={props.avatar}/>}
+
+                <div>
+                    {props.isModerator && <ThumbnailModeratorIndicatorView/>}
+                    {props.isVideoMuted && <ThumbnailMutedVideoIndicatorView/>}
+                    {props.isAudioMuted && <ThumbnailMutedAudioIndicatorView/>}
+                    <ThumbnailConnectionIndicatorView/>
+                    {props.isDominantSpeaker && <ThumbnailDominantSpeakerIndicatorView/>}
+                </div>
+            </span>
+        );
+    }
+}
+
+VideoThumbnailView.propTypes = {
+    videoStream: React.PropTypes.object,
+    audioStream: React.PropTypes.object,
+    displayName: React.PropTypes.string,
+    isDisplayNameEditable: React.PropTypes.bool,
+    avatar: React.PropTypes.string,
+    isModerator: React.PropTypes.bool,
+    isVideoMuted: React.PropTypes.bool,
+    isAudioMuted: React.PropTypes.bool,
+    isDominantSpeaker: React.PropTypes.bool,
+    muteVideoElement: React.PropTypes.bool,
+    muteAudioElement: React.PropTypes.bool
+};
+
+export default VideoThumbnailView;

src/video/reducer.js

@@ -1,3 +1,21 @@
-/**
- * Created by ystamcheva on 18/05/2016.
- */
+import * as videoActionTypes from './actionTypes';
+import { combineReducers } from 'redux';
+
+const localVideoReducer = (state = {}, action) => {
+    switch (action.type) {
+        case videoActionTypes.SET_LOCAL_AUDIO_STREAM:
+            return Object.assign(
+                {}, state, { audioStream: action.audioStream });
+        case videoActionTypes.SET_LOCAL_VIDEO_STREAM:
+            return Object.assign(
+                {}, state, { videoStream: action.videoStream });
+        default:
+            return state;
+    }
+};
+
+const reducer = combineReducers({
+    local: localVideoReducer
+});
+
+export default reducer;