stream-chat-react
Version:
React components to create chat conversations or livestream style chat
80 lines (79 loc) • 6.95 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React from 'react';
import { PauseIcon, PlayTriangleIcon } from './icons';
import { FileSizeIndicator } from './FileSizeIndicator';
import { DownloadButton } from './DownloadButton';
import { useAudioController } from './hooks/useAudioController';
import { useChatContext } from '../../context/ChatContext';
var AudioV1 = function (_a) {
var og = _a.og;
var asset_url = og.asset_url, description = og.description, image_url = og.image_url, text = og.text, title = og.title;
var _b = useAudioController(), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, togglePlay = _b.togglePlay;
return (React.createElement("div", { className: 'str-chat__audio' },
React.createElement("div", { className: 'str-chat__audio__wrapper' },
React.createElement("audio", { ref: audioRef },
React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
React.createElement("div", { className: 'str-chat__audio__image' },
React.createElement("div", { className: 'str-chat__audio__image--overlay' }, !isPlaying ? (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'play-audio', onClick: togglePlay },
React.createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
React.createElement("path", { d: 'M32 58c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26zm0 6C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm13.237-28.412L26.135 45.625a3.27 3.27 0 0 1-4.426-1.4 3.319 3.319 0 0 1-.372-1.47L21 23.36c-.032-1.823 1.41-3.327 3.222-3.358a3.263 3.263 0 0 1 1.473.322l19.438 9.36a3.311 3.311 0 0 1 .103 5.905z', fillRule: 'nonzero' })))) : (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'pause-audio', onClick: togglePlay },
React.createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
React.createElement("path", { d: 'M32 58.215c14.478 0 26.215-11.737 26.215-26.215S46.478 5.785 32 5.785 5.785 17.522 5.785 32 17.522 58.215 32 58.215zM32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm-7.412-45.56h2.892a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.892a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17zm12.293 0h2.893a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.893a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17z', fillRule: 'nonzero' }))))),
image_url && React.createElement("img", { alt: "".concat(description), src: image_url })),
React.createElement("div", { className: 'str-chat__audio__content' },
React.createElement("span", { className: 'str-chat__audio__content--title' },
React.createElement("strong", null, title)),
React.createElement("span", { className: 'str-chat__audio__content--subtitle' }, text),
React.createElement("div", { className: 'str-chat__audio__content--progress' },
React.createElement("div", { "data-progress": progress, "data-testid": 'audio-progress', role: 'progressbar', style: { width: "".concat(progress, "%") } }))))));
};
export var PlayButton = function (_a) {
var isPlaying = _a.isPlaying, onClick = _a.onClick;
return (React.createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayTriangleIcon, null)));
};
export var ProgressBar = function (_a) {
var onClick = _a.onClick, progress = _a.progress;
return (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-track', "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
background: "linear-gradient(\n\t\t to right, \n\t\t var(--str-chat__primary-color),\n\t\t var(--str-chat__primary-color) ".concat(progress, "%,\n\t\t var(--str-chat__disabled-color) ").concat(progress, "%,\n\t\t var(--str-chat__disabled-color)\n\t )"),
} },
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-slider', style: { left: "".concat(progress, "px") } })));
};
var AudioV2 = function (_a) {
var og = _a.og;
var asset_url = og.asset_url, file_size = og.file_size, title = og.title;
var _b = useAudioController(), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, seek = _b.seek, togglePlay = _b.togglePlay;
if (!asset_url)
return null;
var dataTestId = 'audio-widget';
var rootClassName = 'str-chat__message-attachment-audio-widget';
return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
React.createElement("audio", { ref: audioRef },
React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--play-controls' },
React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay })),
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text' },
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text-first-row' },
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title),
React.createElement(DownloadButton, { assetUrl: asset_url })),
React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text-second-row' },
React.createElement(FileSizeIndicator, { fileSize: file_size }),
React.createElement(ProgressBar, { onClick: seek, progress: progress })))));
};
var UnMemoizedAudio = function (props) {
var themeVersion = useChatContext('Audio').themeVersion;
return themeVersion === '1' ? React.createElement(AudioV1, __assign({}, props)) : React.createElement(AudioV2, __assign({}, props));
};
/**
* Audio attachment with play/pause button and progress bar
*/
export var Audio = React.memo(UnMemoizedAudio);