feat: Closed captions

dogfooding/README.md

@@ -18,6 +18,8 @@ For a more basic example of how to use the Stream Video Flutter package, check o
 
 - **Testing Ground**: Used by Stream developers for feature validation and bug testing.
 
+- **Closed Captions**: Test closed captions during video calls.
+
 ## Getting Started
 
 To set up and run the app, follow these steps:

dogfooding/ios/Flutter/AppFrameworkInfo.plist

@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>11.0</string>
+  <string>12.0</string>
 </dict>
 </plist>

dogfooding/ios/Podfile

@@ -43,7 +43,7 @@ post_install do |installer|
   installer.pods_project.targets.each do |target|
     flutter_additional_ios_build_settings(target)
   end
-  
+
   # fix xcode 15 DT_TOOLCHAIN_DIR - remove after fix oficially - https://github.com/CocoaPods/CocoaPods/issues/12065
   installer.aggregate_targets.each do |target|
     target.xcconfigs.each do |variant, xcconfig|

dogfooding/lib/screens/call_screen.dart

@@ -21,6 +21,7 @@ import 'package:stream_video_flutter/stream_video_flutter.dart' hide User;
 import 'package:flutter_dogfooding/core/repos/user_chat_repository.dart';
 import '../app/user_auth_controller.dart';
 import '../di/injector.dart';
