diff --git a/app/lib/RoomClient.js b/app/lib/RoomClient.js index fe54c3b..6700f5a 100644 --- a/app/lib/RoomClient.js +++ b/app/lib/RoomClient.js @@ -365,11 +365,9 @@ export default class RoomClient { if (err) { - return this.props.notify({ - text : 'An error occurred while saving a file' - }); + return this.notify('An error occurred while saving a file'); } - + saveAs(blob, file.name); }); } @@ -396,23 +394,27 @@ export default class RoomClient // same file was sent multiple times. if (torrent.progress === 1) { - - store.dispatch( + return store.dispatch( stateActions.setFileDone( torrent.magnetURI, torrent.files )); - - return; } + let lastMove = 0; + torrent.on('download', () => { - store.dispatch( - stateActions.setFileProgress( - torrent.magnetURI, - torrent.progress - )); + if (Date.now() - lastMove > 1000) + { + store.dispatch( + stateActions.setFileProgress( + torrent.magnetURI, + torrent.progress + )); + + lastMove = Date.now(); + } }); torrent.on('done', () => diff --git a/app/lib/components/HiddenPeers.jsx b/app/lib/components/Containers/HiddenPeers.jsx similarity index 71% rename from app/lib/components/HiddenPeers.jsx rename to app/lib/components/Containers/HiddenPeers.jsx index 5c34d70..595a838 100644 --- a/app/lib/components/HiddenPeers.jsx +++ b/app/lib/components/Containers/HiddenPeers.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import * as stateActions from '../redux/stateActions'; +import * as stateActions from '../../redux/stateActions'; class HiddenPeers extends Component { @@ -29,7 +29,7 @@ class HiddenPeers extends Component this.timeout = setTimeout(() => { this.setState({ className: '' }); - }, 2000); + }, 500); }); } } @@ -42,18 +42,11 @@ class HiddenPeers extends Component } = this.props; return ( -
-
-
openUsersTab()}> -

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

