init

frontend/widgets/Dictaphone/dictaphone.css

@@ -0,0 +1,69 @@
+#dictaphone_widget {
+    display: none;
+    overflow: hidden;
+    margin: 0 0.5rem;
+}
+
+#dictaphone_widget.show {
+    display: block;
+    border-top: 1px solid rgba(var(--movim-font), 0.12);
+}
+
+#dictaphone_widget li {
+    padding: 0.5rem 0;
+}
+
+#dictaphone_widget li #play_pause:not(.enabled) {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+#dictaphone_widget li #play_pause:not(.enabled) ~ #audio_upload {
+    display: none;
+}
+
+#dictaphone_widget li div {
+    display: flex;
+}
+
+#dictaphone_widget li div #timer {
+    width: 13rem;
+    line-height: 5rem;
+}
+
+#dictaphone_widget li div p.rec {
+    font-size: 2rem;
+    font-weight: bold;
+    filter: saturate(0);
+    line-height: 5rem;
+}
+
+#dictaphone_widget li div input[type=range] {
+    width: 100%;
+}
+
+#dictaphone_widget li #play_pause:not(.enabled) ~ div input[type=range] {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+@media screen and (max-width: 1024px) {
+    #dictaphone_widget li div input[type=range] {
+        display: none;
+    }
+
+    #dictaphone_widget li div #timer {
+        width: 100%;
+    }
+}
+
+#dictaphone_widget li div p.rec:before {
+    font-family: 'Material Symbols';
+    content: "\e061";
+    vertical-align: bottom;
+    margin-right: 0.5rem;
+}
+
+#dictaphone_widget li span#record:active ~ div p.rec  {
+    filter: saturate(1);
+}

frontend/widgets/Dictaphone/dictaphone.js

