From 502d63b1a1897947ba213188fbaf829916784a96 Mon Sep 17 00:00:00 2001
From: Khadim Fall <khadimfall0602@gmail.com>
Date: Wed, 16 Aug 2023 08:10:02 +0200
Subject: [PATCH] Record from browser (#1068)

* add link to new lecture

* target blank

* :)

* prepared everthing for inpage recording

* nice record button

* video design

* responsive

* added select screen

* add start stop methods

* recording should work

* added play buttonc

* simplify colors

* controls working

* add data as a file

* make it work

* mute video preview

* added notices

* fix bug

* fix OnLastSlide :)
---
 .idea/runConfigurations/run_production.xml    |   1 -
 .../lecture-record-slide.gohtml               |  88 ++++++
 .../lecture-type-slide.gohtml                 |  23 +-
 .../course/manage/create-lecture-form.gohtml  |  26 +-
 web/ts/edit-course.ts                         | 263 ++++++++++++++++++
 5 files changed, 388 insertions(+), 13 deletions(-)
 create mode 100644 web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml

diff --git a/.idea/runConfigurations/run_production.xml b/.idea/runConfigurations/run_production.xml
index 300ff0eee..2706ea143 100644
--- a/.idea/runConfigurations/run_production.xml
+++ b/.idea/runConfigurations/run_production.xml
@@ -1,7 +1,6 @@
 <component name="ProjectRunConfigurationManager">
   <configuration default="false" name="run-production" type="CompoundRunConfigurationType">
     <toRun name="run-tumlive-go" type="GoApplicationRunConfiguration" />
-    <toRun name="build" type="js.build_tools.npm" />
     <method v="2" />
   </configuration>
 </component>
\ No newline at end of file
diff --git a/web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml b/web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml
new file mode 100644
index 000000000..8d9c834e4
--- /dev/null
+++ b/web/template/partial/course/manage/create-lecture-form-slides/lecture-record-slide.gohtml
@@ -0,0 +1,88 @@
+{{define "lecture-record-slide"}}
+    <div
+            x-data="{
+                recorder: initRecorder($el)
+            }"
+    >
+        <div class="dark:bg-gray-800 dark:text-orange-300 border-l-4 border-orange-500 rounded text-orange-500 p-4 bg-orange-100 mt-2">
+            <p class="font-bold">Notice</p>
+            <p>Please keep in mind, this feature hasn't been fully tested yet. So, we recommend using it only for short recordings where you can easily redo them if anything goes wrong.</p>
+        </div>
+        <div class="flex flex-col justify-center mt-7 xl:flex-row">
+            <div
+                class="aspect-video xl:w-[47%] xl:mx-[1.5%] my-2 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
+                :class="recorder.screencastAvailable ? 'bg-black' : 'bg-black/30 dark:bg-black/20'"
+            >
+                <div
+                    x-show="!recorder.screencastAvailable"
+                    @click="() => recorder.selectScreencast($refs.screenDisplay)"
+                    class="flex justify-center flex-col items-center h-full"
+                >
+                    <i class="fa fa-desktop text-2xl mb-2"></i>
+                    <span class="block">
+                        Click to enable Screencast
+                    </span>
+                </div>
+
+                <video class="h-full w-full" x-ref="screenDisplay"></video>
+            </div>
+            <div
+                class="aspect-video xl:w-[47%] xl:mx-[1.5%] my-2 rounded relative max-xl:min-w-full cursor-pointer text-white overflow-hidden"
+                :class="recorder.cameraAvailable ? 'bg-black' : 'bg-black/30 dark:bg-black/20'"
+            >
+                <div
+                    x-show="!recorder.cameraAvailable"
+                    @click="() => recorder.selectCamera($refs.camDisplay)"
+                    class="flex justify-center flex-col items-center h-full"
+                >
+                    <i class="fa fa-camera text-2xl mb-2"></i>
+                    <span class="block">
+                        Click to enable Camera
+                    </span>
+                </div>
+
+                <video class="h-full w-full" x-ref="camDisplay"></video>
+            </div>
+        </div>
+
+        <div class="dark:text-gray-300 p-4 text-center">
+            <p>We kindly draw your attention to the fact that <b>voice recording functionality is dependent on the activation of your camera feed</b>.</p>
+        </div>
+
+        <div x-show="!recorder.recordingsReady" class="flex justify-center mt-7">
+            <button
+                @click.prevent="recorder.toggleRecording()"
+                class="rounded-full w-20 h-20 hover:scale-105 transition ease-in-out active:scale-90 active:bg-gray-600 flex justify-center items-center duration-100 disabled:opacity-20 disabled:scale-100 disabled:bg-gray-400"
+                :class="recorder.isRecording ? 'bg-gray-500' : 'bg-red-400'"
+                :disabled="recorder.retrieveRecording"
+            >
+                <div
+                    class="bg-white transition-all ease-in-out duration-100"
+                    :class="recorder.isRecording ? 'rounded w-7 h-7' : 'rounded-full w-5 h-5'"
+                ></div>
+            </button>
+        </div>
+
+        <div x-show="recorder.recordingsReady" class="flex justify-center mt-7">
+            <button
+                    @click.prevent="recorder.deleteRecordings()"
+                    class="rounded-full w-20 h-20 hover:scale-110 transition ease-in-out active:scale-90 flex justify-center items-center text-red-400 duration-100 disabled:opacity-20 disabled:scale-100"
+            >
+                <i class="fa fa-trash text-2xl"></i>
+            </button>
+            <button
+                @click.prevent="recorder.togglePlay()"
+                class="rounded-full w-20 h-20 hover:scale-105 transition ease-in-out bg-blue-400 active:scale-90 active:bg-gray-600 flex justify-center items-center duration-100 text-white disabled:opacity-20 disabled:scale-100 disabled:bg-gray-400"
+            >
+                <i x-show="!recorder.isPlaying" class="fa fa-play text-2xl"></i>
+                <i x-show="recorder.isPlaying" class="fa fa-pause text-2xl"></i>
+            </button>
+            <button
+                    @click.prevent="recorder.resetPlay()"
+                    class="rounded-full w-20 h-20 hover:scale-110 transition ease-in-out active:scale-90 flex justify-center items-center text-blue-400 duration-100 disabled:opacity-20 disabled:scale-100"
+            >
+                <i class="fa fa-stop text-2xl"></i>
+            </button>
+        </div>
+    </div>
+{{end}}
\ No newline at end of file
diff --git a/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml b/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml
index 24b0886fc..2ddd74df7 100644
--- a/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form-slides/lecture-type-slide.gohtml
@@ -2,9 +2,10 @@
     <ul class="w-full">
         <li class="mb-2">
             <button
