This commit is contained in:
2025-06-24 02:21:06 +02:00
parent 0d42fad708
commit 39fadc009f
7 changed files with 494 additions and 365 deletions

View File

@ -1,197 +1,111 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cached_video_player_plus/cached_video_player_plus.dart';
import 'package:get/get.dart';
import 'package:f0ckapp/controller/settingscontroller.dart';
class VideoControlsOverlay extends StatefulWidget {
final CachedVideoPlayerPlusController controller;
final VoidCallback onOverlayTap;
final bool muted;
final VoidCallback onMuteToggle;
const VideoControlsOverlay({
super.key,
required this.controller,
required this.onOverlayTap,
required this.muted,
required this.onMuteToggle,
});
const VideoControlsOverlay({super.key, required this.controller});
@override
State<VideoControlsOverlay> createState() => _VideoControlsOverlayState();
}
class _VideoControlsOverlayState extends State<VideoControlsOverlay> {
bool _showSeekIndicator = false;
bool _isRewinding = false;
final SettingsController _settingsController = Get.find();
Timer? _hideTimer;
bool _controlsVisible = false;
bool _isScrubbing = false;
Duration _scrubbingStartPosition = Duration.zero;
double _scrubbingStartDx = 0.0;
Duration _scrubbingSeekPosition = Duration.zero;
@override
void initState() {
super.initState();
widget.controller.addListener(_listener);
}
@override
void dispose() {
_hideTimer?.cancel();
widget.controller.removeListener(_listener);
super.dispose();
}
void _handleDoubleTap(TapDownDetails details) {
final double screenWidth = MediaQuery.of(context).size.width;
final bool isRewind = details.globalPosition.dx < screenWidth / 2;
widget.onOverlayTap();
Future(() {
if (isRewind) {
final Duration newPosition =
widget.controller.value.position - const Duration(seconds: 10);
widget.controller.seekTo(
newPosition < Duration.zero ? Duration.zero : newPosition,
);
} else {
final Duration newPosition =
widget.controller.value.position + const Duration(seconds: 10);
final Duration duration = widget.controller.value.duration;
widget.controller.seekTo(
newPosition > duration ? duration : newPosition,
);
}
});
void _listener() {
if (mounted) {
setState(() {});
}
}
void _startHideTimer() {
_hideTimer?.cancel();
setState(() {
_showSeekIndicator = true;
_isRewinding = isRewind;
});
_hideTimer = Timer(const Duration(milliseconds: 500), () {
setState(() => _showSeekIndicator = false);
_hideTimer = Timer(const Duration(seconds: 5), () {
if (mounted) {
setState(() => _controlsVisible = false);
}
});
}
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: [
GestureDetector(
onTap: widget.onOverlayTap,
onDoubleTapDown: _handleDoubleTap,
child: Container(color: Colors.transparent),
),
AnimatedOpacity(
opacity: _showSeekIndicator ? 1.0 : 0.0,
duration: const Duration(milliseconds: 200),
child: Align(
alignment: _isRewinding
? Alignment.centerLeft
: Alignment.centerRight,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 40.0),
child: Icon(
_isRewinding
? Icons.fast_rewind_rounded
: Icons.fast_forward_rounded,
color: Colors.white70,
size: 60,
),
),
),
),
IconButton(
icon: Icon(
widget.controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
size: 64,
),
onPressed: () {
widget.onOverlayTap();
widget.controller.value.isPlaying
? widget.controller.pause()
: widget.controller.play();
},
),
Positioned(
right: 12,
bottom: 12,
child: IconButton(
icon: Icon(
widget.muted ? Icons.volume_off : Icons.volume_up,
size: 16,
),
onPressed: () {
widget.onOverlayTap();
widget.onMuteToggle();
},
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 0),
child: LayoutBuilder(
builder: (context, constraints) {
return Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 10,
bottom: 12,
child: Text(
'${_formatDuration(widget.controller.value.position)} / ${_formatDuration(widget.controller.value.duration)}',
style: const TextStyle(
color: Colors.white,
fontSize: 12,
),
),
),
Listener(
onPointerDown: (_) {
widget.onOverlayTap();
},
child: VideoProgressIndicator(
widget.controller,
allowScrubbing: true,
padding: const EdgeInsets.only(top: 25.0),
colors: VideoProgressColors(
playedColor: Theme.of(context).colorScheme.primary,
backgroundColor: Theme.of(
context,
).colorScheme.surface.withValues(alpha: 0.5),
bufferedColor: Theme.of(
context,
).colorScheme.secondary.withValues(alpha: 0.5),
),
),
),
if (widget.controller.value.duration.inMilliseconds > 0)
Positioned(
left:
(widget.controller.value.position.inMilliseconds /
widget
.controller
.value
.duration
.inMilliseconds) *
constraints.maxWidth -
6,
bottom: -4,
child: Container(
width: 12,
height: 12,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).colorScheme.primary,
border: Border.all(
color: Theme.of(context).colorScheme.primary,
width: 2,
),
),
),
),
],
);
},
),
),
),
],
);
void _toggleControlsVisibility() {
setState(() => _controlsVisible = !_controlsVisible);
if (_controlsVisible) {
_startHideTimer();
}
}
void _handlePlayPause() {
widget.controller.value.isPlaying
? widget.controller.pause()
: widget.controller.play();
_startHideTimer();
}
void _onHorizontalDragStart(DragStartDetails details) {
if (!widget.controller.value.isInitialized || !_controlsVisible) return;
setState(() {
_isScrubbing = true;
_scrubbingStartPosition = widget.controller.value.position;
_scrubbingStartDx = details.globalPosition.dx;
_scrubbingSeekPosition = widget.controller.value.position;
});
_hideTimer?.cancel();
}
void _onHorizontalDragUpdate(DragUpdateDetails details) {
if (!_isScrubbing) return;
final double delta = details.globalPosition.dx - _scrubbingStartDx;
final int seekMillis =
_scrubbingStartPosition.inMilliseconds + (delta * 300).toInt();
setState(() {
final Duration duration = widget.controller.value.duration;
final Duration seekDuration = Duration(milliseconds: seekMillis);
final Duration clampedSeekDuration = seekDuration < Duration.zero
? Duration.zero
: (seekDuration > duration ? duration : seekDuration);
_scrubbingSeekPosition = clampedSeekDuration;
});
}
void _onHorizontalDragEnd(DragEndDetails details) {
if (!_isScrubbing) return;
widget.controller.seekTo(_scrubbingSeekPosition);
setState(() => _isScrubbing = false);
_startHideTimer();
}
void _onHorizontalDragCancel() {
if (!_isScrubbing) return;
setState(() => _isScrubbing = false);
_startHideTimer();
}
String _formatDuration(Duration? duration) {
@ -199,4 +113,149 @@ class _VideoControlsOverlayState extends State<VideoControlsOverlay> {
String twoDigits(int n) => n.toString().padLeft(2, '0');
return "${twoDigits(duration.inMinutes % 60)}:${twoDigits(duration.inSeconds % 60)}";
}
@override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: _toggleControlsVisibility,
onHorizontalDragStart: _controlsVisible ? _onHorizontalDragStart : null,
onHorizontalDragUpdate: _controlsVisible ? _onHorizontalDragUpdate : null,
onHorizontalDragEnd: _controlsVisible ? _onHorizontalDragEnd : null,
onHorizontalDragCancel: _controlsVisible ? _onHorizontalDragCancel : null,
child: Stack(
alignment: Alignment.center,
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 300),
color: _controlsVisible && !_isScrubbing
? Colors.black.withValues(alpha: 0.5)
: Colors.transparent,
),
AnimatedOpacity(
opacity: _isScrubbing ? 1.0 : 0.0,
duration: const Duration(milliseconds: 200),
child: _buildScrubbingIndicator(),
),
AnimatedOpacity(
opacity: _controlsVisible && !_isScrubbing ? 1.0 : 0.0,
duration: const Duration(milliseconds: 300),
child: IgnorePointer(
ignoring: !_controlsVisible,
child: Stack(
alignment: Alignment.center,
children: [
IconButton(
icon: Icon(
widget.controller.value.isPlaying
? Icons.pause
: Icons.play_arrow,
size: 64,
color: Theme.of(context).colorScheme.primary,
),
onPressed: _handlePlayPause,
),
Align(
alignment: Alignment.bottomCenter,
child: _buildBottomBar(),
),
],
),
),
),
],
),
);
}
Widget _buildScrubbingIndicator() {
final Duration positionChange =
_scrubbingSeekPosition - _scrubbingStartPosition;
final String changeSign = positionChange.isNegative ? '-' : '+';
final String changeText = _formatDuration(positionChange.abs());
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.7),
borderRadius: BorderRadius.circular(8),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_formatDuration(_scrubbingSeekPosition),
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
Text(
'[$changeSign$changeText]',
style: TextStyle(
color: Colors.white.withValues(alpha: 0.8),
fontSize: 16,
),
),
],
),
);
}
Widget _buildBottomBar() {
return Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 8),
child: Row(
children: [
Text(
_formatDuration(widget.controller.value.position),
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: 12,
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: VideoProgressIndicator(
widget.controller,
allowScrubbing: true,
colors: VideoProgressColors(
playedColor: Theme.of(context).colorScheme.primary,
backgroundColor: Colors.white.withValues(alpha: 0.3),
bufferedColor: Colors.white.withValues(alpha: 0.6),
),
),
),
),
Text(
_formatDuration(widget.controller.value.duration),
style: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: 12,
),
),
const SizedBox(width: 8),
Obx(
() => IconButton(
icon: Icon(
_settingsController.muted.value
? Icons.volume_off
: Icons.volume_up,
color: Theme.of(context).colorScheme.primary,
size: 20,
),
onPressed: () {
_settingsController.toggleMuted();
_startHideTimer();
},
constraints: const BoxConstraints(),
padding: EdgeInsets.zero,
),
),
],
),
);
}
}