diff --git a/app/src/actions/stateActions.js b/app/src/actions/stateActions.js index cac2b05..bb57e28 100644 --- a/app/src/actions/stateActions.js +++ b/app/src/actions/stateActions.js @@ -52,10 +52,10 @@ export const setAudioSuspended = ({ audioSuspended }) => }; export const setSettingsOpen = ({ settingsOpen }) => -({ - type : 'SET_SETTINGS_OPEN', - payload : { settingsOpen } -}); + ({ + type : 'SET_SETTINGS_OPEN', + payload : { settingsOpen } + }); export const setMe = ({ peerName, displayName, displayNameSet, device, loginEnabled }) => { diff --git a/app/src/components/Containers/HiddenPeers.js b/app/src/components/Containers/HiddenPeers.js index 838c644..7d155d0 100644 --- a/app/src/components/Containers/HiddenPeers.js +++ b/app/src/components/Containers/HiddenPeers.js @@ -30,7 +30,7 @@ const styles = () => fontSize : '1.7vmin', fontWeight : 'bolder', animation : 'none', - '&.pulse' : + '&.pulse' : { animation : 'pulse 0.5s' } @@ -91,7 +91,10 @@ class HiddenPeers extends React.PureComponent } = this.props; return ( -
openUsersTab()}> +
openUsersTab()} + >

+{hiddenPeersCount}
participant {(hiddenPeersCount === 1) ? null : 's'}

