✨ Appbar in call

lib/screens/channel/call/call.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:math' as math;
 
 import 'package:flutter/material.dart';
@@ -5,6 +6,7 @@ import 'package:get/get.dart';
 import 'package:solian/providers/content/call.dart';
 import 'package:solian/widgets/chat/call/call_controls.dart';
 import 'package:solian/widgets/chat/call/call_participant.dart';
+import 'package:solian/widgets/prev_page.dart';
 
 class CallScreen extends StatefulWidget {
   const CallScreen({super.key});
@@ -14,6 +16,24 @@ class CallScreen extends StatefulWidget {
 }
 
 class _CallScreenState extends State<CallScreen> {
+  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))}";
+
+    Timer.periodic(const Duration(seconds: 1), (_) {
+      setState(() {});
+    });
+
+    return formattedTime;
+  }
+
   @override
   void initState() {
     Get.find<ChatCallProvider>().setupRoom();
@@ -26,8 +46,25 @@ class _CallScreenState extends State<CallScreen> {
 
     return Material(
       color: Theme.of(context).colorScheme.surface,
-      child: SafeArea(
+      child: Scaffold(
-        top: false,
+        appBar: AppBar(
+          title: RichText(
+            textAlign: TextAlign.center,
+            text: TextSpan(children: [
+              TextSpan(
+                text: 'call'.tr,
+                style: Theme.of(context).textTheme.titleLarge,
+              ),
+              const TextSpan(text: "\n"),
+              TextSpan(
+                text: parseDuration(),
+                style: Theme.of(context).textTheme.bodySmall,
+              ),
+            ]),
+          ),
+          leading: const PrevPageButton(),
+        ),
+        body: SafeArea(
           child: Obx(
             () => Stack(
               children: [
@@ -81,7 +118,8 @@ class _CallScreenState extends State<CallScreen> {
                               participant: track,
                               onTap: () {
                                 if (track.participant.sid !=
-                                  provider.focusTrack.value?.participant.sid) {
+                                    provider
+                                        .focusTrack.value?.participant.sid) {
                                   provider.changeFocusTrack(track);
                                 }
                               },
@@ -96,6 +134,7 @@ class _CallScreenState extends State<CallScreen> {
             ),
           ),
         ),
+      ),
     );
   }
 }

lib/translations.dart

@@ -153,6 +153,7 @@ class SolianMessages extends Translations {
           'messageDeletionConfirm': 'Confirm message deletion',
           'messageDeletionConfirmCaption':
               'Are your sure to delete message @id? This action cannot be undone!',
+          'call': 'Call',
           'callOngoing': 'A call is ongoing...',
           'callJoin': 'Join',
           'callResume': 'Resume',
@@ -322,6 +323,7 @@ class SolianMessages extends Translations {
           'messageActionList': '消息的操作',
           'messageDeletionConfirm': '确认删除消息',
           'messageDeletionConfirmCaption': '你确定要删除消息 @id 吗？该操作不可撤销。',
+          'call': '通话',
           'callOngoing': '一则通话正在进行中…',
           'callJoin': '加入',
           'callResume': '恢复',