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/route/route.dart';
import '../../common/core/app_consts.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())
        ..add(XSVoiceInitEvent(
            {
              'appKey':AppConsts.xsAppKey,
              'service':AppConsts.xsAppService,
              'secretKey':AppConsts.xsAppSecretKey,
            }
        )),
      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: () => 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
              ),
            ),
          ],
        );
      });
}