优化页面
This commit is contained in:
pengxiaolong
@@ -1,199 +0,0 @@
|
||||
"use strict";
|
||||
const common_vendor = require("../../../../common/vendor.js");
|
||||
require("../../../adapter-vue.js");
|
||||
const common_assets = require("../../../../common/assets.js");
|
||||
const TUIKit_components_common_Toast_index = require("../../common/Toast/index.js");
|
||||
const TUIKit_utils_lodash = require("../../../utils/lodash.js");
|
||||
const TUIKit_components_TUIChat_utils_utils = require("../utils/utils.js");
|
||||
const TUIKit_components_common_Toast_type = require("../../common/Toast/type.js");
|
||||
if (!Math) {
|
||||
Icon();
|
||||
}
|
||||
const Icon = () => "../../common/Icon.js";
|
||||
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
||||
__name: "message-input-audio",
|
||||
props: {
|
||||
isEnableAudio: { type: Boolean, default: false }
|
||||
},
|
||||
emits: ["changeDisplayType"],
|
||||
setup(__props, { emit: __emit }) {
|
||||
var _a;
|
||||
const emits = __emit;
|
||||
const props = __props;
|
||||
let recordTime = 0;
|
||||
let isManualCancelBySlide = false;
|
||||
let recordTimer;
|
||||
let firstTouchPageY = -1;
|
||||
let isFingerTouchingScreen = false;
|
||||
let isFirstAuthrizedRecord = false;
|
||||
const recorderManager = (_a = common_vendor.i) == null ? void 0 : _a.getRecorderManager();
|
||||
const isRecording = common_vendor.ref(false);
|
||||
const touchBarText = common_vendor.ref("按住说话");
|
||||
const modalText = common_vendor.ref("正在录音");
|
||||
const isAudioTouchBarShow = common_vendor.ref(false);
|
||||
const currentConversation = common_vendor.ref();
|
||||
const recordConfig = {
|
||||
// Duration of the recording, in ms, with a maximum value of 600000 (10 minutes)
|
||||
duration: 6e4,
|
||||
// Sampling rate
|
||||
sampleRate: 44100,
|
||||
// Number of recording channels
|
||||
numberOfChannels: 1,
|
||||
// Encoding bit rate
|
||||
encodeBitRate: 192e3,
|
||||
// Audio format
|
||||
// Select this format to create audio messages that can be interoperable across all chat platforms (Android, iOS, WeChat Mini Programs, and Web).
|
||||
format: "mp3"
|
||||
};
|
||||
function switchAudio() {
|
||||
emits("changeDisplayType", props.isEnableAudio ? "editor" : "audio");
|
||||
}
|
||||
common_vendor.onMounted(() => {
|
||||
recorderManager.onStart(onRecorderStart);
|
||||
recorderManager.onStop(onRecorderStop);
|
||||
recorderManager.onError(onRecorderError);
|
||||
common_vendor.Jt.watch(common_vendor.o.CONV, {
|
||||
currentConversation: onCurrentConverstaionUpdated
|
||||
});
|
||||
});
|
||||
common_vendor.onUnmounted(() => {
|
||||
common_vendor.Jt.unwatch(common_vendor.o.CONV, {
|
||||
currentConversation: onCurrentConverstaionUpdated
|
||||
});
|
||||
});
|
||||
function onCurrentConverstaionUpdated(conversation) {
|
||||
currentConversation.value = conversation;
|
||||
}
|
||||
function initRecorder() {
|
||||
initRecorderData();
|
||||
initRecorderView();
|
||||
}
|
||||
function initRecorderView() {
|
||||
isRecording.value = false;
|
||||
touchBarText.value = "按住说话";
|
||||
modalText.value = "正在录音";
|
||||
}
|
||||
function initRecorderData(options) {
|
||||
clearInterval(recordTimer);
|
||||
recordTimer = void 0;
|
||||
recordTime = 0;
|
||||
firstTouchPageY = -1;
|
||||
isManualCancelBySlide = false;
|
||||
if (!(options == null ? void 0 : options.hasError)) {
|
||||
recorderManager.stop();
|
||||
}
|
||||
}
|
||||
function handleTouchStart() {
|
||||
if (isFingerTouchingScreen) {
|
||||
isFirstAuthrizedRecord = true;
|
||||
}
|
||||
}
|
||||
function handleLongPress() {
|
||||
isFingerTouchingScreen = true;
|
||||
recorderManager.start(recordConfig);
|
||||
}
|
||||
const handleTouchMove = TUIKit_utils_lodash.throttle(function(e) {
|
||||
if (isRecording.value) {
|
||||
const pageY = e.changedTouches[e.changedTouches.length - 1].pageY;
|
||||
if (firstTouchPageY < 0) {
|
||||
firstTouchPageY = pageY;
|
||||
}
|
||||
const offset = firstTouchPageY - pageY;
|
||||
if (offset > 150) {
|
||||
touchBarText.value = "抬起取消";
|
||||
modalText.value = "松开手指 取消发送";
|
||||
isManualCancelBySlide = true;
|
||||
} else if (offset > 50) {
|
||||
touchBarText.value = "抬起发送";
|
||||
modalText.value = "继续上滑可取消";
|
||||
isManualCancelBySlide = false;
|
||||
} else {
|
||||
touchBarText.value = "抬起发送";
|
||||
modalText.value = "正在录音";
|
||||
isManualCancelBySlide = false;
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
function handleTouchEnd() {
|
||||
isFingerTouchingScreen = false;
|
||||
recorderManager.stop();
|
||||
}
|
||||
function onRecorderStart() {
|
||||
if (!isFingerTouchingScreen) {
|
||||
isFirstAuthrizedRecord = true;
|
||||
recorderManager.stop();
|
||||
return;
|
||||
}
|
||||
recordTimer = setInterval(() => {
|
||||
recordTime += 1;
|
||||
}, 1e3);
|
||||
touchBarText.value = "抬起发送";
|
||||
isRecording.value = true;
|
||||
}
|
||||
function onRecorderStop(res) {
|
||||
var _a2, _b, _c, _d, _e, _f;
|
||||
if (isFirstAuthrizedRecord) {
|
||||
isFirstAuthrizedRecord = false;
|
||||
initRecorder();
|
||||
return;
|
||||
}
|
||||
if (isManualCancelBySlide || !isRecording.value) {
|
||||
initRecorder();
|
||||
return;
|
||||
}
|
||||
clearInterval(recordTimer);
|
||||
const tempFilePath = res.tempFilePath;
|
||||
const duration = res.duration ? res.duration : recordTime * 1e3;
|
||||
const fileSize = res.fileSize ? res.fileSize : 48 * recordTime / 8 * 1024;
|
||||
if (duration < 1e3) {
|
||||
TUIKit_components_common_Toast_index.Toast({
|
||||
message: "录音时间太短",
|
||||
type: TUIKit_components_common_Toast_type.TOAST_TYPE.NORMAL,
|
||||
duration: 1500
|
||||
});
|
||||
} else {
|
||||
const options = {
|
||||
to: ((_b = (_a2 = currentConversation == null ? void 0 : currentConversation.value) == null ? void 0 : _a2.groupProfile) == null ? void 0 : _b.groupID) || ((_d = (_c = currentConversation == null ? void 0 : currentConversation.value) == null ? void 0 : _c.userProfile) == null ? void 0 : _d.userID),
|
||||
conversationType: (_e = currentConversation == null ? void 0 : currentConversation.value) == null ? void 0 : _e.type,
|
||||
payload: { file: { duration, tempFilePath, fileSize } },
|
||||
needReadReceipt: TUIKit_components_TUIChat_utils_utils.isEnabledMessageReadReceiptGlobal()
|
||||
};
|
||||
(_f = common_vendor.Qt) == null ? void 0 : _f.sendAudioMessage(options);
|
||||
}
|
||||
initRecorder();
|
||||
}
|
||||
function onRecorderError() {
|
||||
initRecorderData({ hasError: true });
|
||||
initRecorderView();
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.o$1(switchAudio),
|
||||
b: common_vendor.p({
|
||||
file: common_vendor.unref(common_assets.audioIcon$1),
|
||||
size: "23px",
|
||||
hotAreaSize: "3px"
|
||||
}),
|
||||
c: props.isEnableAudio
|
||||
}, props.isEnableAudio ? common_vendor.e({
|
||||
d: common_vendor.t(common_vendor.unref(common_vendor.Wt).t(`TUIChat.${common_vendor.unref(touchBarText)}`)),
|
||||
e: common_vendor.unref(isRecording)
|
||||
}, common_vendor.unref(isRecording) ? {
|
||||
f: common_vendor.t(common_vendor.unref(common_vendor.Wt).t(`TUIChat.${common_vendor.unref(modalText)}`))
|
||||
} : {}, {
|
||||
g: common_vendor.o$1(handleTouchStart),
|
||||
h: common_vendor.o$1(handleLongPress),
|
||||
i: common_vendor.o$1(
|
||||
//@ts-ignore
|
||||
(...args) => common_vendor.unref(handleTouchMove) && common_vendor.unref(handleTouchMove)(...args)
|
||||
),
|
||||
j: common_vendor.o$1(handleTouchEnd)
|
||||
}) : {}, {
|
||||
k: common_vendor.unref(isAudioTouchBarShow) ? 1 : ""
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-89320e8a"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../../../../.sourcemap/mp-weixin/TUIKit/components/TUIChat/message-input/message-input-audio.js.map
|
||||
Reference in New Issue
Block a user