Show time left for voice broadcast recordings (#9564)
This commit is contained in:
parent
962e8e0b23
commit
f6347d24ef
22 changed files with 469 additions and 145 deletions
|
@ -17,10 +17,13 @@ import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
|
|||
import { LiveBadge } from "../..";
|
||||
import { Icon as LiveIcon } from "../../../../res/img/element-icons/live.svg";
|
||||
import { Icon as MicrophoneIcon } from "../../../../res/img/voip/call-view/mic-on.svg";
|
||||
import { Icon as TimerIcon } from "../../../../res/img/element-icons/Timer.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
|
||||
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
|
||||
import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg";
|
||||
import Clock from "../../../components/views/audio_messages/Clock";
|
||||
import { formatTimeLeft } from "../../../DateUtils";
|
||||
|
||||
interface VoiceBroadcastHeaderProps {
|
||||
live?: boolean;
|
||||
|
@ -28,6 +31,7 @@ interface VoiceBroadcastHeaderProps {
|
|||
room: Room;
|
||||
sender: RoomMember;
|
||||
showBroadcast?: boolean;
|
||||
timeLeft?: number;
|
||||
showClose?: boolean;
|
||||
}
|
||||
|
||||
|
@ -38,6 +42,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
|
|||
sender,
|
||||
showBroadcast = false,
|
||||
showClose = false,
|
||||
timeLeft,
|
||||
}) => {
|
||||
const broadcast = showBroadcast
|
||||
? <div className="mx_VoiceBroadcastHeader_line">
|
||||
|
@ -54,6 +59,13 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
|
|||
</AccessibleButton>
|
||||
: null;
|
||||
|
||||
const timeLeftLine = timeLeft
|
||||
? <div className="mx_VoiceBroadcastHeader_line">
|
||||
<TimerIcon className="mx_Icon mx_Icon_16" />
|
||||
<Clock formatFn={formatTimeLeft} seconds={timeLeft} />
|
||||
</div>
|
||||
: null;
|
||||
|
||||
return <div className="mx_VoiceBroadcastHeader">
|
||||
<RoomAvatar room={room} width={32} height={32} />
|
||||
<div className="mx_VoiceBroadcastHeader_content">
|
||||
|
@ -64,6 +76,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
|
|||
<MicrophoneIcon className="mx_Icon mx_Icon_16" />
|
||||
<span>{ sender.name }</span>
|
||||
</div>
|
||||
{ timeLeftLine }
|
||||
{ broadcast }
|
||||
</div>
|
||||
{ liveBadge }
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue