tweaks to the CC widget in dogfooding

GetStream · Nov 21, 2024 · e90a190 · e90a190
1 parent 88286a9
commit e90a190
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 38 deletions.
diff --git a/dogfooding/lib/screens/call_screen.dart b/dogfooding/lib/screens/call_screen.dart
@@ -155,12 +155,18 @@ class _CallScreenState extends State<CallScreen> {
               callParticipantsBuilder: (context, call, callState) {
                 return Stack(
                   children: [
-                    StreamCallParticipants(
-                      call: call,
-                      participants: callState.callParticipants,
-                      layoutMode: _currentLayoutMode,
+                    Column(
+                      children: [
+                        Expanded(
+                          child: StreamCallParticipants(
+                            call: call,
+                            participants: callState.callParticipants,
+                            layoutMode: _currentLayoutMode,
+                          ),
+                        ),
+                        ClosedCaptionsWidget(call: call),
+                      ],
                     ),
-                    ClosedCaptionsWidget(call: call),
                     if (_moreMenuVisible) ...[
                       GestureDetector(
                         onTap: () => setState(() => _moreMenuVisible = false),

diff --git a/dogfooding/lib/screens/home_screen.dart b/dogfooding/lib/screens/home_screen.dart
@@ -64,7 +64,13 @@ class _HomeScreenState extends State<HomeScreen> {
     if (callId.isEmpty) callId = generateAlphanumericString(12);
 
     unawaited(showLoadingIndicator(context));
-    _call = _streamVideo.makeCall(callType: kCallType, id: callId);
+    _call = _streamVideo.makeCall(
+        callType: kCallType,
+        id: callId,
+        preferences: DefaultCallPreferences(
+          closedCaptionsQueueSize: 3,
+          closedCaptionsRetentionTimeInMs: 5000,
+        ));
 
     bool isRinging = memberIds.isNotEmpty;
 

diff --git a/dogfooding/lib/widgets/closed_captions_widget.dart b/dogfooding/lib/widgets/closed_captions_widget.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_dogfooding/theme/app_palette.dart';
 import 'package:stream_video_flutter/stream_video_flutter.dart';
 
 class ClosedCaptionsWidget extends StatelessWidget {
@@ -15,45 +16,43 @@ class ClosedCaptionsWidget extends StatelessWidget {
       stream: call.closedCaptions,
       builder: (context, snapshot) {
         if (snapshot.hasData) {
-          final closedCaptions = snapshot.data as List<StreamClosedCaption>;
+          final closedCaptions =
+              (snapshot.data as List<StreamClosedCaption>).reversed.toList();
 
-          if (closedCaptions.isEmpty) {
-            return const SizedBox.shrink();
-          }
-
-          return Positioned(
-            bottom: 45,
-            left: 20,
-            right: 20,
-            child: Container(
-              color: Colors.black.withOpacity(0.5),
-              padding: const EdgeInsets.all(8),
-              child: Column(
-                children: closedCaptions.map((caption) {
-                  return Row(
-                    children: [
-                      Text(
-                        "${caption.user.name}: ",
+          return AnimatedContainer(
+            duration: const Duration(milliseconds: 300),
+            height: !call.state.value.isCaptioning ? 0 : 130,
+            color: Colors.black.withOpacity(0.5),
+            padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+            child: ListView.separated(
+              reverse: true,
+              shrinkWrap: true,
+              itemCount: closedCaptions.length,
+              itemBuilder: (context, index) {
+                final caption = closedCaptions[index];
+                return Opacity(
+                  opacity: closedCaptions.length >= 3 && index >= 2 ? 0.4 : 1,
+                  child: RichText(
+                    text: TextSpan(children: [
+                      TextSpan(
+                        text: "${caption.user.name}: ",
                         style: const TextStyle(
-                          color: Colors.white,
-                          fontWeight: FontWeight.bold,
+                          color: AppColorPalette.secondaryText,
                           fontSize: 16,
                         ),
                       ),
-                      Expanded(
-                        child: Text(
-                          caption.text.trim(),
-                          maxLines: 3,
-                          style: const TextStyle(
-                            color: Colors.white,
-                            fontSize: 16,
-                          ),
+                      TextSpan(
+                        text: caption.text.trim(),
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontSize: 16,
                         ),
                       ),
-                    ],
-                  );
-                }).toList(),
-              ),
+                    ]),
+                  ),
+                );
+              },
+              separatorBuilder: (context, index) => const SizedBox(height: 8),
             ),
           );
         }