-
-
-
- Recommended time left
-
+
+
-
-
+ Recommended time left
{formatTime(countDown)}
-
-
+
-
{text}
- ;
+
+ );
- const imgGrid =
+ const imgGrid = (
- 
- ;
+
+
+ );
return (
-
{isTextLeft ? textGrid : imgGrid}
{isTextLeft ? imgGrid : textGrid}
- )
+ );
};
- return (
-
-
+ return (
+
+
- Welcome to Pin-MI
+ Welcome to Pin-MI
- a platform for practicing MI with your peers and the help of pins
+ a platform for practicing MI with your peers and the help of pins
- -
+
{tutorialInfo.map(tutorialSection)}
-
-
+ {/* setUsername(usernameRef.current.value)}
+ /> */}
+ setUsername(usernameRef.current.value)}
@@ -199,13 +273,18 @@ const Landing = () => {
- );
+
+ );
};
export default Landing;
-
diff --git a/src/components/layout/Modules.jsx b/src/components/layout/Modules.jsx
index d1f45dd2..bb54a6fd 100644
--- a/src/components/layout/Modules.jsx
+++ b/src/components/layout/Modules.jsx
@@ -1,14 +1,21 @@
+import React from 'react';
import DisscussionPrep from './DisscussionPrep';
import PracticeSession from './PracticeSession';
+import Collaboration from './Collaboration';
import Refresher from './Refresher';
import SelfReflection from './SelfReflection';
+import SPDiscussion from './SinglePlayerModules/SPDiscussion';
+import SPPracticeSession from './SinglePlayerModules/SPPracticeSession';
import Discussion from './Discussion';
// context
-import { useActiveStepValue, useSessionValue } from "../../context";
+import {
+ useActiveStepValue,
+ useSessionValue,
+ usePlayerModeValue,
+} from '../../context';
import { usePins } from '../../hooks/index';
-
-
+import SPDisscussionPrep from './SinglePlayerModules/SPDiscussionPrep';
function getStepContent(step) {
switch (step) {
@@ -25,18 +32,35 @@ function getStepContent(step) {
}
}
-const Modules = () => {
-
+function getSPStepContent(step) {
+ switch (step) {
+ case 0:
+ return
+
Join Discussion
@@ -206,4 +251,4 @@ const DisscussionPrep = () => {
);
};
-export default DisscussionPrep;
\ No newline at end of file
+export default DisscussionPrep;
diff --git a/src/components/layout/Landing.jsx b/src/components/layout/Landing.jsx
index a228a346..f5698f5e 100644
--- a/src/components/layout/Landing.jsx
+++ b/src/components/layout/Landing.jsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
-import { useHistory } from "react-router-dom";
+import { useHistory } from 'react-router-dom';
import { firebase } from '../../hooks/firebase';
@@ -21,6 +21,9 @@ import discussionPreview from './../../other/tutorial/discussionPreview.png';
import { setUserID, setUserMode, setSessionID } from '../Store';
+import { useUser } from '../../context/userContext';
+import { useSinglePlayerSessionValue } from '../../context';
+
const useStyles = makeStyles((theme) => ({
welcome_container: {
padding: '50px 68px 50px 68px',
@@ -58,35 +61,44 @@ const useStyles = makeStyles((theme) => ({
marginRight: 0,
marginLeft: 'auto',
textAlign: 'center',
- }
+ },
}));
-const tutorialInfo = [{
- text: "Use pins to mark moments of MI strengths and opportunities in a conversation",
+const tutorialInfo = [
+ {
+ text: 'Use pins to mark moments of MI strengths and opportunities in a conversation',
image: pinningPreview,
- alt: "Pinning",
- }, {
- text: "during a practitioner-client role-playing session with a peer",
+ alt: 'Pinning',
+ },
+ {
+ text: 'during a practitioner-client role-playing session with a peer',
image: modal,
- alt: "Role-playing session modal",
- }, {
- text: "and after to reflect on the conversation and prepare for",
+ alt: 'Role-playing session modal',
+ },
+ {
+ text: 'and after to reflect on the conversation and prepare for',
image: discussionPrepPreview,
- alt: "Discussion Prep Interface",
- }, {
- text: "a collaborative discussion with your peer to share thoughts and specific feedback on those pinned moments.",
+ alt: 'Discussion Prep Interface',
+ },
+ {
+ text: 'a collaborative discussion with your peer to share thoughts and specific feedback on those pinned moments.',
image: discussionPreview,
- alt: "Discussion Interface",
- }
+ alt: 'Discussion Interface',
+ },
];
const Landing = () => {
const classes = useStyles();
+ const { user: firebaseUser, setUserSessionId } = useUser();
+ const { setSinglePlayerUsername, setSinglePlayerSessionID } =
+ useSinglePlayerSessionValue();
+
const [username, setUsername] = useState('');
+ // example: kLGingo64LdaWBNDzTDQgOmcwSH3_5b/sessions/pAxk6uzfEPaCpzBCAAmj
const usernameRef = useRef('');
- const user = useSelector(state => state.user);
+ const user = useSelector((state) => state.user);
const dispatch = useDispatch();
const history = useHistory();
@@ -94,104 +106,166 @@ const Landing = () => {
const setUser = async () => {
console.log(username);
- await firebase.firestore().collection("users").doc(username).get().then((doc) => {
- if (doc.exists) {
- console.log("data: " + doc.data().userID);
- return doc.data();
- } else {
- console.log("User doesn't exist.");
- }
- })
- .then((data) => {
- setStates(data);
- })
- }
-
- const setStates = async (data) => {
- const tempUserId = data.userID;
- const tempSessionID = data.curSession;
- await firebase.firestore().collection("sessions").doc(tempSessionID).get().then((doc) => {
- if (doc.exists) {
- if(doc.data().caller_id == tempUserId) {
- dispatch(setUserMode('caller'));
+ await firebase
+ .firestore()
+ .collection('users')
+ .doc(username)
+ .get()
+ .then((doc) => {
+ if (doc.exists) {
+ console.log('data: ' + doc.data().userID);
+ return doc.data();
} else {
- dispatch(setUserMode('callee'));
+ console.log("User doesn't exist.");
}
- } else {
- console.log("session doesn't exist.");
- }
- })
-
- //const tempUserMode = data.userMode;
- dispatch(setUserID(tempUserId));
- dispatch(setSessionID(tempSessionID));
+ })
+ .then((data) => {
+ setStates(data);
+ });
+ };
+
+ const setStates = async (data) => {
+ let tempUsernameAndSessionession = username;
+ if (username.length === 0) {
+ tempUsernameAndSessionession =
+ 'kLGingo64LdaWBNDzTDQgOmcwSH3_5b/sessions/pAxk6uzfEPaCpzBCAAmj';
+ }
+
+ const splits = tempUsernameAndSessionession.split('/');
+
+ const tempUserId = splits[0];
+ const tempSessionID = splits[splits.length - 1];
+ setSinglePlayerUsername(tempUserId);
+ setSinglePlayerSessionID(tempSessionID);
+
+ console.log(tempUserId, tempSessionID);
+
+ await firebase
+ .firestore()
+ .collection('singleplayer')
+ .doc(firebaseUser.uid)
+ .set(
+ {
+ firebaseUserId: firebaseUser.uid,
+ firebaseUserEmail: firebaseUser.email,
+ },
+ { merge: true }
+ );
+
+ let date = new Date();
+ await firebase
+ .firestore()
+ .collection('singleplayer')
+ .doc(firebaseUser.uid)
+ .collection('sessions')
+ .add({
+ refUsername: tempUserId,
+ refSessionID: tempSessionID,
+ date:
+ date.toLocaleDateString('en-US') +
+ ' ' +
+ date.toLocaleTimeString('en-US'),
+ completed: false,
+ })
+ .then((doc) => {
+ // console.log(doc);
+ setUserSessionId(doc.id);
+ });
+
+ // await firebase
+ // .firestore()
+ // .collection('sessions')
+ // .doc(tempSessionID)
+ // .get()
+ // .then((doc) => {
+ // if (doc.exists) {
+ // if (doc.data().caller_id == tempUserId) {
+ // dispatch(setUserMode('caller'));
+ // } else {
+ // dispatch(setUserMode('callee'));
+ // }
+ // } else {
+ // console.log("session doesn't exist.");
+ // }
+ // });
+
+ // //const tempUserMode = data.userMode;
+ // dispatch(setUserID(tempUserId));
+ // dispatch(setSessionID(tempSessionID));
//dispatch(setUserMode(tempUserMode));
- history.push("/content");
- }
+ history.push('/content');
+ };
- const tutorialSection = ({text, image, alt}, index) => {
+ const tutorialSection = ({ text, image, alt }, index) => {
const isTextLeft = index % 2 === 0;
- const textGrid =
+ const textGrid = (
- -
-
+ {/* */}
+ history.push('/content')}
+ onClick={setStates}
+ >
Let's get started!
- Unknown
;
+ }
+}
+const Modules = () => {
const { sessionID } = useSessionValue();
const { curActiveStep } = useActiveStepValue();
+ // const { playerMode } = usePlayerModeValue();
+ const playerMode = 'singleplayer';
const { pins } = usePins();
return (
- {getStepContent(curActiveStep)}
+ {playerMode == 'multiplayer'
+ ? getStepContent(curActiveStep)
+ : getSPStepContent(curActiveStep)}
);
-}
+};
-export default Modules;
\ No newline at end of file
+export default Modules;
diff --git a/src/components/layout/Navbar.jsx b/src/components/layout/Navbar.jsx
index b74afa30..f9b9326b 100644
--- a/src/components/layout/Navbar.jsx
+++ b/src/components/layout/Navbar.jsx
@@ -6,62 +6,70 @@ import Typography from '@material-ui/core/Typography';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import ColorLibButton from './ColorLibComponents/ColorLibButton';
+import { useUser } from '../../context/userContext';
+
const useStyles = makeStyles((theme) => ({
icon: {
color: theme.palette.teal.dark,
flexGrow: 1,
- fontWeight: "600",
+ fontWeight: '600',
},
navbar: {
- backgroundColor: "white",
- border: "1px solid #C2DCE7",
- boxShadow: "0px 0px 0px 0px",
+ backgroundColor: 'white',
+ border: '1px solid #C2DCE7',
+ boxShadow: '0px 0px 0px 0px',
},
navbar_button: {
color: theme.palette.gray.dark,
- fontSize: "16px",
- margin: "0px 13px",
- padding: "6px 17px",
+ fontSize: '16px',
+ margin: '0px 13px',
+ padding: '6px 17px',
},
}));
export default function ButtonAppBar() {
const classes = useStyles();
+ const { user } = useUser();
+
+ if (user === undefined) {
+ return null;
+ }
+
return (
-
+
-
+
Pin-MI
-
Home
-
Project
- {["Practice", "Review"].map((label) => (
- (
+
{label}
- ))}
- */}
+
+ {user !== null && user !== undefined && (
+
+ Review
+
+ )}
+
+
+ {user !== null && user !== undefined
+ ? user.email
+ : 'Sign up / Log in'}
diff --git a/src/components/layout/PracticeSession/Session.jsx b/src/components/layout/PracticeSession/Session.jsx
index e6f58bd0..a455f4b2 100644
--- a/src/components/layout/PracticeSession/Session.jsx
+++ b/src/components/layout/PracticeSession/Session.jsx
@@ -7,7 +7,7 @@ import { baseURL } from '../../constants';
import { firebase } from '../../../hooks/firebase';
//context
-import { useSessionValue, usePinsValue, useActiveStepValue } from "../../../context";
+import { useSessionValue, usePinsValue, useActiveStepValue, usePlayerModeValue } from "../../../context";
const Session = () => {
const [nextPage, setNextPage] = useState(false);
@@ -42,6 +42,7 @@ const Session = () => {
// }
const user = useSelector(state => state.user);
+ const { playerMode } = usePlayerModeValue();
//hostName is a string that is the clients usermode that should host the archive.
const checkIsArchiveHost = (hostName) => {
diff --git a/src/components/layout/Refresher.jsx b/src/components/layout/Refresher.jsx
index 5f6d9a7a..8ee60b1a 100644
--- a/src/components/layout/Refresher.jsx
+++ b/src/components/layout/Refresher.jsx
@@ -11,6 +11,10 @@ import ColorLibPaper from './ColorLibComponents/ColorLibPaper';
import Typography from '@material-ui/core/Typography';
import { firebase } from "../../hooks/firebase";
+import SinglePlayerToggleButton, {
+SinglePlayerToggleButtonGroup,
+} from "./SinglePlayerComponents/SinglePlayerToggleButton";
+import { usePlayerModeValue } from "../../context";
const Refresher = () => {
@@ -27,6 +31,7 @@ const Refresher = () => {
const user = useSelector(state => state.user);
const session = useSelector(state => state.session);
+ const { playerMode, setPlayerMode } = usePlayerModeValue();
useEffect(() => {
// Scroll on render
@@ -60,6 +65,12 @@ const Refresher = () => {
// }
};
+ const handlePlayerMode = (event, newMode) => {
+ if (newMode !== null) {
+ setPlayerMode(newMode);
+ }
+ };
+
const handleQuestion1 = (event, newAns) => {
if (newAns !== null) {
setQuestion1Ans(newAns);
@@ -255,6 +266,18 @@ const Refresher = () => {
+
+
+ Multiplayer
+
+
+ Single-player
+
+
({
+ welcome_container: {
+ padding: '50px 68px 50px 68px',
+ textAlign: 'center',
+ },
+ welcome_intro: {
+ color: theme.palette.teal.dark,
+ },
+ welcome_definition: {
+ color: theme.palette.gray.main,
+ fontStyle: 'italic',
+ padding: '10px 20px 10px 20px',
+ },
+ button_wrapper: {
+ marginBottom: '68px',
+ textAlign: 'center',
+ },
+ session_container: {
+ padding: '25px 34px 25px 34px',
+ textAlign: 'center',
+ },
+}));
+
+// Review Page thats prompts user to enter user name and select session info
+const Review = () => {
+ const classes = useStyles();
+
+ const [sessionsList, setSessionsList] = useState([]);
+
+ const [firebaseUsers, setFirebaseUsers] = useState([]);
+ const [selectedFirebaseUser, setSelectedFirebaseUser] = useState(null);
+
+ const { user: firebaseUser } = useUser();
+
+ const history = useHistory();
+
+ useEffect(() => {
+ if (firebaseUser && rootUserIds.includes(firebaseUser.uid)) {
+ firebase
+ .firestore()
+ .collection('firebaseUsers')
+ .get()
+ .then((querySnapshot) => {
+ if (querySnapshot.empty) {
+ setFirebaseUsers([]);
+ } else {
+ let _firebaseUsers = [];
+ querySnapshot.forEach(async (doc) => {
+ let fbUser = {
+ ...doc.data(),
+ };
+
+ _firebaseUsers.push(fbUser);
+ });
+ setFirebaseUsers(_firebaseUsers);
+ console.log(_firebaseUsers);
+ }
+ });
+ }
+
+ if (firebaseUser) {
+ updateSessionsList(firebaseUser.uid);
+ setSelectedFirebaseUser({
+ value: firebaseUser.uid,
+ label: firebaseUser.email,
+ });
+ }
+ }, [firebaseUser]);
+
+ const updateSessionsList = async (firebaseUserId) => {
+ console.log(firebaseUserId);
+ setSessionsList([]);
+
+ firebase
+ .firestore()
+ .collection('singleplayer')
+ .doc(firebaseUserId)
+ .get()
+ .then((snapshot) => {
+ if (snapshot.exists) {
+ snapshot.ref
+ .collection('sessions')
+ .get()
+ .then((querySnapshot) => {
+ if (querySnapshot.empty) {
+ setSessionsList([]);
+ } else {
+ let _sessions = [];
+ querySnapshot.forEach(async (doc) => {
+ let _session = {
+ id: doc.id,
+ ...doc.data(),
+ dateNumber: new Date(doc.data().date).getTime(),
+ };
+ _sessions.push(_session);
+ });
+ // console.log(_sessions);
+ _sessions = reverse(sortBy(_sessions, ['dateNumber']));
+ setSessionsList(_sessions);
+ }
+ });
+ }
+ });
+ };
+
+ //save username entered and session clicked
+ const updateSessionInfo = async (s) => {
+ // history.push(
+ // `/reviewsingleplayer?uid=${selectedFirebaseUser.value}&sid=${s.id}&refuid=${s.refUsername}&refsid=${s.refSessionID}`
+ // );
+ };
+
+ return (
+ <>
+
+
+ Review Past Pin-MI Sessions
+
+
+
+ {firebaseUsers && firebaseUsers.length > 0 && (
+
+
+ )}
+
+ {sessionsList.map((s, idx) => (
+ setShowDetails(!showDetails)}
+ >
+ {!showDetails ? (
+ <>
+ {s.date} {s.completed && '[Completed]'}
+
+ ) : (
+ <>
+ {`uid=${selectedFirebaseUser.value}`}
+
+ {`session=${s.id}`} +
+ {s.date} {s.completed && '[Completed]'} + {/* {`uid=${selectedFirebaseUser.value}&sid=${s.id}&refuid=${s.refUsername}&refsid=${s.refSessionID}`} */} + + )} +
+ );
+};
+
+export default Review;
diff --git a/src/components/layout/SelfReflection.jsx b/src/components/layout/SelfReflection.jsx
index 8727fc67..83d8e442 100644
--- a/src/components/layout/SelfReflection.jsx
+++ b/src/components/layout/SelfReflection.jsx
@@ -3,271 +3,304 @@ import { useSelector, useDispatch } from 'react-redux';
import { Box, Container, Typography } from '@material-ui/core';
-import { ColorLibNextButton, ColorLibBackButton } from './ColorLibComponents/ColorLibButton';
+import {
+ ColorLibNextButton,
+ ColorLibBackButton,
+} from './ColorLibComponents/ColorLibButton';
import ColorLibTextField from './ColorLibComponents/ColorLibTextField';
import ColorLibPaper from './ColorLibComponents/ColorLibPaper';
import firebase from 'firebase';
-//import { useSessionValue } from '../../context';
import { reset } from '../Store';
+import { useUser } from '../../context/userContext';
+
const getPageTitle = (page) => {
- switch (page) {
- case 0: return "Based on today’s session";
- case 1: return "Make a plan";
- case 2: return "Prepare for change";
- default: return "";
- }
-}
+ switch (page) {
+ case 0:
+ return 'Based on today’s session';
+ case 1:
+ return 'Make a plan';
+ case 2:
+ return 'Prepare for change';
+ default:
+ return '';
+ }
+};
const getPageButtons = (page, setPage, makeReflectionDoc) => {
- const handleNext = () => {
- setPage(page + 1);
- }
- const handleBack = () => {
- setPage(page - 1);
- }
- switch (page) {
- case 0: return (
-
- Next
-
- );
- case 1: return (
-
+ Next
+
+ );
+ case 1:
+ return (
+
-
- Reflect on how the session went and how you felt.
-
-
-
- {getPageTitle(page)}
-
- {getPageContent(page)}
-
-
- );
-}
+ return (
+
+
+ Reflect on how the session went and how you felt.
+
+
+ {getPageTitle(page)}
+ {getPageContent(page)}
+
+
+ );
+};
-export default SelfReflection;
\ No newline at end of file
+export default SelfReflection;
diff --git a/src/components/layout/SinglePlayerComponents/SinglePlayerAudioReview.jsx b/src/components/layout/SinglePlayerComponents/SinglePlayerAudioReview.jsx
new file mode 100644
index 00000000..bef98938
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/SinglePlayerAudioReview.jsx
@@ -0,0 +1,390 @@
+import React, { useRef, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Typography, Grid } from '@material-ui/core';
+import ReactPlayer from 'react-player';
+import ColorLibAudioPlayer from '../../layout/ColorLibComponents/ColorLibAudioPlayer';
+import { formatTime, generatePushId } from '../../../helper/index';
+import { useSelector } from 'react-redux';
+
+// context
+import {
+ useActiveStepValue,
+ useSessionValue,
+ usePinsValue,
+ useSinglePlayerPinsValue,
+ useSinglePlayerSessionValue,
+} from '../../../context';
+import { useEffect } from 'react';
+
+// firebase hook
+import { usePins, useMediaURL } from '../../../hooks/index';
+import { firebase } from '../../../hooks/firebase';
+import { transcriptArr } from '../SinglePlayerModules/config';
+
+const SinglePlayerAudioReview = ({
+ curPinIndex,
+ setCurPinIndex,
+ prevPinIndex,
+ setPrevPinIndex,
+ allPins = [],
+ disableAddPin = true,
+}) => {
+ const player = useRef(null);
+ const { curActiveStep } = useActiveStepValue();
+ //session data
+ const {
+ sessionID,
+ setMediaDuration,
+ setMediaUrl,
+ // mediaUrl: audio,
+ // mediaDuration: audioLen,
+ } = useSessionValue();
+ const audio = 'https://www.dropbox.com/s/vbxfztsjkcxlssd/pin_vid.m4a?dl=0';
+ const [audioLen, setAudioLen] = useState(0);
+ // fetch raw pin data here
+ const { pins } = usePinsValue();
+ //fetch user data
+ const user = useSelector((state) => state.user);
+ const { singlePlayerPins } = useSinglePlayerPinsValue();
+ const { singlePlayerUsername, singlePlayerSessionID } =
+ useSinglePlayerSessionValue();
+ console.log('SinglePlayerPins: ', singlePlayerPins);
+
+ const [sourceVideo, setSourceVideo] = useState(
+ 'https://www.dropbox.com/s/jhlf09qloi62k6h/pin_vid.mov?dl=0'
+ );
+
+ useEffect(() => {
+ console.log(singlePlayerUsername, singlePlayerSessionID);
+ if (singlePlayerUsername && singlePlayerSessionID) {
+ firebase
+ .firestore()
+ .collection('sessions_by_usernames')
+ .doc(singlePlayerUsername)
+ .collection('sessions')
+ .doc(singlePlayerSessionID)
+ .get()
+ .then((doc) => {
+ const data = doc.data();
+ setSourceVideo(data.archiveData.url);
+ });
+ }
+ }, [singlePlayerUsername, singlePlayerSessionID]);
+
+ const [localTrans, setLocalTrans] = useState([]);
+
+ // fetch trans data here
+ const fetchTranscript = async () => {
+ const docRef = await firebase
+ .firestore()
+ .collection('sessions')
+ .doc(sessionID);
+ await docRef
+ .get()
+ .then((doc) => {
+ if (doc.exists) {
+ const ts = getTimeStamp(doc.data()['transcript']);
+
+ for (let i = 0; i < pins.length; i++) {
+ const TSIndex = binarySearch(ts, 0, ts.length, pins[i].pinTime);
+ const newSinglePlayerPin = {
+ ...pins[i],
+ transcriptindex: TSIndex,
+ };
+ singlePlayerPins.push(newSinglePlayerPin);
+ }
+ setLocalTrans(ts);
+ } else {
+ // doc.data() will be undefined in this case
+ console.log('No such document!');
+ }
+ })
+ .catch((error) => {
+ console.log('Error getting document:', error);
+ });
+ };
+
+ useEffect(() => {
+ // fetchTranscript();
+ const ts = getTimeStamp(transcriptArr);
+ setLocalTrans(ts);
+ }, []);
+
+ const getTimeStamp = (transcriptArr) => {
+ return (
+ transcriptArr &&
+ transcriptArr.map((transcriptString) => {
+ var index = transcriptString.indexOf('-');
+ if (index) {
+ var tempTimeSeconds = Math.floor(
+ parseInt(transcriptString.slice(0, index), 10) / 1000
+ );
+
+ return tempTimeSeconds;
+ }
+ })
+ );
+ };
+
+ // get document ID
+ const pinID = generatePushId();
+ // hard-coded sessionID here
+ const MiTrainingSessionID = '123';
+
+ // const { mediaURL: audio, setMediaURL } = useMediaURL();
+
+ const [pinBtnDisabled, setPinBtnDisabled] = useState(false);
+ const [pinBtnColor, setPinBtnColor] = useState('');
+ const [audioProgress, setAudioProgress] = useState(0);
+ const [audioPlaying, setAudioPlaying] = useState(false);
+
+ const [loadURL, setLoadURL] = useState(false);
+ useEffect(() => {
+ console.log('Audio from AudioReview useEffect' + audio);
+ }, []);
+
+ let playTimeArr = singlePlayerPins.map((pin) => pin.pinTime);
+
+ const getDBMediaURL = async () => {
+ const docRef = await firebase
+ .firestore()
+ .collection('sessions')
+ .doc(sessionID);
+ docRef.get().then((doc) => {
+ if (doc.exists) {
+ if (doc.data().media_url != 'default') {
+ console.log('caller db mediaURL getter:' + doc.data().media_url);
+ setMediaDuration(doc.data().duration);
+ setMediaUrl(doc.data().media_url);
+ return doc.data().media_url;
+ } else {
+ //MAYBE DO SOMETHING HERE TO INDICATE THAT URL IS NOT LOADED YET
+ console.log('URL is not set yet');
+ return 'default';
+ }
+ } else {
+ // doc.data() will be undefined in this case
+ console.log('No such document!');
+ }
+ });
+ };
+
+ // back to last pin
+ const handleLastPin = (index) => {
+ console.log(audio);
+ console.log(audioLen);
+ console.log(audioProgress);
+ if (curPinIndex > 0) {
+ setCurPinIndex(index - 1);
+ player.current.seekTo(
+ parseFloat(pins.map((pin) => pin.pinTime)[index - 1])
+ );
+ }
+ };
+
+ // go to next pin
+ const handleNextPin = (index, remove = false) => {
+ console.log('interesting: ' + curPinIndex + ' length: ' + pins.length);
+ if (curPinIndex < pins.length - 1) {
+ console.log('Index: ' + index);
+ if (!remove) {
+ player.current.seekTo(
+ parseFloat(pins.map((pin) => pin.pinTime)[index])
+ );
+ setCurPinIndex(index);
+ } else {
+ player.current.seekTo(
+ parseFloat(pins.map((pin) => pin.pinTime)[index])
+ );
+ setCurPinIndex(index);
+ }
+ }
+ };
+
+ const addPin = async (curTime) => {
+ if (disableAddPin) return;
+
+ // ui on
+ setPinBtnDisabled(true);
+ setPinBtnColor('primary');
+ // ui off
+ setTimeout(() => {
+ setPinBtnDisabled(false);
+ }, 800);
+
+ const TSIndex = binarySearch(localTrans, 0, localTrans.length, curTime);
+
+ //create a newPin object to house pin details
+ const newSinglePlayerPin = {
+ pinID: '',
+ creatorID: user.userID,
+ creatorMode: user.userMode,
+ pinTime: curTime,
+ callerPinNote: '',
+ callerPinPerspective: '',
+ callerPinCategory: '',
+ callerPinSkill: '',
+ calleePinNote: '',
+ calleePinPerspective: '',
+ calleePinCategory: '',
+ calleePinSkill: '',
+ pinEfficacy: '',
+ pinGoal: '',
+ pinStrength: '',
+ pinOpportunity: '',
+ transcriptindex: TSIndex,
+ };
+
+ //now correctly add the pin into the array to maintain sortedness
+ singlePlayerPins.splice(curPinIndex + 1, 0, newSinglePlayerPin);
+
+ //update the current pin index so it points to the newly created pin
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(curPinIndex + 1);
+ };
+
+ const deletePin = async (index) => {
+ singlePlayerPins.splice(index, 1);
+ console.log('Document successfully deleted!');
+
+ // ui on
+ setPinBtnDisabled(true);
+ setPinBtnColor('secondary');
+ // ui off
+ setTimeout(() => {
+ setPinBtnDisabled(false);
+ }, 800);
+ };
+
+ const handlePin = () => {
+ const curTime = Math.round(player.current.getCurrentTime());
+ let index = playTimeArr.indexOf(curTime);
+ addPin(curTime);
+ // if (pins.map(pin => pin.pinTime).indexOf(curTime) !== -1) {
+ // // remove current pin
+ // deletePin(index);
+ // // auto jump to next available pin point
+ // console.log(pins.length);
+ // if(pins.map(pin => pin.pinTime).length === 0) {
+ // player.current.seekTo(parseFloat(0));
+ // }
+ // else if(pins.map(pin => pin.pinTime).length === 2){
+ // curPinIndex === 0 ?
+ // player.current.seekTo(parseFloat(pins.map(pin => pin.pinTime)[1])) :
+ // handleLastPin(curPinIndex - 1)
+ // }
+ // else{
+ // curPinIndex === pins.map(pin => pin.pinTime).length - 1 ||
+ // curPinIndex === pins.map(pin => pin.pinTime).length ?
+ // handleLastPin(curPinIndex - 1) :
+ // handleNextPin(curPinIndex + 1, true);
+ // }
+ // } else {
+ // // add current playtime as a new pin and seek to it
+ // addPin(curTime);
+ // }
+ };
+
+ const handleProgress = (state) => {
+ setAudioProgress(Math.round(state.playedSeconds));
+ };
+
+ const handleAudioProgress = (currentTime) => {
+ setAudioProgress(currentTime);
+ console.log('Current Time in AR: ' + currentTime);
+ if (player.current != null) {
+ player.current.seekTo(currentTime);
+ }
+ //if the audio progress hits the next pin, update the current pin index
+ const newIndex = singlePlayerPins.findIndex(
+ (elem) => elem.pinTime > currentTime
+ );
+ console.log('New Index: ' + newIndex);
+ if (newIndex == -1) {
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(singlePlayerPins.length - 1);
+ } else if (newIndex == 0) {
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(0);
+ } else {
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(newIndex - 1);
+ }
+ };
+
+ const binarySearch = (arr, l, r, x) => {
+ console.log(arr, l, r, x);
+ if (r >= l) {
+ let mid = l + Math.floor((r - l) / 2);
+
+ // If the element is present at the middle
+ // itself
+ if (
+ arr[mid] == x ||
+ mid + 1 >= arr.length ||
+ (arr[mid] <= x && arr[mid + 1] > x)
+ )
+ return mid;
+
+ // If element is smaller than mid, then
+ // it can only be present in left subarray
+ if (arr[mid] > x) return binarySearch(arr, l, mid - 1, x);
+
+ // Else the element can only be present
+ // in right subarray
+ return binarySearch(arr, mid + 1, r, x);
+ }
+
+ // We reach here when element is not
+ // present in array
+ return -1;
+ };
+
+ if (allPins.length === 0) {
+ allPins = singlePlayerPins;
+ }
+
+ return (
+
+ {curActiveStep === 2 ? (
+
+ Listen back to the session, add pins, and take notes to discuss with
+ your peer.
+
+ ) : (
+
+ Review Your Peer’s Pins and Give Comments
+
+ )}
+ {
+ return { pinTime: pin.pinTime, creatorMode: pin.creatorMode };
+ })}
+ addPin={addPin}
+ hideAddPin={true}
+ curPinIndex={curPinIndex}
+ />
+ {
+ setAudioLen(Math.round(duration));
+ }}
+ />
+
+ );
+};
+
+export default SinglePlayerAudioReview;
diff --git a/src/components/layout/SinglePlayerComponents/SinglePlayerComment.jsx b/src/components/layout/SinglePlayerComponents/SinglePlayerComment.jsx
new file mode 100644
index 00000000..f7f44fc3
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/SinglePlayerComment.jsx
@@ -0,0 +1,91 @@
+import React, { useState, useRef, useEffect, Fragment } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { formatTime } from "../../../helper/index";
+import { Box, Grid, Paper, Typography, Container } from "@material-ui/core";
+import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
+
+import {
+ ColorLibNextButton,
+ ColorLibBackButton,
+} from "../../layout/ColorLibComponents/ColorLibButton";
+import ColorLibPaper from "../../layout/ColorLibComponents/ColorLibPaper";
+import ColorLibTextField from "../../layout/ColorLibComponents/ColorLibTextField";
+import MISkillsSheet from "../../layout/MISkillsSheet";
+
+// firebase hook
+import { usePins } from "../../../hooks/index";
+import { firebase } from "../../../hooks/firebase";
+
+//context
+import {
+ useSessionValue,
+ usePinsValue,
+ PinsProvider,
+} from "../../../context";
+import { format } from "url";
+import { useSelector } from "react-redux";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: "flex",
+ "& > *": {
+ width: "100%",
+ "&:first-child": {
+ marginRight: "8px",
+ },
+ "&:last-child": {
+ marginLeft: "8px",
+ },
+ },
+ },
+ grid: {
+ "& .MuiGrid-item": {
+ display: "inline-grid",
+ },
+ "& .MuiGrid-grid-sm-4": {
+ position: "relative",
+ margin: "8px",
+ maxWidth: "calc(33.333333% - 8px)",
+ "& .MuiPaper-root": {
+ position: "absolute",
+ top: 0,
+ bottom: 0,
+ overflowY: "scroll",
+ },
+ },
+ "& .MuiGrid-grid-sm-8": {
+ maxWidth: "calc(66.666667% - 8px)",
+ },
+ },
+}));
+
+const SinglePlayerComment = () => {
+ const classes = useStyles();
+
+ //creating a refernce for TextField Components
+ const textValueRef = useRef("");
+
+ const [text, setText] = useState("");
+
+ return (
+
+
+
+ Your Pin Notes
+
+
+ {singlePlayerPins[curPinIndex].peer !== true ? (
+ <>
+ {curPinIndex !== -1 ? (
+
+
+ The session was pinned at{' '}
+ {formatTime(
+ singlePlayerPins.map((pin) => pin.pinTime)[curPinIndex]
+ )}
+
+
+ ) : null}
+
+
+ What is your perspective of what happened at this pin?
+
+
+
+ What would you categorize this pin as?
+
+
+
+
+
+ Strength
+
+
+ Opportunity
+
+
+
+
+
+ What was the goal during the pinned situation?
+
+
+ setCurGoalInfo(goalValueRef.current.value)}
+ />
+
+
+ What worked well to achieve the goal?
+
+
+ setCurStrengthInfo(strengthValueRef.current.value)
+ }
+ />
+
+
+ What could be improved to achieve the goal?
+
+
+
+ setCurOpportunityInfo(opportunityValueRef.current.value)
+ }
+ />
+
+ ) : (
+
+
+ You did not pin here.
+
+
+ )}
+
+
+
+
+
+ Peer's Pin Notes
+
+ {peerPin ? (
+ <>
+
+
+ The session was pinned at {formatTime(peerPin.pinTime)}
+
+
+
+
+ What is your perspective of what happened at this pin?
+
+
+
+ What would you categorize this pin as?
+
+
+
+
+ Strength
+
+
+ Opportunity
+
+
+
+
+
+ What was the goal during the pinned situation?
+
+
+ setCurGoalInfo(goalValueRef.current.value)}
+ />
+
+ What worked well to achieve the goal?
+
+
+ setCurStrengthInfo(strengthValueRef.current.value)
+ }
+ />
+
+
+ What could be improved to achieve the goal?
+
+
+
+ setCurOpportunityInfo(opportunityValueRef.current.value)
+ }
+ />
+
+ ) : (
+
+
+ Your peer did not pin here.
+
+
+ )}
+
+
+
+ );
+};
+
+export default SinglePlayerNotesComparison;
diff --git a/src/components/layout/SinglePlayerComponents/SinglePlayerNotetaking.jsx b/src/components/layout/SinglePlayerComponents/SinglePlayerNotetaking.jsx
new file mode 100644
index 00000000..376b26b2
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/SinglePlayerNotetaking.jsx
@@ -0,0 +1,398 @@
+import React, { useState, useRef, useEffect } from "react";
+import { formatTime } from "../../../helper/index";
+
+import { makeStyles } from "@material-ui/core/styles";
+import { Box, Grid, Typography } from "@material-ui/core";
+import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
+
+import {
+ ColorLibNextButton,
+ ColorLibBackButton,
+} from "../../layout/ColorLibComponents/ColorLibButton";
+import ColorLibPaper from "../../layout/ColorLibComponents/ColorLibPaper";
+import ColorLibTextField from "../../layout/ColorLibComponents/ColorLibTextField";
+import MISkillsSheet from "../../layout/MISkillsSheet";
+
+// firebase hook
+import { usePins } from "../../../hooks/index";
+import { firebase } from "../../../hooks/firebase";
+
+//context
+import { useSessionValue, useSinglePlayerPinsValue } from "../../../context";
+import { useSelector } from "react-redux";
+
+const useStyles = makeStyles((theme) => ({
+ toggleGroup: {
+ marginTop: "8px",
+ marginBottom: "24px",
+ width: "100%",
+ height: "40px",
+ "& .MuiToggleButton-root": {
+ backgroundColor: "white",
+ borderColor: theme.palette.teal.main,
+ borderWidth: "2px",
+ color: theme.palette.teal.main,
+ textTransform: "none",
+ width: "100%",
+ "&.Mui-selected": {
+ backgroundColor: theme.palette.teal.light,
+ },
+ },
+ "& .MuiToggleButtonGroup-groupedHorizontal:first-child": {
+ borderTopLeftRadius: "35px",
+ borderBottomLeftRadius: "35px",
+ },
+ "& .MuiToggleButtonGroup-groupedHorizontal:last-child": {
+ borderTopRightRadius: "35px",
+ borderBottomRightRadius: "35px",
+ },
+ "& .MuiToggleButtonGroup-groupedHorizontal:not(:first-child)": {
+ marginLeft: "3px",
+ },
+ },
+}));
+
+const SinglePlayerNotetaking = ({
+ curPinIndex,
+ setCurPinIndex,
+ prevPinIndex,
+ setPrevPinIndex,
+}) => {
+ //session values
+ const {
+ sessionID,
+ mediaUrl: audio,
+ setMediaUrl,
+ setMediaDuration,
+ mediaDuration: audioLen,
+ } = useSessionValue();
+ // fetch raw pin data here
+ const { singlePlayerPins } = useSinglePlayerPinsValue();
+ // user mode switcher
+ const user = useSelector((state) => state.user);
+
+ const classes = useStyles();
+
+ //creating a reference for TextField Component
+ const player = useRef(null);
+ const noteValueRef = useRef("");
+ const perspectiveValueRef = useRef("");
+ const skillValueRef = useRef("");
+ const goalValueRef = useRef("");
+ const strengthValueRef = useRef("");
+ const opportunityValueRef = useRef("");
+
+ // set up states for four different questions
+ const [pinType, setPinType] = useState("");
+
+ const [curNoteInfo, setCurNoteInfo] = useState("");
+ const [curPerspectiveInfo, setCurPerspectiveInfo] = useState("");
+ const [curSkillInfo, setCurSkillInfo] = useState("");
+ const [curGoalInfo, setCurGoalInfo] = useState("");
+ const [curStrengthInfo, setCurStrengthInfo] = useState("");
+ const [curOpportunityInfo, setCurOpportunityInfo] = useState("");
+
+ const [pinBtnDisabled, setPinBtnDisabled] = useState(false);
+ const [pinBtnColor, setPinBtnColor] = useState("");
+ const [audioProgress, setAudioProgress] = useState(0);
+ const [loadURL, setLoadURL] = useState(false);
+
+ // // back to last pin
+ // const handleLastPin = (index) => {
+ // console.log(audio);
+ // console.log(audioLen);
+ // console.log(audioProgress);
+ // if (curPinIndex > 0) {
+ // setCurPinIndex(index);
+ // player.current.seekTo(parseFloat(pins.map(pin => pin.pinTime)[index]));
+ // }
+ // };
+
+ // // go to next pin
+ // const handleNextPin = (index, remove = false) => {
+ // if (curPinIndex < pins.map(pin => pin.pinTime).length - 1) {
+ // if (!remove) {
+ // player.current.seekTo(parseFloat(pins.map(pin => pin.pinTime)[index]));
+ // setCurPinIndex(index);
+ // } else {
+ // player.current.seekTo(parseFloat(pins.map(pin => pin.pinTime)[index]));
+ // setCurPinIndex(index - 1);
+ // }
+ // }
+ // };
+
+ const handlePrevPin = () => {
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(curPinIndex - 1);
+ };
+
+ const handleNextPin = () => {
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(curPinIndex + 1);
+ };
+
+ const PinNavButtons = () => {
+ if (curPinIndex === -1) return null;
+ const prev = (
+
+ Prev Pin
+
+ );
+ const next = (
+
+ Next Pin
+
+ );
+
+ if (curPinIndex === 0) {
+ return next;
+ }
+ if (curPinIndex === singlePlayerPins.length - 1) {
+ return prev;
+ }
+ return (
+
+
+ {/*
+ {userMode}
+ */}
+ {curPinIndex !== -1 ? (
+
+
+ The session was pinned at{" "}
+ {formatTime(
+ singlePlayerPins.map((pin) => pin.pinTime)[curPinIndex]
+ )}
+
+
+ ) : null}
+ {
+ setCurNoteInfo(noteValueRef.current.value);
+ }}
+ />
+
+ To share with your peer:
+
+
+
+ What is your perspective of what happened at this pin?
+
+
+
+ setCurPerspectiveInfo(perspectiveValueRef.current.value)
+ }
+ />
+
+ What would you categorize this pin as?
+
+
+
+
+ Strength
+
+
+ Opportunity
+
+
+
+ setCurSkillInfo(skillValueRef.current.value)}
+ />
+
+
+ What was the goal during the pinned situation?
+
+
+ setCurGoalInfo(goalValueRef.current.value)}
+ />
+
+ What worked well to achieve the goal?
+
+ setCurStrengthInfo(strengthValueRef.current.value)}
+ />
+
+
+ What could be improved to achieve the goal?
+
+
+ setCurOpportunityInfo(opportunityValueRef.current.value)
+ }
+ />
+
+
+
+
+ );
+};
+
+export default SinglePlayerNotetaking;
diff --git a/src/components/layout/SinglePlayerComponents/SinglePlayerToggleButton.jsx b/src/components/layout/SinglePlayerComponents/SinglePlayerToggleButton.jsx
new file mode 100644
index 00000000..46a9657a
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/SinglePlayerToggleButton.jsx
@@ -0,0 +1,38 @@
+import { makeStyles, withStyles } from "@material-ui/core/styles";
+
+import ToggleButton from "@material-ui/lab/ToggleButton";
+import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
+
+const SinglePlayerToggleButton = withStyles((theme) => ({
+ root: {
+ /* sizeMedium */
+ backgroundColor: theme.palette.teal.lighter,
+ borderRadius: "35px",
+ border: "2px solid !important",
+ borderColor: theme.palette.teal.main + "!important",
+ color: theme.palette.teal.main,
+ fontSize: "20px",
+ fontWeight: "600",
+ lineHeight: "1.5",
+ padding: "6px 27px",
+ textTransform: "none",
+ },
+ sizeLarge: {
+ fontSize: "25px",
+ fontWeight: "600",
+ lineHeight: "37.5px",
+ },
+ sizeSmall: {
+ fontWeight: "400",
+ lineHeight: "22px",
+ },
+ selected: {
+ backgroundColor: theme.palette.teal.main + "!important",
+ borderWidth: "4px !important",
+ color: theme.palette.teal.lighter + "!important",
+ },
+}))(ToggleButton);
+
+export default SinglePlayerToggleButton;
+
+export const SinglePlayerToggleButtonGroup = ToggleButtonGroup;
\ No newline at end of file
diff --git a/src/components/layout/SinglePlayerComponents/SinglePlayerTranscript.jsx b/src/components/layout/SinglePlayerComponents/SinglePlayerTranscript.jsx
new file mode 100644
index 00000000..d63cdd61
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/SinglePlayerTranscript.jsx
@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from 'react';
+import { Typography, Box, Grid } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import ColorLibPaper from '../../layout/ColorLibComponents/ColorLibPaper';
+import ColorLibTextField from '../../layout/ColorLibComponents/ColorLibTextField';
+import { firebase } from '../../../hooks/firebase';
+import { useSessionValue, useSinglePlayerSessionValue } from '../../../context';
+import { transcriptArr } from '../SinglePlayerModules/config';
+
+const useStyles = makeStyles((theme) => ({
+ textField_font: theme.typography.body2,
+}));
+
+const SinglePlayerTranscript = ({ selectedIndex }) => {
+ const classes = useStyles();
+
+ const [localTrans, setLocalTrans] = useState([]);
+ const { sessionID } = useSessionValue();
+ const { singlePlayerUsername, singlePlayerSessionID } =
+ useSinglePlayerSessionValue();
+ // fetch trans data here
+ const fetchTranscript = async () => {
+ // const docRef = await firebase
+ // .firestore()
+ // .collection("sessions")
+ // .doc(sessionID);
+ // await docRef
+ // .get()
+ // .then((doc) => {
+ // if (doc.exists) {
+ // setLocalTrans(doc.data()["transcript"]);
+ // } else {
+ // // doc.data() will be undefined in this case
+ // console.log("No such document!");
+ // }
+ // })
+ // .catch((error) => {
+ // console.log("Error getting document:", error);
+ // });
+
+ const docRef = await firebase
+ .firestore()
+ .collection('sessions_by_usernames')
+ .doc(singlePlayerUsername)
+ .collection('sessions')
+ .doc(singlePlayerSessionID);
+
+ docRef.get().then((doc) => {
+ if (doc.exists) {
+ console.log(doc.data().calleeTranscript);
+ setLocalTrans(doc.data().calleeTranscript);
+ } else {
+ console.log('no such document');
+ }
+ });
+ };
+
+ useEffect(() => {
+ fetchTranscript();
+ // setLocalTrans(transcriptArr);
+ }, []);
+
+ const getTimeStamp = (transcriptString) => {
+ var index = transcriptString.indexOf('-');
+ if (index) {
+ var tempTimeSeconds =
+ parseInt(transcriptString.slice(0, index), 10) / 1000;
+
+ return convertSecondstoTime(tempTimeSeconds);
+ }
+ };
+
+ const getText = (transcriptString) => {
+ var index = transcriptString.indexOf('-');
+ if (index) {
+ return transcriptString.slice(index + 1);
+ }
+ };
+
+ //https://www.geeksforgeeks.org/how-to-convert-seconds-to-time-string-format-hhmmss-using-javascript/
+ const convertSecondstoTime = (given_seconds) => {
+ var dateObj = new Date(given_seconds * 1000);
+ var hours = dateObj.getUTCHours();
+ var minutes = dateObj.getUTCMinutes();
+ var seconds = dateObj.getSeconds();
+
+ var timeString =
+ hours.toString().padStart(2, '0') +
+ ':' +
+ minutes.toString().padStart(2, '0') +
+ ':' +
+ seconds.toString().padStart(2, '0');
+
+ return timeString;
+ };
+
+ const renderTranscript = () => {
+ return (
+ localTrans &&
+ localTrans.map((item, index) => (
+
+
+
+ Transcript
+
+
+ {renderTranscript()}
+
+
+
+ );
+};
+
+export default SinglePlayerTranscript;
diff --git a/src/components/layout/SinglePlayerComponents/SinglePlayerVideoChat.jsx b/src/components/layout/SinglePlayerComponents/SinglePlayerVideoChat.jsx
new file mode 100644
index 00000000..ddcc2f6c
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/SinglePlayerVideoChat.jsx
@@ -0,0 +1,602 @@
+import React, { useState, useEffect, useRef } from 'react';
+import ProgressBar from '@ramonak/react-progress-bar';
+
+import pinningClick from '../../../other/tutorial/pinning-click.png';
+import videoPlay from '../../../other/tutorial/video-play.png';
+
+import ColorLibButton, {
+ ColorLibNextButton,
+ ColorLibCallEndButton,
+} from '../ColorLibComponents/ColorLibButton';
+import ColorLibPaper from '../ColorLibComponents/ColorLibPaper';
+
+import '../../VideoChatComponent.scss';
+
+import { useSelector } from 'react-redux';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+ Typography,
+ Tooltip,
+ Button,
+ LinearProgress,
+ Box,
+ Popper,
+} from '@material-ui/core';
+import { Icon, Fab } from '@material-ui/core';
+import pin from '../../../other/pin.svg';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import { baseURL } from '../../constants';
+
+import {
+ useSessionValue,
+ useActiveStepValue,
+ usePinsValue,
+ useSinglePlayerPinsValue,
+ useSinglePlayerSessionValue,
+} from '../../../context';
+import { firebase } from '../../../hooks/firebase';
+import ReactPlayer from 'react-player';
+import { transcriptArr } from '../SinglePlayerModules/config';
+import '../../VideoChatComponent.scss';
+
+import { formatTime } from '../../../helper/index';
+
+const useStyles = makeStyles((theme) => ({
+ imageIcon: {
+ height: '120%',
+ },
+ iconRoot: {
+ textAlign: 'center',
+ },
+ fab: {
+ marginLeft: 550,
+ },
+ display: 'flex',
+ '& > * + *': {
+ marginLeft: theme.spacing(5),
+ },
+ dialog: {
+ '& .MuiDialogContentText-root': {
+ color: theme.palette.gray.dark,
+ display: 'flex',
+ '& video': {
+ borderRadius: '5px',
+ width: '100%',
+ height: '100%',
+ backgroundColor: 'black',
+ },
+ '& .MuiFab-root': {
+ left: 'calc(50% - 50px)',
+ width: '45px',
+ height: '45px',
+ backgroundColor: 'white',
+ border: 'solid 1px ' + theme.palette.teal.light,
+ '& .MuiSvgIcon-root': {
+ fill: theme.palette.teal.dark,
+ },
+ '&:last-child': {
+ marginLeft: '10px',
+ },
+ },
+ },
+ },
+}));
+
+function SinglePlayerVideoChat(props) {
+ const pinBtn = useRef(null);
+
+ const { curActiveStep: activeStep, setCurActiveStep: setActiveStep } =
+ useActiveStepValue();
+ //get setter for media duration
+ const session = useSelector((state) => state.session);
+ const { setMediaDuration, setMediaUrl } = useSessionValue();
+ // fetch raw pin data here
+ const { pins } = usePinsValue();
+ //get user informatoin
+ const user = useSelector((state) => state.user);
+ //video player
+ const player = useRef(null);
+ const [audioProgress, setAudioProgress] = useState(0);
+ const handleProgress = (state) => {
+ setAudioProgress(Math.round(state.playedSeconds));
+ };
+
+ const [audioDuration, setAudioDuration] = useState(0);
+ const handleDuration = (dur) => {
+ setAudioDuration(Math.round(dur));
+ };
+
+ const [openWarning, setOpenWarning] = useState(false);
+
+ const [popperContentIndex, setPopperContentIndex] = useState(0);
+ const [popperOpen, setPopperOpen] = useState(false);
+
+ const recommendedTime = 10 * 60;
+ const [countDown, setCountDown] = useState(recommendedTime); // 10 minutes
+
+ const getPopperContent = (index) => {
+ switch (index) {
+ case 0:
+ return 'Don’t forget to pin at least twice';
+ case 1:
+ const thisPin = singlePlayerPins[singlePlayerPins.length - 1];
+ const pinTime = thisPin.pinTime;
+ const pinCreatorMode = thisPin.creatorMode;
+ console.log(pinCreatorMode, user.userMode);
+ return `Successfully pinned at ${formatTime(pinTime)}`;
+ default:
+ return 'Invalid Pin Content.';
+ }
+ };
+
+ const handlePinButtonClick = () => {
+ if (videoCallTimer === 0) {
+ return;
+ }
+ if (popperOpen) {
+ setPopperOpen(false);
+ return;
+ }
+ var pinTime = Math.floor((Date.now() - videoCallTimer) / 1000);
+ console.log('added a pin');
+ addPin(pinTime);
+ // ui on
+ setPinBtnDisabled(true);
+ setPinBtnColor('primary');
+ // ui off
+ setTimeout(() => {
+ setPinBtnDisabled(false);
+ }, 800);
+ };
+
+ const [open, setOpen] = useState(true);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const [isInterviewStarted, setIsInterviewStarted] = useState(false);
+ const [isStreamSubscribed, setIsStreamSubscribed] = useState(false);
+ const isSubscribed = useSelector(
+ (state) => state.videoChat.isStreamSubscribed
+ );
+
+ // needed vonage info
+ const [room, setRoom] = useState('hello');
+ //const [baseURL, setBaseURL] = useState("https://pinmi-test-1.herokuapp.com/");
+ const [apiKey, setApiKey] = useState('YOUR_API_KEY');
+ const [sessionId, setSessionId] = useState('YOUR_SESSION_ID');
+ const [token, setToken] = useState('YOUR_TOKEN');
+
+ const [loadingStatus, setLoadingStatus] = useState(false);
+
+ const [pinBtnDisabled, setPinBtnDisabled] = useState(false);
+ const [pinBtnColor, setPinBtnColor] = useState('');
+
+ //archvieData is the data that is returned in the server response when the archive starts
+ const [archiveData, setArchiveData] = useState({});
+ //isArchviving is true when the achrive is actively recording
+ const [isArchiving, setIsArchiving] = useState(false);
+
+ // self-made timer
+ const [videoCallTimer, setVideoCallTimer] = useState(0);
+ const classes = useStyles();
+
+ // //ATTEMPT TO PUT API CODE INTO THIS FUNCTION
+ // const
+
+ useEffect(() => {
+ setIsStreamSubscribed(isSubscribed);
+ console.log('STREAM SUBSCRIBED FROM SELECTOR UPDATED');
+ }, [isSubscribed]);
+
+ //get setter for media duration
+ // const { sessionID, setMediaDuration, setMediaUrl } = useSessionValue();
+ // fetch raw pin data here
+ // const { pins } = usePinsValue();
+
+ const { singlePlayerPins } = useSinglePlayerPinsValue();
+ const { singlePlayerUsername, singlePlayerSessionID } =
+ useSinglePlayerSessionValue();
+ //what is going on with addPinDelayTime????
+ const addPinDelayTime = 20;
+
+ const [sourceVideo, setSourceVideo] = useState(
+ 'https://www.dropbox.com/s/jhlf09qloi62k6h/pin_vid.mov?dl=0'
+ );
+
+ useEffect(() => {
+ console.log(singlePlayerUsername, singlePlayerSessionID);
+ if (singlePlayerUsername && singlePlayerSessionID) {
+ firebase
+ .firestore()
+ .collection('sessions_by_usernames')
+ .doc(singlePlayerUsername)
+ .collection('sessions')
+ .doc(singlePlayerSessionID)
+ .get()
+ .then((doc) => {
+ const data = doc.data();
+ setSourceVideo(data.archiveData.url);
+ });
+ }
+ }, [singlePlayerUsername, singlePlayerSessionID]);
+
+ const binarySearch = (arr, l, r, x) => {
+ console.log(arr, l, r, x);
+ if (r >= l) {
+ let mid = l + Math.floor((r - l) / 2);
+
+ // If the element is present at the middle
+ // itself
+ if (
+ arr[mid] == x ||
+ mid + 1 >= arr.length ||
+ (arr[mid] <= x && arr[mid + 1] > x)
+ )
+ return mid;
+
+ // If element is smaller than mid, then
+ // it can only be present in left subarray
+ if (arr[mid] > x) return binarySearch(arr, l, mid - 1, x);
+
+ // Else the element can only be present
+ // in right subarray
+ return binarySearch(arr, mid + 1, r, x);
+ }
+
+ // We reach here when element is not
+ // present in array
+ return -1;
+ };
+
+ const getTimeStamp = (transcriptArr) => {
+ return (
+ transcriptArr &&
+ transcriptArr.map((transcriptString) => {
+ var index = transcriptString.indexOf('-');
+ if (index) {
+ var tempTimeSeconds = Math.floor(
+ parseInt(transcriptString.slice(0, index), 10) / 1000
+ );
+
+ return tempTimeSeconds;
+ }
+ })
+ );
+ };
+ const addPin = async (curTime) => {
+ if (
+ singlePlayerPins.length > 0 &&
+ singlePlayerPins[singlePlayerPins.length - 1].pinTime == curTime
+ ) {
+ return;
+ }
+
+ const ts = getTimeStamp(transcriptArr);
+ const TSIndex = binarySearch(ts, 0, ts.length, curTime);
+ console.log(TSIndex);
+
+ singlePlayerPins.push({
+ pinID: '',
+ creatorID: '',
+ creatorMode: '',
+ pinTime: curTime,
+ callerPinNote: '',
+ callerPinPerspective: '',
+ callerPinCategory: '',
+ callerPinSkill: '',
+ calleePinNote: '',
+ calleePinPerspective: '',
+ calleePinCategory: '',
+ calleePinSkill: '',
+ pinEfficacy: '',
+ pinGoal: '',
+ pinStrength: '',
+ pinOpportunity: '',
+ transcriptindex: TSIndex,
+ });
+
+ setPopperContentIndex(1);
+ setPopperOpen(true);
+ setTimeout(() => {
+ setPopperOpen(false);
+ }, 3000);
+
+ console.log('Finished pushing');
+ };
+
+ // if (error) {
+ // return (
+ // {
+ handlePinButtonClick();
+ }}
+ ref={pinBtn}
+ >
+
+ 
+
+
+
+
+
+ {getPopperContent(popperContentIndex)}
+
+
+
+
+ );
+ };
+
+ const handleStartChat = async (
+ setApiKey,
+ setSessionId,
+ setToken,
+ baseURL
+ ) => {
+ setOpen(false);
+ console.log('loading info now...');
+ setLoadingStatus(true);
+ if (props.mode == 'Discussion') {
+ var roomAddOn = 'Discussion';
+ console.log('Discussion Room Video component');
+ } else {
+ var roomAddOn = '';
+ }
+ await fetch(baseURL + 'room/' + room + roomAddOn)
+ .then(function (res) {
+ return res.json();
+ })
+ .then(function (res) {
+ console.log('got server info');
+ setApiKey(res.apiKey);
+ setSessionId(res.sessionId);
+ setToken(res.token);
+ })
+ .then(() => {
+ setLoadingStatus(false);
+ console.log('start chat now');
+ setIsInterviewStarted(true);
+ setVideoCallTimer(Date.now());
+ if (props.isArchiveHost) {
+ //props.startRec();
+ console.log('start recording');
+ }
+ //pass in videoCallTimer so we can create time stamps
+ setPopperOpen(true);
+ setTimeout(() => {
+ if (popperContentIndex === 0) {
+ setPopperOpen(false);
+ }
+ }, 5000);
+ setTimeout(() => {
+ setPopperOpen(true);
+ setPopperContentIndex(0);
+ }, 300000);
+ setTimeout(() => {
+ if (popperContentIndex === 0) {
+ setPopperOpen(false);
+ }
+ }, 305000);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ };
+
+ const handleFinishChat = async () => {
+ setIsInterviewStarted(false);
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+
+ //sort the array
+ singlePlayerPins.sort(function (a, b) {
+ return a.pinTime - b.pinTime;
+ });
+
+ console.log(singlePlayerPins);
+ if (singlePlayerPins[0]) {
+ console.log(singlePlayerPins[0]);
+ }
+ };
+
+ return (
+ <>
+ {loadingStatus ?
+
+
+ {
+ handlePinButtonClick();
+ }}
+ ref={pinBtn}
+ >
+
+
+
+
+
+
+
+ {getPopperContent(popperContentIndex)}
+
+
+
+
+ );
+ };
+
+ const handleStartChat = async (
+ setApiKey,
+ setSessionId,
+ setToken,
+ baseURL
+ ) => {
+ setOpen(false);
+ console.log("loading info now...");
+ setLoadingStatus(true);
+ if (props.mode == "Discussion") {
+ var roomAddOn = "Discussion";
+ console.log("Discussion Room Video component");
+ } else {
+ var roomAddOn = "";
+ }
+ await fetch(baseURL + "room/" + room + roomAddOn)
+ .then(function (res) {
+ return res.json();
+ })
+ .then(function (res) {
+ console.log("got server info");
+ setApiKey(res.apiKey);
+ setSessionId(res.sessionId);
+ setToken(res.token);
+ })
+ .then(() => {
+ setLoadingStatus(false);
+ console.log("start chat now");
+ setIsInterviewStarted(true);
+ setVideoCallTimer(Date.now());
+ if (props.isArchiveHost) {
+ //props.startRec();
+ console.log("start recording");
+ }
+ //pass in videoCallTimer so we can create time stamps
+ setPopperOpen(true);
+ setTimeout(() => {
+ if (popperContentIndex === 0) {
+ setPopperOpen(false);
+ }
+ }, 5000);
+ setTimeout(() => {
+ setPopperOpen(true);
+ setPopperContentIndex(0);
+ }, 300000);
+ setTimeout(() => {
+ if (popperContentIndex === 0) {
+ setPopperOpen(false);
+ }
+ }, 305000);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ };
+
+ const handleFinishChat = async () => {
+ setIsInterviewStarted(false);
+ addTranscript();
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+
+ //sort the array
+ singlePlayerPins.sort(function (a, b) {
+ return a.pinTime - b.pinTime;
+ });
+
+ console.log(singlePlayerPins);
+ if (singlePlayerPins[0]) {
+ console.log(singlePlayerPins[0]);
+ }
+ };
+
+ return (
+ <>
+ {loadingStatus ?
+
+
+
+ Prev Pin
+
+ );
+ const next = (
+
+ Next Pin
+
+ );
+
+ if (curPinIndex === 0) {
+ return next;
+ }
+ if (curPinIndex === allPins.length - 1) {
+ return prev;
+ }
+ return (
+
+ {prev}
+ {next}
+
+ );
+ };
+
+ if (allPins.length === 0) return null;
+
+ return (
+ ;
+ case 0:
+ return (
+
- {children}
-
- )
-}
+export const ActiveStepProvider = ({ children }) => {
+ const [curActiveStep, setCurActiveStep] = useState(0);
+
+ return (
+
+ {children}
+
+ );
+};
export const useActiveStepValue = () => useContext(ActiveStepContext);
-export const SessionContext = createContext();
+export const PlayerModeContext = createContext();
+export const PlayerModeProvider = ({ children }) => {
+ const [playerMode, setPlayerMode] = useState('singleplayer');
+
+ return (
+
+ {children}
+
+ );
+};
+export const usePlayerModeValue = () => useContext(PlayerModeContext);
+// export const SessionContext = createContext();
+// export const SessionProvider = ({ children }) => {
+// const [apiKey, setApiKey] = useState("YOUR_API_KEY");
+// const [sessionId, setSessionId] = useState("YOUR_SESSION_ID");
+// const [token, setToken] = useState("YOUR_TOKEN");
+// return (
+//
+// {children}
+//
+// );
+// };
+// export const useSessionValue = () => useContext(SessionContext);
-export const SessionProvider = ({ children }) => {
+export const SessionContext = createContext();
- const [mediaUrl, setMediaUrl] = useState("https://actions.google.com/sounds/v1/ambiences/coffee_shop.ogg");
+export const SessionProvider = ({ children }) => {
+ const [mediaUrl, setMediaUrl] = useState(
+ 'https://actions.google.com/sounds/v1/ambiences/coffee_shop.ogg'
+ );
const [mediaDuration, setMediaDuration] = useState(0);
const [button, setButton] = useState(false);
//const [sessionID, setSessionID] = useState(tempNewDoc);
- const [vonageSessionID, setVonageSessionID] = useState("YOUR_SESSION_ID");
- const [token, setToken] = useState("YOUR_TOKEN");
- const [apiKey, setApiKey] = useState("YOUR_API_KEY");
+ const [vonageSessionID, setVonageSessionID] = useState('YOUR_SESSION_ID');
+ const [token, setToken] = useState('YOUR_TOKEN');
+ const [apiKey, setApiKey] = useState('YOUR_API_KEY');
return (
-
+
{children}
);
@@ -38,9 +78,42 @@ export const PinsContext = createContext();
var pins = [];
export const PinsProvider = ({ children }) => {
return (
-
- {children}
-
+ {children}
);
};
export const usePinsValue = () => useContext(PinsContext);
+
+export const SinglePlayerPinsContext = createContext();
+export const SinglePlayerPinsProvider = ({ children }) => {
+ const [singlePlayerPins, setSinglePlayerPins] = useState([]);
+ return (
+
+ {children}
+
+ );
+};
+export const useSinglePlayerPinsValue = () =>
+ useContext(SinglePlayerPinsContext);
+
+export const SinglePlayerSessionContext = createContext();
+export const SinglePlayerSessionProvider = ({ children }) => {
+ const [singlePlayerUsername, setSinglePlayerUsername] = useState('');
+ const [singlePlayerSessionID, setSinglePlayerSessionID] = useState([]);
+
+ return (
+
+ {children}
+
+ );
+};
+export const useSinglePlayerSessionValue = () =>
+ useContext(SinglePlayerSessionContext);
diff --git a/src/context/userContext.js b/src/context/userContext.js
new file mode 100644
index 00000000..59a48cf2
--- /dev/null
+++ b/src/context/userContext.js
@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+const userContext = createContext({
+ user: null,
+ userSessionId: null,
+});
+
+export const useUser = () => useContext(userContext);
+export default userContext;
diff --git a/src/hooks/firebase.js b/src/hooks/firebase.js
index 5263a817..309c4895 100644
--- a/src/hooks/firebase.js
+++ b/src/hooks/firebase.js
@@ -1,16 +1,22 @@
-import firebase from 'firebase/app'
-import "firebase/firestore";
+import firebase from 'firebase/app';
+import 'firebase/firestore';
+import 'firebase/auth';
// custom firebase hook
const firebaseConfig = firebase.initializeApp({
- apiKey: "AIzaSyBOFPxsSfAZ7kgB-Z8GgPAFBnr8EyvyJyg",
- authDomain: "pinmi-59c77.firebaseapp.com",
- projectId: "pinmi-59c77",
- storageBucket: "pinmi-59c77.appspot.com",
- messagingSenderId: "839028920590",
- appId: "1:839028920590:web:a16ad3b6056ba7dd1b075f",
- measurementId: "G-GHJVP7CDF7"
+ apiKey: 'AIzaSyBOFPxsSfAZ7kgB-Z8GgPAFBnr8EyvyJyg',
+ authDomain: 'pinmi-59c77.firebaseapp.com',
+ projectId: 'pinmi-59c77',
+ storageBucket: 'pinmi-59c77.appspot.com',
+ messagingSenderId: '839028920590',
+ appId: '1:839028920590:web:a16ad3b6056ba7dd1b075f',
+ measurementId: 'G-GHJVP7CDF7',
});
-export { firebaseConfig as firebase };
\ No newline at end of file
+export const rootUserIds = [
+ 'uUcxT50HqrPhZp9yMWDhASUwLSs2',
+ 'm73y56Yc0gNCPVfwQDIlHqPgbHn1',
+];
+
+export { firebaseConfig as firebase };
diff --git a/src/other/SPaudio.m4a b/src/other/SPaudio.m4a
new file mode 100644
index 00000000..8f6c08ff
Binary files /dev/null and b/src/other/SPaudio.m4a differ
diff --git a/src/other/tutorial/video-play.png b/src/other/tutorial/video-play.png
new file mode 100644
index 00000000..59315ec9
Binary files /dev/null and b/src/other/tutorial/video-play.png differ
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index a273b0cf..00000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
- "compilerOptions": {
- "target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
- "allowJs": true,
- "skipLibCheck": true,
- "esModuleInterop": true,
- "allowSyntheticDefaultImports": true,
- "strict": true,
- "forceConsistentCasingInFileNames": true,
- "noFallthroughCasesInSwitch": true,
- "module": "esnext",
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "isolatedModules": true,
- "noEmit": true,
- "jsx": "react-jsx"
- },
- "include": [
- "src"
- ]
-}
+
+ ))}
+
+ );
+};
+
+const SessionPill = ({ s, selectedFirebaseUser }) => {
+ const [showDetails, setShowDetails] = useState(false);
+
+ return (
+ + {`session=${s.id}`} +
+ {s.date} {s.completed && '[Completed]'} + {/* {`uid=${selectedFirebaseUser.value}&sid=${s.id}&refuid=${s.refUsername}&refsid=${s.refSessionID}`} */} + + )} +
-
- Back
-
-
- Next
-
-
- );
- case 2: return (
-
-
- Back
-
- makeReflectionDoc()}
- >
- Finish Self-Reflection
-
-
- );
- default: return ;
- }
-}
+ const handleNext = () => {
+ setPage(page + 1);
+ };
+ const handleBack = () => {
+ setPage(page - 1);
+ };
+ switch (page) {
+ case 0:
+ return (
+
+
+ Back
+
+
+ Next
+
+
+ );
+ case 2:
+ return (
+
+
+ Back
+
+ makeReflectionDoc()}
+ >
+ Finish Self-Reflection
+
+
+ );
+ default:
+ return ;
+ }
+};
const SelfReflection = () => {
- //const { sessionID } = useSessionValue();
- const session = useSelector(state => state.session);
- const user = useSelector(state => state.user);
- const dispatch = useDispatch();
+ //const { sessionID } = useSessionValue();
+ const session = useSelector((state) => state.session);
+ const user = useSelector((state) => state.user);
+ const dispatch = useDispatch();
- const [page, setPage] = useState(0);
+ const { user: firebaseUser, userSessionId } = useUser();
- // const childRef = React.createRef();
+ const [page, setPage] = useState(0);
- const [strength, setStrength] = useState('');
- const [opp, setOpp] = useState('');
- const [nextSteps, setNextSteps] = useState('');
- const [obstacles, setObstacles] = useState('');
- const [practice, setPractice] = useState('');
- const [addReflect, setAddReflect] = useState('');
+ // const childRef = React.createRef();
- const strengthRef = useRef('');
- const oppRef = useRef('');
- const nextStepsRef = useRef('');
- const obstaclesRef = useRef('');
- const practiceRef = useRef('');
- const addReflectRef = useRef('');
+ const [strength, setStrength] = useState('');
+ const [opp, setOpp] = useState('');
+ const [nextSteps, setNextSteps] = useState('');
+ const [obstacles, setObstacles] = useState('');
+ const [practice, setPractice] = useState('');
+ const [addReflect, setAddReflect] = useState('');
- useEffect(() => {
- // Scroll on render
- window.scrollTo(0, 0);
- }, []);
+ const strengthRef = useRef('');
+ const oppRef = useRef('');
+ const nextStepsRef = useRef('');
+ const obstaclesRef = useRef('');
+ const practiceRef = useRef('');
+ const addReflectRef = useRef('');
- const getPageContent = (page) => {
- console.log("In GetPageContent: ");
- console.log(page);
- switch (page) {
- case 0: return (
-
-
- What do I feel like are my strengths?
-
-
- setStrength(strengthRef.current.value)}
- />
-
-
- What are some opportunities for growth?
-
-
- setOpp(oppRef.current.value)}
- />
-
-
- );
- case 1: return (
-
-
- What steps will I take to improve?
-
-
- setNextSteps(nextStepsRef.current.value)}
- />
-
-
- What obstacles might get in the way, and how will I overcome them?
-
-
- setObstacles(obstaclesRef.current.value)}
- />
-
-
- );
- case 2: return (
-
-
- What would I like to add to my clinical practice?
-
-
- setPractice(practiceRef.current.value)}
- />
-
-
- What else would I like to keep reflecting on during the next week?
-
-
- setAddReflect(addReflectRef.current.value)}
- />
-
-
- )
- default: return ;
- }
- }
+ useEffect(() => {
+ // Scroll on render
+ window.scrollTo(0, 0);
+ }, []);
- const makeReflectionDoc = async () => {
- // const currentInput = this.childRef.current;
- await firebase.firestore().collection("reflection").doc(session.sessionID).collection("users").doc(user.userID).set({
- strength: strength,
- opportunity: opp,
- nextSteps: nextSteps,
- obstacles: obstacles,
- practice: practice,
- additional: addReflect
- });
- dispatch(reset());
- document.location.href = "/completion";
+ const getPageContent = (page) => {
+ console.log('In GetPageContent: ');
+ console.log(page);
+ switch (page) {
+ case 0:
+ return (
+
+
+ What do I feel like are my strengths?
+
+
+ setStrength(strengthRef.current.value)}
+ />
+
+
+ What are some opportunities for growth?
+
+
+ setOpp(oppRef.current.value)}
+ />
+
+
+ );
+ case 1:
+ return (
+
+
+ What steps will I take to improve?
+
+
+ setNextSteps(nextStepsRef.current.value)}
+ />
+
+
+ What obstacles might get in the way, and how will I overcome them?
+
+
+ setObstacles(obstaclesRef.current.value)}
+ />
+
+
+ );
+ case 2:
+ return (
+
+
+ What would I like to add to my clinical practice?
+
+
+ setPractice(practiceRef.current.value)}
+ />
+
+
+ What else would I like to keep reflecting on during the next week?
+
+
+ setAddReflect(addReflectRef.current.value)}
+ />
+
+
+ );
+ default:
+ return ;
}
+ };
+
+ const makeReflectionDoc = async () => {
+ // const currentInput = this.childRef.current;
+ // await firebase
+ // .firestore()
+ // .collection('reflection')
+ // .doc(session.sessionID)
+ // .collection('users')
+ // .doc(user.userID)
+ // .set({
+ // strength: strength,
+ // opportunity: opp,
+ // nextSteps: nextSteps,
+ // obstacles: obstacles,
+ // practice: practice,
+ // additional: addReflect,
+ // });
+
+ await firebase
+ .firestore()
+ .collection('singleplayer')
+ .doc(firebaseUser.uid)
+ .collection('sessions')
+ .doc(userSessionId)
+ .set(
+ {
+ completed: true,
+ },
+ { merge: true }
+ );
+
+ dispatch(reset());
+ document.location.href = '/completion';
+ };
- return (
-
- {getPageButtons(page, setPage, makeReflectionDoc)}
-
-
+ {getPageButtons(page, setPage, makeReflectionDoc)}
+
+
+
+
+ setText(textValueRef.current.value)
+ }
+ />
+
+
+ );
+};
+
+export default SinglePlayerComment;
diff --git a/src/components/layout/SinglePlayerComponents/SinglePlayerDissPrep.jsx b/src/components/layout/SinglePlayerComponents/SinglePlayerDissPrep.jsx
new file mode 100644
index 00000000..aa75e2db
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/SinglePlayerDissPrep.jsx
@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from "react";
+// Components
+import SinglePlayerAudioReview from "./SinglePlayerAudioReview";
+import Transcription from "../../Transcription";
+import { firebase } from "../../../hooks/firebase";
+import { useSessionValue, useSinglePlayerPinsValue } from "../../../context";
+import Notetaking from "../../Notetaking";
+import SinglePlayerTranscript from "./SinglePlayerTranscript";
+import SinglePlayerNotetaking from "./SinglePlayerNotetaking";
+
+const SinglePlayerDissPrep = ({
+ curPinIndex,
+ setCurPinIndex,
+ prevPinIndex,
+ setPrevPinIndex,
+}) => {
+ // const [localTrans, setLocalTrans] = useState([]);
+ const { sessionID } = useSessionValue();
+ const { singlePlayerPins } = useSinglePlayerPinsValue();
+ // // fetch trans data here
+ // const fetchTranscript = async () => {
+ // const docRef = await firebase
+ // .firestore()
+ // .collection("sessions")
+ // .doc(sessionID);
+ // await docRef
+ // .get()
+ // .then((doc) => {
+ // if (doc.exists) {
+ // const ts = getTimeStamp(doc.data()["transcript"]);
+ // setLocalTrans(ts);
+ // } else {
+ // // doc.data() will be undefined in this case
+ // console.log("No such document!");
+ // }
+ // })
+ // .catch((error) => {
+ // console.log("Error getting document:", error);
+ // });
+ // };
+
+ // useEffect(() => {
+ // fetchTranscript();
+ // }, []);
+
+ // const getTimeStamp = (transcriptArr) => {
+ // return (
+ // transcriptArr &&
+ // transcriptArr.map((transcriptString) => {
+ // var index = transcriptString.indexOf("-");
+ // if (index) {
+ // var tempTimeSeconds = Math.floor(
+ // parseInt(transcriptString.slice(0, index), 10) / 1000
+ // );
+
+ // return tempTimeSeconds;
+ // }
+ // })
+ // );
+ // };
+
+ return (
+ <>
+
+ {prev} {next}
+
+ );
+ };
+
+ const savePin = async (index) => {
+ if (index >= 0 && index < singlePlayerPins.length) {
+ const myPin = singlePlayerPins[index];
+ if (myPin) {
+ console.log(myPin);
+ myPin.calleePinNote = curNoteInfo;
+ myPin.calleePinPerspective = curPerspectiveInfo;
+ myPin.calleePinCategory = pinType;
+ myPin.calleePinSkill = curSkillInfo;
+ myPin.pinStrength = curStrengthInfo;
+ myPin.pinOpportunity = curOpportunityInfo;
+ myPin.pinGoal = curGoalInfo;
+
+ singlePlayerPins[index] = myPin;
+ }
+ }
+ };
+
+ useEffect(() => {
+ console.log("previous index: " + prevPinIndex);
+ console.log("current index: " + curPinIndex);
+ console.log(singlePlayerPins);
+ //update pin values
+ setCurNoteInfo(noteValueRef.current.value);
+ setCurPerspectiveInfo(perspectiveValueRef.current.value);
+ setCurSkillInfo(skillValueRef.current.value);
+ setCurGoalInfo(goalValueRef.current.value);
+ setCurStrengthInfo(strengthValueRef.current.value);
+ setCurOpportunityInfo(opportunityValueRef.current.value);
+
+ //pin info saved
+ console.log("Current note: " + curNoteInfo);
+ console.log("Perspective info: " + curPerspectiveInfo);
+ console.log("Skill Info: " + curSkillInfo);
+
+ //save pin info
+ savePin(prevPinIndex);
+
+ //clear out all the states
+ if (singlePlayerPins[curPinIndex]) {
+ setPinType(singlePlayerPins[curPinIndex].calleePinCategory);
+ setCurNoteInfo(singlePlayerPins[curPinIndex].calleePinNote);
+ setCurPerspectiveInfo(singlePlayerPins[curPinIndex].calleePinPerspective);
+ setCurSkillInfo(singlePlayerPins[curPinIndex].calleePinSkill);
+ setCurGoalInfo(singlePlayerPins[curPinIndex].pinGoal);
+ setCurStrengthInfo(singlePlayerPins[curPinIndex].pinStrength);
+ setCurOpportunityInfo(singlePlayerPins[curPinIndex].pinOpportunity);
+ }
+ //reset all the refs
+ noteValueRef.current.value = curNoteInfo;
+ perspectiveValueRef.current.value = curPerspectiveInfo;
+ skillValueRef.current.value = curSkillInfo;
+ goalValueRef.current.value = curGoalInfo;
+ strengthValueRef.current.value = curStrengthInfo;
+ opportunityValueRef.current.value = curOpportunityInfo;
+ }, [curPinIndex]);
+
+ // for pin information modifying
+ const handlePinInfo = (infoName, input) => {
+ if (infoName === `${user.userMode}PinInfos.pinNote`) {
+ setCurNoteInfo(input);
+ } else if (infoName === `${user.userMode}PinInfos.pinPerspective`) {
+ setCurPerspectiveInfo(input);
+ } else if (infoName === `${user.userMode}PinInfos.pinSkill`) {
+ setCurSkillInfo(input);
+ }
+ // let usersUpdate = {};
+ // usersUpdate[`${infoName}`] = input;
+ // firebase
+ // .firestore()
+ // .collection("Pins")
+ // .doc(formatTime(pins.map(pin => pin.pinTime)[curPinIndex]))
+ // .update(usersUpdate)
+ // .then(() => {
+ // console.log("Document successfully updated!");
+ // })
+ // .catch((error) => {
+ // // The document probably doesn't exist.
+ // console.error("Error updating document: ", error);
+ // });
+ };
+
+ // for handling pin tyep switching
+ const handlePinType = (event, newPinType) => {
+ setPinType(newPinType);
+ // handlePinInfo(`${userMode}PinInfos.pinCategory`, newPinType);
+ };
+
+ return (
+
+ {getTimeStamp(item)}}
+ fullWidth
+ variant='outlined'
+ multiline
+ margin='dense'
+ focused={index == selectedIndex}
+ // size="small"
+ value={getText(item)}
+ InputProps={{
+ readOnly: true,
+ classes: {
+ input: classes.textField_font,
+ },
+ }}
+ />
+
+ ))
+ );
+ };
+ console.log(localTrans);
+
+ return (
+
+ //
+ // );
+ // }
+
+ const renderToolbar = () => {
+ return (
+ <>
+ {isInterviewStarted && (
+ <>
+ + // {error} + // 🤷 + //
+ //
+
+ }
+
+ )}
+
+
{' '}
+
+ {audioProgress} / {audioDuration} sec
+
+
+
+
+ {isStreamSubscribed && renderToolbar()}
+
+
+ {!isStreamSubscribed && renderToolbar()}
+
+
+ handleFinishChat()}
+ disabled={!isInterviewStarted}
+ >
+ Begin Discussion Prep
+
+
+
+ );
+}
+
+export default SinglePlayerVideoChat;
diff --git a/src/components/layout/SinglePlayerComponents/temp.jsx b/src/components/layout/SinglePlayerComponents/temp.jsx
new file mode 100644
index 00000000..5139fc69
--- /dev/null
+++ b/src/components/layout/SinglePlayerComponents/temp.jsx
@@ -0,0 +1,583 @@
+import React, { useState, useEffect, useRef } from "react";
+
+import pinningClick from "../../../other/tutorial/pinning-click.png";
+import videoPlay from "../../../other/tutorial/video-play.png";
+
+import ColorLibButton, {
+ ColorLibNextButton,
+ ColorLibCallEndButton,
+} from "../ColorLibComponents/ColorLibButton";
+import ColorLibPaper from "../ColorLibComponents/ColorLibPaper";
+
+import "../../VideoChatComponent.scss";
+
+import { useSelector } from "react-redux";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+ Typography,
+ Tooltip,
+ Button,
+ LinearProgress,
+ Box,
+ Popper,
+} from "@material-ui/core";
+import { Icon, Fab } from "@material-ui/core";
+import pin from "../../../other/pin.svg";
+import useSpeechToText from "../../transcript";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import { baseURL } from "../../constants";
+
+import {
+ useSessionValue,
+ useActiveStepValue,
+ usePinsValue,
+ useSinglePlayerPinsValue,
+ useSinglePlayerSessionValue,
+} from "../../../context";
+import { firebase } from "../../../hooks/firebase";
+import ReactPlayer from "react-player";
+import { transcriptArr } from "../SinglePlayerModules/config";
+import "../../VideoChatComponent.scss";
+
+import { formatTime } from "../../../helper/index";
+
+const useStyles = makeStyles((theme) => ({
+ imageIcon: {
+ height: "120%",
+ },
+ iconRoot: {
+ textAlign: "center",
+ },
+ fab: {
+ marginLeft: 550,
+ },
+ display: "flex",
+ "& > * + *": {
+ marginLeft: theme.spacing(5),
+ },
+ dialog: {
+ "& .MuiDialogContentText-root": {
+ color: theme.palette.gray.dark,
+ display: "flex",
+ "& video": {
+ borderRadius: "5px",
+ width: "100%",
+ height: "100%",
+ backgroundColor: "black",
+ },
+ "& .MuiFab-root": {
+ left: "calc(50% - 50px)",
+ width: "45px",
+ height: "45px",
+ backgroundColor: "white",
+ border: "solid 1px " + theme.palette.teal.light,
+ "& .MuiSvgIcon-root": {
+ fill: theme.palette.teal.dark,
+ },
+ "&:last-child": {
+ marginLeft: "10px",
+ },
+ },
+ },
+ },
+}));
+
+function SinglePlayerVideoChat(props) {
+ const pinBtn = useRef(null);
+
+ const { curActiveStep: activeStep, setCurActiveStep: setActiveStep } =
+ useActiveStepValue();
+ //get setter for media duration
+ const session = useSelector((state) => state.session);
+ const { setMediaDuration, setMediaUrl } = useSessionValue();
+ // fetch raw pin data here
+ const { pins } = usePinsValue();
+ //get user informatoin
+ const user = useSelector((state) => state.user);
+ //video player
+ const player = useRef(null);
+ const [audioProgress, setAudioProgress] = useState(0);
+ const handleProgress = (state) => {
+ setAudioProgress(Math.round(state.playedSeconds));
+ };
+
+ const [openWarning, setOpenWarning] = useState(false);
+
+ const [popperContentIndex, setPopperContentIndex] = useState(0);
+ const [popperOpen, setPopperOpen] = useState(false);
+
+ const recommendedTime = 10 * 60;
+ const [countDown, setCountDown] = useState(recommendedTime); // 10 minutes
+
+ const getPopperContent = (index) => {
+ switch (index) {
+ case 0:
+ return "Don’t forget to pin at least twice";
+ case 1:
+ const thisPin = singlePlayerPins[singlePlayerPins.length - 1];
+ const pinTime = thisPin.pinTime;
+ const pinCreatorMode = thisPin.creatorMode;
+ console.log(pinCreatorMode, user.userMode);
+ return `Successfully pinned at ${formatTime(pinTime)}`;
+ default:
+ return "Invalid Pin Content.";
+ }
+ };
+
+ const handlePinButtonClick = () => {
+ if (videoCallTimer === 0) {
+ return;
+ }
+ if (popperOpen) {
+ setPopperOpen(false);
+ return;
+ }
+ var pinTime = Math.floor((Date.now() - videoCallTimer) / 1000);
+ console.log("added a pin");
+ addPin(pinTime);
+ // ui on
+ setPinBtnDisabled(true);
+ setPinBtnColor("primary");
+ // ui off
+ setTimeout(() => {
+ setPinBtnDisabled(false);
+ }, 800);
+ };
+
+ const [open, setOpen] = useState(true);
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
+ const handleNext = () => {
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ };
+
+ const [isInterviewStarted, setIsInterviewStarted] = useState(false);
+ const [isStreamSubscribed, setIsStreamSubscribed] = useState(false);
+ const isSubscribed = useSelector(
+ (state) => state.videoChat.isStreamSubscribed
+ );
+
+ // needed vonage info
+ const [room, setRoom] = useState("hello");
+ //const [baseURL, setBaseURL] = useState("https://pinmi-test-1.herokuapp.com/");
+ const [apiKey, setApiKey] = useState("YOUR_API_KEY");
+ const [sessionId, setSessionId] = useState("YOUR_SESSION_ID");
+ const [token, setToken] = useState("YOUR_TOKEN");
+
+ const [loadingStatus, setLoadingStatus] = useState(false);
+
+ const [pinBtnDisabled, setPinBtnDisabled] = useState(false);
+ const [pinBtnColor, setPinBtnColor] = useState("");
+
+ //archvieData is the data that is returned in the server response when the archive starts
+ const [archiveData, setArchiveData] = useState({});
+ //isArchviving is true when the achrive is actively recording
+ const [isArchiving, setIsArchiving] = useState(false);
+
+ // self-made timer
+ const [videoCallTimer, setVideoCallTimer] = useState(0);
+ const classes = useStyles();
+
+ // //ATTEMPT TO PUT API CODE INTO THIS FUNCTION
+ // const
+
+ useEffect(() => {
+ setIsStreamSubscribed(isSubscribed);
+ console.log("STREAM SUBSCRIBED FROM SELECTOR UPDATED");
+ }, [isSubscribed]);
+
+ //get setter for media duration
+ // const { sessionID, setMediaDuration, setMediaUrl } = useSessionValue();
+ // fetch raw pin data here
+ // const { pins } = usePinsValue();
+
+ const { singlePlayerPins } = useSinglePlayerPinsValue();
+ const { singlePlayerSessionID } = useSinglePlayerSessionValue();
+ //what is going on with addPinDelayTime????
+ const addPinDelayTime = 20;
+
+ const binarySearch = (arr, l, r, x) => {
+ console.log(arr, l, r, x);
+ if (r >= l) {
+ let mid = l + Math.floor((r - l) / 2);
+
+ // If the element is present at the middle
+ // itself
+ if (
+ arr[mid] == x ||
+ mid + 1 >= arr.length ||
+ (arr[mid] <= x && arr[mid + 1] > x)
+ )
+ return mid;
+
+ // If element is smaller than mid, then
+ // it can only be present in left subarray
+ if (arr[mid] > x) return binarySearch(arr, l, mid - 1, x);
+
+ // Else the element can only be present
+ // in right subarray
+ return binarySearch(arr, mid + 1, r, x);
+ }
+
+ // We reach here when element is not
+ // present in array
+ return -1;
+ };
+
+ const getTimeStamp = (transcriptArr) => {
+ return (
+ transcriptArr &&
+ transcriptArr.map((transcriptString) => {
+ var index = transcriptString.indexOf("-");
+ if (index) {
+ var tempTimeSeconds = Math.floor(
+ parseInt(transcriptString.slice(0, index), 10) / 1000
+ );
+
+ return tempTimeSeconds;
+ }
+ })
+ );
+ };
+ const addPin = async (curTime) => {
+ if (
+ singlePlayerPins.length > 0 &&
+ singlePlayerPins[singlePlayerPins.length - 1].pinTime == curTime
+ ) {
+ return;
+ }
+
+ const ts = getTimeStamp(transcriptArr);
+ const TSIndex = binarySearch(ts, 0, ts.length, curTime);
+ console.log(TSIndex);
+
+ singlePlayerPins.push({
+ pinID: "",
+ creatorID: "",
+ creatorMode: "",
+ pinTime: curTime,
+ callerPinNote: "",
+ callerPinPerspective: "",
+ callerPinCategory: "",
+ callerPinSkill: "",
+ calleePinNote: "",
+ calleePinPerspective: "",
+ calleePinCategory: "",
+ calleePinSkill: "",
+ pinEfficacy: "",
+ pinGoal: "",
+ pinStrength: "",
+ pinOpportunity: "",
+ transcriptindex: TSIndex,
+ });
+
+ setPopperContentIndex(1);
+ setPopperOpen(true);
+ setTimeout(() => {
+ setPopperOpen(false);
+ }, 3000);
+
+ console.log("Finished pushing");
+ };
+
+ const addTranscript = async () => {
+ //write the transcript to the database
+ await firebase
+ .firestore()
+ .collection("sessions")
+ .doc(session.sessionID)
+ .update({
+ transcript: results,
+ })
+ .then(() => {
+ console.log("Transcript successfully written!");
+ })
+ .catch((error) => {
+ console.error("Error writing document: ", error);
+ });
+ };
+
+ const {
+ error,
+ interimResult,
+ isRecording,
+ results,
+ startSpeechToText,
+ stopSpeechToText,
+ } = useSpeechToText({
+ continuous: true,
+ crossBrowser: true,
+ googleApiKey: process.env.REACT_APP_API_KEY,
+ speechRecognitionProperties: { interimResults: true },
+ timeout: 10000,
+ });
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ const renderToolbar = () => {
+ return (
+ <>
+ {isInterviewStarted && (
+ + {error} + 🤷 +
+
+
+
+
+ {isStreamSubscribed && renderToolbar()}
+
+
+ {!isStreamSubscribed && renderToolbar()}
+
+
+ handleFinishChat()}
+ disabled={!isInterviewStarted}
+ >
+ Begin Discussion Prep
+
+
+
+ );
+}
+
+export default SinglePlayerVideoChat;
diff --git a/src/components/layout/SinglePlayerModules/SPCollaboration.jsx b/src/components/layout/SinglePlayerModules/SPCollaboration.jsx
new file mode 100644
index 00000000..02f19ddd
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/SPCollaboration.jsx
@@ -0,0 +1,301 @@
+import React, { Fragment, useEffect, useState } from 'react';
+// Components
+import DissResponse from '../../DissResponse';
+import AudioReview from '../../AudioReview';
+import Transcription from '../../Transcription';
+import VideoDiscussion from '../../VideoDiscussion.js';
+// Others
+import { makeStyles } from '@material-ui/core/styles';
+import { Box, Container, Grid } from '@material-ui/core';
+import ColorLibButton, {
+ ColorLibBackButton,
+ ColorLibNextButton,
+} from '../ColorLibComponents/ColorLibButton';
+import VideoChatComponent from '../../VideoChatComponent';
+import {
+ useSessionValue,
+ useActiveStepValue,
+ usePinsValue,
+ useSinglePlayerSessionValue,
+ useSinglePlayerPinsValue,
+} from '../../../context';
+import { baseURL } from 'constants';
+import SinglePlayerNotesComparison from '../SinglePlayerComponents/SinglePlayerNotesComparison';
+import SinglePlayerComment from '../SinglePlayerComponents/SinglePlayerComment';
+import SinglePlayerTranscript from '../SinglePlayerComponents/SinglePlayerTranscript';
+import SinglePlayerAudioReview from '../SinglePlayerComponents/SinglePlayerAudioReview';
+import { firebase } from '../../../hooks/firebase';
+
+import { sortBy } from 'lodash';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ flexGrow: 1,
+ backgroundColor: 'theme.palette.background.paper',
+ height: '50%',
+ },
+ imageIcon: {
+ height: '100%',
+ },
+ iconRoot: {
+ textAlign: 'center',
+ },
+ fab: {
+ marginLeft: 450,
+ marginRight: 200,
+ },
+ grid: {
+ '& .MuiGrid-item': {
+ display: 'inline-grid',
+ overflowY: 'scroll',
+ },
+ '& .MuiGrid-grid-sm-4': {
+ position: 'relative',
+ margin: '8px',
+ maxWidth: 'calc(33.333333% - 8px)',
+ '& .MuiPaper-root': {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ overflowY: 'scroll',
+ },
+ },
+ '& .MuiGrid-grid-sm-8': {
+ maxWidth: 'calc(66.666667% - 8px)',
+ },
+ '& .MuiGrid-root': {
+ // "& ::-webkit-scrollbar": {
+ // width: "12px",
+ // },
+ // "& ::-webkit-scrollbar-track": {
+ // background: "orange",
+ // },
+ // "& ::-webkit-scrollbar-thumb": {
+ // backgroundColor: "blue",
+ // borderRadius: "20px",
+ // border: "3px solid orange",
+ // },
+ },
+ '& .MuiGrid-container': {
+ height: '50%',
+ },
+ },
+}));
+
+const SPCollaboration = ({
+ curPinIndex,
+ setCurPinIndex,
+ prevPinIndex,
+ setPrevPinIndex,
+}) => {
+ const classes = useStyles();
+ const { curActiveStep: activeStep, setCurActiveStep: setActiveStep } =
+ useActiveStepValue();
+ const { singlePlayerUsername, singlePlayerSessionID } =
+ useSinglePlayerSessionValue();
+ const { singlePlayerPins } = useSinglePlayerPinsValue();
+ const [peerPins, setPeerPins] = useState([]);
+
+ const [allPins, setAllPins] = useState([]);
+
+ useEffect(() => {
+ addPeerPins();
+ }, []);
+
+ const binarySearch = (arr, l, r, x) => {
+ if (r >= l) {
+ let mid = l + Math.floor((r - l) / 2);
+
+ // If the element is present at the middle
+ // itself
+ if (
+ arr[mid] == x ||
+ mid + 1 >= arr.length ||
+ (arr[mid] <= x && arr[mid + 1] > x)
+ )
+ return mid;
+
+ // If element is smaller than mid, then
+ // it can only be present in left subarray
+ if (arr[mid] > x) return binarySearch(arr, l, mid - 1, x);
+
+ // Else the element can only be present
+ // in right subarray
+ return binarySearch(arr, mid + 1, r, x);
+ }
+ // We reach here when element is not
+ // present in array
+ return -1;
+ };
+
+ const getTimeStamp = (transcriptArr) => {
+ return (
+ transcriptArr &&
+ transcriptArr.map((transcriptString) => {
+ var index = transcriptString.indexOf('-');
+ if (index) {
+ var tempTimeSeconds = Math.floor(
+ parseInt(transcriptString.slice(0, index), 10) / 1000
+ );
+
+ return tempTimeSeconds;
+ }
+ })
+ );
+ };
+
+ const addPeerPins = async () => {
+ // const docRef = await firebase
+ // .firestore()
+ // .collection("singleplayer_media")
+ // .doc(singlePlayerSessionID);
+ const docRef = await firebase
+ .firestore()
+ .collection('sessions_by_usernames')
+ .doc(singlePlayerUsername)
+ .collection('sessions')
+ .doc(singlePlayerSessionID);
+
+ let transcript = [];
+ docRef.get().then((doc) => {
+ console.log(doc.data().calleeTranscript);
+ transcript = getTimeStamp(doc.data().calleeTranscript);
+ });
+
+ docRef
+ .collection('pins')
+ .get()
+ .then((doc) => {
+ doc.forEach((d) => {
+ const TSIndex = binarySearch(
+ transcript,
+ 0,
+ transcript.length,
+ d.data().pinTime
+ );
+ peerPins.push({ ...d.data(), transcriptindex: TSIndex, peer: true });
+ });
+
+ let _allPins = sortBy(
+ [
+ ...singlePlayerPins.map((p) => ({
+ ...p,
+ // pinTime: p.pinTime + 60,
+ peer: false,
+ })),
+ ...peerPins,
+ ],
+ 'pinTime'
+ );
+ setAllPins(_allPins);
+ console.log(_allPins);
+ });
+ };
+ // const [room, setRoom] = useState("hello");
+ // //const [baseURL, setBaseURL] = useState('https://pinmi-test.herokuapp.com/room/' + room);
+ // const [apiKey, setApiKey] = useState("YOUR_API_KEY");
+ // const [sessionId, setSessionId] = useState("YOUR_SESSION_ID");
+ // const [token, setToken] = useState("YOUR_TOKEN");
+ // const [readyMessage, setReadyMessage] = useState("video is not ready");
+ // const isRecording = false;
+
+ const handlePrevPin = () => {
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(curPinIndex - 1);
+ };
+
+ const handleNextPin = () => {
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(curPinIndex + 1);
+ };
+
+ const PinNavButtons = () => {
+ if (curPinIndex === -1) return null;
+ const prev = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* */}
+
+
+
+ );
+};
+
+export default SPCollaboration;
diff --git a/src/components/layout/SinglePlayerModules/SPDiscussion.jsx b/src/components/layout/SinglePlayerModules/SPDiscussion.jsx
new file mode 100644
index 00000000..fb38dcfb
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/SPDiscussion.jsx
@@ -0,0 +1,124 @@
+import { Button, Box } from "@material-ui/core";
+import React, { useState, useEffect } from "react";
+import SPCollaboration from "./SPCollaboration.jsx";
+import ColorLibButton from "../ColorLibComponents/ColorLibButton";
+
+import firebase from "firebase";
+
+//context
+import {
+ useSessionValue,
+ usePinsValue,
+ useActiveStepValue,
+} from "../../../context";
+
+const SPDiscussion = () => {
+ const [page, setPage] = useState(0);
+ const { sessionID } = useSessionValue();
+ const { pins } = usePinsValue();
+ const { curActiveStep: activeStep, setCurActiveStep: setActiveStep } =
+ useActiveStepValue();
+
+ const [finishedUpdates, setFinishedUpdates] = useState(false);
+
+ const [curPinIndex, setCurPinIndex] = useState(0);
+ const [prevPinIndex, setPrevPinIndex] = useState(0);
+
+ console.log("SP discussion");
+ useEffect(() => {
+ console.log("before");
+ if (finishedUpdates) {
+ console.log("after");
+ saveEfficacyInfo(pins, sessionID);
+ setPage(page + 1);
+ }
+ }, [finishedUpdates]);
+
+ function getConditionalContent(page) {
+ switch (page) {
+ // case 0:
+ // return Unknown
;
+ }
+ }
+
+ const saveEfficacyInfo = async (pins, sessionID) => {
+ pins.map(async (p) => {
+ await firebase
+ .firestore()
+ .collection("sessions")
+ .doc(sessionID)
+ .collection("pins")
+ .doc(p.pinID)
+ .update({
+ pinEfficacy: p.pinEfficacy,
+ });
+ });
+ };
+
+ const handleButton = (finished) => {
+ if (finished) {
+ console.log("handlebutton");
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(0);
+ setFinishedUpdates(true);
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ } else {
+ setPage(page + 1);
+ }
+ };
+
+ function getConditionalButton(page, setPage, pins, sessionID) {
+ switch (page) {
+ // case 0:
+ // return (
+ //
+ //
+ // handleButton(false)}>
+ // Let's talk about our pins
+ //
+ //
+ //
+ // );
+ case 0:
+ return (
+
+
+ handleButton(true)}
+ >
+ Finish Discussing Pins
+
+
+
+ );
+ case 2:
+ return;
+ default:
+ return Unknown
;
+ }
+ }
+ return (
+
+ {getConditionalContent(page)}
+ {getConditionalButton(page, setPage, pins, sessionID)}
+
+ );
+};
+
+export default SPDiscussion;
+
diff --git a/src/components/layout/SinglePlayerModules/SPDiscussionPrep.jsx b/src/components/layout/SinglePlayerModules/SPDiscussionPrep.jsx
new file mode 100644
index 00000000..fce29b50
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/SPDiscussionPrep.jsx
@@ -0,0 +1,166 @@
+import React, { useState, useEffect } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Container, Grid } from '@material-ui/core';
+
+import ColorLibButton from '../ColorLibComponents/ColorLibButton';
+import {
+ useActiveStepValue,
+ useSessionValue,
+ usePlayerModeValue,
+ useSinglePlayerPinsValue,
+ useSinglePlayerSessionValue,
+} from '../../../context';
+import { useUser } from '../../../context/userContext';
+import { firebase } from '../../../hooks/firebase';
+import SinglePlayerDissPrep from '../SinglePlayerComponents/SinglePlayerDissPrep';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.paper,
+ },
+ imageIcon: {
+ height: '100%',
+ },
+ iconRoot: {
+ textAlign: 'center',
+ },
+ fab: {
+ marginLeft: 450,
+ marginRight: 200,
+ },
+ grid: {
+ '& .MuiGrid-item': {
+ display: 'inline-grid',
+ },
+ '& .MuiGrid-grid-sm-4': {
+ position: 'relative',
+ margin: '8px',
+ maxWidth: 'calc(33.333333% - 8px)',
+ '& .MuiPaper-root': {
+ position: 'absolute',
+ top: 0,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ overflowY: 'scroll',
+ },
+ },
+ '& .MuiGrid-grid-sm-8': {
+ maxWidth: 'calc(66.666667% - 8px)',
+ },
+ },
+}));
+
+const SPDisscussionPrep = () => {
+ const classes = useStyles();
+ const { curActiveStep: activeStep, setCurActiveStep: setActiveStep } =
+ useActiveStepValue();
+ const [curPinIndex, setCurPinIndex] = useState(0);
+ const [prevPinIndex, setPrevPinIndex] = useState(0);
+ const [finishedUpdates, setFinishedUpdates] = useState(false);
+ const { singlePlayerPins } = useSinglePlayerPinsValue();
+ const { sessionID } = useSessionValue();
+
+ const { user: firebaseUser, userSessionId } = useUser();
+
+ useEffect(() => {
+ console.log(curPinIndex);
+ console.log(singlePlayerPins);
+ if (finishedUpdates) {
+ //save all pins to database and move to next module
+ singlePlayerPins.map((elem, id) => savePin(id));
+
+ setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ }
+ }, [finishedUpdates]);
+
+ const savePin = async (index) => {
+ const myPin = singlePlayerPins[index];
+ console.log('SAVEPIN');
+ console.log(myPin);
+ await firebase
+ .firestore()
+ // .collection("singleplayer")
+ // .doc(sessionID)
+ // .collection("pins")
+ .collection('singleplayer')
+ .doc(firebaseUser.uid)
+ .collection('sessions')
+ .doc(userSessionId)
+ .collection('pins')
+ .add({
+ creatorID: myPin.creatorID,
+ creatorMode: myPin.creatorMode,
+ pinTime: myPin.pinTime,
+ callerPinNote: myPin.callerPinNote,
+ callerPinPerspective: myPin.callerPinPerspective,
+ callerPinCategory: myPin.callerPinCategory,
+ callerPinSkill: myPin.callerPinSkill,
+ calleePinNote: myPin.calleePinNote,
+ calleePinPerspective: myPin.calleePinPerspective,
+ calleePinCategory: myPin.calleePinCategory,
+ calleePinSkill: myPin.calleePinSkill,
+ pinEfficacy: '',
+ pinGoal: myPin.pinGoal,
+ pinStrength: myPin.pinStrength,
+ pinOpportunity: myPin.pinOpportunity,
+ transcriptindex: myPin.transcriptindex,
+ })
+ .then((docRef) => {
+ singlePlayerPins[index].pinID = docRef.id;
+ console.log('current pin successfully updated');
+ })
+ .catch((e) => {
+ console.log('pin update unsuccessful: ' + e);
+ });
+ };
+
+ const handleNext = async () => {
+ console.log('Pins changed in dis prep: ' + curPinIndex);
+ //reset curPinIndex to force the Notetaking.js file to remember the last pin info
+ setPrevPinIndex(curPinIndex);
+ setCurPinIndex(0);
+ //allow next step in logic to occur
+ setFinishedUpdates(true);
+ };
+
+ // useEffect(() => {
+ // console.log(curPinIndex);
+ // console.log(pins);
+ // if (finishedUpdates) {
+ // //save all pins to database and move to next module
+ // pins.map((elem, id) => savePin(id));
+ // setActiveStep((prevActiveStep) => prevActiveStep + 1);
+ // }
+ // }, [finishedUpdates]);
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SPDisscussionPrep;
diff --git a/src/components/layout/SinglePlayerModules/SPPracticeSession.jsx b/src/components/layout/SinglePlayerModules/SPPracticeSession.jsx
new file mode 100644
index 00000000..a4f20213
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/SPPracticeSession.jsx
@@ -0,0 +1,154 @@
+import { Box } from '@material-ui/core';
+import React, { useState, useEffect } from 'react';
+import Intro from './SPPracticeSession/Intro.jsx';
+import Narrative from './SPPracticeSession/Narrative.jsx';
+import Session from './SPPracticeSession/Session.jsx';
+
+import {
+ useActiveStepValue,
+ useSessionValue,
+ useSinglePlayerSessionValue,
+} from '../../../context';
+import ColorLibButton, {
+ ColorLibNextButton,
+} from '../ColorLibComponents/ColorLibButton';
+import { firebase } from '../../../hooks/firebase';
+
+function getConditionalContent(page) {
+ switch (page) {
+ case 0:
+ return
+
+ Join Discussion
+
+
+ Unknown
;
+ }
+}
+
+function getConditionalButton(page, setPage, setButton) {
+ const handleButton = () => {
+ setPage(page + 1);
+ if (page === 2) setButton(true);
+ };
+ switch (page) {
+ case 0:
+ return (
+
+
+ handleButton()}
+ >
+ Review Information on Client
+
+
+
+ );
+ case 1:
+ return (
+
+
+ handleButton()}
+ >
+ Begin Live Session
+
+
+
+ );
+ case 2:
+ return;
+ default:
+ return Unknown
;
+ }
+}
+
+const PracticeSession = () => {
+ const { setButton } = useSessionValue();
+ const [page, setPage] = useState(0);
+ const [sessionID, setSessionID] = useState();
+ const { singlePlayerSessionID, setSinglePlayerSessionID } =
+ useSinglePlayerSessionValue();
+
+ // const addSessionID = async () => {
+ // const SPSessionArr = [];
+ // let counter = 0;
+
+ // await firebase
+ // .firestore()
+ // .collection("singleplayer_media")
+ // .get()
+ // .then((doc) => {
+ // doc.forEach((d) => {
+ // SPSessionArr.push([d.id, d.data()]);
+ // });
+ // SPSessionArr.sort(
+ // (a, b) => (a[1].view_count > b[1].view_count && 1) || -1
+ // );
+ // setSinglePlayerSessionID(SPSessionArr[0][0]);
+ // counter = SPSessionArr[0][1].view_count;
+ // })
+
+ // const docRef = await firebase
+ // .firestore()
+ // .collection("singleplayer_media")
+ // .doc(SPSessionArr[0][0]);
+
+ // docRef.update({ view_count: counter + 1 });
+ // };
+
+ useEffect(() => {
+ // Scroll on render
+ window.scrollTo(0, 0);
+ // addSessionID();
+ // ["4", "7", "11", "14", "19"].map((e) => savePin(e));
+ }, []);
+
+ // //Yo-Lei - create fake data
+ // const savePin = async (index) => {
+ // await firebase
+ // .firestore()
+ // .collection("singleplayer_media")
+ // .doc("g0DiUOQhbY3dKTged5II")
+ // .collection("pins")
+ // .add({
+ // pinTime: parseInt(index),
+ // callerPinNote: "yeet" + index,
+ // callerPinPerspective: "yeet" + index,
+ // callerPinCategory: "yeet" + index,
+ // callerPinSkill: "yeet" + index,
+ // calleePinNote: "yeet" + index,
+ // calleePinPerspective: "yeet" + index,
+ // calleePinCategory: "yeet" + index,
+ // calleePinSkill: "yeet" + index,
+ // pinGoal: "yeet" + index,
+ // pinStrength: "yeet" + index,
+ // pinOpportunity: "yeet" + index,
+ // })
+ // .then((docRef) => {
+ // console.log("current pin successfully updated");
+ // })
+ // .catch((e) => {
+ // console.log("pin update unsuccessful: " + e);
+ // });
+ // };
+
+ useEffect(() => {
+ // Scroll on page change
+ window.scrollTo(0, 0);
+ }, [page]);
+
+ return (
+
+ {getConditionalContent(page)}
+ {getConditionalButton(page, setPage, setButton)}
+
+ );
+};
+
+export default PracticeSession;
diff --git a/src/components/layout/SinglePlayerModules/SPPracticeSession/Intro.jsx b/src/components/layout/SinglePlayerModules/SPPracticeSession/Intro.jsx
new file mode 100644
index 00000000..8407f969
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/SPPracticeSession/Intro.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableRow from '@material-ui/core/TableRow';
+import Typography from '@material-ui/core/Typography';
+
+
+const useStyles = makeStyles({
+ table: {
+ marginTop: '20px',
+ width: 600,
+ },
+});
+
+
+function createData(name, role, fat, carbs, protein) {
+ return { name, role, fat, carbs, protein };
+}
+
+const rows = [
+ createData('Your role', 'Therapist', 6.0, 24, 4.0),
+ createData('Your peers role', 'Client', 237, 9.0, 37, 4.3),
+ createData('Your goal', 'Build rapport and analyze the client’s situation', 262, 16.0, 24, 6.0),
+];
+
+const Intro = () => {
+ const classes = useStyles();
+ return (
+
+
+
+ Now, it’s time to step into the practice session and practice using open-ended questions.
+
+
+
+
+
+
+
+
+ );
+}
+
+
+export default Intro;
diff --git a/src/components/layout/SinglePlayerModules/SPPracticeSession/Narrative.jsx b/src/components/layout/SinglePlayerModules/SPPracticeSession/Narrative.jsx
new file mode 100644
index 00000000..f2618c68
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/SPPracticeSession/Narrative.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableRow from '@material-ui/core/TableRow';
+import Box from '@material-ui/core/Box';
+import { Typography } from '@material-ui/core';
+
+
+const useStyles = makeStyles({
+ table: {
+ width: 600,
+ },
+});
+
+
+function createData(name, role, fat, carbs, protein) {
+ return { name, role, fat, carbs, protein };
+}
+
+const rows = [
+ createData('Full Name', 'Julia Rogers', 6.0, 24, 4.0),
+ createData('Reason for appointment', 'I’m going through a hard time and I’m not sure what to do.', 262, 16.0, 24, 6.0),
+];
+
+
+const Narrative = () => {
+ const classes = useStyles();
+ return (
+
+
+
+ Client Information
+
+
+
+
+
+
+
+
+ );
+}
+
+
+export default Narrative;
\ No newline at end of file
diff --git a/src/components/layout/SinglePlayerModules/SPPracticeSession/Session.jsx b/src/components/layout/SinglePlayerModules/SPPracticeSession/Session.jsx
new file mode 100644
index 00000000..2634a3a9
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/SPPracticeSession/Session.jsx
@@ -0,0 +1,75 @@
+import React, {useState, useEffect} from 'react';
+import VideoChatComponent from "../../../VideoChatComponent.js";
+import { useReactMediaRecorder } from "react-media-recorder";
+
+//context
+import { useSessionValue, usePlayerModeValue} from "../../../../context";
+import SinglePlayerVideoChat from '../../SinglePlayerComponents/SinglePlayerVideoChat';
+import { useSelector } from 'react-redux';
+
+const Session = () => {
+ // const [baseURL, setBaseURL] = useState("https://pin-mi-node-server.herokuapp.com/" + room);
+ // const [apiKey, setApiKey] = useState("YOUR_API_KEY");
+ // const [sessionId, setSessionId] = useState("YOUR_SESSION_ID");
+ // const [token, setToken] = useState("YOUR_TOKEN");
+ // const [readyMessage, setReadyMessage] = useState("video is not ready");
+ // const isRecording = true;
+ // const {status, startRecording, stopRecording, mediaBlobUrl}
+ // =useReactMediaRecorder({ video: false, audio: true });
+
+
+ //setting the global mediaUrl context to mediaBlobUrl to be played in AudioReview
+ const {setMediaUrl} = useSessionValue();
+
+ // const addMediaUrlDB = async (mediaUrl) => {
+ // await firebase.firestore().collection("URL").doc("media").set({
+ // URL: mediaUrl
+ // })
+ // .then(() => {
+ // console.log("Document successfully written!");
+ // })
+ // .catch((error) => {
+ // console.error("Error writing document: ", error);
+ // });
+ // }
+
+ const user = useSelector(state => state.user);
+ const { playerMode } = usePlayerModeValue();
+ console.log(playerMode);
+
+ //hostName is a string that is the clients usermode that should host the archive.
+ const checkIsArchiveHost = (hostName) => {
+ console.log("check is recording ran");
+ if (user.userMode == hostName){
+ console.log("isArchiveHost from check is rec");
+ return true;
+ }
+ else{
+ console.log("not Archive Host from check is rec");
+ return false;
+ }
+ }
+
+ // useEffect(() => {
+ // // if (userMode == "callee"){
+ // // setMediaUrl(mediaBlobUrl);
+ // // //addMediaUrlDB(mediaBlobUrl)
+ // // }
+ // // else {
+
+ // // }
+ // setMediaUrl(mediaBlobUrl);
+ // console.log("mediablobURL: ", mediaBlobUrl);
+ // window.scrollTo(0,0);
+ // }, [mediaBlobUrl]);
+
+ //When we pass callee into is archive host,
+ return (
+
+
+
+ );
+}
+
+
+export default Session;
\ No newline at end of file
diff --git a/src/components/layout/SinglePlayerModules/config.js b/src/components/layout/SinglePlayerModules/config.js
new file mode 100644
index 00000000..8f2a7241
--- /dev/null
+++ b/src/components/layout/SinglePlayerModules/config.js
@@ -0,0 +1,13 @@
+const audioUrl =
+ "https://s3.amazonaws.com/tokbox.com.archive2/47273054/197d0e09-3232-41b0-80a7-50d189de5782/archive.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20211110T115856Z&X-Amz-SignedHeaders=host&X-Amz-Expires=600&X-Amz-Credential=AKIAT5VIDVNM7GIYBDFL%2F20211110%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=c03b3a4da713bf9d4fa56ca44a7fc4c681e04c615812735cc951fb1b06548b66";
+const transcriptArr = [
+ "5273 - start recording",
+ "7430 - and one",
+ "10461 - into",
+ "13670 - 10:30",
+ "16683 - pens for",
+ "19696 - Penn 5",
+ "22270 - stop recording",
+];
+
+export { audioUrl, transcriptArr };
diff --git a/src/context/index.js b/src/context/index.js
index c6281365..c865406b 100644
--- a/src/context/index.js
+++ b/src/context/index.js
@@ -1,32 +1,72 @@
-import React, { useState, createContext, useContext } from "react";
+import React, { useState, createContext, useContext } from 'react';
export const ActiveStepContext = createContext();
-export const ActiveStepProvider = ({children}) => {
- const [curActiveStep, setCurActiveStep] = useState(0);
-
- return (
-