refactor: reply item

lib/common/widgets/overlay_pop.dart

@@ -32,8 +32,9 @@ class OverlayPop extends StatelessWidget {
               NetworkImgLayer(
                 width: imgWidth,
                 height: imgWidth / StyleString.aspectRatio,
-                src: (videoItem as card.Card?)?.smallCoverV5.base.cover ??
+                src: videoItem is card.Card
-                    videoItem.pic,
+                    ? (videoItem as card.Card).smallCoverV5.base.cover
+                    : videoItem.pic,
                 quality: 100,
               ),
               Positioned(
@@ -68,8 +69,9 @@ class OverlayPop extends StatelessWidget {
                 children: [
                   Expanded(
                     child: Text(
-                      (videoItem as card.Card?)?.smallCoverV5.base.title ??
+                      videoItem is card.Card
-                          videoItem.title,
+                          ? (videoItem as card.Card).smallCoverV5.base.title
+                          : videoItem.title,
                     ),
                   ),
                   const SizedBox(width: 4),
@@ -78,8 +80,9 @@ class OverlayPop extends StatelessWidget {
                     onPressed: () async {
                       await DownloadUtils.downloadImg(
                         context,
-                        (videoItem as card.Card?)?.smallCoverV5.base.cover ??
+                        videoItem is card.Card
-                            (videoItem.pic != null
+                            ? (videoItem as card.Card).smallCoverV5.base.cover
+                            : (videoItem.pic != null
                                 ? videoItem.pic as String
                                 : videoItem.cover as String),
                       );

lib/pages/video/detail/reply/controller.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'dart:ffi';
 
 import 'package:PiliPalaX/grpc/app/main/community/reply/v1/reply.pb.dart';
@@ -9,6 +10,9 @@ import 'package:PiliPalaX/models/common/reply_type.dart';
 import 'package:PiliPalaX/utils/feed_back.dart';
 import 'package:easy_debounce/easy_throttle.dart';
 import 'package:fixnum/fixnum.dart' as $fixnum;
+import 'package:flutter/material.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:get/get.dart';
 
 class VideoReplyController extends ReplyController {
   VideoReplyController(
@@ -59,7 +63,16 @@ class VideoReplyController extends ReplyController {
   @override
   bool customHandleResponse(Success response) {
     MainListReply replies = response.response;
+    if (cursor == null) {
+      count.value = replies.subjectControl.count.toInt();
+    }
     cursor = replies.cursor;
+    // replies.replies.clear();
+    // showDialog(
+    //     context: Get.context!,
+    //     builder: (_) => AlertDialog(
+    //           content: SelectableText(jsonEncode(replies.toProto3Json())),
+    //         ));
     if (replies.replies.isNotEmpty) {
       noMore.value = '加载中...';
       if (replies.cursor.isEnd) {
@@ -75,7 +88,7 @@ class VideoReplyController extends ReplyController {
           : <ReplyInfo>[];
       replies.replies.insertAll(0, list);
     }
-    loadingState.value = LoadingState.success(replies.replies);
+    loadingState.value = LoadingState.success(replies);
     return true;
   }
 

lib/pages/video/detail/reply/view.dart

@@ -1,5 +1,6 @@
 import 'package:PiliPalaX/common/widgets/http_error.dart';
 import 'package:PiliPalaX/http/loading_state.dart';
+import 'package:PiliPalaX/pages/video/detail/reply/widgets/reply_item_grpc.dart';
 import 'package:easy_debounce/easy_throttle.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
@@ -128,7 +129,7 @@ class _VideoReplyPanelState extends State<VideoReplyPanel>
           CustomScrollView(
             controller: _videoReplyController.scrollController,
             physics: const AlwaysScrollableScrollPhysics(),
-            key: const PageStorageKey<String>('评论'),
+            // key: const PageStorageKey<String>('评论'),
             slivers: <Widget>[
               SliverPersistentHeader(
                 pinned: false,
@@ -204,7 +205,7 @@ class _VideoReplyPanelState extends State<VideoReplyPanel>
             delegate: SliverChildBuilderDelegate(
               (BuildContext context, index) {
                 double bottom = MediaQuery.of(context).padding.bottom;
-                if (index == loadingState.response.length) {
+                if (index == loadingState.response.replies.length) {
                   return Container(
                     padding: EdgeInsets.only(bottom: bottom),
                     height: bottom + 100,
@@ -221,27 +222,25 @@ class _VideoReplyPanelState extends State<VideoReplyPanel>
                     ),
                   );
                 } else {
-                  return ListTile(
+                  return ReplyItemGrpc(
-                    title: Text(loadingState.response[index].content.message),
+                    replyItem: loadingState.response.replies[index],
+                    showReplyRow: true,
+                    replyLevel: replyLevel,
+                    replyReply: widget.replyReply,
+                    replyType: ReplyType.video,
+                    onReply: () {
+                      _videoReplyController.onReply(
+                        context,
+                        replyItem: loadingState.response.replies[index],
+                        index: index,
+                      );
+                    },
+                    onDelete: _videoReplyController.onMDelete,
+                    upMid: loadingState.response.subjectControl.upMid,
                   );
-                  // return ReplyItem(
-                  //   replyItem: loadingState.response[index],
-                  //   showReplyRow: true,
-                  //   replyLevel: replyLevel,
-                  //   replyReply: widget.replyReply,
-                  //   replyType: ReplyType.video,
-                  //   onReply: () {
-                  //     _videoReplyController.onReply(
-                  //       context,
-                  //       replyItem: loadingState.response[index],
-                  //       index: index,
-                  //     );
-                  //   },
-                  //   onDelete: _videoReplyController.onMDelete,
-                  // );
                 }
               },
-              childCount: loadingState.response.length + 1,
+              childCount: loadingState.response.replies.length + 1,
             ),
           )
         : loadingState is Error

lib/pages/video/detail/reply/widgets/zan_grpc.dart

@@ -0,0 +1,175 @@
+import 'package:PiliPalaX/grpc/app/main/community/reply/v1/reply.pb.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:PiliPalaX/http/reply.dart';
+import 'package:PiliPalaX/models/common/reply_type.dart';
+import 'package:PiliPalaX/models/video/reply/item.dart';
+import 'package:PiliPalaX/utils/feed_back.dart';
+import 'package:fixnum/fixnum.dart' as $fixnum;
+
+class ZanButtonGrpc extends StatefulWidget {
+  const ZanButtonGrpc({
+    super.key,
+    required this.replyItem,
+    this.replyType,
+  });
+
+  final ReplyInfo replyItem;
+  final ReplyType? replyType;
+
+  @override
+  State<ZanButtonGrpc> createState() => _ZanButtonGrpcState();
+}
+
+class _ZanButtonGrpcState extends State<ZanButtonGrpc> {
+  Future onHateReply() async {
+    feedBack();
+    // SmartDialog.showLoading(msg: 'pilipala ...');
+    final int oid = widget.replyItem.oid.toInt();
+    final int rpid = widget.replyItem.id.toInt();
+    // 1 已点赞 2 不喜欢 0 未操作
+    final int action =
+        widget.replyItem.replyControl.action.toInt() != 2 ? 2 : 0;
+    final res = await ReplyHttp.hateReply(
+      type: widget.replyType!.index,
+      action: action == 2 ? 1 : 0,
+      oid: oid,
+      rpid: rpid,
+    );
+    // SmartDialog.dismiss();
+    if (res['status']) {
+      SmartDialog.showToast(
+          widget.replyItem.replyControl.action.toInt() != 2 ? '点踩成功' : '取消踩');
+      if (action == 2) {
+        if (widget.replyItem.replyControl.action.toInt() == 1) {
+          widget.replyItem.like =
+              $fixnum.Int64(widget.replyItem.like.toInt() - 1);
+        }
+        widget.replyItem.replyControl.action = $fixnum.Int64(2);
+      } else {
+        // replyItem.like = replyItem.like! - 1;
+        widget.replyItem.replyControl.action = $fixnum.Int64(0);
+      }
+      setState(() {});
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
+  // 评论点赞
+  Future onLikeReply() async {
+    feedBack();
+    // SmartDialog.showLoading(msg: 'pilipala ...');
+    final int oid = widget.replyItem.oid.toInt();
+    final int rpid = widget.replyItem.id.toInt();
+    // 1 已点赞 2 不喜欢 0 未操作
+    final int action =
+        widget.replyItem.replyControl.action.toInt() != 1 ? 1 : 0;
+    final res = await ReplyHttp.likeReply(
+      type: widget.replyType!.index,
+      oid: oid,
+      rpid: rpid,
+      action: action,
+    );
+    // SmartDialog.dismiss();
+    if (res['status']) {
+      SmartDialog.showToast(
+          widget.replyItem.replyControl.action.toInt() != 1 ? '点赞成功' : '取消赞');
+      if (action == 1) {
+        widget.replyItem.like =
+            $fixnum.Int64(widget.replyItem.like.toInt() + 1);
+        widget.replyItem.replyControl.action = $fixnum.Int64(1);
+      } else {
+        widget.replyItem.like =
+            $fixnum.Int64(widget.replyItem.like.toInt() - 1);
+        widget.replyItem.replyControl.action = $fixnum.Int64(0);
+      }
+      setState(() {});
+    } else {
+      SmartDialog.showToast(res['msg']);
+    }
+  }
+
+  bool isProcessing = false;
+  void Function()? handleState(Future Function() action) {
+    return isProcessing
+        ? null
+        : () async {
+            setState(() => isProcessing = true);
+            await action();
+            setState(() => isProcessing = false);
+          };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData t = Theme.of(context);
+    final Color color = t.colorScheme.outline;
+    final Color primary = t.colorScheme.primary;
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        SizedBox(
+          height: 32,
+          child: TextButton(
+            onPressed: handleState(onHateReply),
+            child: Icon(
+              widget.replyItem.replyControl.action.toInt() == 2
+                  ? FontAwesomeIcons.solidThumbsDown
+                  : FontAwesomeIcons.thumbsDown,
+              size: 16,
+              color: widget.replyItem.replyControl.action.toInt() == 2
+                  ? primary
+                  : color,
+              semanticLabel: widget.replyItem.replyControl.action.toInt() == 2
+                  ? '已踩'
+                  : '点踩',
+            ),
+          ),
+        ),
+        SizedBox(
+          height: 32,
+          child: TextButton(
+            onPressed: handleState(onLikeReply),
+            child: Row(
+              children: [
+                Icon(
+                  widget.replyItem.replyControl.action.toInt() == 1
+                      ? FontAwesomeIcons.solidThumbsUp
+                      : FontAwesomeIcons.thumbsUp,
+                  size: 16,
+                  color: widget.replyItem.replyControl.action.toInt() == 1
+                      ? primary
+                      : color,
+                  semanticLabel:
+                      widget.replyItem.replyControl.action.toInt() == 1
+                          ? '已赞'
+                          : '点赞',
+                ),
+                const SizedBox(width: 4),
+                AnimatedSwitcher(
+                  duration: const Duration(milliseconds: 400),
+                  transitionBuilder:
+                      (Widget child, Animation<double> animation) {
+                    return ScaleTransition(scale: animation, child: child);
+                  },
+                  child: Text(
+                    widget.replyItem.like.toString(),
+                    // key: ValueKey<int>(widget.replyItem!.like!),
+                    style: TextStyle(
+                      color: widget.replyItem.replyControl.action.toInt() == 1
+                          ? primary
+                          : color,
+                      fontSize: t.textTheme.labelSmall!.fontSize,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/video/detail/reply_reply/controller.dart

@@ -20,6 +20,8 @@ class VideoReplyReplyController extends CommonController {
   ReplyInfo? root;
 
   CursorReply? cursor;
+  Rx<Mode> mode = Mode.MAIN_LIST_HOT.obs;
+  RxInt count = (-1).obs;
 
   @override
   void onInit() {
@@ -79,6 +81,9 @@ class VideoReplyReplyController extends CommonController {
   bool customHandleResponse(Success response) {
     DetailListReply replies = response.response;
     root = replies.root;
+    if (cursor == null) {
+      count.value = replies.root.count.toInt();
+    }
     cursor = replies.cursor;
     if (replies.root.replies.isNotEmpty) {
       noMore.value = '加载中...';
@@ -105,7 +110,15 @@ class VideoReplyReplyController extends CommonController {
         root: int.parse(rpid!),
         cursor: CursorReq(
           next: cursor?.next,
-          mode: Mode.MAIN_LIST_HOT, // Mode.MAIN_LIST_TIME // Mode.MAIN_LIST_HOT
+          mode: mode.value,
         ),
       );
+
+  queryBySort() {
+    mode.value = mode.value == Mode.MAIN_LIST_HOT
+        ? Mode.MAIN_LIST_TIME
+        : Mode.MAIN_LIST_HOT;
+    loadingState.value = LoadingState.loading();
+    onRefresh();
+  }
 }

lib/pages/video/detail/reply_reply/view.dart

@@ -1,4 +1,9 @@
+import 'package:PiliPalaX/grpc/app/main/community/reply/v1/reply.pb.dart';
+import 'package:PiliPalaX/grpc/app/main/community/reply/v1/reply.pbenum.dart';
 import 'package:PiliPalaX/http/loading_state.dart';
+import 'package:PiliPalaX/pages/video/detail/reply/view.dart'
+    show MySliverPersistentHeaderDelegate;
+import 'package:PiliPalaX/pages/video/detail/reply/widgets/reply_item_grpc.dart';
 import 'package:PiliPalaX/pages/video/detail/reply_new/reply_page.dart';
 import 'package:easy_debounce/easy_throttle.dart';
 import 'package:flutter/material.dart';
@@ -15,7 +20,7 @@ import 'controller.dart';
 
 class VideoReplyReplyPanel extends StatefulWidget {
   const VideoReplyReplyPanel({
-    this.rcount,
+    // this.rcount,
     this.oid,
     this.rpid,
     this.firstFloor,
@@ -23,10 +28,10 @@ class VideoReplyReplyPanel extends StatefulWidget {
     this.replyType,
     super.key,
   });
-  final dynamic rcount;
+  // final dynamic rcount;
   final int? oid;
   final int? rpid;
-  final ReplyItemModel? firstFloor;
+  final ReplyInfo? firstFloor;
   final String? source;
   final ReplyType? replyType;
 
@@ -85,7 +90,7 @@ class _VideoReplyReplyPanelState extends State<VideoReplyReplyPanel> {
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: <Widget>[
-                  Text('评论详情${widget.rcount > 0 ? '（${widget.rcount}）' : ''}'),
+                  Text('评论详情'),
                   IconButton(
                     tooltip: '关闭',
                     icon: const Icon(Icons.close, size: 20),
@@ -110,14 +115,14 @@ class _VideoReplyReplyPanelState extends State<VideoReplyReplyPanel> {
                   if (widget.firstFloor != null) ...[
                     // const SliverToBoxAdapter(child: SizedBox(height: 10)),
                     SliverToBoxAdapter(
-                      child: ReplyItem(
+                      child: ReplyItemGrpc(
-                        replyItem: widget.firstFloor,
+                        replyItem: widget.firstFloor!,
                         replyLevel: '2',
                         showReplyRow: false,
                         replyType: widget.replyType,
                         needDivider: false,
                         onReply: () {
-                          _onReply(widget.firstFloor);
+                          // _onReply(widget.firstFloor!);
                         },
                       ),
                     ),
@@ -129,6 +134,47 @@ class _VideoReplyReplyPanelState extends State<VideoReplyReplyPanel> {
                       ),
                     ),
                   ],
+                  SliverPersistentHeader(
+                    pinned: false,
+                    floating: true,
+                    delegate: MySliverPersistentHeaderDelegate(
+                      child: Container(
+                        height: 40,
+                        padding: const EdgeInsets.fromLTRB(12, 0, 6, 0),
+                        color: Theme.of(context).colorScheme.surface,
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          children: [
+                            Obx(
+                              () => _videoReplyReplyController.count.value != -1
+                                  ? Text(
+                                      '相关回复共${_videoReplyReplyController.count.value}条',
+                                      style: const TextStyle(fontSize: 13),
+                                    )
+                                  : const SizedBox.shrink(),
+                            ),
+                            SizedBox(
+                              height: 35,
+                              child: TextButton.icon(
+                                onPressed: () =>
+                                    _videoReplyReplyController.queryBySort(),
+                                icon: const Icon(Icons.sort, size: 16),
+                                label: Obx(
+                                  () => Text(
+                                    _videoReplyReplyController.mode.value ==
+                                            Mode.MAIN_LIST_HOT
+                                        ? '按热度'
+                                        : '按时间',
+                                    style: const TextStyle(fontSize: 13),
+                                  ),
+                                ),
+                              ),
+                            )
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
                   Obx(() => _buildBody(
                       _videoReplyReplyController.loadingState.value)),
                 ],
@@ -199,20 +245,16 @@ class _VideoReplyReplyPanelState extends State<VideoReplyReplyPanel> {
               if (widget.firstFloor == null &&
                   _videoReplyReplyController.root != null) ...[
                 SliverToBoxAdapter(
-                  child: ListTile(
+                  child: ReplyItemGrpc(
-                    title:
+                    replyItem: _videoReplyReplyController.root!,
-                        Text(_videoReplyReplyController.root!.content.message),
+                    replyLevel: '2',
-                  ),
+                    showReplyRow: false,
-                  // child: ReplyItem(
+                    replyType: widget.replyType,
-                  //   replyItem: _videoReplyReplyController.root,
+                    needDivider: false,
-                  //   replyLevel: '2',
+                    onReply: () {
-                  //   showReplyRow: false,
-                  //   replyType: widget.replyType,
-                  //   needDivider: false,
-                  //   onReply: () {
                       // _onReply(_videoReplyReplyController.root);
-                  //   },
+                    },
-                  // ),
+                  ),
                 ),
                 SliverToBoxAdapter(
                   child: Divider(
@@ -243,28 +285,24 @@ class _VideoReplyReplyPanelState extends State<VideoReplyReplyPanel> {
                         ),
                       );
                     } else {
-                      return ListTile(
+                      return ReplyItemGrpc(
-                        title:
+                        replyItem: loadingState.response[index],
-                            Text(loadingState.response[index].content.message),
+                        replyLevel: '2',
+                        showReplyRow: false,
+                        replyType: widget.replyType,
+                        onReply: () {
+                          _onReply(loadingState.response[index]);
+                        },
+                        onDelete: (rpid, frpid) {
+                          List list = (_videoReplyReplyController
+                                  .loadingState.value as Success)
+                              .response;
+                          list =
+                              list.where((item) => item.rpid != rpid).toList();
+                          _videoReplyReplyController.loadingState.value =
+                              LoadingState.success(list);
+                        },
                       );
-                      // return ReplyItem(
-                      //   replyItem: loadingState.response[index],
-                      //   replyLevel: '2',
-                      //   showReplyRow: false,
-                      //   replyType: widget.replyType,
-                      //   onReply: () {
-                      //     _onReply(loadingState.response[index]);
-                      //   },
-                      //   onDelete: (rpid, frpid) {
-                      //     List list = (_videoReplyReplyController
-                      //             .loadingState.value as Success)
-                      //         .response;
-                      //     list =
-                      //         list.where((item) => item.rpid != rpid).toList();
-                      //     _videoReplyReplyController.loadingState.value =
-                      //         LoadingState.success(list);
-                      //   },
-                      // );
                     }
                   },
                   childCount: loadingState.response.length + 1,

lib/pages/video/detail/view.dart

@@ -1290,9 +1290,9 @@ class _VideoDetailPageState extends State<VideoDetailPage>
   void replyReply(replyItem) {
     scaffoldKey.currentState?.showBottomSheet(
       (context) => VideoReplyReplyPanel(
-        rcount: replyItem.rcount,
+        // rcount: replyItem.rcount,
-        oid: replyItem.oid,
+        oid: replyItem.oid.toInt(),
-        rpid: replyItem.rpid,
+        rpid: replyItem.id.toInt(),
         firstFloor: replyItem,
         replyType: ReplyType.video,
         source: 'videoDetail',