[TikiWiki-commits] [Git][tikiwiki/tiki][master] [NEW] Video/Audio recording: Add recording timer display to the recording interface

Benoit Grégoire pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
f905a9fd by Ushindi Gedeon at 2025-08-04T21:17:53+00:00
[NEW] Video/Audio recording: Add recording timer display to the recording interface
---
* [NEW]Video/Audio recording: Add recording timer display to the recording interface

See merge request tikiwiki/tiki!8112

- - - - -


3 changed files:

- lib/jquery_tiki/recordrtc.js
- templates/trackerinput/files.tpl
- themes/base_files/scss/_tiki-selectors.scss


Changes:

=====================================
lib/jquery_tiki/recordrtc.js
=====================================
@@ -5,10 +5,11 @@ var isRecording = false;
 let audioContexts = {};
 let analysers = {};
 let animationIds = {};
+let recordingStartTime;
+let recordingTimerInterval;
 
 
 function createWaveBars(stream, fieldId) {
-    $('.btn-close[data-bs-dismiss="modal"]').hide();
     const container = document.getElementById(`waveform-canvas-${fieldId}`);
     const canvas = document.getElementById(`wave-canvas-${fieldId}`);
 
@@ -52,6 +53,18 @@ function createWaveBars(stream, fieldId) {
     draw();
 }
 
+function startRecordingTimer() {
+    recordingStartTime = Date.now();
+    const $timer = $('#recording-timer');
+    $timer.show();
+
+    recordingTimerInterval = setInterval(() => {
+        const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
+        const minutes = String(Math.floor(elapsed / 60)).padStart(2, '0');
+        const seconds = String(elapsed % 60).padStart(2, '0');
+        $timer.text(`${minutes}:${seconds}`);
+    }, 1000);
+}
 
 
 function removeWaveBars(fieldId) {
@@ -68,7 +81,6 @@ function removeWaveBars(fieldId) {
         delete audioContexts[fieldId];
     }
     delete analysers[fieldId];
-    $('.btn-close[data-bs-dismiss="modal"]').show();
 }
 
 
@@ -395,11 +407,36 @@ class RecordBase {
     constructor(triggerElement) {
         this.startButton = triggerElement;
         this.stopButton = $(triggerElement).next(".stop-recording")[0];
+
+        const fieldId = $(triggerElement).data('field-id');
+        this.timerElement = $(`.recording-timer[data-field-id="${fieldId}"]`);
+
         this.startButtonHtml = $(triggerElement).html();
         this.uploadingStateHtml = $.BUTTON_LOADER_MARKUP + " " + tr("Uploading...");
     }
 
+    startTimer() {
+        this.recordingStartTime = Date.now();
+        this.timerElement.show();
+
+        this.recordingTimerInterval = setInterval(() => {
+            const elapsed = Math.floor((Date.now() - this.recordingStartTime) / 1000);
+            const minutes = String(Math.floor(elapsed / 60)).padStart(2, '0');
+            const seconds = String(elapsed % 60).padStart(2, '0');
+            this.timerElement.text(`${minutes}:${seconds}`);
+        }, 1000);
+         $('.btn-close[data-bs-dismiss="modal"]').hide();
+    }
+
+    stopTimer() {
+        clearInterval(this.recordingTimerInterval);
+        this.timerElement.hide().text('00:00');
+         $('.btn-close[data-bs-dismiss="modal"]').show();
+    }
+
     stopRecording() {
+        this.stopTimer();
+
         recorder.stopRecording(() => {
             $(this.startButton).removeClass("d-none");
             $(this.stopButton).addClass("d-none");
@@ -476,7 +513,7 @@ class RecordMicrophone extends RecordBase {
 
             recorder = RecordRTC(microphone, options);
             recorder.startRecording();
-            // createWaveBars(this.stopButton);
+            this.startTimer();
             const fieldId = $(triggerElement).data('field-id');
             createWaveBars(microphone, fieldId);
 
@@ -511,6 +548,7 @@ class RecordCameraAndAudio extends RecordBase {
             });
 
             recorder.startRecording();
+            this.startTimer();
             createWaveBars(this.stopButton);
             recorder.camera = camera;
 
@@ -521,8 +559,6 @@ class RecordCameraAndAudio extends RecordBase {
 
     stopRecording() {
         recorder.camera.stop();
-        removeWaveBars(fieldId);
-
         super.stopRecording();
     }
 }
@@ -530,27 +566,24 @@ class RecordCameraAndAudio extends RecordBase {
 class RecordScreen extends RecordBase {
     constructor(triggerElement) {
         super(triggerElement);
-
         this.requestPermissions((screen) => {
             recorder = RecordRTC(screen, {
                 type: 'video'
             });
 
             recorder.startRecording();
-            createWaveBars(this.stopButton);
 
             // release screen on stopRecording
             recorder.screen = screen;
 
             $(triggerElement).addClass("d-none").prop('disabled', false);
             $(this.stopButton).removeClass("d-none");
+            this.startTimer();
         });
     }
 
     stopRecording() {
         recorder.screen.stop();
-        removeWaveBars(fieldId);
-
         super.stopRecording();
     }
 


=====================================
templates/trackerinput/files.tpl
=====================================
@@ -98,6 +98,7 @@
             {/if}
             <button class="btn btn-secondary start-recording" data-tracker-files="true" data-type="{$liveRecord}" data-gallery-id="{$field.galleryId}" data-field-id="{$field.fieldId}">{icon name=$recordIcon} {$recordLabel}</button>
             <button class="btn btn-secondary stop-recording d-none">{icon name="stop"} {tr}Stop recording{/tr}</button>
+            <span class="recording-timer" data-field-id="{$field.fieldId}">00:00</span>
             <div id="waveform-canvas-{$field.fieldId}" class="waveform-container">
                 <canvas id="wave-canvas-{$field.fieldId}" class="w-100 h-100"></canvas>
             </div>


=====================================
themes/base_files/scss/_tiki-selectors.scss
=====================================
@@ -62,6 +62,12 @@ $imagePathToImgDir: "../../../img/";
     margin-top: 10px;
 }
 
+.recording-timer {
+    margin-left: 10px;
+    font-weight: bold;
+    display: none
+}
+
 //// h3 heading in modules
 //.module h3.card-title { font-size: $tiki-module-h3-card-title-font-size; }
 



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/f905a9fd108521d63737c4133062ecdbd1723777

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/f905a9fd108521d63737c4133062ecdbd1723777
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs