@@ -271,6 +287,7 @@ import DebugEvent from "./messages/DebugEvent.vue";
import util from "../plugins/utils";
import MessageOperations from "./messages/MessageOperations.vue";
import ChatHeader from "./ChatHeader";
+import VoiceRecorder from "./VoiceRecorder";
const READ_RECEIPT_TIMEOUT = 5000; /* How long a message must have been visible before the read marker is updated */
@@ -320,6 +337,7 @@ export default {
RoomAvatarChanged,
DebugEvent,
MessageOperations,
+ VoiceRecorder
},
data() {
@@ -341,6 +359,7 @@ export default {
showContextMenu: false,
showContextMenuAnchor: null,
initialLoadDone: false,
+ showRecorder: false,
/**
* Current chat container size. We need to keep track of this so that if and when
@@ -1061,6 +1080,19 @@ export default {
dayForEvent(event) {
return util.formatDay(event.getTs());
},
+
+ startRecording() {
+ this.showRecorder = true;
+ },
+
+ onVoiceRecording(event) {
+ util.sendImage(
+ this.$matrix.matrixClient,
+ this.roomId,
+ event.file,
+ undefined
+ );
+ }
},
};
diff --git a/src/components/VoiceRecorder.vue b/src/components/VoiceRecorder.vue
new file mode 100644
index 0000000..16752e9
--- /dev/null
+++ b/src/components/VoiceRecorder.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+ {{ recordingTime }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 3712945..548be37 100644
--- a/src/main.js
+++ b/src/main.js
@@ -32,6 +32,13 @@ Vue.use((Vue) => {
};
});
+// Register a global custom directive called `v-blur` that prevents focus
+Vue.directive('blur', {
+ inserted: function (el) {
+ el.onfocus = (ev) => ev.target.blur()
+ }
+});
+
Vue.use(navigation, router);
new Vue({
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 3d63b45..ba866ab 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -8,6 +8,8 @@ var base64Url = require('json-web-key/lib/base64url');
// Install extended localized format
var localizedFormat = require('dayjs/plugin/localizedFormat')
dayjs.extend(localizedFormat)
+var duration = require('dayjs/plugin/duration')
+dayjs.extend(duration);
class Util {
getAttachment(matrixClient, event) {
@@ -443,6 +445,15 @@ class Util {
return then.format('L');
}
}
+
+ formatRecordDuration(ms) {
+ return dayjs.duration(ms).format("HH:mm:ss");
+ }
+
+ formatRecordStartTime(timestamp) {
+ var then = dayjs(timestamp);
+ return then.format('lll');
+ }
}
export default new Util();