WGShare.Mobile.Flutter/wgshare/lib/pages/metting/video/meeting_main_video_view.dart

import 'package:agora_rtc_engine/agora_rtc_engine.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:liquid_progress_indicator_v2/liquid_progress_indicator.dart';
import 'package:preload_page_view/preload_page_view.dart';
import 'package:wgshare/common/store/user_store.dart';

import '../../../common/models/meeting_room_user.dart';
import '../../../utils/color_util.dart';
import '../../../view/view_svg_path.dart';
import 'meeting_main_video_logic.dart';
import 'meeting_main_video_state.dart';

class MeetingMainVideoComponent extends StatefulWidget {
  const MeetingMainVideoComponent(
      {super.key,
      required this.rtcEngine,
      required this.channelId,
      required this.isOpenCamera,
      required this.remoteUid,
      required this.onHangUpTap,
      required this.users,
      required this.onPageViewIndexChange});

  final RtcEngine rtcEngine;
  final String channelId;
  final String remoteUid;
  final bool isOpenCamera;
  final List<MeetingRoomUser> users;
  final Function onHangUpTap;
  final Function onPageViewIndexChange;

  @override
  State<MeetingMainVideoComponent> createState() =>
      _MeetingMainVideoComponentState();
}

class _MeetingMainVideoComponentState extends State<MeetingMainVideoComponent>{
  final MeetingMainVideoLogic logic = Get.put(MeetingMainVideoLogic());
  final MeetingMainVideoState state = Get.find<MeetingMainVideoLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        PreloadPageView.builder(
          preloadPagesCount: 2,
          itemCount: 2,
          itemBuilder: (BuildContext context, int position) => returnPage(position),
          controller: PreloadPageController(initialPage: 0),
          onPageChanged: (int position) {
            state.pageIndex.value = position;
            widget.onPageViewIndexChange(position);
          },
        ),

        /// pageview 指示器
        Positioned(
          bottom: 16,
          child: Row(
            children: [
              Container(
                width: 8.w,
                height: 8.h,
                margin: const EdgeInsets.only(right: 6),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: state.pageIndex.value == 0
                        ? ColorUtil.Color_255_255_255
                        : ColorUtil.Color_108_108_108),
              ),
              Container(
                width: 8.w,
                height: 8.h,
                margin: const EdgeInsets.only(left: 6),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: state.pageIndex.value == 1
                        ? ColorUtil.Color_255_255_255
                        : ColorUtil.Color_108_108_108),
              )
            ],
          ),
        ),
      ],
    );
  }

  /// 然后对应页数的界面
  Widget returnPage(int position){
    var pageList = [];
    /// 大屏
    pageList.add(Stack(
      alignment: Alignment.center,
      children: [
        widget.remoteUid != ""
            ? AgoraVideoView(
          controller: VideoViewController(
              rtcEngine: widget.rtcEngine,
              canvas: VideoCanvas(uid: int.tryParse(widget.remoteUid), setupMode: VideoViewSetupMode.videoViewSetupAdd)
          ),
        )
            : const CircularProgressIndicator(),
        Positioned(
          bottom: 110,
          child: GestureDetector(
            child: Image.asset(
              'assets/images/meeting_main_hang_up.png',
              width: 50.w,
              height: 50.h,
            ),
            onTap: () {
              widget.onHangUpTap();
            },
          ),
        ),
        Positioned(
          top: 16,
          right: 16,
          child: Container(
            height: 30,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: ColorUtil.Color_0_0_0_96),
            padding: const EdgeInsets.only(left: 12, right: 12),
            child: Row(
              children: [
                Text(
                  '正在讲话：',
                  style: TextStyle(
                      fontSize: 10.sp,
                      color: ColorUtil.Color_185_184_184),
                ),
                Image.asset(
                  'assets/images/meeting_main_speak2.png',
                  width: 20.w,
                  height: 20.h,
                ),
                Text(
                  '晓晓',
                  style: TextStyle(
                      fontSize: 10.sp,
                      color: ColorUtil.Color_185_184_184),
                )
              ],
            ),
          ),
        ),
      ],
    ));
    /// gridview
    pageList.add(Container(
      color: ColorUtil.Color_57_57_57,
      child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.8,
              crossAxisSpacing: 0),
          itemCount: widget.users.length,
          itemBuilder: (BuildContext ctx, index) {
            return Stack(
              children: [
                widget.users[index].uid ==
                    UserStore.to.userInfoEntity.value!.uid
                    ? AgoraVideoView(
                  controller: VideoViewController(
                      rtcEngine: widget.rtcEngine,
                      canvas: const VideoCanvas(uid: 0, setupMode: VideoViewSetupMode.videoViewSetupAdd)
                  ),
                )
                    : AgoraVideoView(
                  controller: VideoViewController.remote(
                    rtcEngine: widget.rtcEngine,
                    canvas: VideoCanvas(
                        uid: int.tryParse(
                            widget.users[index].uid), setupMode: VideoViewSetupMode.videoViewSetupAdd),
                    connection: RtcConnection(
                        channelId: widget.channelId),
                  ),
                ),
                Positioned(
                  left: 4,
                  bottom: 4,
                  child: Row(
                    children: [
                      Image.asset(
                        'assets/images/meeting_main_own.png',
                        width: 24.w,
                        height: 24.h,
                      ),
                      Container(
                        height: 20,
                        margin: const EdgeInsets.only(left: 4),
                        padding:
                        const EdgeInsets.only(left: 4, right: 4),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(2),
                            color: ColorUtil.Color_0_0_0_96),
                        child: widget.users[index].enableMicr == true
                            ? Row(
                          mainAxisAlignment:
                          MainAxisAlignment.center,
                          crossAxisAlignment:
                          CrossAxisAlignment.center,
                          children: [
                            SizedBox(
                              width: 20.w,
                              height: 20.h,
                              child: LiquidCustomProgressIndicator(
                                  value:
                                  widget.users[index]
                                      .volume ??
                                      0.0,
                                  valueColor:
                                  const AlwaysStoppedAnimation(
                                      ColorUtil
                                          .Color_2_177_136),
                                  backgroundColor:
                                  ColorUtil.Color_255_255_255,
                                  direction: Axis.vertical,
                                  shapePath: ViewSvgPath
                                      .getMicrpphonePath()),
                            ),
                            Text(
                              widget.users[index].userName,
                              style: TextStyle(
                                  fontSize: 12.sp,
                                  color: ColorUtil
                                      .Color_255_255_255),
                            )
                          ],
                        )
                            : Row(
                          mainAxisAlignment:
                          MainAxisAlignment.center,
                          crossAxisAlignment:
                          CrossAxisAlignment.center,
                          children: [
                            Image.asset(
                              'assets/images/meeting_main_microphone_open.png',
                              width: 20.w,
                              height: 20.h,
                            ),
                            Text(
                              widget.users[index].userName,
                              style: TextStyle(
                                  fontSize: 12.sp,
                                  color: ColorUtil
                                      .Color_255_255_255),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ],
            );
          }),
    ));
    return pageList[position];
  }
}