Jolie
4 months ago
13 changed files with 1719 additions and 225 deletions
Unified View
Diff Options
-
31lib/controller/message/chat_controller.dart
-
32lib/im/im_manager.dart
-
7lib/pages/message/chat_page.dart
-
182lib/pages/message/image_viewer_page.dart
-
214lib/pages/message/video_player_page.dart
-
34lib/widget/message/chat_input_bar.dart
-
54lib/widget/message/image_item.dart
-
17lib/widget/message/message_item.dart
-
82lib/widget/message/more_options_view.dart
-
547lib/widget/message/video_input_view.dart
-
291lib/widget/message/video_item.dart
-
450pubspec.lock
-
3pubspec.yaml
@ -0,0 +1,182 @@ |
|||||
|
import 'dart:io'; |
||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:extended_image/extended_image.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
|
||||
|
/// 图片查看器页面 |
||||
|
class ImageViewerPage extends StatelessWidget { |
||||
|
final String? imageUrl; |
||||
|
final String? imagePath; |
||||
|
|
||||
|
const ImageViewerPage({ |
||||
|
this.imageUrl, |
||||
|
this.imagePath, |
||||
|
super.key, |
||||
|
}); |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
return Scaffold( |
||||
|
backgroundColor: Colors.black, |
||||
|
body: Stack( |
||||
|
children: [ |
||||
|
// 图片查看区域 |
||||
|
Center( |
||||
|
child: _buildImage(), |
||||
|
), |
||||
|
// 关闭按钮 |
||||
|
Positioned( |
||||
|
top: MediaQuery.of(context).padding.top + 10, |
||||
|
right: 16, |
||||
|
child: GestureDetector( |
||||
|
onTap: () => Get.back(), |
||||
|
child: Container( |
||||
|
padding: const EdgeInsets.all(8), |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.black.withOpacity(0.5), |
||||
|
shape: BoxShape.circle, |
||||
|
), |
||||
|
child: const Icon( |
||||
|
Icons.close, |
||||
|
color: Colors.white, |
||||
|
size: 24, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
Widget _buildImage() { |
||||
|
// 本地图片 |
||||
|
if (imagePath != null && imagePath!.isNotEmpty) { |
||||
|
return ExtendedImage.file( |
||||
|
File(imagePath!), |
||||
|
fit: BoxFit.contain, |
||||
|
mode: ExtendedImageMode.gesture, |
||||
|
initGestureConfigHandler: (state) { |
||||
|
return GestureConfig( |
||||
|
minScale: 0.9, |
||||
|
animationMinScale: 0.7, |
||||
|
maxScale: 3.0, |
||||
|
animationMaxScale: 3.5, |
||||
|
speed: 1.0, |
||||
|
inertialSpeed: 100.0, |
||||
|
initialScale: 1.0, |
||||
|
inPageView: false, |
||||
|
initialAlignment: InitialAlignment.center, |
||||
|
); |
||||
|
}, |
||||
|
loadStateChanged: (state) { |
||||
|
switch (state.extendedImageLoadState) { |
||||
|
case LoadState.loading: |
||||
|
return const Center( |
||||
|
child: CircularProgressIndicator( |
||||
|
color: Colors.white, |
||||
|
), |
||||
|
); |
||||
|
case LoadState.completed: |
||||
|
return null; // 返回 null 显示图片 |
||||
|
case LoadState.failed: |
||||
|
return const Center( |
||||
|
child: Column( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
Icon( |
||||
|
Icons.error_outline, |
||||
|
color: Colors.white, |
||||
|
size: 48, |
||||
|
), |
||||
|
SizedBox(height: 16), |
||||
|
Text( |
||||
|
'图片加载失败', |
||||
|
style: TextStyle(color: Colors.white), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 网络图片 |
||||
|
if (imageUrl != null && imageUrl!.isNotEmpty) { |
||||
|
return ExtendedImage.network( |
||||
|
imageUrl!, |
||||
|
fit: BoxFit.contain, |
||||
|
mode: ExtendedImageMode.gesture, |
||||
|
cache: true, |
||||
|
initGestureConfigHandler: (state) { |
||||
|
return GestureConfig( |
||||
|
minScale: 0.9, |
||||
|
animationMinScale: 0.7, |
||||
|
maxScale: 3.0, |
||||
|
animationMaxScale: 3.5, |
||||
|
speed: 1.0, |
||||
|
inertialSpeed: 100.0, |
||||
|
initialScale: 1.0, |
||||
|
inPageView: false, |
||||
|
initialAlignment: InitialAlignment.center, |
||||
|
); |
||||
|
}, |
||||
|
loadStateChanged: (state) { |
||||
|
switch (state.extendedImageLoadState) { |
||||
|
case LoadState.loading: |
||||
|
return Center( |
||||
|
child: CircularProgressIndicator( |
||||
|
color: Colors.white, |
||||
|
value: state.loadingProgress?.expectedTotalBytes != null |
||||
|
? state.loadingProgress!.cumulativeBytesLoaded / |
||||
|
state.loadingProgress!.expectedTotalBytes! |
||||
|
: null, |
||||
|
), |
||||
|
); |
||||
|
case LoadState.completed: |
||||
|
return null; // 返回 null 显示图片 |
||||
|
case LoadState.failed: |
||||
|
return const Center( |
||||
|
child: Column( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
Icon( |
||||
|
Icons.error_outline, |
||||
|
color: Colors.white, |
||||
|
size: 48, |
||||
|
), |
||||
|
SizedBox(height: 16), |
||||
|
Text( |
||||
|
'图片加载失败', |
||||
|
style: TextStyle(color: Colors.white), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 没有图片时显示错误 |
||||
|
return const Center( |
||||
|
child: Column( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
Icon( |
||||
|
Icons.image_not_supported, |
||||
|
color: Colors.white, |
||||
|
size: 48, |
||||
|
), |
||||
|
SizedBox(height: 16), |
||||
|
Text( |
||||
|
'没有可显示的图片', |
||||
|
style: TextStyle(color: Colors.white), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,214 @@ |
|||||
|
import 'dart:io'; |
||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:flutter/services.dart'; |
||||
|
import 'package:video_player/video_player.dart'; |
||||
|
import 'package:chewie/chewie.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
|
||||
|
/// 视频播放页面 |
||||
|
class VideoPlayerPage extends StatefulWidget { |
||||
|
final String videoPath; |
||||
|
final bool isNetwork; |
||||
|
|
||||
|
const VideoPlayerPage({ |
||||
|
required this.videoPath, |
||||
|
this.isNetwork = false, |
||||
|
super.key, |
||||
|
}); |
||||
|
|
||||
|
@override |
||||
|
State<VideoPlayerPage> createState() => _VideoPlayerPageState(); |
||||
|
} |
||||
|
|
||||
|
class _VideoPlayerPageState extends State<VideoPlayerPage> { |
||||
|
late VideoPlayerController _videoPlayerController; |
||||
|
ChewieController? _chewieController; |
||||
|
bool _isLoading = true; |
||||
|
String? _errorMessage; |
||||
|
|
||||
|
@override |
||||
|
void initState() { |
||||
|
super.initState(); |
||||
|
_initializePlayer(); |
||||
|
} |
||||
|
|
||||
|
Future<void> _initializePlayer() async { |
||||
|
try { |
||||
|
// 创建视频控制器 |
||||
|
if (widget.isNetwork) { |
||||
|
_videoPlayerController = VideoPlayerController.networkUrl( |
||||
|
Uri.parse(widget.videoPath), |
||||
|
); |
||||
|
} else { |
||||
|
_videoPlayerController = VideoPlayerController.file( |
||||
|
File(widget.videoPath), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 初始化视频 |
||||
|
await _videoPlayerController.initialize(); |
||||
|
|
||||
|
// 创建 Chewie 控制器 |
||||
|
_chewieController = ChewieController( |
||||
|
videoPlayerController: _videoPlayerController, |
||||
|
autoPlay: true, |
||||
|
looping: false, |
||||
|
aspectRatio: _videoPlayerController.value.aspectRatio, |
||||
|
// 显示控制栏 |
||||
|
showControls: true, |
||||
|
// 自动隐藏控制栏 |
||||
|
autoInitialize: true, |
||||
|
// 错误提示 |
||||
|
errorBuilder: (context, errorMessage) { |
||||
|
return Center( |
||||
|
child: Column( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
const Icon( |
||||
|
Icons.error_outline, |
||||
|
color: Colors.white, |
||||
|
size: 48, |
||||
|
), |
||||
|
const SizedBox(height: 16), |
||||
|
Text( |
||||
|
'播放失败\n$errorMessage', |
||||
|
style: const TextStyle(color: Colors.white), |
||||
|
textAlign: TextAlign.center, |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
}, |
||||
|
// 允许全屏 |
||||
|
allowFullScreen: true, |
||||
|
// 允许静音 |
||||
|
allowMuting: true, |
||||
|
// 显示播放速度选项 |
||||
|
allowPlaybackSpeedChanging: true, |
||||
|
// 播放速度选项 |
||||
|
playbackSpeeds: const [0.5, 0.75, 1.0, 1.25, 1.5, 2.0], |
||||
|
// 材质进度条颜色 |
||||
|
materialProgressColors: ChewieProgressColors( |
||||
|
playedColor: Theme.of(context).primaryColor, |
||||
|
handleColor: Theme.of(context).primaryColor, |
||||
|
backgroundColor: Colors.grey, |
||||
|
bufferedColor: Colors.grey[300]!, |
||||
|
), |
||||
|
); |
||||
|
|
||||
|
setState(() { |
||||
|
_isLoading = false; |
||||
|
}); |
||||
|
} catch (e) { |
||||
|
setState(() { |
||||
|
_isLoading = false; |
||||
|
_errorMessage = e.toString(); |
||||
|
}); |
||||
|
print('❌ 视频初始化失败: $e'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@override |
||||
|
void dispose() { |
||||
|
_chewieController?.dispose(); |
||||
|
_videoPlayerController.dispose(); |
||||
|
// 恢复系统UI |
||||
|
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge); |
||||
|
super.dispose(); |
||||
|
} |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
return Scaffold( |
||||
|
backgroundColor: Colors.black, |
||||
|
body: SafeArea( |
||||
|
child: Stack( |
||||
|
children: [ |
||||
|
// 视频播放器 |
||||
|
Center( |
||||
|
child: _isLoading |
||||
|
? const CircularProgressIndicator( |
||||
|
valueColor: AlwaysStoppedAnimation<Color>(Colors.white), |
||||
|
) |
||||
|
: _errorMessage != null |
||||
|
? _buildErrorWidget() |
||||
|
: _chewieController != null |
||||
|
? Chewie(controller: _chewieController!) |
||||
|
: const SizedBox.shrink(), |
||||
|
), |
||||
|
// 关闭按钮 |
||||
|
Positioned( |
||||
|
top: 16, |
||||
|
left: 16, |
||||
|
child: Material( |
||||
|
color: Colors.black.withOpacity(0.5), |
||||
|
shape: const CircleBorder(), |
||||
|
child: IconButton( |
||||
|
icon: const Icon( |
||||
|
Icons.close, |
||||
|
color: Colors.white, |
||||
|
size: 28, |
||||
|
), |
||||
|
onPressed: () => Get.back(), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
Widget _buildErrorWidget() { |
||||
|
return Center( |
||||
|
child: Column( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
const Icon( |
||||
|
Icons.error_outline, |
||||
|
color: Colors.white, |
||||
|
size: 64, |
||||
|
), |
||||
|
const SizedBox(height: 16), |
||||
|
const Text( |
||||
|
'视频加载失败', |
||||
|
style: TextStyle( |
||||
|
color: Colors.white, |
||||
|
fontSize: 18, |
||||
|
fontWeight: FontWeight.bold, |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 8), |
||||
|
Padding( |
||||
|
padding: const EdgeInsets.symmetric(horizontal: 32), |
||||
|
child: Text( |
||||
|
_errorMessage ?? '未知错误', |
||||
|
style: const TextStyle( |
||||
|
color: Colors.white70, |
||||
|
fontSize: 14, |
||||
|
), |
||||
|
textAlign: TextAlign.center, |
||||
|
), |
||||
|
), |
||||
|
const SizedBox(height: 24), |
||||
|
ElevatedButton.icon( |
||||
|
onPressed: () { |
||||
|
setState(() { |
||||
|
_isLoading = true; |
||||
|
_errorMessage = null; |
||||
|
}); |
||||
|
_initializePlayer(); |
||||
|
}, |
||||
|
icon: const Icon(Icons.refresh), |
||||
|
label: const Text('重试'), |
||||
|
style: ElevatedButton.styleFrom( |
||||
|
backgroundColor: Colors.white, |
||||
|
foregroundColor: Colors.black, |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,547 @@ |
|||||
|
import 'dart:async'; |
||||
|
import 'dart:io'; |
||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
import 'package:permission_handler/permission_handler.dart'; |
||||
|
import 'package:wechat_assets_picker/wechat_assets_picker.dart'; |
||||
|
import 'package:wechat_camera_picker/wechat_camera_picker.dart'; |
||||
|
import 'package:video_player/video_player.dart'; |
||||
|
|
||||
|
class VideoInputView extends StatefulWidget { |
||||
|
final bool isVisible; |
||||
|
final Function(String filePath, int duration)? onVideoRecorded; |
||||
|
|
||||
|
const VideoInputView({ |
||||
|
required this.isVisible, |
||||
|
this.onVideoRecorded, |
||||
|
super.key, |
||||
|
}); |
||||
|
|
||||
|
@override |
||||
|
State<VideoInputView> createState() => _VideoInputViewState(); |
||||
|
} |
||||
|
|
||||
|
class _VideoInputViewState extends State<VideoInputView> { |
||||
|
Timer? _timer; |
||||
|
int _seconds = 0; |
||||
|
bool _isRecording = false; |
||||
|
bool _isCanceling = false; |
||||
|
Offset _panStartPosition = Offset.zero; |
||||
|
|
||||
|
@override |
||||
|
void dispose() { |
||||
|
_timer?.cancel(); |
||||
|
super.dispose(); |
||||
|
} |
||||
|
|
||||
|
// 格式化时间显示 |
||||
|
String _formatTime(int seconds) { |
||||
|
final minutes = seconds ~/ 60; |
||||
|
final secs = seconds % 60; |
||||
|
return '$minutes:${secs.toString().padLeft(2, '0')}'; |
||||
|
} |
||||
|
|
||||
|
// 开始录制视频 |
||||
|
Future<void> _startRecording() async { |
||||
|
// 请求相机和麦克风权限 |
||||
|
final cameraStatus = await Permission.camera.request(); |
||||
|
final micStatus = await Permission.microphone.request(); |
||||
|
|
||||
|
if (!cameraStatus.isGranted || !micStatus.isGranted) { |
||||
|
Get.snackbar('提示', '需要相机和麦克风权限才能录制视频'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
setState(() { |
||||
|
_isRecording = true; |
||||
|
_seconds = 0; |
||||
|
_isCanceling = false; |
||||
|
_panStartPosition = Offset.zero; |
||||
|
}); |
||||
|
|
||||
|
// 启动计时器 |
||||
|
_timer = Timer.periodic(const Duration(seconds: 1), (timer) { |
||||
|
setState(() { |
||||
|
_seconds++; |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// 停止录制视频 |
||||
|
Future<void> _stopRecording({bool cancel = false}) async { |
||||
|
_timer?.cancel(); |
||||
|
_timer = null; |
||||
|
|
||||
|
if (_isRecording) { |
||||
|
final finalSeconds = _seconds; |
||||
|
|
||||
|
setState(() { |
||||
|
_isRecording = false; |
||||
|
_seconds = 0; |
||||
|
_isCanceling = false; |
||||
|
_panStartPosition = Offset.zero; |
||||
|
}); |
||||
|
|
||||
|
// 如果不是取消，打开相机录制视频 |
||||
|
if (!cancel && finalSeconds > 0) { |
||||
|
_openCameraForVideo(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 打开相机录制视频 |
||||
|
Future<void> _openCameraForVideo() async { |
||||
|
try { |
||||
|
print('🎬 [VideoInputView] 打开相机录制视频'); |
||||
|
|
||||
|
AssetEntity? entity = await CameraPicker.pickFromCamera( |
||||
|
Get.context!, |
||||
|
pickerConfig: const CameraPickerConfig( |
||||
|
enableRecording: true, |
||||
|
onlyEnableRecording: true, |
||||
|
), |
||||
|
); |
||||
|
|
||||
|
print('🎬 [VideoInputView] 录制结果: ${entity != null ? "成功" : "取消"}'); |
||||
|
|
||||
|
if (entity != null) { |
||||
|
print('资源类型: ${entity.type}'); |
||||
|
print('资源时长: ${entity.duration} 秒'); |
||||
|
|
||||
|
final file = await entity.file; |
||||
|
if (file != null) { |
||||
|
print('✅ [VideoInputView] 视频文件获取成功'); |
||||
|
print('文件路径: ${file.path}'); |
||||
|
|
||||
|
// 获取视频时长 |
||||
|
final duration = await _getVideoDuration(file.path); |
||||
|
print('视频时长: $duration 秒'); |
||||
|
widget.onVideoRecorded?.call(file.path, duration); |
||||
|
} |
||||
|
} |
||||
|
} catch (e) { |
||||
|
print('❌ [VideoInputView] 录制视频失败: $e'); |
||||
|
if (Get.isLogEnable) { |
||||
|
Get.log("录制视频失败: $e"); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 从相册选择视频 |
||||
|
Future<void> _pickVideoFromGallery() async { |
||||
|
try { |
||||
|
print('🎬 [VideoInputView] 开始选择视频'); |
||||
|
|
||||
|
List<AssetEntity>? result = await AssetPicker.pickAssets( |
||||
|
Get.context!, |
||||
|
pickerConfig: const AssetPickerConfig( |
||||
|
maxAssets: 1, |
||||
|
requestType: RequestType.video, |
||||
|
specialPickerType: SpecialPickerType.noPreview, |
||||
|
), |
||||
|
); |
||||
|
|
||||
|
print('🎬 [VideoInputView] 选择结果: ${result?.length ?? 0} 个文件'); |
||||
|
|
||||
|
if (result != null && result.isNotEmpty) { |
||||
|
final asset = result.first; |
||||
|
print('资源类型: ${asset.type}'); |
||||
|
print('资源时长: ${asset.duration} 秒'); |
||||
|
|
||||
|
final file = await asset.file; |
||||
|
if (file != null) { |
||||
|
print('✅ [VideoInputView] 视频文件获取成功'); |
||||
|
print('文件路径: ${file.path}'); |
||||
|
print('文件大小: ${file.lengthSync()} 字节'); |
||||
|
|
||||
|
// 获取视频时长（秒） |
||||
|
final duration = asset.duration; |
||||
|
print('准备回调，时长: $duration 秒'); |
||||
|
widget.onVideoRecorded?.call(file.path, duration); |
||||
|
} else { |
||||
|
print('❌ [VideoInputView] 文件为空'); |
||||
|
} |
||||
|
} else { |
||||
|
print('⚠️ [VideoInputView] 用户取消选择或未选择任何文件'); |
||||
|
} |
||||
|
} catch (e) { |
||||
|
print('❌ [VideoInputView] 选择视频失败: $e'); |
||||
|
if (Get.isLogEnable) { |
||||
|
Get.log("选择视频失败: $e"); |
||||
|
} |
||||
|
Get.snackbar('错误', '选择视频失败: $e'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 获取视频时长 |
||||
|
Future<int> _getVideoDuration(String filePath) async { |
||||
|
try { |
||||
|
final controller = VideoPlayerController.file(File(filePath)); |
||||
|
await controller.initialize(); |
||||
|
final duration = controller.value.duration.inSeconds; |
||||
|
await controller.dispose(); |
||||
|
return duration; |
||||
|
} catch (e) { |
||||
|
print('获取视频时长失败: $e'); |
||||
|
return 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 处理长按开始 |
||||
|
void _onLongPressStart(LongPressStartDetails details) { |
||||
|
_panStartPosition = details.globalPosition; |
||||
|
_startRecording(); |
||||
|
} |
||||
|
|
||||
|
// 处理长按结束 |
||||
|
void _onLongPressEnd() { |
||||
|
if (_isCanceling) { |
||||
|
_stopRecording(cancel: true); |
||||
|
} else { |
||||
|
_stopRecording(cancel: false); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 生成视频波形（模拟），计时器嵌入在中间 |
||||
|
Widget _buildWaveformWithTimer() { |
||||
|
const int leftBars = 15; |
||||
|
const int rightBars = 15; |
||||
|
const int purpleBarsPerSide = 2; |
||||
|
|
||||
|
return Container( |
||||
|
height: 30.h, |
||||
|
width: double.infinity, |
||||
|
child: Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
crossAxisAlignment: CrossAxisAlignment.center, |
||||
|
children: [ |
||||
|
// 左侧波形 |
||||
|
...List.generate(leftBars, (index) { |
||||
|
final isNearTimer = index >= leftBars - purpleBarsPerSide; |
||||
|
final isPurple = _isRecording && isNearTimer; |
||||
|
|
||||
|
if (!_isRecording) { |
||||
|
return Container( |
||||
|
width: 2.5.w, |
||||
|
height: 6.h, |
||||
|
margin: EdgeInsets.symmetric(horizontal: 0.8.w), |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.grey.withOpacity(0.3), |
||||
|
borderRadius: BorderRadius.circular(1.25.w), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
final random = (index * 7 + _seconds * 3) % 10; |
||||
|
final isActive = isPurple || random > 5; |
||||
|
final baseHeight = isActive |
||||
|
? (isPurple ? 12 + random : 8 + random) |
||||
|
: 6; |
||||
|
final height = (baseHeight.clamp(6, 20)).h; |
||||
|
final color = isPurple |
||||
|
? const Color(0xFF8359FF) |
||||
|
: isActive |
||||
|
? Colors.grey.withOpacity(0.5) |
||||
|
: Colors.grey.withOpacity(0.3); |
||||
|
|
||||
|
return AnimatedContainer( |
||||
|
duration: const Duration(milliseconds: 100), |
||||
|
curve: Curves.easeOut, |
||||
|
width: 2.5.w, |
||||
|
height: height, |
||||
|
margin: EdgeInsets.symmetric(horizontal: 0.8.w), |
||||
|
decoration: BoxDecoration( |
||||
|
color: color, |
||||
|
borderRadius: BorderRadius.circular(1.25.w), |
||||
|
), |
||||
|
); |
||||
|
}), |
||||
|
// 计时器 |
||||
|
Padding( |
||||
|
padding: EdgeInsets.symmetric(horizontal: 8.w), |
||||
|
child: Text( |
||||
|
_isRecording ? _formatTime(_seconds) : '0:00', |
||||
|
style: TextStyle( |
||||
|
fontSize: 16.sp, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
color: _isRecording ? Colors.black87 : Colors.grey, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
// 右侧波形 |
||||
|
...List.generate(rightBars, (index) { |
||||
|
final isNearTimer = index < purpleBarsPerSide; |
||||
|
final isPurple = _isRecording && isNearTimer; |
||||
|
|
||||
|
if (!_isRecording) { |
||||
|
return Container( |
||||
|
width: 2.5.w, |
||||
|
height: 6.h, |
||||
|
margin: EdgeInsets.symmetric(horizontal: 0.8.w), |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.grey.withOpacity(0.3), |
||||
|
borderRadius: BorderRadius.circular(1.25.w), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
final random = (index * 7 + _seconds * 3) % 10; |
||||
|
final isActive = isPurple || random > 5; |
||||
|
final baseHeight = isActive |
||||
|
? (isPurple ? 12 + random : 8 + random) |
||||
|
: 6; |
||||
|
final height = (baseHeight.clamp(6, 20)).h; |
||||
|
final color = isPurple |
||||
|
? const Color(0xFF8359FF) |
||||
|
: isActive |
||||
|
? Colors.grey.withOpacity(0.5) |
||||
|
: Colors.grey.withOpacity(0.3); |
||||
|
|
||||
|
return AnimatedContainer( |
||||
|
duration: const Duration(milliseconds: 100), |
||||
|
curve: Curves.easeOut, |
||||
|
width: 2.5.w, |
||||
|
height: height, |
||||
|
margin: EdgeInsets.symmetric(horizontal: 0.8.w), |
||||
|
decoration: BoxDecoration( |
||||
|
color: color, |
||||
|
borderRadius: BorderRadius.circular(1.25.w), |
||||
|
), |
||||
|
); |
||||
|
}), |
||||
|
], |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
return AnimatedContainer( |
||||
|
duration: const Duration(milliseconds: 300), |
||||
|
height: widget.isVisible ? 180.h : 0, |
||||
|
color: Colors.white, |
||||
|
child: widget.isVisible |
||||
|
? Container( |
||||
|
width: 1.sw, |
||||
|
color: Colors.white, |
||||
|
padding: EdgeInsets.symmetric(horizontal: 16.w), |
||||
|
child: Stack( |
||||
|
alignment: Alignment.center, |
||||
|
children: [ |
||||
|
// 顶部：视频波形（计时器嵌入在中间）- 只在录音且未取消时显示 |
||||
|
if (_isRecording && !_isCanceling) |
||||
|
Positioned( |
||||
|
top: 0, |
||||
|
left: -16.w, |
||||
|
right: -16.w, |
||||
|
child: _buildWaveformWithTimer(), |
||||
|
), |
||||
|
// 取消按钮（上滑时显示在视频按钮上方居中） |
||||
|
if (_isCanceling) |
||||
|
Positioned( |
||||
|
top: 0, |
||||
|
left: 0, |
||||
|
right: 0, |
||||
|
child: Center( |
||||
|
child: Container( |
||||
|
width: 38.w, |
||||
|
height: 38.w, |
||||
|
decoration: BoxDecoration( |
||||
|
shape: BoxShape.circle, |
||||
|
color: Colors.red.shade400, |
||||
|
boxShadow: [ |
||||
|
BoxShadow( |
||||
|
color: Colors.red.withOpacity(0.3), |
||||
|
blurRadius: 10, |
||||
|
offset: const Offset(0, 5), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
child: Center( |
||||
|
child: Icon( |
||||
|
Icons.close_rounded, |
||||
|
color: Colors.white, |
||||
|
size: 20.w, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
// 中间：左右两个按钮 |
||||
|
Column( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
SizedBox(height: 16.h), |
||||
|
Row( |
||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly, |
||||
|
children: [ |
||||
|
// 左侧：相册按钮 |
||||
|
GestureDetector( |
||||
|
onTap: _pickVideoFromGallery, |
||||
|
child: Column( |
||||
|
children: [ |
||||
|
Container( |
||||
|
width: 70.w, |
||||
|
height: 70.w, |
||||
|
decoration: BoxDecoration( |
||||
|
shape: BoxShape.circle, |
||||
|
gradient: LinearGradient( |
||||
|
colors: const [ |
||||
|
Color(0xFF8359FF), |
||||
|
Color(0xFF3D8AE0), |
||||
|
], |
||||
|
begin: Alignment.topLeft, |
||||
|
end: Alignment.bottomRight, |
||||
|
), |
||||
|
boxShadow: [ |
||||
|
BoxShadow( |
||||
|
color: const Color(0xFF8359FF) |
||||
|
.withOpacity(0.3), |
||||
|
blurRadius: 20, |
||||
|
offset: const Offset(0, 10), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
child: Center( |
||||
|
child: Icon( |
||||
|
Icons.photo_library_rounded, |
||||
|
color: Colors.white, |
||||
|
size: 40.w, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
SizedBox(height: 8.h), |
||||
|
Text( |
||||
|
'相册', |
||||
|
style: TextStyle( |
||||
|
fontSize: 14.sp, |
||||
|
color: Colors.black.withOpacity(0.6), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
// 右侧：拍摄按钮（长按录制） |
||||
|
Listener( |
||||
|
onPointerDown: (details) { |
||||
|
_panStartPosition = details.position; |
||||
|
}, |
||||
|
onPointerMove: (details) { |
||||
|
if (_isRecording) { |
||||
|
if (_panStartPosition == Offset.zero) { |
||||
|
_panStartPosition = details.position; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
final deltaY = |
||||
|
_panStartPosition.dy - details.position.dy; |
||||
|
final shouldCancel = deltaY > 60; |
||||
|
|
||||
|
if (_isCanceling != shouldCancel) { |
||||
|
setState(() { |
||||
|
_isCanceling = shouldCancel; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
onPointerUp: (_) { |
||||
|
if (_isRecording) { |
||||
|
_onLongPressEnd(); |
||||
|
} |
||||
|
}, |
||||
|
child: GestureDetector( |
||||
|
onLongPressStart: _onLongPressStart, |
||||
|
onLongPressEnd: (_) => _onLongPressEnd(), |
||||
|
behavior: HitTestBehavior.opaque, |
||||
|
child: Column( |
||||
|
children: [ |
||||
|
Stack( |
||||
|
alignment: Alignment.center, |
||||
|
children: [ |
||||
|
// 外圈边框（长按时显示，取消时隐藏） |
||||
|
if (_isRecording && !_isCanceling) |
||||
|
Container( |
||||
|
width: 80.w, |
||||
|
height: 80.w, |
||||
|
decoration: BoxDecoration( |
||||
|
shape: BoxShape.circle, |
||||
|
color: Color(0xFF8359FF) |
||||
|
.withOpacity(0.3), |
||||
|
), |
||||
|
), |
||||
|
// 主按钮 |
||||
|
Container( |
||||
|
width: _isRecording ? 70.w : 80.w, |
||||
|
height: _isRecording ? 70.w : 80.w, |
||||
|
decoration: BoxDecoration( |
||||
|
shape: BoxShape.circle, |
||||
|
gradient: _isCanceling |
||||
|
? LinearGradient( |
||||
|
colors: [ |
||||
|
Colors.grey.shade300, |
||||
|
Colors.grey.shade400, |
||||
|
], |
||||
|
begin: Alignment.topLeft, |
||||
|
end: Alignment.bottomRight, |
||||
|
) |
||||
|
: LinearGradient( |
||||
|
colors: const [ |
||||
|
Color(0xFF8359FF), |
||||
|
Color(0xFF3D8AE0), |
||||
|
], |
||||
|
begin: Alignment.topLeft, |
||||
|
end: Alignment.bottomRight, |
||||
|
), |
||||
|
boxShadow: [ |
||||
|
BoxShadow( |
||||
|
color: _isCanceling |
||||
|
? Colors.grey.withOpacity(0.3) |
||||
|
: const Color(0xFF8359FF) |
||||
|
.withOpacity(0.3), |
||||
|
blurRadius: 20, |
||||
|
offset: const Offset(0, 10), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
child: Center( |
||||
|
child: Icon( |
||||
|
Icons.videocam_rounded, |
||||
|
color: Colors.white, |
||||
|
size: 50.w, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
SizedBox(height: 8.h), |
||||
|
Text( |
||||
|
_isCanceling |
||||
|
? '松开取消' |
||||
|
: _isRecording |
||||
|
? '松开发送,上滑取消' |
||||
|
: '长按拍摄', |
||||
|
style: TextStyle( |
||||
|
fontSize: 14.sp, |
||||
|
color: _isCanceling |
||||
|
? Colors.red |
||||
|
: Colors.black.withOpacity(0.6), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
) |
||||
|
: null, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,291 @@ |
|||||
|
import 'dart:io'; |
||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
|
import 'package:im_flutter_sdk/im_flutter_sdk.dart'; |
||||
|
import 'package:get/get.dart'; |
||||
|
import 'package:video_player/video_player.dart'; |
||||
|
import 'package:dating_touchme_app/pages/message/video_player_page.dart'; |
||||
|
|
||||
|
class VideoItem extends StatefulWidget { |
||||
|
final EMVideoMessageBody videoBody; |
||||
|
final bool isSentByMe; |
||||
|
final bool showTime; |
||||
|
final String formattedTime; |
||||
|
|
||||
|
const VideoItem({ |
||||
|
required this.videoBody, |
||||
|
required this.isSentByMe, |
||||
|
required this.showTime, |
||||
|
required this.formattedTime, |
||||
|
super.key, |
||||
|
}); |
||||
|
|
||||
|
@override |
||||
|
State<VideoItem> createState() => _VideoItemState(); |
||||
|
} |
||||
|
|
||||
|
class _VideoItemState extends State<VideoItem> { |
||||
|
VideoPlayerController? _controller; |
||||
|
bool _isInitialized = false; |
||||
|
String? _thumbnailPath; |
||||
|
|
||||
|
@override |
||||
|
void initState() { |
||||
|
super.initState(); |
||||
|
_initializeVideo(); |
||||
|
} |
||||
|
|
||||
|
Future<void> _initializeVideo() async { |
||||
|
try { |
||||
|
// 获取本地视频路径 |
||||
|
final localPath = widget.videoBody.localPath; |
||||
|
final remotePath = widget.videoBody.remotePath; |
||||
|
|
||||
|
print('=== 视频消息调试信息 ==='); |
||||
|
print('本地路径: $localPath'); |
||||
|
print('远程路径: $remotePath'); |
||||
|
print('视频时长: ${widget.videoBody.duration}秒'); |
||||
|
|
||||
|
if (localPath.isNotEmpty && File(localPath).existsSync()) { |
||||
|
// 使用本地文件 |
||||
|
print('使用本地视频文件'); |
||||
|
_controller = VideoPlayerController.file(File(localPath)); |
||||
|
} else if (remotePath != null && remotePath.isNotEmpty) { |
||||
|
// 使用远程URL |
||||
|
print('使用远程视频URL'); |
||||
|
_controller = VideoPlayerController.networkUrl(Uri.parse(remotePath)); |
||||
|
} else { |
||||
|
print('⚠️ 警告: 没有可用的视频路径'); |
||||
|
} |
||||
|
|
||||
|
if (_controller != null) { |
||||
|
await _controller!.initialize(); |
||||
|
setState(() { |
||||
|
_isInitialized = true; |
||||
|
}); |
||||
|
print('✅ 视频初始化成功'); |
||||
|
} |
||||
|
|
||||
|
// 获取缩略图路径 |
||||
|
final thumbLocal = widget.videoBody.thumbnailLocalPath; |
||||
|
final thumbRemote = widget.videoBody.thumbnailRemotePath; |
||||
|
|
||||
|
print('缩略图本地路径: $thumbLocal'); |
||||
|
print('缩略图远程路径: $thumbRemote'); |
||||
|
|
||||
|
if (thumbLocal != null && thumbLocal.isNotEmpty) { |
||||
|
_thumbnailPath = thumbLocal; |
||||
|
print('使用本地缩略图'); |
||||
|
} else if (thumbRemote != null && thumbRemote.isNotEmpty) { |
||||
|
_thumbnailPath = thumbRemote; |
||||
|
print('使用远程缩略图'); |
||||
|
} else { |
||||
|
print('⚠️ 警告: 没有可用的缩略图'); |
||||
|
} |
||||
|
print('======================'); |
||||
|
} catch (e) { |
||||
|
print('❌ 初始化视频失败: $e'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@override |
||||
|
void dispose() { |
||||
|
_controller?.dispose(); |
||||
|
super.dispose(); |
||||
|
} |
||||
|
|
||||
|
// 构建时间标签 |
||||
|
Widget _buildTimeLabel() { |
||||
|
return Container( |
||||
|
alignment: Alignment.center, |
||||
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h), |
||||
|
child: Container( |
||||
|
padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 4.h), |
||||
|
child: Text( |
||||
|
widget.formattedTime, |
||||
|
style: TextStyle(fontSize: 12.sp, color: Colors.grey), |
||||
|
), |
||||
|
), |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 格式化时长 |
||||
|
String _formatDuration(int seconds) { |
||||
|
final minutes = seconds ~/ 60; |
||||
|
final secs = seconds % 60; |
||||
|
return '${minutes.toString().padLeft(2, '0')}:${secs.toString().padLeft(2, '0')}'; |
||||
|
} |
||||
|
|
||||
|
// 播放视频 |
||||
|
void _playVideo() { |
||||
|
// 获取视频路径 |
||||
|
final localPath = widget.videoBody.localPath; |
||||
|
final remotePath = widget.videoBody.remotePath; |
||||
|
|
||||
|
String? videoPath; |
||||
|
bool isNetwork = false; |
||||
|
|
||||
|
// 优先使用本地路径 |
||||
|
if (localPath.isNotEmpty && File(localPath).existsSync()) { |
||||
|
videoPath = localPath; |
||||
|
isNetwork = false; |
||||
|
} else if (remotePath != null && remotePath.isNotEmpty) { |
||||
|
videoPath = remotePath; |
||||
|
isNetwork = true; |
||||
|
} |
||||
|
|
||||
|
if (videoPath != null) { |
||||
|
// 使用 Chewie 播放器页面 |
||||
|
Get.to( |
||||
|
() => VideoPlayerPage( |
||||
|
videoPath: videoPath!, |
||||
|
isNetwork: isNetwork, |
||||
|
), |
||||
|
transition: Transition.fade, |
||||
|
duration: const Duration(milliseconds: 200), |
||||
|
); |
||||
|
} else { |
||||
|
Get.snackbar( |
||||
|
'提示', |
||||
|
'视频路径不可用', |
||||
|
snackPosition: SnackPosition.BOTTOM, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
return Column( |
||||
|
children: [ |
||||
|
if (widget.showTime) _buildTimeLabel(), |
||||
|
Container( |
||||
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 4.h), |
||||
|
child: Row( |
||||
|
mainAxisAlignment: widget.isSentByMe |
||||
|
? MainAxisAlignment.end |
||||
|
: MainAxisAlignment.start, |
||||
|
crossAxisAlignment: CrossAxisAlignment.start, |
||||
|
children: [ |
||||
|
// 视频消息气泡 |
||||
|
GestureDetector( |
||||
|
onTap: _playVideo, |
||||
|
child: Container( |
||||
|
width: 200.w, |
||||
|
height: 150.h, |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.grey[300], |
||||
|
borderRadius: BorderRadius.circular(8.w), |
||||
|
), |
||||
|
child: ClipRRect( |
||||
|
borderRadius: BorderRadius.circular(8.w), |
||||
|
child: Stack( |
||||
|
fit: StackFit.expand, |
||||
|
children: [ |
||||
|
// 背景层：始终显示占位符 |
||||
|
Container( |
||||
|
color: Colors.grey[300], |
||||
|
child: Icon( |
||||
|
Icons.videocam, |
||||
|
size: 48.w, |
||||
|
color: Colors.grey[600], |
||||
|
), |
||||
|
), |
||||
|
// 视频层或缩略图层 |
||||
|
if (_isInitialized && _controller != null) |
||||
|
Center( |
||||
|
child: AspectRatio( |
||||
|
aspectRatio: _controller!.value.aspectRatio, |
||||
|
child: VideoPlayer(_controller!), |
||||
|
), |
||||
|
) |
||||
|
else if (_thumbnailPath != null && _thumbnailPath!.isNotEmpty) |
||||
|
_buildThumbnail(), |
||||
|
// 播放按钮和时长覆盖层 |
||||
|
Container( |
||||
|
decoration: BoxDecoration( |
||||
|
gradient: LinearGradient( |
||||
|
begin: Alignment.topCenter, |
||||
|
end: Alignment.bottomCenter, |
||||
|
colors: [ |
||||
|
Colors.transparent, |
||||
|
Colors.black.withOpacity(0.4), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
child: Column( |
||||
|
mainAxisAlignment: MainAxisAlignment.center, |
||||
|
children: [ |
||||
|
// 播放按钮 |
||||
|
Icon( |
||||
|
Icons.play_circle_filled, |
||||
|
size: 56.w, |
||||
|
color: Colors.white.withOpacity(0.9), |
||||
|
), |
||||
|
SizedBox(height: 8.h), |
||||
|
// 视频时长 |
||||
|
Container( |
||||
|
padding: EdgeInsets.symmetric( |
||||
|
horizontal: 8.w, |
||||
|
vertical: 4.h, |
||||
|
), |
||||
|
decoration: BoxDecoration( |
||||
|
color: Colors.black.withOpacity(0.6), |
||||
|
borderRadius: BorderRadius.circular(4.w), |
||||
|
), |
||||
|
child: Text( |
||||
|
_formatDuration(widget.videoBody.duration ?? 0), |
||||
|
style: TextStyle( |
||||
|
fontSize: 12.sp, |
||||
|
color: Colors.white, |
||||
|
fontWeight: FontWeight.w500, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 构建缩略图 |
||||
|
Widget _buildThumbnail() { |
||||
|
if (_thumbnailPath == null || _thumbnailPath!.isEmpty) { |
||||
|
return const SizedBox.shrink(); |
||||
|
} |
||||
|
|
||||
|
// 判断是本地路径还是远程路径 |
||||
|
if (_thumbnailPath!.startsWith('http')) { |
||||
|
return Image.network( |
||||
|
_thumbnailPath!, |
||||
|
fit: BoxFit.cover, |
||||
|
width: double.infinity, |
||||
|
height: double.infinity, |
||||
|
errorBuilder: (context, error, stackTrace) { |
||||
|
return const SizedBox.shrink(); |
||||
|
}, |
||||
|
); |
||||
|
} else { |
||||
|
final file = File(_thumbnailPath!); |
||||
|
if (file.existsSync()) { |
||||
|
return Image.file( |
||||
|
file, |
||||
|
fit: BoxFit.cover, |
||||
|
width: double.infinity, |
||||
|
height: double.infinity, |
||||
|
); |
||||
|
} else { |
||||
|
return const SizedBox.shrink(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
450
pubspec.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save