From 3415f672292bb349c7d9ec66564933a746ee3b25 Mon Sep 17 00:00:00 2001
From: mehekj <mehek.jethani@gmail.com>
Date: Mon, 20 Jun 2022 18:27:29 -0400
Subject: Revert "Merge branch 'master' into temporalmedia-mehek"

This reverts commit 145117365b2708ef6b365c6f0f10c38b85a87307, reversing
changes made to 7eedde332010c8896be636f0b5c6a7b2c8043e48.
---
 .../views/nodes/RecordingBox/RecordingView.tsx     | 282 ---------------------
 1 file changed, 282 deletions(-)
 delete mode 100644 src/client/views/nodes/RecordingBox/RecordingView.tsx

(limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
deleted file mode 100644
index b95335792..000000000
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import * as React from 'react';
-import "./RecordingView.scss";
-import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
-import { ProgressBar } from "./ProgressBar"
-import { MdBackspace } from 'react-icons/md';
-import { FaCheckCircle } from 'react-icons/fa';
-import { IconContext } from "react-icons";
-import { Networking } from '../../../Network';
-import { Upload } from '../../../../server/SharedMediaTypes';
-
-import { RecordingApi } from '../../../util/RecordingApi';
-import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
-
-interface MediaSegment {
-    videoChunks: any[],
-    endTime: number
-}
-
-interface IRecordingViewProps {
-    setResult: (info: Upload.FileInformation, trackScreen: boolean) => void
-    setDuration: (seconds: number) => void
-    id: string
-}
-
-const MAXTIME = 100000;
-
-export function RecordingView(props: IRecordingViewProps) {
-
-    const [recording, setRecording] = useState(false);
-    const recordingTimerRef = useRef<number>(0);
-    const [recordingTimer, setRecordingTimer] = useState(0); // unit is 0.01 second
-    const [playing, setPlaying] = useState(false);
-    const [progress, setProgress] = useState(0);
-
-    const [videos, setVideos] = useState<MediaSegment[]>([]);
-    const videoRecorder = useRef<MediaRecorder | null>(null);
-    const videoElementRef = useRef<HTMLVideoElement | null>(null);
-
-    const [finished, setFinished] = useState<boolean>(false)
-    const [trackScreen, setTrackScreen] = useState<boolean>(true)
-
-
-
-    const DEFAULT_MEDIA_CONSTRAINTS = {
-        video: {
-            width: 1280,
-            height: 720,
-        },
-        audio: {
-            echoCancellation: true,
-            noiseSuppression: true,
-            sampleRate: 44100
-        }
-    }
-
-    useEffect(() => {
-
-        if (finished) {
-            props.setDuration(recordingTimer * 100)
-            let allVideoChunks: any = []
-            videos.forEach((vid) => {
-                console.log(vid.videoChunks)
-                allVideoChunks = allVideoChunks.concat(vid.videoChunks)
-            })
-
-            const videoFile = new File(allVideoChunks, "video.mkv", { type: allVideoChunks[0].type, lastModified: Date.now() });
-
-            Networking.UploadFilesToServer(videoFile)
-                .then((data) => {
-                    const result = data[0].result
-                    if (!(result instanceof Error)) { // convert this screenshotBox into normal videoBox
-                        props.setResult(result, trackScreen)
-                    } else {
-                        alert("video conversion failed");
-                    }
-                })
-
-        }
-
-
-    }, [finished])
-
-    useEffect(() => {
-        // check if the browser supports media devices on first load
-        if (!navigator.mediaDevices) {
-            console.log('This browser does not support getUserMedia.')
-        }
-        console.log('This device has the correct media devices.')
-    }, [])
-
-    useEffect(() => {
-        // get access to the video element on every render
-        videoElementRef.current = document.getElementById(`video-${props.id}`) as HTMLVideoElement;
-    })
-
-    useEffect(() => {
-        let interval: any = null;
-        if (recording) {
-            interval = setInterval(() => {
-                setRecordingTimer(unit => unit + 1);
-            }, 10);
-        } else if (!recording && recordingTimer !== 0) {
-            clearInterval(interval);
-        }
-        return () => clearInterval(interval);
-    }, [recording])
-
-    useEffect(() => {
-        setVideoProgressHelper(recordingTimer)
-        recordingTimerRef.current = recordingTimer;
-    }, [recordingTimer])
-
-    const setVideoProgressHelper = (progress: number) => {
-        const newProgress = (progress / MAXTIME) * 100;
-        setProgress(newProgress)
-    }
-    const startShowingStream = async (mediaConstraints = DEFAULT_MEDIA_CONSTRAINTS) => {
-        const stream = await navigator.mediaDevices.getUserMedia(mediaConstraints)
-
-        videoElementRef.current!.src = ""
-        videoElementRef.current!.srcObject = stream
-        videoElementRef.current!.muted = true
-
-        return stream
-    }
-
-    const record = async () => {
-        const stream = await startShowingStream();
-        videoRecorder.current = new MediaRecorder(stream)
-
-        // temporary chunks of video
-        let videoChunks: any = []
-
-        videoRecorder.current.ondataavailable = (event: any) => {
-            if (event.data.size > 0) {
-                videoChunks.push(event.data)
-            }
-        }
-
-        videoRecorder.current.onstart = (event: any) => {
-            setRecording(true);
-            trackScreen && RecordingApi.Instance.start();
-        }
-
-        videoRecorder.current.onstop = () => {
-            // if we have a last portion
-            if (videoChunks.length > 1) {
-                // append the current portion to the video pieces
-                setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
-            }
-
-            // reset the temporary chunks
-            videoChunks = []
-            setRecording(false);
-            setFinished(true);
-            trackScreen && RecordingApi.Instance.pause();
-        }
-
-        // recording paused
-        videoRecorder.current.onpause = (event: any) => {
-            // append the current portion to the video pieces
-            setVideos(videos => [...videos, { videoChunks: videoChunks, endTime: recordingTimerRef.current }])
-
-            // 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 = () => {
-        if (videoRecorder.current) {
-            if (videoRecorder.current.state !== "inactive") {
-                videoRecorder.current.stop();
-                // recorder.current.stream.getTracks().forEach((track: any) => track.stop())
-            }
-        }
-    }
-
-    const pause = () => {
-        if (videoRecorder.current) {
-            if (videoRecorder.current.state === "recording") {
-                videoRecorder.current.pause();
-            }
-        }
-    }
-
-    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.resume();
-            }
-            return true; // cancels propagation to documentView to avoid selecting it.
-        }, false, false);
-    }
-
-    const clearPrevious = () => {
-        const numVideos = videos.length
-        setRecordingTimer(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
-        setVideoProgressHelper(numVideos == 1 ? 0 : videos[numVideos - 2].endTime)
-        setVideos(videos.filter((_, idx) => idx !== numVideos - 1));
-    }
-
-    const handleOnTimeUpdate = () => {
-        if (playing) {
-            setVideoProgressHelper(videoElementRef.current!.currentTime)
-        }
-    };
-
-    const millisecondToMinuteSecond = (milliseconds: number) => {
-        const toTwoDigit = (digit: number) => {
-            return String(digit).length == 1 ? "0" + digit : digit
-        }
-        const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
-        const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000);
-        return toTwoDigit(minutes) + " : " + toTwoDigit(seconds);
-    }
-
-    return (
-        <div className="recording-container">
-            <div className="video-wrapper">
-                <video id={`video-${props.id}`}
-                    autoPlay
-                    muted
-                    onTimeUpdate={handleOnTimeUpdate}
-                />
-                <div className="recording-sign">
-                    <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" onPointerDown={pause} /> :
-                                <button className="record-button" onPointerDown={startOrResume} />
-                            }
-                        </div>
-
-                        {!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> */}
-                                <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}>
-                                    <FaCheckCircle onClick={stop} />
-                                </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>
-
-                    <ProgressBar
-                        progress={progress}
-                        marks={videos.map((elt) => elt.endTime / MAXTIME * 100)}
-                    // playSegment={playSegment}
-                    />
-                </div>
-            </div>
-        </div>)
-}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2

