Skip to content

Commit 8c2f97c

Browse files
lxieyanglxieyang
committed
add metadata
1 parent dfe6113 commit 8c2f97c

File tree

11 files changed

+694
-96
lines changed

11 files changed

+694
-96
lines changed

‎package-lock.json‎

Lines changed: 375 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"opentok": "^2.12.1",
3131
"prettier": "^2.5.1",
3232
"prop-types": "^15.7.2",
33+
"query-string": "^7.1.1",
3334
"react": "^17.0.2",
3435
"react-dom": "^17.0.2",
3536
"react-media-recorder": "^1.6.3",
@@ -38,6 +39,7 @@
3839
"react-redux": "^7.2.6",
3940
"react-router-dom": "^5.3.0",
4041
"react-scripts": "^4.0.3",
42+
"react-select": "^5.4.0",
4143
"react-webcam": "^6.0.0",
4244
"redux": "^4.1.2",
4345
"rollup": "^2.61.0",

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
SinglePlayerSessionProvider,
1313
} from './context/index';
1414
import Authentication from './components/layout/Authentication';
15+
import Review from './components/layout/Review';
1516
import Landing from './components/layout/Landing';
1617
import Home from './components/layout/Home';
1718
import Content from './components/layout/Content';
@@ -148,6 +149,7 @@ const App = () => {
148149
component={CORsTestButtons}
149150
/>
150151
<Route exact path='/content' component={Content} />
152+
<Route exact path='/review' component={Review} />
151153
</PinsProvider>
152154
</SinglePlayerSessionProvider>
153155
</SinglePlayerPinsProvider>

‎src/components/layout/ColorLibComponents/ColorLibAudioPlayer.jsx‎

Lines changed: 77 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
import { withStyles } from "@material-ui/core/styles";
1+
import { withStyles } from '@material-ui/core/styles';
22
import {
33
Grid,
44
Icon,
55
IconButton,
66
Paper,
77
Slider,
88
Typography,
9-
} from "@material-ui/core";
9+
} from '@material-ui/core';
1010

11-
import Forward10Icon from "@material-ui/icons/Forward10";
12-
import Replay10Icon from "@material-ui/icons/Replay10";
13-
import PauseRoundedIcon from "@material-ui/icons/PauseRounded";
14-
import PlayArrowRoundedIcon from "@material-ui/icons/PlayArrowRounded";
11+
import Forward10Icon from '@material-ui/icons/Forward10';
12+
import Replay10Icon from '@material-ui/icons/Replay10';
13+
import PauseRoundedIcon from '@material-ui/icons/PauseRounded';
14+
import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
1515

16-
import pin from "../../../other/pin.svg";
16+
import pin from '../../../other/pin.svg';
1717

