Skip to content
This repository was archived by the owner on Mar 29, 2025. It is now read-only.

Commit 17d14ae

Browse files
EnergizzEnergizz
authored
Merge pull request #14 from voxeet/develop
Release 1.7.0
2 parents 8704fd0 + ee91063 commit 17d14ae

File tree

10 files changed

+137
-113
lines changed

10 files changed

+137
-113
lines changed

‎.babelrc‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
2-
"presets": ["env", "stage-0", "react"],
3-
"plugins": [
4-
"react-hot-loader/babel",
5-
"transform-class-properties",
6-
"transform-decorators-legacy",
7-
]
8-
}
2+
"sourceType": "unambiguous",
3+
"presets": ["@babel/preset-env", "@babel/preset-react"],
4+
"plugins": [
5+
"@babel/plugin-transform-modules-commonjs",
6+
"react-hot-loader/babel",
7+
["@babel/plugin-proposal-decorators", { "legacy": true }]
8+
]
9+
}

‎package.json‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,39 @@
11
{
22
"name": "voxeet-mix-layout",
3-
"version": "1.6.0",
3+
"version": "1.7.0",
44
"private": true,
55
"dependencies": {
6-
"@voxeet/voxeet-web-sdk": "^3.1.3",
7-
"axios": "^0.18.0",
8-
"express": "^4.16.4",
6+
"@voxeet/voxeet-web-sdk": "3.2.0",
7+
"axios": "^0.21.1",
98
"react": "^16.7.0",
109
"react-dom": "^16.7.0",
1110
"react-player": "2.7.2",
1211
"react-redux": "^5.0.7",
13-
"react-scripts": "1.1.4",
1412
"redux": "^3.7.2",
1513
"redux-promise": "^0.6.0",
1614
"redux-thunk": "^2.3.0"
1715
},
1816
"devDependencies": {
19-
"babel-core": "^6.26.0",
20-
"babel-eslint": "^8.0.0",
21-
"babel-loader": "^7.1.2",
22-
"babel-plugin-transform-class-properties": "^6.24.1",
23-
"babel-plugin-transform-decorators-legacy": "^1.3.4",
24-
"babel-preset-env": "^1.7.0",
25-
"babel-preset-es2015": "^6.24.1",
26-
"babel-preset-react": "^6.24.1",
27-
"babel-preset-stage-0": "^6.24.1",
28-
"copy-webpack-plugin": "^4.2.0",
29-
"css-loader": "^0.28.7",
30-
"extract-text-webpack-plugin": "^3.0.1",
17+
"@babel/core": "^7.0.0-0",
18+
"@babel/plugin-proposal-decorators": "^7.14.5",
19+
"@babel/plugin-transform-modules-commonjs": "^7.14.5",
20+
"@babel/plugin-transform-runtime": "^7.14.5",
21+
"@babel/preset-env": "^7.14.7",
22+
"@babel/preset-react": "^7.14.5",
23+
"babel-core": "^7.0.0-bridge",
24+
"babel-loader": "^8.2.2",
25+
"css-loader": "^5.2.6",
3126
"file-loader": "^0.11.2",
32-
"html-webpack-plugin": "^2.30.1",
33-
"react-hot-loader": "^3.0.0-beta.7",
34-
"style-loader": "^0.18.2",
27+
"html-webpack-plugin": "^5.3.2",
28+
"react-hot-loader": "^4.13.0",
29+
"style-loader": "^3.0.0",
3530
"url-loader": "^0.5.9",
36-
"webpack": "^3.6.0",
37-
"webpack-dev-server": "^2.8.2"
31+
"webpack": "^5.41.0",
32+
"webpack-cli": "^4.7.2",
33+
"webpack-dev-server": "^3.11.2"
3834
},
3935
"scripts": {
40-
"start": "webpack-dev-server -d",
41-
"build": "npx webpack --output-filename out.js --output-path dist"
36+
"start": "webpack serve --mode=development",
37+
"build": "npx webpack --mode=production --output-filename out.js --output-path dist"
4238
}
4339
}

‎src/app/VoxeetReactComponents.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import reducer from './reducers'
2-
import ConferenceRoom from './components/ConferenceRoom'
1+
import reducers from "./reducers";
2+
import ConferenceRoom from "./components/ConferenceRoom";
33

4-
module.exports = {
5-
reducer,
6-
ConferenceRoom
7-
}
4+
exports.reducers = reducers;
5+
exports.ConferenceRoom = ConferenceRoom;