-
+
+
openUsersTab()}> +

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

); diff --git a/app/lib/components/Me.jsx b/app/lib/components/Containers/Me.jsx similarity index 96% rename from app/lib/components/Me.jsx rename to app/lib/components/Containers/Me.jsx index 9d0e60b..673cd52 100644 --- a/app/lib/components/Me.jsx +++ b/app/lib/components/Containers/Me.jsx @@ -4,10 +4,10 @@ import ReactTooltip from 'react-tooltip'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { getDeviceInfo } from 'mediasoup-client'; -import * as appPropTypes from './appPropTypes'; -import { withRoomContext } from '../RoomContext'; -import PeerView from './PeerView'; -import ScreenView from './ScreenView'; +import * as appPropTypes from '../appPropTypes'; +import { withRoomContext } from '../../RoomContext'; +import PeerView from '../VideoContainers/PeerView'; +import ScreenView from '../VideoContainers/ScreenView'; class Me extends React.Component { diff --git a/app/lib/components/Peer.jsx b/app/lib/components/Containers/Peer.jsx similarity index 90% rename from app/lib/components/Peer.jsx rename to app/lib/components/Containers/Peer.jsx index 214d374..cb54edc 100644 --- a/app/lib/components/Peer.jsx +++ b/app/lib/components/Containers/Peer.jsx @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import * as appPropTypes from './appPropTypes'; -import { withRoomContext } from '../RoomContext'; -import * as stateActions from '../redux/stateActions'; -import PeerView from './PeerView'; -import ScreenView from './ScreenView'; +import * as appPropTypes from '../appPropTypes'; +import { withRoomContext } from '../../RoomContext'; +import * as stateActions from '../../redux/stateActions'; +import PeerView from '../VideoContainers/PeerView'; +import ScreenView from '../VideoContainers/ScreenView'; class Peer extends Component { @@ -139,7 +139,9 @@ class Peer extends Component />
{ e.stopPropagation(); @@ -168,7 +170,10 @@ class Peer extends Component })} >
{ e.stopPropagation(); @@ -177,7 +182,9 @@ class Peer extends Component />
{ e.stopPropagation(); diff --git a/app/lib/components/EditableInput.jsx b/app/lib/components/Controls/EditableInput.jsx similarity index 100% rename from app/lib/components/EditableInput.jsx rename to app/lib/components/Controls/EditableInput.jsx diff --git a/app/lib/components/Sidebar.jsx b/app/lib/components/Controls/Sidebar.jsx similarity index 96% rename from app/lib/components/Sidebar.jsx rename to app/lib/components/Controls/Sidebar.jsx index c2f5b6c..473c523 100644 --- a/app/lib/components/Sidebar.jsx +++ b/app/lib/components/Controls/Sidebar.jsx @@ -2,9 +2,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import classnames from 'classnames'; -import * as appPropTypes from './appPropTypes'; -import { withRoomContext } from '../RoomContext'; -import FullScreen from './FullScreen'; +import * as appPropTypes from '../appPropTypes'; +import { withRoomContext } from '../../RoomContext'; +import FullScreen from '../FullScreen'; class Sidebar extends Component { diff --git a/app/lib/components/Filmstrip.jsx b/app/lib/components/Layouts/Filmstrip.jsx similarity index 97% rename from app/lib/components/Filmstrip.jsx rename to app/lib/components/Layouts/Filmstrip.jsx index 9ebe692..f5b1916 100644 --- a/app/lib/components/Filmstrip.jsx +++ b/app/lib/components/Layouts/Filmstrip.jsx @@ -4,9 +4,9 @@ import ResizeObserver from 'resize-observer-polyfill'; import { connect } from 'react-redux'; import debounce from 'lodash/debounce'; import classnames from 'classnames'; -import { withRoomContext } from '../RoomContext'; -import Peer from './Peer'; -import HiddenPeers from './HiddenPeers'; +import { withRoomContext } from '../../RoomContext'; +import Peer from '../Containers/Peer'; +import HiddenPeers from '../Containers/HiddenPeers'; class Filmstrip extends Component { diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Layouts/Peers.jsx similarity index 92% rename from app/lib/components/Peers.jsx rename to app/lib/components/Layouts/Peers.jsx index 840c371..573d277 100644 --- a/app/lib/components/Peers.jsx +++ b/app/lib/components/Layouts/Peers.jsx @@ -3,9 +3,9 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import debounce from 'lodash/debounce'; -import { Appear } from './transitions'; -import Peer from './Peer'; -import HiddenPeers from './HiddenPeers'; +import { Appear } from '../transitions'; +import Peer from '../Containers/Peer'; +import HiddenPeers from '../Containers/HiddenPeers'; import ResizeObserver from 'resize-observer-polyfill'; const RATIO = 1.334; @@ -129,9 +129,9 @@ class Peers extends React.Component } })}
- +
diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx index 63ab009..12fd006 100644 --- a/app/lib/components/Room.jsx +++ b/app/lib/components/Room.jsx @@ -9,17 +9,17 @@ import * as appPropTypes from './appPropTypes'; import * as requestActions from '../redux/requestActions'; import * as stateActions from '../redux/stateActions'; import { Appear } from './transitions'; -import Me from './Me'; -import Peers from './Peers'; +import Me from './Containers/Me'; +import Peers from './Layouts/Peers'; import AudioPeers from './PeerAudio/AudioPeers'; import Notifications from './Notifications'; import ToolArea from './ToolArea/ToolArea'; -import FullScreenView from './FullScreenView'; +import FullScreenView from './VideoContainers/FullScreenView'; import VideoWindow from './VideoWindow/VideoWindow'; import Draggable from 'react-draggable'; import { idle } from '../utils'; -import Sidebar from './Sidebar'; -import Filmstrip from './Filmstrip'; +import Sidebar from './Controls/Sidebar'; +import Filmstrip from './Layouts/Filmstrip'; // Hide toolbars after 10 seconds of inactivity. const TIMEOUT = 10 * 1000; diff --git a/app/lib/components/Chat/Chat.jsx b/app/lib/components/ToolArea/Chat/Chat.jsx similarity index 97% rename from app/lib/components/Chat/Chat.jsx rename to app/lib/components/ToolArea/Chat/Chat.jsx index 364df65..7320ddd 100644 --- a/app/lib/components/Chat/Chat.jsx +++ b/app/lib/components/ToolArea/Chat/Chat.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; -import { withRoomContext } from '../../RoomContext'; +import { withRoomContext } from '../../../RoomContext'; import MessageList from './MessageList'; class Chat extends Component diff --git a/app/lib/components/Chat/MessageList.jsx b/app/lib/components/ToolArea/Chat/MessageList.jsx similarity index 97% rename from app/lib/components/Chat/MessageList.jsx rename to app/lib/components/ToolArea/Chat/MessageList.jsx index 831cddf..66d4eda 100644 --- a/app/lib/components/Chat/MessageList.jsx +++ b/app/lib/components/ToolArea/Chat/MessageList.jsx @@ -3,7 +3,7 @@ import { compose } from 'redux'; import PropTypes from 'prop-types'; import marked from 'marked'; import { connect } from 'react-redux'; -import scrollToBottom from './scrollToBottom'; +import scrollToBottom from '../scrollToBottom'; const linkRenderer = new marked.Renderer(); diff --git a/app/lib/components/FileSharing/DragDropSharing.jsx b/app/lib/components/ToolArea/FileSharing/DragDropSharing.jsx similarity index 100% rename from app/lib/components/FileSharing/DragDropSharing.jsx rename to app/lib/components/ToolArea/FileSharing/DragDropSharing.jsx diff --git a/app/lib/components/FileSharing/File.jsx b/app/lib/components/ToolArea/FileSharing/File.jsx similarity index 97% rename from app/lib/components/FileSharing/File.jsx rename to app/lib/components/ToolArea/FileSharing/File.jsx index 96f15d6..08a9db3 100644 --- a/app/lib/components/FileSharing/File.jsx +++ b/app/lib/components/ToolArea/FileSharing/File.jsx @@ -1,7 +1,7 @@ import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import { withRoomContext } from '../../RoomContext'; +import { withRoomContext } from '../../../RoomContext'; import magnet from 'magnet-uri'; const DEFAULT_PICTURE = 'resources/images/avatar-empty.jpeg'; diff --git a/app/lib/components/FileSharing/FileList.jsx b/app/lib/components/ToolArea/FileSharing/FileList.jsx similarity index 92% rename from app/lib/components/FileSharing/FileList.jsx rename to app/lib/components/ToolArea/FileSharing/FileList.jsx index 9215e3a..6028a9e 100644 --- a/app/lib/components/FileSharing/FileList.jsx +++ b/app/lib/components/ToolArea/FileSharing/FileList.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { compose } from 'redux'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; -import scrollToBottom from '../Chat/scrollToBottom'; +import scrollToBottom from '../scrollToBottom'; import File from './File'; class FileList extends Component diff --git a/app/lib/components/FileSharing/FileSharing.jsx b/app/lib/components/ToolArea/FileSharing/FileSharing.jsx similarity index 96% rename from app/lib/components/FileSharing/FileSharing.jsx rename to app/lib/components/ToolArea/FileSharing/FileSharing.jsx index 84fccac..60574c2 100644 --- a/app/lib/components/FileSharing/FileSharing.jsx +++ b/app/lib/components/ToolArea/FileSharing/FileSharing.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import classNames from 'classnames'; -import { withRoomContext } from '../../RoomContext'; +import { withRoomContext } from '../../../RoomContext'; import FileList from './FileList'; class FileSharing extends Component diff --git a/app/lib/components/ParticipantList/ListMe.jsx b/app/lib/components/ToolArea/ParticipantList/ListMe.jsx similarity index 94% rename from app/lib/components/ParticipantList/ListMe.jsx rename to app/lib/components/ToolArea/ParticipantList/ListMe.jsx index 460c738..b600ebd 100644 --- a/app/lib/components/ParticipantList/ListMe.jsx +++ b/app/lib/components/ToolArea/ParticipantList/ListMe.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { connect } from 'react-redux'; -import { Me } from '../appPropTypes'; +import { Me } from '../../appPropTypes'; const ListMe = ({ me }) => { diff --git a/app/lib/components/ParticipantList/ListPeer.jsx b/app/lib/components/ToolArea/ParticipantList/ListPeer.jsx similarity index 96% rename from app/lib/components/ParticipantList/ListPeer.jsx rename to app/lib/components/ToolArea/ParticipantList/ListPeer.jsx index abb56b7..577d6b5 100644 --- a/app/lib/components/ParticipantList/ListPeer.jsx +++ b/app/lib/components/ToolArea/ParticipantList/ListPeer.jsx @@ -2,8 +2,8 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import * as appPropTypes from '../appPropTypes'; -import { withRoomContext } from '../../RoomContext'; +import * as appPropTypes from '../../appPropTypes'; +import { withRoomContext } from '../../../RoomContext'; const ListPeer = (props) => { diff --git a/app/lib/components/ParticipantList/ParticipantList.jsx b/app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx similarity index 95% rename from app/lib/components/ParticipantList/ParticipantList.jsx rename to app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx index da90e3d..5537542 100644 --- a/app/lib/components/ParticipantList/ParticipantList.jsx +++ b/app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; import classNames from 'classnames'; -import * as appPropTypes from '../appPropTypes'; -import { withRoomContext } from '../../RoomContext'; +import * as appPropTypes from '../../appPropTypes'; +import { withRoomContext } from '../../../RoomContext'; import PropTypes from 'prop-types'; import ListPeer from './ListPeer'; import ListMe from './ListMe'; diff --git a/app/lib/components/Settings.jsx b/app/lib/components/ToolArea/Settings/Settings.jsx similarity index 56% rename from app/lib/components/Settings.jsx rename to app/lib/components/ToolArea/Settings/Settings.jsx index ccacc9b..12bddfe 100644 --- a/app/lib/components/Settings.jsx +++ b/app/lib/components/ToolArea/Settings/Settings.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { connect } from 'react-redux'; -import * as appPropTypes from './appPropTypes'; -import { withRoomContext } from '../RoomContext'; -import * as stateActions from '../redux/stateActions'; +import * as appPropTypes from '../../appPropTypes'; +import { withRoomContext } from '../../../RoomContext'; +import * as stateActions from '../../../redux/stateActions'; import PropTypes from 'prop-types'; import Dropdown from 'react-dropdown'; import ReactTooltip from 'react-tooltip'; @@ -46,50 +46,48 @@ const Settings = ({ audioDevices = []; return ( -
-
- roomClient.changeWebcam(webcam.value)} - placeholder={'Select camera'} - /> +
+ roomClient.changeWebcam(webcam.value)} + placeholder={'Select camera'} + /> - roomClient.changeAudioDevice(device.value)} - placeholder={audioDevicesText} + roomClient.changeAudioDevice(device.value)} + placeholder={audioDevicesText} + /> + +
+ - -
- - -
+ +
-
- handleChangeMode(mode.value)} - /> -
+
+ handleChangeMode(mode.value)} + />
); diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx index dfbf2a3..84355e0 100644 --- a/app/lib/components/ToolArea/ToolArea.jsx +++ b/app/lib/components/ToolArea/ToolArea.jsx @@ -3,10 +3,10 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import * as stateActions from '../../redux/stateActions'; -import ParticipantList from '../ParticipantList/ParticipantList'; -import Chat from '../Chat/Chat'; -import Settings from '../Settings'; -import FileSharing from '../FileSharing/FileSharing'; +import ParticipantList from './ParticipantList/ParticipantList'; +import Chat from './Chat/Chat'; +import Settings from './Settings/Settings'; +import FileSharing from './FileSharing/FileSharing'; import TabHeader from './TabHeader'; class ToolArea extends React.Component diff --git a/app/lib/components/Chat/scrollToBottom.jsx b/app/lib/components/ToolArea/scrollToBottom.jsx similarity index 100% rename from app/lib/components/Chat/scrollToBottom.jsx rename to app/lib/components/ToolArea/scrollToBottom.jsx diff --git a/app/lib/components/FullScreenView.jsx b/app/lib/components/VideoContainers/FullScreenView.jsx similarity index 94% rename from app/lib/components/FullScreenView.jsx rename to app/lib/components/VideoContainers/FullScreenView.jsx index 2f9e7ab..e60f346 100644 --- a/app/lib/components/FullScreenView.jsx +++ b/app/lib/components/VideoContainers/FullScreenView.jsx @@ -2,8 +2,8 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import * as appPropTypes from './appPropTypes'; -import * as stateActions from '../redux/stateActions'; +import * as appPropTypes from '../appPropTypes'; +import * as stateActions from '../../redux/stateActions'; import FullView from './FullView'; const FullScreenView = (props) => diff --git a/app/lib/components/FullView.jsx b/app/lib/components/VideoContainers/FullView.jsx similarity index 88% rename from app/lib/components/FullView.jsx rename to app/lib/components/VideoContainers/FullView.jsx index a608ab7..24faf2b 100644 --- a/app/lib/components/FullView.jsx +++ b/app/lib/components/VideoContainers/FullView.jsx @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Spinner from 'react-spinner'; export default class FullView extends React.Component { @@ -34,12 +33,6 @@ export default class FullView extends React.Component autoPlay muted={Boolean(true)} /> - - -
- -
-
); } diff --git a/app/lib/components/PeerView.jsx b/app/lib/components/VideoContainers/PeerView.jsx similarity index 94% rename from app/lib/components/PeerView.jsx rename to app/lib/components/VideoContainers/PeerView.jsx index 2289442..c428634 100644 --- a/app/lib/components/PeerView.jsx +++ b/app/lib/components/VideoContainers/PeerView.jsx @@ -1,9 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Spinner from 'react-spinner'; -import * as appPropTypes from './appPropTypes'; -import EditableInput from './EditableInput'; +import * as appPropTypes from '../appPropTypes'; +import EditableInput from '../Controls/EditableInput'; export default class PeerView extends React.Component { @@ -122,12 +121,6 @@ export default class PeerView extends React.Component
- - -
- -
-
); } diff --git a/app/lib/components/ScreenView.jsx b/app/lib/components/VideoContainers/ScreenView.jsx similarity index 94% rename from app/lib/components/ScreenView.jsx rename to app/lib/components/VideoContainers/ScreenView.jsx index 49cc2f1..72dc031 100644 --- a/app/lib/components/ScreenView.jsx +++ b/app/lib/components/VideoContainers/ScreenView.jsx @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Spinner from 'react-spinner'; export default class ScreenView extends React.Component { @@ -68,12 +67,6 @@ export default class ScreenView extends React.Component autoPlay muted={Boolean(true)} /> - - -
- -
-
); } diff --git a/app/lib/components/VideoWindow/VideoWindow.jsx b/app/lib/components/VideoWindow/VideoWindow.jsx index c5a4a56..ce5ab01 100644 --- a/app/lib/components/VideoWindow/VideoWindow.jsx +++ b/app/lib/components/VideoWindow/VideoWindow.jsx @@ -4,7 +4,7 @@ import NewWindow from './NewWindow'; import PropTypes from 'prop-types'; import * as appPropTypes from '../appPropTypes'; import * as stateActions from '../../redux/stateActions'; -import FullView from '../FullView'; +import FullView from '../VideoContainers/FullView'; const VideoWindow = (props) => { diff --git a/app/stylus/components/Chat.styl b/app/stylus/components/Chat.styl index b6a480d..c495496 100644 --- a/app/stylus/components/Chat.styl +++ b/app/stylus/components/Chat.styl @@ -23,7 +23,7 @@ } > .client, > .response { - background-color: rgba(#000, 0.1); + background-color: var(--chat-message-color); border-radius: 5px; max-width: 85%; display: flex; @@ -70,8 +70,8 @@ [data-component='Sender'] { display: flex; - background-color: #fff; - color: #000; + background-color: var(--chat-input-bg-color); + color: var(--chat-input-text-color); flex-shrink: 0; margin-top: 0.5rem; height: 3rem; @@ -84,7 +84,6 @@ margin-right: 1vmin; border-radius: 0.5vmin; padding-left: 1vmin; - color: #000; &.focus { outline: none; @@ -95,8 +94,7 @@ width: 20%; box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5); border: 0; - background-color: #aef; - color: #000; + background-color: var(--chat-send-bg-color); font-size: 1rem; border-radius: 0.5vmin; } diff --git a/app/stylus/components/FileSharing.styl b/app/stylus/components/FileSharing.styl index 1bf88fa..9019bdb 100644 --- a/app/stylus/components/FileSharing.styl +++ b/app/stylus/components/FileSharing.styl @@ -7,11 +7,15 @@ > .share-file { cursor: pointer; width: 100%; - background: #aef; + background: var(--filesharing-bg-color); padding: 1rem; border-radius: 1vmin; box-shadow: 0vmin 0vmin 1vmin 0vmin rgba(17,17,17,0.5); + &:hover { + opacity: 0.85; + } + &.disabled { cursor: not-allowed; } diff --git a/app/stylus/components/Filmstrip.styl b/app/stylus/components/Filmstrip.styl index 5753049..ab92a9f 100644 --- a/app/stylus/components/Filmstrip.styl +++ b/app/stylus/components/Filmstrip.styl @@ -63,13 +63,13 @@ &.active { > .film-content { - border-color: #FFF; + border-color: var(--active-speaker-border-color); } } &.selected { > .film-content { - border-color: #377EFF; + border-color: var(--selected-peer-border-color); } } } diff --git a/app/stylus/components/FullView.styl b/app/stylus/components/FullView.styl index 251a04a..8c5b799 100644 --- a/app/stylus/components/FullView.styl +++ b/app/stylus/components/FullView.styl @@ -69,37 +69,4 @@ filter: blur(5px); } } - - > .spinner-container { - position: absolute; - top: 0 - bottom: 0; - left: 0; - right: 0; - background-color: rgba(#000, 0.75); - - .react-spinner { - position: relative; - width: 48px; - height: 48px; - top: 50%; - left: 50%; - - .react-spinner_bar { - position: absolute; - width: 20%; - height: 7.8%; - top: -3.9%; - left: -10%; - animation: PeerView-spinner 1.2s linear infinite; - border-radius: 5px; - background-color: rgba(#fff, 0.5); - } - } - } -} - -@keyframes FullView-spinner { - 0% { opacity: 1; } - 100% { opacity: 0.15; } } diff --git a/app/stylus/components/HiddenPeersView.styl b/app/stylus/components/HiddenPeers.styl similarity index 53% rename from app/stylus/components/HiddenPeersView.styl rename to app/stylus/components/HiddenPeers.styl index b87ddf0..6ca7ec8 100644 --- a/app/stylus/components/HiddenPeersView.styl +++ b/app/stylus/components/HiddenPeers.styl @@ -1,4 +1,4 @@ -[data-component='HiddenPeersView'] { +[data-component='HiddenPeers'] { height: 100%; width: 100%; display: flex; @@ -31,6 +31,8 @@ background-position: bottom; background-size: auto 85%; background-repeat: no-repeat; + border: var(--peer-border); + box-shadow: var(--peer-shadow); text-align: center; vertical-align: middle; line-height: 1.8vmin; @@ -39,55 +41,28 @@ animation: none; &.pulse { - animation: pulse 2s; + animation: pulse 0.5s; } } .view-container>p{ transform: translate(0%,50%); } - - .view-container, - .view-container::before, - .view-container::after { - /* Add shadow to distinguish sheets from one another */ - box-shadow: 2px 1px 1px rgba(0,0,0,0.15); - } - - .view-container::before, - .view-container::after { - content: ""; - position: absolute; - width: 100%; - height: 100%; - background-color: #2a4b58; - } - - /* Second sheet of paper */ - .view-container::before { - left: .7vmin; - top: .7vmin; - z-index: -1; - } - - /* Third sheet of paper */ - .view-container::after { - left: 1.4vmin; - top: 1.4vmin; - z-index: -2; - } } @keyframes pulse { - 0% { - box-shadow: 0 0 0 0 rgba(255, 255, 255, 1.0); + 0% + { + transform: scale3d(1, 1, 1); } - 70% { - box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); + 50% + { + transform: scale3d(1.2, 1.2, 1.2); } - 100% { - box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); + 100% + { + transform: scale3d(1, 1, 1); } } diff --git a/app/stylus/components/Logo.styl b/app/stylus/components/Logo.styl index b52cabc..f34410a 100644 --- a/app/stylus/components/Logo.styl +++ b/app/stylus/components/Logo.styl @@ -1,19 +1,18 @@ [data-component='Logo'] { - position: absolute; - height: 4%; - width: 8%; + position: absolute; + width: var(--logo-width); + height: var(--logo-height); top: 1%; left: 1%; z-index: 20; background-position: left; background-size: 100%; background-repeat: no-repeat; + +desktop() { opacity: 1; } - +mobile() { - } - background-image: url('/resources/images/logo.svg'); + background-image: var(--logo); background-size: contain; } diff --git a/app/stylus/components/Me.styl b/app/stylus/components/Me.styl index 2d70e8f..d4b0a26 100644 --- a/app/stylus/components/Me.styl +++ b/app/stylus/components/Me.styl @@ -6,8 +6,8 @@ > .view-container { position: relative; - width: 20vmin; - height: 15vmin; + width: var(--me-width); + height: var(--me-height); &.webcam { order: 2; @@ -23,9 +23,7 @@ right: 0; top: 0; display: flex; - flex-direction:; row; - justify-content: flex-start; - align-items: center; + flex-direction: row; padding: 0.4vmin; opacity: 0; transition: opacity 0.3s; @@ -41,41 +39,37 @@ background-position: center; background-size: 75%; background-repeat: no-repeat; - background-color: rgba(#000, 0.5); + background-color: var(--media-control-button-color); cursor: pointer; opacity: 0; transition-property: opacity, background-color; transition-duration: 0.15s; + width: var(--media-control-button-size); + height: var(--media-control-button-size); + + &:hover { + opacity: 1; + } &.visible { opacity: 0.85; } - +desktop() { - width: 24px; - height: 24px; - - &:hover { - opacity: 1; - } - } - - +mobile() { - width: 22px; - height: 22px; - } - &.unsupported { pointer-events: none; } &.disabled { pointer-events: none; - opacity: 0.5; + background-color: var(--media-control-botton-disabled); } &.on { - background-color: rgba(#fff, 0.7); + background-color: var(--media-control-botton-on); + } + + &.off { + background-color: var(--media-control-botton-off); } &.mic { @@ -85,7 +79,6 @@ &.off { background-image: url('/resources/images/icon_remote_mic_white_off.svg'); - background-color: rgba(#d42241, 0.7); } &.unsupported { @@ -100,33 +93,12 @@ &.off { background-image: url('/resources/images/icon_remote_webcam_white_off.svg'); - background-color: rgba(#d42241, 0.7); } &.unsupported { background-image: url('/resources/images/icon_webcam_white_unsupported.svg'); } } - - &.screen { - &.on { - background-image: url('/resources/images/share-screen-black.svg'); - } - - &.off { - background-image: url('/resources/images/no-share-screen-white.svg'); - background-color: rgba(#d42241, 0.7); - } - - &.unsupported { - background-image: url('/resources/images/no-share-screen-white.svg'); - } - } - - &.fullscreen { - background-image: url('/resources/images/icon_fullscreen_black.svg'); - background-color: rgba(#fff, 0.7); - } } } } diff --git a/app/stylus/components/Notifications.styl b/app/stylus/components/Notifications.styl index b247cb7..fcaeded 100644 --- a/app/stylus/components/Notifications.styl +++ b/app/stylus/components/Notifications.styl @@ -84,8 +84,8 @@ } &.info { - background-color: rgba(#0a1d26, 0.75); - color: rgba(#fff, 0.65); + background-color: var(--notification-info-bg-color); + color: var(--notification-info-text-color); >.icon { opacity: 0.65; @@ -94,8 +94,8 @@ } &.error { - background-color: rgba(#ff1914, 0.65); - color: rgba(#fff, 0.85); + background-color: var(--notification-error-bg-color); + color: var(--notification-error-text-color); >.icon { opacity: 0.85; diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl index 06ea717..fefa8da 100644 --- a/app/stylus/components/ParticipantList.styl +++ b/app/stylus/components/ParticipantList.styl @@ -51,20 +51,12 @@ background-color: rgba(#000, 0.5); transition-property: opacity, background-color; transition-duration: 0.15s; + width: var(--media-control-button-size); + height: var(--media-control-button-size); + opacity: 0.85; - +desktop() { - width: 24px; - height: 24px; - opacity: 0.85; - - &:hover { - opacity: 1; - } - } - - +mobile() { - width: 22px; - height: 22px; + &:hover { + opacity: 1; } &.on { @@ -102,19 +94,20 @@ position: absolute; bottom: 0px; - &.level0 { height: 0; background-color: rgba(#000, 0.8); } - &.level1 { height: 0.2vh; background-color: rgba(#000, 0.8); } - &.level2 { height: 0.4vh; background-color: rgba(#000, 0.8); } - &.level3 { height: 0.6vh; background-color: rgba(#000, 0.8); } - &.level4 { height: 0.8vh; background-color: rgba(#000, 0.8); } - &.level5 { height: 1.0vh; background-color: rgba(#000, 0.8); } - &.level6 { height: 1.2vh; background-color: rgba(#000, 0.8); } - &.level7 { height: 1.4vh; background-color: rgba(#000, 0.8); } - &.level8 { height: 1.6vh; background-color: rgba(#000, 0.8); } - &.level9 { height: 1.8vh; background-color: rgba(#000, 0.8); } - &.level10 { height: 2.0vh; background-color: rgba(#000, 0.8); } + &.level0 { height: 0; } + &.level1 { height: 0.2vh; } + &.level2 { height: 0.4vh; } + &.level3 { height: 0.6vh; } + &.level4 { height: 0.8vh; } + &.level5 { height: 1.0vh; } + &.level6 { height: 1.2vh; } + &.level7 { height: 1.4vh; } + &.level8 { height: 1.6vh; } + &.level9 { height: 1.8vh; } + &.level10 { height: 2.0vh; } } } + > .controls { float: right; display: flex; @@ -133,20 +126,12 @@ cursor: pointer; transition-property: opacity, background-color; transition-duration: 0.15s; + width: var(--media-control-button-size); + height: var(--media-control-button-size); + opacity: 0.85; - +desktop() { - width: 24px; - height: 24px; - opacity: 0.85; - - &:hover { - opacity: 1; - } - } - - +mobile() { - width: 22px; - height: 22px; + &:hover { + opacity: 1; } &.unsupported { @@ -155,11 +140,15 @@ &.disabled { pointer-events: none; - opacity: 0.5; + background-color: var(--media-control-botton-disabled); } &.on { - background-color: rgba(#fff, 0.7); + background-color: var(--media-control-botton-on); + } + + &.off { + background-color: var(--media-control-botton-off); } &.mic { @@ -169,7 +158,6 @@ &.off { background-image: url('/resources/images/icon_remote_mic_white_off.svg'); - background-color: rgba(#d42241, 0.7); } &.unsupported { @@ -184,7 +172,6 @@ &.off { background-image: url('/resources/images/icon_remote_webcam_white_off.svg'); - background-color: rgba(#d42241, 0.7); } &.unsupported { @@ -199,7 +186,6 @@ &.off { background-image: url('/resources/images/no-share-screen-white.svg'); - background-color: rgba(#d42241, 0.7); } &.unsupported { @@ -210,16 +196,16 @@ } > .avatar { - border-radius: 50%; - height: 2rem; + border-radius: 50%; + height: 2rem; } > .peer-info { - font-size: 1rem; - border: none; - display: flex; - padding-left: 0.5rem; - flex-grow: 1; - align-items: center; + font-size: 1rem; + border: none; + display: flex; + padding-left: 0.5rem; + flex-grow: 1; + align-items: center; } } diff --git a/app/stylus/components/Peer.styl b/app/stylus/components/Peer.styl index 9e38042..b90be85 100644 --- a/app/stylus/components/Peer.styl +++ b/app/stylus/components/Peer.styl @@ -54,20 +54,12 @@ background-color: rgba(#000, 0.5); transition-property: opacity, background-color; transition-duration: 0.15s; + width: var(--media-control-button-size); + height: var(--media-control-button-size); + opacity: 0.85; - +desktop() { - width: 24px; - height: 24px; - opacity: 0.85; - - &:hover { - opacity: 1; - } - } - - +mobile() { - width: 22px; - height: 22px; + &:hover { + opacity: 1; } &.on { @@ -107,24 +99,16 @@ background-position: center; background-size: 75%; background-repeat: no-repeat; - background-color: rgba(#000, 0.5); + background-color: var(--media-control-button-color); cursor: pointer; transition-property: opacity, background-color; transition-duration: 0.15s; + width: var(--media-control-button-size); + height: var(--media-control-button-size); + opacity: 0.85; - +desktop() { - width: 24px; - height: 24px; - opacity: 0.85; - - &:hover { - opacity: 1; - } - } - - +mobile() { - width: 22px; - height: 22px; + &:hover { + opacity: 1; } &.unsupported { @@ -133,11 +117,15 @@ &.disabled { pointer-events: none; - opacity: 0.5; + background-color: var(--media-control-botton-disabled); } &.on { - background-color: rgba(#fff, 0.7); + background-color: var(--media-control-botton-on); + } + + &.off { + background-color: var(--media-control-botton-off); } &.mic { @@ -147,7 +135,6 @@ &.off { background-image: url('/resources/images/icon_remote_mic_white_off.svg'); - background-color: rgba(#d42241, 0.7); } &.unsupported { @@ -155,21 +142,6 @@ } } - &.webcam { - &.on { - background-image: url('/resources/images/icon_webcam_black_on.svg'); - } - - &.off { - background-image: url('/resources/images/icon_remote_webcam_white_off.svg'); - background-color: rgba(#d42241, 0.7); - } - - &.unsupported { - background-image: url('/resources/images/icon_webcam_white_unsupported.svg'); - } - } - &.screen { &.on { background-image: url('/resources/images/share-screen-black.svg'); @@ -177,7 +149,6 @@ &.off { background-image: url('/resources/images/no-share-screen-white.svg'); - background-color: rgba(#d42241, 0.7); } &.unsupported { @@ -187,12 +158,10 @@ &.fullscreen { background-image: url('/resources/images/icon_fullscreen_black.svg'); - background-color: rgba(#fff, 0.7); } &.newwindow { background-image: url('/resources/images/icon_new_window_black.svg'); - background-color: rgba(#fff, 0.7); } } } diff --git a/app/stylus/components/PeerView.styl b/app/stylus/components/PeerView.styl index 907c7e2..9a02380 100644 --- a/app/stylus/components/PeerView.styl +++ b/app/stylus/components/PeerView.styl @@ -6,15 +6,13 @@ display: flex; flex-direction: column; overflow: hidden; - background-color: rgba(#2a4b58, 0.9); - background-image: url('/resources/images/buddy.svg'); + background-color: var(--peer-bg-color); + background-image: var(--peer-empty-avatar); background-position: bottom; background-size: auto 85%; background-repeat: no-repeat; > .info { - $backgroundTint = #000; - position: absolute; z-index: 10; top: 0.6vmin; @@ -178,7 +176,7 @@ user-select: none; transition-property: opacity; transition-duration: .15s; - background-color: rgba(#000, 0.75); + background-color: var(--peer-video-bg-color); &.is-me { transform: scaleX(-1); @@ -225,37 +223,4 @@ &.level10 { height: 100%; background-color: rgba(#000, 0.65); } } } - - > .spinner-container { - position: absolute; - top: 0 - bottom: 0; - left: 0; - right: 0; - background-color: rgba(#000, 0.75); - - .react-spinner { - position: relative; - width: 48px; - height: 48px; - top: 50%; - left: 50%; - - .react-spinner_bar { - position: absolute; - width: 20%; - height: 7.8%; - top: -3.9%; - left: -10%; - animation: PeerView-spinner 1.2s linear infinite; - border-radius: 5px; - background-color: rgba(#fff, 0.5); - } - } - } -} - -@keyframes PeerView-spinner { - 0% { opacity: 1; } - 100% { opacity: 0.15; } } diff --git a/app/stylus/components/Peers.styl b/app/stylus/components/Peers.styl index f9283f0..85ee7c3 100644 --- a/app/stylus/components/Peers.styl +++ b/app/stylus/components/Peers.styl @@ -31,18 +31,18 @@ +desktop() { flex: 0 0 auto; margin: 6px; - border: 1px solid rgba(#fff, 0.15); - box-shadow: 0px 5px 12px 2px rgba(#111, 0.5); + border: var(--peer-border); + box-shadow: var(--peer-shadow); transition-property: border-color; transition-duration: 0.15s; &.active-speaker { - border-color: #fff; + border-color: var(--active-speaker-border-color); } &.selected { > .peer-content { - border: 1px solid #377eff; + border-color: var(--selected-peer-border-color); } } } diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl index 5984bfb..f107704 100644 --- a/app/stylus/components/Room.styl +++ b/app/stylus/components/Room.styl @@ -143,24 +143,15 @@ position: fixed; z-index: 110; overflow: hidden; - box-shadow: 0px 5px 12px 2px rgba(#111, 0.5); + box-shadow: var(--me-shadow); transition-property: border-color; transition-duration: 0.15s; + top: 6%; + left:1%; + border: var(--me-border); &.active-speaker { - border-color: #fff; - } - - +desktop() { - top: 6%; - left:1%; - border: 1px solid rgba(#fff, 0.15); - } - - +mobile() { - top: 6%; - left: 1%; - border: 1px solid rgba(#fff, 0.25); + border-color: var(--active-speaker-border-color); } } } diff --git a/app/stylus/components/ScreenView.styl b/app/stylus/components/ScreenView.styl index 4c4dc66..84a038c 100644 --- a/app/stylus/components/ScreenView.styl +++ b/app/stylus/components/ScreenView.styl @@ -6,15 +6,13 @@ display: flex; flex-direction: column; overflow: hidden; - background-color: rgba(#2a4b58, 0.9); - background-image: url('/resources/images/buddy.svg'); + background-color: var(--peer-bg-color); + background-image: var(--peer-empty-avatar); background-position: bottom; background-size: auto 85%; background-repeat: no-repeat; > .info { - $backgroundTint = #000; - position: absolute; z-index: 10; top: 0.6vmin; @@ -58,7 +56,7 @@ user-select: none; transition-property: opacity; transition-duration: .15s; - background-color: rgba(#000, 0.75); + background-color: var(--peer-video-bg-color); &.is-me { transform: scaleX(-1); @@ -73,37 +71,4 @@ filter: blur(5px); } } - - > .spinner-container { - position: absolute; - top: 0 - bottom: 0; - left: 0; - right: 0; - background-color: rgba(#000, 0.75); - - .react-spinner { - position: relative; - width: 48px; - height: 48px; - top: 50%; - left: 50%; - - .react-spinner_bar { - position: absolute; - width: 20%; - height: 7.8%; - top: -3.9%; - left: -10%; - animation: PeerView-spinner 1.2s linear infinite; - border-radius: 5px; - background-color: rgba(#fff, 0.5); - } - } - } -} - -@keyframes ScreenView-spinner { - 0% { opacity: 1; } - 100% { opacity: 0.15; } } diff --git a/app/stylus/components/Settings.styl b/app/stylus/components/Settings.styl deleted file mode 100644 index b5f818d..0000000 --- a/app/stylus/components/Settings.styl +++ /dev/null @@ -1,3 +0,0 @@ -[data-component='Settings'] { - -} diff --git a/app/stylus/components/Sidebar.styl b/app/stylus/components/Sidebar.styl index 0c69fa8..145b80f 100644 --- a/app/stylus/components/Sidebar.styl +++ b/app/stylus/components/Sidebar.styl @@ -1,8 +1,8 @@ [data-component='Sidebar'] { position: fixed; z-index: 500; - top: calc(50% - 60px); - height: 120px; + top: 50%; + transform: translate(0%, -50%); display: flex; flex-direction: column; justify-content: center; @@ -24,7 +24,7 @@ background-position: center; background-size: 75%; background-repeat: no-repeat; - background-color: rgba(#fff, 0.3); + background-color: var(--circle-button-color); cursor: pointer; transition-property: opacity, background-color; transition-duration: 0.15s; @@ -32,24 +32,20 @@ display: flex; align-items: center; justify-content: center; - - +desktop() { - height: 2.5em; - width: 2.5em; - } - - +mobile() { - height: 2.5em; - width: 2.5em; - } + height: var(--circle-button-size); + width: var(--circle-button-size); &.on { - background-color: rgba(#fff, 0.7); + background-color: var(--circle-button-toggled-color); + } + + &.unsupported { + background-color: var(--circle-button-unsupported-color); } &.disabled { pointer-events: none; - opacity: 0.5; + background-color: var(--circle-button-diabled-color); } &.login { @@ -93,7 +89,6 @@ &.unsupported { background-image: url('/resources/images/no-share-screen-white.svg'); - background-color: rgba(#d42241, 0.7); } &.need-extension { diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl index 038ca8d..154802b 100644 --- a/app/stylus/components/ToolArea.styl +++ b/app/stylus/components/ToolArea.styl @@ -27,35 +27,6 @@ .toolarea-shade.open { display: block; } - > .button { - background-position: center; - background-size: 100%; - background-repeat: no-repeat; - background-color: rgba(#aef); - cursor: pointer; - border-radius: 15%; - padding: 1px; - - +desktop() { - height: 36px; - width: 18px; - } - - +mobile() { - height: 32px; - width: 16px; - } - &.toolarea-close-button { - background-image: url('/resources/images/arrow_right.svg'); - position: absolute; - top: 50%; - left: -22px; - display: none; - &.on { - display: block; - } - } - } > .toolarea-button { text-align: center; diff --git a/app/stylus/index.styl b/app/stylus/index.styl index 309fa2b..ad67260 100644 --- a/app/stylus/index.styl +++ b/app/stylus/index.styl @@ -7,6 +7,53 @@ global-reset(); @import './reset'; @import './keyframes'; +:root { + --logo: url('/resources/images/logo.svg'); + --logo-width: 8%; + --logo-height: 4%; + + --background: url('/resources/images/background.svg'); + --background-color: rgba(51, 51, 51, 1.0); + + --circle-button-color: rgba(255, 255, 255, 0.3); + --circle-button-toggled-color: rgba(255, 255, 255, 0.7); + --circle-button-unsupported-color: rgba(212, 34, 65, 0.7); + --circle-button-diabled-color: rgba(255, 255, 255, 0.5); + --circle-button-size: 2.5em; + + --media-control-button-color: rgba(255, 255, 255, 0.85); + --media-control-botton-on: rgba(255, 255, 255, 0.7); + --media-control-botton-off: rgba(212, 34, 65, 0.7); + --media-control-botton-disabled: rgba(255, 255, 255, 0.5) + --media-control-button-size: 1.5em; + + --me-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5); + --me-border: 1px solid rgba(255, 255, 255, 0.15); + --me-width: 20vmin; + --me-height: 15vmin; + + --peer-shadow: 0px 5px 12px 2px rgba(17, 17, 17, 0.5); + --peer-border: 1px solid rgba(255, 255, 255, 0.15); + --peer-empty-avatar: url('/resources/images/buddy.svg'); + --peer-bg-color: rgba(42, 75, 88, 0.9); + --peer-video-bg-color: rgba(0, 0, 0, 0.75); + + --chat-message-color: rgba(0, 0, 0, 0.1); + --chat-input-bg-color: rgba(255, 255, 255, 1.0); + --chat-input-text-color: rgba(0, 0, 0, 1.0); + --chat-send-bg-color: rgba(170, 238, 255, 1.0); + + --filesharing-bg-color: rgba(170, 238, 255, 1.0); + + --notification-info-bg-color: rgba(10, 29, 38, 0.75); + --notification-info-text-color: rgba(255, 255, 255, 0.65); + --notification-error-bg-color: rgba(255, 25, 20, 0.65); + --notification-error-text-color: rgba(255, 255, 255, 0.85); + + --active-speaker-border-color: rgba(255, 255, 255, 1.0); + --selected-peer-border-color: rgba(55, 126, 255, 1.0); +} + html { height: 100%; font-family: 'Roboto'; @@ -23,11 +70,11 @@ body { height: 100%; overflow-x: hidden; overflow-y: hidden; - background-color: #333; + background-color: var(--background-color); +desktop() { font-size: 16px; - background-image: url('/resources/images/background.svg'); + background-image: var(--background); background-attachment: fixed; background-position: center; background-size: cover; @@ -48,11 +95,10 @@ body { @import './components/Peers'; @import './components/Peer'; @import './components/PeerView'; -@import './components/HiddenPeersView'; +@import './components/HiddenPeers'; @import './components/ScreenView'; @import './components/Notifications'; @import './components/Chat'; -@import './components/Settings'; @import './components/ToolArea'; @import './components/ParticipantList'; @import './components/FullScreenView';