-                    @click.prevent="() => updateType(false)"
+                    x-data="{ itemCreateType: admin.LectureCreateType.livestream }"
+                    @click.prevent="() => updateCreateType(itemCreateType)"
                     class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
-                    :class="formData.vodup === true ? '' : 'dark:text-white dark:border-white border-blue-600 text-blue-600'"
+                    :class="createType === itemCreateType ? 'dark:text-white dark:border-white border-blue-600 text-blue-600' : ''"
             >
                 <div class="block text-left">
                     <div class="w-full text-lg font-semibold">Livestream</div>
@@ -12,11 +13,25 @@
                 </div>
             </button>
         </li>
+        <li class="mb-2">
+            <button
+                    x-data="{ itemCreateType: admin.LectureCreateType.vodRecord }"
+                    @click.prevent="() => updateCreateType(itemCreateType)"
+                    class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
+                    :class="createType === itemCreateType ? 'dark:text-white dark:border-white border-blue-600 text-blue-600' : ''"
+            >
+                <div class="block text-left">
+                    <div class="w-full text-lg font-semibold">Record Lecture</div>
+                    <div class="w-full">Record a Lecture in your Browser</div>
+                </div>
+            </button>
+        </li>
         <li>
             <button
-                    @click.prevent="() => updateType(true)"
+                    x-data="{ itemCreateType: admin.LectureCreateType.vodUpload }"
+                    @click.prevent="() => updateCreateType(itemCreateType)"
                     class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
-                    :class="formData.vodup !== true ? '' : 'dark:text-white dark:border-white border-blue-600 text-blue-600'"
+                    :class="createType === itemCreateType ? 'dark:text-white dark:border-white border-blue-600 text-blue-600' : ''"
             >
                 <div class="block text-left">
                     <div class="w-full text-lg font-semibold">Video Upload</div>
