✨ Video won't load until click

lib/translations/en_us.dart

@@ -363,4 +363,7 @@ const i18nEnglish = {
   'stickerUploaderNameHint':
       'A human-friendly name given to the user in the sticker selection interface.',
   'readMore': 'Read more',
+  'attachmentUnload': 'Not Loaded',
+  'attachmentUnloadCaption':
+      'In order to save traffic, this attachment is not loaded automatically. Click it to start loading.',
 };

lib/translations/zh_cn.dart

@@ -331,4 +331,6 @@ const i18nSimplifiedChinese = {
   'stickerUploaderName': '贴图名称',
   'stickerUploaderNameHint': '在贴图选择界面提供给用户的人类友好名称。',
   'readMore': '阅读更多',
+  'attachmentUnload': '附件未加载',
+  'attachmentUnloadCaption': '为了节省流量，本附件未自动加载，点一下来开始加载。',
 };

lib/widgets/attachments/attachment_item.dart

@@ -7,6 +7,7 @@ import 'package:media_kit_video/media_kit_video.dart';
 import 'package:solian/models/attachment.dart';
 import 'package:solian/platform.dart';
 import 'package:solian/services.dart';
+import 'package:solian/widgets/sized_container.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
 class AttachmentItem extends StatefulWidget {
@@ -213,8 +214,12 @@ class _AttachmentItemImage extends StatelessWidget {
 
 class _AttachmentItemVideo extends StatefulWidget {
   final Attachment item;
+  final bool autoload;
 
-  const _AttachmentItemVideo({required this.item});
+  const _AttachmentItemVideo({
+    required this.item,
+    this.autoload = false,
+  });
 
   @override
   State<_AttachmentItemVideo> createState() => _AttachmentItemVideoState();
@@ -226,21 +231,64 @@ class _AttachmentItemVideoState extends State<_AttachmentItemVideo> {
   );
   late final _controller = VideoController(_player);
 
+  bool _showContent = false;
+
+  void _startLoad() {
+    _player.open(
+      Media(ServiceFinder.buildUrl('files', '/attachments/${widget.item.id}')),
+      play: false,
+    );
+    setState(() => _showContent = true);
+  }
+
   @override
   void initState() {
     super.initState();
-    _player.open(
-      Media(
-        ServiceFinder.buildUrl('files', '/attachments/${widget.item.id}'),
-      ),
-      play: false,
-    );
   }
 
   @override
   Widget build(BuildContext context) {
+    final ratio = widget.item.metadata?['ratio'] ?? 16 / 9;
+    if (!_showContent) {
+      return GestureDetector(
+        child: AspectRatio(
+          aspectRatio: ratio,
+          child: CenteredContainer(
+            maxWidth: 280,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                const Icon(
+                  Icons.not_started,
+                  color: Colors.white,
+                  size: 32,
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  'attachmentUnload'.tr,
+                  style: const TextStyle(
+                    color: Colors.white,
+                    fontWeight: FontWeight.bold,
+                    fontSize: 16,
+                  ),
+                ),
+                Text(
+                  'attachmentUnloadCaption'.tr,
+                  style: const TextStyle(color: Colors.white),
+                  textAlign: TextAlign.center,
+                ),
+              ],
+            ),
+          ),
+        ),
+        onTap: () {
+          _startLoad();
+        },
+      );
+    }
+
     return Video(
-      aspectRatio: widget.item.metadata?['ratio'] ?? 16 / 9,
+      aspectRatio: ratio,
       controller: _controller,
     );
   }

lib/widgets/attachments/attachment_list.dart

@@ -10,6 +10,7 @@ import 'package:solian/models/attachment.dart';
 import 'package:solian/widgets/attachments/attachment_item.dart';
 import 'package:solian/providers/content/attachment.dart';
 import 'package:solian/widgets/attachments/attachment_fullscreen.dart';
+import 'package:solian/widgets/sized_container.dart';
 
 class AttachmentList extends StatefulWidget {
   final String parentId;
@@ -272,35 +273,33 @@ class AttachmentListEntry extends StatelessWidget {
                 ),
               ),
             if (item!.isMature && !showMature)
-              Center(
+              CenteredContainer(
-                child: Container(
+                maxWidth: 280,
-                  constraints: const BoxConstraints(maxWidth: 280),
+                child: Column(
-                  child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
-                    mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
-                    children: [
+                    const Icon(
-                      const Icon(
+                      Icons.visibility_off,
-                        Icons.visibility_off,
+                      color: Colors.white,
-                        color: Colors.white,
+                      size: 32,
-                        size: 32,
+                    ),
+                    if (!isDense) const SizedBox(height: 8),
+                    if (!isDense)
+                      Text(
+                        'matureContent'.tr,
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontWeight: FontWeight.bold,
+                          fontSize: 16,
+                        ),
                       ),
-                      if (!isDense) const SizedBox(height: 8),
+                    if (!isDense)
-                      if (!isDense)
+                      Text(
-                        Text(
+                        'matureContentCaption'.tr,
-                          'matureContent'.tr,
+                        style: const TextStyle(color: Colors.white),
-                          style: const TextStyle(
+                        textAlign: TextAlign.center,
-                            color: Colors.white,
+                      ),
-                            fontWeight: FontWeight.bold,
+                  ],
-                            fontSize: 16,
-                          ),
-                        ),
-                      if (!isDense)
-                        Text(
-                          'matureContentCaption'.tr,
-                          style: const TextStyle(color: Colors.white),
-                          textAlign: TextAlign.center,
-                        ),
-                    ],
-                  ),
                 ),
               ),
           ],

lib/widgets/sized_container.dart

@@ -16,8 +16,9 @@ class SizedContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     return Align(
       alignment: Alignment.centerLeft,
-      child: Container(
+      child: LimitedBox(
-        constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
+        maxWidth: maxWidth,
+        maxHeight: maxHeight,
         child: child,
       ),
     );
@@ -37,8 +38,8 @@ class CenteredContainer extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Center(
-      child: Container(
+      child: LimitedBox(
-        constraints: BoxConstraints(maxWidth: maxWidth),
+        maxWidth: maxWidth,
         child: child,
       ),
     );

pubspec.yaml

@@ -2,7 +2,7 @@ name: solian
 description: "The Solar Network App"
 publish_to: "none"
 
-version: 1.2.1+6
+version: 1.2.1+8
 
 environment:
   sdk: ">=3.3.4 <4.0.0"