297 lines
11 KiB
Dart
Executable File
297 lines
11 KiB
Dart
Executable File
import 'package:flutter/material.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import 'package:star_lock/main/lockDetail/videoLog/videoLog/videoLog_entity.dart';
|
|
import 'package:star_lock/tools/dateTool.dart';
|
|
import 'package:video_player/video_player.dart';
|
|
|
|
class ControlsOverlay extends StatelessWidget {
|
|
const ControlsOverlay(
|
|
{Key? key, required this.controller, required this.recordData})
|
|
: super(key: key);
|
|
|
|
static const List<Duration> _exampleCaptionOffsets = <Duration>[
|
|
Duration(seconds: -10),
|
|
Duration(seconds: -3),
|
|
Duration(seconds: -1, milliseconds: -500),
|
|
Duration(milliseconds: -250),
|
|
Duration.zero,
|
|
Duration(milliseconds: 250),
|
|
Duration(seconds: 1, milliseconds: 500),
|
|
Duration(seconds: 3),
|
|
Duration(seconds: 10),
|
|
];
|
|
static const List<double> _examplePlaybackRates = <double>[
|
|
0.25,
|
|
0.5,
|
|
1.0,
|
|
1.5,
|
|
2.0,
|
|
3.0,
|
|
5.0,
|
|
10.0,
|
|
];
|
|
|
|
final VideoPlayerController controller;
|
|
final RecordListData recordData;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
children: <Widget>[
|
|
AnimatedSwitcher(
|
|
duration: const Duration(milliseconds: 50),
|
|
reverseDuration: const Duration(milliseconds: 200),
|
|
child: controller.value.isPlaying
|
|
? const SizedBox.shrink()
|
|
: Container(
|
|
color: Colors.black26,
|
|
child: const Center(
|
|
child:
|
|
// CircularProgressIndicator()
|
|
Icon(
|
|
Icons.play_arrow,
|
|
color: Colors.white,
|
|
size: 60.0,
|
|
semanticLabel: 'Play',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
GestureDetector(
|
|
onTap: () {
|
|
controller.value.isPlaying ? controller.pause() : controller.play();
|
|
},
|
|
),
|
|
|
|
// Align(
|
|
// alignment: Alignment.topLeft,
|
|
// child: PopupMenuButton<Duration>(
|
|
// initialValue: controller.value.captionOffset,
|
|
// tooltip: 'Caption Offset',
|
|
// onSelected: (Duration delay) {
|
|
// controller.setCaptionOffset(delay);
|
|
// },
|
|
// itemBuilder: (BuildContext context) {
|
|
// return <PopupMenuItem<Duration>>[
|
|
// for (final Duration offsetDuration in _exampleCaptionOffsets)
|
|
// PopupMenuItem<Duration>(
|
|
// value: offsetDuration,
|
|
// child: Text('${offsetDuration.inMilliseconds}ms'),
|
|
// )
|
|
// ];
|
|
// },
|
|
// child: Padding(
|
|
// padding: const EdgeInsets.symmetric(
|
|
// // Using less vertical padding as the text is also longer
|
|
// // horizontally, so it feels like it would need more spacing
|
|
// // horizontally (matching the aspect ratio of the video).
|
|
// vertical: 12,
|
|
// horizontal: 16,
|
|
// ),
|
|
// child: Text('${controller.value.captionOffset.inMilliseconds}ms'),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// Align(
|
|
// alignment: Alignment.topRight,
|
|
// child: PopupMenuButton<double>(
|
|
// initialValue: controller.value.playbackSpeed,
|
|
// tooltip: 'Playback speed',
|
|
// onSelected: (double speed) {
|
|
// controller.setPlaybackSpeed(speed);
|
|
// },
|
|
// itemBuilder: (BuildContext context) {
|
|
// return <PopupMenuItem<double>>[
|
|
// for (final double speed in _examplePlaybackRates)
|
|
// PopupMenuItem<double>(
|
|
// value: speed,
|
|
// child: Text('${speed}x'),
|
|
// )
|
|
// ];
|
|
// },
|
|
// child: Padding(
|
|
// padding: const EdgeInsets.symmetric(
|
|
// // Using less vertical padding as the text is also longer
|
|
// // horizontally, so it feels like it would need more spacing
|
|
// // horizontally (matching the aspect ratio of the video).
|
|
// vertical: 12,
|
|
// horizontal: 16,
|
|
// ),
|
|
// child: Text('${controller.value.playbackSpeed}x'),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
|
|
Positioned(
|
|
top: 0.h,
|
|
left: 0.h,
|
|
right: 0.h,
|
|
child: Container(
|
|
margin: EdgeInsets.only(left: 20.w, right: 20.w),
|
|
// color: const Color(0xC83C3F41),
|
|
child: Row(
|
|
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
DateTool()
|
|
.dateToYMDHNString(recordData.operateDate.toString()),
|
|
style: TextStyle(color: Colors.white, fontSize: 20.sp)),
|
|
Expanded(child: SizedBox(width: 10.w)),
|
|
Container(
|
|
width: 50.w,
|
|
height: 50.w,
|
|
padding: EdgeInsets.all(10.w),
|
|
child: Image(
|
|
width: 50.w,
|
|
height: 50.w,
|
|
image: const AssetImage(
|
|
'images/main/icon_lockDetail_monitoringShareVideo_white.png')),
|
|
),
|
|
SizedBox(width: 20.w),
|
|
Container(
|
|
width: 50.w,
|
|
height: 50.w,
|
|
padding: EdgeInsets.all(10.w),
|
|
child: Image(
|
|
width: 50.w,
|
|
height: 50.w,
|
|
image: const AssetImage(
|
|
'images/main/icon_lockDetail_monitoringDownloadVideo_white.png')),
|
|
),
|
|
SizedBox(width: 20.w),
|
|
Container(
|
|
width: 50.w,
|
|
height: 50.w,
|
|
padding: EdgeInsets.all(10.w),
|
|
child: Image(
|
|
width: 50.w,
|
|
height: 50.w,
|
|
image: const AssetImage(
|
|
'images/main/icon_lockDetail_monitoringDeletVideo_white.png')),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: EdgeInsets.only(right: 10.w, left: 10.w),
|
|
color: const Color.fromRGBO(0, 0, 0, 0.5),
|
|
height: 60.h,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
//暂停按钮
|
|
InkWell(
|
|
child: controller.value.isPlaying
|
|
? const Icon(Icons.pause,
|
|
size: 30, color: Color(0xffefefef))
|
|
: const Icon(Icons.play_arrow,
|
|
size: 30, color: Color(0xffefefef)),
|
|
onTap: () {
|
|
// if(controller.value.isBuffering == false){
|
|
// return;
|
|
// }
|
|
controller.value.isPlaying
|
|
? controller.pause()
|
|
: controller.play();
|
|
},
|
|
),
|
|
//当前播放进度
|
|
Text(
|
|
formatString(controller.value.position),
|
|
style: TextStyle(
|
|
fontSize: 22.sp, color: const Color(0xffefefef)),
|
|
),
|
|
//进度条
|
|
Expanded(
|
|
child: Slider(
|
|
activeColor: const Color(0xFFFFFFFF),
|
|
max: controller.value.duration.inMilliseconds
|
|
.truncateToDouble(),
|
|
value: controller.value.position.inMilliseconds
|
|
.truncateToDouble(),
|
|
onChanged: (newRating) {
|
|
controller
|
|
.seekTo(Duration(milliseconds: newRating.truncate()));
|
|
},
|
|
),
|
|
),
|
|
//总视频进度
|
|
Text(
|
|
formatString(controller.value.duration),
|
|
style: TextStyle(
|
|
fontSize: 22.sp, color: const Color(0xffefefef)),
|
|
),
|
|
//倍速下拉菜单
|
|
// DropdownButtonHideUnderline(
|
|
// child: DropdownButton2(
|
|
// hint: Text(
|
|
// _selectedValue,
|
|
// style: TextStyle(
|
|
// fontSize: 18,
|
|
// color:
|
|
// Color(0xffefefef),
|
|
// ),
|
|
// ),
|
|
// items: items
|
|
// .map((item) =>
|
|
// DropdownMenuItem<
|
|
// String>(
|
|
// value: item,
|
|
// child: Text(
|
|
// '${item}x',
|
|
// style:
|
|
// const TextStyle(
|
|
// fontSize:
|
|
// 16,
|
|
// ),
|
|
// ),
|
|
// ))
|
|
// .toList(),
|
|
// // value: _selectedValue,
|
|
// // icon: Visibility(
|
|
// // visible: false,
|
|
// // child: Icon(Icons
|
|
// // .arrow_downward)),
|
|
// onChanged: (value) async {
|
|
// double val =
|
|
// double.parse(value
|
|
// as String);
|
|
// _videoPlayerController
|
|
// .setPlaybackSpeed(val);
|
|
// setState(() {
|
|
// if (val == 1.0) {
|
|
// _selectedValue =
|
|
// '倍速';
|
|
// } else {
|
|
// _selectedValue =
|
|
// '${value as String}x';
|
|
// }
|
|
// });
|
|
// },
|
|
// // dropdownWidth: 100,
|
|
// // buttonWidth: 60,
|
|
// // iconSize: 36,
|
|
// // iconEnabledColor:Colors.white,
|
|
// // buttonPadding:const EdgeInsets.only(left: 10),
|
|
// ),
|
|
// ),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
|
|
String formatString(time) {
|
|
var shortName = time.toString().substring(2, 7);
|
|
return shortName;
|
|
}
|
|
}
|