feat: video block support

.github/workflows/flutter_ci.yaml

@@ -172,7 +172,7 @@ jobs:
             sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
             sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
             sudo apt-get update
-            sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev
+            sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev libmpv-dev mpv
           fi
         shell: bash
 
@@ -272,7 +272,7 @@ jobs:
           sudo wget -qO /etc/apt/trusted.gpg.d/dart_linux_signing_key.asc https://dl-ssl.google.com/linux/linux_signing_key.pub
           sudo wget -qO /etc/apt/sources.list.d/dart_stable.list https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list
           sudo apt-get update
-          sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev
+          sudo apt-get install -y dart curl build-essential libssl-dev clang cmake ninja-build pkg-config libgtk-3-dev keybinder-3.0 libnotify-dev libmpv-dev mpv
         shell: bash
 
       - name: Enable Flutter Desktop
@@ -319,6 +319,12 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
+      - name: Install video dependency
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install libmpv-dev mpv
+        shell: bash
+
       - name: Flutter Integration Test 1
         uses: ./.github/actions/flutter_integration_test
         with:
@@ -343,6 +349,12 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
+      - name: Install video dependency
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install libmpv-dev mpv
+        shell: bash
+
       - name: Flutter Integration Test 2
         uses: ./.github/actions/flutter_integration_test
         with:
@@ -367,6 +379,12 @@ jobs:
       - name: Checkout source code
         uses: actions/checkout@v4
 
+      - name: Install video dependency
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install libmpv-dev mpv
+        shell: bash
+
       - name: Flutter Integration Test 3
         uses: ./.github/actions/flutter_integration_test
         with:

frontend/appflowy_flutter/android/app/src/main/AndroidManifest.xml

@@ -58,4 +58,11 @@
       <action android:name="android.support.customtabs.action.CustomTabsService" />
     </intent>
   </queries>
+  <!--
+    Media access permissions.
+    Android 13 or higher.
+    Used for VideoBlock (edia_kit)
+  -->
+  <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
+  <uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
 </manifest>

frontend/appflowy_flutter/ios/Podfile.lock

@@ -58,6 +58,12 @@ PODS:
     - Flutter
   - keyboard_height_plugin (0.0.1):
     - Flutter
+  - media_kit_libs_ios_video (1.0.4):
+    - Flutter
+  - media_kit_native_event_loop (1.0.0):
+    - Flutter
+  - media_kit_video (0.0.1):
+    - Flutter
   - package_info_plus (0.4.5):
     - Flutter
   - path_provider_foundation (0.0.1):
@@ -66,6 +72,8 @@ PODS:
   - permission_handler_apple (9.3.0):
     - Flutter
   - ReachabilitySwift (5.0.0)
+  - screen_brightness_ios (0.1.0):
+    - Flutter
   - SDWebImage (5.14.2):
     - SDWebImage/Core (= 5.14.2)
   - SDWebImage/Core (5.14.2)
@@ -83,6 +91,10 @@ PODS:
   - Toast (4.0.0)
   - url_launcher_ios (0.0.1):
     - Flutter
+  - volume_controller (0.0.1):
+    - Flutter
+  - wakelock_plus (0.0.1):
+    - Flutter
 
 DEPENDENCIES:
   - app_links (from `.symlinks/plugins/app_links/ios`)
@@ -98,14 +110,20 @@ DEPENDENCIES:
   - integration_test (from `.symlinks/plugins/integration_test/ios`)
   - irondash_engine_context (from `.symlinks/plugins/irondash_engine_context/ios`)
   - keyboard_height_plugin (from `.symlinks/plugins/keyboard_height_plugin/ios`)
