♻️ Refactored call view
This commit is contained in:
@ -2,7 +2,9 @@ import 'dart:convert';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_webrtc/flutter_webrtc.dart';
|
||||
import 'package:gap/gap.dart';
|
||||
import 'package:livekit_client/livekit_client.dart';
|
||||
import 'package:styled_widget/styled_widget.dart';
|
||||
import 'package:surface/types/account.dart';
|
||||
import 'package:surface/types/chat.dart';
|
||||
import 'package:surface/widgets/chat/call/call_no_content.dart';
|
||||
@ -11,23 +13,32 @@ import 'package:surface/widgets/chat/call/call_participant_menu.dart';
|
||||
import 'package:surface/widgets/chat/call/call_participant_stats.dart';
|
||||
|
||||
abstract class ParticipantWidget extends StatefulWidget {
|
||||
static ParticipantWidget widgetFor(ParticipantTrack participantTrack,
|
||||
{bool isFixed = false, bool showStatsLayer = false}) {
|
||||
static ParticipantWidget widgetFor(
|
||||
ParticipantTrack participantTrack, {
|
||||
double? avatarSize,
|
||||
EdgeInsets? padding,
|
||||
bool showStatsLayer = false,
|
||||
bool isList = false,
|
||||
}) {
|
||||
if (participantTrack.participant is LocalParticipant) {
|
||||
return LocalParticipantWidget(
|
||||
participantTrack.participant as LocalParticipant,
|
||||
participantTrack.videoTrack,
|
||||
isFixed,
|
||||
avatarSize,
|
||||
participantTrack.isScreenShare,
|
||||
showStatsLayer,
|
||||
isList,
|
||||
padding,
|
||||
);
|
||||
} else if (participantTrack.participant is RemoteParticipant) {
|
||||
return RemoteParticipantWidget(
|
||||
participantTrack.participant as RemoteParticipant,
|
||||
participantTrack.videoTrack,
|
||||
isFixed,
|
||||
avatarSize,
|
||||
participantTrack.isScreenShare,
|
||||
showStatsLayer,
|
||||
isList,
|
||||
padding,
|
||||
);
|
||||
}
|
||||
throw UnimplementedError('Unknown participant type');
|
||||
@ -36,8 +47,10 @@ abstract class ParticipantWidget extends StatefulWidget {
|
||||
abstract final Participant participant;
|
||||
abstract final VideoTrack? videoTrack;
|
||||
abstract final bool isScreenShare;
|
||||
abstract final bool isFixed;
|
||||
abstract final double? avatarSize;
|
||||
abstract final bool showStatsLayer;
|
||||
abstract final bool isList;
|
||||
abstract final EdgeInsets? padding;
|
||||
final VideoQuality quality;
|
||||
|
||||
const ParticipantWidget({
|
||||
@ -52,18 +65,24 @@ class LocalParticipantWidget extends ParticipantWidget {
|
||||
@override
|
||||
final VideoTrack? videoTrack;
|
||||
@override
|
||||
final bool isFixed;
|
||||
final double? avatarSize;
|
||||
@override
|
||||
final bool isScreenShare;
|
||||
@override
|
||||
final bool showStatsLayer;
|
||||
@override
|
||||
final bool isList;
|
||||
@override
|
||||
final EdgeInsets? padding;
|
||||
|
||||
const LocalParticipantWidget(
|
||||
this.participant,
|
||||
this.videoTrack,
|
||||
this.isFixed,
|
||||
this.avatarSize,
|
||||
this.isScreenShare,
|
||||
this.showStatsLayer, {
|
||||
this.showStatsLayer,
|
||||
this.isList,
|
||||
this.padding, {
|
||||
super.key,
|
||||
});
|
||||
|
||||
@ -77,18 +96,24 @@ class RemoteParticipantWidget extends ParticipantWidget {
|
||||
@override
|
||||
final VideoTrack? videoTrack;
|
||||
@override
|
||||
final bool isFixed;
|
||||
final double? avatarSize;
|
||||
@override
|
||||
final bool isScreenShare;
|
||||
@override
|
||||
final bool showStatsLayer;
|
||||
@override
|
||||
final bool isList;
|
||||
@override
|
||||
final EdgeInsets? padding;
|
||||
|
||||
const RemoteParticipantWidget(
|
||||
this.participant,
|
||||
this.videoTrack,
|
||||
this.isFixed,
|
||||
this.avatarSize,
|
||||
this.isScreenShare,
|
||||
this.showStatsLayer, {
|
||||
this.showStatsLayer,
|
||||
this.isList,
|
||||
this.padding, {
|
||||
super.key,
|
||||
});
|
||||
|
||||
@ -136,19 +161,82 @@ abstract class _ParticipantWidgetState<T extends ParticipantWidget>
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext ctx) {
|
||||
Widget build(BuildContext context) {
|
||||
if (widget.isList) {
|
||||
return Padding(
|
||||
padding: widget.padding ?? EdgeInsets.zero,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: (widget.avatarSize ?? 32) * 2,
|
||||
height: (widget.avatarSize ?? 32) * 2,
|
||||
child: Center(
|
||||
child: NoContentWidget(
|
||||
userinfo: _userinfoMetadata,
|
||||
avatarSize: widget.avatarSize,
|
||||
isSpeaking: widget.participant.isSpeaking,
|
||||
),
|
||||
),
|
||||
),
|
||||
const Gap(8),
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: (widget.avatarSize ?? 32) * 2,
|
||||
child: ParticipantInfoWidget(
|
||||
isList: true,
|
||||
title: widget.participant.name.isNotEmpty
|
||||
? widget.participant.name
|
||||
: widget.participant.identity,
|
||||
audioAvailable: _firstAudioPublication?.muted == false &&
|
||||
_firstAudioPublication?.subscribed == true,
|
||||
connectionQuality: widget.participant.connectionQuality,
|
||||
isScreenShare: widget.isScreenShare,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (_activeVideoTrack != null && !_activeVideoTrack!.muted)
|
||||
ClipRRect(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
child: AspectRatio(
|
||||
aspectRatio: 16 / 9,
|
||||
child: Material(
|
||||
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.surfaceContainer
|
||||
.withOpacity(0.75),
|
||||
child: VideoTrackRenderer(
|
||||
_activeVideoTrack!,
|
||||
fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
|
||||
),
|
||||
),
|
||||
).padding(top: 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Stack(
|
||||
children: [
|
||||
_activeVideoTrack != null && !_activeVideoTrack!.muted
|
||||
? VideoTrackRenderer(
|
||||
_activeVideoTrack!,
|
||||
fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
|
||||
)
|
||||
: NoContentWidget(
|
||||
userinfo: _userinfoMetadata,
|
||||
isFixed: widget.isFixed,
|
||||
isSpeaking: widget.participant.isSpeaking,
|
||||
),
|
||||
if (_activeVideoTrack != null && !_activeVideoTrack!.muted)
|
||||
VideoTrackRenderer(
|
||||
_activeVideoTrack!,
|
||||
fit: RTCVideoViewObjectFit.RTCVideoViewObjectFitContain,
|
||||
)
|
||||
else
|
||||
Center(
|
||||
child: NoContentWidget(
|
||||
userinfo: _userinfoMetadata,
|
||||
avatarSize: widget.avatarSize,
|
||||
isSpeaking: widget.participant.isSpeaking,
|
||||
),
|
||||
),
|
||||
if (widget.showStatsLayer)
|
||||
Positioned(
|
||||
top: 30,
|
||||
@ -199,44 +287,51 @@ class _RemoteParticipantWidgetState
|
||||
}
|
||||
|
||||
class InteractiveParticipantWidget extends StatelessWidget {
|
||||
final double? width;
|
||||
final double? height;
|
||||
final Color? color;
|
||||
final bool isFixedAvatar;
|
||||
final double? avatarSize;
|
||||
final bool isList;
|
||||
final ParticipantTrack participant;
|
||||
final Function() onTap;
|
||||
final Function? onTap;
|
||||
final EdgeInsets? padding;
|
||||
|
||||
const InteractiveParticipantWidget({
|
||||
super.key,
|
||||
this.width,
|
||||
this.height,
|
||||
this.color,
|
||||
this.isFixedAvatar = false,
|
||||
this.avatarSize,
|
||||
this.isList = false,
|
||||
this.padding,
|
||||
required this.participant,
|
||||
required this.onTap,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GestureDetector(
|
||||
child: Container(
|
||||
width: width,
|
||||
height: height,
|
||||
color: color,
|
||||
child: ParticipantWidget.widgetFor(participant, isFixed: isFixedAvatar),
|
||||
),
|
||||
onTap: () => onTap(),
|
||||
onLongPress: () {
|
||||
if (participant.participant is LocalParticipant) return;
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => ParticipantMenu(
|
||||
participant: participant.participant as RemoteParticipant,
|
||||
videoTrack: participant.videoTrack,
|
||||
isScreenShare: participant.isScreenShare,
|
||||
return Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onTap != null
|
||||
? () {
|
||||
onTap?.call();
|
||||
}
|
||||
: null,
|
||||
onLongPress: () {
|
||||
if (participant.participant is LocalParticipant) return;
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => ParticipantMenu(
|
||||
participant: participant.participant as RemoteParticipant,
|
||||
videoTrack: participant.videoTrack,
|
||||
isScreenShare: participant.isScreenShare,
|
||||
),
|
||||
);
|
||||
},
|
||||
child: Container(
|
||||
child: ParticipantWidget.widgetFor(
|
||||
participant,
|
||||
avatarSize: avatarSize,
|
||||
isList: isList,
|
||||
padding: padding,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user