@@ -0,0 +1,161 @@
+var Dictaphone = {
+    mediaRecorder: null,
+    audio: null,
+    progressBar: null,
+    playPause: null,
+    audioUpload: null,
+    timer: null,
+    timerInterval: null,
+    recordTimeMs: 0,
+    recordTimerStart: null,
+    chunks: [],
+    audioStream: null,
+
+    toggle: function () {
+        let classList = document.querySelector('#dictaphone_widget').classList;
+        if (classList.contains('show')) {
+            classList.remove('show');
+            Dictaphone.clear();
+        } else {
+            classList.add('show');
+            Chat.scrollTotally();
+        }
+    },
+
+    init: function () {
+        Dictaphone.audio = document.querySelector('#dictaphone_widget audio');
+        Dictaphone.progressBar = document.querySelector('#dictaphone_widget input[type=range]');
+        Dictaphone.playPause = document.querySelector('#dictaphone #play_pause');
+        Dictaphone.audioUpload = document.querySelector('#dictaphone #audio_upload');
+        Dictaphone.timer = document.querySelector('#dictaphone_widget #timer');
+        const record = document.querySelector('#dictaphone_widget #record');
+        record.onmousedown = Dictaphone.record;
+        record.onmouseup = Dictaphone.stop;
+
+        Dictaphone.updateRecordTimer();
+    },
+
+    clear: function () {
+        Dictaphone.audio.src = '';
+        Dictaphone.playPause.classList.remove('enabled');
+        Dictaphone.recordTimeMs = 0;
+        Dictaphone.progressBar.value = 0;
+        Dictaphone.updateRecordTimer();
+    },
+
+    record: function () {
+        const constraints = { audio: true };
+
+        if (localStorage.getItem('defaultMicrophone')) {
+            constraints.audio = {
+                deviceId: localStorage.getItem('defaultMicrophone')
+            }
+        }
+
+        let mouseDownOnSlider = false;
+
+        navigator.mediaDevices.getUserMedia(constraints).then(audioStream => {
+            Dictaphone.audioStream = audioStream;
+
+            Dictaphone.mediaRecorder = new MediaRecorder(audioStream, { mimeType: 'audio/webm; codecs=opus' });
+
+            Dictaphone.mediaRecorder.ondataavailable = function (e) {
+                Dictaphone.chunks.push(e.data);
+            }
+
+            Dictaphone.mediaRecorder.onstart = function (e) {
+                Dictaphone.clear();
+
+                Dictaphone.recordTimerStart = new Date();
+                Dictaphone.timerInterval = setInterval(e => {
+                    Dictaphone.updateRecordTimer();
+                }, 500);
+            }
+
+            Dictaphone.mediaRecorder.onstop = function (e) {
+                const blob = new Blob(Dictaphone.chunks);
+                Dictaphone.chunks = [];
+
+                Dictaphone.audio.src = window.URL.createObjectURL(blob);
+
+                Upload.prepare(new File([blob], "record.opus", { type: 'audio/ogg'}));
+                Upload.name = 'record.opus';
+
+                Dictaphone.recordTimeMs = new Date() - Dictaphone.recordTimerStart;
+                Dictaphone.recordTimerStart = null;
+
+                clearInterval(Dictaphone.timerInterval);
+
+                Dictaphone.updateRecordTimer();
+            }
+
+            Dictaphone.audioUpload.onclick = function () {
+                Upload.init();
+                Dictaphone.clear();
+            }
+
+            Dictaphone.audio.onloadeddata = function () {
+                Dictaphone.playPause.classList.add('enabled');
+                Dictaphone.progressBar.value = 0;
+                Dictaphone.updateRecordTimer();
+            }
+
+            Dictaphone.audio.ontimeupdate = function () {
+                if (!mouseDownOnSlider) {
+                    Dictaphone.progressBar.value = Dictaphone.audio.currentTime / Dictaphone.recordTimeMs * 100 * 1000;
+                }
+
+                Dictaphone.updateRecordTimer();
+            }
+
+            Dictaphone.audio.onplay = function () {
+                Dictaphone.playPause.querySelector('i').innerHTML = 'pause';
+            };
+
+            Dictaphone.audio.onpause = function () {
+                Dictaphone.playPause.querySelector('i').innerHTML = 'play_arrow';
+            };
+
+            Dictaphone.progressBar.onchange = function () {
+                Dictaphone.audio.currentTime = Dictaphone.recordTimeMs / 100000 * Dictaphone.progressBar.value;
+            }
+
+            Dictaphone.playPause.onclick = function () {
+                if (Dictaphone.audio.paused) {
+                    Dictaphone.audio.play();
+                } else {
+                    Dictaphone.audio.pause();
+                }
+            };
+
+            Dictaphone.progressBar.onmousedown = function() {
+                mouseDownOnSlider = true;
+            }
+
+            Dictaphone.progressBar.onmouseup = function() {
+                mouseDownOnSlider = false;
+            }
+
+            Dictaphone.mediaRecorder.start();
+        }, error => console.log(error));
+    },
+
+    updateRecordTimer: function () {
+        Dictaphone.timer.innerHTML = MovimUtils.cleanTime(Dictaphone.audio.currentTime);
+        Dictaphone.timer.innerHTML += ' / ';
+        Dictaphone.timer.innerHTML +=
+            (Dictaphone.recordTimerStart != null)
+                ? MovimUtils.cleanTime(Math.round((new Date() - Dictaphone.recordTimerStart) / 1000))
+                : MovimUtils.cleanTime(Math.round(Dictaphone.recordTimeMs / 1000));
+    },
+
+    stop: function () {
+        if (Dictaphone.mediaRecorder) {
+            Dictaphone.mediaRecorder.stop();
+        }
+
+        Dictaphone.audioStream.getTracks().forEach(function (track) {
+            track.stop();
+        });
+    }
+}

frontend/widgets/Dictaphone/locales.ini

@@ -0,0 +1,4 @@
+[dictaphone]
+name            = Dictaphone
+push_to_record  = Push to record
+recording       = Recording