+import '../widgets/closed_captions_widget.dart';
 
 class CallScreen extends StatefulWidget {
   const CallScreen({
@@ -154,10 +155,17 @@ 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),
+                      ],
                     ),
                     if (_moreMenuVisible) ...[
                       GestureDetector(

dogfooding/lib/screens/call_stats_screen.dart

@@ -28,134 +28,180 @@ class CallStatsScreen extends StatelessWidget {
           final subscriberBitrate = state?.subscriberStats?.bitrateKbps;
           final publisherBitrate = state?.publisherStats?.bitrateKbps;
 
-          return Scaffold(
-            appBar: AppBar(
-              title: Text(
-                'Stats',
-                style: textTheme.title3.apply(color: Colors.white),
-              ),
-              centerTitle: true,
-              backgroundColor: Theme.of(context).scaffoldBackgroundColor,
-              actions: [
-                IconButton(
-                  icon: const Icon(
-                    Icons.close,
-                    color: Colors.white,
-                  ),
-                  onPressed: () {
-                    Navigator.of(context).pop();
-                  },
+          return SafeArea(
+            top: false,
+            child: Scaffold(
+              appBar: AppBar(
+                title: Text(
+                  'Stats',
+                  style: textTheme.title3.apply(color: Colors.white),
                 ),
-              ],
-            ),
-            body: SingleChildScrollView(
-              child: Column(
-                children: [
-                  ListTile(
-                    leading: StreamUserAvatar(user: currentUser!),
-                    title: const Text(
-                      'Call ID',
-                      style: TextStyle(color: Colors.white),
-                    ),
-                    subtitle: Text(
-                      call.callCid.value,
-                      style: const TextStyle(color: Colors.white),
+                centerTitle: true,
+                backgroundColor: Theme.of(context).scaffoldBackgroundColor,
+                actions: [
+                  IconButton(
+                    icon: const Icon(
+                      Icons.close,
+                      color: Colors.white,
                     ),
+                    onPressed: () {
+                      Navigator.of(context).pop();
+                    },
                   ),
-                  if (snapshot.hasData) ...[
-                    Padding(
-                      padding: const EdgeInsets.all(16.0),
-                      child: Row(
+                ],
+              ),
+              body: SingleChildScrollView(
+                child: Column(
+                  children: [
+                    ListTile(
+                      leading: StreamUserAvatar(user: currentUser!),
+                      title: const Text(
+                        'Call ID',
+                        style: TextStyle(color: Colors.white),
+                      ),
+                      subtitle: Text(
+                        call.callCid.value,
+                        style: const TextStyle(color: Colors.white),
+                      ),
+                    ),
+                    if (snapshot.hasData) ...[
+                      Padding(
+                        padding: const EdgeInsets.all(16.0),
+                        child: Row(
+                          children: [
+                            const Icon(Icons.network_check,
+                                color: Colors.white),
+                            const SizedBox(width: 8),
+                            Text(
+                              'Call latency',
+                              style:
+                                  textTheme.title3.apply(color: Colors.white),
+                            ),
+                          ],
+                        ),
+                      ),
+                      const Padding(
+                        padding: EdgeInsets.symmetric(horizontal: 16.0),
+                        child: Text(
+                          'Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.',
+                          style: TextStyle(color: Colors.white),
+                        ),
+                      ),
+                      const SizedBox(
+                        height: 16,
+                      ),
+                      SizedBox(
+                        height: 200,
+                        child: StatsLatencyChart(
+                          latencyHistory: state!.latencyHistory,
+                        ),
+                      ),
+                      const SizedBox(
+                        height: 16,
+                      ),
+                      Padding(
+                        padding: const EdgeInsets.all(16.0),
+                        child: Row(
+                          children: [
+                            const Icon(Icons.bar_chart, color: Colors.white),
+                            const SizedBox(width: 8),
+                            Text(
+                              'Call performance',
+                              style:
+                                  textTheme.title3.apply(color: Colors.white),
+                            ),
+                          ],
+                        ),
+                      ),
+                      const Padding(
+                        padding: EdgeInsets.symmetric(horizontal: 16.0),
+                        child: Text(
+                          'Review the key data points below to assess call performance.',
+                          style: TextStyle(color: Colors.white),
+                        ),
+                      ),
+                      const SizedBox(
+                        height: 16,
+                      ),
+                      Row(
                         children: [
-                          const Icon(Icons.network_check, color: Colors.white),
-                          const SizedBox(width: 8),
-                          Text(
-                            'Call latency',
-                            style: textTheme.title3.apply(color: Colors.white),
+                          Expanded(
+                            child: LatencyOrJitterItem(
+                              title: 'Latency',
+                              value: state.publisherStats?.latency ?? 0,
+                            ),
                           ),
                         ],
                       ),
-                    ),
-                    const Padding(
-                      padding: EdgeInsets.symmetric(horizontal: 16.0),
-                      child: Text(
-                        'Very high latency values may reduce call quality, cause lag, and make the call less enjoyable.',
-                        style: TextStyle(color: Colors.white),
+                      Row(
+                        children: [
+                          Expanded(
+                            child: LatencyOrJitterItem(
+                              title: 'Receive jitter',
+                              value: state.subscriberStats?.jitterInMs,
+                            ),
+                          ),
+                          Expanded(
+                            child: LatencyOrJitterItem(
+                              title: 'Publish jitter',
+                              value: state.publisherStats?.jitterInMs,
+                            ),
+                          ),
+                        ],
                       ),
-                    ),
-                    const SizedBox(
-                      height: 16,
-                    ),
-                    SizedBox(
-                      height: 200,
-                      child: StatsLatencyChart(
-                        latencyHistory: state!.latencyHistory,
+                      Row(
+                        children: [
+                          Expanded(
+                            child: StatsItem(
+                              title: 'Publish bitrate',
+                              value: publisherBitrate == null
+                                  ? '--'
+                                  : '${state.publisherStats?.bitrateKbps} Kbps',
+                            ),
+                          ),
+                          Expanded(
+                            child: StatsItem(
+                              title: 'Receive bitrate',
+                              value: subscriberBitrate == null
+                                  ? '--'
+                                  : '${state.subscriberStats?.bitrateKbps} Kbps',
+                            ),
+                          ),
+                        ],
                       ),
-                    ),
-                    const SizedBox(
-                      height: 16,
-                    ),
-                    Padding(
-                      padding: const EdgeInsets.all(16.0),
-                      child: Row(
+                      Row(
                         children: [
-                          const Icon(Icons.bar_chart, color: Colors.white),
-                          const SizedBox(width: 8),
-                          Text(
-                            'Call performance',
-                            style: textTheme.title3.apply(color: Colors.white),
+                          Expanded(
+                            child: StatsItem(
+                              title: 'Publish resolution',
+                              value:
+                                  "${state.publisherStats?.resolution} | ${state.publisherStats?.videoCodec?.join('+')}",
+                            ),
+                          ),
+                          Expanded(
+                            child: StatsItem(
+                              title: 'Reveive resolution',
+                              value:
+                                  "${state.subscriberStats?.resolution} | ${state.subscriberStats?.videoCodec?.join('+')}",
+                            ),
                           ),
                         ],
                       ),
-                    ),
-                    const Padding(
-                      padding: EdgeInsets.symmetric(horizontal: 16.0),
-                      child: Text(
-                        'Review the key data points below to assess call performance.',
-                        style: TextStyle(color: Colors.white),
+                      StatsItem(
+                        title: 'Region',
+                        value: state.localStats?.sfu,
                       ),
-                    ),
-                    const SizedBox(
-                      height: 16,
-                    ),
-                    LatencyOrJitterItem(
-                      title: 'Latency',
-                      value: state.publisherStats?.latency ?? 0,
-                    ),
-                    LatencyOrJitterItem(
-                      title: 'Receive jitter',
-                      value: state.subscriberStats?.jitterInMs,
-                    ),
-                    LatencyOrJitterItem(
-                      title: 'Publish jitter',
-                      value: state.publisherStats?.jitterInMs,
-                    ),
-                    StatsItem(
-                      title: 'Region',
-                      value: state.localStats?.sfu,
-                    ),
-                    StatsItem(
-                      title: 'SDK Version',
-                      value: state.localStats?.sdkVersion,
-                    ),
-                    StatsItem(
-                      title: 'WebRTC Version',
-                      value: state.localStats?.webRtcVersion,
-                    ),
-                    StatsItem(
-                      title: 'Publish bitrate',
-                      value: publisherBitrate == null
-                          ? '--'
-                          : '${state.publisherStats?.bitrateKbps} Kbps',
-                    ),
-                    StatsItem(
-                      title: 'Receive bitrate',
-                      value: subscriberBitrate == null
-                          ? '--'
-                          : '${state.subscriberStats?.bitrateKbps} Kbps',
-                    ),
-                  ]
-                ],
+                      StatsItem(
+                        title: 'SDK Version',
+                        value: state.localStats?.sdkVersion,
+                      ),
+                      StatsItem(
+                        title: 'WebRTC Version',
+                        value: state.localStats?.webRtcVersion,
+                      ),
+                    ]
+                  ],
+                ),
               ),
             ),
           );
@@ -205,7 +251,7 @@ class StatsItem extends StatelessWidget {
     final theme = StreamVideoTheme.of(context);
 
     return Container(
-      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(16),
         color: AppColorPalette.buttonSecondary,
@@ -232,7 +278,6 @@ class StatsItem extends StatelessWidget {
             ),
           ),
           if (trailing != null) ...[
-            const Spacer(),
             trailing!,
           ],
         ],