ze-react-component-library
Version:
ZeroETP React Component Library
138 lines (129 loc) • 5.4 kB
JavaScript
import "antd/es/message/style";
import _message from "antd/es/message";
import React, { useState, useEffect, useRef, useCallback } from "react";
import Icon from "@ant-design/icons";
import { requestSuggestByVoice } from "../request";
import "./index.less";
import useLocale from "../hooks/useLocale";
import { useRequest } from "@umijs/hooks";
import useRecorder from "../hooks/useRecorder";
var voiceSVG = function voiceSVG() {
return /*#__PURE__*/React.createElement("svg", {
width: "1em",
height: "1em",
viewBox: "0 0 34 34",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("path", {
d: "M10.625 8.5C10.625 6.80924 11.2967 5.18774 12.4922 3.99219C13.6877 2.79665 15.3092 2.125 17 2.125C18.6908 2.125 20.3123 2.79665 21.5078 3.99219C22.7034 5.18774 23.375 6.80924 23.375 8.5V14.1667C23.375 15.8574 22.7034 17.4789 21.5078 18.6745C20.3123 19.87 18.6908 20.5417 17 20.5417C15.3092 20.5417 13.6877 19.87 12.4922 18.6745C11.2967 17.4789 10.625 15.8574 10.625 14.1667V8.5ZM17 4.95833C16.0607 4.95833 15.1599 5.33147 14.4957 5.99566C13.8315 6.65985 13.4583 7.56069 13.4583 8.5V14.1667C13.4583 14.6318 13.5499 15.0923 13.7279 15.522C13.9059 15.9517 14.1668 16.3421 14.4957 16.671C14.8245 16.9999 15.215 17.2608 15.6447 17.4387C16.0744 17.6167 16.5349 17.7083 17 17.7083C17.4651 17.7083 17.9256 17.6167 18.3553 17.4387C18.785 17.2608 19.1755 16.9999 19.5043 16.671C19.8332 16.3421 20.0941 15.9517 20.2721 15.522C20.4501 15.0923 20.5417 14.6318 20.5417 14.1667V8.5C20.5417 7.56069 20.1685 6.65985 19.5043 5.99566C18.8401 5.33147 17.9393 4.95833 17 4.95833Z",
fill: "white"
}), /*#__PURE__*/React.createElement("path", {
d: "M17 24.0834C22.4768 24.0834 26.9167 19.6435 26.9167 14.1667H29.75C29.75 21.2082 24.0415 26.9167 17 26.9167C9.95846 26.9167 4.25 21.2082 4.25 14.1667H7.08333C7.08333 19.6435 11.5232 24.0834 17 24.0834Z",
fill: "white"
}), /*#__PURE__*/React.createElement("path", {
d: "M15.5834 31.1667V25.5H18.4167V31.1667H15.5834Z",
fill: "white"
}));
};
var rectSvg = function rectSvg() {
return /*#__PURE__*/React.createElement("svg", {
width: "0.6em",
height: "0.6em",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
}, /*#__PURE__*/React.createElement("rect", {
width: "16",
height: "16",
fill: "white"
}));
};
var ZEFloatRecordButton = function ZEFloatRecordButton(_a) {
var ask = _a.ask;
var t = useLocale().t;
var recorder = useRecorder();
var isRecording = recorder.isRecording;
var _b = useState(false),
translating = _b[0],
setTranslating = _b[1];
var recordingButton = useRef(null); // 开始录音
var startRecording = function startRecording() {
// 20231015,zxc。客户说，不要有这个限制。
// if (!isHttps()) {
// message.error("语音必须在https下才能使用");
// return;
// }
recorder.start(ask);
};
var sendVoice = useRequest(function (data) {
var formData = new FormData();
formData.append("voice", data);
return requestSuggestByVoice(formData).then(function (res) {
setTranslating(false);
ask(res.result);
}).catch(function (e) {
_message.error(e.message);
setTranslating(false);
ask(); // 退出去
});
}, {
manual: true,
debounceInterval: 100
}).run;
var stopRecording = useCallback(function () {
if (translating || !recorder || !isRecording) return;
setTranslating(true);
recorder.stop(sendVoice);
}, [translating, recorder, isRecording]);
useEffect(function () {
document.addEventListener("mouseup", stopRecording);
return function () {
document.removeEventListener("mouseup", stopRecording);
};
}, [stopRecording]);
useEffect(function () {
if (recordingButton === null || recordingButton === void 0 ? void 0 : recordingButton.current) {
(recordingButton === null || recordingButton === void 0 ? void 0 : recordingButton.current).addEventListener("contextmenu", function (e) {
e.preventDefault();
});
}
}, []);
return /*#__PURE__*/React.createElement("div", {
ref: recordingButton,
className: "ze-float-record-btn",
onTouchStart: function onTouchStart(e) {
startRecording();
},
onTouchEnd: function onTouchEnd(e) {
stopRecording();
},
onMouseDown: function onMouseDown() {
startRecording();
},
onMouseUp: function onMouseUp() {
stopRecording();
}
}, isRecording && /*#__PURE__*/React.createElement("div", {
className: "ze-float-record-btn-tip"
}, "\uD83D\uDD0E ", t("nlq.record.tip")), /*#__PURE__*/React.createElement("div", {
className: "ze-float-record-btn-inner"
}, /*#__PURE__*/React.createElement("div", {
className: "circles-wrapper",
style: {
opacity: isRecording ? 1 : 0
}
}, /*#__PURE__*/React.createElement("div", {
className: "circles"
}, /*#__PURE__*/React.createElement("div", {
className: "circle1"
}), /*#__PURE__*/React.createElement("div", {
className: "circle2"
}), /*#__PURE__*/React.createElement("div", {
className: "circle3"
}))), /*#__PURE__*/React.createElement("div", {
className: "ze-float-record-btn-inner-main"
}, /*#__PURE__*/React.createElement(Icon, {
component: isRecording ? rectSvg : voiceSVG
}))));
};
export default ZEFloatRecordButton;