diff --git a/app/src/components/Containers/Me.js b/app/src/components/Containers/Me.js index 7470136..5c0ba90 100644 --- a/app/src/components/Containers/Me.js +++ b/app/src/components/Containers/Me.js @@ -34,20 +34,20 @@ const styles = () => }, '&.screen' : { - order : 1 + order : 1 } }, controls : { - position : 'absolute', - right : 0, - top : 0, - display : 'flex', - flexDirection : 'row', - padding : '0.4vmin', - zIndex : 20, - opacity : 0, - transition : 'opacity 0.3s', + position : 'absolute', + right : 0, + top : 0, + display : 'flex', + flexDirection : 'row', + padding : '0.4vmin', + zIndex : 20, + opacity : 0, + transition : 'opacity 0.3s', '&.visible' : { opacity : 1 @@ -62,7 +62,7 @@ const styles = () => width : 'var(--media-control-button-size)', height : 'var(--media-control-button-size)', backgroundColor : 'var(--media-control-button-color)', - '&:hover' : + '&:hover' : { opacity : 1 }, diff --git a/app/src/components/Containers/Peer.js b/app/src/components/Containers/Peer.js index 31e21be..640917f 100644 --- a/app/src/components/Containers/Peer.js +++ b/app/src/components/Containers/Peer.js @@ -51,7 +51,7 @@ const styles = () => zIndex : 20, opacity : 0, transition : 'opacity 0.3s', - '&.visible' : + '&.visible' : { opacity : 1 } @@ -68,7 +68,7 @@ const styles = () => cursor : 'pointer', transitionProperty : 'opacity, background-color', transitionDuration : '0.15s', - '&:hover' : + '&:hover' : { opacity : 1 }, diff --git a/app/src/components/MeetingDrawer/Chat/ChatInput.js b/app/src/components/MeetingDrawer/Chat/ChatInput.js index 4f990b5..f047c78 100644 --- a/app/src/components/MeetingDrawer/Chat/ChatInput.js +++ b/app/src/components/MeetingDrawer/Chat/ChatInput.js @@ -41,14 +41,14 @@ class ChatInput extends React.PureComponent } createNewMessage = (text, sender, name, picture) => - ({ - type : 'message', - text, - time : Date.now(), - name, - sender, - picture - }); + ({ + type : 'message', + text, + time : Date.now(), + name, + sender, + picture + }); handleChange = (e) => { @@ -121,10 +121,10 @@ ChatInput.propTypes = }; const mapStateToProps = (state) => -({ - displayName : state.me.displayName, - picture : state.me.picture -}); + ({ + displayName : state.me.displayName, + picture : state.me.picture + }); export default withRoomContext( connect(mapStateToProps)(withStyles(styles)(ChatInput)) diff --git a/app/src/components/MeetingDrawer/Chat/Message.js b/app/src/components/MeetingDrawer/Chat/Message.js index b74841b..1b9bacf 100644 --- a/app/src/components/MeetingDrawer/Chat/Message.js +++ b/app/src/components/MeetingDrawer/Chat/Message.js @@ -26,7 +26,7 @@ const styles = (theme) => }, selfMessage : { - marginLeft : 'auto', + marginLeft : 'auto' }, remoteMessage : { @@ -48,7 +48,7 @@ const styles = (theme) => borderRadius : '50%', height : '2rem', alignSelf : 'center' - }, + } }); const Message = (props) => @@ -88,12 +88,12 @@ const Message = (props) => Message.propTypes = { - self : PropTypes.bool, - picture : PropTypes.string, - text : PropTypes.string, - time : PropTypes.string, - name : PropTypes.string, - classes : PropTypes.object.isRequired + self : PropTypes.bool, + picture : PropTypes.string, + text : PropTypes.string, + time : PropTypes.string, + name : PropTypes.string, + classes : PropTypes.object.isRequired }; export default withStyles(styles)(Message); \ No newline at end of file diff --git a/app/src/components/MeetingDrawer/Chat/MessageList.js b/app/src/components/MeetingDrawer/Chat/MessageList.js index 48e7704..ad711b2 100644 --- a/app/src/components/MeetingDrawer/Chat/MessageList.js +++ b/app/src/components/MeetingDrawer/Chat/MessageList.js @@ -35,6 +35,7 @@ class MessageList extends React.PureComponent { if (nextProps.chatmessages.length !== this.props.chatmessages.length) return true; + return false; } @@ -55,6 +56,7 @@ class MessageList extends React.PureComponent { const { chatmessages, + myPicture, classes } = this.props; @@ -66,7 +68,7 @@ class MessageList extends React.PureComponent const messageTime = new Date(message.time); const picture = (message.sender === 'response' ? - message.picture : this.props.myPicture) || EmptyAvatar; + message.picture : myPicture) || EmptyAvatar; return ( -({ - chatmessages : state.chatmessages -}); + ({ + chatmessages : state.chatmessages, + myPicture : state.me.picture + }); export default connect(mapStateToProps, null)(withStyles(styles)(MessageList)); \ No newline at end of file diff --git a/app/src/components/MeetingDrawer/FileSharing/File.js b/app/src/components/MeetingDrawer/FileSharing/File.js index d0aae51..c532ef5 100644 --- a/app/src/components/MeetingDrawer/FileSharing/File.js +++ b/app/src/components/MeetingDrawer/FileSharing/File.js @@ -12,11 +12,11 @@ const styles = (theme) => ({ root : { - display : 'flex', - alignItems : 'center', - width : '100%', - padding : theme.spacing.unit, - boxShadow : '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)', + display : 'flex', + alignItems : 'center', + width : '100%', + padding : theme.spacing.unit, + boxShadow : '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)', '&:not(:last-child)' : { marginBottom : theme.spacing.unit diff --git a/app/src/components/MeetingDrawer/MeetingDrawer.js b/app/src/components/MeetingDrawer/MeetingDrawer.js index 114c193..bde75cd 100644 --- a/app/src/components/MeetingDrawer/MeetingDrawer.js +++ b/app/src/components/MeetingDrawer/MeetingDrawer.js @@ -57,16 +57,14 @@ class MeetingDrawer extends React.PureComponent variant='fullWidth' > Chat } /> File sharing @@ -99,7 +97,7 @@ const mapStateToProps = (state) => ({ }); const mapDispatchToProps = { - setToolTab : stateActions.setToolTab + setToolTab : stateActions.setToolTab }; export default connect( diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js index a7e461c..d8824e6 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListMe.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListMe.js @@ -11,11 +11,11 @@ const styles = () => ({ root : { - padding : '0.5rem', - width : '100%', - overflow : 'hidden', - cursor : 'auto', - display : 'flex' + padding : '0.5rem', + width : '100%', + overflow : 'hidden', + cursor : 'auto', + display : 'flex' }, listPeer : { @@ -68,7 +68,7 @@ const styles = () => backgroundImage : `url(${HandIcon})`, opacity : 1 } - }, + } }); const ListMe = (props) => diff --git a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js index e16b98a..b19554f 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ListPeer.js @@ -16,11 +16,11 @@ const styles = () => ({ root : { - padding : '0.5rem', - width : '100%', - overflow : 'hidden', - cursor : 'auto', - display : 'flex' + padding : '0.5rem', + width : '100%', + overflow : 'hidden', + cursor : 'auto', + display : 'flex' }, listPeer : { diff --git a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js index 4f550ff..c03bfa5 100644 --- a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js +++ b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js @@ -36,7 +36,7 @@ const styles = (theme) => cursor : 'pointer', '&.selected' : { - backgroundColor: 'rgba(55, 126, 255, 1)' + backgroundColor : 'rgba(55, 126, 255, 1)' }, '&:not(:last-child)' : { diff --git a/app/src/components/MeetingViews/Democratic.js b/app/src/components/MeetingViews/Democratic.js index 9e8f88b..ec2b44c 100644 --- a/app/src/components/MeetingViews/Democratic.js +++ b/app/src/components/MeetingViews/Democratic.js @@ -11,7 +11,7 @@ import ResizeObserver from 'resize-observer-polyfill'; const RATIO = 1.334; const PADDING = 100; -const styles = (theme) => +const styles = () => ({ root : { @@ -162,7 +162,7 @@ class Democratic extends React.PureComponent } else { - return(''); + return (''); } })} { spotlightsLength < Object.keys(peers).length ? diff --git a/app/src/components/MeetingViews/Filmstrip.js b/app/src/components/MeetingViews/Filmstrip.js index 4f08f6f..3f76809 100644 --- a/app/src/components/MeetingViews/Filmstrip.js +++ b/app/src/components/MeetingViews/Filmstrip.js @@ -9,7 +9,7 @@ import { withRoomContext } from '../../RoomContext'; import Peer from '../Containers/Peer'; import HiddenPeers from '../Containers/HiddenPeers'; -const styles = (theme) => +const styles = () => ({ root : { @@ -70,11 +70,11 @@ const styles = (theme) => }, filmContent : { - height : '100%', - width : '100%', - border : '1px solid rgba(255,255,255,0.15)', - maxWidth : 'calc(18vh * (4 / 3))', - cursor : 'pointer', + height : '100%', + width : '100%', + border : '1px solid rgba(255,255,255,0.15)', + maxWidth : 'calc(18vh * (4 / 3))', + cursor : 'pointer', '& .screen' : { maxWidth : 'calc(18vh * (2 * 4 / 3))', diff --git a/app/src/components/PeerAudio/AudioPeers.js b/app/src/components/PeerAudio/AudioPeers.js index 8331863..c272b98 100644 --- a/app/src/components/PeerAudio/AudioPeers.js +++ b/app/src/components/PeerAudio/AudioPeers.js @@ -28,9 +28,9 @@ AudioPeers.propTypes = }; const mapStateToProps = (state) => -({ - peers : state.peers -}); + ({ + peers : state.peers + }); const AudioPeersContainer = connect( mapStateToProps diff --git a/app/src/components/VideoContainers/PeerView.js b/app/src/components/VideoContainers/PeerView.js index 86874b1..022f558 100644 --- a/app/src/components/VideoContainers/PeerView.js +++ b/app/src/components/VideoContainers/PeerView.js @@ -5,9 +5,9 @@ import { withStyles } from '@material-ui/core/styles'; import * as appPropTypes from '../appPropTypes'; import EditableInput from '../Controls/EditableInput'; -const styles = (theme) => +const styles = () => ({ - root: + root : { position : 'relative', flex : '100 100 auto', @@ -32,7 +32,7 @@ const styles = (theme) => transitionProperty : 'opacity', transitionDuration : '.15s', backgroundColor : 'var(--peer-video-bg-color)', - '&.is-me' : + '&.is-me' : { transform : 'scaleX(-1)' }, @@ -71,11 +71,11 @@ const styles = (theme) => backgroundColor : 'rgba(0, 0, 0, 0.25)', '& p' : { - userSelect : 'none', - pointerEvents : 'none', - margin : 0, - color : 'rgba(255, 255, 255, 0.7)', - fontSize : 10, + userSelect : 'none', + pointerEvents : 'none', + margin : 0, + color : 'rgba(255, 255, 255, 0.7)', + fontSize : 10, '&:last-child' : { @@ -108,24 +108,24 @@ const styles = (theme) => }, displayNameStatic : { - userSelect : 'none', - cursor : 'text', - fontSize : 14, - fontWeight : 400, - color : 'rgba(255, 255, 255, 0.85)', - '&:hover' : + userSelect : 'none', + cursor : 'text', + fontSize : 14, + fontWeight : 400, + color : 'rgba(255, 255, 255, 0.85)', + '&:hover' : { - backgroundColor: 'rgb(174, 255, 0, 0.25)' + backgroundColor : 'rgb(174, 255, 0, 0.25)' } }, deviceInfo : { - marginTop : '0.4vmin', - display : 'flex', - flexDirection : 'row', - justifyContent : 'flex-start', - alignItems : 'flex-end', - '& span' : + marginTop : '0.4vmin', + display : 'flex', + flexDirection : 'row', + justifyContent : 'flex-start', + alignItems : 'flex-end', + '& span' : { userSelect : 'none', pointerEvents : 'none', @@ -143,7 +143,7 @@ const styles = (theme) => display : 'flex', flexDirection : 'column', justifyContent : 'center', - alignItems : 'center', + alignItems : 'center' }, volumeBar : { @@ -157,52 +157,52 @@ const styles = (theme) => height : 0, backgroundColor : 'rgba(255, 255, 0, 0.65)' }, - '&.level1' : + '&.level1' : { height : '10%', backgroundColor : 'rgba(255, 255, 0, 0.65)' }, - '&.level2' : + '&.level2' : { height : '20%', backgroundColor : 'rgba(255, 255, 0, 0.65)' }, - '&.level3' : + '&.level3' : { height : '30%', backgroundColor : 'rgba(255, 255, 0, 0.65)' }, - '&.level4' : + '&.level4' : { height : '40%', backgroundColor : 'rgba(255, 165, 0, 0.65)' }, - '&.level5' : + '&.level5' : { height : '50%', backgroundColor : 'rgba(255, 165, 0, 0.65)' }, - '&.level6' : + '&.level6' : { height : '60%', backgroundColor : 'rgba(255, 0, 0, 0.65)' }, - '&.level7' : + '&.level7' : { height : '70%', backgroundColor : 'rgba(255, 0, 0, 0.65)' }, - '&.level8' : + '&.level8' : { height : '80%', backgroundColor : 'rgba(0, 0, 0, 0.65)' }, - '&.level9' : + '&.level9' : { height : '90%', backgroundColor : 'rgba(0, 0, 0, 0.65)' }, - '&.level10' : + '&.level10' : { height : '100%', backgroundColor : 'rgba(0, 0, 0, 0.65)' diff --git a/app/src/components/VideoContainers/ScreenView.js b/app/src/components/VideoContainers/ScreenView.js index c667f54..4754d05 100644 --- a/app/src/components/VideoContainers/ScreenView.js +++ b/app/src/components/VideoContainers/ScreenView.js @@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core/styles'; const styles = () => ({ - root: + root : { position : 'relative', flex : '100 100 auto', @@ -30,7 +30,7 @@ const styles = () => transitionProperty : 'opacity', transitionDuration : '.15s', backgroundColor : 'var(--peer-video-bg-color)', - '&.is-me' : + '&.is-me' : { transform : 'scaleX(-1)' }, @@ -69,11 +69,11 @@ const styles = () => backgroundColor : 'rgba(0, 0, 0, 0.25)', '& p' : { - userSelect : 'none', - pointerEvents : 'none', - margin : 0, - color : 'rgba(255, 255, 255, 0.7)', - fontSize : 10, + userSelect : 'none', + pointerEvents : 'none', + margin : 0, + color : 'rgba(255, 255, 255, 0.7)', + fontSize : 10, '&:last-child' : { diff --git a/app/src/index.js b/app/src/index.js index 14b829b..96f57a6 100644 --- a/app/src/index.js +++ b/app/src/index.js @@ -59,9 +59,11 @@ function run() const peerName = randomString({ length: 8 }).toLowerCase(); const urlParser = new UrlParse(window.location.href, true); + let roomId = (urlParser.pathname).substr(1) ? (urlParser.pathname).substr(1).toLowerCase() : urlParser.query.roomId.toLowerCase(); const produce = urlParser.query.produce !== 'false'; + let displayName = urlParser.query.displayName; const useSimulcast = urlParser.query.simulcast === 'true'; @@ -94,6 +96,7 @@ function run() // Get displayName from cookie (if not already given as param). const userCookie = cookiesManager.getUser() || {}; + let displayNameSet; if (!displayName) @@ -116,7 +119,14 @@ function run() stateActions.setRoomUrl(roomUrl)); store.dispatch( - stateActions.setMe({ peerName, displayName, displayNameSet, device, loginEnabled: window.config.loginEnabled })); + stateActions.setMe({ + peerName, + displayName, + displayNameSet, + device, + loginEnabled : window.config.loginEnabled + }) + ); roomClient = new RoomClient( { roomId, peerName, displayName, device, useSimulcast, produce }); diff --git a/app/src/serviceWorker.js b/app/src/serviceWorker.js index 6efc24c..b3ebfae 100644 --- a/app/src/serviceWorker.js +++ b/app/src/serviceWorker.js @@ -2,7 +2,7 @@ const isLocalhost = Boolean( window.location.hostname === 'localhost' || window.location.hostname === '[::1]' || window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); @@ -24,12 +24,7 @@ export function register(config) checkValidServiceWorker(swUrl, config); navigator.serviceWorker.ready.then(() => - { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); + {}); } else { @@ -58,30 +53,17 @@ function registerValidSW(swUrl, config) { if (navigator.serviceWorker.controller) { - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - if (config && config.onUpdate) config.onUpdate(registration); } - else - { - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) - config.onSuccess(registration); - } + else if (config && config.onSuccess) + config.onSuccess(registration); } }; }; }) - .catch((error) => - { - console.error('Error during service worker registration:', error); - }); + .catch(() => + {}); } function checkValidServiceWorker(swUrl, config) @@ -90,6 +72,7 @@ function checkValidServiceWorker(swUrl, config) .then((response) => { const contentType = response.headers.get('content-type'); + if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) { @@ -107,11 +90,7 @@ function checkValidServiceWorker(swUrl, config) } }) .catch(() => - { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); + {}); } export function unregister()