diff --git a/web/template/partial/course/manage/create-lecture-form.gohtml b/web/template/partial/course/manage/create-lecture-form.gohtml
index e4b8cb3a4..368ed7f51 100644
--- a/web/template/partial/course/manage/create-lecture-form.gohtml
+++ b/web/template/partial/course/manage/create-lecture-form.gohtml
@@ -18,16 +18,24 @@
                     2
                 </span>
                 <span class="hidden sm:inline-flex sm:ml-2">Details</span>
-                <svg aria-hidden="true" class="w-4 h-4 ml-2 sm:ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
+                <svg x-show="createType === admin.LectureCreateType.vodUpload || createType === admin.LectureCreateType.vodRecord" aria-hidden="true" class="w-4 h-4 ml-2 sm:ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
+            </li>
+            <li x-show="createType === admin.LectureCreateType.vodUpload" class="flex items-center " :class="currentTab === 2 ? `text-blue-500 dark:text-white` : `text-gray-400 dark:text-gray-500`">
+                <span class="flex items-center justify-center w-5 h-5 mr-2 text-xs border rounded-full shrink-0" :class="currentTab === 2 ? `border-blue-500 dark:border-white` : `border-gray-400 dark:border-gray-500`">
+                    3
+                </span>
+                Upload Media
             </li>
-            <li class="flex items-center " :class="currentTab === 2 ? `text-blue-500 dark:text-white` : `text-gray-400 dark:text-gray-500`">
+            <li x-show="createType === admin.LectureCreateType.vodRecord" class="flex items-center " :class="currentTab === 2 ? `text-blue-500 dark:text-white` : `text-gray-400 dark:text-gray-500`">
                 <span class="flex items-center justify-center w-5 h-5 mr-2 text-xs border rounded-full shrink-0" :class="currentTab === 2 ? `border-blue-500 dark:border-white` : `border-gray-400 dark:border-gray-500`">
                     3
                 </span>
+                Record Media
             </li>
         </ol>
 
         <div class="form-container-body">
+            {{- /* Loading Tab */ -}}
             <div x-show="currentTab === -1" x-data="{ progress: { COMB: 0, PRES: null, CAM: null } }" @voduploadprogress.window="(e) => (progress = e.detail)">
                 <h3>Your lecture is being created ...</h3>
                 <ul x-show="formData.vodup" class="mt-2">
@@ -37,21 +45,23 @@
                 </ul>
             </div>
 
+            {{- /* Tab 1 */ -}}
             <div x-show="currentTab === 0" class="flex py-4">
                 {{template "lecture-type-slide"}}
             </div>
 
-            <div x-show="currentTab === 1 && !formData.vodup">
-                {{template "livestream-type-slide"}}
-            </div>
-
-            <div x-show="(currentTab === 1 && formData.vodup) || (currentTab === 2 && !formData.vodup) " class="grid grid-cols-2 space-x-2">
+            {{- /* Tab 2 */ -}}
+            <div x-show="currentTab === 1" class="grid grid-cols-2 space-x-2">
                 {{template "lecture-details-slide"}}
             </div>
 
-            <div x-show="currentTab === 2 && formData.vodup">
+            {{- /* Tab 3 */ -}}
+            <div x-show="createType === admin.LectureCreateType.vodUpload && currentTab === 2" class="">
                 {{template "lecture-media-slide"}}
             </div>
+            <div x-show="createType === admin.LectureCreateType.vodRecord && currentTab === 2" class="">
+                {{template "lecture-record-slide"}}
+            </div>
         </div>
 
         <div x-show="error" class="flex justify-end px-6 py-2">
diff --git a/web/ts/edit-course.ts b/web/ts/edit-course.ts
index e8a395faa..0b1e65ab7 100644
--- a/web/ts/edit-course.ts
+++ b/web/ts/edit-course.ts
@@ -594,8 +594,244 @@ interface MediaUpload {
     progress: number;
 }
 
