app-starlock/lib/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
import 'package:star_lock/main/lockDetail/videoLog/videoLogDetail/controlsOverlay_page.dart';
import 'package:star_lock/main/lockDetail/videoLog/videoLogDetail/videoLogDetail_state.dart';
import 'package:star_lock/tools/dateTool.dart';
import 'package:video_player/video_player.dart';

import '../../../../app_settings/app_colors.dart';
import '../../../../tools/titleAppBar.dart';
import 'videoLogDetail_logic.dart';

class VideoLogDetailPage extends StatefulWidget {
  const VideoLogDetailPage({Key? key}) : super(key: key);

  @override
  State<VideoLogDetailPage> createState() => _VideoLogDetailPageState();
}

class _VideoLogDetailPageState extends State<VideoLogDetailPage> {
  final VideoLogDetailLogic logic = Get.put(VideoLogDetailLogic());
  final VideoLogDetailState state = Get.find<VideoLogDetailLogic>().state;

  @override
  void initState() {
    super.initState();

    state.videoController = VideoPlayerController.networkUrl(
      Uri.parse(state.recordData.value.videoUrl!),
      videoPlayerOptions: VideoPlayerOptions(mixWithOthers: true),
    );

    state.videoController.addListener(() {
      setState(() {});
    });
    state.videoController.setLooping(false);
    state.videoController.initialize();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: TitleAppBar(
        barTitle: '视频播放'.tr,
        haveBack: true,
        backgroundColor: AppColors.mainColor,
      ),
      body: Column(
        children: <Widget>[
          AspectRatio(
            aspectRatio: state.videoController.value.aspectRatio,
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: <Widget>[
                VideoPlayer(state.videoController),
                ControlsOverlay(
                  controller: state.videoController,
                  recordData: state.recordData.value,
                ),
                if (state.videoController.value.isPlaying ||
                        state.videoController.value.isBuffering) Container() else VideoProgressIndicator(state.videoController,
                        colors: VideoProgressColors(
                            playedColor: AppColors.mainColor),
                        allowScrubbing: true),
              ],
            ),
          ),
          Container(
              margin: EdgeInsets.only(left: 20.w, top: 15.w),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text(
                          DateTool().dateToYMDString(
                              state.recordData.value.operateDate.toString()),
                          style: TextStyle(fontSize: 20.sp)),
                    ],
                  ),
                  SizedBox(height: 15.h),
                  Row(
                    children: <Widget>[
                      videoItem(true, state.recordData.value),
                    ],
                  ),
                ],
              )),
          Expanded(
              child: ListView.builder(
                  itemCount: state.videoLogList.length,
                  itemBuilder: (BuildContext c, int index) {
                    CloudStorageData item = state.videoLogList[index];
                    return Column(
                      children: <Widget>[
                        Container(
                            margin: EdgeInsets.only(
                                left: 20.w, top: 15.w, bottom: 15.w),
                            child: Row(children: <Widget>[
                              Text(item.date ?? '',
                                  style: TextStyle(fontSize: 20.sp)),
                            ])),
                        mainListView(index, item)
                      ],
                    );
                  }))
          // Expanded(
          //   child: ListView.builder(
          //       itemCount: state.videoLogList.value.length,
          //       itemBuilder: (c, index) {
          //         return Column(
          //           children: [
          //             Container(
          //                 margin: EdgeInsets.only(
          //                     left: 20.w, top: 15.w, bottom: 15.w),
          //                 child: Row(children: [
          //                   Text("2023.10.23",
          //                       style: TextStyle(fontSize: 20.sp)),
          //                 ])),
          //             mainListView()
          //           ],
          //         );
          //       }),
          // ),
        ],
      ),
    );
  }

  double itemW = (1.sw - 15.w * 4) / 3;
  double itemH = (1.sw - 15.w * 4) / 3 + 40.h;
  Widget mainListView(int index, CloudStorageData itemData) {
    return GridView.builder(
      padding: EdgeInsets.only(left: 15.w, right: 15.w),
      itemCount: itemData.recordList!.length,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          //横轴元素个数
          crossAxisCount: 3,
          //纵轴间距
          mainAxisSpacing: 10.w,
          // 横轴间距
          crossAxisSpacing: 15.w,
          //子组件宽高长度比例
          childAspectRatio: itemW / itemH),
      itemBuilder: (BuildContext context, int index) {
        return videoItem(false, itemData.recordList![index]);
      },
    );
  }

  Widget videoItem(bool isPlay, RecordListData itemData) {
    return SizedBox(
      width: itemW,
      height: itemH,
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.circular(10.w),
                child: Stack(children: <Widget>[
                  Container(
                    width: itemW,
                    height: itemW,
                    margin: const EdgeInsets.all(0),
                    color: Colors.white,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10.w),
                      child: Image(
                          fit: BoxFit.cover,
                          image: Image.network(itemData.imagesUrl ??
                                  'images/icon_video_placeholder.jpg')
                              .image),
                    ),
                  ),
                  Positioned(
                      left: 8.w,
                      bottom: 5.h,
                      child: Text(
                          formatString(state.videoController.value.duration),
                          style:
                              TextStyle(color: Colors.grey, fontSize: 20.sp))),
                  Visibility(
                    visible: isPlay,
                    child: Positioned(
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        child: Container(
                          // padding: EdgeInsets.only(right: 10.w, left: 10.w),
                          color: const Color.fromRGBO(0, 0, 0, 0.3),
                          child: Center(
                              child: Text('播放中'.tr,
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 22.sp))),
                        )),
                  )
                ]),
              ),
              SizedBox(height: 5.h),
              Text(
                  DateTool().dateToYMDHNString(itemData.operateDate.toString()),
                  style: TextStyle(fontSize: 18.sp))
            ],
          ),
        ],
      ),
    );
  }

  String formatString(time) {
    String shortName = time.toString().substring(2, 7);
    return shortName;
  }

  @override
  void dispose() {
    super.dispose();
    state.videoController.dispose();
  }
}