([]);
20 | const bottomElement = useRef(null);
21 |
22 | useEffect(() => {
23 | const realTimeMessages: DataMessage[] = [];
24 | const callback = (message: DataMessage) => {
25 | realTimeMessages.push(message);
26 | setMessages(realTimeMessages.slice() as DataMessage[]);
27 | };
28 |
29 | const chatMessageUpdateCallback = { topic: MessageTopic.Chat, callback };
30 | const raiseHandMessageUpdateCallback = {
31 | topic: MessageTopic.RaiseHand,
32 | callback
33 | };
34 |
35 | chime?.subscribeToMessageUpdate(chatMessageUpdateCallback);
36 | chime?.subscribeToMessageUpdate(raiseHandMessageUpdateCallback);
37 | return () => {
38 | chime?.unsubscribeFromMessageUpdate(chatMessageUpdateCallback);
39 | chime?.unsubscribeFromMessageUpdate(raiseHandMessageUpdateCallback);
40 | };
41 | }, []);
42 |
43 | useEffect(() => {
44 | setTimeout(() => {
45 | ((bottomElement.current as unknown) as HTMLDivElement).scrollIntoView({
46 | behavior: 'smooth'
47 | });
48 | }, 10);
49 | }, [messages]);
50 |
51 | return (
52 |
53 |
54 | {messages.map(message => {
55 | let messageString;
56 | if (message.topic === MessageTopic.Chat) {
57 | messageString = message.text();
58 | } else if (message.topic === MessageTopic.RaiseHand) {
59 | messageString = `✋`;
60 | }
61 |
62 | return (
63 |
69 |
70 |
71 | {chime?.roster[message.senderAttendeeId].name}
72 |
73 |
74 | {moment(message.timestampMs).format('h:mm A')}
75 |
76 |
77 |
{messageString}
78 |
79 | );
80 | })}
81 |
82 |
83 |
84 |
85 |
86 |
51 |
100 |
101 | );
102 | });
103 |
--------------------------------------------------------------------------------
/app/components/Classroom.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .classroom {
7 | display: flex;
8 | background: var(--color_mine_shaft_light);
9 | height: 100%;
10 | align-items: center;
11 | justify-content: center;
12 | }
13 |
14 | .classroom.isModeTransitioning::after {
15 | content: '';
16 | position: fixed;
17 | top: 0;
18 | right: 0;
19 | bottom: 0;
20 | left: 0;
21 | background: var(--color_mine_shaft_light);
22 | z-index: 10;
23 | }
24 |
25 | .left {
26 | flex: 1 1 auto;
27 | display: flex;
28 | flex-direction: column;
29 | height: 100%;
30 | }
31 |
32 | .contentVideoWrapper {
33 | display: none;
34 | flex: 1 1 auto;
35 | overflow-y: hidden;
36 | }
37 |
38 | .classroom.isContentShareEnabled .contentVideoWrapper {
39 | display: block;
40 | }
41 |
42 | .classroom.screenShareMode .contentVideoWrapper {
43 | display: none !important;
44 | }
45 |
46 | .remoteVideoGroupWrapper {
47 | flex: 1 1 auto;
48 | overflow: hidden;
49 | }
50 |
51 | .classroom.roomMode.isContentShareEnabled .remoteVideoGroupWrapper {
52 | flex: 0 0 auto;
53 | }
54 |
55 | .localVideoWrapper {
56 | display: flex;
57 | position: relative;
58 | align-items: center;
59 | justify-content: center;
60 | flex: 0 0 var(--local_video_container_height);
61 | }
62 |
63 | .localVideo {
64 | position: absolute;
65 | right: 0.25rem;
66 | }
67 |
68 | .classroom.screenShareMode .localVideo {
69 | right: auto;
70 | width: 100%;
71 | height: 100%;
72 | padding: 0.25rem;
73 | }
74 |
75 | .classroom.screenShareMode .controls {
76 | z-index: 1;
77 | }
78 |
79 | .right {
80 | display: flex;
81 | flex-direction: column;
82 | flex: 0 0 var(--right_panel_width);
83 | background: var(--color_mine_shaft_medium);
84 | height: 100%;
85 | overflow: hidden;
86 | }
87 |
88 | .classroom.screenShareMode .right {
89 | display: none;
90 | }
91 |
92 | .titleWrapper {
93 | padding: 0.5rem 1rem;
94 | border-bottom: 1px solid var(--color_mine_shaft_light);
95 | }
96 |
97 | .title {
98 | word-wrap: break-word;
99 | overflow-wrap: break-word;
100 | word-break: break-word;
101 | }
102 |
103 | .label {
104 | font-size: 0.8rem;
105 | color: var(--color_silver_chalice);
106 | }
107 |
108 | .deviceSwitcher {
109 | flex: 0 1 auto;
110 | }
111 |
112 | .roster {
113 | flex: 1 1 auto;
114 | overflow-y: scroll;
115 | height: 50%;
116 | }
117 |
118 | .chat {
119 | flex: 1 1 auto;
120 | overflow-y: scroll;
121 | display: flex;
122 | justify-content: center;
123 | align-items: center;
124 | height: 50%;
125 | }
126 |
127 | .modal {
128 | outline: none;
129 | }
130 |
131 | .modalOverlay {
132 | display: flex;
133 | align-items: center;
134 | justify-content: center;
135 | height: 100%;
136 | position: fixed;
137 | top: 0;
138 | right: 0;
139 | bottom: 0;
140 | left: 0;
141 | z-index: 1;
142 | background: rgba(0, 0, 0, 0.5);
143 | backdrop-filter: blur(0.5rem);
144 | }
145 |
--------------------------------------------------------------------------------
/app/components/Classroom.tsx:
--------------------------------------------------------------------------------
1 | // Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: Apache-2.0
3 |
4 | import classNames from 'classnames/bind';
5 | import { ipcRenderer, remote } from 'electron';
6 | import React, { useCallback, useContext, useEffect, useState } from 'react';
7 | import { FormattedMessage } from 'react-intl';
8 | import Modal from 'react-modal';
9 |
10 | import ChimeSdkWrapper from '../chime/ChimeSdkWrapper';
11 | import getChimeContext from '../context/getChimeContext';
12 | import getMeetingStatusContext from '../context/getMeetingStatusContext';
13 | import getUIStateContext from '../context/getUIStateContext';
14 | import ClassMode from '../enums/ClassMode';
15 | import MeetingStatus from '../enums/MeetingStatus';
16 | import ViewMode from '../enums/ViewMode';
17 | import Chat from './Chat';
18 | import styles from './Classroom.css';
19 | import ContentVideo from './ContentVideo';
20 | import Controls from './Controls';
21 | import DeviceSwitcher from './DeviceSwitcher';
22 | import Error from './Error';
23 | import LoadingSpinner from './LoadingSpinner';
24 | import LocalVideo from './LocalVideo';
25 | import RemoteVideoGroup from './RemoteVideoGroup';
26 | import Roster from './Roster';
27 | import ScreenPicker from './ScreenPicker';
28 | import ScreenShareHeader from './ScreenShareHeader';
29 |
30 | const cx = classNames.bind(styles);
31 |
32 | export default function Classroom() {
33 | Modal.setAppElement('body');
34 | const chime: ChimeSdkWrapper | null = useContext(getChimeContext());
35 | const [state] = useContext(getUIStateContext());
36 | const { meetingStatus, errorMessage } = useContext(getMeetingStatusContext());
37 | const [isContentShareEnabled, setIsContentShareEnabled] = useState(false);
38 | const [viewMode, setViewMode] = useState(ViewMode.Room);
39 | const [isModeTransitioning, setIsModeTransitioning] = useState(false);
40 | const [isPickerEnabled, setIsPickerEnabled] = useState(false);
41 |
42 | const stopContentShare = async () => {
43 | setIsModeTransitioning(true);
44 | await new Promise(resolve => setTimeout(resolve, 200));
45 | ipcRenderer.on('chime-disable-screen-share-mode-ack', () => {
46 | try {
47 | chime?.audioVideo?.stopContentShare();
48 | } catch (error) {
49 | // eslint-disable-next-line
50 | console.error(error);
51 | } finally {
52 | setViewMode(ViewMode.Room);
53 | setIsModeTransitioning(false);
54 | }
55 | });
56 | ipcRenderer.send('chime-disable-screen-share-mode');
57 | };
58 |
59 | // Must pass a memoized callback to the ContentVideo component using useCallback().
60 | // ContentVideo will re-render only when one dependency "viewMode" changes.
61 | // See more comments in ContentVideo.
62 | const onContentShareEnabled = useCallback(
63 | async (enabled: boolean) => {
64 | if (enabled && viewMode === ViewMode.ScreenShare) {
65 | await stopContentShare();
66 | }
67 | setIsContentShareEnabled(enabled);
68 | },
69 | [viewMode]
70 | );
71 |
72 | if (process.env.NODE_ENV === 'production') {
73 | useEffect(() => {
74 | // Recommend using "onbeforeunload" over "addEventListener"
75 | window.onbeforeunload = async (event: BeforeUnloadEvent) => {
76 | // Prevent the window from closing immediately
77 | // eslint-disable-next-line
78 | event.returnValue = true;
79 | try {
80 | await chime?.leaveRoom(state.classMode === ClassMode.Teacher);
81 | } catch (error) {
82 | // eslint-disable-next-line
83 | console.error(error);
84 | } finally {
85 | window.onbeforeunload = null;
86 | remote.app.quit();
87 | }
88 | };
89 | return () => {
90 | window.onbeforeunload = null;
91 | };
92 | }, []);
93 | }
94 |
95 | return (
96 |
104 | {meetingStatus === MeetingStatus.Loading &&
}
105 | {meetingStatus === MeetingStatus.Failed && (
106 |
107 | )}
108 | {meetingStatus === MeetingStatus.Succeeded && (
109 | <>
110 | <>
111 |
112 | {viewMode === ViewMode.ScreenShare && (
113 |
114 | )}
115 |
116 |
117 |
118 |
119 |
123 |
124 |
125 |
126 | {
129 | setIsPickerEnabled(true);
130 | }}
131 | />
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
{chime?.title}
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
{
162 | setIsPickerEnabled(false);
163 | }}
164 | >
165 | {
167 | setIsModeTransitioning(true);
168 | await new Promise(resolve => setTimeout(resolve, 200));
169 | ipcRenderer.on(
170 | 'chime-enable-screen-share-mode-ack',
171 | async () => {
172 | try {
173 | setIsPickerEnabled(false);
174 | await chime?.audioVideo?.startContentShareFromScreenCapture(
175 | selectedSourceId
176 | );
177 | setViewMode(ViewMode.ScreenShare);
178 | setIsModeTransitioning(false);
179 | } catch (error) {
180 | // eslint-disable-next-line
181 | console.error(error);
182 | await stopContentShare();
183 | }
184 | }
185 | );
186 | ipcRenderer.send('chime-enable-screen-share-mode');
187 | }}
188 | onClickCancelButton={() => {
189 | setIsPickerEnabled(false);
190 | }}
191 | />
192 |
193 |
194 | )}
195 |
79 |
80 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/app/components/Controls.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .controls {
7 | display: block;
8 | position: relative;
9 | }
10 |
11 | .controls.screenShareMode {
12 | width: calc(var(--local_video_container_height) - 0.5rem);
13 | height: calc(var(--local_video_container_height) - 0.5rem);
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | transition: opacity 0.15s;
18 | }
19 |
20 | .controls.screenShareMode:hover {
21 | opacity: 1 !important;
22 | }
23 |
24 | .controls.screenShareMode.videoEnabled {
25 | opacity: 0;
26 | }
27 |
28 | .controls.screenShareMode.audioMuted {
29 | opacity: 1;
30 | }
31 |
32 | .micMuted {
33 | display: none;
34 | z-index: 0;
35 | position: absolute;
36 | top: 0;
37 | left: 0;
38 | width: 100%;
39 | height: 100%;
40 | background-color: var(--color_black_medium_opacity);
41 | text-align: center;
42 | justify-content: center;
43 | border-radius: 0.25rem;
44 | font-size: 1rem;
45 | padding: 1rem;
46 | }
47 |
48 | .controls.screenShareMode.audioMuted.videoEnabled .micMuted {
49 | display: flex;
50 | }
51 |
52 | .controls.screenShareMode.audioMuted.videoEnabled .muteButton {
53 | background-color: var(--color_thunderbird);
54 | }
55 |
56 | .controls button {
57 | width: 2.75rem;
58 | height: 2.75rem;
59 | text-align: center;
60 | border: none;
61 | border-radius: 50%;
62 | font-size: 1.25rem;
63 | color: var(--color_alabaster);
64 | background: var(--color_tundora);
65 | cursor: pointer;
66 | transition: opacity 0.15s;
67 | outline: none;
68 | z-index: 1;
69 | }
70 |
71 | .controls button.enabled {
72 | color: var(--color_tundora);
73 | background: var(--color_alabaster);
74 | }
75 |
76 | .controls button:hover {
77 | opacity: 0.8;
78 | }
79 |
80 | .controls.roomMode button + button {
81 | margin-left: 1rem;
82 | }
83 |
84 | .controls.screenShareMode button + button {
85 | margin-left: 0.5rem;
86 | }
87 |
88 | .endButton {
89 | background: var(--color_thunderbird) !important;
90 | }
91 |
--------------------------------------------------------------------------------
/app/components/Controls.tsx:
--------------------------------------------------------------------------------
1 | // Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: Apache-2.0
3 |
4 | import classNames from 'classnames/bind';
5 | import React, { useContext, useEffect, useState } from 'react';
6 | import { FormattedMessage, useIntl } from 'react-intl';
7 | import { useHistory } from 'react-router-dom';
8 |
9 | import ChimeSdkWrapper from '../chime/ChimeSdkWrapper';
10 | import routes from '../constants/routes.json';
11 | import getChimeContext from '../context/getChimeContext';
12 | import getUIStateContext from '../context/getUIStateContext';
13 | import ClassMode from '../enums/ClassMode';
14 | import ViewMode from '../enums/ViewMode';
15 | import styles from './Controls.css';
16 | import Tooltip from './Tooltip';
17 | import MessageTopic from '../enums/MessageTopic';
18 |
19 | const cx = classNames.bind(styles);
20 |
21 | enum VideoStatus {
22 | Disabled,
23 | Loading,
24 | Enabled
25 | }
26 |
27 | type Props = {
28 | viewMode: ViewMode;
29 | onClickShareButton: () => void;
30 | };
31 |
32 | export default function Controls(props: Props) {
33 | const { viewMode, onClickShareButton } = props;
34 | const chime: ChimeSdkWrapper | null = useContext(getChimeContext());
35 | const [state] = useContext(getUIStateContext());
36 | const history = useHistory();
37 | const [muted, setMuted] = useState(false);
38 | const [focus, setFocus] = useState(false);
39 | const [videoStatus, setVideoStatus] = useState(VideoStatus.Disabled);
40 | const intl = useIntl();
41 |
42 | useEffect(() => {
43 | const callback = (localMuted: boolean) => {
44 | setMuted(localMuted);
45 | };
46 | chime?.audioVideo?.realtimeSubscribeToMuteAndUnmuteLocalAudio(callback);
47 | return () => {
48 | if (chime && chime?.audioVideo) {
49 | chime?.audioVideo?.realtimeUnsubscribeToMuteAndUnmuteLocalAudio(
50 | callback
51 | );
52 | }
53 | };
54 | }, []);
55 |
56 | return (
57 |
65 |
66 |
67 |
68 | {state.classMode === ClassMode.Teacher && viewMode === ViewMode.Room && (
69 |
76 |
99 |
100 | )}
101 |
108 |
129 |
130 |
137 |
174 |
175 | {state.classMode === ClassMode.Teacher &&
176 | viewMode !== ViewMode.ScreenShare && (
177 |
180 |
189 |
190 | )}
191 | {viewMode !== ViewMode.ScreenShare && (
192 |
199 |
209 |
210 | )}
211 |
45 |
46 |
47 | {state.classMode === ClassMode.Teacher ? (
48 |
49 | ) : (
50 |
51 | )}
52 |
53 |
127 |
128 | {state.classMode === ClassMode.Teacher ? (
129 |
130 | ) : (
131 |
132 | )}
133 |
134 |
135 |
24 | {
37 | await chime?.chooseAudioInputDevice(selectedDevice);
38 | }}
39 | placeholder={
40 | deviceSwitcherState.currentAudioInputDevice
41 | ? intl.formatMessage({
42 | id: 'DeviceSwitcher.noAudioInputPlaceholder'
43 | })
44 | : ''
45 | }
46 | />
47 | {
60 | await chime?.chooseAudioOutputDevice(selectedDevice);
61 | }}
62 | placeholder={
63 | deviceSwitcherState.currentAudioOutputDevice
64 | ? intl.formatMessage({
65 | id: 'DeviceSwitcher.noAudioOutputPlaceholder'
66 | })
67 | : ''
68 | }
69 | />
70 | {
83 | await chime?.chooseVideoInputDevice(selectedDevice);
84 | }}
85 | placeholder={
86 | deviceSwitcherState.currentVideoInputDevice
87 | ? intl.formatMessage({
88 | id: 'DeviceSwitcher.noVideoInputPlaceholder'
89 | })
90 | : ''
91 | }
92 | />
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/app/components/Error.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .error {
7 | text-align: center;
8 | max-width: 50%;
9 | }
10 |
11 | .errorMessage {
12 | word-wrap: break-word;
13 | overflow-wrap: break-word;
14 | word-break: break-word;
15 | font-size: 1.5rem;
16 | }
17 |
18 | .goHomeLink {
19 | display: inline-block;
20 | border: none;
21 | border-radius: 0.25rem;
22 | padding: 0.75rem 2rem;
23 | font-size: 1.1rem;
24 | font-weight: 500;
25 | color: var(--color_mine_shaft_light);
26 | background: var(--color_alabaster);
27 | cursor: pointer;
28 | transition: opacity 0.15s;
29 | user-select: none;
30 | text-decoration: none;
31 | margin-top: 2.5rem;
32 | }
33 |
34 | .goHomeLink:hover {
35 | opacity: 0.8;
36 | }
37 |
--------------------------------------------------------------------------------
/app/components/Error.tsx:
--------------------------------------------------------------------------------
1 | // Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: Apache-2.0
3 |
4 | import classNames from 'classnames/bind';
5 | import React, { ReactNode } from 'react';
6 | import { Link } from 'react-router-dom';
7 |
8 | import routes from '../constants/routes.json';
9 | import styles from './Error.css';
10 |
11 | const cx = classNames.bind(styles);
12 |
13 | type Props = {
14 | errorMessage: ReactNode;
15 | };
16 |
17 | export default function Error(props: Props) {
18 | const { errorMessage } = props;
19 | return (
20 |
21 |
22 | {errorMessage || 'Something went wrong'}
23 |
24 |
25 | Take me home
26 |
27 |
18 | {state.classMode ? (
19 |
20 | ) : (
21 |
22 | )}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/app/components/LoadingSpinner.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .loadingSpinner {
7 | display: block;
8 | }
9 |
10 | .spinner {
11 | margin: auto;
12 | width: 40px;
13 | height: 40px;
14 | position: relative;
15 | }
16 |
17 | .circle {
18 | width: 100%;
19 | height: 100%;
20 | position: absolute;
21 | left: 0;
22 | top: 0;
23 | }
24 |
25 | .circle::before {
26 | content: '';
27 | display: block;
28 | margin: 0 auto;
29 | width: 15%;
30 | height: 15%;
31 | background-color: var(--color_alabaster);
32 | border-radius: 100%;
33 | animation: circleFadeDelay 1.2s infinite ease-in-out both;
34 | }
35 |
36 | .circle2 {
37 | transform: rotate(30deg);
38 | }
39 |
40 | .circle3 {
41 | transform: rotate(60deg);
42 | }
43 |
44 | .circle4 {
45 | transform: rotate(90deg);
46 | }
47 |
48 | .circle5 {
49 | transform: rotate(120deg);
50 | }
51 |
52 | .circle6 {
53 | transform: rotate(150deg);
54 | }
55 |
56 | .circle7 {
57 | transform: rotate(180deg);
58 | }
59 |
60 | .circle8 {
61 | transform: rotate(210deg);
62 | }
63 |
64 | .circle9 {
65 | transform: rotate(240deg);
66 | }
67 |
68 | .circle10 {
69 | transform: rotate(270deg);
70 | }
71 |
72 | .circle11 {
73 | transform: rotate(300deg);
74 | }
75 |
76 | .circle12 {
77 | transform: rotate(330deg);
78 | }
79 |
80 | .circle2::before {
81 | animation-delay: -1.1s;
82 | }
83 |
84 | .circle3::before {
85 | animation-delay: -1s;
86 | }
87 |
88 | .circle4::before {
89 | animation-delay: -0.9s;
90 | }
91 |
92 | .circle5::before {
93 | animation-delay: -0.8s;
94 | }
95 |
96 | .circle6::before {
97 | animation-delay: -0.7s;
98 | }
99 |
100 | .circle7::before {
101 | animation-delay: -0.6s;
102 | }
103 |
104 | .circle8::before {
105 | animation-delay: -0.5s;
106 | }
107 |
108 | .circle9::before {
109 | animation-delay: -0.4s;
110 | }
111 |
112 | .circle10::before {
113 | animation-delay: -0.3s;
114 | }
115 |
116 | .circle11::before {
117 | animation-delay: -0.2s;
118 | }
119 |
120 | .circle12::before {
121 | animation-delay: -0.1s;
122 | }
123 |
124 | @keyframes circleFadeDelay {
125 | 0%,
126 | 39%,
127 | 100% {
128 | opacity: 0;
129 | }
130 | 40% {
131 | opacity: 1;
132 | }
133 | }
134 |
--------------------------------------------------------------------------------
/app/components/LoadingSpinner.tsx:
--------------------------------------------------------------------------------
1 | // Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: Apache-2.0
3 |
4 | import classNames from 'classnames/bind';
5 | import React from 'react';
6 |
7 | import styles from './LoadingSpinner.css';
8 |
9 | const cx = classNames.bind(styles);
10 |
11 | export default function LoadingSpinner() {
12 | return (
13 |
14 |
15 | {Array.from(Array(12).keys()).map(key => (
16 |
17 | ))}
18 |
19 |
45 |
46 |
47 | );
48 | }
49 |
--------------------------------------------------------------------------------
/app/components/Login.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3 | * SPDX-License-Identifier: Apache-2.0
4 | */
5 |
6 | .login {
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | height: 100%;
11 | }
12 |
13 | .content {
14 | color: var(--color_mine_shaft_dark);
15 | width: var(--screen_picker_width);
16 | background-color: var(--color_alabaster);
17 | border-radius: 0.25rem;
18 | padding: 5rem 5rem 6rem;
19 | }
20 |
21 | .title {
22 | margin: 0 0 1rem;
23 | }
24 |
25 | .selection {
26 | display: flex;
27 | }
28 |
29 | .selection div {
30 | width: 50%;
31 | }
32 |
33 | .selection div + div {
34 | margin-left: 3rem;
35 | }
36 |
37 | .selection h2 {
38 | font-size: 1.4rem;
39 | }
40 |
41 | .selection ul {
42 | padding-left: 1.5rem;
43 | font-size: 1.1rem;
44 | }
45 |
46 | .selection ul ul {
47 | padding-top: 0.5rem;
48 | }
49 |
50 | .selection li + li {
51 | margin-top: 0.5rem;
52 | }
53 |
54 | .selection button {
55 | border: none;
56 | border-radius: 0.25rem;
57 | padding: 0.75rem 1rem;
58 | font-size: 1.1rem;
59 | font-weight: 500;
60 | color: var(--color_alabaster);
61 | background: var(--color_mine_shaft_light);
62 | cursor: pointer;
63 | transition: background-color 0.15s;
64 | user-select: none;
65 | margin-top: 0.75rem;
66 | }
67 |
68 | .selection button:hover {
69 | background: var(--color_cod_gray_medium);
70 | }
71 |
--------------------------------------------------------------------------------
/app/components/Login.tsx:
--------------------------------------------------------------------------------
1 | // Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: Apache-2.0
3 |
4 | import classNames from 'classnames/bind';
5 | import React, { useContext, useEffect } from 'react';
6 | import { FormattedMessage } from 'react-intl';
7 | import { useHistory } from 'react-router-dom';
8 |
9 | import localStorageKeys from '../constants/localStorageKeys.json';
10 | import routes from '../constants/routes.json';
11 | import getUIStateContext from '../context/getUIStateContext';
12 | import ClassMode from '../enums/ClassMode';
13 | import styles from './Login.css';
14 |
15 | const cx = classNames.bind(styles);
16 |
17 | export default function Login() {
18 | const [, dispatch] = useContext(getUIStateContext());
19 | const history = useHistory();
20 |
21 | useEffect(() => {
22 | localStorage.clear();
23 | dispatch({
24 | type: 'SET_CLASS_MODE',
25 | payload: {
26 | classMode: null
27 | }
28 | });
29 | }, []);
30 |
31 | return (
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | -
44 |
45 |
46 | -
47 |
48 |
49 | -
50 |
51 |
52 | -
53 |
54 |
55 |
56 | -
57 |
58 |
59 | -
60 |
61 |
62 |
63 |
64 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | -
89 |
90 |
91 | -
92 |
93 |
94 | -
95 |
96 |
97 | -
98 |
99 |
100 |
101 | -
102 |
103 |
104 | -
105 |
106 |
107 |
108 |
109 |
127 |
128 |
129 |
130 |
47 |
48 |
54 | {raisedHand && (
55 |
56 |
62 | ✋
63 |
64 |
65 | )}
66 |
122 | {numberOfVisibleIndices === 0 && (
123 |
124 |
125 |
126 | )}
127 | {Array.from(Array(MAX_REMOTE_VIDEOS).keys()).map((key, index) => {
128 | const visibleIndex = visibleIndices[index];
129 | const attendeeId = visibleIndex ? visibleIndex.boundAttendeeId : null;
130 | const raisedHand = raisedHandAttendees
131 | ? raisedHandAttendees.has(attendeeId)
132 | : false;
133 | const activeSpeaker = visibleIndex
134 | ? roster[visibleIndex.boundAttendeeId]?.active
135 | : false;
136 | return (
137 |
{
142 | if (element) {
143 | videoElements[index] = element;
144 | }
145 | }, [])}
146 | size={getSize()}
147 | attendeeId={attendeeId}
148 | raisedHand={raisedHand}
149 | activeSpeaker={activeSpeaker}
150 | isContentShareEnabled={isContentShareEnabled}
151 | />
152 | );
153 | })}
154 |
70 | {attendeeIds &&
71 | attendeeIds.map((attendeeId: string) => {
72 | const rosterAttendee: RosterAttendeeType = roster[attendeeId];
73 | return (
74 |
75 |
{rosterAttendee.name}
76 | {raisedHandAttendees.has(attendeeId) && (
77 |
78 |
89 | ✋
90 |
91 |
92 | )}
93 | {videoAttendees.has(attendeeId) && (
94 |
95 |
96 |
97 | )}
98 | {typeof rosterAttendee.muted === 'boolean' && (
99 |
100 | {rosterAttendee.muted ? (
101 |
102 | ) : (
103 |
114 | )}
115 |
116 | )}
117 |
118 | );
119 | })}
120 |
78 |
79 |
80 |
81 |
82 |
83 |
94 |
105 |
106 |
107 |
112 | {!sources &&
}
113 | {sources && selectedSources && !selectedSources.length && (
114 |
115 |
116 |
117 | )}
118 | {sources &&
119 | selectedSources &&
120 | selectedSources.map(source => (
121 |
{
127 | setSelectedSourceId(source.id);
128 | }}
129 | onKeyPress={() => {}}
130 | role="button"
131 | tabIndex={0}
132 | >
133 |
134 |
})
135 |
136 |
{source.name}
137 |
138 | ))}
139 |
140 |
141 |
142 |
151 |
165 |
166 |
167 |
22 |
29 |
30 | {roster ? (
31 |
37 | ) : (
38 | ` `
39 | )}
40 |
41 |
44 |
{name}
45 |
46 | {muted ? (
47 |
48 | ) : (
49 |
50 | )}
51 |
52 |
Download ${appName}
199 |
203 |
204 |
205 |
206 | `
207 | );
208 |
209 | const packageJson = JSON.parse(
210 | fs.readFileSync(`${rootDir}/package.json`, 'utf8')
211 | );
212 | packageJson.productName = appName;
213 | packageJson.build.productName = appName;
214 | packageJson.build.appId = `com.amazonaws.services.chime.sdk.classroom.demo.${appName}`;
215 | fs.writeFileSync(
216 | `${rootDir}/package.json`,
217 | JSON.stringify(packageJson, null, 2)
218 | );
219 |
220 | let mainDevTs = fs.readFileSync(`${rootDir}/app/main.dev.ts`, 'utf8');
221 | mainDevTs = mainDevTs.replace(/setTitle.*?[;]/g, `setTitle('${appName}');`);
222 | fs.writeFileSync(`${rootDir}/app/main.dev.ts`, mainDevTs);
223 |
224 | let appHtml = fs.readFileSync(`${rootDir}/app/app.html`, 'utf8');
225 | appHtml = appHtml.replace(
226 | /[<]title[>].*?[<][/]title[>]/g,
227 | `${appName}`
228 | );
229 | fs.writeFileSync(`${rootDir}/app/app.html`, appHtml);
230 |
231 | spawnOrFail('sam', [
232 | 'package',
233 | '--s3-bucket',
234 | `${bucket}`,
235 | `--output-template-file`,
236 | `build/packaged.yaml`,
237 | '--region',
238 | `${region}`
239 | ]);
240 | console.log('Deploying serverless application');
241 | spawnOrFail('sam', [
242 | 'deploy',
243 | '--template-file',
244 | './build/packaged.yaml',
245 | '--stack-name',
246 | `${stack}`,
247 | '--capabilities',
248 | 'CAPABILITY_IAM',
249 | '--region',
250 | `${region}`
251 | ]);
252 | const endpoint = spawnOrFail('aws', [
253 | 'cloudformation',
254 | 'describe-stacks',
255 | '--stack-name',
256 | `${stack}`,
257 | '--query',
258 | 'Stacks[0].Outputs[0].OutputValue',
259 | '--output',
260 | 'text',
261 | '--region',
262 | `${region}`
263 | ]).trim();
264 | const messagingWssUrl = spawnOrFail('aws', [
265 | 'cloudformation',
266 | 'describe-stacks',
267 | '--stack-name',
268 | `${stack}`,
269 | '--query',
270 | 'Stacks[0].Outputs[1].OutputValue',
271 | '--output',
272 | 'text',
273 | '--region',
274 | `${region}`
275 | ]).trim();
276 | console.log(`Endpoint: ${endpoint}`);
277 | console.log(`Messaging WSS URL: ${messagingWssUrl}`);
278 |
279 | process.chdir(rootDir);
280 |
281 | fs.writeFileSync(
282 | 'app/utils/getBaseUrl.ts',
283 | `
284 | export default function getBaseUrl() {return '${endpoint}';}
285 | `
286 | );
287 |
288 | fs.writeFileSync(
289 | 'app/utils/getMessagingWssUrl.ts',
290 | `
291 | export default function getMessagingWssUrl() {return '${messagingWssUrl}';}
292 | `
293 | );
294 |
295 | spawnOrFail('yarn', []);
296 |
297 | console.log('... packaging (this may take a while) ...');
298 | spawnAndIgnoreResult('yarn', ['package-mac']);
299 | spawnAndIgnoreResult('yarn', ['package-win']);
300 | spawnOrFail('rm', ['-rf', `release/${appName}`]);
301 | spawnOrFail('mv', ['release/win-unpacked', `release/${appName}`]);
302 | process.chdir(`${rootDir}/release`);
303 | spawnOrFail('zip', ['-r', `${appName}-win.zip`, appName]);
304 | process.chdir(rootDir);
305 |
306 | console.log('... uploading Mac installer (this may take a while) ...');
307 | spawnOrFail('aws', [
308 | 's3',
309 | 'cp',
310 | '--acl',
311 | 'public-read',
312 | `release/${appName}.zip`,
313 | `s3://${bucket}-releases/mac/${appName}.zip`
314 | ]);
315 |
316 | console.log('... uploading Windows installer (this may take a while) ...');
317 | spawnOrFail('aws', [
318 | 's3',
319 | 'cp',
320 | '--acl',
321 | 'public-read',
322 | `release/${appName}-win.zip`,
323 | `s3://${bucket}-releases/win/${appName}.zip`
324 | ]);
325 |
326 | console.log('=============================================================');
327 | console.log('');
328 | console.log('Link to download application:');
329 | console.log(endpoint);
330 | console.log('');
331 | console.log('=============================================================');
332 | }
333 |
334 | main();
335 |
--------------------------------------------------------------------------------
/serverless/.gitignore:
--------------------------------------------------------------------------------
1 | src/aws-sdk
2 | src/index.html
3 | src/indexV2.html
4 |
--------------------------------------------------------------------------------
/serverless/src/handlers.js:
--------------------------------------------------------------------------------
1 | var AWS = require('aws-sdk');
2 | var ddb = new AWS.DynamoDB();
3 | const chime = new AWS.Chime({ region: 'us-east-1' });
4 | chime.endpoint = new AWS.Endpoint('https://service.chime.aws.amazon.com/console');
5 |
6 | const oneDayFromNow = Math.floor(Date.now() / 1000) + 60 * 60 * 24;
7 |
8 | // Read resource names from the environment
9 | const meetingsTableName = process.env.MEETINGS_TABLE_NAME;
10 | const attendeesTableName = process.env.ATTENDEES_TABLE_NAME;
11 |
12 | function uuid() {
13 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
14 | var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
15 | return v.toString(16);
16 | });
17 | }
18 |
19 | const getMeeting = async(meetingTitle) => {
20 | const result = await ddb.getItem({
21 | TableName: meetingsTableName,
22 | Key: {
23 | 'Title': {
24 | S: meetingTitle
25 | },
26 | },
27 | }).promise();
28 | if (!result.Item) {
29 | return null;
30 | }
31 | const meetingData = JSON.parse(result.Item.Data.S);
32 | try {
33 | await chime.getMeeting({
34 | MeetingId: meetingData.Meeting.MeetingId
35 | }).promise();
36 | } catch (err) {
37 | return null;
38 | }
39 | return meetingData;
40 | }
41 |
42 | const putMeeting = async(title, meetingInfo) => {
43 | await ddb.putItem({
44 | TableName: meetingsTableName,
45 | Item: {
46 | 'Title': { S: title },
47 | 'Data': { S: JSON.stringify(meetingInfo) },
48 | 'TTL': {
49 | N: '' + oneDayFromNow
50 | }
51 | }
52 | }).promise();
53 | }
54 |
55 | const getAttendee = async(title, attendeeId) => {
56 | const result = await ddb.getItem({
57 | TableName: attendeesTableName,
58 | Key: {
59 | 'AttendeeId': {
60 | S: `${title}/${attendeeId}`
61 | }
62 | }
63 | }).promise();
64 | if (!result.Item) {
65 | return 'Unknown';
66 | }
67 | return result.Item.Name.S;
68 | }
69 |
70 | const putAttendee = async(title, attendeeId, name) => {
71 | await ddb.putItem({
72 | TableName: attendeesTableName,
73 | Item: {
74 | 'AttendeeId': {
75 | S: `${title}/${attendeeId}`
76 | },
77 | 'Name': { S: name },
78 | 'TTL': {
79 | N: '' + oneDayFromNow
80 | }
81 | }
82 | }).promise();
83 | }
84 |
85 | function simplifyTitle(title) {
86 | // Strip out most symbolic characters and whitespace and make case insensitive,
87 | // but preserve any Unicode characters outside of the ASCII range.
88 | return (title || '').replace(/[\s()!@#$%^&*`~_=+{}|\\;:'",.<>/?\[\]-]+/gu, '').toLowerCase() || null;
89 | }
90 |
91 | // ===== Join or create meeting ===================================
92 | exports.createMeeting = async(event, context, callback) => {
93 | var response = {
94 | "statusCode": 200,
95 | "headers": {},
96 | "body": '',
97 | "isBase64Encoded": false
98 | };
99 | event.queryStringParameters.title = simplifyTitle(event.queryStringParameters.title);
100 | if (!event.queryStringParameters.title) {
101 | response["statusCode"] = 400;
102 | response["body"] = "Must provide title";
103 | callback(null, response);
104 | return;
105 | }
106 | const title = event.queryStringParameters.title;
107 | const region = event.queryStringParameters.region || 'us-east-1';
108 | let meetingInfo = await getMeeting(title);
109 | if (!meetingInfo) {
110 | const request = {
111 | ClientRequestToken: uuid(),
112 | MediaRegion: region,
113 | };
114 | console.info('Creating new meeting: ' + JSON.stringify(request));
115 | meetingInfo = await chime.createMeeting(request).promise();
116 | await putMeeting(title, meetingInfo);
117 | }
118 |
119 | const joinInfo = {
120 | JoinInfo: {
121 | Title: title,
122 | Meeting: meetingInfo.Meeting,
123 | },
124 | };
125 |
126 | response.body = JSON.stringify(joinInfo, '', 2);
127 | callback(null, response);
128 | };
129 |
130 | exports.join = async(event, context, callback) => {
131 | var response = {
132 | "statusCode": 200,
133 | "headers": {},
134 | "body": '',
135 | "isBase64Encoded": false
136 | };
137 |
138 | event.queryStringParameters.title = simplifyTitle(event.queryStringParameters.title);
139 | if (!event.queryStringParameters.title || !event.queryStringParameters.name) {
140 | response["statusCode"] = 400;
141 | response["body"] = "Must provide title and name";
142 | callback(null, response);
143 | return;
144 | }
145 | const title = event.queryStringParameters.title;
146 | const name = event.queryStringParameters.name;
147 | const region = event.queryStringParameters.region || 'us-east-1';
148 | let meetingInfo = await getMeeting(title);
149 | if (!meetingInfo && event.queryStringParameters.role !== 'student') {
150 | const request = {
151 | ClientRequestToken: uuid(),
152 | MediaRegion: region,
153 | };
154 | console.info('Creating new meeting: ' + JSON.stringify(request));
155 | meetingInfo = await chime.createMeeting(request).promise();
156 | await putMeeting(title, meetingInfo);
157 | }
158 |
159 | console.info('Adding new attendee');
160 | const attendeeInfo = (await chime.createAttendee({
161 | MeetingId: meetingInfo.Meeting.MeetingId,
162 | ExternalUserId: uuid(),
163 | }).promise());
164 |
165 | putAttendee(title, attendeeInfo.Attendee.AttendeeId, name);
166 |
167 | const joinInfo = {
168 | JoinInfo: {
169 | Title: title,
170 | Meeting: meetingInfo.Meeting,
171 | Attendee: attendeeInfo.Attendee
172 | },
173 | };
174 |
175 | response.body = JSON.stringify(joinInfo, '', 2);
176 | callback(null, response);
177 | };
178 |
179 | exports.attendee = async(event, context, callback) => {
180 | var response = {
181 | "statusCode": 200,
182 | "headers": {},
183 | "body": '',
184 | "isBase64Encoded": false
185 | };
186 | event.queryStringParameters.title = simplifyTitle(event.queryStringParameters.title);
187 | const title = event.queryStringParameters.title;
188 | const attendeeId = event.queryStringParameters.attendee;
189 | const attendeeInfo = {
190 | AttendeeInfo: {
191 | AttendeeId: attendeeId,
192 | Name: await getAttendee(title, attendeeId),
193 | },
194 | };
195 | response.body = JSON.stringify(attendeeInfo, '', 2);
196 | callback(null, response);
197 | };
198 |
199 | exports.end = async(event, context, callback) => {
200 | var response = {
201 | "statusCode": 200,
202 | "headers": {},
203 | "body": '',
204 | "isBase64Encoded": false
205 | };
206 | event.queryStringParameters.title = simplifyTitle(event.queryStringParameters.title);
207 | const title = event.queryStringParameters.title;
208 | let meetingInfo = await getMeeting(title);
209 | await chime.deleteMeeting({
210 | MeetingId: meetingInfo.Meeting.MeetingId,
211 | }).promise();
212 | callback(null, response);
213 | };
214 |
--------------------------------------------------------------------------------
/serverless/src/index.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 |
3 | exports.handler = async (event, context, callback) => {
4 | const response = {
5 | statusCode: 200,
6 | headers: {
7 | 'Content-Type': 'text/html'
8 | },
9 | body: '',
10 | isBase64Encoded: false
11 | };
12 | response.body = fs.readFileSync('./index.html', { encoding: 'utf8' });
13 | callback(null, response);
14 | };
15 |
--------------------------------------------------------------------------------
/serverless/src/messaging.js:
--------------------------------------------------------------------------------
1 | // Copyright 2020 Amazon.com, Inc. or its affiliates. All Rights Reserved.
2 | // SPDX-License-Identifier: Apache-2.0
3 |
4 | const AWS = require('aws-sdk');
5 |
6 | const ddb = new AWS.DynamoDB({ region: process.env.AWS_REGION });
7 | const chime = new AWS.Chime({ region: 'us-east-1' });
8 | chime.endpoint = new AWS.Endpoint(
9 | 'https://service.chime.aws.amazon.com/console'
10 | );
11 | const { CONNECTIONS_TABLE_NAME } = process.env;
12 | const strictVerify = true;
13 |
14 | exports.authorize = async (event, context, callback) => {
15 | console.log('authorize event:', JSON.stringify(event, null, 2));
16 | const generatePolicy = (principalId, effect, resource, context) => {
17 | const authResponse = {};
18 | authResponse.principalId = principalId;
19 | if (effect && resource) {
20 | const policyDocument = {};
21 | policyDocument.Version = '2012-10-17';
22 | policyDocument.Statement = [];
23 | const statementOne = {};
24 | statementOne.Action = 'execute-api:Invoke';
25 | statementOne.Effect = effect;
26 | statementOne.Resource = resource;
27 | policyDocument.Statement[0] = statementOne;
28 | authResponse.policyDocument = policyDocument;
29 | }
30 | authResponse.context = context;
31 | return authResponse;
32 | };
33 | let passedAuthCheck = false;
34 | if (
35 | !!event.queryStringParameters.MeetingId &&
36 | !!event.queryStringParameters.AttendeeId &&
37 | !!event.queryStringParameters.JoinToken
38 | ) {
39 | try {
40 | attendeeInfo = await chime
41 | .getAttendee({
42 | MeetingId: event.queryStringParameters.MeetingId,
43 | AttendeeId: event.queryStringParameters.AttendeeId
44 | })
45 | .promise();
46 | if (
47 | attendeeInfo.Attendee.JoinToken ===
48 | event.queryStringParameters.JoinToken
49 | ) {
50 | passedAuthCheck = true;
51 | } else if (strictVerify) {
52 | console.error('failed to authenticate with join token');
53 | } else {
54 | passedAuthCheck = true;
55 | console.warn(
56 | 'failed to authenticate with join token (skipping due to strictVerify=false)'
57 | );
58 | }
59 | } catch (e) {
60 | if (strictVerify) {
61 | console.error(`failed to authenticate with join token: ${e.message}`);
62 | } else {
63 | passedAuthCheck = true;
64 | console.warn(
65 | `failed to authenticate with join token (skipping due to strictVerify=false): ${e.message}`
66 | );
67 | }
68 | }
69 | } else {
70 | console.error('missing MeetingId, AttendeeId, JoinToken parameters');
71 | }
72 | return generatePolicy(
73 | 'me',
74 | passedAuthCheck ? 'Allow' : 'Deny',
75 | event.methodArn,
76 | {
77 | MeetingId: event.queryStringParameters.MeetingId,
78 | AttendeeId: event.queryStringParameters.AttendeeId
79 | }
80 | );
81 | };
82 |
83 | exports.onconnect = async event => {
84 | console.log('onconnect event:', JSON.stringify(event, null, 2));
85 | const oneDayFromNow = Math.floor(Date.now() / 1000) + 60 * 60 * 24;
86 | try {
87 | await ddb
88 | .putItem({
89 | TableName: process.env.CONNECTIONS_TABLE_NAME,
90 | Item: {
91 | MeetingId: { S: event.requestContext.authorizer.MeetingId },
92 | AttendeeId: { S: event.requestContext.authorizer.AttendeeId },
93 | ConnectionId: { S: event.requestContext.connectionId },
94 | TTL: { N: `${oneDayFromNow}` }
95 | }
96 | })
97 | .promise();
98 | } catch (e) {
99 | console.error(`error connecting: ${e.message}`);
100 | return {
101 | statusCode: 500,
102 | body: `Failed to connect: ${JSON.stringify(err)}`
103 | };
104 | }
105 | return { statusCode: 200, body: 'Connected.' };
106 | };
107 |
108 | exports.ondisconnect = async event => {
109 | console.log('ondisconnect event:', JSON.stringify(event, null, 2));
110 | try {
111 | await ddb
112 | .deleteItem({
113 | TableName: process.env.CONNECTIONS_TABLE_NAME,
114 | Key: {
115 | MeetingId: { S: event.requestContext.authorizer.MeetingId },
116 | AttendeeId: { S: event.requestContext.authorizer.AttendeeId },
117 | },
118 | })
119 | .promise();
120 | } catch (err) {
121 | return {
122 | statusCode: 500,
123 | body: `Failed to disconnect: ${JSON.stringify(err)}`
124 | };
125 | }
126 | return { statusCode: 200, body: 'Disconnected.' };
127 | };
128 |
129 | exports.sendmessage = async event => {
130 | console.log('sendmessage event:', JSON.stringify(event, null, 2));
131 | let attendees = {};
132 | try {
133 | attendees = await ddb
134 | .query({
135 | ExpressionAttributeValues: {
136 | ':meetingId': { S: event.requestContext.authorizer.MeetingId }
137 | },
138 | KeyConditionExpression: 'MeetingId = :meetingId',
139 | ProjectionExpression: 'ConnectionId',
140 | TableName: CONNECTIONS_TABLE_NAME
141 | })
142 | .promise();
143 | } catch (e) {
144 | return { statusCode: 500, body: e.stack };
145 | }
146 | const apigwManagementApi = new AWS.ApiGatewayManagementApi({
147 | apiVersion: '2018-11-29',
148 | endpoint: `${event.requestContext.domainName}/${event.requestContext.stage}`
149 | });
150 | const postData = JSON.parse(event.body).data;
151 | const postCalls = attendees.Items.map(async connection => {
152 | const connectionId = connection.ConnectionId.S;
153 | try {
154 | await apigwManagementApi
155 | .postToConnection({ ConnectionId: connectionId, Data: postData })
156 | .promise();
157 | } catch (e) {
158 | if (e.statusCode === 410) {
159 | console.log(`found stale connection, skipping ${connectionId}`);
160 | } else {
161 | console.error(
162 | `error posting to connection ${connectionId}: ${e.message}`
163 | );
164 | }
165 | }
166 | });
167 | try {
168 | await Promise.all(postCalls);
169 | } catch (e) {
170 | console.error(`failed to post: ${e.message}`);
171 | return { statusCode: 500, body: e.stack };
172 | }
173 | return { statusCode: 200, body: 'Data sent.' };
174 | };
175 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2018",
4 | "module": "CommonJS",
5 | "lib": ["dom", "esnext"],
6 | "declaration": true,
7 | "declarationMap": true,
8 | "noEmit": true,
9 | "jsx": "react",
10 | "strict": true,
11 | "pretty": true,
12 | "sourceMap": true,
13 | /* Additional Checks */
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "noImplicitReturns": true,
17 | "noFallthroughCasesInSwitch": true,
18 | /* Module Resolution Options */
19 | "moduleResolution": "node",
20 | "esModuleInterop": true,
21 | "allowSyntheticDefaultImports": true,
22 | "resolveJsonModule": true,
23 | "allowJs": true,
24 | "skipLibCheck": true
25 | },
26 | "exclude": [
27 | "test",
28 | "release",
29 | "app/main.prod.js",
30 | "app/main.prod.js.map",
31 | "app/renderer.prod.js",
32 | "app/renderer.prod.js.map",
33 | "app/style.css",
34 | "app/style.css.map",
35 | "app/dist",
36 | "dll",
37 | "app/main.js",
38 | "app/main.js.map"
39 | ]
40 | }
41 |
--------------------------------------------------------------------------------
6 |
7 | ## Installation
8 |
9 | To package this demo, there are two options available. The first option is to package the demo via Cloud9 and the second option is to package from the local machine.
10 |
11 | The two options are very similar in their internal working. On a high level the following steps are performed in the packaging of the demo:
12 |
13 | 1. CLI arguments are parsed and the installation of prerequisites is verified. `yarn` is installed globally in the environment.
14 | 2. For installation option 1, Cloud9 volume size might be increased.
15 | 3. S3 buckets are created.
16 | 4. `sam` packages the application.
17 | 5. `sam` deploys the application.
18 | 6. The output of the AWS cloudformation stack is retrieved.
19 | 7. Using `electron-builder` mac application is packaged.
20 | 8. Using `electron-builder` windows application is packaged.
21 | 9. Generated packages are copied from local workspace / cloud9 environment to S3 buckets.
22 |
23 | At the end of the script run, a link to download the packaged demos will be displayed. Now, the teacher and the students can use that link to download the classroom application on their machine.
24 |
25 | ### Option 1: Deploy via AWS Cloud9
26 |
27 | #### Prerequisites
28 |
29 | - Log into your AWS account with an IAM role that has the **AdministratorAccess** policy.
30 | - Use the **us-east-1 (N. Virginia)** region of your AWS account.
31 |
32 | #### Create an AWS Cloud9 environment
33 |
34 | 1. Go to the [AWS Cloud9 Dashboard](https://us-east-1.console.aws.amazon.com/cloud9/home?region=us-east-1).
35 | 2. Press the **Create environment** button or go [here](https://us-east-1.console.aws.amazon.com/cloud9/home/create).
36 | 3. For the Name enter `