Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Lint clean up

master
Håvar Aambø Fosstveit 2019-03-31 22:22:25 +02:00
parent 2f19746fa9
commit 77298b6f2e
19 changed files with 139 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/actions/stateActions.js
View File

@ -52,10 +52,10 @@ export const setAudioSuspended = ({ audioSuspended }) =>
}; };
export const setSettingsOpen = ({ settingsOpen }) => export const setSettingsOpen = ({ settingsOpen }) =>
({ ({
type : 'SET_SETTINGS_OPEN', type : 'SET_SETTINGS_OPEN',
payload : { settingsOpen } payload : { settingsOpen }
}); });
export const setMe = ({ peerName, displayName, displayNameSet, device, loginEnabled }) => export const setMe = ({ peerName, displayName, displayNameSet, device, loginEnabled }) =>
{ {

7
app/src/components/Containers/HiddenPeers.js
View File

@ -30,7 +30,7 @@ const styles = () =>
fontSize : '1.7vmin', fontSize : '1.7vmin',
fontWeight : 'bolder', fontWeight : 'bolder',
animation : 'none', animation : 'none',
'&.pulse' : '&.pulse' :
{ {
animation : 'pulse 0.5s' animation : 'pulse 0.5s'
} }
@ -91,7 +91,10 @@ class HiddenPeers extends React.PureComponent
} = this.props; } = this.props;
return ( return (
<div className={classnames(classes.root, this.state.className)} onClick={() => openUsersTab()}> <div
className={classnames(classes.root, this.state.className)}
onClick={() => openUsersTab()}
>
<p>+{hiddenPeersCount} <br /> participant <p>+{hiddenPeersCount} <br /> participant
{(hiddenPeersCount === 1) ? null : 's'} {(hiddenPeersCount === 1) ? null : 's'}
</p> </p>

22
app/src/components/Containers/Me.js
View File

@ -34,20 +34,20 @@ const styles = () =>
}, },
'&.screen' : '&.screen' :
{ {
order : 1 order : 1
} }
}, },
controls : controls :
{ {
position : 'absolute', position : 'absolute',
right : 0, right : 0,
top : 0, top : 0,
display : 'flex', display : 'flex',
flexDirection : 'row', flexDirection : 'row',
padding : '0.4vmin', padding : '0.4vmin',
zIndex : 20, zIndex : 20,
opacity : 0, opacity : 0,
transition : 'opacity 0.3s', transition : 'opacity 0.3s',
'&.visible' : '&.visible' :
{ {
opacity : 1 opacity : 1
@ -62,7 +62,7 @@ const styles = () =>
width : 'var(--media-control-button-size)', width : 'var(--media-control-button-size)',
height : 'var(--media-control-button-size)', height : 'var(--media-control-button-size)',
backgroundColor : 'var(--media-control-button-color)', backgroundColor : 'var(--media-control-button-color)',
'&:hover' : '&:hover' :
{ {
opacity : 1 opacity : 1
}, },

4
app/src/components/Containers/Peer.js
View File

@ -51,7 +51,7 @@ const styles = () =>
zIndex : 20, zIndex : 20,
opacity : 0, opacity : 0,
transition : 'opacity 0.3s', transition : 'opacity 0.3s',
'&.visible' : '&.visible' :
{ {
opacity : 1 opacity : 1
} }
@ -68,7 +68,7 @@ const styles = () =>
cursor : 'pointer', cursor : 'pointer',
transitionProperty : 'opacity, background-color', transitionProperty : 'opacity, background-color',
transitionDuration : '0.15s', transitionDuration : '0.15s',
'&:hover' : '&:hover' :
{ {
opacity : 1 opacity : 1
}, },

24
app/src/components/MeetingDrawer/Chat/ChatInput.js
View File

@ -41,14 +41,14 @@ class ChatInput extends React.PureComponent
} }
createNewMessage = (text, sender, name, picture) => createNewMessage = (text, sender, name, picture) =>
({ ({
type : 'message', type : 'message',
text, text,
time : Date.now(), time : Date.now(),
name, name,
sender, sender,
picture picture
}); });
handleChange = (e) => handleChange = (e) =>
{ {
@ -121,10 +121,10 @@ ChatInput.propTypes =
}; };
const mapStateToProps = (state) => const mapStateToProps = (state) =>
({ ({
displayName : state.me.displayName, displayName : state.me.displayName,
picture : state.me.picture picture : state.me.picture
}); });
export default withRoomContext( export default withRoomContext(
connect(mapStateToProps)(withStyles(styles)(ChatInput)) connect(mapStateToProps)(withStyles(styles)(ChatInput))

16
app/src/components/MeetingDrawer/Chat/Message.js
View File

@ -26,7 +26,7 @@ const styles = (theme) =>
}, },
selfMessage : selfMessage :
{ {
marginLeft : 'auto', marginLeft : 'auto'
}, },
remoteMessage : remoteMessage :
{ {
@ -48,7 +48,7 @@ const styles = (theme) =>
borderRadius : '50%', borderRadius : '50%',
height : '2rem', height : '2rem',
alignSelf : 'center' alignSelf : 'center'
}, }
}); });
const Message = (props) => const Message = (props) =>
@ -88,12 +88,12 @@ const Message = (props) =>
Message.propTypes = Message.propTypes =
{ {
self : PropTypes.bool, self : PropTypes.bool,
picture : PropTypes.string, picture : PropTypes.string,
text : PropTypes.string, text : PropTypes.string,
time : PropTypes.string, time : PropTypes.string,
name : PropTypes.string, name : PropTypes.string,
classes : PropTypes.object.isRequired classes : PropTypes.object.isRequired
}; };
export default withStyles(styles)(Message); export default withStyles(styles)(Message);

