aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingBox.tsx11
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingView.scss30
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingView.tsx83
-rw-r--r--src/client/views/nodes/VideoBox.tsx5
4 files changed, 54 insertions, 75 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
index 807624394..e5b71c183 100644
--- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx
@@ -38,26 +38,23 @@ export class RecordingBox extends ViewBoxBaseComponent() {
}
@action
- setResult = (info: Upload.FileInformation) => {
- // console.log("Setting result to " + info)
+ setResult = (info: Upload.FileInformation, trackScreen: boolean) => {
this.result = info
- // console.log(this.result.accessPaths.agnostic.client)
this.dataDoc.type = DocumentType.VID;
- // console.log(this.videoDuration)
this.dataDoc[this.fieldKey + "-duration"] = this.videoDuration;
this.dataDoc.layout = VideoBox.LayoutString(this.fieldKey);
this.dataDoc[this.props.fieldKey] = new VideoField(this.result.accessPaths.agnostic.client);
this.dataDoc[this.fieldKey + "-recorded"] = true;
// stringify the presenation and store it
- this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
+ if (trackScreen) {
+ this.dataDoc[this.fieldKey + "-presentation"] = JSON.stringify(RecordingApi.Instance.clear());
+ }
}
render() {
return <div className="recordingBox" ref={this._ref}>
{!this.result && <RecordingView setResult={this.setResult} setDuration={this.setVideoDuration} />}
- {/* {!this.result ? <RecordingView setResult={this.setResult} /> :
- <p>video box</p>} */}
</div>;
}
}
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss
index c55af5952..9b2f6d070 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.scss
+++ b/src/client/views/nodes/RecordingBox/RecordingView.scss
@@ -1,5 +1,5 @@
video {
- // flex: 100%;
+ // flex: 100%;
width: 100%;
// min-height: 400px;
//height: auto;
@@ -22,12 +22,12 @@ button {
}
.video-wrapper {
- // max-width: 600px;
- // max-width: 700px;
+ // max-width: 600px;
+ // max-width: 700px;
position: relative;
display: flex;
justify-content: center;
- // overflow: hidden;
+ // overflow: hidden;
border-radius: 10px;
margin: 0;
}
@@ -176,7 +176,7 @@ button {
}
-.video-edit-wrapper {
+.options-wrapper {
height: 100%;
display: flex;
flex-direction: row;
@@ -184,10 +184,24 @@ button {
position: absolute;
top: 0;
bottom: 0;
- right: 50% - 15;
- .video-edit-buttons {
- margin: 0 5px;
+ &.video-edit-wrapper {
+
+ right: 50% - 15;
+
+ .track-screen {
+ font-weight: 200;
+ }
+
}
+ &.track-screen-wrapper {
+
+ right: 50% - 30;
+
+ .track-screen {
+ font-weight: 200;
+ }
+
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index efacf7735..e9450a5dd 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -10,20 +10,13 @@ import { Upload } from '../../../../server/SharedMediaTypes';
import { RecordingApi } from '../../../util/RecordingApi';
-
-enum RecordingStatus {
- Recording,
- Stopped,
- Paused
-}
-
interface MediaSegment {
videoChunks: any[],
endTime: number
}
interface IRecordingViewProps {
- setResult: (info: Upload.FileInformation) => void
+ setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
setDuration: (seconds: number) => void
}
@@ -36,27 +29,21 @@ export function RecordingView(props: IRecordingViewProps) {
const [recordingTimer, setRecordingTimer] = useState(0); // unit is 0.01 second
const [playing, setPlaying] = useState(false);
const [progress, setProgress] = useState(0);
- const [speed, setSpeed] = useState(1);
- const [muted, setMuted] = useState(false);
const [videos, setVideos] = useState<MediaSegment[]>([]);
- const [currentVid, setCurrentVid] = useState<number>(0);
const videoRecorder = useRef<MediaRecorder | null>(null);
- const audioRecorder = useRef<MediaRecorder | null>(null);
const videoElementRef = useRef<HTMLVideoElement | null>(null);
- const [finished, setFinished] = useState<Boolean>(false)
+ const [finished, setFinished] = useState<boolean>(false)
+ const [trackScreen, setTrackScreen] = useState<boolean>(true)
const DEFAULT_MEDIA_CONSTRAINTS = {
- // video: true,
- // audio: true
video: {
width: 1280,
height: 720,
},
- // audio: true,
audio: {
echoCancellation: true,
noiseSuppression: true,
@@ -80,7 +67,7 @@ export function RecordingView(props: IRecordingViewProps) {
.then((data) => {
const result = data[0].result
if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
- props.setResult(result)
+ props.setResult(result, trackScreen)
} else {
alert("video conversion failed");
}
@@ -138,11 +125,9 @@ export function RecordingView(props: IRecordingViewProps) {
const record = async () => {
const stream = await startShowingStream();
videoRecorder.current = new MediaRecorder(stream)
- // audioRecorder.current = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
// temporary chunks of video
let videoChunks: any = []
- // let audioChunks: any = []
videoRecorder.current.ondataavailable = (event: any) => {
if (event.data.size > 0) {
@@ -150,16 +135,9 @@ export function RecordingView(props: IRecordingViewProps) {
}
}
- // audioRecorder.current.ondataavailable = (event: any) => {
- // if (event.data.size > 0) {
- // audioChunks.push(event.data)
- // }
- // }
-
videoRecorder.current.onstart = (event: any) => {
- setRecording(true);
- // RecordingApi.Instance.clear();
- RecordingApi.Instance.start();
+ setRecording(true);
+ trackScreen && RecordingApi.Instance.start();
}
videoRecorder.current.onstop = () => {
@@ -172,8 +150,8 @@ export function RecordingView(props: IRecordingViewProps) {
// reset the temporary chunks
videoChunks = []
setRecording(false);
- setFinished(true);
- RecordingApi.Instance.pause();
+ setFinished(true);
+ trackScreen && RecordingApi.Instance.pause();
}
// recording paused
@@ -183,14 +161,14 @@ export function RecordingView(props: IRecordingViewProps) {
// reset the temporary chunks
videoChunks = []
- setRecording(false);
- RecordingApi.Instance.pause();
+ setRecording(false);
+ trackScreen && RecordingApi.Instance.pause();
}
videoRecorder.current.onresume = async (event: any) => {
await startShowingStream();
- setRecording(true);
- RecordingApi.Instance.resume();
+ setRecording(true);
+ trackScreen && RecordingApi.Instance.resume();
}
videoRecorder.current.start(200)
@@ -229,18 +207,6 @@ export function RecordingView(props: IRecordingViewProps) {
setVideos(videos.filter((_, idx) => idx !== numVideos - 1));
}
- // const handleVideoProgress = (event: any) => {
- // const manualChange = Number(event.target.value);
- // videoElement!.currentTime = (videoElement!.duration / 100) * manualChange;
- // setProgress(manualChange)
- // };
-
- // const handleVideoSpeed = (event: any) => {
- // const newSpeed = Number(event.target.value);
- // videoElement!.playbackRate = speed;
- // setSpeed(newSpeed)
- // };
-
const handleOnTimeUpdate = () => {
if (playing) {
setVideoProgressHelper(videoElementRef.current!.currentTime)
@@ -256,7 +222,7 @@ export function RecordingView(props: IRecordingViewProps) {
return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
}
- return (
+ return (
<div className="recording-container">
<div className="video-wrapper">
<video id="video"
@@ -277,9 +243,10 @@ export function RecordingView(props: IRecordingViewProps) {
<button className="record-button" onClick={startOrResume} />
}
</div>
- {!recording && videos.length > 0 ?
- <div className="video-edit-wrapper">
+ {!recording && (videos.length > 0 ?
+
+ <div className="options-wrapper video-edit-wrapper">
{/* <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}>
<MdBackspace onClick={clearPrevious} />
</IconContext.Provider> */}
@@ -288,7 +255,13 @@ export function RecordingView(props: IRecordingViewProps) {
</IconContext.Provider>
</div>
- : <></>}
+ : <div className="options-wrapper track-screen-wrapper">
+ <label className="track-screen">
+ <input type="checkbox" checked={trackScreen} onChange={(e) => { setTrackScreen(e.target.checked) }} />
+ <span className="checkmark"></span>
+ Track Screen
+ </label>
+ </div>)}
</div>
@@ -297,15 +270,7 @@ export function RecordingView(props: IRecordingViewProps) {
marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
// playSegment={playSegment}
/>
-
- {/* <button className="mute-btn" onClick={() => setMuted(!muted)}>
- {!muted ? (
- <i className="bx bxs-volume-full"></i>
- ) : (
- <i className="bx bxs-volume-mute"></i>
- )}
- </button> */}
- </div>
+ </div>
</div>
</div>)
} \ No newline at end of file
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 58e9f390c..902f19716 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -163,8 +163,11 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
// if presentation isn't null, call followmovements on the recording api
if (this.presentation) {
+ console.log("presentation isn't null")
const err = RecordingApi.Instance.playMovements(this.presentation, this.player?.currentTime || 0, this);
err && console.log(err)
+ } else {
+ console.log("presentation is null")
}
this._playing = true;
@@ -354,7 +357,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
// sets video element ref
@action
setVideoRef = (vref: HTMLVideoElement | null) => {
- console.log("SEt video ref " + vref)
+ console.log("Set video ref " + vref)
this._videoRef = vref;
if (vref) {
this._videoRef!.ontimeupdate = this.updateTimecode;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 21:43:54 +0000