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

Update voice broadcast time display (#9646)

Browse source
This commit is contained in:
Michael Weimann 2022-11-30 08:47:29 +01:00 • committed by GitHub
parent 5f6b1dda8d
commit 70a7961681
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 149 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/DateUtils.ts
View file

@ -125,6 +125,9 @@ export function formatTime(date: Date, showTwelveHour = false): string {
}
export function formatSeconds(inSeconds: number): string {
const isNegative = inSeconds < 0;
inSeconds = Math.abs(inSeconds);
const hours = Math.floor(inSeconds / (60 * 60)).toFixed(0).padStart(2, '0');
const minutes = Math.floor((inSeconds % (60 * 60)) / 60).toFixed(0).padStart(2, '0');
const seconds = Math.floor(((inSeconds % (60 * 60)) % 60)).toFixed(0).padStart(2, '0');
@ -133,6 +136,10 @@ export function formatSeconds(inSeconds: number): string {
if (hours !== "00") output += `${hours}:`;
output += `${minutes}:${seconds}`;
if (isNegative) {
output = "-" + output;
}
return output;
}

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

@ -46,10 +46,9 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
playback,
}) => {
const {
duration,
times,
liveness,
playbackState,
position,
room,
sender,
toggle,
@ -94,7 +93,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
if (playbackState !== VoiceBroadcastPlaybackState.Stopped) {
const onSeekBackwardButtonClick = () => {
playback.skipTo(Math.max(0, position - SEEK_TIME));
playback.skipTo(Math.max(0, times.position - SEEK_TIME));
};
seekBackwardButton = <SeekButton
@ -104,7 +103,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
/>;
const onSeekForwardButtonClick = () => {
playback.skipTo(Math.min(duration, position + SEEK_TIME));
playback.skipTo(Math.min(times.duration, times.position + SEEK_TIME));
};
seekForwardButton = <SeekButton
@ -132,9 +131,10 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
{ control }
{ seekForwardButton }
</div>
<SeekBar playback={playback} />
<div className="mx_VoiceBroadcastBody_timerow">
<SeekBar playback={playback} />
<Clock seconds={duration} />
<Clock seconds={times.position} />
<Clock seconds={-times.timeLeft} />
</div>
</div>
);

20
src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts
View file

@ -40,18 +40,15 @@ export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => {
},
);
const [duration, setDuration] = useState(playback.durationSeconds);
const [times, setTimes] = useState({
duration: playback.durationSeconds,
position: playback.timeSeconds,
timeLeft: playback.timeLeftSeconds,
});
useTypedEventEmitter(
playback,
VoiceBroadcastPlaybackEvent.LengthChanged,
d => setDuration(d / 1000),
);
const [position, setPosition] = useState(playback.timeSeconds);
useTypedEventEmitter(
playback,
VoiceBroadcastPlaybackEvent.PositionChanged,
p => setPosition(p / 1000),
VoiceBroadcastPlaybackEvent.TimesChanged,
t => setTimes(t),
);
const [liveness, setLiveness] = useState(playback.getLiveness());
@ -62,10 +59,9 @@ export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => {
);
return {
duration,
times,
liveness: liveness,
playbackState,
position,
room: room,
sender: playback.infoEvent.sender,
toggle: playbackToggle,

31
src/voice-broadcast/models/VoiceBroadcastPlayback.ts
View file

@ -43,16 +43,20 @@ export enum VoiceBroadcastPlaybackState {
}
export enum VoiceBroadcastPlaybackEvent {
PositionChanged = "position_changed",
LengthChanged = "length_changed",
TimesChanged = "times_changed",
LivenessChanged = "liveness_changed",
StateChanged = "state_changed",
InfoStateChanged = "info_state_changed",
}
type VoiceBroadcastPlaybackTimes = {
duration: number;
position: number;
timeLeft: number;
};
interface EventMap {
[VoiceBroadcastPlaybackEvent.PositionChanged]: (position: number) => void;
[VoiceBroadcastPlaybackEvent.LengthChanged]: (length: number) => void;
[VoiceBroadcastPlaybackEvent.TimesChanged]: (times: VoiceBroadcastPlaybackTimes) => void;
[VoiceBroadcastPlaybackEvent.LivenessChanged]: (liveness: VoiceBroadcastLiveness) => void;
[VoiceBroadcastPlaybackEvent.StateChanged]: (
state: VoiceBroadcastPlaybackState,
@ -229,7 +233,7 @@ export class VoiceBroadcastPlayback
if (this.duration === duration) return;
this.duration = duration;
this.emit(VoiceBroadcastPlaybackEvent.LengthChanged, this.duration);
this.emitTimesChanged();
this.liveData.update([this.timeSeconds, this.durationSeconds]);
}
@ -237,10 +241,21 @@ export class VoiceBroadcastPlayback
if (this.position === position) return;
this.position = position;
this.emit(VoiceBroadcastPlaybackEvent.PositionChanged, this.position);
this.emitTimesChanged();
this.liveData.update([this.timeSeconds, this.durationSeconds]);
}
private emitTimesChanged(): void {
this.emit(
VoiceBroadcastPlaybackEvent.TimesChanged,
{
duration: this.durationSeconds,
position: this.timeSeconds,
timeLeft: this.timeLeftSeconds,
},
);
}
private onPlaybackStateChange = async (event: MatrixEvent, newState: PlaybackState): Promise<void> => {
if (event !== this.currentlyPlaying) return;
if (newState !== PlaybackState.Stopped) return;
@ -337,6 +352,10 @@ export class VoiceBroadcastPlayback
return this.duration / 1000;
}
public get timeLeftSeconds(): number {
return Math.round(this.durationSeconds) - this.timeSeconds;
}
public async skipTo(timeSeconds: number): Promise<void> {
const time = timeSeconds * 1000;
const event = this.chunkEvents.findByTime(time);