diff options
Diffstat (limited to 'src/client/views/nodes/RecordingBox')
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingBox.tsx | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.tsx | 73 |
3 files changed, 37 insertions, 43 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index bd4af0a75..5e97e3eb5 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -25,7 +25,6 @@ export class RecordingBox extends ViewBoxBaseComponent() { } componentDidMount() { - console.log("set native width and height") Doc.SetNativeWidth(this.dataDoc, 1280); Doc.SetNativeHeight(this.dataDoc, 720); } @@ -40,7 +39,6 @@ export class RecordingBox extends ViewBoxBaseComponent() { @action setResult = (info: Upload.AccessPathInfo, trackScreen: boolean) => { - if (info == null) return this.result = info this.dataDoc.type = DocumentType.VID; this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration; @@ -55,7 +53,6 @@ export class RecordingBox extends ViewBoxBaseComponent() { } render() { - console.log("Proto[Is]: ", this.rootDoc.proto?.[Id]) return <div className="recordingBox" ref={this._ref}> {!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} id={this.rootDoc.proto?.[Id] || ''} />} </div>; diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss index 0b7b1918f..2e6f6bc26 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.scss +++ b/src/client/views/nodes/RecordingBox/RecordingView.scss @@ -18,13 +18,13 @@ button { width: 100%; // display: flex; pointer-events: all; - background-color: grey; + background-color: black; } .video-wrapper { // max-width: 600px; // max-width: 700px; - position: relative; + // position: relative; display: flex; justify-content: center; // overflow: hidden; diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 7cff54ff2..e8737dce2 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -7,7 +7,7 @@ import { FaCheckCircle } from 'react-icons/fa'; import { IconContext } from "react-icons"; import { Networking } from '../../../Network'; import { Upload } from '../../../../server/SharedMediaTypes'; - +import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils'; import { RecordingApi } from '../../../util/RecordingApi'; import { DashUploadUtils } from '../../../../server/DashUploadUtils'; @@ -170,28 +170,28 @@ export function RecordingView(props: IRecordingViewProps) { } // recording paused - videoRecorder.current.onpause = (event: any) => { - // append the current portion to the video pieces - setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current, startTime: videos?.lastElement()?.endTime || 0 }]) - - // reset the temporary chunks - videoChunks = [] - setRecording(false); - trackScreen && RecordingApi.Instance.pause(); - } - - videoRecorder.current.onresume = async (event: any) => { - await startShowingStream(); - setRecording(true); - trackScreen && RecordingApi.Instance.resume(); - } + // videoRecorder.current.onpause = (event: any) => { + // // append the current portion to the video pieces + // setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current, startTime: videos?.lastElement()?.endTime || 0 }]) + + // // reset the temporary chunks + // videoChunks = [] + // setRecording(false); + // trackScreen && RecordingApi.Instance.pause(); + // } + + // videoRecorder.current.onresume = async (event: any) => { + // await startShowingStream(); + // setRecording(true); + // trackScreen && RecordingApi.Instance.resume(); + // } videoRecorder.current.start(200) } - const stop = (e: React.MouseEvent) => { - e.stopPropagation() + const stop = (e: React.PointerEvent) => { + e.stopPropagation(); if (videoRecorder.current) { setFinished(true); if (videoRecorder.current.state !== "inactive") { @@ -201,7 +201,7 @@ export function RecordingView(props: IRecordingViewProps) { } } - const pause = (e: React.MouseEvent) => { + const pause = (e: React.PointerEvent) => { e.stopPropagation() if (videoRecorder.current) { if (videoRecorder.current.state === "recording") { @@ -210,25 +210,24 @@ export function RecordingView(props: IRecordingViewProps) { } } - const startOrResume = (e: React.MouseEvent) => { - e.stopPropagation() - if (!videoRecorder.current || videoRecorder.current.state === "inactive") { - record(); - } else if (videoRecorder.current.state === "paused") { - videoRecorder.current.start(); - } + const startOrResume = (e: React.PointerEvent) => { + // the code to start or resume does not get triggered if we start dragging the button + setupMoveUpEvents({}, e, returnTrue, returnFalse, e => { + if (!videoRecorder.current || videoRecorder.current.state === "inactive") { + record(); + } else if (videoRecorder.current.state === "paused") { + videoRecorder.current.start(); + } + return true; // cancels propagation to documentView to avoid selecting it. + }, false, false); } - const undoPrevious = (e: React.MouseEvent) => { + const undoPrevious = (e: React.PointerEvent) => { e.stopPropagation(); setDoUndo(prev => !prev); } - const handleOnTimeUpdate = () => { - if (playing) { - setVideoProgressHelper(videoElementRef.current!.currentTime) - } - }; + const handleOnTimeUpdate = () => playing && setVideoProgressHelper(videoElementRef.current!.currentTime); const millisecondToMinuteSecond = (milliseconds: number) => { const toTwoDigit = (digit: number) => { @@ -239,7 +238,6 @@ export function RecordingView(props: IRecordingViewProps) { return toTwoDigit(minutes) + " : " + toTwoDigit(seconds); } - // TODO: have the undo button only appear if there is something to undo return ( <div className="recording-container"> <div className="video-wrapper"> @@ -257,8 +255,8 @@ export function RecordingView(props: IRecordingViewProps) { <div className="controls-inner-container"> <div className="record-button-wrapper"> {recording ? - <button className="stop-button" onClick={pause} /> : - <button className="record-button" onClick={startOrResume} /> + <button className="stop-button" onPointerDown={pause} /> : + <button className="record-button" onPointerDown={startOrResume} /> } </div> @@ -266,10 +264,10 @@ export function RecordingView(props: IRecordingViewProps) { <div className="options-wrapper video-edit-wrapper"> <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons", style: {display: canUndo ? 'inherit' : 'none'} }}> - <MdBackspace onClick={undoPrevious} /> + <MdBackspace onPointerDown={undoPrevious} /> </IconContext.Provider> <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}> - <FaCheckCircle onClick={stop} /> + <FaCheckCircle onPointerDown={stop} /> </IconContext.Provider> </div> @@ -293,7 +291,6 @@ export function RecordingView(props: IRecordingViewProps) { recording={recording} doUndo={doUndo} setCanUndo={setCanUndo} - // playSegment={playSegment} /> </div> </div>) |