lib/pages/repeataftercontent/repeat_after_content_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/pages/repeataftercontent/bloc/repeat_after_content_bloc.dart';
import 'package:wow_english/pages/repeataftercontent/widgets/repeat_after_content_dialog.dart';
import 'package:wow_english/route/route.dart';
import '../../common/core/user_util.dart';
import '../../models/read_content_entity.dart';
import '../../utils/toast_util.dart';
import 'widgets/repeat_video_widget.dart';
class RepeatAfterContentPage extends StatelessWidget {
  const RepeatAfterContentPage({super.key, this.videoFollowReadId});
  final String? videoFollowReadId;
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => RepeatAfterContentBloc(videoFollowReadId ?? '')
        ..add(InitBlocEvent())
        ..add(RequestDataEvent()),
      child: _RepeatAfterContentPage(),
    );
  }
}
class _RepeatAfterContentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<RepeatAfterContentBloc, RepeatAfterContentState>(
      listener: (context, state) {
        final bloc = BlocProvider.of<RepeatAfterContentBloc>(context);
        if (state is VoiceRecordStateChange) {
          //录音状态回调
          if (bloc.voiceRecordState == VoiceRecordState.voiceRecordEnd) {
            //声音录制结束
            ReadContentEntity? readContentEntity =
                bloc.entityList?[bloc.currentPlayIndex];
            bloc.add(XSVoiceTestEvent(readContentEntity?.word ?? '', '0',
                UserUtil.getUser()!.id.toString()));
          }
          return;
        }
      },
      child: _repeatAfterContentView(),
    );
  }
  Widget _repeatAfterContentView() =>
      BlocBuilder<RepeatAfterContentBloc, RepeatAfterContentState>(
          builder: (context, state) {
        final bloc = BlocProvider.of<RepeatAfterContentBloc>(context);
        final String videoUrl = bloc.entityList?.first?.videoUrl ?? '';
        return Container(
          color: Colors.white,
          child: SafeArea(
            child: Stack(
              children: [
                ///返回
                Positioned(
                  child: GestureDetector(
                    onTap: () {
                      showDialog<RepeatAfterContentDialog>(
                          context: context,
                          builder: (context) {
                            return RepeatAfterContentDialog(() {
                              popPage();
                            });
                          });
                      // popPage();
                    },
                    child: Image.asset(
                      'back_around'.assetPng,
                      height: 40.h,
                      width: 40.w,
                    ),
                  ),
                ),
                ///左侧视频区
                Positioned(
                  top: 40.h,
                  left: 20.w,
                  child: Container(
                    width: 285.w,
                    height: 299.h,
                    padding:
                        EdgeInsets.symmetric(horizontal: 50.w, vertical: 50.h),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('video_background'.assetPng),
                          fit: BoxFit.fill),
                    ),
                    child: videoUrl.isEmpty
                        ? Container()
                        : RepeatVideoWidget(
                            videoUrl: bloc.entityList?.first?.videoUrl,
                            videoUrls: bloc.entityList ?? [],
                          ),
                  ),
                ),
                ///右侧操作区
                Positioned(
                  top: 40.h,
                  left: 331.w,
                  child: Container(
                    width: 240.w,
                    height: 299.h,
                    padding: EdgeInsets.only(left: 67.w, bottom: 40.h),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('light_ground'.assetPng),
                          fit: BoxFit.fill),
                    ),
                    child: bloc.isRecord
                        ? _buildLongPressWidget()
                        : _buildPlayVideoWidget(),
                  ),
                ),
                ///连接
                Positioned(
                  top: 59.h,
                  left: 274.w,
                  child: Container(
                    width: 87.w,
                    height: 240.h,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('and_book'.assetPng),
                          fit: BoxFit.fill),
                    ),
                  ),
                ),
                ///跟读
                Positioned(
                  top: 16.h,
                  left: 65.w,
                  child: Container(
                    width: 185.w,
                    height: 48.h,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: AssetImage('title_ground'.assetPng),
                          fit: BoxFit.fill),
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      'read title',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white, fontSize: 21.sp),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      });
  ///播放中
  Widget _buildPlayVideoWidget() {
    return BlocBuilder<RepeatAfterContentBloc, RepeatAfterContentState>(
        buildWhen: (previous, current) {
      if (current is ChangeVideoPlayIndexEvent) {
        return true;
      }
      return false;
    }, builder: (context, state) {
      final bloc = BlocProvider.of<RepeatAfterContentBloc>(context);
      return Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Row(
            children: [
              IconButton(
                  onPressed: () => bloc.add(ChangeVideoPlayIndexEvent(false)),
                  icon: Image.asset(
                    'previous'.assetPng,
                    height: 23.h,
                    width: 23.w,
                  )),
              IconButton(
                  onPressed: () => bloc.add(VideoPlayChangeEvent()),
                  icon: Image.asset(
                    'video_pause'.assetPng,
                    height: 50.h,
                    width: 50.h,
                  )),
              IconButton(
                  onPressed: () => bloc.add(ChangeVideoPlayIndexEvent(true)),
                  icon: Image.asset(
                    'next'.assetPng,
                    height: 23.h,
                    width: 23.w,
                  ))
            ],
          ),
          Row(
            children: [
              SizedBox(
                height: 23.h,
                width: 23.w,
              ),
              10.horizontalSpace,
              Column(
                children: [
                  20.verticalSpace,
                  IconButton(
                      onPressed: () {
                        if (bloc.videoPlaying) {
                          showToast('视频正在播放中');
                          return;
                        }
                        bloc.add(VoiceRecordEvent());
                      },
                      icon: Image.asset(
                        'video_record'.assetPng,
                        height: 53.h,
                        width: 53.w,
                      )),
                  Text(
                    '录音',
                    style: TextStyle(
                        color: const Color(0xFF333333), fontSize: 14.sp),
                  )
                ],
              ),
              // Container(
              //   height: 22.h,
              //   width: 37.w,
              //   decoration: BoxDecoration(
              //       color: const Color(0xFF56CE5F),
              //       borderRadius: BorderRadius.circular(10.r)
              //   ),
              //   child: Text(
              //     '1.0x',
              //     textAlign: TextAlign.center,
              //     style: TextStyle(
              //         color: Colors.white,
              //         fontSize: 12.sp
              //     ),
              //   ),
              // )
            ],
          )
        ],
      );
    });
  }
  ///长按录音
  Widget _buildLongPressWidget() =>
      BlocBuilder<RepeatAfterContentBloc, RepeatAfterContentState>(
          builder: (context, state) {
        final bloc = BlocProvider.of<RepeatAfterContentBloc>(context);
        final voiceResult = bloc.voiceTestResult;
        Color color;
        if (int.parse(voiceResult?['overall'].toString() ?? '0') >= 60 ||
            int.parse(voiceResult?['overall'].toString() ?? '0') <= 75) {
          color = const Color(0xFFFF0000);
        } else if (int.parse(voiceResult?['overall'].toString() ?? '0') > 75 ||
            int.parse(voiceResult?['overall'].toString() ?? '0') <= 85) {
          color = const Color(0xFFFFCC00);
        } else {
          color = const Color(0xFF40E04B);
        }
        return Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Offstage(
              offstage:
                  !(bloc.voiceRecordState == VoiceRecordState.voiceRecordEnd &&
                      bloc.xSCheckState == XSVoiceCheckState.result),
              child: Column(
                children: [
                  Offstage(
                    offstage:
                        int.parse(voiceResult?['overall'].toString() ?? '0') >
                            60,
                    child: Image.asset(
                      'sorrow_face'.assetPng,
                      height: 46.h,
                      width: 46.w,
                    ),
                  ),
                  Offstage(
                    offstage:
                        int.parse(voiceResult?['overall'].toString() ?? '0') <
                            60,
                    child: Container(
                      height: 45.h,
                      width: 45.h,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: color,
                          borderRadius: BorderRadius.circular(22.5.r)),
                      child: Text(
                        voiceResult?['overall'].toString() ?? '0',
                        textAlign: TextAlign.center,
                        style: TextStyle(color: Colors.white, fontSize: 17.sp),
                      ),
                    ),
                  ),
                  IconButton(
                      onPressed: () {
                        bloc.add(RecordeVoicePlayEvent());
                      },
                      icon: Image.asset(
                        'voice_record_play'.assetPng,
                        height: 30.h,
                        width: 30.w,
                      )),
                  Text(
                    '录音',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        color: const Color(0xFF666666), fontSize: 11.sp),
                  ),
                ],
              ),
            ),
            Offstage(
              offstage:
                  bloc.voiceRecordState == VoiceRecordState.voiceRecordUnkonw ||
                      bloc.xSCheckState != XSVoiceCheckState.unKnow,
              child: Container(
                color: Colors.grey,
                padding: EdgeInsets.symmetric(vertical: 50.h, horizontal: 50.w),
                child: Text(
                    bloc.voiceRecordState == VoiceRecordState.voiceRecording
                        ? '正在录音'
                        : '录音结束'),
              ),
            ),
            10.verticalSpace,
            GestureDetector(
              onTap: () => bloc.add(VoiceRecordEvent()),
              onLongPressStart: (LongPressStartDetails details) {
                ///开始录音
                bloc.add(StarRecordVoiceEvent());
              },
              onLongPressEnd: (LongPressEndDetails details) {
                ///结束录音
                bloc.add(StopRecordVoiceEvent());
              },
              child: Image.asset(
                'video_record'.assetPng,
                height: 78.h,
                width: 78.w,
              ),
            ),
            Text(
              '按住录音',
              textAlign: TextAlign.center,
              style: TextStyle(color: const Color(0xFF333333), fontSize: 16.sp),
            ),
          ],
        );
      });
}