compose: Add start video call button in compose

MritunjayTiwari14 · MritunjayTiwari14 · commit 9f3ca6c0c173 · 2025-10-11T19:09:54.000+05:30
Fetch API from zulip server client for jitsi
server url and client video chat service to determine
the service used by organization, added logic for button
diff --git a/assets/icons/ZulipIcons.ttf b/assets/icons/ZulipIcons.ttf
diff --git a/assets/icons/video.svg b/assets/icons/video.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-video-icon lucide-video"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
diff --git a/assets/l10n/app_en.arb b/assets/l10n/app_en.arb
@@ -570,6 +570,10 @@
   "@composeBoxAttachFromCameraTooltip": {
     "description": "Tooltip for compose box icon to attach an image from the camera to the message."
   },
+  "composeBoxAttachFromVideoCallTooltip": "Join video call.",
+    "@composeBoxAttachFromVideoCallTooltip": {
+      "description": "Tooltip for compose box icon to attach a video call url from the jitsi to the message."
+    },
   "composeBoxGenericContentHint": "Type a message",
   "@composeBoxGenericContentHint": {
     "description": "Hint text for content input when sending a message."
diff --git a/lib/api/model/initial_snapshot.dart b/lib/api/model/initial_snapshot.dart
@@ -108,6 +108,10 @@ class InitialSnapshot {
   final bool realmEnableReadReceipts;
 
   final Uri realmIconUrl;
+  
+  final String? realmJitsiServerUrl;
+
+  final int realmVideoChatProvider;
 
   final bool realmPresenceDisabled;
 
@@ -196,6 +200,8 @@ class InitialSnapshot {
     required this.realmUsers,
     required this.realmNonActiveUsers,
     required this.crossRealmBots,
+    required this.realmJitsiServerUrl,
+    required this.realmVideoChatProvider,
   });
 
   factory InitialSnapshot.fromJson(Map<String, dynamic> json) =>
diff --git a/lib/api/model/initial_snapshot.g.dart b/lib/api/model/initial_snapshot.g.dart
diff --git a/lib/generated/l10n/zulip_localizations.dart b/lib/generated/l10n/zulip_localizations.dart
@@ -913,6 +913,12 @@ abstract class ZulipLocalizations {
   /// **'Take a photo'**
   String get composeBoxAttachFromCameraTooltip;
 
+  /// Tooltip for compose box icon to attach a video call url from the jitsi to the message.
+  ///
+  /// In en, this message translates to:
+  /// **'Join video call.'**
+  String get composeBoxAttachFromVideoCallTooltip;
+
   /// Hint text for content input when sending a message.
   ///
   /// In en, this message translates to:
diff --git a/lib/generated/l10n/zulip_localizations_ar.dart b/lib/generated/l10n/zulip_localizations_ar.dart
@@ -481,6 +481,9 @@ class ZulipLocalizationsAr extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Take a photo';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Type a message';
 
diff --git a/lib/generated/l10n/zulip_localizations_de.dart b/lib/generated/l10n/zulip_localizations_de.dart
@@ -497,6 +497,9 @@ class ZulipLocalizationsDe extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Ein Foto aufnehmen';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Eine Nachricht eingeben';
 
diff --git a/lib/generated/l10n/zulip_localizations_en.dart b/lib/generated/l10n/zulip_localizations_en.dart
@@ -481,6 +481,9 @@ class ZulipLocalizationsEn extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Take a photo';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Type a message';
 
diff --git a/lib/generated/l10n/zulip_localizations_fr.dart b/lib/generated/l10n/zulip_localizations_fr.dart
@@ -495,6 +495,9 @@ class ZulipLocalizationsFr extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Take a photo';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Type a message';
 
diff --git a/lib/generated/l10n/zulip_localizations_it.dart b/lib/generated/l10n/zulip_localizations_it.dart
@@ -492,6 +492,9 @@ class ZulipLocalizationsIt extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Fai una foto';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Batti un messaggio';
 
diff --git a/lib/generated/l10n/zulip_localizations_ja.dart b/lib/generated/l10n/zulip_localizations_ja.dart
@@ -469,6 +469,9 @@ class ZulipLocalizationsJa extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => '写真を撮る';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'メッセージを入力';
 
diff --git a/lib/generated/l10n/zulip_localizations_nb.dart b/lib/generated/l10n/zulip_localizations_nb.dart
@@ -481,6 +481,9 @@ class ZulipLocalizationsNb extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Take a photo';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Type a message';
 
diff --git a/lib/generated/l10n/zulip_localizations_pl.dart b/lib/generated/l10n/zulip_localizations_pl.dart
@@ -493,6 +493,9 @@ class ZulipLocalizationsPl extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Zrób zdjęcie';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Wpisz wiadomość';
 
diff --git a/lib/generated/l10n/zulip_localizations_ru.dart b/lib/generated/l10n/zulip_localizations_ru.dart
@@ -495,6 +495,9 @@ class ZulipLocalizationsRu extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Сделать снимок';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Ввести сообщение';
 
diff --git a/lib/generated/l10n/zulip_localizations_sk.dart b/lib/generated/l10n/zulip_localizations_sk.dart
@@ -481,6 +481,9 @@ class ZulipLocalizationsSk extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Take a photo';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Type a message';
 
diff --git a/lib/generated/l10n/zulip_localizations_sl.dart b/lib/generated/l10n/zulip_localizations_sl.dart
@@ -506,6 +506,9 @@ class ZulipLocalizationsSl extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Fotografiraj';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Vnesite sporočilo';
 
diff --git a/lib/generated/l10n/zulip_localizations_uk.dart b/lib/generated/l10n/zulip_localizations_uk.dart
@@ -495,6 +495,9 @@ class ZulipLocalizationsUk extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Зробити фото';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Ввести повідомлення';
 
diff --git a/lib/generated/l10n/zulip_localizations_zh.dart b/lib/generated/l10n/zulip_localizations_zh.dart
@@ -481,6 +481,9 @@ class ZulipLocalizationsZh extends ZulipLocalizations {
   @override
   String get composeBoxAttachFromCameraTooltip => 'Take a photo';
 
+  @override
+  String get composeBoxAttachFromVideoCallTooltip => 'Join video call.';
+
   @override
   String get composeBoxGenericContentHint => 'Type a message';
 
diff --git a/lib/model/realm.dart b/lib/model/realm.dart
@@ -32,6 +32,8 @@ mixin RealmStore on PerAccountStoreBase, UserGroupStore {
   Duration get serverTypingStartedWaitPeriod => Duration(milliseconds: serverTypingStartedWaitPeriodMilliseconds);
   int get serverTypingStartedWaitPeriodMilliseconds;
 
+  String? get realmJitsiServerUrl;
+  int get realmVideoChatProvider;
   //|//////////////////////////////////////////////////////////////
   // Realm settings.
 
@@ -164,6 +166,10 @@ mixin ProxyRealmStore on RealmStore {
   @override
   int get serverTypingStartedWaitPeriodMilliseconds => realmStore.serverTypingStartedWaitPeriodMilliseconds;
   @override
+  String? get realmJitsiServerUrl => realmStore.realmJitsiServerUrl;
+  @override
+  int get realmVideoChatProvider => realmStore.realmVideoChatProvider;
+  @override
   bool get realmAllowMessageEditing => realmStore.realmAllowMessageEditing;
   @override
   GroupSettingValue? get realmCanDeleteAnyMessageGroup => realmStore.realmCanDeleteAnyMessageGroup;
@@ -226,6 +232,8 @@ class RealmStoreImpl extends HasUserGroupStore with RealmStore {
     serverTypingStartedExpiryPeriodMilliseconds = initialSnapshot.serverTypingStartedExpiryPeriodMilliseconds,
     serverTypingStoppedWaitPeriodMilliseconds = initialSnapshot.serverTypingStoppedWaitPeriodMilliseconds,
     serverTypingStartedWaitPeriodMilliseconds = initialSnapshot.serverTypingStartedWaitPeriodMilliseconds,
+    realmJitsiServerUrl = initialSnapshot.realmJitsiServerUrl,
+    realmVideoChatProvider = initialSnapshot.realmVideoChatProvider,
     realmAllowMessageEditing = initialSnapshot.realmAllowMessageEditing,
     realmCanDeleteAnyMessageGroup = initialSnapshot.realmCanDeleteAnyMessageGroup,
     realmCanDeleteOwnMessageGroup = initialSnapshot.realmCanDeleteOwnMessageGroup,
@@ -369,6 +377,10 @@ class RealmStoreImpl extends HasUserGroupStore with RealmStore {
   @override
   final int serverTypingStartedWaitPeriodMilliseconds;
 
+  @override
+  final String? realmJitsiServerUrl;
+  @override
+  final int realmVideoChatProvider;
   @override
   final bool realmAllowMessageEditing;
   @override
diff --git a/lib/widgets/compose_box.dart b/lib/widgets/compose_box.dart
@@ -1031,6 +1031,66 @@ Future<void> _uploadFiles({
   }
 }
 
+class _AttachVideoChatUrlButton extends StatelessWidget {
+  const _AttachVideoChatUrlButton({
+    required this.controller,
+    required this.enabled,
+  });
+
+  final ComposeBoxController controller;
+  final bool enabled;
+
+  static const int jitsi = 1;
+  static const int zoom = 2;
+  static const int googleMeet = 5;
+
+  String _generateJitsiUrl(String serverUrl, String linkText) {
+    final id = List.generate(15, (_) => Random.secure().nextInt(10)).join();
+    return '[$linkText]($serverUrl/$id#config.startWithVideoMuted=false)\n';
+  }
+
+  String? _getMeetingUrl(BuildContext context, int? provider, String? jitsiServerUrl) {
+    if (jitsiServerUrl == null) return null;
+
+    final linkText = ZulipLocalizations.of(context).composeBoxAttachFromVideoCallTooltip;
+
+    switch (provider) {
+      case jitsi: return _generateJitsiUrl(jitsiServerUrl, linkText);
+      case zoom: return 'https://zoom.us/start/meeting';
+      case googleMeet: return 'https://meet.google.com/new';
+      default: return null;
+    }
+  }
+
+  void _handlePress(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
+    final url = _getMeetingUrl(context, store.realmVideoChatProvider, store.realmJitsiServerUrl);
+
+    if (url == null) return;
+
+    final text = controller.content.text;
+    final selection = controller.content.selection;
+
+    controller
+      ..content.text = text.replaceRange(selection.start, selection.end, url)
+      ..content.selection = TextSelection.collapsed(
+        offset: selection.start + url.length);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
+    return SizedBox(
+      width: _composeButtonSize,
+      child: IconButton(
+        icon: Icon(ZulipIcons.video, color: designVariables.foreground.withFadedAlpha(0.5)),
+        tooltip: zulipLocalizations.composeBoxAttachFromVideoCallTooltip,
+        onPressed: enabled ? () => _handlePress(context) : null));
+  }
+}
+
 abstract class _AttachUploadsButton extends StatelessWidget {
   const _AttachUploadsButton({required this.controller, required this.enabled});
 
@@ -1469,6 +1529,7 @@ abstract class _ComposeBoxBody extends StatelessWidget {
       _AttachFileButton(controller: controller, enabled: composeButtonsEnabled),
       _AttachMediaButton(controller: controller, enabled: composeButtonsEnabled),
       _AttachFromCameraButton(controller: controller, enabled: composeButtonsEnabled),
+      _AttachVideoChatUrlButton(controller: controller, enabled: composeButtonsEnabled),
     ];
 
     final topicInput = buildTopicInput();
diff --git a/lib/widgets/icons.dart b/lib/widgets/icons.dart
@@ -198,6 +198,10 @@ abstract final class ZulipIcons {
   /// The Zulip custom icon "unmute".
   static const IconData unmute = IconData(0xf13a, fontFamily: "Zulip Icons");
 
+  /// The Zulip custom icon "video".
+  static const IconData video = IconData(0xf13b, fontFamily: "Zulip Icons");
+
+
   // END GENERATED ICON DATA
 }
 
diff --git a/test/example_data.dart b/test/example_data.dart
@@ -1336,6 +1336,8 @@ InitialSnapshot initialSnapshot({
   RealmWildcardMentionPolicy? realmWildcardMentionPolicy,
   bool? realmMandatoryTopics,
   String? realmName,
+  String? realmJitsiServerUrl,
+  int? realmVideoChatProvider,
   int? realmWaitingPeriodThreshold,
   int? realmMessageContentDeleteLimitSeconds,
   bool? realmAllowMessageEditing,
@@ -1414,6 +1416,8 @@ InitialSnapshot initialSnapshot({
     realmUsers: realmUsers ?? [selfUser],
     realmNonActiveUsers: realmNonActiveUsers ?? [],
     crossRealmBots: crossRealmBots ?? [],
+    realmJitsiServerUrl: realmJitsiServerUrl ?? 'https://meet.jit.si',
+    realmVideoChatProvider: realmVideoChatProvider ?? 0,
   );
 }
 const _initialSnapshot = initialSnapshot;
