aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/RecordingBox/RecordingView.tsx
diff options
context:
space:
mode:
authorMichael Foiani <sotech117@michaels-mbp-3.devices.brown.edu>2022-04-21 16:49:36 -0400
committerMichael Foiani <sotech117@michaels-mbp-3.devices.brown.edu>2022-04-21 16:49:36 -0400
commit756c06b3fcc889084ad2f68e217887d651f19f54 (patch)
tree358c6d506e6bcacc01ef78409112c409e11fb81c /src/client/views/nodes/RecordingBox/RecordingView.tsx
parent0af393318adafa885d66c0fc43ffbf23f91e3c73 (diff)
parent7d59a4fee343598f4b5a4adde97c3845e051df11 (diff)
Handle small merge conflict
Diffstat (limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingView.tsx97
1 files changed, 53 insertions, 44 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 8c1ab9e2b..fab7bc990 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -40,7 +40,7 @@ export function RecordingView() {
const [finished, setFinished] = useState<Boolean>(false)
-
+
const DEFAULT_MEDIA_CONSTRAINTS = {
video: {
@@ -57,7 +57,7 @@ export function RecordingView() {
useEffect(() => {
if (finished) {
- let allVideoChunks : any = []
+ let allVideoChunks: any = []
console.log(videos)
videos.forEach((vid) => {
console.log(vid.chunks)
@@ -67,7 +67,7 @@ export function RecordingView() {
console.log(allVideoChunks)
const blob = new Blob(allVideoChunks, {
- type: 'video/webm'
+ type: 'video/webm'
})
const blobUrl = URL.createObjectURL(blob)
@@ -78,8 +78,17 @@ export function RecordingView() {
// clear the recording api
const presentation = RecordingApi.finish()
RecordingApi.clear()
+
+ // upload data
+ // const [{ result }] = await Networking.UploadFilesToServer(e.data);
+ // console.log("Data result", result);
+ // if (!(result instanceof Error)) {
+ // this.props.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client);
+ // }
+
+ // change to one recording box
}
-
+
}, [finished])
@@ -162,7 +171,7 @@ export function RecordingView() {
// if we have a last portion
if (chunks.length > 1) {
// append the current portion to the video pieces
- setVideos(videos => [...videos, {chunks: chunks, endTime: recordingTimerRef.current}])
+ setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }])
}
// reset the temporary chunks
@@ -175,7 +184,7 @@ export function RecordingView() {
recorder.current.onpause = (event: any) => {
// append the current portion to the video pieces
console.log(chunks)
- setVideos(videos => [...videos, {chunks: chunks, endTime: recordingTimerRef.current}])
+ setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }])
// reset the temporary chunks
chunks = []
@@ -211,7 +220,7 @@ export function RecordingView() {
}
const startOrResume = () => {
- console.log('[RecordingView.tsx] startOrResume')
+ console.log('[RecordingView.tsx] startOrResume')
if (!recorder.current || recorder.current.state === "inactive") {
record();
const err = RecordingApi.initAndStart()
@@ -220,21 +229,21 @@ export function RecordingView() {
}
}
- const playSegment = (idx: number) => {
- console.log(idx)
- let currentChunks = videos[idx].chunks
- console.log(currentChunks)
+ // const playSegment = (idx: number) => {
+ // console.log(idx)
+ // let currentChunks = videos[idx].chunks
+ // console.log(currentChunks)
- const blob = new Blob(currentChunks, {
- type: 'video/webm'
- })
- const blobUrl = URL.createObjectURL(blob)
- console.log(blobUrl)
+ // const blob = new Blob(currentChunks, {
+ // type: 'video/webm'
+ // })
+ // const blobUrl = URL.createObjectURL(blob)
+ // console.log(blobUrl)
- videoElementRef.current!.srcObject = null
- videoElementRef.current!.src = blobUrl
- videoElementRef.current!.muted = false
- }
+ // videoElementRef.current!.srcObject = null
+ // videoElementRef.current!.src = blobUrl
+ // videoElementRef.current!.muted = false
+ // }
const clearPrevious = () => {
const numVideos = videos.length
@@ -265,12 +274,12 @@ export function RecordingView() {
const toTwoDigit = (digit: number) => {
return String(digit).length == 1 ? "0" + digit : digit
}
- const minutes = Math.floor(( milliseconds % (1000 * 60 * 60)) / (1000 * 60));
+ const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
}
-
+
useEffect(() => {
@@ -287,37 +296,37 @@ export function RecordingView() {
onTimeUpdate={handleOnTimeUpdate}
/>
<div className="recording-sign">
- <span className="dot"/>
+ <span className="dot" />
<p className="timer">{millisecondToMinuteSecond(recordingTimer * 10)}</p>
</div>
<div className="controls">
-
+
<div className="controls-inner-container">
<div className="record-button-wrapper">
- {recording ?
- <button className="stop-button" onClick={pause}/> :
- <button className="record-button" onClick={startOrResume}/>
+ {recording ?
+ <button className="stop-button" onClick={pause} /> :
+ <button className="record-button" onClick={startOrResume} />
}
</div>
- {!recording && videos.length > 0 ?
-
- <div className="video-edit-wrapper">
- <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
- <MdBackspace onClick={clearPrevious}/>
- </IconContext.Provider>
- <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
- <FaCheckCircle onClick={stop}/>
- </IconContext.Provider>
- </div>
-
- : <></>}
-
+ {!recording && videos.length > 0 ?
+
+ <div className="video-edit-wrapper">
+ <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
+ <MdBackspace onClick={clearPrevious} />
+ </IconContext.Provider>
+ <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
+ <FaCheckCircle onClick={stop} />
+ </IconContext.Provider>
+ </div>
+
+ : <></>}
+
</div>
-
- <ProgressBar
- progress={progress}
+
+ <ProgressBar
+ progress={progress}
marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
- playSegment={playSegment}
+ // playSegment={playSegment}
/>
{/* <button className="mute-btn" onClick={() => setMuted(!muted)}>