12
app/src/components/MeetingDrawer/Chat/MessageList.js
View File

@ -35,6 +35,7 @@ class MessageList extends React.PureComponent
{ {
if (nextProps.chatmessages.length !== this.props.chatmessages.length) if (nextProps.chatmessages.length !== this.props.chatmessages.length)
return true; return true;
return false; return false;
} }
@ -55,6 +56,7 @@ class MessageList extends React.PureComponent
{ {
const { const {
chatmessages, chatmessages,
myPicture,
classes classes
} = this.props; } = this.props;
@ -66,7 +68,7 @@ class MessageList extends React.PureComponent
const messageTime = new Date(message.time); const messageTime = new Date(message.time);
const picture = (message.sender === 'response' ? const picture = (message.sender === 'response' ?
message.picture : this.props.myPicture) || EmptyAvatar; message.picture : myPicture) || EmptyAvatar;
return ( return (
<Message <Message
@ -88,12 +90,14 @@ class MessageList extends React.PureComponent
MessageList.propTypes = MessageList.propTypes =
{ {
chatmessages : PropTypes.array, chatmessages : PropTypes.array,
myPicture : PropTypes.string,
classes : PropTypes.object.isRequired classes : PropTypes.object.isRequired
}; };
const mapStateToProps = (state) => const mapStateToProps = (state) =>
({ ({
chatmessages : state.chatmessages chatmessages : state.chatmessages,
}); myPicture : state.me.picture
});
export default connect(mapStateToProps, null)(withStyles(styles)(MessageList)); export default connect(mapStateToProps, null)(withStyles(styles)(MessageList));

10
app/src/components/MeetingDrawer/FileSharing/File.js
View File

@ -12,11 +12,11 @@ const styles = (theme) =>
({ ({
root : root :
{ {
display : 'flex', display : 'flex',
alignItems : 'center', alignItems : 'center',
width : '100%', width : '100%',
padding : theme.spacing.unit, 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)', 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)' : '&:not(:last-child)' :
{ {
marginBottom : theme.spacing.unit marginBottom : theme.spacing.unit

8
app/src/components/MeetingDrawer/MeetingDrawer.js
View File

@ -57,16 +57,14 @@ class MeetingDrawer extends React.PureComponent
variant='fullWidth' variant='fullWidth'
> >
<Tab <Tab
label= label={
{
<Badge color='secondary' badgeContent={unreadMessages}> <Badge color='secondary' badgeContent={unreadMessages}>
Chat Chat
</Badge> </Badge>
} }
/> />
<Tab <Tab
label= label={
{
<Badge color='secondary' badgeContent={unreadFiles}> <Badge color='secondary' badgeContent={unreadFiles}>
File sharing File sharing
</Badge> </Badge>
@ -99,7 +97,7 @@ const mapStateToProps = (state) => ({
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
setToolTab : stateActions.setToolTab setToolTab : stateActions.setToolTab
}; };
export default connect( export default connect(

12
app/src/components/MeetingDrawer/ParticipantList/ListMe.js
View File

@ -11,11 +11,11 @@ const styles = () =>
({ ({
root : root :
{ {
padding : '0.5rem', padding : '0.5rem',
width : '100%', width : '100%',
overflow : 'hidden', overflow : 'hidden',
cursor : 'auto', cursor : 'auto',
display : 'flex' display : 'flex'
}, },
listPeer : listPeer :
{ {
@ -68,7 +68,7 @@ const styles = () =>
backgroundImage : `url(${HandIcon})`, backgroundImage : `url(${HandIcon})`,
opacity : 1 opacity : 1
} }
}, }
}); });
const ListMe = (props) => const ListMe = (props) =>

10
app/src/components/MeetingDrawer/ParticipantList/ListPeer.js
View File

@ -16,11 +16,11 @@ const styles = () =>
({ ({
root : root :
{ {
padding : '0.5rem', padding : '0.5rem',
width : '100%', width : '100%',
overflow : 'hidden', overflow : 'hidden',
cursor : 'auto', cursor : 'auto',
display : 'flex' display : 'flex'
}, },
listPeer : listPeer :
{ {

2
app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
View File

@ -36,7 +36,7 @@ const styles = (theme) =>
cursor : 'pointer', cursor : 'pointer',
'&.selected' : '&.selected' :
{ {
backgroundColor: 'rgba(55, 126, 255, 1)' backgroundColor : 'rgba(55, 126, 255, 1)'
}, },
'&:not(:last-child)' : '&:not(:last-child)' :
{ {

4
app/src/components/MeetingViews/Democratic.js
View File

@ -11,7 +11,7 @@ import ResizeObserver from 'resize-observer-polyfill';
const RATIO = 1.334; const RATIO = 1.334;
const PADDING = 100; const PADDING = 100;
const styles = (theme) => const styles = () =>
({ ({
root : root :
{ {
@ -162,7 +162,7 @@ class Democratic extends React.PureComponent
} }
else else
{ {
return(''); return ('');
} }
})} })}
{ spotlightsLength < Object.keys(peers).length ? { spotlightsLength < Object.keys(peers).length ?

12
app/src/components/MeetingViews/Filmstrip.js
View File

@ -9,7 +9,7 @@ import { withRoomContext } from '../../RoomContext';
import Peer from '../Containers/Peer'; import Peer from '../Containers/Peer';
import HiddenPeers from '../Containers/HiddenPeers'; import HiddenPeers from '../Containers/HiddenPeers';
const styles = (theme) => const styles = () =>
({ ({
root : root :
{ {
@ -70,11 +70,11 @@ const styles = (theme) =>
}, },
filmContent : filmContent :
{ {
height : '100%', height : '100%',
width : '100%', width : '100%',
border : '1px solid rgba(255,255,255,0.15)', border : '1px solid rgba(255,255,255,0.15)',
maxWidth : 'calc(18vh * (4 / 3))', maxWidth : 'calc(18vh * (4 / 3))',
cursor : 'pointer', cursor : 'pointer',
'& .screen' : '& .screen' :
{ {
maxWidth : 'calc(18vh * (2 * 4 / 3))', maxWidth : 'calc(18vh * (2 * 4 / 3))',

6
app/src/components/PeerAudio/AudioPeers.js
View File

@ -28,9 +28,9 @@ AudioPeers.propTypes =
}; };
const mapStateToProps = (state) => const mapStateToProps = (state) =>
({ ({
peers : state.peers peers : state.peers
}); });
const AudioPeersContainer = connect( const AudioPeersContainer = connect(
mapStateToProps mapStateToProps

64
app/src/components/VideoContainers/PeerView.js
View File

@ -5,9 +5,9 @@ import { withStyles } from '@material-ui/core/styles';
import * as appPropTypes from '../appPropTypes'; import * as appPropTypes from '../appPropTypes';
import EditableInput from '../Controls/EditableInput'; import EditableInput from '../Controls/EditableInput';
const styles = (theme) => const styles = () =>
({ ({
root: root :
{ {
position : 'relative', position : 'relative',
flex : '100 100 auto', flex : '100 100 auto',
@ -32,7 +32,7 @@ const styles = (theme) =>
transitionProperty : 'opacity', transitionProperty : 'opacity',
transitionDuration : '.15s', transitionDuration : '.15s',
backgroundColor : 'var(--peer-video-bg-color)', backgroundColor : 'var(--peer-video-bg-color)',
'&.is-me' : '&.is-me' :
{ {
transform : 'scaleX(-1)' transform : 'scaleX(-1)'
}, },
@ -71,11 +71,11 @@ const styles = (theme) =>
backgroundColor : 'rgba(0, 0, 0, 0.25)', backgroundColor : 'rgba(0, 0, 0, 0.25)',
'& p' : '& p' :
{ {
userSelect : 'none', userSelect : 'none',
pointerEvents : 'none', pointerEvents : 'none',
margin : 0, margin : 0,
color : 'rgba(255, 255, 255, 0.7)', color : 'rgba(255, 255, 255, 0.7)',
fontSize : 10, fontSize : 10,
'&:last-child' : '&:last-child' :
{ {
@ -108,24 +108,24 @@ const styles = (theme) =>
}, },
displayNameStatic : displayNameStatic :
{ {
userSelect : 'none', userSelect : 'none',
cursor : 'text', cursor : 'text',
fontSize : 14, fontSize : 14,
fontWeight : 400, fontWeight : 400,
color : 'rgba(255, 255, 255, 0.85)', color : 'rgba(255, 255, 255, 0.85)',
'&:hover' : '&:hover' :
{ {
backgroundColor: 'rgb(174, 255, 0, 0.25)' backgroundColor : 'rgb(174, 255, 0, 0.25)'
} }
}, },
deviceInfo : deviceInfo :
{ {
marginTop : '0.4vmin', marginTop : '0.4vmin',
display : 'flex', display : 'flex',
flexDirection : 'row', flexDirection : 'row',
justifyContent : 'flex-start', justifyContent : 'flex-start',
alignItems : 'flex-end', alignItems : 'flex-end',
'& span' : '& span' :
{ {
userSelect : 'none', userSelect : 'none',
pointerEvents : 'none', pointerEvents : 'none',
@ -143,7 +143,7 @@ const styles = (theme) =>
display : 'flex', display : 'flex',
flexDirection : 'column', flexDirection : 'column',
justifyContent : 'center', justifyContent : 'center',
alignItems : 'center', alignItems : 'center'
}, },
volumeBar : volumeBar :
{ {
@ -157,52 +157,52 @@ const styles = (theme) =>
height : 0, height : 0,
backgroundColor : 'rgba(255, 255, 0, 0.65)' backgroundColor : 'rgba(255, 255, 0, 0.65)'
}, },
'&.level1' : '&.level1' :
{ {
height : '10%', height : '10%',
backgroundColor : 'rgba(255, 255, 0, 0.65)' backgroundColor : 'rgba(255, 255, 0, 0.65)'
}, },
'&.level2' : '&.level2' :
{ {
height : '20%', height : '20%',
backgroundColor : 'rgba(255, 255, 0, 0.65)' backgroundColor : 'rgba(255, 255, 0, 0.65)'
}, },
'&.level3' : '&.level3' :
{ {
height : '30%', height : '30%',
backgroundColor : 'rgba(255, 255, 0, 0.65)' backgroundColor : 'rgba(255, 255, 0, 0.65)'
}, },
'&.level4' : '&.level4' :
{ {
height : '40%', height : '40%',
backgroundColor : 'rgba(255, 165, 0, 0.65)' backgroundColor : 'rgba(255, 165, 0, 0.65)'
}, },
'&.level5' : '&.level5' :
{ {
height : '50%', height : '50%',
backgroundColor : 'rgba(255, 165, 0, 0.65)' backgroundColor : 'rgba(255, 165, 0, 0.65)'
}, },
'&.level6' : '&.level6' :
{ {
height : '60%', height : '60%',
backgroundColor : 'rgba(255, 0, 0, 0.65)' backgroundColor : 'rgba(255, 0, 0, 0.65)'
}, },
'&.level7' : '&.level7' :
{ {
height : '70%', height : '70%',
backgroundColor : 'rgba(255, 0, 0, 0.65)' backgroundColor : 'rgba(255, 0, 0, 0.65)'
}, },
'&.level8' : '&.level8' :
{ {
height : '80%', height : '80%',
backgroundColor : 'rgba(0, 0, 0, 0.65)' backgroundColor : 'rgba(0, 0, 0, 0.65)'
}, },
'&.level9' : '&.level9' :
{ {
height : '90%', height : '90%',
backgroundColor : 'rgba(0, 0, 0, 0.65)' backgroundColor : 'rgba(0, 0, 0, 0.65)'
}, },
'&.level10' : '&.level10' :
{ {
height : '100%', height : '100%',
backgroundColor : 'rgba(0, 0, 0, 0.65)' backgroundColor : 'rgba(0, 0, 0, 0.65)'

14
app/src/components/VideoContainers/ScreenView.js
View File

@ -5,7 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
const styles = () => const styles = () =>
({ ({
root: root :
{ {
position : 'relative', position : 'relative',
flex : '100 100 auto', flex : '100 100 auto',
@ -30,7 +30,7 @@ const styles = () =>
transitionProperty : 'opacity', transitionProperty : 'opacity',
transitionDuration : '.15s', transitionDuration : '.15s',
backgroundColor : 'var(--peer-video-bg-color)', backgroundColor : 'var(--peer-video-bg-color)',
'&.is-me' : '&.is-me' :
{ {
transform : 'scaleX(-1)' transform : 'scaleX(-1)'
}, },
@ -69,11 +69,11 @@ const styles = () =>
backgroundColor : 'rgba(0, 0, 0, 0.25)', backgroundColor : 'rgba(0, 0, 0, 0.25)',
'& p' : '& p' :
{ {
userSelect : 'none', userSelect : 'none',
pointerEvents : 'none', pointerEvents : 'none',
margin : 0, margin : 0,
color : 'rgba(255, 255, 255, 0.7)', color : 'rgba(255, 255, 255, 0.7)',
fontSize : 10, fontSize : 10,
'&:last-child' : '&:last-child' :
{ {

12
app/src/index.js
View File

@ -59,9 +59,11 @@ function run()
const peerName = randomString({ length: 8 }).toLowerCase(); const peerName = randomString({ length: 8 }).toLowerCase();
const urlParser = new UrlParse(window.location.href, true); const urlParser = new UrlParse(window.location.href, true);
let roomId = (urlParser.pathname).substr(1) let roomId = (urlParser.pathname).substr(1)
? (urlParser.pathname).substr(1).toLowerCase() : urlParser.query.roomId.toLowerCase(); ? (urlParser.pathname).substr(1).toLowerCase() : urlParser.query.roomId.toLowerCase();
const produce = urlParser.query.produce !== 'false'; const produce = urlParser.query.produce !== 'false';
let displayName = urlParser.query.displayName; let displayName = urlParser.query.displayName;
const useSimulcast = urlParser.query.simulcast === 'true'; const useSimulcast = urlParser.query.simulcast === 'true';
@ -94,6 +96,7 @@ function run()
// Get displayName from cookie (if not already given as param). // Get displayName from cookie (if not already given as param).
const userCookie = cookiesManager.getUser() || {}; const userCookie = cookiesManager.getUser() || {};
let displayNameSet; let displayNameSet;
if (!displayName) if (!displayName)
@ -116,7 +119,14 @@ function run()
stateActions.setRoomUrl(roomUrl)); stateActions.setRoomUrl(roomUrl));
store.dispatch( 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( roomClient = new RoomClient(
{ roomId, peerName, displayName, device, useSimulcast, produce }); { roomId, peerName, displayName, device, useSimulcast, produce });

37
app/src/serviceWorker.js
View File

@ -2,7 +2,7 @@ const isLocalhost = Boolean(
window.location.hostname === 'localhost' || window.location.hostname === 'localhost' ||
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
window.location.hostname.match( 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); checkValidServiceWorker(swUrl, config);
navigator.serviceWorker.ready.then(() => 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 else
{ {
@ -58,30 +53,17 @@ function registerValidSW(swUrl, config)
{ {
if (navigator.serviceWorker.controller) 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) if (config && config.onUpdate)
config.onUpdate(registration); config.onUpdate(registration);
} }
else else if (config && config.onSuccess)
{ config.onSuccess(registration);
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess)
config.onSuccess(registration);
}
} }
}; };
}; };
}) })
.catch((error) => .catch(() =>
{ {});
console.error('Error during service worker registration:', error);
});
} }
function checkValidServiceWorker(swUrl, config) function checkValidServiceWorker(swUrl, config)
@ -90,6 +72,7 @@ function checkValidServiceWorker(swUrl, config)
.then((response) => .then((response) =>
{ {
const contentType = response.headers.get('content-type'); const contentType = response.headers.get('content-type');
if (response.status === 404 || if (response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)) (contentType != null && contentType.indexOf('javascript') === -1))
{ {
@ -107,11 +90,7 @@ function checkValidServiceWorker(swUrl, config)
} }
}) })
.catch(() => .catch(() =>
{ {});
console.log(
'No internet connection found. App is running in offline mode.'
);
});
} }
export function unregister() export function unregister()