+  - media_kit_libs_ios_video (from `.symlinks/plugins/media_kit_libs_ios_video/ios`)
+  - media_kit_native_event_loop (from `.symlinks/plugins/media_kit_native_event_loop/ios`)
+  - media_kit_video (from `.symlinks/plugins/media_kit_video/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - permission_handler_apple (from `.symlinks/plugins/permission_handler_apple/ios`)
+  - screen_brightness_ios (from `.symlinks/plugins/screen_brightness_ios/ios`)
   - share_plus (from `.symlinks/plugins/share_plus/ios`)
   - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
   - sqflite (from `.symlinks/plugins/sqflite/darwin`)
   - super_native_extensions (from `.symlinks/plugins/super_native_extensions/ios`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
+  - volume_controller (from `.symlinks/plugins/volume_controller/ios`)
+  - wakelock_plus (from `.symlinks/plugins/wakelock_plus/ios`)
 
 SPEC REPOS:
   trunk:
@@ -143,12 +161,20 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/irondash_engine_context/ios"
   keyboard_height_plugin:
     :path: ".symlinks/plugins/keyboard_height_plugin/ios"
+  media_kit_libs_ios_video:
+    :path: ".symlinks/plugins/media_kit_libs_ios_video/ios"
+  media_kit_native_event_loop:
+    :path: ".symlinks/plugins/media_kit_native_event_loop/ios"
+  media_kit_video:
+    :path: ".symlinks/plugins/media_kit_video/ios"
   package_info_plus:
     :path: ".symlinks/plugins/package_info_plus/ios"
   path_provider_foundation:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
   permission_handler_apple:
     :path: ".symlinks/plugins/permission_handler_apple/ios"
+  screen_brightness_ios:
+    :path: ".symlinks/plugins/screen_brightness_ios/ios"
   share_plus:
     :path: ".symlinks/plugins/share_plus/ios"
   shared_preferences_foundation:
@@ -159,6 +185,10 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/super_native_extensions/ios"
   url_launcher_ios:
     :path: ".symlinks/plugins/url_launcher_ios/ios"
+  volume_controller:
+    :path: ".symlinks/plugins/volume_controller/ios"
+  wakelock_plus:
+    :path: ".symlinks/plugins/wakelock_plus/ios"
 
 SPEC CHECKSUMS:
   app_links: 5ef33d0d295a89d9d16bb81b0e3b0d5f70d6c875
@@ -176,10 +206,14 @@ SPEC CHECKSUMS:
   integration_test: 13825b8a9334a850581300559b8839134b124670
   irondash_engine_context: 3458bf979b90d616ffb8ae03a150bafe2e860cc9
   keyboard_height_plugin: 43fa8bba20fd5c4fdeed5076466b8b9d43cc6b86
+  media_kit_libs_ios_video: a5fe24bc7875ccd6378a0978c13185e1344651c1
+  media_kit_native_event_loop: e6b2ab20cf0746eb1c33be961fcf79667304fa2a
+  media_kit_video: 5da63f157170e5bf303bf85453b7ef6971218a2e
   package_info_plus: 58f0028419748fad15bf008b270aaa8e54380b1c
   path_provider_foundation: 3784922295ac71e43754bd15e0653ccfd36a147c
   permission_handler_apple: 9878588469a2b0d0fc1e048d9f43605f92e6cec2
   ReachabilitySwift: 985039c6f7b23a1da463388634119492ff86c825
+  screen_brightness_ios: 715ca807df953bf676d339f11464e438143ee625
   SDWebImage: b9a731e1d6307f44ca703b3976d18c24ca561e84
   share_plus: c3fef564749587fc939ef86ffb283ceac0baf9f5
   shared_preferences_foundation: b4c3b4cddf1c21f02770737f147a3f5da9d39695
@@ -188,6 +222,8 @@ SPEC CHECKSUMS:
   SwiftyGif: 6c3eafd0ce693cad58bb63d2b2fb9bacb8552780
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
   url_launcher_ios: bbd758c6e7f9fd7b5b1d4cde34d2b95fcce5e812
+  volume_controller: 531ddf792994285c9b17f9d8a7e4dcdd29b3eae9
+  wakelock_plus: 78ec7c5b202cab7761af8e2b2b3d0671be6c4ae1
 
 PODFILE CHECKSUM: d0d9b4ff572d8695c38eb3f9b490f55cdfc57eca
 

frontend/appflowy_flutter/ios/Runner/Info.plist

@@ -66,5 +66,10 @@
 		</array>
 		<key>UIViewControllerBasedStatusBarAppearance</key>
 		<false />
+		<key>NSAppTransportSecurity</key>
+		<dict>
+			<key>NSAllowsArbitraryLoads</key>
+			<true/>
+		</dict>
 	</dict>
 </plist>

frontend/appflowy_flutter/lib/main.dart

@@ -1,9 +1,12 @@
 import 'package:scaled_app/scaled_app.dart';
 
+import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
+
 import 'startup/startup.dart';
 
 Future<void> main() async {
   ScaledWidgetsFlutterBinding.ensureInitialized(scaleFactor: (_) => 1.0);
+  VideoBlockKit.ensureInitialized();
 
   await runAppFlowy();
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_configuration.dart

@@ -8,6 +8,8 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/mo
 import 'package:appflowy/plugins/document/presentation/editor_plugins/code_block/code_block_copy_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/video/video_menu.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/video/video_placeholder.dart';
 import 'package:appflowy/plugins/document/presentation/editor_style.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor_plugins/appflowy_editor_plugins.dart';
@@ -110,7 +112,7 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
       showMenu: true,
       menuBuilder: (Node node, CustomImageBlockComponentState state) =>
           Positioned(
-        top: 0,
+        top: 10,
         right: 10,
         child: ImageMenu(node: node, state: state),
       ),
@@ -180,7 +182,6 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
       configuration: configuration,
     ),
     CodeBlockKeys.type: CodeBlockComponentBuilder(
-      editorState: editorState,
       configuration: configuration.copyWith(
         textStyle: (_) => styleCustomizer.codeBlockStyleBuilder(),
         placeholderTextStyle: (_) => styleCustomizer.codeBlockStyleBuilder(),
@@ -228,6 +229,16 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
     errorBlockComponentBuilderKey: ErrorBlockComponentBuilder(
       configuration: configuration,
     ),
+    VideoBlockKeys.type: VideoBlockComponentBuilder(
+      configuration: configuration,
+      showMenu: true,
+      menuBuilder: (node, state) => Positioned(
+        top: 10,
+        right: 10,
+        child: VideoMenu(node: node, state: state),
+      ),
+      placeholderBuilder: (node) => VideoPlaceholder(node: node),
+    ),
   };
 
   final builders = {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -382,6 +382,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       emojiMenuItem,
       autoGeneratorMenuItem,
       dateMenuItem,
+      videoBlockItem(LocaleKeys.document_plugins_video_label.tr()),
     ];
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/image/custom_image_block_component.dart

@@ -1,5 +1,7 @@
 import 'dart:io';
 
+import 'package:flutter/material.dart';
+
 import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
@@ -13,7 +15,6 @@ import 'package:appflowy/util/string_extension.dart';
 import 'package:appflowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_editor/appflowy_editor.dart' hide ResizableImage;
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 import 'package:string_validator/string_validator.dart';
@@ -109,10 +110,7 @@ class CustomImageBlockComponentBuilder extends BlockComponentBuilder {
       node: node,
       showActions: showActions(node),
       configuration: configuration,
-      actionBuilder: (context, state) => actionBuilder(
-        blockComponentContext,
-        state,
-      ),
+      actionBuilder: (_, state) => actionBuilder(blockComponentContext, state),
       showMenu: showMenu,
       menuBuilder: menuBuilder,
     );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart

@@ -197,6 +197,15 @@ class _AddBlockMenu extends StatelessWidget {
         },
       ),
 
+      // video
+      TypeOptionMenuItemValue(
+        value: VideoBlockKeys.type,
+        backgroundColor: colorMap[VideoBlockKeys.type]!,
+        text: LocaleKeys.document_plugins_video_label.tr(),
+        icon: FlowySvgs.m_add_block_video_s,
+        onTap: (_, __) => _insertBlock(videoBlockNode()),
+      ),
+
       // date
       TypeOptionMenuItemValue(
         value: ParagraphBlockKeys.type,
@@ -287,6 +296,7 @@ class _AddBlockMenu extends StatelessWidget {
         NumberedListBlockKeys.type: const Color(0xFFA35F94),
         ToggleListBlockKeys.type: const Color(0xFFA35F94),
         ImageBlockKeys.type: const Color(0xFFBAAC74),
+        VideoBlockKeys.type: const Color(0xFFBAAC74),
         MentionBlockKeys.type: const Color(0xFF40AAB8),
         DividerBlockKeys.type: const Color(0xFF4BB299),
         CalloutBlockKeys.type: const Color(0xFF66599B),
@@ -303,6 +313,7 @@ class _AddBlockMenu extends StatelessWidget {
       NumberedListBlockKeys.type: const Color(0xFFFFB9EF),
       ToggleListBlockKeys.type: const Color(0xFFFFB9EF),
       ImageBlockKeys.type: const Color(0xFFFDEDA7),
+      VideoBlockKeys.type: const Color(0xFFFDEDA7),
       MentionBlockKeys.type: const Color(0xFF91EAF5),
       DividerBlockKeys.type: const Color(0xFF98F4CD),
       CalloutBlockKeys.type: const Color(0xFFCABDFF),