Your NameandClaude Opus 5
505a6d7d56
第3-4章复测确认这批原型图要求的功能之前完全没做（真实聊天引擎 messages-view.jsx/
send-message.jsx 从Ch1开始一直是最基础的版本：两个附件图标+文本框+发送/麦克风，
没有@、没有表情面板、没有7宫格附件面板、没有名片/收藏发送、语音是点一下进入录音模式
不是按住说话）。这次一次性把8项都接上，除了新功能外，过程中顺带发现并修了4个真bug。
**跨话题草稿**（im-api.js 新增 getTopicDraft/updateTopicDraft，messages-view.jsx）
话题切换时拉取 GET /topics/{topic}/draft（真实验证过P2P用原生话题名——对方user_id——
可以正常读写，接口内部自己会查Subs.Get校验，不需要额外归一化），输入框内容600ms防抖
PUT回去；真正发送成功后立即清空服务端草稿，不等下一次防抖。真实验证：输入文字→切走
再切回→草稿还在；刷新整个页面（新WS会话）→草稿依然从服务端正确恢复。
**@提醒**（send-message.jsx 新增 mention 相关状态和UI，messages-view.jsx 新增
mentionSearch/mentionedUsers/applyMentionResolution）
只在群聊开放，检测"光标前最近一个未闭合的@"触发面板，调 getGroupMembers(topic,
{mentionable:true, query}) 做实时搜索。协议层面：Tinode原生Drafty.parse本来就会把
纯文本里的"@word"自动识别成MN实体，但data.val存的是匹配到的原始文字，不是uid——
真正的uid只有用户从选择器里点选时才知道，记在 messages-view.jsx 的
this.mentionedUsers，发送前重新parse一遍把匹配上的占位符换成真uid。真实验证：选
"kcg051307"发送后直接查后端存储，MN实体的data.val确认是真实uid
"usrYVeV0yZs8tw"，不是原始文字。
**表情面板**（send-message.jsx）
2个tab（😊表情/♡常用），常用表情本地localStorage维护。图片没有拍到第二个tab具体
内容，判断"常用"是这类两tab设计里最常见、也是本项目里唯一有本地存储依据能撑起来的
语义。真实验证：点表情正确插入文本框，用过的表情正确出现在"常用"tab。
**7宫格附件面板**（send-message.jsx，替换原来常驻的照片/文件两个图标）
照片/拍摄/语音通话/名片/文件/收藏/视频通话。语音通话、视频通话复用第8章已有的
handleStartAudioCall/handleStartVideoCall（从 tinode-web.jsx 新抽出 canStartCall()
方法，同时替换掉"..."菜单里原来的内联判断，避免同一个判断逻辑两处维护),仅P2P且
真实通话功能可用时才不置灰——真实验证过群聊里这两项正确显示为禁用状态。
**名片消息**（send-message.jsx openCardPicker/sendCard，复用原生TheCard/
Drafty.appendTheCard）
选好友生成名片，uid必须用TheCard.setTinodeID写进vCard的comm数组（不是随便塞进某个
字段——widgets/the-card-mini.jsx渲染时用TheCard.getFirstTinodeID读这个协议项来判断
"发消息"按钮指向谁）。真实验证：选中好友后发出的名片消息真实带"聊天"按钮，点击可用。
**收藏发送到当前会话**（send-message.jsx openFavPicker/sendFavorite，复用Ch7的
forwardFavorites接口）
真实联调中发现并修复一个新bug：这个接口和其它几个批量接口一样，HTTP层恒定200，
真实成败要看items[].status——原来的写法完全没检查这个字段，等于假装总是成功。已改成
检查失败项并报错。同时真实测试还发现该接口对P2P目标会返回200+items[0].status:
"failed", reason:"PERMISSION_DENIED"（哪怕是真实好友、这个会话本身发消息完全正常），
看起来是后端这个接口自己的写权限判断有问题，不是前端能修的，已记录。
**按住说话+上滑取消录音**（send-message.jsx新增手势处理，audio-recorder.jsx新增
holdMode展示态）
mousedown/touchstart直接挂载AudioRecorder（挂载即开始录音，复用原有机制不动），
移动超过80px判定为"松开取消"，松手时通过ref直接调组件内部的handleDone/handleDelete。
过程中发现并修复3个真bug：① injectIntl包裹AudioRecorder默认不支持ref转发
（"Function components cannot be given refs"警告，ref静默失效)，加
{forwardRef:true}修好；② handleDelete从来没有像handleDone那样判空mediaRecorder，
录音还没真正开始（getUserMedia尚未resolve)就点删除会直接抛TypeError，这是原有代码
一直存在的问题，这次因为按住松手可能在录音刚开始的瞬间发生而被真实触发；③
cleanUp()同理没判空this.stream。补上判空后，"从未真正开始录音就结束"这个场景会
直接当作取消处理并正确调用onDeleted，不会再把UI卡在录音态出不来（真实验证：这个
环境的浏览器面板本身会拦截麦克风访问，用这个"getUserMedia永远拒绝"的真实场景反而
完整测出了正常/取消两条路径在录音真正开始前结束时都不再卡死或报错）。
**语音消息未读红点**（chat-message.jsx/audio-player.jsx/formatters.js）
纯客户端概念，原生Tinode的recv/read只到"消息本身有没有被看到"，跟"这条语音有没有
真的被点开听过"是两回事。audio-player.jsx的播放按钮新增可选onPlay回调（不传不影响
现有调用方），formatters.js的AU分支透传给它，chat-message.jsx按话题维护一份
localStorage"已播放seq集合"，对收到的（非自己发的）语音消息，没播放过就在气泡右上角
显示红点。真实验证：用原生SDK的_routeData往话题本地缓存注入一条真实结构的语音消息
（浏览器面板拦截麦克风，没有真实语音消息可用，用这个方式验证渲染/播放回调/持久化
三段逻辑），红点正确出现；直接触发播放回调后红点消失且localStorage正确写入对应seq。
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
417 lines
16 KiB
JavaScript
417 lines
16 KiB
JavaScript
"use strict";
|
|
(self["webpackChunktinode_webapp"] = self["webpackChunktinode_webapp"] || []).push([["src_widgets_audio-recorder_jsx"],{
|
|
|
|
/***/ "./src/widgets/audio-recorder.jsx":
|
|
/*!****************************************!*\
|
|
!*** ./src/widgets/audio-recorder.jsx ***!
|
|
\****************************************/
|
|
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
|
|
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var _audio_player_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./audio-player.jsx */ "./src/widgets/audio-player.jsx");
|
|
/* harmony import */ var webm_duration_fix__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! webm-duration-fix */ "./node_modules/webm-duration-fix/lib/index.js");
|
|
/* harmony import */ var webm_duration_fix__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(webm_duration_fix__WEBPACK_IMPORTED_MODULE_3__);
|
|
/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
|
|
/* harmony import */ var _lib_strformat__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../lib/strformat */ "./src/lib/strformat.js");
|
|
/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
|
|
/* harmony import */ var react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react/jsx-dev-runtime */ "./node_modules/react/jsx-dev-runtime.js");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const BUFFER_SIZE = 256;
|
|
const CANVAS_UPSCALING = 2.0;
|
|
const LINE_WIDTH = 3 * CANVAS_UPSCALING;
|
|
const SPACING = 2 * CANVAS_UPSCALING;
|
|
const MILLIS_PER_BAR = 100;
|
|
const BAR_COLOR = '#BBBD';
|
|
const BAR_SCALE = 64.0;
|
|
const VISUALIZATION_BARS = 96;
|
|
const MAX_SAMPLES_PER_BAR = 10;
|
|
const DEFAULT_AUDIO_MIME_TYPE = 'audio/webm';
|
|
const SAFARI_AUDIO_MIME_TYPE = 'audio/mp4';
|
|
const AUDIO_MIME_TYPES = [DEFAULT_AUDIO_MIME_TYPE, SAFARI_AUDIO_MIME_TYPE, ''];
|
|
const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
|
|
icon_title_delete: {
|
|
id: 'icon_title_delete',
|
|
defaultMessage: 'Delete recording',
|
|
description: 'Icon tool tip for deleting recorded audio'
|
|
},
|
|
icon_title_pause: {
|
|
id: 'icon_title_pause',
|
|
defaultMessage: 'Pause playback',
|
|
description: 'Icon tool tip for pausing audio playback'
|
|
},
|
|
icon_title_resume: {
|
|
id: 'icon_title_resume',
|
|
defaultMessage: 'Resume playback',
|
|
description: 'Icon tool tip for resuming audio playback'
|
|
},
|
|
icon_title_send: {
|
|
id: 'icon_title_send',
|
|
defaultMessage: 'Send message',
|
|
description: 'Icon tool tip for sending a message'
|
|
},
|
|
failed_to_init_audio: {
|
|
id: 'failed_to_init_audio',
|
|
defaultMessage: 'Failed to initialize audio recording',
|
|
description: 'Error message when audio is not available'
|
|
}
|
|
});
|
|
class AudioRecorder extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComponent) {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
enabled: true,
|
|
audioRecord: null,
|
|
recording: true,
|
|
paused: false,
|
|
duration: '0:00',
|
|
blobUrl: null,
|
|
preview: null
|
|
};
|
|
this.visualize = this.visualize.bind(this);
|
|
this.initMediaRecording = this.initMediaRecording.bind(this);
|
|
this.initCanvas = this.initCanvas.bind(this);
|
|
this.getRecording = this.getRecording.bind(this);
|
|
this.cleanUp = this.cleanUp.bind(this);
|
|
this.handleResume = this.handleResume.bind(this);
|
|
this.handlePause = this.handlePause.bind(this);
|
|
this.handleDelete = this.handleDelete.bind(this);
|
|
this.handleDone = this.handleDone.bind(this);
|
|
this.durationMillis = 0;
|
|
this.startedOn = null;
|
|
this.viewBuffer = [];
|
|
this.canvasRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
|
|
this.recordingTimestamp = 0;
|
|
}
|
|
componentDidMount() {
|
|
this.stream = null;
|
|
this.mediaRecorder = null;
|
|
this.audioContext = null;
|
|
this.audioInput = null;
|
|
this.analyser = null;
|
|
this.audioChunks = [];
|
|
try {
|
|
navigator.mediaDevices.getUserMedia({
|
|
audio: true,
|
|
video: false
|
|
}).then(this.initMediaRecording, this.props.onError);
|
|
} catch (err) {
|
|
this.props.onError(err);
|
|
}
|
|
}
|
|
componentWillUnmount() {
|
|
this.startedOn = null;
|
|
if (this.stream) {
|
|
this.cleanUp();
|
|
}
|
|
}
|
|
visualize() {
|
|
this.initCanvas();
|
|
const pcmData = new Uint8Array(this.analyser.frequencyBinCount);
|
|
const width = this.canvasWidth;
|
|
const height = this.canvasHeight;
|
|
const viewLength = width / (LINE_WIDTH + SPACING) | 0;
|
|
const viewDuration = MILLIS_PER_BAR * viewLength;
|
|
this.canvasContext.lineWidth = LINE_WIDTH;
|
|
this.canvasContext.strokeStyle = BAR_COLOR;
|
|
let prevBarCount = 0;
|
|
let volume = 0.0;
|
|
let countPerBar = 0;
|
|
const drawFrame = _ => {
|
|
if (!this.startedOn) {
|
|
return;
|
|
}
|
|
window.requestAnimationFrame(drawFrame);
|
|
const duration = this.durationMillis + (Date.now() - this.startedOn);
|
|
this.setState({
|
|
duration: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_5__.secondsToTime)(duration / 1000)
|
|
});
|
|
if (duration > _config_js__WEBPACK_IMPORTED_MODULE_6__.MAX_DURATION) {
|
|
this.startedOn = null;
|
|
this.mediaRecorder.pause();
|
|
this.durationMillis += Date.now() - this.startedOn;
|
|
this.setState({
|
|
enabled: false,
|
|
recording: false,
|
|
duration: (0,_lib_strformat__WEBPACK_IMPORTED_MODULE_5__.secondsToTime)(this.durationMillis / 1000)
|
|
});
|
|
}
|
|
this.analyser.getByteTimeDomainData(pcmData);
|
|
let amp = 0.0;
|
|
for (const amplitude of pcmData) {
|
|
amp += (amplitude - 127) ** 2;
|
|
}
|
|
volume += Math.sqrt(amp / pcmData.length);
|
|
countPerBar++;
|
|
let barCount = duration / MILLIS_PER_BAR | 0;
|
|
const dx = viewDuration > duration ? 0 : (duration - MILLIS_PER_BAR * barCount) / MILLIS_PER_BAR * (LINE_WIDTH + SPACING);
|
|
if (prevBarCount != barCount) {
|
|
prevBarCount = barCount;
|
|
this.viewBuffer.push(volume / countPerBar);
|
|
volume = 0.0;
|
|
countPerBar = 0;
|
|
if (this.viewBuffer.length > viewLength) {
|
|
this.viewBuffer.shift();
|
|
}
|
|
}
|
|
this.canvasContext.clearRect(0, 0, width, height);
|
|
this.canvasContext.beginPath();
|
|
for (let i = 0; i < this.viewBuffer.length; i++) {
|
|
let x = i * (LINE_WIDTH + SPACING) - dx;
|
|
let y = Math.max(Math.min(this.viewBuffer[i] / BAR_SCALE, 0.9) * height, 1);
|
|
this.canvasContext.moveTo(x, (height - y) * 0.5);
|
|
this.canvasContext.lineTo(x, (height + y) * 0.5);
|
|
}
|
|
this.canvasContext.stroke();
|
|
const now = new Date().getTime();
|
|
if (now - this.recordingTimestamp > _config_js__WEBPACK_IMPORTED_MODULE_6__.KEYPRESS_DELAY) {
|
|
this.props.onRecordingProgress();
|
|
this.recordingTimestamp = now;
|
|
}
|
|
};
|
|
drawFrame();
|
|
}
|
|
handlePause(e) {
|
|
e.preventDefault();
|
|
this.mediaRecorder.pause();
|
|
this.mediaRecorder.requestData();
|
|
this.durationMillis += Date.now() - this.startedOn;
|
|
this.startedOn = null;
|
|
this.setState({
|
|
recording: false
|
|
});
|
|
}
|
|
handleResume(e) {
|
|
e.preventDefault();
|
|
if (this.state.enabled) {
|
|
this.startedOn = Date.now();
|
|
this.mediaRecorder.resume();
|
|
this.setState({
|
|
recording: true
|
|
}, this.visualize);
|
|
}
|
|
}
|
|
handleDelete(e) {
|
|
e.preventDefault();
|
|
this.durationMillis = 0;
|
|
this.startedOn = null;
|
|
if (this.mediaRecorder) {
|
|
this.mediaRecorder.stop();
|
|
}
|
|
this.cleanUp();
|
|
this.setState({
|
|
recording: false
|
|
});
|
|
if (!this.mediaRecorder && this.props.onDeleted) {
|
|
this.props.onDeleted();
|
|
}
|
|
}
|
|
handleDone(e) {
|
|
e.preventDefault();
|
|
this.setState({
|
|
recording: false
|
|
});
|
|
if (this.startedOn) {
|
|
this.durationMillis += Date.now() - this.startedOn;
|
|
this.startedOn = null;
|
|
}
|
|
if (this.mediaRecorder) {
|
|
this.mediaRecorder.stop();
|
|
} else if (this.props.onDeleted) {
|
|
this.props.onDeleted();
|
|
}
|
|
}
|
|
initCanvas() {
|
|
this.canvasRef.current.width = this.canvasRef.current.offsetWidth * CANVAS_UPSCALING;
|
|
this.canvasRef.current.height = this.canvasRef.current.offsetHeight * CANVAS_UPSCALING;
|
|
this.canvasContext = this.canvasRef.current.getContext('2d');
|
|
this.canvasContext.lineCap = 'round';
|
|
this.canvasContext.translate(0.5, 0.5);
|
|
this.canvasWidth = this.canvasRef.current.width;
|
|
this.canvasHeight = this.canvasRef.current.height;
|
|
}
|
|
initMediaRecording(stream) {
|
|
this.stream = stream;
|
|
AUDIO_MIME_TYPES.some(mimeType => {
|
|
if (MediaRecorder.isTypeSupported(mimeType)) {
|
|
this.mediaRecorder = new MediaRecorder(stream, {
|
|
mimeType: mimeType,
|
|
audioBitsPerSecond: 24_000
|
|
});
|
|
return true;
|
|
}
|
|
return false;
|
|
});
|
|
if (!this.mediaRecorder) {
|
|
console.warn('MediaRecorder failed to initialize: no supported audio formats');
|
|
this.props.onError(this.props.intl.formatMessage(messages.failed_to_init_audio));
|
|
return;
|
|
}
|
|
this.audioContext = new AudioContext();
|
|
this.audioInput = this.audioContext.createMediaStreamSource(stream);
|
|
if (!this.audioInput) {
|
|
console.warn('createMediaStreamSource returned null: audio input unavailable');
|
|
this.props.onError(this.props.intl.formatMessage(messages.failed_to_init_audio));
|
|
return;
|
|
}
|
|
this.analyser = this.audioContext.createAnalyser();
|
|
this.analyser.fftSize = BUFFER_SIZE;
|
|
this.audioInput.connect(this.analyser);
|
|
this.mediaRecorder.onstop = _ => {
|
|
if (this.durationMillis > _config_js__WEBPACK_IMPORTED_MODULE_6__.MIN_DURATION) {
|
|
this.getRecording(this.mediaRecorder.mimeType).then(result => this.props.onFinished(result.url, result.preview, this.durationMillis));
|
|
} else {
|
|
this.props.onDeleted();
|
|
}
|
|
this.cleanUp();
|
|
};
|
|
this.mediaRecorder.ondataavailable = e => {
|
|
if (e.data.size > 0) {
|
|
this.audioChunks.push(e.data);
|
|
}
|
|
if (this.mediaRecorder.state != 'inactive') {
|
|
this.getRecording(this.mediaRecorder.mimeType).then(result => {
|
|
this.setState({
|
|
blobUrl: result.url,
|
|
preview: result.preview
|
|
});
|
|
});
|
|
}
|
|
};
|
|
this.durationMillis = 0;
|
|
this.startedOn = Date.now();
|
|
this.mediaRecorder.start();
|
|
this.visualize();
|
|
this.props.onRecordingProgress();
|
|
this.recordingTimestamp = this.startedOn;
|
|
}
|
|
getRecording(mimeType) {
|
|
mimeType = mimeType || DEFAULT_AUDIO_MIME_TYPE;
|
|
let blob = new Blob(this.audioChunks, {
|
|
type: mimeType
|
|
});
|
|
const result = mimeType == DEFAULT_AUDIO_MIME_TYPE ? webm_duration_fix__WEBPACK_IMPORTED_MODULE_3___default()(blob, mimeType) : Promise.resolve(blob);
|
|
return result.then(fixedBlob => {
|
|
blob = fixedBlob;
|
|
return fixedBlob.arrayBuffer();
|
|
}).then(arrayBuff => this.audioContext.decodeAudioData(arrayBuff)).then(decoded => this.createPreview(decoded)).then(preview => ({
|
|
url: window.URL.createObjectURL(blob),
|
|
preview: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__.intArrayToBase64)(preview)
|
|
}));
|
|
}
|
|
createPreview(audio) {
|
|
const data = audio.getChannelData(0);
|
|
const viewLength = Math.min(data.length, VISUALIZATION_BARS);
|
|
const totalSPB = data.length / viewLength | 0;
|
|
const samplingRate = Math.max(1, totalSPB / MAX_SAMPLES_PER_BAR | 0);
|
|
let buffer = [];
|
|
let max = -1;
|
|
for (let i = 0; i < viewLength; i++) {
|
|
let amplitude = 0;
|
|
let count = 0;
|
|
for (let j = 0; j < totalSPB; j += samplingRate) {
|
|
amplitude += data[totalSPB * i + j] ** 2;
|
|
count++;
|
|
}
|
|
const val = Math.sqrt(amplitude / count);
|
|
buffer.push(val);
|
|
max = Math.max(max, val);
|
|
}
|
|
if (max > 0) {
|
|
buffer = buffer.map(a => 100 * a / max | 0);
|
|
}
|
|
return buffer;
|
|
}
|
|
cleanUp() {
|
|
if (this.audioInput) {
|
|
this.audioInput.disconnect();
|
|
}
|
|
if (this.stream) {
|
|
this.stream.getTracks().forEach(track => track.stop());
|
|
}
|
|
}
|
|
render() {
|
|
const {
|
|
formatMessage
|
|
} = this.props.intl;
|
|
const resumeClass = 'material-icons ' + (this.state.enabled ? 'red' : 'gray');
|
|
if (this.props.holdMode) {
|
|
return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("div", {
|
|
className: 'audio audio-hold' + (this.props.cancelling ? ' cancelling' : ''),
|
|
children: [this.state.recording ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("canvas", {
|
|
ref: this.canvasRef
|
|
}, void 0, false) : null, (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("div", {
|
|
className: "duration",
|
|
children: this.state.duration
|
|
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("div", {
|
|
className: "audio-hold-hint",
|
|
children: this.props.cancelling ? '松开手指，取消发送' : '手指上滑，取消发送'
|
|
}, void 0, false)]
|
|
}, void 0, true);
|
|
}
|
|
return (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("div", {
|
|
className: "audio",
|
|
children: [(0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("a", {
|
|
href: "#",
|
|
onClick: this.handleDelete,
|
|
title: formatMessage(messages.icon_title_delete),
|
|
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("i", {
|
|
className: "material-icons gray",
|
|
children: "delete_outline"
|
|
}, void 0, false)
|
|
}, void 0, false), this.state.recording ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("canvas", {
|
|
ref: this.canvasRef
|
|
}, void 0, false) : (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)(_audio_player_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
|
|
src: this.state.blobUrl,
|
|
preview: this.state.preview,
|
|
duration: this.durationMillis,
|
|
short: true
|
|
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("div", {
|
|
className: "duration",
|
|
children: this.state.duration
|
|
}, void 0, false), this.state.recording ? (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("a", {
|
|
href: "#",
|
|
onClick: this.handlePause,
|
|
title: formatMessage(messages.icon_title_pause),
|
|
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("i", {
|
|
className: "material-icons",
|
|
children: "pause_circle_outline"
|
|
}, void 0, false)
|
|
}, void 0, false) : (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("a", {
|
|
href: "#",
|
|
onClick: this.handleResume,
|
|
title: formatMessage(messages.icon_title_resume),
|
|
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("i", {
|
|
className: resumeClass,
|
|
children: "radio_button_checked"
|
|
}, void 0, false)
|
|
}, void 0, false), (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("a", {
|
|
href: "#",
|
|
onClick: this.handleDone,
|
|
title: formatMessage(messages.icon_title_send),
|
|
children: (0,react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxDEV)("i", {
|
|
className: "material-icons",
|
|
children: "send"
|
|
}, void 0, false)
|
|
}, void 0, false)]
|
|
}, void 0, true);
|
|
}
|
|
}
|
|
/* harmony default export */ __webpack_exports__["default"] = ((0,react_intl__WEBPACK_IMPORTED_MODULE_1__.injectIntl)(AudioRecorder, {
|
|
forwardRef: true
|
|
}));
|
|
|
|
/***/ })
|
|
|
|
}]);
|
|
//# sourceMappingURL=src_widgets_audio-recorder_jsx.dev.js.map
|