CCP-2118 SDK 3.2.0 support and improvements

Author: Valentin

package.json

@@ -1,43 +1,39 @@
 {
   "name": "voxeet-mix-layout",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "private": true,
   "dependencies": {
-    "@voxeet/voxeet-web-sdk": "^3.1.3",
-    "axios": "^0.18.0",
-    "express": "^4.16.4",
+    "@voxeet/voxeet-web-sdk": "^3.2.0",
+    "axios": "^0.21.1",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-player": "2.7.2",
     "react-redux": "^5.0.7",
-    "react-scripts": "1.1.4",
     "redux": "^3.7.2",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.3.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "copy-webpack-plugin": "^4.2.0",
-    "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.1",
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-transform-modules-commonjs": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-react": "^7.14.5",
+    "babel-core": "^7.0.0-bridge",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.2.6",
     "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.30.1",
-    "react-hot-loader": "^3.0.0-beta.7",
-    "style-loader": "^0.18.2",
+    "html-webpack-plugin": "^5.3.2",
+    "react-hot-loader": "^4.13.0",
+    "style-loader": "^3.0.0",
     "url-loader": "^0.5.9",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "webpack": "^5.41.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
-    "start": "webpack-dev-server -d",
-    "build": "npx webpack --output-filename out.js --output-path dist"
+    "start": "webpack serve --mode=development",
+    "build": "npx webpack --mode=production --output-filename out.js --output-path dist"
   }
 }

src/app/VoxeetReactComponents.js

@@ -1,7 +1,5 @@
-import reducer from './reducers'
-import ConferenceRoom from './components/ConferenceRoom'
+import reducers from "./reducers";
+import ConferenceRoom from "./components/ConferenceRoom";
 
-module.exports = {
-    reducer,
-    ConferenceRoom
-}
+exports.reducers = reducers;
+exports.ConferenceRoom = ConferenceRoom;

src/app/components/AttendeesParticipantVuMeter.js

@@ -64,14 +64,14 @@ class AttendeesParticipantVuMeter extends Component {
 AttendeesParticipantVuMeter.propTypes = {
   participant: PropTypes.object.isRequired,
   customClass: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
+  width: PropTypes.string,
+  height: PropTypes.string,
   includeName: PropTypes.bool,
 };
 
 AttendeesParticipantVuMeter.defaultProps = {
-  width: 60,
-  height: 60,
+  width: "60",
+  height: "60",
   includeName: false,
 };
 

src/app/components/Tile.js

@@ -36,8 +36,8 @@ class Tile extends Component {
         }
 
         return (
-            <div id="tile-item" style={{height: (calcHeight * 100) + '%', width: calcWidth * 100 + '%'}} className={'tile-item tile-generic' + (participant.isConnected ? ' participant-available' : ' participant-offline')}>
-                <TileVideo width={100} stream={participant.stream} participant={participant} />
+            <div id="tile-item" style={{height: (calcHeight * 100).toString() + '%', width: (calcWidth * 100).toString() + '%'}} className={'tile-item tile-generic' + (participant.isConnected ? ' participant-available' : ' participant-offline')}>
+                <TileVideo width={"100"} stream={participant.stream} participant={participant} />
             </div>
         )
     }

src/app/components/TileVideo.js

@@ -22,16 +22,16 @@ class TileVideo extends Component {
                         <AttendeesParticipantVideo width={width} stream={stream} />
                     </div>
                     :
-                    <AttendeesParticipantVuMeter participant={participant} width={80} height={80} customClass={"preview-avatar"} />
+                    <AttendeesParticipantVuMeter participant={participant} width={"80"} height={"80"} customClass={"preview-avatar"} />
                 }
             </span>
         )
     }
 }
 
 TileVideo.propTypes = {
-    width: PropTypes.number,
-    height: PropTypes.number,
+    width: PropTypes.string,
+    height: PropTypes.string,
     participant: PropTypes.object.isRequired,
     stream: PropTypes.object
 }

src/app/index.js

@@ -1,21 +1,26 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Provider } from 'react-redux'
-import thunkMidleware from 'redux-thunk'
-import promiseMiddleware from 'redux-promise'
-import { combineReducers, createStore, applyMiddleware } from 'redux'
+import React from "react";
+import ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import thunkMidleware from "redux-thunk";
+import promiseMiddleware from "redux-promise";
+import { combineReducers, createStore, applyMiddleware } from "redux";
 
-import { ConferenceRoom, reducer as voxeetReducer } from './VoxeetReactComponents'
+import {
+  ConferenceRoom,
+  reducers as voxeetReducer,
+} from "./VoxeetReactComponents";
 
 const reducers = combineReducers({
-  voxeet: voxeetReducer
-})
+  voxeet: voxeetReducer,
+});
 
-const configureStore = () => createStore(
-  reducers,
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
-  applyMiddleware(thunkMidleware, promiseMiddleware)
-)
+const configureStore = () =>
+  createStore(
+    reducers,
+    window.__REDUX_DEVTOOLS_EXTENSION__ &&
+      window.__REDUX_DEVTOOLS_EXTENSION__(),
+    applyMiddleware(thunkMidleware, promiseMiddleware)
+  );
 
 ReactDOM.render(
   <Provider store={configureStore()}>
@@ -24,5 +29,5 @@ ReactDOM.render(
       />
     </div>
   </Provider>,
-  document.getElementById('app')
-)
+  document.getElementById("app")
+);