+export enum LectureCreateType {
+    vodRecord,
+    livestream,
+    vodUpload,
+}
+
+function stopRecorder(recorder: MediaRecorder): Promise<Blob> {
+    return new Promise((resolve) => {
+        recorder.ondataavailable = (e) => {
+            resolve(e.data);
+        };
+        recorder.stop();
+    });
+}
+
+function loadVideoBlob(elem: HTMLVideoElement, video: Blob): Promise<void> {
+    return new Promise((resolve) => {
+        elem.srcObject = null;
+        elem.onloadedmetadata = (e) => {
+            elem.pause();
+            elem.currentTime = 0;
+            resolve();
+        };
+        elem.src = URL.createObjectURL(video);
+    });
+}
+
+class LectureRecorder {
+    private eventRoot: HTMLElement;
+    private readonly onUpdateData: (screenRecording: Blob, cameraRecording: Blob) => void;
+
+    private screencastStream: MediaStream;
+    private cameraStream: MediaStream;
+
+    private screencastDisplay: HTMLVideoElement;
+    private cameraDisplay: HTMLVideoElement;
+
+    private screencastRecorder: MediaRecorder;
+    private cameraRecorder: MediaRecorder;
+
+    private screenRecording: Blob;
+    private cameraRecording: Blob;
+
+    public screencastAvailable: boolean;
+    public cameraAvailable: boolean;
+    public isRecording: boolean;
+    public retrieveRecording: boolean;
+    public recordingsReady: boolean;
+    public isPlaying: boolean;
+
+    constructor(eventRoot: HTMLElement, onUpdateData: (screenRecording: Blob, cameraRecording: Blob) => void) {
+        this.eventRoot = eventRoot;
+        this.onUpdateData = onUpdateData;
+        this.screencastAvailable = false;
+        this.cameraAvailable = false;
+        this.isRecording = false;
+        this.retrieveRecording = false;
+        this.recordingsReady = false;
+        this.isPlaying = false;
+    }
+
+    async selectScreencast(display: HTMLVideoElement): Promise<void> {
+        if (this.isRecording || this.recordingsReady) return;
+        try {
+            this.screencastDisplay = display;
+            this.screencastStream = await navigator.mediaDevices.getDisplayMedia({
+                audio: true,
+                video: true,
+            });
+
+            await this.initScreencastDisplay();
+        } catch (err) {
+            alert("Failed to access your screen.");
+        }
+    }
+
+    async selectCamera(display: HTMLVideoElement): Promise<void> {
+        if (this.isRecording || this.recordingsReady) return;
+        try {
+            this.cameraDisplay = display;
+            this.cameraStream = await navigator.mediaDevices.getUserMedia({
+                audio: true,
+                video: true,
+            });
+
+            await this.initCameraDisplay();
+
+            this.cameraAvailable = true;
+        } catch (err) {
+            alert("Failed to access your webcam & mic.");
+        }
+    }
+
+    initScreencastDisplay() {
+        return new Promise<void>((resolve) => {
+            this.screencastDisplay.srcObject = this.screencastStream;
+            this.screencastDisplay.onloadedmetadata = (e) => {
+                this.screencastDisplay.muted = true;
+                this.screencastDisplay.play();
+                this.screencastRecorder = new MediaRecorder(this.screencastStream, {
+                    mimeType: "video/webm",
+                });
+                this.screencastAvailable = true;
+                resolve();
+            };
+        });
+    }
+
+    initCameraDisplay(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.cameraDisplay.srcObject = this.cameraStream;
+            this.cameraDisplay.onloadedmetadata = (e) => {
+                this.cameraDisplay.muted = true;
+                this.cameraDisplay.play();
+                this.cameraRecorder = new MediaRecorder(this.cameraStream, {
+                    mimeType: "video/webm",
+                });
+                resolve();
+            };
+        });
+    }
+
+    async toggleRecording(): Promise<void> {
+        if (this.isRecording) {
+            await this.stop();
+        } else {
+            this.start();
+        }
+    }
+
+    start(): void {
+        if (this.isRecording) return;
+        if (this.screencastAvailable) {
+            this.screencastRecorder.start();
+        }
+        if (this.cameraRecorder) {
+            this.cameraRecorder.start();
+        }
+        this.isRecording = true;
+    }
+
+    async stop(): Promise<void> {
+        if (!this.isRecording || this.retrieveRecording) return;
+        this.isRecording = false;
+        this.retrieveRecording = true;
+
+        await Promise.all(
+            [
+                async () => {
+                    if (!this.screencastRecorder) {
+                        return;
+                    }
+                    this.screenRecording = await stopRecorder(this.screencastRecorder);
+                    this.screencastRecorder = null;
+                },
+                async () => {
+                    if (!this.cameraRecorder) {
+                        return;
+                    }
+                    this.cameraRecording = await stopRecorder(this.cameraRecorder);
+                    this.cameraRecorder = null;
+                },
+            ].map((fn) => fn()),
+        );
+        await this.displayRecordings();
+        this.onUpdateData(this.screenRecording, this.cameraRecording);
+        this.retrieveRecording = false;
+        this.recordingsReady = true;
+    }
+
+    async displayRecordings(): Promise<void> {
+        if (this.screenRecording) {
+            await loadVideoBlob(this.screencastDisplay, this.screenRecording);
+        }
+        if (this.cameraRecording) {
+            await loadVideoBlob(this.cameraDisplay, this.cameraRecording);
+        }
+    }
+
+    togglePlay() {
+        if (this.isPlaying) {
+            this.pause();
+        } else {
+            this.play();
+        }
+    }
+
+    play() {
+        if (this.isPlaying) return;
+        if (this.screenRecording) {
+            this.screencastDisplay.play();
+            this.screencastDisplay.onended = () => this.resetPlay();
+        }
+        if (this.cameraRecording) {
+            this.cameraDisplay.currentTime = this.screencastDisplay.currentTime;
+            this.cameraDisplay.play();
+            this.cameraDisplay.onended = () => this.resetPlay();
+        }
+        this.isPlaying = true;
+    }
+
+    pause() {
+        if (!this.isPlaying) return;
+        if (this.screenRecording) {
+            this.screencastDisplay.pause();
+        }
+        if (this.cameraRecording) {
+            this.cameraDisplay.pause();
+        }
+        this.isPlaying = false;
+    }
+
+    resetPlay() {
+        this.pause();
+        if (this.screenRecording) {
+            this.screencastDisplay.currentTime = 0;
+        }
+        if (this.cameraRecording) {
+            this.cameraDisplay.currentTime = 0;
+        }
+    }
+
+    deleteRecordings() {
+        this.pause();
+        if (confirm("Are your sure you want to delete all recordings?")) {
+            this.screenRecording = null;
+            this.cameraRecording = null;
+            this.recordingsReady = null;
+            this.initScreencastDisplay();
+            this.initCameraDisplay();
+            this.onUpdateData(this.screenRecording, this.cameraRecording);
+        }
+    }
+}
+
 export function createLectureForm(args: { s: [] }) {
     return {
+        createType: LectureCreateType.livestream,
         currentTab: 0,
         canGoBack: false,
         canContinue: true,
@@ -627,6 +863,9 @@ export function createLectureForm(args: { s: [] }) {
         init() {
             this.onUpdate();
         },
+        initRecorder(eventRoot: HTMLElement): LectureRecorder {
+            return new LectureRecorder(eventRoot, (screen, cam) => this.updateRecordings(screen, cam));
+        },
         next() {
             if (this.onLastSlide) {
                 this.submitData();
@@ -639,6 +878,14 @@ export function createLectureForm(args: { s: [] }) {
             this.currentTab--;
             this.onUpdate();
         },
+        updateCreateType(newType: LectureCreateType) {
+            this.createType = newType;
+            if (newType === LectureCreateType.livestream) {
+                this.formData.vodup = false;
+            } else {
+                this.formData.vodup = true;
+            }
+        },
         updateLiveAdHoc(adHoc: boolean) {
             this.formData.adHoc = adHoc;
             this.next();
@@ -675,6 +922,21 @@ export function createLectureForm(args: { s: [] }) {
             this.onUpdate();
         },
 
+        updateRecordings(screenRecording: Blob, cameraRecording: Blob) {
+            this.formData.combFile = [];
+            this.formData.presFile = [];
+            this.formData.camFile = [];
+
+            if (screenRecording) {
+                this.formData.presFile = [new File([screenRecording], "pres.webm")];
+            }
+            if (cameraRecording) {
+                this.formData.camFile = [new File([cameraRecording], "cam.webm")];
+            }
+
+            this.onUpdate();
+        },
+
         // This function sets flags depending on the current tab and current data
         onUpdate() {
             if (this.currentTab === 0) {
@@ -692,6 +954,7 @@ export function createLectureForm(args: { s: [] }) {
                     this.canGoBack = true;
                     this.canContinue = this.formData.start.length > 0;
                 } else {
+                    this.onLastSlide = true;
                     this.canGoBack = true;
                     this.canContinue = this.formData.start.length > 0 && this.formData.end.length > 0;
                 }