imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add voice broadcast seek 30s forward/backward buttons (#9592)

Browse source
This commit is contained in:
Michael Weimann 2022-11-21 08:47:09 +01:00 • committed by GitHub
parent caac059479
commit d699f5607b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 316 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { ReactElement } from "react";
import {
VoiceBroadcastControl,
@ -26,9 +26,14 @@ import Spinner from "../../../components/views/elements/Spinner";
import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback";
import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg";
import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
import { Icon as Back30sIcon } from "../../../../res/img/element-icons/Back30s.svg";
import { Icon as Forward30sIcon } from "../../../../res/img/element-icons/Forward30s.svg";
import { _t } from "../../../languageHandler";
import Clock from "../../../components/views/audio_messages/Clock";
import SeekBar from "../../../components/views/audio_messages/SeekBar";
import { SeekButton } from "../atoms/SeekButton";
const SEEK_TIME = 30;
interface VoiceBroadcastPlaybackBodyProps {
playback: VoiceBroadcastPlayback;
@ -40,10 +45,11 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
const {
duration,
liveness,
playbackState,
position,
room,
sender,
toggle,
playbackState,
} = useVoiceBroadcastPlayback(playback);
let control: React.ReactNode;
@ -76,6 +82,31 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
/>;
}
let seekBackwardButton: ReactElement | null = null;
let seekForwardButton: ReactElement | null = null;
if (playbackState !== VoiceBroadcastPlaybackState.Stopped) {
const onSeekBackwardButtonClick = () => {
playback.skipTo(Math.max(0, position - SEEK_TIME));
};
seekBackwardButton = <SeekButton
icon={Back30sIcon}
label={_t("30s backward")}
onClick={onSeekBackwardButtonClick}
/>;
const onSeekForwardButtonClick = () => {
playback.skipTo(Math.min(duration, position + SEEK_TIME));
};
seekForwardButton = <SeekButton
icon={Forward30sIcon}
label={_t("30s forward")}
onClick={onSeekForwardButtonClick}
/>;
}
return (
<div className="mx_VoiceBroadcastBody">
<VoiceBroadcastHeader
@ -85,7 +116,9 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
showBroadcast={true}
/>
<div className="mx_VoiceBroadcastBody_controls">
{ seekBackwardButton }
{ control }
{ seekForwardButton }
</div>
<div className="mx_VoiceBroadcastBody_timerow">
<SeekBar playback={playback} />