import 'dart:async'; import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:solian/providers/call.dart'; import 'package:solian/theme.dart'; import 'package:solian/widgets/app_bar_leading.dart'; import 'package:solian/widgets/chat/call/call_controls.dart'; import 'package:solian/widgets/chat/call/call_participant.dart'; class CallScreen extends StatefulWidget { const CallScreen({super.key}); @override State createState() => _CallScreenState(); } class _CallScreenState extends State { Timer? timer; String currentDuration = '00:00:00'; String parseDuration() { final ChatCallProvider provider = Get.find(); if (provider.current.value == null) return '00:00:00'; Duration duration = DateTime.now().difference(provider.current.value!.createdAt); String twoDigits(int n) => n.toString().padLeft(2, '0'); String formattedTime = '${twoDigits(duration.inHours)}:' '${twoDigits(duration.inMinutes.remainder(60))}:' '${twoDigits(duration.inSeconds.remainder(60))}'; return formattedTime; } void updateDuration() { setState(() { currentDuration = parseDuration(); }); } @override void initState() { Get.find().setupRoom(); super.initState(); timer = Timer.periodic(const Duration(seconds: 1), (_) => updateDuration()); } @override Widget build(BuildContext context) { final ChatCallProvider provider = Get.find(); return Material( color: Theme.of(context).colorScheme.surface, child: Scaffold( appBar: AppBar( leading: AppBarLeadingButton.adaptive(context), centerTitle: true, toolbarHeight: SolianTheme.toolbarHeight(context), title: RichText( textAlign: TextAlign.center, text: TextSpan(children: [ TextSpan( text: 'call'.tr, style: Theme.of(context).textTheme.titleLarge, ), const TextSpan(text: '\n'), TextSpan( text: currentDuration, style: Theme.of(context).textTheme.bodySmall, ), ]), ), ), body: SafeArea( child: Obx( () => Stack( children: [ Column( children: [ Expanded( child: Container( color: Theme.of(context).colorScheme.surfaceContainer, child: provider.focusTrack.value != null ? InteractiveParticipantWidget( isFixed: false, participant: provider.focusTrack.value!, onTap: () {}, ) : const SizedBox(), ), ), if (provider.room.localParticipant != null) ControlsWidget( provider.room, provider.room.localParticipant!, ), ], ), Positioned( left: 0, right: 0, top: 0, child: SizedBox( height: 128, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: math.max(0, provider.participantTracks.length), itemBuilder: (BuildContext context, int index) { final track = provider.participantTracks[index]; if (track.participant.sid == provider.focusTrack.value?.participant.sid) { return Container(); } return Padding( padding: const EdgeInsets.only(top: 8, left: 8), child: ClipRRect( borderRadius: const BorderRadius.all(Radius.circular(8)), child: InteractiveParticipantWidget( isFixed: true, width: 120, height: 120, color: Theme.of(context).cardColor, participant: track, onTap: () { if (track.participant.sid != provider .focusTrack.value?.participant.sid) { provider.changeFocusTrack(track); } }, ), ), ); }, ), ), ), ], ), ), ), ), ); } @override void deactivate() { timer?.cancel(); timer = null; super.deactivate(); } @override void activate() { timer ??= Timer.periodic( const Duration(seconds: 1), (_) => updateDuration(), ); super.activate(); } }