‎src/app/components/AttendeesParticipantVuMeter.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,14 @@ class AttendeesParticipantVuMeter extends Component {
6464
AttendeesParticipantVuMeter.propTypes = {
6565
participant: PropTypes.object.isRequired,
6666
customClass: PropTypes.string,
67-
width: PropTypes.number,
68-
height: PropTypes.number,
67+
width: PropTypes.string,
68+
height: PropTypes.string,
6969
includeName: PropTypes.bool,
7070
};
7171

7272
AttendeesParticipantVuMeter.defaultProps = {
73-
width: 60,
74-
height: 60,
73+
width: "60",
74+
height: "60",
7575
includeName: false,
7676
};
7777

‎src/app/components/ConferenceRoom.js‎

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,12 @@ class ConferenceRoom extends Component {
2828

2929
launchConferenceTestCat() {
3030
const layoutType = document.getElementById("select-layout-test").value;
31-
const conferenceAccessTokenTest = document.getElementById("conferenceAccessTokenTest").value;
32-
const conferenceNameCatTest = document.getElementById("conferenceNameCatTest")
33-
.value;
31+
const conferenceAccessTokenTest = document.getElementById(
32+
"conferenceAccessTokenTest"
33+
).value;
34+
const conferenceNameCatTest = document.getElementById(
35+
"conferenceNameCatTest"
36+
).value;
3437
const userInfo = { user: {} };
3538
const constraints = {
3639
video: false,
@@ -45,10 +48,15 @@ class ConferenceRoom extends Component {
4548
initialized.then(() =>
4649
this.props
4750
.dispatch(
48-
ConferenceActions.join(conferenceNameCatTest, constraints, conferenceAccessTokenTest, {
49-
name: "Mixer",
50-
externalId: "Mixer_record",
51-
})
51+
ConferenceActions.join(
52+
conferenceNameCatTest,
53+
constraints,
54+
conferenceAccessTokenTest,
55+
{
56+
name: "Mixer",
57+
externalId: "Mixer_record",
58+
}
59+
)
5260
)
5361
.then(() => this.setState({ isLaunch: true, layoutType: layoutType }))
5462
);
@@ -83,8 +91,12 @@ class ConferenceRoom extends Component {
8391

8492
launchReplayConferenceTestCat() {
8593
const layoutType = document.getElementById("select-layout-test").value;
86-
const conferenceIdReplayTestCat = document.getElementById("conferenceIdReplayTestCat").value;
87-
const conferenceAccessTokenReplayTest = document.getElementById("conferenceAccessTokenReplayTest").value;
94+
const conferenceIdReplayTestCat = document.getElementById(
95+
"conferenceIdReplayTestCat"
96+
).value;
97+
const conferenceAccessTokenReplayTest = document.getElementById(
98+
"conferenceAccessTokenReplayTest"
99+
).value;
88100
const initialized = this.props.dispatch(
89101
ConferenceActions.initialize(
90102
this.props.consumerKey,
@@ -95,10 +107,15 @@ class ConferenceRoom extends Component {
95107
initialized.then(() =>
96108
this.props
97109
.dispatch(
98-
ConferenceActions.replay(conferenceIdReplayTestCat, 0, conferenceAccessTokenReplayTest, {
99-
name: "Mixer",
100-
externalId: "Mixer_record",
101-
})
110+
ConferenceActions.replay(
111+
conferenceIdReplayTestCat,
112+
0,
113+
conferenceAccessTokenReplayTest,
114+
{
115+
name: "Mixer",
116+
externalId: "Mixer_record",
117+
}
118+
)
102119
)
103120
.then(() => this.setState({ isLaunch: true, layoutType: layoutType }))
104121
);
@@ -182,6 +199,10 @@ class ConferenceRoom extends Component {
182199
);
183200
}
184201

202+
leaveConference() {
203+
this.props.dispatch(ConferenceActions.leave());
204+
}
205+
185206
launchReplayConference() {
186207
const accessToken = document.getElementById("accessToken").value;
187208
const refreshToken = document.getElementById("refreshToken").value;
@@ -360,11 +381,15 @@ class ConferenceRoom extends Component {
360381
data-number-user={participantConnected.length}
361382
>
362383
<div id="conferenceStartedVoxeet"></div>
384+
<button
385+
id="leaveConference"
386+
onClick={this.leaveConference.bind(this)}
387+
>
388+
Leave conference
389+
</button>
363390
<div>
364391
{(screenShareMode || filePresentationMode) &&
365-
!videoPresentationMode &&
366-
<TilePiP />
367-
}
392+
!videoPresentationMode && <TilePiP />}
368393
{participantConnected.length > 0 ? (
369394
<ScreenShareMode
370395
screenShareMode={screenShareMode}
@@ -395,6 +420,12 @@ class ConferenceRoom extends Component {
395420
data-number-user={participantConnected.length}
396421
>
397422
<div id="conferenceStartedVoxeet"></div>
423+
<button
424+
id="leaveConference"
425+
onClick={this.leaveConference.bind(this)}
426+
>
427+
Leave conference
428+
</button>
398429
<div id="tile-list" className="tiles-list-generic">
399430
{participantConnected.length > 0 ? (
400431
participantConnected.map((participant, i) => {

‎src/app/components/Tile.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ class Tile extends Component {
3636
}
3737

3838
return (
39-
<div id="tile-item" style={{height: (calcHeight * 100) + '%', width: calcWidth * 100 + '%'}} className={'tile-item tile-generic' + (participant.isConnected ? ' participant-available' : ' participant-offline')}>
40-
<TileVideo width={100} stream={participant.stream} participant={participant} />
39+
<div id="tile-item" style={{height: (calcHeight * 100).toString() + '%', width: (calcWidth * 100).toString() + '%'}} className={'tile-item tile-generic' + (participant.isConnected ? ' participant-available' : ' participant-offline')}>
40+
<TileVideo width={"100"} stream={participant.stream} participant={participant} />
4141
</div>
4242
)
4343
}

‎src/app/components/TileVideo.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,16 @@ class TileVideo extends Component {
2222
<AttendeesParticipantVideo width={width} stream={stream} />
2323
</div>
2424
:
25-
<AttendeesParticipantVuMeter participant={participant} width={80} height={80} customClass={"preview-avatar"} />
25+
<AttendeesParticipantVuMeter participant={participant} width={"80"} height={"80"} customClass={"preview-avatar"} />
2626
}
2727
</span>
2828
)
2929
}
3030
}
3131

3232
TileVideo.propTypes = {
33-
width: PropTypes.number,
34-
height: PropTypes.number,
33+
width: PropTypes.string,
34+
height: PropTypes.string,
3535
participant: PropTypes.object.isRequired,
3636
stream: PropTypes.object
3737
}

‎src/app/index.js‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import { Provider } from 'react-redux'
4-
import thunkMidleware from 'redux-thunk'
5-
import promiseMiddleware from 'redux-promise'
6-
import { combineReducers, createStore, applyMiddleware } from 'redux'
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import { Provider } from "react-redux";
4+
import thunkMidleware from "redux-thunk";
5+
import promiseMiddleware from "redux-promise";
6+
import { combineReducers, createStore, applyMiddleware } from "redux";
77

8-
import { ConferenceRoom, reducer as voxeetReducer } from './VoxeetReactComponents'
8+
import {
9+
ConferenceRoom,
10+
reducers as voxeetReducer,
11+
} from "./VoxeetReactComponents";
912

1013
const reducers = combineReducers({
11-
voxeet: voxeetReducer
12-
})
14+
voxeet: voxeetReducer,
15+
});
1316

14-
const configureStore = () => createStore(
15-
reducers,
16-
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
17-
applyMiddleware(thunkMidleware, promiseMiddleware)
18-
)
17+
const configureStore = () =>
18+
createStore(
19+
reducers,
20+
window.__REDUX_DEVTOOLS_EXTENSION__ &&
21+
window.__REDUX_DEVTOOLS_EXTENSION__(),
22+
applyMiddleware(thunkMidleware, promiseMiddleware)
23+
);
1924

2025
ReactDOM.render(
2126
<Provider store={configureStore()}>
@@ -24,5 +29,5 @@ ReactDOM.render(
2429
/>
2530
</div>
2631
</Provider>,
27-
document.getElementById('app')
28-
)
32+
document.getElementById("app")
33+
);

‎src/styles/css/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ body {
108108
/* HIDDEN */
109109

110110
#joinConference,
111+
#leaveConference,
111112
#replayConference {
112113
display: none;
113114
}
@@ -258,7 +259,6 @@ body {
258259
bottom: 0;
259260
left: 0;
260261
right: 0;
261-
262262
}
263263

264264
.video-participant {

0 commit comments

Comments
 (0)