1818
const displayTime = (secs) => {
1919
let minutes = Math.floor(secs / 60);
@@ -29,12 +29,12 @@ const getIconByPlayerStatus = (playerStatus, setPlayerStatus) => {
2929
const PlayerIconButton = withStyles((theme) => ({
3030
root: {
3131
color: theme.palette.teal.main,
32-
padding: "0px",
32+
padding: '0px',
3333
},
3434
label: {
35-
"& .MuiSvgIcon-root": {
36-
width: "80px",
37-
height: "80px",
35+
'& .MuiSvgIcon-root': {
36+
width: '80px',
37+
height: '80px',
3838
},
3939
},
4040
}))(IconButton);
@@ -48,58 +48,58 @@ const getIconByPlayerStatus = (playerStatus, setPlayerStatus) => {
4848

4949
const AudioSlider = withStyles((theme, index) => ({
5050
marked: {
51-
marginBottom: "0px",
51+
marginBottom: '0px',
5252
},
5353
thumb: {
54-
borderRadius: "0",
55-
color: "black",
56-
height: "48px",
57-
marginTop: "-23px",
58-
marginLeft: "-2px",
59-
width: "4px",
60-
boxShadow: "none !important",
61-
"&::after": {
62-
top: "0px",
63-
left: "0px",
64-
right: "0px",
65-
bottom: "0px",
54+
borderRadius: '0',
55+
color: 'black',
56+
height: '48px',
57+
marginTop: '-23px',
58+
marginLeft: '-2px',
59+
width: '4px',
60+
boxShadow: 'none !important',
61+
'&::after': {
62+
top: '0px',
63+
left: '0px',
64+
right: '0px',
65+
bottom: '0px',
6666
},
6767
},
6868
root: {
69-
height: "6px",
69+
height: '6px',
7070
},
7171
rail: {
72-
height: "6px",
72+
height: '6px',
7373
color: theme.palette.teal.light,
74-
opacity: "100%",
74+
opacity: '100%',
7575
},
7676
track: {
77-
height: "6px",
77+
height: '6px',
7878
color: theme.palette.teal.main,
79-
borderRadius: "6px",
79+
borderRadius: '6px',
8080
},
8181
mark: {
82-
height: "14px",
83-
width: "14px",
84-
borderRadius: "14px",
82+
height: '14px',
83+
width: '14px',
84+
borderRadius: '14px',
8585
backgroundColor: theme.palette.pink.main,
86-
marginTop: "-4px",
87-
marginLeft: "-4px",
86+
marginTop: '-4px',
87+
marginLeft: '-4px',
8888
zIndex: 1,
8989
},
9090
markActive: {
9191
opacity: 1,
9292
backgroundColor: theme.palette.pink.dark,
9393
},
9494
markLabel: {
95-
top: "inherit",
96-
transform: "none",
97-
height: "6px",
98-
width: "100%",
99-
borderRadius: "6px",
95+
top: 'inherit',
96+
transform: 'none',
97+
height: '6px',
98+
width: '100%',
99+
borderRadius: '6px',
100100
// left: "0 !important",
101101
opacity: 0.6,
102-
lineHeight: "30px",
102+
lineHeight: '30px',
103103
},
104104
}))(Slider);
105105

@@ -110,6 +110,7 @@ const ColorLibAudioPlayer = ({
110110
setCurrentTime,
111111
duration,
112112
marks, // List of integers, each in seconds
113+
hideAddPin = false,
113114
addPin = null,
114115
curPinIndex = null,
115116
}) => {
@@ -118,36 +119,36 @@ const ColorLibAudioPlayer = ({
118119
const JumpIconButton = withStyles((theme) => ({
119120
root: {
120121
color: theme.palette.teal.main,
121-
padding: "10px",
122+
padding: '10px',
122123
},
123124
label: {
124-
"& .MuiSvgIcon-root": {
125-
width: "40px",
126-
height: "40px",
125+
'& .MuiSvgIcon-root': {
126+
width: '40px',
127+
height: '40px',
127128
},
128129
},
129130
}))(IconButton);
130131

131132
const PinIconButton = withStyles((theme) => ({
132133
root: {
133-
padding: "15px",
134-
boxShadow: "0px 6px 8px rgba(51, 126, 146, 0.25)",
135-
border: "1.5px solid",
134+
padding: '15px',
135+
boxShadow: '0px 6px 8px rgba(51, 126, 146, 0.25)',
136+
border: '1.5px solid',
136137
borderColor: theme.palette.teal.lighter,
137138
},
138139
label: {
139-
"& .MuiIcon-root": {
140-
width: "27px",
141-
height: "27px",
140+
'& .MuiIcon-root': {
141+
width: '27px',
142+
height: '27px',
142143
},
143144
},
144145
}))(IconButton);
145146

146147
// Before creating mark information for pins, check there are no duplicates.
147148
marks = [...new Set(marks)];
148149
const pinMarks = marks.map((m, index) => {
149-
const markTime = m.pinTime
150-
const markCreatorMode = m.creatorMode
150+
const markTime = m.pinTime;
151+
const markCreatorMode = m.creatorMode;
151152
console.log(m);
152153

153154
const centerPercentage = (markTime / duration) * 100;
@@ -169,19 +170,19 @@ const ColorLibAudioPlayer = ({
169170
<>
170171
<div
171172
style={{
172-
height: "6px",
173-
position: "relative",
173+
height: '6px',
174+
position: 'relative',
174175
left: `calc(${left}%)`,
175176
width: `${rightNewWidth}%`,
176-
borderRadius: "6px",
177-
backgroundColor: "#FDA2A9",
177+
borderRadius: '6px',
178+
backgroundColor: '#FDA2A9',
178179
}}
179180
/>
180181
<div
181182
style={{
182183
marginRight: `calc(${leftPercentage}% + 3px)`,
183184
width: `calc(${widthPercentage}%)`,
184-
color: markCreatorMode == "callee" ? "#FDA2A9" : "black"
185+
color: markCreatorMode == 'callee' ? '#FDA2A9' : 'black',
185186
}}
186187
>
187188
{index + 1}
@@ -193,27 +194,27 @@ const ColorLibAudioPlayer = ({
193194

194195
return (
195196
<Paper
196-
variant="outlined"
197-
style={{ padding: "10px 10px 20px 10px", marginTop: 10 }}
197+
variant='outlined'
198+
style={{ padding: '10px 10px 20px 10px', marginTop: 10 }}
198199
>
199200
<Grid container>
200201
<Grid
201202
item
202203
xs={1}
203-
style={{ alignItems: "center", justifyContent: "center" }}
204+
style={{ alignItems: 'center', justifyContent: 'center' }}
204205
>
205206
{getIconByPlayerStatus(playerStatus, setPlayerStatus)}
206207
</Grid>
207208

208209
<Grid
209210
item
210211
xs={1}
211-
style={{ alignItems: "center", justifyContent: "center" }}
212+
style={{ alignItems: 'center', justifyContent: 'center' }}
212213
>
213-
<Typography variant="body2">{displayTime(currentTime)}</Typography>
214+
<Typography variant='body2'>{displayTime(currentTime)}</Typography>
214215
</Grid>
215216

216-
<Grid item xs={9} style={{ alignItems: "center" }}>
217+
<Grid item xs={9} style={{ alignItems: 'center' }}>
217218
<AudioSlider
218219
value={currentTime}
219220
onChange={(event, newValue) => {
@@ -228,30 +229,32 @@ const ColorLibAudioPlayer = ({
228229
<Grid
229230
item
230231
xs={1}
231-
style={{ alignItems: "center", justifyContent: "center" }}
232+
style={{ alignItems: 'center', justifyContent: 'center' }}
232233
>
233-
<Typography variant="body2">{displayTime(duration)}</Typography>
234+
<Typography variant='body2'>{displayTime(duration)}</Typography>
234235
</Grid>
235236
</Grid>
236237

237238
<div
238239
style={{
239-
display: "flex",
240-
alignItems: "center",
241-
justifyContent: "center",
242-
marginTop: "-15px",
240+
display: 'flex',
241+
alignItems: 'center',
242+
justifyContent: 'center',
243+
marginTop: '-15px',
243244
}}
244245
>
245246
<JumpIconButton
246247
onClick={() => setCurrentTime(Math.max(0, currentTime - 10))}
247248
>
248249
<Replay10Icon />
249250
</JumpIconButton>
250-
<PinIconButton onClick={() => addPin(currentTime)}>
251-
<Icon>
252-
<img src={pin} alt="pin" style={{ height: "100%" }} />
253-
</Icon>
254-
</PinIconButton>
251+
{hideAddPin !== true && (
252+
<PinIconButton onClick={() => addPin(currentTime)}>
253+
<Icon>
254+
<img src={pin} alt='pin' style={{ height: '100%' }} />
255+
</Icon>
256+
</PinIconButton>
257+
)}
255258
<JumpIconButton
256259
onClick={() => setCurrentTime(Math.min(duration, currentTime + 10))}
257260
>

‎src/components/layout/Landing.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,10 +147,12 @@ const Landing = () => {
147147
.set(
148148
{
149149
firebaseUserId: firebaseUser.uid,
150+
firebaseUserEmail: firebaseUser.email,
150151
},
151152
{ merge: true }
152153
);
153154

155+
let date = new Date();
154156
await firebase
155157
.firestore()
156158
.collection('singleplayer')
@@ -159,6 +161,11 @@ const Landing = () => {
159161
.add({
160162
refUsername: tempUserId,
161163
refSessionID: tempSessionID,
164+
date:
165+
date.toLocaleDateString('en-US') +
166+
' ' +
167+
date.toLocaleTimeString('en-US'),
168+
completed: false,
162169
})
163170
.then((doc) => {
164171
// console.log(doc);

‎src/components/layout/Modules.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ function getSPStepContent(step) {
4949

5050
const Modules = () => {
5151
const { sessionID } = useSessionValue();
52-
console.log(sessionID);
5352
const { curActiveStep } = useActiveStepValue();
5453
// const { playerMode } = usePlayerModeValue();
5554
const playerMode = 'singleplayer';

‎src/components/layout/Navbar.jsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function ButtonAppBar() {
5959
>
6060
Project
6161
</ColorLibButton>
62-
{['Practice', 'Review'].map((label) => (
62+
{/* {['Practice'].map((label) => (
6363
<ColorLibButton
6464
variant='text'
6565
size='small'
@@ -68,7 +68,7 @@ export default function ButtonAppBar() {
6868
>
6969
{label}
7070
</ColorLibButton>
71-
))}
71+
))} */}
7272
{/* <ColorLibButton
7373
variant="outlined"
7474
size="small"
@@ -79,6 +79,17 @@ export default function ButtonAppBar() {
7979
Message
8080
</ColorLibButton> */}
8181

82+
{user !== null && user !== undefined && (
83+
<ColorLibButton
84+
variant='text'
85+
size='small'
86+
className={classes.navbar_button}
87+
href='/review'
88+
>
89+
Review
90+
</ColorLibButton>
91+
)}
92+
8293
<ColorLibButton
8394
variant='outlined'
8495
size='small'

0 commit comments

Comments
 (0)