From 0449d6ff2058e28a83b8cfa63d0fb9fa989c31a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= Date: Fri, 29 Mar 2019 14:12:13 +0100 Subject: [PATCH 1/6] Massive change. Changed to react-scripts (webpack) for building. Changed to material-ui where applicable. Changed to CSS-in-JS. --- .gitignore | 3 +- app/.babelrc | 26 - app/.eslintrc.js | 231 --------- app/banner.txt | 7 - app/chooseRoom.html | 74 --- app/gulpfile.js | 299 ------------ app/index.html | 30 -- app/lib/components/Containers/HiddenPeers.jsx | 78 --- app/lib/components/Controls/Sidebar.jsx | 232 --------- app/lib/components/Layouts/Filmstrip.jsx | 216 --------- app/lib/components/Notifications.jsx | 70 --- app/lib/components/Room.jsx | 263 ---------- app/lib/components/ToolArea/Chat/Chat.jsx | 97 ---- .../components/ToolArea/Chat/MessageList.jsx | 98 ---- .../ToolArea/FileSharing/DragDropSharing.jsx | 18 - .../components/ToolArea/FileSharing/File.jsx | 113 ----- .../ToolArea/FileSharing/FileList.jsx | 40 -- .../ToolArea/ParticipantList/ListMe.jsx | 38 -- .../ToolArea/ParticipantList/ListPeer.jsx | 124 ----- .../ParticipantList/ParticipantList.jsx | 89 ---- .../components/ToolArea/Settings/Settings.jsx | 123 ----- app/lib/components/ToolArea/TabHeader.jsx | 41 -- app/lib/components/ToolArea/ToolArea.jsx | 134 ----- .../components/ToolArea/scrollToBottom.jsx | 63 --- .../VideoContainers/FullScreenView.jsx | 95 ---- .../components/VideoContainers/PeerView.jsx | 222 --------- .../components/VideoContainers/ScreenView.jsx | 157 ------ app/lib/components/transitions.jsx | 22 - app/lib/redux/STATE.md | 101 ---- app/lib/store.js | 47 -- app/lib/utils.js | 40 -- app/package.json | 459 +++++++++++++++--- app/public/chooseRoom.html | 86 ++++ app/{config => public}/config.example.js | 9 +- app/public/favicon.ico | Bin 0 -> 16958 bytes .../images/background.svg | 0 app/public/index.html | 25 + app/public/manifest.json | 15 + app/{resources => public}/sounds/notify.mp3 | Bin app/resources/fonts/Roboto-light-ext.woff2 | Bin 8040 -> 0 bytes app/resources/fonts/Roboto-light.ttf | Bin 140276 -> 0 bytes app/resources/fonts/Roboto-light.woff2 | Bin 10324 -> 0 bytes app/resources/fonts/Roboto-medium-ext.woff2 | Bin 7900 -> 0 bytes app/resources/fonts/Roboto-medium.ttf | Bin 137308 -> 0 bytes app/resources/fonts/Roboto-medium.woff2 | Bin 10248 -> 0 bytes app/resources/fonts/Roboto-regular-ext.woff2 | Bin 7960 -> 0 bytes app/resources/fonts/Roboto-regular.ttf | Bin 145348 -> 0 bytes app/resources/fonts/Roboto-regular.woff2 | Bin 10292 -> 0 bytes app/resources/images/arrow_right.svg | 1 - app/resources/images/cancel.svg | 76 --- app/resources/images/chat-icon.svg | 37 -- app/resources/images/close.svg | 4 - app/resources/images/devices/chrome_16x16.png | Bin 861 -> 0 bytes app/resources/images/devices/edge_16x16.png | Bin 365 -> 0 bytes .../images/devices/firefox_16x16.png | Bin 946 -> 0 bytes app/resources/images/devices/opera_16x16.png | Bin 632 -> 0 bytes app/resources/images/devices/safari_16x16.png | Bin 917 -> 0 bytes app/resources/images/devices/sip_endpoint.svg | 4 - app/resources/images/devices/unknown.svg | 4 - app/resources/images/download-icon.svg | 4 - .../images/icon_audio_only_black.svg | 4 - .../images/icon_audio_only_white.svg | 4 - .../images/icon_change_webcam_black.svg | 4 - .../icon_change_webcam_white_unsupported.svg | 4 - .../images/icon_fullscreen_black.svg | 4 - .../images/icon_fullscreen_exit_black.svg | 4 - .../images/icon_fullscreen_exit_white.svg | 4 - .../images/icon_fullscreen_white.svg | 4 - app/resources/images/icon_locked_white.svg | 4 - app/resources/images/icon_login_black.svg | 3 - app/resources/images/icon_login_white.svg | 3 - app/resources/images/icon_mic_black_on.svg | 4 - app/resources/images/icon_mic_white_off.svg | 4 - .../images/icon_mic_white_unsupported.svg | 4 - .../images/icon_new_window_black.svg | 8 - .../images/icon_notification_error_white.svg | 4 - .../images/icon_notification_info_white.svg | 4 - .../images/icon_remote_mic_white_off.svg | 4 - .../images/icon_remote_raise_hand.svg | 26 - .../images/icon_remote_webcam_white_off.svg | 4 - .../images/icon_restart_ice_white.svg | 4 - app/resources/images/icon_settings_black.svg | 4 - app/resources/images/icon_settings_white.svg | 3 - app/resources/images/icon_tool_area_black.svg | 4 - app/resources/images/icon_tool_area_white.svg | 4 - app/resources/images/icon_unlocked_white.svg | 4 - app/resources/images/icon_webcam_black_on.svg | 4 - app/resources/images/icon_webcam_white_on.svg | 4 - .../images/icon_webcam_white_unsupported.svg | 4 - app/resources/images/leave-meeting.svg | 38 -- .../images/no-share-screen-black.svg | 12 - .../images/no-share-screen-white.svg | 12 - app/resources/images/room.svg | 9 - app/resources/images/save-icon.svg | 4 - app/resources/images/share-screen-black.svg | 11 - .../images/share-screen-extension.svg | 53 -- app/resources/images/share-screen-white.svg | 11 - app/resources/images/stats.svg | 4 - app/resources/js/antiglobal.js | 1 - app/{lib => src}/Logger.js | 0 app/{lib => src}/RoomClient.js | 32 +- app/{lib => src}/RoomContext.js | 0 app/{lib => src}/ScreenShare.js | 56 ++- app/{lib => src}/Spotlights.js | 0 .../redux => src/actions}/requestActions.js | 3 + .../redux => src/actions}/stateActions.js | 6 + app/src/components/Containers/HiddenPeers.js | 124 +++++ .../components/Containers/Me.js} | 136 +++++- .../components/Containers/Peer.js} | 219 +++++++-- .../components/Controls/EditableInput.js} | 0 app/src/components/Controls/Sidebar.js | 190 ++++++++ app/{lib => src}/components/FullScreen.js | 1 + app/src/components/LoadingView.css | 5 + app/src/components/LoadingView.js | 12 + app/src/components/MeetingDrawer/Chat/Chat.js | 38 ++ .../MeetingDrawer/Chat/ChatInput.js | 131 +++++ .../components/MeetingDrawer/Chat/Message.js | 99 ++++ .../MeetingDrawer/Chat/MessageList.js | 92 ++++ .../MeetingDrawer/FileSharing/File.js | 164 +++++++ .../MeetingDrawer/FileSharing/FileList.js | 71 +++ .../MeetingDrawer/FileSharing/FileSharing.js} | 79 +-- .../components/MeetingDrawer/MeetingDrawer.js | 108 +++++ .../MeetingDrawer/ParticipantList/ListMe.js | 115 +++++ .../MeetingDrawer/ParticipantList/ListPeer.js | 294 +++++++++++ .../ParticipantList/ParticipantList.js | 154 ++++++ .../components/MeetingViews/Democratic.js} | 103 ++-- .../components/Notifications/Notifications.js | 85 ++++ .../components/PeerAudio/AudioPeer.js} | 0 .../components/PeerAudio/AudioPeers.js} | 19 +- .../components/PeerAudio/PeerAudio.js} | 2 +- app/src/components/Room.js | 406 ++++++++++++++++ app/src/components/Settings/Settings.js | 152 ++++++ .../VideoContainers/FullScreenView.js | 163 +++++++ .../components/VideoContainers/FullView.js} | 51 +- .../components/VideoContainers/PeerView.js | 431 ++++++++++++++++ .../components/VideoContainers/ScreenView.js | 246 ++++++++++ .../components/VideoWindow/NewWindow.js} | 105 +++- .../components/VideoWindow/VideoWindow.js} | 2 +- app/{lib => src}/components/appPropTypes.js | 0 app/{lib => src}/cookiesManager.js | 0 .../images/avatar-empty.jpeg | Bin app/src/images/background.svg | 1 + app/{resources => src}/images/buddy.svg | 0 .../images/icon-hand-black.svg | 0 .../images/icon-hand-white.svg | 0 app/src/index.css | 69 +++ app/{lib/index.jsx => src/index.js} | 101 ++-- .../redux => src}/reducers/chatmessages.js | 0 app/{lib/redux => src}/reducers/consumers.js | 0 app/{lib/redux => src}/reducers/files.js | 4 +- app/{lib/redux => src}/reducers/helper.js | 0 app/{lib/redux => src}/reducers/me.js | 0 .../redux => src}/reducers/notifications.js | 0 app/{lib/redux => src}/reducers/peers.js | 0 app/{lib/redux => src}/reducers/producers.js | 0 app/{lib/redux => src}/reducers/room.js | 12 +- .../index.js => src/reducers/rootReducer.js} | 25 +- app/{lib/redux => src}/reducers/toolarea.js | 0 app/src/serviceWorker.js | 126 +++++ app/src/store.js | 58 +++ app/{lib => src}/urlFactory.js | 4 +- app/src/utils.js | 19 + app/stylus/components/AudioPeers.styl | 6 - app/stylus/components/Chat.styl | 101 ---- app/stylus/components/FileSharing.styl | 119 ----- app/stylus/components/Filmstrip.styl | 78 --- app/stylus/components/FullScreenView.styl | 80 --- app/stylus/components/FullView.styl | 72 --- app/stylus/components/HiddenPeers.styl | 68 --- app/stylus/components/Logo.styl | 18 - app/stylus/components/Me.styl | 105 ---- app/stylus/components/Notifications.styl | 106 ---- app/stylus/components/ParticipantList.styl | 211 -------- app/stylus/components/Peer.styl | 213 -------- app/stylus/components/PeerView.styl | 226 --------- app/stylus/components/Peers.styl | 65 --- app/stylus/components/Room.styl | 366 -------------- app/stylus/components/ScreenView.styl | 74 --- app/stylus/components/Sidebar.styl | 121 ----- app/stylus/components/ToolArea.styl | 198 -------- app/stylus/fonts.styl | 62 --- app/stylus/index.styl | 127 ----- app/stylus/keyframes.styl | 21 - app/stylus/mixins.styl | 33 -- app/stylus/reset.styl | 14 - 185 files changed, 4564 insertions(+), 6442 deletions(-) delete mode 100644 app/.babelrc delete mode 100644 app/.eslintrc.js delete mode 100644 app/banner.txt delete mode 100644 app/chooseRoom.html delete mode 100644 app/gulpfile.js delete mode 100644 app/index.html delete mode 100644 app/lib/components/Containers/HiddenPeers.jsx delete mode 100644 app/lib/components/Controls/Sidebar.jsx delete mode 100644 app/lib/components/Layouts/Filmstrip.jsx delete mode 100644 app/lib/components/Notifications.jsx delete mode 100644 app/lib/components/Room.jsx delete mode 100644 app/lib/components/ToolArea/Chat/Chat.jsx delete mode 100644 app/lib/components/ToolArea/Chat/MessageList.jsx delete mode 100644 app/lib/components/ToolArea/FileSharing/DragDropSharing.jsx delete mode 100644 app/lib/components/ToolArea/FileSharing/File.jsx delete mode 100644 app/lib/components/ToolArea/FileSharing/FileList.jsx delete mode 100644 app/lib/components/ToolArea/ParticipantList/ListMe.jsx delete mode 100644 app/lib/components/ToolArea/ParticipantList/ListPeer.jsx delete mode 100644 app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx delete mode 100644 app/lib/components/ToolArea/Settings/Settings.jsx delete mode 100644 app/lib/components/ToolArea/TabHeader.jsx delete mode 100644 app/lib/components/ToolArea/ToolArea.jsx delete mode 100644 app/lib/components/ToolArea/scrollToBottom.jsx delete mode 100644 app/lib/components/VideoContainers/FullScreenView.jsx delete mode 100644 app/lib/components/VideoContainers/PeerView.jsx delete mode 100644 app/lib/components/VideoContainers/ScreenView.jsx delete mode 100644 app/lib/components/transitions.jsx delete mode 100644 app/lib/redux/STATE.md delete mode 100644 app/lib/store.js delete mode 100644 app/lib/utils.js create mode 100644 app/public/chooseRoom.html rename app/{config => public}/config.example.js (55%) create mode 100644 app/public/favicon.ico rename app/{resources => public}/images/background.svg (100%) create mode 100644 app/public/index.html create mode 100644 app/public/manifest.json rename app/{resources => public}/sounds/notify.mp3 (100%) delete mode 100644 app/resources/fonts/Roboto-light-ext.woff2 delete mode 100755 app/resources/fonts/Roboto-light.ttf delete mode 100644 app/resources/fonts/Roboto-light.woff2 delete mode 100644 app/resources/fonts/Roboto-medium-ext.woff2 delete mode 100755 app/resources/fonts/Roboto-medium.ttf delete mode 100644 app/resources/fonts/Roboto-medium.woff2 delete mode 100644 app/resources/fonts/Roboto-regular-ext.woff2 delete mode 100755 app/resources/fonts/Roboto-regular.ttf delete mode 100644 app/resources/fonts/Roboto-regular.woff2 delete mode 100644 app/resources/images/arrow_right.svg delete mode 100644 app/resources/images/cancel.svg delete mode 100644 app/resources/images/chat-icon.svg delete mode 100644 app/resources/images/close.svg delete mode 100644 app/resources/images/devices/chrome_16x16.png delete mode 100644 app/resources/images/devices/edge_16x16.png delete mode 100644 app/resources/images/devices/firefox_16x16.png delete mode 100644 app/resources/images/devices/opera_16x16.png delete mode 100644 app/resources/images/devices/safari_16x16.png delete mode 100644 app/resources/images/devices/sip_endpoint.svg delete mode 100644 app/resources/images/devices/unknown.svg delete mode 100644 app/resources/images/download-icon.svg delete mode 100644 app/resources/images/icon_audio_only_black.svg delete mode 100644 app/resources/images/icon_audio_only_white.svg delete mode 100644 app/resources/images/icon_change_webcam_black.svg delete mode 100644 app/resources/images/icon_change_webcam_white_unsupported.svg delete mode 100644 app/resources/images/icon_fullscreen_black.svg delete mode 100644 app/resources/images/icon_fullscreen_exit_black.svg delete mode 100644 app/resources/images/icon_fullscreen_exit_white.svg delete mode 100644 app/resources/images/icon_fullscreen_white.svg delete mode 100644 app/resources/images/icon_locked_white.svg delete mode 100644 app/resources/images/icon_login_black.svg delete mode 100644 app/resources/images/icon_login_white.svg delete mode 100644 app/resources/images/icon_mic_black_on.svg delete mode 100644 app/resources/images/icon_mic_white_off.svg delete mode 100644 app/resources/images/icon_mic_white_unsupported.svg delete mode 100644 app/resources/images/icon_new_window_black.svg delete mode 100644 app/resources/images/icon_notification_error_white.svg delete mode 100644 app/resources/images/icon_notification_info_white.svg delete mode 100644 app/resources/images/icon_remote_mic_white_off.svg delete mode 100644 app/resources/images/icon_remote_raise_hand.svg delete mode 100644 app/resources/images/icon_remote_webcam_white_off.svg delete mode 100644 app/resources/images/icon_restart_ice_white.svg delete mode 100644 app/resources/images/icon_settings_black.svg delete mode 100644 app/resources/images/icon_settings_white.svg delete mode 100644 app/resources/images/icon_tool_area_black.svg delete mode 100644 app/resources/images/icon_tool_area_white.svg delete mode 100644 app/resources/images/icon_unlocked_white.svg delete mode 100644 app/resources/images/icon_webcam_black_on.svg delete mode 100644 app/resources/images/icon_webcam_white_on.svg delete mode 100644 app/resources/images/icon_webcam_white_unsupported.svg delete mode 100644 app/resources/images/leave-meeting.svg delete mode 100644 app/resources/images/no-share-screen-black.svg delete mode 100644 app/resources/images/no-share-screen-white.svg delete mode 100644 app/resources/images/room.svg delete mode 100644 app/resources/images/save-icon.svg delete mode 100644 app/resources/images/share-screen-black.svg delete mode 100644 app/resources/images/share-screen-extension.svg delete mode 100644 app/resources/images/share-screen-white.svg delete mode 100644 app/resources/images/stats.svg delete mode 100644 app/resources/js/antiglobal.js rename app/{lib => src}/Logger.js (100%) rename app/{lib => src}/RoomClient.js (98%) rename app/{lib => src}/RoomContext.js (100%) rename app/{lib => src}/ScreenShare.js (86%) rename app/{lib => src}/Spotlights.js (100%) rename app/{lib/redux => src/actions}/requestActions.js (94%) rename app/{lib/redux => src/actions}/stateActions.js (98%) create mode 100644 app/src/components/Containers/HiddenPeers.js rename app/{lib/components/Containers/Me.jsx => src/components/Containers/Me.js} (64%) rename app/{lib/components/Containers/Peer.jsx => src/components/Containers/Peer.js} (54%) rename app/{lib/components/Controls/EditableInput.jsx => src/components/Controls/EditableInput.js} (100%) create mode 100644 app/src/components/Controls/Sidebar.js rename app/{lib => src}/components/FullScreen.js (98%) create mode 100644 app/src/components/LoadingView.css create mode 100644 app/src/components/LoadingView.js create mode 100644 app/src/components/MeetingDrawer/Chat/Chat.js create mode 100644 app/src/components/MeetingDrawer/Chat/ChatInput.js create mode 100644 app/src/components/MeetingDrawer/Chat/Message.js create mode 100644 app/src/components/MeetingDrawer/Chat/MessageList.js create mode 100644 app/src/components/MeetingDrawer/FileSharing/File.js create mode 100644 app/src/components/MeetingDrawer/FileSharing/FileList.js rename app/{lib/components/ToolArea/FileSharing/FileSharing.jsx => src/components/MeetingDrawer/FileSharing/FileSharing.js} (50%) create mode 100644 app/src/components/MeetingDrawer/MeetingDrawer.js create mode 100644 app/src/components/MeetingDrawer/ParticipantList/ListMe.js create mode 100644 app/src/components/MeetingDrawer/ParticipantList/ListPeer.js create mode 100644 app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js rename app/{lib/components/Layouts/Peers.jsx => src/components/MeetingViews/Democratic.js} (60%) create mode 100644 app/src/components/Notifications/Notifications.js rename app/{lib/components/PeerAudio/AudioPeer.jsx => src/components/PeerAudio/AudioPeer.js} (100%) rename app/{lib/components/PeerAudio/AudioPeers.jsx => src/components/PeerAudio/AudioPeers.js} (72%) rename app/{lib/components/PeerAudio/PeerAudio.jsx => src/components/PeerAudio/PeerAudio.js} (96%) create mode 100644 app/src/components/Room.js create mode 100644 app/src/components/Settings/Settings.js create mode 100644 app/src/components/VideoContainers/FullScreenView.js rename app/{lib/components/VideoContainers/FullView.jsx => src/components/VideoContainers/FullView.js} (51%) create mode 100644 app/src/components/VideoContainers/PeerView.js create mode 100644 app/src/components/VideoContainers/ScreenView.js rename app/{lib/components/VideoWindow/NewWindow.jsx => src/components/VideoWindow/NewWindow.js} (69%) rename app/{lib/components/VideoWindow/VideoWindow.jsx => src/components/VideoWindow/VideoWindow.js} (95%) rename app/{lib => src}/components/appPropTypes.js (100%) rename app/{lib => src}/cookiesManager.js (100%) rename app/{resources => src}/images/avatar-empty.jpeg (100%) create mode 100644 app/src/images/background.svg rename app/{resources => src}/images/buddy.svg (100%) rename app/{resources => src}/images/icon-hand-black.svg (100%) rename app/{resources => src}/images/icon-hand-white.svg (100%) create mode 100644 app/src/index.css rename app/{lib/index.jsx => src/index.js} (62%) rename app/{lib/redux => src}/reducers/chatmessages.js (100%) rename app/{lib/redux => src}/reducers/consumers.js (100%) rename app/{lib/redux => src}/reducers/files.js (96%) rename app/{lib/redux => src}/reducers/helper.js (100%) rename app/{lib/redux => src}/reducers/me.js (100%) rename app/{lib/redux => src}/reducers/notifications.js (100%) rename app/{lib/redux => src}/reducers/peers.js (100%) rename app/{lib/redux => src}/reducers/producers.js (100%) rename app/{lib/redux => src}/reducers/room.js (93%) rename app/{lib/redux/reducers/index.js => src/reducers/rootReducer.js} (67%) rename app/{lib/redux => src}/reducers/toolarea.js (100%) create mode 100644 app/src/serviceWorker.js create mode 100644 app/src/store.js rename app/{lib => src}/urlFactory.js (63%) create mode 100644 app/src/utils.js delete mode 100644 app/stylus/components/AudioPeers.styl delete mode 100644 app/stylus/components/Chat.styl delete mode 100644 app/stylus/components/FileSharing.styl delete mode 100644 app/stylus/components/Filmstrip.styl delete mode 100644 app/stylus/components/FullScreenView.styl delete mode 100644 app/stylus/components/FullView.styl delete mode 100644 app/stylus/components/HiddenPeers.styl delete mode 100644 app/stylus/components/Logo.styl delete mode 100644 app/stylus/components/Me.styl delete mode 100644 app/stylus/components/Notifications.styl delete mode 100644 app/stylus/components/ParticipantList.styl delete mode 100644 app/stylus/components/Peer.styl delete mode 100644 app/stylus/components/PeerView.styl delete mode 100644 app/stylus/components/Peers.styl delete mode 100644 app/stylus/components/Room.styl delete mode 100644 app/stylus/components/ScreenView.styl delete mode 100644 app/stylus/components/Sidebar.styl delete mode 100644 app/stylus/components/ToolArea.styl delete mode 100644 app/stylus/fonts.styl delete mode 100644 app/stylus/index.styl delete mode 100644 app/stylus/keyframes.styl delete mode 100644 app/stylus/mixins.styl delete mode 100644 app/stylus/reset.styl diff --git a/.gitignore b/.gitignore index d3b2b1a..98d7543 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ node_modules/ -/app/config/ -!/app/config/config.example.js +/app/public/config.js /server/config/ !/server/config/config.example.js /server/public/ diff --git a/app/.babelrc b/app/.babelrc deleted file mode 100644 index 3aadd5a..0000000 --- a/app/.babelrc +++ /dev/null @@ -1,26 +0,0 @@ -{ - "plugins": - [ - "@babel/plugin-proposal-object-rest-spread", - "jsx-control-statements", - "@babel/plugin-proposal-class-properties", - "@babel/plugin-transform-runtime" - ], - "presets": - [ - [ - "@babel/preset-env", - { - "targets": { - "browsers": [ - "chrome >= 67", - "edge >= 17", - "firefox >= 60", - "safari >= 12" - ] - } - } - ], - "@babel/react" - ] -} diff --git a/app/.eslintrc.js b/app/.eslintrc.js deleted file mode 100644 index 9231726..0000000 --- a/app/.eslintrc.js +++ /dev/null @@ -1,231 +0,0 @@ -module.exports = -{ - env: - { - browser: true, - es6: true, - node: true - }, - plugins: - [ - 'import', - 'react', - 'jsx-control-statements' - ], - extends: - [ - 'eslint:recommended', - 'plugin:react/recommended', - 'plugin:jsx-control-statements/recommended' - ], - settings: - { - react: - { - pragma: 'React', - version: '16' - } - }, - parser: "babel-eslint", - parserOptions: - { - ecmaVersion: 2018, - sourceType: 'module', - ecmaFeatures: - { - impliedStrict: true, - jsx: true - } - }, - rules: - { - 'array-bracket-spacing': [ 2, 'always', - { - objectsInArrays: true, - arraysInArrays: true - }], - 'arrow-parens': [ 2, 'always' ], - 'arrow-spacing': 2, - 'block-spacing': [ 2, 'always' ], - 'brace-style': [ 2, 'allman', { allowSingleLine: true } ], - 'camelcase': 2, - 'comma-dangle': 2, - 'comma-spacing': [ 2, { before: false, after: true } ], - 'comma-style': 2, - 'computed-property-spacing': 2, - 'constructor-super': 2, - 'func-call-spacing': 2, - 'generator-star-spacing': 2, - 'guard-for-in': 2, - 'indent': [ 2, 'tab', { 'SwitchCase': 1 } ], - 'key-spacing': [ 2, - { - singleLine: - { - beforeColon: false, - afterColon: true - }, - multiLine: - { - beforeColon: true, - afterColon: true, - align: 'colon' - } - }], - 'keyword-spacing': 2, - 'linebreak-style': [ 2, 'unix' ], - 'lines-around-comment': [ 2, - { - allowBlockStart: true, - allowObjectStart: true, - beforeBlockComment: true, - beforeLineComment: false - }], - 'max-len': [ 2, 90, - { - tabWidth: 2, - comments: 110, - ignoreUrls: true, - ignoreStrings: true, - ignoreTemplateLiterals: true, - ignoreRegExpLiterals: true - }], - 'newline-after-var': 2, - 'newline-before-return': 2, - 'newline-per-chained-call': 2, - 'no-alert': 2, - 'no-caller': 2, - 'no-case-declarations': 2, - 'no-catch-shadow': 2, - 'no-class-assign': 2, - 'no-confusing-arrow': 2, - 'no-console': 2, - 'no-const-assign': 2, - 'no-debugger': 2, - 'no-dupe-args': 2, - 'no-dupe-keys': 2, - 'no-duplicate-case': 2, - 'no-div-regex': 2, - 'no-empty': [ 2, { allowEmptyCatch: true } ], - 'no-empty-pattern': 2, - 'no-else-return': 0, - 'no-eval': 2, - 'no-extend-native': 2, - 'no-ex-assign': 2, - 'no-extra-bind': 2, - 'no-extra-boolean-cast': 2, - 'no-extra-label': 2, - 'no-extra-semi': 2, - 'no-fallthrough': 2, - 'no-func-assign': 2, - 'no-global-assign': 2, - 'no-implicit-coercion': 2, - 'no-implicit-globals': 2, - 'no-inner-declarations': 2, - 'no-invalid-regexp': 2, - 'no-irregular-whitespace': 2, - 'no-lonely-if': 2, - 'no-mixed-operators': 2, - 'no-mixed-spaces-and-tabs': 2, - 'no-multi-spaces': 2, - 'no-multi-str': 2, - 'no-multiple-empty-lines': [ 2, { max: 1, maxEOF: 0, maxBOF: 0 } ], - 'no-native-reassign': 2, - 'no-negated-in-lhs': 2, - 'no-new': 2, - 'no-new-func': 2, - 'no-new-wrappers': 2, - 'no-obj-calls': 2, - 'no-proto': 2, - 'no-prototype-builtins': 0, - 'no-redeclare': 2, - 'no-regex-spaces': 2, - 'no-restricted-imports': 2, - 'no-return-assign': 2, - 'no-self-assign': 2, - 'no-self-compare': 2, - 'no-sequences': 2, - 'no-shadow': 2, - 'no-shadow-restricted-names': 2, - 'no-spaced-func': 2, - 'no-sparse-arrays': 2, - 'no-this-before-super': 2, - 'no-throw-literal': 2, - 'no-undef': 2, - 'no-unexpected-multiline': 2, - 'no-unmodified-loop-condition': 2, - 'no-unreachable': 2, - 'no-unused-vars': [ 1, { vars: 'all', args: 'after-used' }], - 'no-use-before-define': [ 2, { functions: false } ], - 'no-useless-call': 2, - 'no-useless-computed-key': 2, - 'no-useless-concat': 2, - 'no-useless-rename': 2, - 'no-var': 2, - 'no-whitespace-before-property': 2, - 'object-curly-newline': 0, - 'object-curly-spacing': [ 2, 'always' ], - 'object-property-newline': [ 2, { allowMultiplePropertiesPerLine: true } ], - 'prefer-const': 2, - 'prefer-rest-params': 2, - 'prefer-spread': 2, - 'prefer-template': 2, - 'quotes': [ 2, 'single', { avoidEscape: true } ], - 'semi': [ 2, 'always' ], - 'semi-spacing': 2, - 'space-before-blocks': 2, - 'space-before-function-paren': [ 2, { anonymous: 'never', named: 'never', 'asyncArrow': 'always'}], - 'space-in-parens': [ 2, 'never' ], - 'spaced-comment': [ 2, 'always' ], - 'strict': 2, - 'valid-typeof': 2, - 'eol-last': 0, - 'yoda': 2, - // eslint-plugin-import options. - 'import/extensions': 2, - 'import/no-duplicates': 2, - // eslint-plugin-react options. - 'jsx-quotes': [ 2, 'prefer-single' ], - 'react/display-name': [ 2, { ignoreTranspilerName: false } ], - 'react/forbid-prop-types': 0, - 'react/jsx-boolean-value': 2, - 'react/jsx-closing-bracket-location': 2, - 'react/jsx-curly-spacing': 2, - 'react/jsx-equals-spacing': 2, - 'react/jsx-handler-names': 2, - 'react/jsx-indent-props': [ 2, 'tab' ], - 'react/jsx-indent': [ 2, 'tab' ], - 'react/jsx-key': 2, - 'react/jsx-max-props-per-line': 0, - 'react/jsx-no-bind': 0, - 'react/jsx-no-duplicate-props': 2, - 'react/jsx-no-literals': 0, - 'react/jsx-no-undef': 0, - 'react/jsx-pascal-case': 2, - 'react/jsx-sort-prop-types': 0, - 'react/jsx-sort-props': 0, - 'react/jsx-uses-react': 2, - 'react/jsx-uses-vars': 2, - 'react/no-danger': 2, - 'react/no-deprecated': 2, - 'react/no-did-mount-set-state': 2, - 'react/no-did-update-set-state': 2, - 'react/no-direct-mutation-state': 2, - 'react/no-is-mounted': 2, - 'react/no-multi-comp': 0, - 'react/no-set-state': 0, - 'react/no-string-refs': 0, - 'react/no-unknown-property': 2, - 'react/prefer-es6-class': 2, - 'react/prop-types': [ 2, { skipUndeclared: true } ], - 'react/react-in-jsx-scope': 2, - 'react/self-closing-comp': 2, - 'react/sort-comp': 0, - 'react/jsx-wrap-multilines': [ 2, - { - declaration: false, - assignment: false, - return: true - }] - } -}; diff --git a/app/banner.txt b/app/banner.txt deleted file mode 100644 index 3de4791..0000000 --- a/app/banner.txt +++ /dev/null @@ -1,7 +0,0 @@ -/* - * <%= pkg.name %> v<%= pkg.version %> - * <%= pkg.description %> - * Copyright: 2017-<%= currentYear %> <%= pkg.author %> - * License: <%= pkg.license %> - */ - diff --git a/app/chooseRoom.html b/app/chooseRoom.html deleted file mode 100644 index 97d00de..0000000 --- a/app/chooseRoom.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - Multiparty Meeting - - - - -
- - - - - - diff --git a/app/gulpfile.js b/app/gulpfile.js deleted file mode 100644 index 468c6d0..0000000 --- a/app/gulpfile.js +++ /dev/null @@ -1,299 +0,0 @@ -/** - * Tasks: - * - * gulp dist - * Generates the browser app in development mode (unless NODE_ENV is set - * to 'production'). - * - * gulp live - * Generates the browser app in development mode (unless NODE_ENV is set - * to 'production'), opens it and watches for changes in the source code. - * - * gulp - * Alias for `gulp live`. - */ - -const fs = require('fs'); -const path = require('path'); -const gulp = require('gulp'); -const gulpif = require('gulp-if'); -const gutil = require('gulp-util'); -const plumber = require('gulp-plumber'); -const rename = require('gulp-rename'); -const change = require('gulp-change'); -const header = require('gulp-header'); -const touch = require('gulp-touch-cmd'); -const browserify = require('browserify'); -const watchify = require('watchify'); -const envify = require('envify/custom'); -const uglify = require('gulp-uglify-es').default; -const source = require('vinyl-source-stream'); -const buffer = require('vinyl-buffer'); -const del = require('del'); -const mkdirp = require('mkdirp'); -const ncp = require('ncp'); -const eslint = require('gulp-eslint'); -const stylus = require('gulp-stylus'); -const cssBase64 = require('gulp-css-base64'); -const nib = require('nib'); -const browserSync = require('browser-sync'); - -const PKG = require('./package.json'); -const BANNER = fs.readFileSync('banner.txt').toString(); -const BANNER_OPTIONS = -{ - pkg : PKG, - currentYear : (new Date()).getFullYear() -}; -const OUTPUT_DIR = '../server/public'; -const appOptions = require('./config/config'); -const SERVER_CONFIG = '../server/config/config'; - -// Set Node 'development' environment (unless externally set). -process.env.NODE_ENV = process.env.NODE_ENV || 'development'; - -gutil.log(`NODE_ENV: ${process.env.NODE_ENV}`); - -function logError(error) -{ - gutil.log(gutil.colors.red(error.stack)); -} - -function bundle(options) -{ - options = options || {}; - - const watch = Boolean(options.watch); - - let bundler = browserify( - { - entries : PKG.main, - extensions : [ '.js', '.jsx' ], - // required for sourcemaps (must be false otherwise). - debug : process.env.NODE_ENV === 'development', - // required for watchify. - cache : {}, - // required for watchify. - packageCache : {}, - // required to be true only for watchify. - fullPaths : watch - }) - .transform('babelify') - .transform(envify( - { - NODE_ENV : process.env.NODE_ENV, - _ : 'purge' - })); - - if (watch) - { - bundler = watchify(bundler); - - bundler.on('update', () => - { - const start = Date.now(); - - gutil.log('bundling...'); - rebundle(); - gutil.log('bundle took %sms', (Date.now() - start)); - }); - } - - function rebundle() - { - return bundler.bundle() - .on('error', logError) - .pipe(plumber()) - .pipe(source(`${PKG.name}.js`)) - .pipe(buffer()) - .pipe(rename(`${PKG.name}.js`)) - .pipe(gulpif(process.env.NODE_ENV === 'production', - uglify() - )) - .pipe(header(BANNER, BANNER_OPTIONS)) - .pipe(gulp.dest(OUTPUT_DIR)); - } - - return rebundle(); -} - -function changeHTML(content) -{ - return content.replace(/chromeExtension/g, appOptions.chromeExtension); -} - -gulp.task('clean', () => del(OUTPUT_DIR, { force: true })); - -const LINTING_FILES = [ - 'gulpfile.js', - 'lib/**/*.js', - 'lib/**/*.jsx' -]; - -gulp.task('lint', () => -{ - return gulp.src(LINTING_FILES) - .pipe(plumber()) - .pipe(eslint()) - .pipe(eslint.format()); -}); - -gulp.task('lint-fix', function() -{ - return gulp.src(LINTING_FILES) - .pipe(plumber()) - .pipe(eslint({ fix: true })) - .pipe(eslint.format()) - .pipe(gulp.dest((file) => file.base)); -}); - -gulp.task('css', () => -{ - return gulp.src('stylus/index.styl') - .pipe(plumber()) - .pipe(stylus( - { - use : nib(), - compress : process.env.NODE_ENV === 'production' - })) - .on('error', logError) - .pipe(cssBase64( - { - baseDir : '.', - maxWeightResource : 50000 // So big ttf fonts are not included, nice. - })) - .pipe(rename(`${PKG.name}.css`)) - .pipe(gulp.dest(OUTPUT_DIR)) - .pipe(touch()); -}); - -gulp.task('html', () => -{ - return gulp.src('*.html') - .pipe(change(changeHTML)) - .pipe(gulp.dest(OUTPUT_DIR)); -}); - -gulp.task('resources', (done) => -{ - const dst = path.join(OUTPUT_DIR, 'resources'); - - mkdirp.sync(dst); - ncp('resources', dst, { stopOnErr: true }, (error) => - { - if (error && error[0].code !== 'ENOENT') - throw new Error(`resources copy failed: ${error}`); - - done(); - }); -}); - -gulp.task('bundle', () => -{ - return bundle({ watch: false }); -}); - -gulp.task('bundle:watch', () => -{ - return bundle({ watch: true }); -}); - -gulp.task('livebrowser', (done) => -{ - const config = require(SERVER_CONFIG); - - browserSync( - { - open : 'external', - host : config.domain, - port : 3000, - server : - { - baseDir : OUTPUT_DIR - }, - https : config.tls, - ghostMode : false, - files : path.join(OUTPUT_DIR, '**', '*') - }); - - done(); -}); - -gulp.task('browser', (done) => -{ - const config = require(SERVER_CONFIG); - - browserSync( - { - open : 'external', - host : config.domain, - port : 3000, - server : - { - baseDir : OUTPUT_DIR - }, - https : config.tls, - ghostMode : false - }); - - done(); -}); - -gulp.task('watch', (done) => -{ - // Watch changes in HTML. - gulp.watch([ '*.html' ], gulp.series( - 'html' - )); - - // Watch changes in Stylus files. - gulp.watch([ 'stylus/**/*.styl' ], gulp.series( - 'css' - )); - - // Watch changes in resources. - gulp.watch([ 'resources/**/*' ], gulp.series( - 'resources', 'css' - )); - - // Watch changes in JS files. - gulp.watch([ 'gulpfile.js', 'lib/**/*.js', 'lib/**/*.jsx' ], gulp.series( - 'lint' - )); - - done(); -}); - -gulp.task('dist', gulp.series( - 'clean', - 'lint', - 'bundle', - 'html', - 'css', - 'resources' -)); - -gulp.task('dist-watch', gulp.series( - 'clean', - 'lint', - 'bundle:watch', - 'html', - 'css', - 'resources', - 'watch', -)); - -gulp.task('live', gulp.series( - 'clean', - 'lint', - 'bundle:watch', - 'html', - 'css', - 'resources', - 'watch', - 'livebrowser' -)); - -gulp.task('open', gulp.series('browser')); - -gulp.task('default', gulp.series('live')); diff --git a/app/index.html b/app/index.html deleted file mode 100644 index 62d7bb6..0000000 --- a/app/index.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - Multiparty Meeting - - - - - - - - - - - - - -
-
- - diff --git a/app/lib/components/Containers/HiddenPeers.jsx b/app/lib/components/Containers/HiddenPeers.jsx deleted file mode 100644 index 595a838..0000000 --- a/app/lib/components/Containers/HiddenPeers.jsx +++ /dev/null @@ -1,78 +0,0 @@ -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'; - -class HiddenPeers extends Component -{ - constructor(props) - { - super(props); - this.state = { className: '' }; - } - - componentDidUpdate(prevProps) - { - const { hiddenPeersCount } = this.props; - - if (hiddenPeersCount !== prevProps.hiddenPeersCount) - { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ className: 'pulse' }, () => - { - if (this.timeout) - { - clearTimeout(this.timeout); - } - - this.timeout = setTimeout(() => - { - this.setState({ className: '' }); - }, 500); - }); - } - } - - render() - { - const { - hiddenPeersCount, - openUsersTab - } = this.props; - - return ( -
-
openUsersTab()}> -

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

-
-
- ); - } -} - -HiddenPeers.propTypes = -{ - hiddenPeersCount : PropTypes.number, - openUsersTab : PropTypes.func.isRequired -}; - -const mapDispatchToProps = (dispatch) => -{ - return { - openUsersTab : () => - { - dispatch(stateActions.openToolArea()); - dispatch(stateActions.setToolTab('users')); - } - }; -}; - -const HiddenPeersContainer = connect( - null, - mapDispatchToProps -)(HiddenPeers); - -export default HiddenPeersContainer; diff --git a/app/lib/components/Controls/Sidebar.jsx b/app/lib/components/Controls/Sidebar.jsx deleted file mode 100644 index 32fa6e6..0000000 --- a/app/lib/components/Controls/Sidebar.jsx +++ /dev/null @@ -1,232 +0,0 @@ -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'; - -class Sidebar extends Component -{ - constructor(props) - { - super(props); - - this.fullscreen = new FullScreen(document); - this.state = { - fullscreen : false - }; - } - - handleToggleFullscreen = () => - { - if (this.fullscreen.fullscreenElement) - { - this.fullscreen.exitFullscreen(); - } - else - { - this.fullscreen.requestFullscreen(document.documentElement); - } - }; - - handleFullscreenChange = () => - { - this.setState({ - fullscreen : this.fullscreen.fullscreenElement !== null - }); - }; - - componentDidMount() - { - if (this.fullscreen.fullscreenEnabled) - { - this.fullscreen.addEventListener('fullscreenchange', this.handleFullscreenChange); - } - } - - componentWillUnmount() - { - if (this.fullscreen.fullscreenEnabled) - { - this.fullscreen.removeEventListener('fullscreenchange', this.handleFullscreenChange); - } - } - - render() - { - const { - roomClient, - toolbarsVisible, - me, - screenProducer, - locked - } = this.props; - - let screenState; - let screenTip; - let lockState = 'unlocked'; - - if (me.needExtension) - { - screenState = 'need-extension'; - screenTip = 'Install screen sharing extension'; - } - else if (!me.canShareScreen) - { - screenState = 'unsupported'; - screenTip = 'Screen sharing not supported'; - } - else if (screenProducer) - { - screenState = 'on'; - screenTip = 'Stop screen sharing'; - } - else - { - screenState = 'off'; - screenTip = 'Start screen sharing'; - } - - if (locked) - { - lockState = 'locked'; - } - - return ( -
- -
- - -
- { - switch (screenState) - { - case 'on': - { - roomClient.disableScreenSharing(); - break; - } - case 'off': - { - roomClient.enableScreenSharing(); - break; - } - case 'need-extension': - { - roomClient.installExtension(); - break; - } - default: - { - break; - } - } - }} - /> - - - - -
roomClient.logout()} - > - -
- - -
roomClient.login()} - /> - - - -
- { - if (locked) - { - roomClient.unlockRoom(); - } - else - { - roomClient.lockRoom(); - } - }} - /> -
roomClient.sendRaiseHandState(!me.raiseHand)} - /> - -
roomClient.close()} - /> -
- ); - } -} - -Sidebar.propTypes = { - roomClient : PropTypes.any.isRequired, - toolbarsVisible : PropTypes.bool.isRequired, - me : appPropTypes.Me.isRequired, - screenProducer : appPropTypes.Producer, - locked : PropTypes.bool.isRequired -}; - -const mapStateToProps = (state) => - ({ - toolbarsVisible : state.room.toolbarsVisible, - screenProducer : Object.values(state.producers) - .find((producer) => producer.source === 'screen'), - me : state.me, - locked : state.room.locked - }); - -export default withRoomContext(connect( - mapStateToProps -)(Sidebar)); diff --git a/app/lib/components/Layouts/Filmstrip.jsx b/app/lib/components/Layouts/Filmstrip.jsx deleted file mode 100644 index f5b1916..0000000 --- a/app/lib/components/Layouts/Filmstrip.jsx +++ /dev/null @@ -1,216 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -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 '../Containers/Peer'; -import HiddenPeers from '../Containers/HiddenPeers'; - -class Filmstrip extends Component -{ - constructor(props) - { - super(props); - - this.activePeerContainer = React.createRef(); - } - - state = { - lastSpeaker : null, - width : 400 - }; - - // Find the name of the peer which is currently speaking. This is either - // the latest active speaker, or the manually selected peer, or, if no - // person has spoken yet, the first peer in the list of peers. - getActivePeerName = () => - { - if (this.props.selectedPeerName) - { - return this.props.selectedPeerName; - } - - if (this.state.lastSpeaker) - { - return this.state.lastSpeaker; - } - - const peerNames = Object.keys(this.props.peers); - - if (peerNames.length > 0) - { - return peerNames[0]; - } - }; - - isSharingCamera = (peerName) => this.props.peers[peerName] && - this.props.peers[peerName].consumers.some((consumer) => - this.props.consumers[consumer].source === 'screen'); - - getRatio = () => - { - let ratio = 4 / 3; - - if (this.isSharingCamera(this.getActivePeerName())) - { - ratio *= 2; - } - - return ratio; - }; - - updateDimensions = debounce(() => - { - const container = this.activePeerContainer.current; - - if (container) - { - const ratio = this.getRatio(); - - let width = container.clientWidth; - - if (width / ratio > container.clientHeight) - { - width = container.clientHeight * ratio; - } - - this.setState({ - width - }); - } - }, 200); - - componentDidMount() - { - window.addEventListener('resize', this.updateDimensions); - const observer = new ResizeObserver(this.updateDimensions); - - observer.observe(this.activePeerContainer.current); - this.updateDimensions(); - } - - componentWillUnmount() - { - window.removeEventListener('resize', this.updateDimensions); - } - - componentDidUpdate(prevProps) - { - if (prevProps !== this.props) - { - this.updateDimensions(); - - if (this.props.activeSpeakerName !== this.props.myName) - { - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ - lastSpeaker : this.props.activeSpeakerName - }); - } - } - } - - render() - { - const { - roomClient, - peers, - advancedMode, - spotlights, - spotlightsLength - } = this.props; - - const activePeerName = this.getActivePeerName(); - - return ( -
-
- -
- -
- -
- -
-
- { Object.keys(peers).map((peerName) => - { - if (spotlights.find((spotlightsElement) => spotlightsElement === peerName)) - { - return ( -
roomClient.setSelectedPeer(peerName)} - className={classnames('film', { - selected : this.props.selectedPeerName === peerName, - active : this.state.lastSpeaker === peerName - })} - > -
- -
-
- ); - } - })} -
-
-
- - - -
- -
- ); - } -} - -Filmstrip.propTypes = { - roomClient : PropTypes.any.isRequired, - activeSpeakerName : PropTypes.string, - advancedMode : PropTypes.bool, - peers : PropTypes.object.isRequired, - consumers : PropTypes.object.isRequired, - myName : PropTypes.string.isRequired, - selectedPeerName : PropTypes.string, - spotlightsLength : PropTypes.number, - spotlights : PropTypes.array.isRequired -}; - -const mapStateToProps = (state) => -{ - const spotlightsLength = state.room.spotlights ? state.room.spotlights.length : 0; - - return { - activeSpeakerName : state.room.activeSpeakerName, - selectedPeerName : state.room.selectedPeerName, - peers : state.peers, - consumers : state.consumers, - myName : state.me.name, - spotlights : state.room.spotlights, - spotlightsLength - }; -}; - -export default withRoomContext(connect( - mapStateToProps, - undefined -)(Filmstrip)); diff --git a/app/lib/components/Notifications.jsx b/app/lib/components/Notifications.jsx deleted file mode 100644 index 2d0baaf..0000000 --- a/app/lib/components/Notifications.jsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import classnames from 'classnames'; -import PropTypes from 'prop-types'; -import * as appPropTypes from './appPropTypes'; -import * as stateActions from '../redux/stateActions'; -import { Appear } from './transitions'; - -const Notifications = ({ notifications, onClick, toolAreaOpen }) => -{ - return ( -
- { - notifications.map((notification) => - { - return ( - -
onClick(notification.id)} - > -
-

{notification.text}

-
- - ); - }) - } -
- ); -}; - -Notifications.propTypes = -{ - notifications : PropTypes.arrayOf(appPropTypes.Notification).isRequired, - onClick : PropTypes.func.isRequired, - toolAreaOpen : PropTypes.bool -}; - -const mapStateToProps = (state) => -{ - const { notifications } = state; - - return { - notifications, - toolAreaOpen : state.toolarea.toolAreaOpen - }; -}; - -const mapDispatchToProps = (dispatch) => -{ - return { - onClick : (notificationId) => - { - dispatch(stateActions.removeNotification(notificationId)); - } - }; -}; - -const NotificationsContainer = connect( - mapStateToProps, - mapDispatchToProps -)(Notifications); - -export default NotificationsContainer; diff --git a/app/lib/components/Room.jsx b/app/lib/components/Room.jsx deleted file mode 100644 index 0830733..0000000 --- a/app/lib/components/Room.jsx +++ /dev/null @@ -1,263 +0,0 @@ -import React, { Fragment } from 'react'; -import { connect } from 'react-redux'; -import { withRoomContext } from '../RoomContext'; -import ReactTooltip from 'react-tooltip'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import CopyToClipboard from 'react-copy-to-clipboard'; -import CookieConsent from 'react-cookie-consent'; -import * as appPropTypes from './appPropTypes'; -import * as requestActions from '../redux/requestActions'; -import * as stateActions from '../redux/stateActions'; -import { Appear } from './transitions'; -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 './VideoContainers/FullScreenView'; -import VideoWindow from './VideoWindow/VideoWindow'; -import Draggable from 'react-draggable'; -import { idle } from '../utils'; -import Sidebar from './Controls/Sidebar'; -import Filmstrip from './Layouts/Filmstrip'; - -// Hide toolbars after 10 seconds of inactivity. -const TIMEOUT = 10 * 1000; - -class Room extends React.Component -{ - /** - * Hides the different toolbars on the page after a - * given amount of time has passed since the - * last time the cursor was moved. - */ - waitForHide = idle(() => - { - this.props.setToolbarsVisible(false); - }, TIMEOUT); - - handleMovement = () => - { - // If the toolbars were hidden, show them again when - // the user moves their cursor. - if (!this.props.room.toolbarsVisible) - { - this.props.setToolbarsVisible(true); - } - - this.waitForHide(); - } - - componentDidMount() - { - window.addEventListener('mousemove', this.handleMovement); - window.addEventListener('touchstart', this.handleMovement); - } - - componentWillUnmount() - { - window.removeEventListener('mousemove', this.handleMovement); - window.removeEventListener('touchstart', this.handleMovement); - } - - render() - { - const { - roomClient, - room, - amActiveSpeaker, - onRoomLinkCopy - } = this.props; - - const View = { - filmstrip : Filmstrip, - democratic : Peers - }[room.mode]; - - if (room.audioSuspended) - { - return ( - - -
-
- This webpage required sound and video to play, please click to allow. -
- { - roomClient.notify('Joining.'); - roomClient.resumeAudio(); - }} - className='button' - > - Allow -
-
-
- - - ); - } - else if (room.lockedOut) - { - return ( - - -
-
- This room is locked at the moment, try again later. -
-
- - - ); - } - else - { - return ( - - -
- - This website uses cookies to enhance the user experience. - - - - - - -
- - - - ); - } - } -} - -Room.propTypes = -{ - roomClient : PropTypes.object.isRequired, - room : appPropTypes.Room.isRequired, - me : appPropTypes.Me.isRequired, - amActiveSpeaker : PropTypes.bool.isRequired, - toolAreaOpen : PropTypes.bool.isRequired, - screenProducer : appPropTypes.Producer, - onRoomLinkCopy : PropTypes.func.isRequired, - setToolbarsVisible : PropTypes.func.isRequired -}; - -const mapStateToProps = (state) => -{ - const producersArray = Object.values(state.producers); - const screenProducer = - producersArray.find((producer) => producer.source === 'screen'); - - return { - room : state.room, - me : state.me, - toolAreaOpen : state.toolarea.toolAreaOpen, - amActiveSpeaker : state.me.name === state.room.activeSpeakerName, - screenProducer : screenProducer - }; -}; - -const mapDispatchToProps = (dispatch) => -{ - return { - onRoomLinkCopy : () => - { - dispatch(requestActions.notify( - { - text : 'Room link copied to the clipboard' - })); - }, - - setToolbarsVisible : (visible) => - { - dispatch(stateActions.setToolbarsVisible(visible)); - } - }; -}; - -const RoomContainer = withRoomContext(connect( - mapStateToProps, - mapDispatchToProps -)(Room)); - -export default RoomContainer; diff --git a/app/lib/components/ToolArea/Chat/Chat.jsx b/app/lib/components/ToolArea/Chat/Chat.jsx deleted file mode 100644 index 9eb52b2..0000000 --- a/app/lib/components/ToolArea/Chat/Chat.jsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { withRoomContext } from '../../../RoomContext'; -import MessageList from './MessageList'; - -class Chat extends Component -{ - createNewMessage(text, sender, name, picture) - { - return { - type : 'message', - text, - time : Date.now(), - name, - sender, - picture - }; - } - - render() - { - const { - roomClient, - senderPlaceHolder, - autofocus, - displayName, - picture - } = this.props; - - return ( -
- -
- { - e.preventDefault(); - const userInput = e.target.message.value; - - if (userInput) - { - const message = this.createNewMessage(userInput, 'response', displayName, picture); - - roomClient.sendChatMessage(message); - } - e.target.message.value = ''; - }} - > - - -
-
- ); - } -} - -Chat.propTypes = -{ - roomClient : PropTypes.any.isRequired, - senderPlaceHolder : PropTypes.string, - autofocus : PropTypes.bool, - displayName : PropTypes.string, - picture : PropTypes.string -}; - -Chat.defaultProps = -{ - senderPlaceHolder : 'Type a message...', - autofocus : false, - displayName : null -}; - -const mapStateToProps = (state) => -{ - return { - displayName : state.me.displayName, - picture : state.me.picture - }; -}; - -const ChatContainer = withRoomContext(connect( - mapStateToProps -)(Chat)); - -export default ChatContainer; diff --git a/app/lib/components/ToolArea/Chat/MessageList.jsx b/app/lib/components/ToolArea/Chat/MessageList.jsx deleted file mode 100644 index 66d4eda..0000000 --- a/app/lib/components/ToolArea/Chat/MessageList.jsx +++ /dev/null @@ -1,98 +0,0 @@ -import React, { Component } from 'react'; -import { compose } from 'redux'; -import PropTypes from 'prop-types'; -import marked from 'marked'; -import { connect } from 'react-redux'; -import scrollToBottom from '../scrollToBottom'; - -const linkRenderer = new marked.Renderer(); - -linkRenderer.link = (href, title, text) => -{ - title = title ? title : href; - text = text ? text : href; - - return (`${ text }`); -}; - -class MessageList extends Component -{ - getTimeString(time) - { - return `${(time.getHours() < 10 ? '0' : '')}${time.getHours()}:${(time.getMinutes() < 10 ? '0' : '')}${time.getMinutes()}`; - } - - render() - { - const { - chatmessages - } = this.props; - - return ( -
- - 0}> - { - chatmessages.map((message, i) => - { - const messageTime = new Date(message.time); - - const picture = (message.sender === 'response' ? - message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg'; - - return ( -
-
- - -
-
- - - {message.name} - {this.getTimeString(messageTime)} - -
-
-
- ); - }) - } - - -
-

No one has said anything yet...

-
- - -
- ); - } -} - -MessageList.propTypes = -{ - chatmessages : PropTypes.arrayOf(PropTypes.object).isRequired, - myPicture : PropTypes.string -}; - -const mapStateToProps = (state) => -{ - return { - chatmessages : state.chatmessages, - myPicture : state.me.picture - }; -}; - -const MessageListContainer = compose( - connect(mapStateToProps), - scrollToBottom() -)(MessageList); - -export default MessageListContainer; diff --git a/app/lib/components/ToolArea/FileSharing/DragDropSharing.jsx b/app/lib/components/ToolArea/FileSharing/DragDropSharing.jsx deleted file mode 100644 index 279989c..0000000 --- a/app/lib/components/ToolArea/FileSharing/DragDropSharing.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import WebTorrent from 'webtorrent'; -import dragDrop from 'drag-drop'; -import { shareFiles } from './index'; - -export const configureDragDrop = () => -{ - if (WebTorrent.WEBRTC_SUPPORT) - { - dragDrop('body', async (files) => await shareFiles(files)); - } -}; - -export const HoldingOverlay = () => ( -
- Drop files here to share them -
-); \ No newline at end of file diff --git a/app/lib/components/ToolArea/FileSharing/File.jsx b/app/lib/components/ToolArea/FileSharing/File.jsx deleted file mode 100644 index 08a9db3..0000000 --- a/app/lib/components/ToolArea/FileSharing/File.jsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { Component, Fragment } from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { withRoomContext } from '../../../RoomContext'; -import magnet from 'magnet-uri'; - -const DEFAULT_PICTURE = 'resources/images/avatar-empty.jpeg'; - -class File extends Component -{ - render() - { - const { - roomClient, - torrentSupport, - file - } = this.props; - - return ( -
- - -
- - -

You shared a file.

- - -

{file.displayName} shared a file.

- - - - -
- - - - { - roomClient.handleDownload(file.magnetUri); - }} - > - - - - -

- Your browser does not support downloading files using WebTorrent. -

- - -

{magnet.decode(file.magnetUri).dn}

-
- - - - -

- If this process takes a long time, there might not be anyone seeding - this torrent. Try asking someone to reupload the file that you want. -

- - - - - - - - - -

File finished downloading.

- - {file.files.map((sharedFile, i) => ( -
- - { - roomClient.saveFile(sharedFile); - }} - > - - - -

{sharedFile.name}

-
- ))} - - -
-
- ); - } -} - -File.propTypes = { - roomClient : PropTypes.object.isRequired, - torrentSupport : PropTypes.bool.isRequired, - file : PropTypes.object.isRequired -}; - -const mapStateToProps = (state, { magnetUri }) => -{ - return { - file : state.files[magnetUri], - torrentSupport : state.room.torrentSupport - }; -}; - -export default withRoomContext(connect( - mapStateToProps -)(File)); \ No newline at end of file diff --git a/app/lib/components/ToolArea/FileSharing/FileList.jsx b/app/lib/components/ToolArea/FileSharing/FileList.jsx deleted file mode 100644 index 6028a9e..0000000 --- a/app/lib/components/ToolArea/FileSharing/FileList.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { Component } from 'react'; -import { compose } from 'redux'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import scrollToBottom from '../scrollToBottom'; -import File from './File'; - -class FileList extends Component -{ - render() - { - const { - files - } = this.props; - - return ( -
- { Object.keys(files).map((magnetUri) => - - )} -
- ); - } -} - -FileList.propTypes = { - files : PropTypes.object.isRequired -}; - -const mapStateToProps = (state) => -{ - return { - files : state.files - }; -}; - -export default compose( - connect(mapStateToProps), - scrollToBottom() -)(FileList); diff --git a/app/lib/components/ToolArea/ParticipantList/ListMe.jsx b/app/lib/components/ToolArea/ParticipantList/ListMe.jsx deleted file mode 100644 index eda33a4..0000000 --- a/app/lib/components/ToolArea/ParticipantList/ListMe.jsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { Me } from '../../appPropTypes'; - -const ListMe = ({ me }) => -{ - const picture = me.picture || 'resources/images/avatar-empty.jpeg'; - - return ( -
  • -
    - - -
    - {me.displayName} -
    - -
    - -
    - -
    -
    -
    • - ); -}; - -ListMe.propTypes = { - me : Me.isRequired -}; - -const mapStateToProps = (state) => ({ - me : state.me -}); - -export default connect( - mapStateToProps -)(ListMe); diff --git a/app/lib/components/ToolArea/ParticipantList/ListPeer.jsx b/app/lib/components/ToolArea/ParticipantList/ListPeer.jsx deleted file mode 100644 index 577d6b5..0000000 --- a/app/lib/components/ToolArea/ParticipantList/ListPeer.jsx +++ /dev/null @@ -1,124 +0,0 @@ -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'; - -const ListPeer = (props) => -{ - const { - roomClient, - peer, - micConsumer, - screenConsumer - } = props; - - const micEnabled = ( - Boolean(micConsumer) && - !micConsumer.locallyPaused && - !micConsumer.remotelyPaused - ); - - const screenVisible = ( - Boolean(screenConsumer) && - !screenConsumer.locallyPaused && - !screenConsumer.remotelyPaused - ); - - const picture = peer.picture || 'resources/images/avatar-empty.jpeg'; - - return ( -
    - - -
    - {peer.displayName} -
    -
    - -
    - -
    -
    -
    -
    -
    - -
    - { - e.stopPropagation(); - screenVisible ? - roomClient.modifyPeerConsumer(peer.name, 'screen', true) : - roomClient.modifyPeerConsumer(peer.name, 'screen', false); - }} - /> - -
    - { - e.stopPropagation(); - micEnabled ? - roomClient.modifyPeerConsumer(peer.name, 'mic', true) : - roomClient.modifyPeerConsumer(peer.name, 'mic', false); - }} - /> -
    -
    - ); -}; - -ListPeer.propTypes = -{ - roomClient : PropTypes.any.isRequired, - advancedMode : PropTypes.bool, - peer : appPropTypes.Peer.isRequired, - micConsumer : appPropTypes.Consumer, - webcamConsumer : appPropTypes.Consumer, - screenConsumer : appPropTypes.Consumer -}; - -const mapStateToProps = (state, { name }) => -{ - const peer = state.peers[name]; - const consumersArray = peer.consumers - .map((consumerId) => state.consumers[consumerId]); - const micConsumer = - consumersArray.find((consumer) => consumer.source === 'mic'); - const webcamConsumer = - consumersArray.find((consumer) => consumer.source === 'webcam'); - const screenConsumer = - consumersArray.find((consumer) => consumer.source === 'screen'); - - return { - peer, - micConsumer, - webcamConsumer, - screenConsumer - }; -}; - -const ListPeerContainer = withRoomContext(connect( - mapStateToProps -)(ListPeer)); - -export default ListPeerContainer; diff --git a/app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx b/app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx deleted file mode 100644 index 5537542..0000000 --- a/app/lib/components/ToolArea/ParticipantList/ParticipantList.jsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import classNames from 'classnames'; -import * as appPropTypes from '../../appPropTypes'; -import { withRoomContext } from '../../../RoomContext'; -import PropTypes from 'prop-types'; -import ListPeer from './ListPeer'; -import ListMe from './ListMe'; - -const ParticipantList = - ({ - roomClient, - advancedMode, - peers, - selectedPeerName, - spotlights - }) => ( -
    -
      -
    • Me:
      • - -
    -
    -
      -
    • Participants in Spotlight:
      • - {peers.filter((peer) => - { - return (spotlights.find((spotlight) => - { return (spotlight === peer.name); })); - }).map((peer) => ( -
    • roomClient.setSelectedPeer(peer.name)} - > - -
      • - ))} -
    -
    -
      -
    • Passive Participants:
      • - {peers.filter((peer) => - { - return !(spotlights.find((spotlight) => - { return (spotlight === peer.name); })); - }).map((peer) => ( -
    • roomClient.setSelectedPeer(peer.name)} - > - -
      • - ))} -
    - -
    - ); - -ParticipantList.propTypes = -{ - roomClient : PropTypes.any.isRequired, - advancedMode : PropTypes.bool, - peers : PropTypes.arrayOf(appPropTypes.Peer).isRequired, - selectedPeerName : PropTypes.string, - spotlights : PropTypes.array.isRequired -}; - -const mapStateToProps = (state) => -{ - const peersArray = Object.values(state.peers); - - return { - peers : peersArray, - selectedPeerName : state.room.selectedPeerName, - spotlights : state.room.spotlights - }; -}; - -const ParticipantListContainer = withRoomContext(connect( - mapStateToProps -)(ParticipantList)); - -export default ParticipantListContainer; diff --git a/app/lib/components/ToolArea/Settings/Settings.jsx b/app/lib/components/ToolArea/Settings/Settings.jsx deleted file mode 100644 index 12bddfe..0000000 --- a/app/lib/components/ToolArea/Settings/Settings.jsx +++ /dev/null @@ -1,123 +0,0 @@ -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 PropTypes from 'prop-types'; -import Dropdown from 'react-dropdown'; -import ReactTooltip from 'react-tooltip'; - -const modes = [ { - value : 'democratic', - label : 'Democratic view' -}, { - value : 'filmstrip', - label : 'Filmstrip view' -} ]; - -const findOption = (options, value) => options.find((option) => option.value === value); - -const Settings = ({ - roomClient, - room, - me, - onToggleAdvancedMode, - handleChangeMode -}) => -{ - let webcams; - - if (me.webcamDevices) - webcams = Array.from(me.webcamDevices.values()); - else - webcams = []; - - let audioDevices; - let audioDevicesText; - - if (me.canChangeAudioDevice) - audioDevicesText = 'Select audio input device'; - else - audioDevicesText = 'Unable to select audio input device'; - - if (me.audioDevices) - audioDevices = Array.from(me.audioDevices.values()); - else - audioDevices = []; - - return ( -
    - roomClient.changeWebcam(webcam.value)} - placeholder={'Select camera'} - /> - - roomClient.changeAudioDevice(device.value)} - placeholder={audioDevicesText} - /> - -
    - - -
    - -
    - handleChangeMode(mode.value)} - /> -
    -
    - ); -}; - -Settings.propTypes = -{ - roomClient : PropTypes.any.isRequired, - me : appPropTypes.Me.isRequired, - room : appPropTypes.Room.isRequired, - onToggleAdvancedMode : PropTypes.func.isRequired, - handleChangeMode : PropTypes.func.isRequired -}; - -const mapStateToProps = (state) => -{ - return { - me : state.me, - room : state.room - }; -}; - -const mapDispatchToProps = { - onToggleAdvancedMode : stateActions.toggleAdvancedMode, - handleChangeMode : stateActions.setDisplayMode -}; - -const SettingsContainer = withRoomContext(connect( - mapStateToProps, - mapDispatchToProps -)(Settings)); - -export default SettingsContainer; diff --git a/app/lib/components/ToolArea/TabHeader.jsx b/app/lib/components/ToolArea/TabHeader.jsx deleted file mode 100644 index eeec596..0000000 --- a/app/lib/components/ToolArea/TabHeader.jsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import classNames from 'classnames'; -import * as stateActions from '../../redux/stateActions'; - -const TabHeader = ({ currentToolTab, setToolTab, id, name, badge }) => ( -
    setToolTab(id)} - > - {name} - - 0}> - {badge} - -
    -); - -TabHeader.propTypes = { - currentToolTab : PropTypes.string.isRequired, - setToolTab : PropTypes.func.isRequired, - id : PropTypes.string.isRequired, - name : PropTypes.string.isRequired, - badge : PropTypes.number -}; - -const mapStateToProps = (state) => ({ - currentToolTab : state.toolarea.currentToolTab -}); - -const mapDispatchToProps = { - setToolTab : stateActions.setToolTab -}; - -export default connect( - mapStateToProps, - mapDispatchToProps -)(TabHeader); \ No newline at end of file diff --git a/app/lib/components/ToolArea/ToolArea.jsx b/app/lib/components/ToolArea/ToolArea.jsx deleted file mode 100644 index fa57884..0000000 --- a/app/lib/components/ToolArea/ToolArea.jsx +++ /dev/null @@ -1,134 +0,0 @@ -import React, { Fragment } from 'react'; -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/Settings'; -import FileSharing from './FileSharing/FileSharing'; -import TabHeader from './TabHeader'; - -class ToolArea extends React.Component -{ - constructor(props) - { - super(props); - } - - render() - { - const { - currentToolTab, - toolAreaOpen, - unreadMessages, - unreadFiles, - toggleToolArea, - unread - } = this.props; - - const VisibleTab = { - chat : Chat, - files : FileSharing, - users : ParticipantList, - settings : Settings - }[currentToolTab]; - - return ( - -
    - -
    -
    - -
    -

    Toolbox

    - - 0}> - = 10 })}> - {unread} - - -
    -
    - - - - - - - -
    - -
    - -
    -
    - - ); - } -} - -ToolArea.propTypes = -{ - advancedMode : PropTypes.bool, - currentToolTab : PropTypes.string.isRequired, - setToolTab : PropTypes.func.isRequired, - unreadMessages : PropTypes.number.isRequired, - unreadFiles : PropTypes.number.isRequired, - toolAreaOpen : PropTypes.bool, - toggleToolArea : PropTypes.func.isRequired, - closeToolArea : PropTypes.func.isRequired, - unread : PropTypes.number.isRequired -}; - -const mapStateToProps = (state) => ({ - currentToolTab : state.toolarea.currentToolTab, - unreadMessages : state.toolarea.unreadMessages, - unreadFiles : state.toolarea.unreadFiles, - toolAreaOpen : state.toolarea.toolAreaOpen, - unread : state.toolarea.unreadMessages + - state.toolarea.unreadFiles -}); - -const mapDispatchToProps = { - setToolTab : stateActions.setToolTab, - toggleToolArea : stateActions.toggleToolArea, - closeToolArea : stateActions.closeToolArea -}; - -const ToolAreaContainer = connect( - mapStateToProps, - mapDispatchToProps -)(ToolArea); - -export default ToolAreaContainer; diff --git a/app/lib/components/ToolArea/scrollToBottom.jsx b/app/lib/components/ToolArea/scrollToBottom.jsx deleted file mode 100644 index 2a107a4..0000000 --- a/app/lib/components/ToolArea/scrollToBottom.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { Component } from 'react'; -import { findDOMNode } from 'react-dom'; - -/** - * A higher order component which scrolls the user to the bottom of the - * wrapped component, provided that the user already was at the bottom - * of the wrapped component. Useful for chats and similar use cases. - * @param {number} treshold The required distance from the bottom required. - */ -const scrollToBottom = (treshold = 0) => (WrappedComponent) => -{ - return class AutoScroller extends Component - { - constructor(props) - { - super(props); - - this.ref = React.createRef(); - } - - getSnapshotBeforeUpdate() - { - // Check if the user has scrolled close enough to the bottom for - // us to scroll to the bottom or not. - return this.elem.scrollHeight - this.elem.scrollTop <= - this.elem.clientHeight - treshold; - } - - scrollToBottom = () => - { - // Scroll the user to the bottom of the wrapped element. - this.elem.scrollTop = this.elem.scrollHeight; - }; - - componentDidMount() - { - // eslint-disable-next-line react/no-find-dom-node - this.elem = findDOMNode(this.ref.current); - - this.scrollToBottom(); - } - - componentDidUpdate(prevProps, prevState, atBottom) - { - if (atBottom) - { - this.scrollToBottom(); - } - } - - render() - { - return ( - - ); - } - }; -}; - -export default scrollToBottom; \ No newline at end of file diff --git a/app/lib/components/VideoContainers/FullScreenView.jsx b/app/lib/components/VideoContainers/FullScreenView.jsx deleted file mode 100644 index e60f346..0000000 --- a/app/lib/components/VideoContainers/FullScreenView.jsx +++ /dev/null @@ -1,95 +0,0 @@ -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 FullView from './FullView'; - -const FullScreenView = (props) => -{ - const { - advancedMode, - consumer, - toggleConsumerFullscreen, - toolbarsVisible - } = props; - - if (!consumer) - return null; - - const consumerVisible = ( - Boolean(consumer) && - !consumer.locallyPaused && - !consumer.remotelyPaused - ); - - let consumerProfile; - - if (consumer) - consumerProfile = consumer.profile; - - return ( -
    - -
    -

    incompatible video

    -
    -     - -
    -
    - { - e.stopPropagation(); - toggleConsumerFullscreen(consumer); - }} - /> -
    - - -
    - ); -}; - -FullScreenView.propTypes = -{ - advancedMode : PropTypes.bool, - consumer : appPropTypes.Consumer, - toggleConsumerFullscreen : PropTypes.func.isRequired, - toolbarsVisible : PropTypes.bool -}; - -const mapStateToProps = (state) => -{ - return { - consumer : state.consumers[state.room.fullScreenConsumer], - toolbarsVisible : state.room.toolbarsVisible - }; -}; - -const mapDispatchToProps = (dispatch) => -{ - return { - toggleConsumerFullscreen : (consumer) => - { - if (consumer) - dispatch(stateActions.toggleConsumerFullscreen(consumer.id)); - } - }; -}; - -const FullScreenViewContainer = connect( - mapStateToProps, - mapDispatchToProps -)(FullScreenView); - -export default FullScreenViewContainer; diff --git a/app/lib/components/VideoContainers/PeerView.jsx b/app/lib/components/VideoContainers/PeerView.jsx deleted file mode 100644 index 1ca4543..0000000 --- a/app/lib/components/VideoContainers/PeerView.jsx +++ /dev/null @@ -1,222 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import * as appPropTypes from '../appPropTypes'; -import EditableInput from '../Controls/EditableInput'; - -export default class PeerView extends React.Component -{ - constructor(props) - { - super(props); - - this.state = - { - volume : 0, // Integer from 0 to 10., - videoWidth : null, - videoHeight : null - }; - - // Latest received video track. - // @type {MediaStreamTrack} - this._audioTrack = null; - - // Latest received video track. - // @type {MediaStreamTrack} - this._videoTrack = null; - - // Periodic timer for showing video resolution. - this._videoResolutionTimer = null; - } - - render() - { - const { - isMe, - peer, - volume, - advancedMode, - videoVisible, - videoProfile, - audioCodec, - videoCodec, - onChangeDisplayName - } = this.props; - - const { - videoWidth, - videoHeight - } = this.state; - - return ( -
    -
    - -
    -
    - -

    {audioCodec}

    -     - - -

    {videoCodec} {videoProfile}

    -     - - -

    {videoWidth}x{videoHeight}

    -     -
    -
    -     - -
    - - - onChangeDisplayName(displayName)} - /> - - - - {peer.displayName} - - - - - -
    - - - {peer.device.name} {Math.floor(peer.device.version) || null} - -
    -     -
    -
    - -