Massive change. Changed to react-scripts (webpack) for building. Changed to material-ui where applicable. Changed to CSS-in-JS.

app/src/reducers/chatmessages.js

@@ -0,0 +1,43 @@
+import
+{
+	createNewMessage
+} from './helper';
+
+const chatmessages = (state = [], action) =>
+{
+	switch (action.type)
+	{
+		case 'ADD_NEW_USER_MESSAGE':
+		{
+			const { text } = action.payload;
+
+			const message = createNewMessage(text, 'client', 'Me', undefined);
+
+			return [ ...state, message ];
+		}
+
+		case 'ADD_NEW_RESPONSE_MESSAGE':
+		{
+			const { message } = action.payload;
+
+			return [ ...state, message ];
+		}
+
+		case 'ADD_CHAT_HISTORY':
+		{
+			const { chatHistory } = action.payload;
+
+			return [ ...state, ...chatHistory ];
+		}
+
+		case 'DROP_MESSAGES':
+		{
+			return [];
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default chatmessages;

app/src/reducers/consumers.js

@@ -0,0 +1,84 @@
+const initialState = {};
+
+const consumers = (state = initialState, action) =>
+{
+	switch (action.type)
+	{
+		case 'ADD_CONSUMER':
+		{
+			const { consumer } = action.payload;
+
+			return { ...state, [consumer.id]: consumer };
+		}
+
+		case 'REMOVE_CONSUMER':
+		{
+			const { consumerId } = action.payload;
+			const newState = { ...state };
+
+			delete newState[consumerId];
+
+			return newState;
+		}
+
+		case 'SET_CONSUMER_PAUSED':
+		{
+			const { consumerId, originator } = action.payload;
+			const consumer = state[consumerId];
+			let newConsumer;
+
+			if (originator === 'local')
+				newConsumer = { ...consumer, locallyPaused: true };
+			else
+				newConsumer = { ...consumer, remotelyPaused: true };
+
+			return { ...state, [consumerId]: newConsumer };
+		}
+
+		case 'SET_CONSUMER_VOLUME':
+		{
+			const { consumerId, volume } = action.payload;
+			const consumer = state[consumerId];
+			const newConsumer = { ...consumer, volume };
+
+			return { ...state, [consumerId]: newConsumer };
+		}
+
+		case 'SET_CONSUMER_RESUMED':
+		{
+			const { consumerId, originator } = action.payload;
+			const consumer = state[consumerId];
+			let newConsumer;
+
+			if (originator === 'local')
+				newConsumer = { ...consumer, locallyPaused: false };
+			else
+				newConsumer = { ...consumer, remotelyPaused: false };
+
+			return { ...state, [consumerId]: newConsumer };
+		}
+
+		case 'SET_CONSUMER_EFFECTIVE_PROFILE':
+		{
+			const { consumerId, profile } = action.payload;
+			const consumer = state[consumerId];
+			const newConsumer = { ...consumer, profile };
+
+			return { ...state, [consumerId]: newConsumer };
+		}
+
+		case 'SET_CONSUMER_TRACK':
+		{
+			const { consumerId, track } = action.payload;
+			const consumer = state[consumerId];
+			const newConsumer = { ...consumer, track };
+
+			return { ...state, [consumerId]: newConsumer };
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default consumers;

app/src/reducers/files.js

@@ -0,0 +1,101 @@
+const files = (state = {}, action) =>
+{
+	switch (action.type)
+	{
+		case 'ADD_FILE':
+		{
+			const { file } = action.payload;
+
+			const newFile = {
+				active   : false,
+				progress : 0,
+				files    : null,
+				me       : false,
+				...file
+			};
+
+			return { ...state, [file.magnetUri]: newFile };
+		}
+
+		case 'ADD_FILE_HISTORY':
+		{
+			const { fileHistory } = action.payload;
+			const newFileHistory = {};
+
+			// eslint-disable-next-line
+			fileHistory.map((file) =>
+			{
+				const newFile =
+				{
+					active   : false,
+					progress : 0,
+					files    : null,
+					me       : false,
+					...file
+				};
+
+				newFileHistory[file.magnetUri] = newFile;
+			});
+
+			return { ...state, ...newFileHistory };
+		}
+
+		case 'SET_FILE_ACTIVE':
+		{
+			const { magnetUri } = action.payload;
+			const file = state[magnetUri];
+
+			const newFile = { ...file, active: true };
+
+			return { ...state, [magnetUri]: newFile };
+		}
+
+		case 'SET_FILE_INACTIVE':
+		{
+			const { magnetUri } = action.payload;
+			const file = state[magnetUri];
+
+			const newFile = { ...file, active: false };
+
+			return { ...state, [magnetUri]: newFile };
+		}
+
+		case 'SET_FILE_PROGRESS':
+		{
+			const { magnetUri, progress } = action.payload;
+			const file = state[magnetUri];
+
+			const newFile = { ...file, progress: progress };
+
+			return { ...state, [magnetUri]: newFile };
+		}
+
+		case 'SET_FILE_DONE':
+		{
+			const { magnetUri, sharedFiles } = action.payload;
+			const file = state[magnetUri];
+
+			const newFile = {
+				...file,
+				files    : sharedFiles,
+				progress : 1,
+				active   : false,
+				timeout  : false
+			};
+
+			return { ...state, [magnetUri]: newFile };
+		}
+
+		case 'REMOVE_FILE':
+		{
+			const { magnetUri } = action.payload;
+
+			return state.filter((file) => file.magnetUri !== magnetUri);
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default files;

app/src/reducers/helper.js

@@ -0,0 +1,11 @@
+export function createNewMessage(text, sender, name, picture)
+{
+	return {
+		type : 'message',
+		text,
+		time : Date.now(),
+		name,
+		sender,
+		picture
+	};
+}

app/src/reducers/me.js

@@ -0,0 +1,189 @@
+const initialState =
+{
+	name                  : null,
+	displayName           : null,
+	displayNameSet        : false,
+	device                : null,
+	canSendMic            : false,
+	canSendWebcam         : false,
+	canShareScreen        : false,
+	needExtension         : false,
+	canChangeAudioDevice  : false,
+	audioDevices          : null,
+	canChangeWebcam       : false,
+	webcamDevices         : null,
+	webcamInProgress      : false,
+	audioInProgress       : false,
+	screenShareInProgress : false,
+	loginEnabled          : false,
+	audioOnly             : false,
+	audioOnlyInProgress   : false,
+	raiseHand             : false,
+	raiseHandInProgress   : false,
+	restartIceInProgress  : false,
+	picture               : null,
+	selectedWebcam        : null,
+	selectedAudioDevice   : null,
+	loggedIn              : false
+};
+
+const me = (state = initialState, action) =>
+{
+	switch (action.type)
+	{
+		case 'SET_ME':
+		{
+			const {
+				peerName,
+				displayName,
+				displayNameSet,
+				device,
+				loginEnabled
+			} = action.payload;
+
+			return {
+				...state,
+				name : peerName,
+				displayName,
+				displayNameSet,
+				device,
+				loginEnabled
+			};
+		}
+
+		case 'LOGGED_IN':
+			return { ...state, loggedIn: true };
+
+		case 'USER_LOGOUT':
+			return { ...state, loggedIn: false };
+
+		case 'CHANGE_WEBCAM':
+		{
+			return { ...state, selectedWebcam: action.payload.deviceId };
+		}
+
+		case 'CHANGE_AUDIO_DEVICE':
+		{
+			return { ...state, selectedAudioDevice: action.payload.deviceId };
+		}
+
+		case 'SET_MEDIA_CAPABILITIES':
+		{
+			const {	canSendMic, canSendWebcam } = action.payload;
+
+			return { ...state, canSendMic, canSendWebcam };
+		}
+
+		case 'SET_SCREEN_CAPABILITIES':
+		{
+			const { canShareScreen, needExtension } = action.payload;
+
+			return { ...state, canShareScreen, needExtension };
+		}
+
+		case 'SET_CAN_CHANGE_AUDIO_DEVICE':
+		{
+			const canChangeAudioDevice = action.payload;
+
+			return { ...state, canChangeAudioDevice };
+		}
+
+		case 'SET_AUDIO_DEVICES':
+		{
+			const { devices } = action.payload;
+
+			return { ...state, audioDevices: devices };
+		}
+
+		case 'SET_CAN_CHANGE_WEBCAM':
+		{
+			const canChangeWebcam = action.payload;
+
+			return { ...state, canChangeWebcam };
+		}
+
+		case 'SET_WEBCAM_DEVICES':
+		{
+			const { devices } = action.payload;
+
+			return { ...state, webcamDevices: devices };
+		}
+
+		case 'SET_AUDIO_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, audioInProgress: flag };
+		}
+
+		case 'SET_WEBCAM_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, webcamInProgress: flag };
+		}
+
+		case 'SET_SCREEN_SHARE_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, screenShareInProgress: flag };
+		}
+
+		case 'SET_DISPLAY_NAME':
+		{
+			let { displayName } = action.payload;
+
+			// Be ready for undefined displayName (so keep previous one).
+			if (!displayName)
+				displayName = state.displayName;
+
+			return { ...state, displayName, displayNameSet: true };
+		}
+
+		case 'SET_AUDIO_ONLY_STATE':
+		{
+			const { enabled } = action.payload;
+
+			return { ...state, audioOnly: enabled };
+		}
+
+		case 'SET_AUDIO_ONLY_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, audioOnlyInProgress: flag };
+		}
+
+		case 'SET_MY_RAISE_HAND_STATE':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, raiseHand: flag };
+		}
+
+		case 'SET_MY_RAISE_HAND_STATE_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, raiseHandInProgress: flag };
+		}
+
+		case 'SET_RESTART_ICE_IN_PROGRESS':
+		{
+			const { flag } = action.payload;
+
+			return { ...state, restartIceInProgress: flag };
+		}
+
+		case 'SET_PICTURE':
+		{
+			return { ...state, picture: action.payload.picture };
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default me;

app/src/reducers/notifications.js

@@ -0,0 +1,29 @@
+const notifications = (state = [], action) =>
+{
+	switch (action.type)
+	{
+		case 'ADD_NOTIFICATION':
+		{
+			const { notification } = action.payload;
+
+			return [ ...state, notification ];
+		}
+
+		case 'REMOVE_NOTIFICATION':
+		{
+			const { notificationId } = action.payload;
+
+			return state.filter((notification) => notification.id !== notificationId);
+		}
+
+		case 'REMOVE_ALL_NOTIFICATIONS':
+		{
+			return [];
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default notifications;

app/src/reducers/peers.js

@@ -0,0 +1,98 @@
+import omit from 'lodash/omit';
+
+const peer = (state = {}, action) =>
+{
+	switch (action.type) 
+	{
+		case 'ADD_PEER':
+			return action.payload.peer;
+
+		case 'SET_PEER_DISPLAY_NAME':
+			return { ...state, displayName: action.payload.displayName };
+
+		case 'SET_PEER_VIDEO_IN_PROGRESS':
+			return { ...state, peerVideoInProgress: action.payload.flag };
+
+		case 'SET_PEER_AUDIO_IN_PROGRESS':
+			return { ...state, peerAudioInProgress: action.payload.flag };
+
+		case 'SET_PEER_SCREEN_IN_PROGRESS':
+			return { ...state, peerScreenInProgress: action.payload.flag };
+		
+		case 'SET_PEER_RAISE_HAND_STATE':
+			return { ...state, raiseHandState: action.payload.raiseHandState };
+		
+		case 'ADD_CONSUMER':
+		{
+			const consumers = [ ...state.consumers, action.payload.consumer.id ];
+
+			return { ...state, consumers };
+		}
+
+		case 'REMOVE_CONSUMER':
+		{
+			const consumers = state.consumers.filter((consumer) =>
+				consumer !== action.payload.consumerId);
+
+			return { ...state, consumers };
+		}
+
+		case 'SET_PEER_PICTURE':
+		{
+			return { ...state, picture: action.payload.picture };
+		}
+
+		default:
+			return state;
+	}
+};
+
+const peers = (state = {}, action) =>
+{
+	switch (action.type)
+	{
+		case 'ADD_PEER':
+		{
+			return { ...state, [action.payload.peer.name]: peer(undefined, action) };
+		}
+
+		case 'REMOVE_PEER':
+		{
+			return omit(state, [ action.payload.peerName ]);
+		}
+
+		case 'SET_PEER_DISPLAY_NAME':
+		case 'SET_PEER_VIDEO_IN_PROGRESS':
+		case 'SET_PEER_AUDIO_IN_PROGRESS':
+		case 'SET_PEER_SCREEN_IN_PROGRESS':
+		case 'SET_PEER_RAISE_HAND_STATE':
+		case 'SET_PEER_PICTURE':
+		case 'ADD_CONSUMER':
+		{
+			const oldPeer = state[action.payload.peerName];
+
+			if (!oldPeer) 
+			{
+				throw new Error('no Peer found');
+			}
+
+			return { ...state, [oldPeer.name]: peer(oldPeer, action) };
+		}
+		
+		case 'REMOVE_CONSUMER':
+		{
+			const oldPeer = state[action.payload.peerName];
+
+			// NOTE: This means that the Peer was closed before, so it's ok.
+			if (!oldPeer)
+				return state;
+
+			return { ...state, [oldPeer.name]: peer(oldPeer, action) };
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default peers;

app/src/reducers/producers.js

@@ -0,0 +1,75 @@
+const initialState = {};
+
+const producers = (state = initialState, action) =>
+{
+	switch (action.type)
+	{
+		case 'ADD_PRODUCER':
+		{
+			const { producer } = action.payload;
+
+			return { ...state, [producer.id]: producer };
+		}
+
+		case 'REMOVE_PRODUCER':
+		{
+			const { producerId } = action.payload;
+			const newState = { ...state };
+
+			delete newState[producerId];
+
+			return newState;
+		}
+
+		case 'SET_PRODUCER_PAUSED':
+		{
+			const { producerId, originator } = action.payload;
+			const producer = state[producerId];
+			let newProducer;
+
+			if (originator === 'local')
+				newProducer = { ...producer, locallyPaused: true };
+			else
+				newProducer = { ...producer, remotelyPaused: true };
+
+			return { ...state, [producerId]: newProducer };
+		}
+
+		case 'SET_PRODUCER_VOLUME':
+		{
+			const { producerId, volume } = action.payload;
+			const producer = state[producerId];
+			const newProducer = { ...producer, volume };
+
+			return { ...state, [producerId]: newProducer };
+		}
+
+		case 'SET_PRODUCER_RESUMED':
+		{
+			const { producerId, originator } = action.payload;
+			const producer = state[producerId];
+			let newProducer;
+
+			if (originator === 'local')
+				newProducer = { ...producer, locallyPaused: false };
+			else
+				newProducer = { ...producer, remotelyPaused: false };
+
+			return { ...state, [producerId]: newProducer };
+		}
+
+		case 'SET_PRODUCER_TRACK':
+		{
+			const { producerId, track } = action.payload;
+			const producer = state[producerId];
+			const newProducer = { ...producer, track };
+
+			return { ...state, [producerId]: newProducer };
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default producers;

app/src/reducers/room.js

@@ -0,0 +1,152 @@
+const initialState =
+{
+	url                : null,
+	state              : 'new', // new/connecting/connected/disconnected/closed,
+	locked             : false,
+	lockedOut          : false,
+	audioSuspended     : false,
+	activeSpeakerName  : null,
+	torrentSupport     : false,
+	showSettings       : false,
+	advancedMode       : false,
+	fullScreenConsumer : null, // ConsumerID
+	windowConsumer     : null, // ConsumerID
+	toolbarsVisible    : true,
+	mode               : 'democratic',
+	selectedPeerName   : null,
+	spotlights         : [],
+	settingsOpen       : false
+};
+
+const room = (state = initialState, action) =>
+{
+	switch (action.type)
+	{
+		case 'SET_ROOM_URL':
+		{
+			const { url } = action.payload;
+
+			return { ...state, url };
+		}
+
+		case 'SET_ROOM_STATE':
+		{
+			const roomState = action.payload.state;
+
+			if (roomState === 'connected')
+				return { ...state, state: roomState };
+			else
+				return { ...state, state: roomState, activeSpeakerName: null };
+		}
+
+		case 'SET_ROOM_LOCKED':
+		{
+			return { ...state, locked: true };
+		}
+
+		case 'SET_ROOM_UNLOCKED':
+		{
+			return { ...state, locked: false };
+		}
+
+		case 'SET_ROOM_LOCKED_OUT':
+		{
+			return { ...state, lockedOut: true };
+		}
+
+		case 'SET_AUDIO_SUSPENDED':
+		{
+			const { audioSuspended } = action.payload;
+
+			return { ...state, audioSuspended };
+		}
+
+		case 'SET_SETTINGS_OPEN':
+		{
+			const { settingsOpen } = action.payload;
+
+			return { ...state, settingsOpen };
+		}
+
+		case 'SET_ROOM_ACTIVE_SPEAKER':
+		{
+			const { peerName } = action.payload;
+
+			return { ...state, activeSpeakerName: peerName };
+		}
+
+		case 'FILE_SHARING_SUPPORTED':
+		{
+			const { supported } = action.payload;
+
+			return { ...state, torrentSupport: supported };
+		}
+
+		case 'TOGGLE_SETTINGS':
+		{
+			const showSettings = !state.showSettings;
+
+			return { ...state, showSettings };
+		}
+
+		case 'TOGGLE_ADVANCED_MODE':
+		{
+			const advancedMode = !state.advancedMode;
+
+			return { ...state, advancedMode };
+		}
+
+		case 'TOGGLE_FULLSCREEN_CONSUMER':
+		{
+			const { consumerId } = action.payload;
+			const currentConsumer = state.fullScreenConsumer;
+
+			return { ...state, fullScreenConsumer: currentConsumer ? null : consumerId };
+		}
+
+		case 'TOGGLE_WINDOW_CONSUMER':
+		{
+			const { consumerId } = action.payload;
+			const currentConsumer = state.windowConsumer;
+
+			if (currentConsumer === consumerId)
+				return { ...state, windowConsumer: null };
+			else
+				return { ...state, windowConsumer: consumerId };
+		}
+
+		case 'SET_TOOLBARS_VISIBLE':
+		{
+			const { toolbarsVisible } = action.payload;
+
+			return { ...state, toolbarsVisible };
+		}
+
+		case 'SET_DISPLAY_MODE':
+			return { ...state, mode: action.payload.mode };
+
+		case 'SET_SELECTED_PEER':
+		{
+			const { selectedPeerName } = action.payload;
+
+			return {
+				...state,
+
+				selectedPeerName : state.selectedPeerName === selectedPeerName ?
+					null : selectedPeerName
+			};
+		}
+
+		case 'SET_SPOTLIGHTS':
+		{
+			const { spotlights } = action.payload;
+
+			return { ...state, spotlights };
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default room;

app/src/reducers/rootReducer.js

@@ -0,0 +1,22 @@
+import { combineReducers } from 'redux';
+import room from './room';
+import me from './me';
+import producers from './producers';
+import peers from './peers';
+import consumers from './consumers';
+import notifications from './notifications';
+import chatmessages from './chatmessages';
+import toolarea from './toolarea';
+import files from './files';
+
+export default combineReducers({
+	room,
+	me,
+	producers,
+	peers,
+	consumers,
+	notifications,
+	chatmessages,
+	toolarea,
+	files
+});

app/src/reducers/toolarea.js

@@ -0,0 +1,72 @@
+const initialState =
+{
+	toolAreaOpen   : false,
+	currentToolTab : 'chat', // chat, settings, users
+	unreadMessages : 0,
+	unreadFiles    : 0
+};
+
+const toolarea = (state = initialState, action) =>
+{
+	switch (action.type)
+	{
+		case 'TOGGLE_TOOL_AREA':
+		{
+			const toolAreaOpen = !state.toolAreaOpen;
+			const unreadMessages = toolAreaOpen && state.currentToolTab === 'chat' ? 0 : state.unreadMessages;
+			const unreadFiles = toolAreaOpen && state.currentToolTab === 'files' ? 0 : state.unreadFiles;
+
+			return { ...state, toolAreaOpen, unreadMessages, unreadFiles };
+		}
+
+		case 'OPEN_TOOL_AREA':
+		{
+			const toolAreaOpen = true;
+			const unreadMessages = state.currentToolTab === 'chat' ? 0 : state.unreadMessages;
+			const unreadFiles = state.currentToolTab === 'files' ? 0 : state.unreadFiles;
+
+			return { ...state, toolAreaOpen, unreadMessages, unreadFiles };
+		}
+
+		case 'CLOSE_TOOL_AREA':
+		{
+			const toolAreaOpen = false;
+
+			return { ...state, toolAreaOpen };
+		}
+
+		case 'SET_TOOL_TAB':
+		{
+			const { toolTab } = action.payload;
+			const unreadMessages = toolTab === 'chat' ? 0 : state.unreadMessages;
+			const unreadFiles = toolTab === 'files' ? 0 : state.unreadFiles;
+
+			return { ...state, currentToolTab: toolTab, unreadMessages, unreadFiles };
+		}
+
+		case 'ADD_NEW_RESPONSE_MESSAGE':
+		{
+			if (state.toolAreaOpen && state.currentToolTab === 'chat')
+			{
+				return state;
+			}
+
+			return { ...state, unreadMessages: state.unreadMessages + 1 };
+		}
+
+		case 'ADD_FILE':
+		{
+			if (state.toolAreaOpen && state.currentToolTab === 'files')
+			{
+				return state;
+			}
+
+			return { ...state, unreadFiles: state.unreadFiles + 1 };
+		}
+
+		default:
+			return state;
+	}
+};
+
+export default toolarea;