diff --git a/package.json b/package.json index 1e5a187..a4fff63 100644 --- a/package.json +++ b/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" } } diff --git a/src/index.js b/src/index.js index c12138d..7d395e6 100644 --- a/src/index.js +++ b/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
- + +
; } } diff --git a/src/video/actionTypes.js b/src/video/actionTypes.js index 1267bdd..fc01389 100644 --- a/src/video/actionTypes.js +++ b/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'; + diff --git a/src/video/actions.js b/src/video/actions.js index 1267bdd..ec71990 100644 --- a/src/video/actions.js +++ b/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 +}); diff --git a/src/video/components/AudioElementView.js b/src/video/components/AudioElementView.js new file mode 100644 index 0000000..2a09626 --- /dev/null +++ b/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 ( + + ); + } +} + +AudioElementView.propTypes = { + stream: React.PropTypes.object, + muted: React.PropTypes.bool +}; + +export default AudioElementView; diff --git a/src/video/components/LocalVideoView.js b/src/video/components/LocalVideoView.js index 3d27929..36300d8 100644 --- a/src/video/components/LocalVideoView.js +++ b/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

Local Video View

; + let localVideo = this.props.local; + + return ( + + ); } } -export default LocalVideoView; \ No newline at end of file +const mapStateToProps = (state) => { + return { local: state.video.local } +}; + +export default connect(mapStateToProps)(LocalVideoView); \ No newline at end of file diff --git a/src/video/components/ThumbnailAvatarView.js b/src/video/components/ThumbnailAvatarView.js new file mode 100644 index 0000000..3a7efac --- /dev/null +++ b/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 ( + + ); +}; + +export default ThumbnailAvatarView; diff --git a/src/video/components/ThumbnailConnectionIndicatorView.js b/src/video/components/ThumbnailConnectionIndicatorView.js new file mode 100644 index 0000000..419da34 --- /dev/null +++ b/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 (
+ + +
); +}; + +export default ThumbnailConnectionIndicatorView; diff --git a/src/video/components/ThumbnailDisplayNameView.js b/src/video/components/ThumbnailDisplayNameView.js new file mode 100644 index 0000000..4aaceed --- /dev/null +++ b/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 ( + + {props.name} + ) +}; + +export default ThumbnailDisplayNameView; diff --git a/src/video/components/ThumbnailDominantSpeakerIndicatorView.js b/src/video/components/ThumbnailDominantSpeakerIndicatorView.js new file mode 100644 index 0000000..9d4ab0d --- /dev/null +++ b/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 ( + + ) +}; + +export default ThumbnailDominantSpeakerIndicatorView; diff --git a/src/video/components/ThumbnailModeratorIndicatorView.js b/src/video/components/ThumbnailModeratorIndicatorView.js new file mode 100644 index 0000000..a656e8b --- /dev/null +++ b/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 ( + + ) +}; + +export default ThumbnailModeratorIndicatorView; diff --git a/src/video/components/ThumbnailMutedAudioIndicatorView.js b/src/video/components/ThumbnailMutedAudioIndicatorView.js new file mode 100644 index 0000000..6fd248c --- /dev/null +++ b/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 ( + + ) +}; + +export default ThumbnailMutedAudioIndicatorView; diff --git a/src/video/components/ThumbnailMutedVideoIndicatorView.js b/src/video/components/ThumbnailMutedVideoIndicatorView.js new file mode 100644 index 0000000..b5fb17f --- /dev/null +++ b/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 ( + + ); +}; + +export default ThumbnailMutedVideoIndicatorView; \ No newline at end of file diff --git a/src/video/components/VideoElementView.js b/src/video/components/VideoElementView.js new file mode 100644 index 0000000..f6537dc --- /dev/null +++ b/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 ( + + ); + } +} + +VideoElementView.propTypes = { + stream: React.PropTypes.object, + muted: React.PropTypes.bool +}; + +export default VideoElementView; diff --git a/src/video/components/VideoThumbnailView.js b/src/video/components/VideoThumbnailView.js new file mode 100644 index 0000000..52d1f61 --- /dev/null +++ b/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 ( + + + + + + + + {(!props.videoStream || props.isVideoMuted) && + } + +
+ {props.isModerator && } + {props.isVideoMuted && } + {props.isAudioMuted && } + + {props.isDominantSpeaker && } +
+ + ); + } +} + +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; diff --git a/src/video/reducer.js b/src/video/reducer.js index 1267bdd..b6b3b9d 100644 --- a/src/video/reducer.js +++ b/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; \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 874ef9c..07b1dc0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,12 +10,21 @@ var config = { path: BUILD_DIR, filename: 'bundle.js' }, + devServer: { + publicPath: "/build/", + port: 8080 + }, + devtool: 'source-map', module : { loaders : [ { test : /\.js$/, include : APP_DIR, - loader : 'babel' + loader : 'babel', + query: + { + presets:['es2015', 'react'] + } }, { test: /\.less$/,