50 | )
51 | }
52 | renderContent = () => {
53 | if(this.state.showLoader){
54 | return (
55 |
56 | Uploading Files...
57 |
58 | )
59 | } else {
60 | return (
61 |
77 | )
78 | }
79 | }
80 | render(){
81 | return(
82 |
83 | {this.renderContent()}
84 |
85 | )
86 | }
87 | };
88 |
89 | BookCreateForm.contextType = adminContext;
90 | export default BookCreateForm;
91 |
92 |
93 |
--------------------------------------------------------------------------------
/src/components/BooksList/BooksList.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Card, Button, Icon} from 'semantic-ui-react';
3 | import ConfirmTemplate from '../Confirm/Confim';
4 | import {serverAPI} from '../../api/api';
5 | import adminContext from '../../contexts/adminContext';
6 |
7 | let INITIAL_STATE = {showConfirm: false, selectedBook: null}
8 |
9 | class BooksList extends Component{
10 | state = INITIAL_STATE
11 | handleConfirm = book => {
12 | this.deleteBook(book)
13 | }
14 | handleCancel = () => {
15 | this.setState({showConfirm: false, selectedBook: null})
16 | }
17 | deleteBook = book => {
18 | serverAPI.delete(`/books/${this.state.selectedBook._id}`)
19 | .then(() => {
20 | this.setState({showConfirm: false, selectedBook: null});
21 | this.context.fetchBooksList();
22 | })
23 | .catch(err => console.log(err));
24 | }
25 | renderAuthor = book => {
26 | if(!book.author){
27 | return {book.author}
30 | }
31 | renderBooksList = () => {
32 | let books = this.context.books;
33 | if(!books || books.length < 1){
34 | return Loading books...
35 | } else {
36 | return books.map(book => {
37 | return (
38 |
39 |
40 | {book.name}
41 |
42 | Author: {this.renderAuthor(book)}
43 | {book.parts.length} parts
44 |
45 |
46 |
47 |
51 |
54 | {
57 | this.setState({showConfirm: true, selectedBook: book})
58 | }}>
59 |
62 |
63 |
64 |
65 |
66 | )
67 | })
68 | }
69 | }
70 | renderContent = () => {
71 | if(!this.state.showConfirm && !this.state.selectedBook){
72 | return (
73 |
74 | {this.renderBooksList()}
75 |
76 | )
77 | } else {
78 | let content = `Are you sure you want to delete "${this.state.selectedBook.name}" ?`;
79 | return (
80 |
81 |
89 | )
90 | }
91 | }
92 | componentDidMount(){
93 | this.context.fetchBooksList()
94 | }
95 | render(){
96 | return (
97 |
98 | {this.renderContent()}
99 |
100 | )
101 | }
102 | }
103 | BooksList.contextType = adminContext;
104 | export default BooksList;
--------------------------------------------------------------------------------
/src/components/Confirm/Confim.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Confirm, Button} from 'semantic-ui-react';
3 |
4 | class ConfirmTemplate extends Component{
5 | constructor(props){
6 | super(props);
7 | }
8 | render(){
9 | return(
10 |
11 | this.props.handleConfirm()}
14 | onCancel={() => this.props.handleCancel()}
15 | onClose={() => this.props.handleCancel()}
16 | header={this.props.header}
17 | content={this.props.content}
18 | />
19 |
20 | )
21 | }
22 | }
23 |
24 |
25 | export default ConfirmTemplate;
--------------------------------------------------------------------------------
/src/components/LoginForm/LoginForm.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Form, Message ,Button} from 'semantic-ui-react';
3 | import appContext from '../../contexts/appContext';
4 |
5 | class LoginForm extends Component{
6 | state = {
7 | username: null,
8 | password: null,
9 | err: null
10 | }
11 | validateForm = () => {
12 | if(!this.state.username || this.state.username.length < 3){
13 | return this.setState({err: "Invalid username"})
14 | }
15 | if(!this.state.password || this.state.password.length < 3){
16 | return this.setState({err: "Invalid password"})
17 | }
18 | this.setState({err: null});
19 | return this.context.fetchRoomData({username: this.state.username, password: this.state.password});
20 | }
21 | setUsername = (event) => {
22 | this.setState({username: event.target.value})
23 | }
24 | setPassword = (event) => {
25 | this.setState({password: event.target.value})
26 | }
27 | renderErrorMessage = () => {
28 | if(this.state.err === null){
29 | return;
30 | }
31 | return (
32 |
33 | )
34 | }
35 | render(){
36 | return(
37 |
49 | )
50 | }
51 | };
52 |
53 | LoginForm.contextType = appContext;
54 | export default LoginForm;
55 |
56 |
57 |
--------------------------------------------------------------------------------
/src/components/Modal/Modal.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Modal, Header, Button, Icon, Segment} from 'semantic-ui-react';
3 |
4 | class ModalTemplate extends Component{
5 | renderTriggerButton = () => {
6 | return (
7 |
8 |
9 |
10 |
11 |
13 |
14 |
15 |
16 | )
17 | }
18 | render(){
19 | return(
20 |
21 |
22 |
23 | {this.props.content}
24 |
25 |
26 | )
27 | }
28 | }
29 |
30 | export default ModalTemplate;
--------------------------------------------------------------------------------
/src/components/ModalNav/ModalNav.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Modal, Header, Button, Icon, Segment} from 'semantic-ui-react';
3 | import adminContext from '../../contexts/adminContext';
4 |
5 |
6 | class ModalNavTemplate extends Component{
7 | renderTriggerButton = () => {
8 | return (
9 |
10 |
11 | {this.context.dispalyNavModal(true)}}>
12 |
13 |
15 |
16 |
17 |
18 | )
19 | }
20 | render(){
21 | return(
22 | this.context.dispalyNavModal(false) }>
23 |
24 |
25 | {this.props.content}
26 |
27 |
28 | )
29 | }
30 | }
31 |
32 | ModalNavTemplate.contextType = adminContext;
33 | export default ModalNavTemplate;
--------------------------------------------------------------------------------
/src/components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Menu, Input} from 'semantic-ui-react';
3 | import adminContext from '../../contexts/adminContext';
4 | import ModalNav from '../ModalNav/ModalNav';
5 | import UserCreateForm from '../UserCreateForm/UserCreateForm';
6 | import BookCreateForm from '../BookCreateForm/BookCreateForm';
7 |
8 | class NavBar extends Component{
9 | renderAddButton = () => {
10 | if(!this.context.activeMenuItem){
11 | return
23 | }
24 | if(this.context.activeMenuItem === 'Books'){
25 | return (
26 |
48 |
49 |
50 |
51 |
52 | {this.renderAddButton()}
53 | {this.renderSearchBox()}
54 |
55 |
56 | )
57 | }
58 | render(){
59 | return(
60 |
61 | {this.renderMenu()}
62 |
63 | )
64 | }
65 | }
66 |
67 | NavBar.contextType = adminContext;
68 | export default NavBar
--------------------------------------------------------------------------------
/src/components/RoomControls/RoomControls.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Button, Segment, Icon, Header, ButtonGroup} from 'semantic-ui-react';
3 | import adminContext from '../../contexts/adminContext';
4 | const Peer = window.Peer;
5 |
6 | let ctx;
7 | let adminMicGain;
8 | let outputToUser;
9 | let startCtx;
10 | let disconnectButton;
11 | let adminPlayer;
12 | let talkBackButton;
13 | let userMicGainSlider;
14 | let timeDisplay;
15 | let userPlayerGainSlider;
16 | let startUserPlayerBtn;
17 | let pauseUserPlayerBtn;
18 | let stopUserPlayerBtn;
19 | let rewind
20 | let fforward;
21 | let oscActive;
22 | let oscGain;
23 |
24 | class RoomControls extends React.Component{
25 | constructor(props){
26 | super(props)
27 | this.state = {
28 | call: null
29 | }
30 | }
31 | renderRoomMixControls = () => {
32 | return(
33 |
34 | Mic Volume
35 | Sound Volume
46 |
57 | )
58 | }
59 | renderOscControls = () => {
60 | return(
61 |
62 | OSC
63 |
75 | )
76 | }
77 | renderPlayerControls = () => {
78 | let isDisabled = this.context.onlineRooms.includes(this.context.selectedRoom.username) ? false : true;
79 | return (
80 |
81 | Connection
82 |
83 |
84 |
86 | Talkback
87 |
88 |
90 | Controls
91 |
92 |
98 |
99 | )
100 | }
101 | initUiElements = () => {
102 | startCtx = document.getElementById('startctx');
103 | disconnectButton = document.getElementById('disconnect');
104 | adminPlayer = document.querySelector('audio');
105 | talkBackButton = document.getElementById('talkback');
106 | userMicGainSlider = document.querySelector('#micGain');
107 | userPlayerGainSlider = document.querySelector('#playerGain');
108 | startUserPlayerBtn = document.getElementById('startUserPlayer');
109 | pauseUserPlayerBtn = document.getElementById('pauseUserPlayer');
110 | stopUserPlayerBtn = document.getElementById('stopUserPlayer');
111 | timeDisplay = document.getElementById('timeDisplay');
112 | rewind = document.getElementById('rewind');
113 | fforward = document.getElementById('fforward');
114 | oscActive = document.getElementById('oscActive');
115 | oscGain = document.getElementById('oscGain');
116 | this.disableUiElements();
117 | }
118 | disableUiElements = () => {
119 | startCtx.removeAttribute('disabled');
120 | disconnectButton.setAttribute('disabled', true);
121 | talkBackButton.setAttribute('disabled', true);
122 | startUserPlayerBtn.setAttribute('disabled', true);
123 | pauseUserPlayerBtn.setAttribute('disabled', true);
124 | stopUserPlayerBtn.setAttribute('disabled', true);
125 | rewind.setAttribute('disabled', true);
126 | fforward.setAttribute('disabled', true);
127 | userMicGainSlider.setAttribute('disabled', true);
128 | userPlayerGainSlider.setAttribute('disabled', true);
129 | }
130 | enableUiElements = () => {
131 | startCtx.setAttribute('disabled', true);
132 | startUserPlayerBtn.removeAttribute('disabled');
133 | disconnectButton.removeAttribute('disabled');
134 | talkBackButton.removeAttribute('disabled');
135 | pauseUserPlayerBtn.removeAttribute('disabled');
136 | stopUserPlayerBtn.removeAttribute('disabled');
137 | rewind.removeAttribute('disabled');
138 | fforward.removeAttribute('disabled');
139 | userMicGainSlider.removeAttribute('disabled');
140 | userPlayerGainSlider.removeAttribute('disabled');
141 | }
142 | initAudioContext = () => {
143 | startCtx.addEventListener('click', () => {
144 | this.setupAdminMic()
145 | .then(() => {
146 | this.callToUser();
147 | })
148 | });
149 | }
150 | setupControlsListeners = () => {
151 | oscActive.addEventListener('change', (e) => {
152 | this.context.currentConnection.send({cmd: "osc state", value: e.target.checked});
153 | })
154 | oscGain.addEventListener('change', (e) => {
155 | this.context.currentConnection.send({cmd: "osc gain", value: e.target.value / 10000 });
156 | })
157 | userMicGainSlider.addEventListener('change', (e) => {
158 | this.context.currentConnection.send({cmd: "mic gain", value: e.target.value / 100 });
159 | });
160 | userPlayerGainSlider.addEventListener('change', (e) => {
161 | this.context.currentConnection.send({cmd: "player gain", value: e.target.value / 100 });
162 | });
163 | talkBackButton.addEventListener('mousedown', () => {
164 | talkBackButton.style.background = "orange"
165 | adminMicGain.gain.value = 0.7;
166 | this.context.currentConnection.send("Talkback open")
167 | });
168 | talkBackButton.addEventListener('mouseup', () => {
169 | talkBackButton.style.background = "#2185d0"
170 | adminMicGain.gain.value = 0;
171 | this.context.currentConnection.send("Talkback closed")
172 | });
173 | startUserPlayerBtn.addEventListener('click', () => {
174 | this.context.currentConnection.send({cmd: "player start"})
175 | startUserPlayerBtn.setAttribute('disabled', true);
176 | stopUserPlayerBtn.removeAttribute('disabled');
177 | pauseUserPlayerBtn.removeAttribute('disabled');
178 | rewind.removeAttribute('disabled');
179 | fforward.removeAttribute('disabled');
180 | });
181 | pauseUserPlayerBtn.addEventListener('click', () => {
182 | this.context.currentConnection.send({cmd: "player pause"});
183 | pauseUserPlayerBtn.setAttribute('disabled', true);
184 | startUserPlayerBtn.removeAttribute('disabled');
185 | });
186 | stopUserPlayerBtn.addEventListener('click', () => {
187 | this.context.currentConnection.send({cmd: "player stop"});
188 | stopUserPlayerBtn.setAttribute('disabled', true);
189 | pauseUserPlayerBtn.setAttribute('disabled', true);
190 | startUserPlayerBtn.removeAttribute('disabled');
191 | });
192 | rewind.addEventListener('click', () => {
193 | this.context.currentConnection.send({cmd: "rewind"});
194 | });
195 | fforward.addEventListener('click', () => {
196 | this.context.currentConnection.send({cmd: "fforward"});
197 | })
198 | }
199 | setupAdminMic = async () => {
200 | ctx = await new(window.AudioContext || window.webkitAudioContext)();
201 | await navigator.mediaDevices.getUserMedia({audio: true})
202 | .then((micStream) => {
203 | outputToUser = ctx.createMediaStreamDestination();
204 | let micSource = ctx.createMediaStreamSource(micStream);
205 | adminMicGain = ctx.createGain();
206 | adminMicGain.gain.value = 0;
207 | micSource.connect(adminMicGain);
208 | adminMicGain.connect(outputToUser);
209 | })
210 | .catch(err => console.error(err))
211 | }
212 | callToUser = async () => {
213 | this.setState({call: this.context.peer.call(this.context.selectedRoom.username, outputToUser.stream)});
214 | disconnectButton.addEventListener('click', () => {
215 | this.endCurrentCall();
216 | });
217 | this.context.setCurrentCall(this.state.call.peer)
218 | this.state.call.on('stream', stream => {
219 | console.log("Got Stream...")
220 | this.enableUiElements();
221 | adminPlayer.srcObject = stream;
222 | adminPlayer.play();
223 | })
224 | this.state.call.on('error', (err) => {
225 | console.log(err);
226 | });
227 | }
228 | componentDidMount(){
229 | this.initUiElements();
230 | this.initAudioContext();
231 | this.setupControlsListeners();
232 | }
233 | renderUserPlayerTime = () => {
234 | if(this.context.connData && this.context.connData.playerTime){
235 | let min = Math.floor(this.context.connData.playerTime / 60)
236 | let sec = Math.round(this.context.connData.playerTime - min * 60);
237 | let timeString = `${min}:${sec}`;
238 | return (
239 |
240 | Current Player Time: {timeString}
241 |
242 | )
243 | } else {
244 | return (
245 |
246 |
247 |
248 | )
249 | }
250 | }
251 | componentWillUnmount(){
252 | this.endCurrentCall();
253 | }
254 | endCurrentCall = () => {
255 | if(this.state.call){
256 | console.log("Call Ended...");
257 | this.state.call.close();
258 | if(ctx){
259 | ctx.close().then(() => {
260 | ctx = null;
261 | })
262 | }
263 | this.disableUiElements();
264 | this.setState({call: null});
265 | this.context.setCurrentCall(null);
266 | }
267 | }
268 | render(){
269 | return(
270 |
271 |
277 | )
278 | }
279 | }
280 |
281 | RoomControls.contextType = adminContext;
282 | export default RoomControls;
--------------------------------------------------------------------------------
/src/components/RoomEdit/RoomEdit.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Button, Segment, List, Icon} from 'semantic-ui-react';
3 | import {serverAPI} from '../../api/api';
4 | import adminContext from '../../contexts/adminContext';
5 |
6 | let INITIAL_STATE = {
7 | allUsers: null,
8 | allBooks: null,
9 | currentUser: null,
10 | currentBook: null,
11 | currentPart: null
12 | }
13 |
14 | class RoomEdit extends Component{
15 | state = INITIAL_STATE;
16 | renderCurrentRoomData = () => {
17 | let listArr = []
18 | for(let key in this.context.selectedRoom){
19 | listArr.push(key);
20 | };
21 | return listArr.map((key, index) => {
22 | return {key}: {this.context.selectedRoom[key]}
23 | });
24 | }
25 | renderUserSelection = () => {
26 | if(!this.context.users){
27 | return Loading Users...
28 | } else {
29 | let currentUserId = "";
30 | let optionContent = "";
31 | if(this.context.selectedRoom && this.context.selectedRoom.currentUser){
32 | let currentUser = this.context.selectedRoom.currentUser;
33 | currentUserId = currentUser._id;
34 | optionContent = `${currentUser.firstName} ${currentUser.lastName}`;
35 | }
36 | return (
37 | {
38 | this.setState({ currentUser: e.target.selectedOptions[0].id})}}
39 | >
40 | {optionContent}
41 | {this.renderUserList()}
42 |
43 | )
44 | }
45 | }
46 | renderUserList = () => {
47 | return this.context.users.map((user) => {
48 | return {user.firstName} {user.lastName}
49 | })
50 | }
51 | renderBookSelection = () => {
52 | let books = this.context.books
53 | if(!books || books.length < 1 ){
54 | return Loading Books Data...
55 | } else {
56 | let currentBookId = "";
57 | let optionContent = "";
58 | if(this.context.selectedRoom && this.context.selectedRoom.currentBook){
59 | let currentBook = this.context.selectedRoom.currentBook;
60 | currentBookId = currentBook._id;
61 | optionContent = `${currentBook.name}`;
62 | }
63 | return (
64 | {
65 | this.setState({currentBook: e.target.selectedOptions[0].id})}}>
66 | {optionContent}
67 | {this.renderBookList()}
68 |
69 | )
70 | }
71 | }
72 | renderBookList = () => {
73 | return this.context.books.map((book) => {
74 | return {book.name}
75 | })
76 | }
77 | renderBookParts = () => {
78 | if(!this.state.currentBook){
79 | return;
80 | } else {
81 | let currentPart = ""
82 | if(this.context.selectedRoom && this.context.selectedRoom.currentPart){
83 | currentPart = this.context.selectedRoom.currentPart;
84 | }
85 | return(
86 | {
87 | this.setState({currentPart: e.target.selectedOptions[0].id})}}>
88 | {currentPart}
89 | {this.renderPartsList()}
90 |
91 | )
92 | }
93 | }
94 | renderPartsList = () => {
95 | let books = this.context.books;
96 | if(books && books.length > 0){
97 | let selectedBook = books.filter(book => book._id === this.state.currentBook);
98 | return selectedBook[0].parts.map((part, index) => {
99 | return {part}
100 | })
101 | }
102 | }
103 | renderButtons = () =>{
104 | if(this.state.currentUser && this.state.currentBook && this.state.currentPart){
105 | return(
106 |
107 | this.clearCurrentRoomData()}>Clear
108 | this.updateCurrentRoomData()}>Update
109 |
110 | )
111 | } else {
112 | return this.clearCurrentRoomData()}>Clear
113 | }
114 | }
115 | updateCurrentRoomData = () => {
116 | let data = {
117 | currentUser: this.state.currentUser,
118 | currentBook: this.state.currentBook,
119 | currentPart: this.state.currentPart
120 | }
121 | serverAPI.put(`/rooms/${this.context.selectedRoom._id}`, data)
122 | .then(() => {
123 | this.context.getAllRooms();
124 | this.props.handleModalClose();
125 | })
126 | .catch(err => console.log(err));
127 | }
128 | clearCurrentRoomData = async () => {
129 | await this.setState({
130 | currentUser: null,
131 | currentBook: null,
132 | currentPart: null
133 | })
134 | this.updateCurrentRoomData();
135 | }
136 | setCurrentState = () => {
137 | let selectedRoom = this.context.selectedRoom;
138 | if(!selectedRoom){
139 | return;
140 | } else{
141 | let currentUser = selectedRoom.currentUser ? selectedRoom.currentUser._id : null;
142 | let currentBook = selectedRoom.currentBook ? selectedRoom.currentBook._id : null;
143 | let currentPart = selectedRoom.currentPart ? selectedRoom.currentPart : null;
144 | this.setState({currentUser, currentBook, currentPart});
145 | }
146 | }
147 | componentDidMount(){
148 | this.context.fetchUsersList();
149 | this.context.fetchBooksList();
150 | this.setCurrentState();
151 | }
152 | render(){
153 | return(
154 |
155 | Select User
156 | {this.renderUserSelection()}
157 | Select Book
158 | {this.renderBookSelection()}
159 | Select File
160 | {this.renderBookParts()}
161 |
164 | )
165 | }
166 | }
167 |
168 | RoomEdit.contextType = adminContext;
169 | export default RoomEdit;
170 |
--------------------------------------------------------------------------------
/src/components/RoomList/RoomList.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Button, Card, Icon, Container} from 'semantic-ui-react';
3 | import adminContext from '../../contexts/adminContext';
4 | import RoomEdit from '../RoomEdit/RoomEdit';
5 | import RoomControls from '../RoomControls/RoomControls';
6 | import RoomModalTemplate from '../RoomModal/RoomModal';
7 |
8 | const INITIAL_STATE = {
9 | showModal: false
10 | }
11 |
12 | class RoomList extends Component{
13 | state = INITIAL_STATE;
14 | handleModalClose = () => {
15 | this.setState({showModal: false});
16 | this.context.setSelectedRoom(null);
17 | }
18 | showModal = (room, mode) => {
19 | this.setState({showModal: true})
20 | if(mode === "edit"){
21 | this.context.editSelectedRoom(room)
22 | }
23 | if(mode === "view"){
24 | this.context.setSelectedRoom(room)
25 | }
26 | }
27 | renderRoomControlsOrEdit = () => {
28 | if(!this.context.selectedRoom){
29 | return
30 | } else if(this.context.selectedRoom && this.context.editRoom && this.state.showModal){
31 | let header = `Edit ${this.context.selectedRoom.username}`;
32 | return (
33 | }/>
34 | )
35 | } else if(this.context.selectedRoom && this.state.showModal){
36 | let header = `${this.context.selectedRoom.username} Controls`;
37 | return (
38 | }/>
39 | )
40 | } else {
41 | return
42 | }
43 | }
44 | renderCardExtraContent = (room) => {
45 | return(
46 |
47 |
48 | {this.showModal(room, "view")}}>View
49 | {this.showModal(room, "edit")}}>Edit
50 |
51 |
52 | )
53 | }
54 | renderCardMeta = room => {
55 | if(!room.currentUser){
56 | return
72 | {this.context.setSelectedRoom(room)}}>
73 | {this.renderCardMeta(room)}
74 | {this.renderCardDescription(room)}
75 |
76 | )
77 | }
78 | setStatusIconColor = room => {
79 | if(this.context.currentCall && this.context.currentCall === room.username){
80 | return 'orange';
81 | } else {
82 | return this.context.onlineRooms.includes(room.username) ? 'green' : 'grey';
83 | }
84 | }
85 | renderRoomlist = () => {
86 | if(!this.props.rooms || this.props.rooms.length < 1){
87 | return Loading rooms...
88 | }
89 | return (
90 |
91 | {this.props.rooms.map((room, index) => {
92 | let color = this.setStatusIconColor(room)
93 | if(room.isAdmin === true){
94 | return
95 | } else if(this.context.selectedRoom && room.username === this.context.selectedRoom.username) {
96 | return (
97 |
98 | {this.renderCardContent(room, color)}
99 | {this.renderCardExtraContent(room)}
100 | {this.renderRoomControlsOrEdit()}
101 |
102 | )
103 | } else {
104 | return (
105 |
106 | {this.renderCardContent(room, color)}
107 | {this.renderCardExtraContent(room)}
108 |
109 | )
110 | }
111 | })}
112 |
113 | )
114 | }
115 | render(){
116 | // console.log(this.context);
117 | return(
118 |
119 | Room List
120 | {this.renderRoomlist()}
121 |
122 | )
123 | }
124 | }
125 |
126 | RoomList.contextType = adminContext;
127 | export default RoomList
--------------------------------------------------------------------------------
/src/components/RoomModal/RoomModal.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Modal, Header} from 'semantic-ui-react';
3 |
4 | class RoomModalTemplate extends Component{
5 | render(){
6 | return(
7 | this.props.handleModalClose() }>
8 |
9 |
10 | {this.props.content}
11 |
12 |
13 | )
14 | }
15 | }
16 |
17 | export default RoomModalTemplate;
--------------------------------------------------------------------------------
/src/components/UserCreateForm/UserCreateForm.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Form, Message ,Button} from 'semantic-ui-react';
3 | import adminContext from '../../contexts/adminContext';
4 |
5 | class UserCreateForm extends Component{
6 | state = {
7 | firstName: null,
8 | lastName: null,
9 | email: null,
10 | err: null
11 | }
12 | validateForm = () => {
13 | if(!this.state.firstName || this.state.firstName.length < 2){
14 | return this.setState({err: "Invalid firstName"})
15 | }
16 | if(!this.state.lastName || this.state.lastName.length < 2){
17 | return this.setState({err: "Invalid lastName"})
18 | }
19 | this.setState({err: null});
20 | this.context.createNewUser({firstName: this.state.firstName, lastName: this.state.lastName, email: this.state.email});
21 | }
22 | setFirstName = (event) => {
23 | this.setState({firstName: event.target.value})
24 | }
25 | setLastName = (event) => {
26 | this.setState({lastName: event.target.value})
27 | }
28 | setEmail = (event) => {
29 | this.setState({email: event.target.value})
30 | }
31 | renderErrorMessage = () => {
32 | if(this.state.err === null){
33 | return;
34 | }
35 | return (
36 |
37 | )
38 | }
39 | render(){
40 | return(
41 |
57 | )
58 | }
59 | };
60 |
61 | UserCreateForm.contextType = adminContext;
62 | export default UserCreateForm;
63 |
64 |
65 |
--------------------------------------------------------------------------------
/src/components/UserView/UserView.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Button, Icon} from 'semantic-ui-react';
3 | import userContext from '../../contexts/userContext';
4 |
5 |
6 |
7 | class UserView extends Component{
8 | renderView = () => {
9 | let room = this.props.room;
10 | if(!room || !room.currentUser || !room.currentBook || !room.currentPart ){
11 | return (
12 | {window.location.reload()}}
18 | />
19 | )
20 | } else {
21 | let isDisabled = this.context.isOnline ? true : false;
22 | let content = isDisabled ?
25 |
{this.context.initUserPlayback(document.getElementById('userPlayer'))}}
31 | disabled={isDisabled}
32 | />
33 |
37 |
44 |
{this.props.room.username}
45 |
46 | {this.renderView()}
47 |
48 |
Loading users...
29 | } else {
30 | return users.map(user => {
31 | if(user.isAdmin){
32 | return
33 | }
34 | return (
35 |
36 |
37 | {user.firstName} {user.lastName}
38 |
39 |
40 | {this.setState({showConfirm: true, selectedUser: user})}}>
41 |
44 |
45 |
46 |
47 | )
48 | })
49 | }
50 | }
51 | renderContent = () => {
52 | if(!this.state.showConfirm && !this.state.selectedUser){
53 | return(
54 |
55 | {this.renderUsersList()}
56 |
57 | )
58 | } else {
59 | let content = `Are you sure you want to delete "${this.state.selectedUser.firstName} ${this.state.selectedUser.lastName}" ?`;
60 | return (
61 |
62 |
70 | )
71 | }
72 | }
73 | componentDidMount(){
74 | this.context.fetchUsersList()
75 | }
76 | render(){
77 | return (
78 |
79 | {this.renderContent()}
80 |
81 | )
82 | }
83 | }
84 |
85 | UsersList.contextType = adminContext;
86 | export default UsersList;
--------------------------------------------------------------------------------
/src/contexts/adminContext.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {serverAPI} from '../api/api'
3 | import PeerClient from 'peerjs';
4 | const Context = React.createContext();
5 | const Peer = window.Peer;
6 |
7 | const peerConfig = {
8 | host: window.location.hostname,
9 | port: '8080',
10 | path: '/peerjs',
11 | sdpSemantics: 'unified-plan',
12 | debug: 0,
13 | }
14 | const INITIAL_STATE = {
15 | activeMenuItem: "Rooms",
16 | peer: null,
17 | isPeerInitialized: false,
18 | isNavModalOpen: false,
19 | rooms: [],
20 | users: [],
21 | books: [],
22 | onlineRooms: [],
23 | selectedRoom: null,
24 | editRoom: false,
25 | currentConnection: null,
26 | currentCall: null,
27 | connData: {},
28 | userMicGainSlider: 50,
29 | userPlayerGainSlider: 70,
30 | }
31 |
32 | export class AdminContextStore extends Component{
33 | constructor(props){
34 | super(props)
35 | this.state = INITIAL_STATE;
36 | }
37 | handleMenuItemClick = (e, {name}) => {
38 | this.setState({activeMenuItem: name, isNavModalOpen: false})
39 | }
40 | dispalyNavModal = isNavModalOpen => {
41 | this.setState({isNavModalOpen });
42 | }
43 | createNewUser = user => {
44 | serverAPI.post('/users', user)
45 | .then(() => this.fetchUsersList())
46 | .catch(err => console.log(err));
47 | }
48 | fetchUsersList = () => {
49 | serverAPI.get('/users')
50 | .then(res => this.setState({ users: res.data, isNavModalOpen: false}))
51 | .catch(err => { console.log(err) });
52 | }
53 | fetchBooksList = () => {
54 | serverAPI.get('/books')
55 | .then(res => this.setState({books: res.data, isNavModalOpen: false}))
56 | .catch(err => { console.log(err) });
57 | }
58 | createNewBook = book => {
59 | serverAPI.post('/books', book)
60 | .then(() => { this.fetchBooksList() })
61 | .catch(err => console.log(err));
62 | }
63 | getAllRooms = async () => {
64 | serverAPI.get('/rooms')
65 | .then((res) => {
66 | this.setState({rooms: res.data});
67 | })
68 | .catch((err) => {console.log(err)});
69 | }
70 | setOnlineRooms = onlineRooms => {
71 | this.setState({onlineRooms});
72 | }
73 | setPeerInitialized = isPeerInitialized => {
74 | this.setState({isPeerInitialized})
75 | }
76 | setSelectedRoom = selectedRoom =>{
77 | this.setState({selectedRoom, editRoom: false, currentCall: null, currentConnection: null, connData: null});
78 | }
79 | setCurrentConnection = currentConnection => {
80 | console.log("SET NEW CONNECTION");
81 | this.setState({currentConnection});
82 | }
83 | editSelectedRoom = selectedRoom => {
84 | this.setState({selectedRoom, editRoom: true, currentCall: null})
85 | }
86 | setPeerConnection = async () => {
87 | await this.setState({peer: new Peer('admin', peerConfig ), isPeerInitialized: true });
88 | }
89 | setCurrentCommand = cmd => {
90 | this.setState({cmd})
91 | }
92 | setCurrentCall = call => {
93 | if(!this.state.currentCall){
94 | this.setState({currentCall: call});
95 | }
96 | }
97 | hangCurrentCall = () => {
98 | if(this.state.currentCall){
99 | console.log("HANGING UP CURRENT CALL");
100 | this.setState({currentCall: null});
101 | }
102 | }
103 | componentDidMount(){
104 | this.setPeerConnection().then(()=>{
105 | this.state.peer.on('connection', (conn)=>{
106 | let newOnlineRoomsList = [...this.state.onlineRooms, conn.peer];
107 | this.setOnlineRooms(newOnlineRoomsList);
108 | conn.on('open', () => {
109 | conn.send({cmd: "admin connect"});
110 | })
111 | conn.on('close', ()=>{
112 | let newOnlineRoomsList = this.state.onlineRooms.filter(room => room !== conn.peer);
113 | this.setOnlineRooms(newOnlineRoomsList);
114 | });
115 | conn.on('data', (data) => {
116 | if(data.cmd ==="update"){
117 | this.setState({connData: data, userMicGainSlider: data.micGain * 100, userPlayerGainSlider: data.playerGain * 100});
118 | }
119 | if(data.cmd === "user answered"){
120 | this.setCurrentConnection(conn)
121 | }
122 | });
123 | })
124 | this.getAllRooms()
125 | })
126 | .catch(err => console.log(err))
127 | }
128 | componentWillUnmount(){
129 | this.state.peer.destroy();
130 | }
131 | render(){
132 | return(
133 |
150 | {this.props.children}
151 |
152 | )
153 | }
154 | }
155 |
156 | export default Context;
--------------------------------------------------------------------------------
/src/contexts/appContext.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {serverAPI} from '../api/api';
3 | const Context = React.createContext();
4 |
5 | export class AppContextStore extends Component{
6 | state = {
7 | room: null
8 | }
9 | setRoom = room => {
10 | this.setState({room});
11 | }
12 | fetchRoomData = loginData => {
13 | serverAPI.post('/login', loginData)
14 | .then((res) => {
15 | if(res.data.room){
16 | this.setRoom(res.data.room)
17 | }
18 | });
19 | }
20 | render(){
21 | return(
22 |
26 | {this.props.children}
27 |
28 | )
29 | }
30 | }
31 |
32 |
33 | export default Context;
--------------------------------------------------------------------------------
/src/contexts/userContext.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import pitchFinder from 'pitchfinder';
3 | import appContext from './appContext';
4 | import PeerClient from 'peerjs';
5 |
6 | const Context = React.createContext();
7 | const Peer = window.Peer;
8 |
9 | const peerConfig = {
10 | host: window.location.hostname,
11 | port: '8080',
12 | path: '/peerjs',
13 | sdpSemantics: 'unified-plan',
14 | debug: 0,
15 | }
16 |
17 | const INITIAL_STATE = {
18 | isOnline: false,
19 | isPeerInitialized: false,
20 | isAdminConnected: false,
21 | isPlaying: false,
22 | micGainValue: 0.5,
23 | playerGainValue: 0.8,
24 | isOscActive: true,
25 | isOscPlaying: false,
26 | oscGainValue: 0.001
27 | }
28 |
29 | export class UserContextStore extends Component{
30 | state = INITIAL_STATE
31 | constructor(props){
32 | super(props)
33 | this.ctx = null;
34 | this.peer = null;
35 | this.micToAdminGain = null;
36 | this.playerToAdminGain = null;
37 | this.playerGain = null;
38 | this.micGain = null;
39 | this.userPlayer = null;
40 | this.analyser = null;
41 | this.sampleRate = null;
42 | this.pitchArr = [];
43 | this.detectPitch = pitchFinder.YIN();
44 | this.updateAdminTimer = null;
45 | this.adminMicPlayer = null;
46 | this.micStream = null;
47 | this.playerStream = null;
48 | this.micStreamToOutput = null;
49 | this.clonedMicStream = null;
50 | this.clonedPlayerStream = null;
51 | }
52 | setPeerConnection = async () => {
53 | this.peer = new Peer(this.context.room.username, peerConfig );
54 | await this.setState({isPeerInitialized: true });
55 | }
56 | initUserPlayback = async userPlayerElement => {
57 | this.ctx = await new(window.AudioContext || window.webkitAudioContext)();
58 | this.userPlayer = userPlayerElement;
59 | this.analyser = this.ctx.createAnalyser();
60 | this.sampleRate = this.ctx.sampleRate;
61 | // Capture Stream from audio player
62 | if(this.isChromeBrowser()){
63 | this.playerStream = await this.userPlayer.captureStream();
64 | } else {
65 | this.playerStream = await this.userPlayer.mozCaptureStream();
66 | }
67 | this.playerGain = this.ctx.createGain()
68 | this.playerGain.gain.value = this.state.playerGainValue;
69 | let playerStreamToOutput = this.ctx.createMediaStreamSource(this.playerStream);
70 | let filter = this.ctx.createBiquadFilter();
71 | filter.type = "highpass";
72 | filter.frequency.value = 250;
73 | playerStreamToOutput.connect(filter);
74 | filter.connect(this.analyser);
75 | this.analyser.connect(this.playerGain);
76 | this.playerGain.connect(this.ctx.destination);
77 | this.getUserMicStream()
78 | }
79 | isChromeBrowser = () => {
80 | if(navigator.userAgent.indexOf("Chrome") >= 0){
81 | console.log("Chrome")
82 | return true
83 | } else if(navigator.userAgent.indexOf("Firefox") >= 0){
84 | console.log("FireFox")
85 | return false
86 | }
87 | }
88 | getUserMicStream = async () => {
89 | let constraints = { video: false, audio: true };
90 | navigator.mediaDevices.getUserMedia(constraints)
91 | .then(stream => {
92 | this.micGain = this.ctx.createGain();
93 | this.micStream = stream;
94 | this.micGain.gain.value = this.state.micGainValue;
95 | this.micStreamToOutput = this.ctx.createMediaStreamSource(this.micStream)
96 | this.micStreamToOutput.connect(this.micGain);
97 | this.micGain.connect(this.ctx.destination);
98 | console.log("Finished Mic Setup");
99 | this.setupConnection();
100 | })
101 | .catch((err) => console.error(err));
102 | }
103 | setupConnection = async () =>{
104 | let conn = await this.peer.connect('admin', {serialization: "json"});
105 | this.setState({isOnline: true})
106 | conn.on('open', () => {
107 | conn.send({cmd: "user online"});
108 | });
109 | conn.on('admin disconnect', () => {
110 | console.log("Admin disconnected");
111 | })
112 | conn.on('close', () => {
113 | this.setState({isOnline: false})
114 | console.log("Admin Disconnected")
115 | clearInterval(this.updateAdminTimer);
116 | this.updateAdminTimer = null;
117 | });
118 | conn.on('data', (data) => {
119 | if(this.state.isAdminConnected){
120 | if(data.cmd === "admin connect"){
121 | console.log("Admin Connected");
122 | }
123 | if(data.cmd === "mic gain"){
124 | this.setState({micGainValue: data.value})
125 | this.micGain.gain.setValueAtTime(data.value, this.ctx.currentTime);
126 | this.micToAdminGain.gain.setValueAtTime(data.value, this.ctx.currentTime);
127 | }
128 | if(data.cmd === "player gain"){
129 | this.setState({playerGainValue: data.value})
130 | this.playerGain.gain.setValueAtTime(data.value, this.ctx.currentTime);
131 | this.playerToAdminGain.gain.setValueAtTime(data.value, this.ctx.currentTime);
132 | }
133 | if(data.cmd === "osc state"){
134 | if(data.value === false){
135 | this.setState({isOscActive: false});
136 | } else {
137 | this.setState({isOscActive: true});
138 | };
139 | }
140 | if(data.cmd === "osc gain"){
141 | this.setState({oscGainValue: data.value})
142 | }
143 | if(data.cmd === "player start"){
144 | this.userPlayer.play();
145 | this.setState({isPlaying: true})
146 | this.pitchDetector();
147 | }
148 | if(data.cmd === "player pause"){
149 | this.setState({isPlaying: false});
150 | this.userPlayer.pause();
151 | }
152 | if(data.cmd === "player stop"){
153 | this.setState({isPlaying: false})
154 | this.userPlayer.currentTime = 0;
155 | this.userPlayer.pause();
156 | }
157 | if(data.cmd === "rewind"){
158 | let newTransportPosition = this.userPlayer.currentTime - 30 > 0 ? this.userPlayer.currentTime - 30 : 0;
159 | this.userPlayer.currentTime = newTransportPosition;
160 | }
161 | if(data.cmd === "fforward"){
162 | let maxDuration = this.userPlayer.duration;
163 | let newTransportPosition = this.userPlayer.currentTime + 30 < maxDuration ? this.userPlayer.currentTime + 30 : maxDuration;
164 | this.userPlayer.currentTime = newTransportPosition;
165 | }
166 | }
167 | this.peer.on('call', (call) => {
168 | console.log("Got call from admin");
169 |
170 | this.createStreamToAdmin(call, conn)
171 | call.on('close', () => {
172 | console.log("CALL ENDED");
173 | clearInterval(this.updateAdminTimer);
174 | if(this.adminMicPlayer){
175 | this.adminMicPlayer.pause();
176 | this.adminMicPlayer.currentTime = 0;
177 | }
178 | this.setState({isAdminConnected: false, updateAdminTimer: null, adminMicPlayer: null});
179 | })
180 | call.on('error', () => {
181 | console.log("CALL ENDED ON ERROR");
182 | this.setState({isAdminConnected: false})
183 | })
184 | this.setState({isAdminConnected: true})
185 | conn.send({cmd: 'user answered'})
186 | });
187 | });
188 |
189 | }
190 | createStreamToAdmin = async (call, conn) => {
191 | this.clonedMicStream = this.micStream.clone();
192 | this.clonedPlayerStream = this.playerStream.clone();
193 | let streamToAdmin = this.ctx.createMediaStreamDestination();
194 | let micStreamToAdmin = this.ctx.createMediaStreamSource(this.clonedMicStream);
195 | let playerStreamToAdmin = this.ctx.createMediaStreamSource(this.clonedPlayerStream);
196 | // Stream volume mix controls
197 | this.micToAdminGain = this.ctx.createGain()
198 | this.playerToAdminGain = this.ctx.createGain()
199 | // Init mix controls gain
200 | this.micToAdminGain.gain.setValueAtTime(this.state.micGainValue, this.ctx.currentTime);
201 | this.playerToAdminGain.gain.setValueAtTime(this.state.playerGainValue, this.ctx.currentTime);
202 | micStreamToAdmin.connect(this.micToAdminGain);
203 | playerStreamToAdmin.connect(this.playerToAdminGain)
204 | this.micToAdminGain.connect(streamToAdmin);
205 | this.playerToAdminGain.connect(streamToAdmin);
206 | call.answer(streamToAdmin.stream)
207 | call.on('stream', (adminStream) => {
208 | this.adminMicPlayer = document.getElementById('adminMicPlayer');
209 | this.adminMicPlayer.srcObject= adminStream;
210 | this.adminMicPlayer.play()
211 | });
212 | const updateAdminUi = () => {
213 | if(this.state.isAdminConnected){
214 | conn.send({
215 | cmd: "update" ,
216 | micGain: this.state.micGainValue,
217 | playerGain: this.state.playerGainValue,
218 | isPlaying: this.state.isPlaying,
219 | playerTime: this.userPlayer.currentTime,
220 | isAdminConnected: this.state.isAdminConnected,
221 | isOnline: this.state.isOnline
222 | });
223 | }
224 | }
225 | this.updateAdminTimer = setInterval(() => {
226 | updateAdminUi()
227 | }, 1000);
228 | }
229 | pitchDetector = () => {
230 | if(!this.state.isPlaying){
231 | return;
232 | }
233 | // Populate the dataArray from the analyser method
234 | let dataArray = new Uint8Array(this.analyser.fftSize)
235 | this.analyser.getByteTimeDomainData(dataArray);
236 | // Detect pitch and push to array;
237 | let pitch = this.detectPitch(dataArray, { sampleRate: 48000});
238 | this.pitchArr = [...this.pitchArr, pitch]
239 | if(this.pitchArr.length > 2){
240 | let newPitchArr = this.pitchArr;
241 | newPitchArr.shift()
242 | this.pitchArr = newPitchArr;
243 | }
244 | // Pervent overloading the oscillator
245 | if(this.state.isOscActive && !this.state.isOscPlaying && this.pitchArr[1] && this.pitchArr[1] !== this.pitchArr[0]){
246 | this.playOsc(this.pitchArr[1])
247 | }
248 | requestAnimationFrame(this.pitchDetector)
249 | }
250 | playOsc = pitch => {
251 | let osc = this.ctx.createOscillator();
252 | let oscGain = this.ctx.createGain();
253 | osc.type = 'sine';
254 | osc.frequency.setValueAtTime(pitch*100, this.ctx.currentTime);
255 | oscGain.gain.value = this.state.oscGainValue;
256 | osc.connect(oscGain);
257 | oscGain.connect(this.ctx.destination)
258 | this.setState({isOscPlaying: true})
259 | setTimeout(() => { this.setState({isOscPlaying: false})}, 1000);
260 | osc.start();
261 | oscGain.gain.setValueAtTime(0, this.ctx.currentTime + 0.8)
262 | setTimeout(() => {
263 | osc.stop();
264 | }, 1000)
265 | }
266 | componentDidMount() {
267 | this.setPeerConnection()
268 | .then(() => {
269 | console.log("Peer initialized")
270 | })
271 | .catch(err => {console.log(err)})
272 | }
273 | componentWillUnmount(){
274 | if(this.ctx){
275 | this.ctx.close();
276 | }
277 | if(this.peer){
278 | this.peer.close();
279 | }
280 | }
281 | render(){
282 | return(
283 |
287 | {this.props.children}
288 |
289 | )
290 | }
291 | }
292 |
293 | UserContextStore.contextType = appContext;
294 | export default Context;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import 'semantic-ui-css/semantic.min.css';
4 | import App from './components/App/App';
5 | import {AppContextStore} from './contexts/appContext';
6 |
7 | ReactDOM.hydrate(
8 |
9 | ,
11 | document.getElementById('root'));
12 |
13 | // If you want your app to work offline and load faster, you can change
14 | // unregister() to register() below. Note this comes with some pitfalls.
15 | // Learn more about service workers: http://bit.ly/CRA-PWA
16 | // serviceWorker.unregister();
17 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read http://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------