Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added seek forward and rewind buttons #717

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions lib/src/cupertino/cupertino_controls.dart
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import 'dart:math' as math;
import 'dart:ui' as ui;

import 'package:chewie/src/animated_play_pause.dart';
import 'package:chewie/src/center_play_button.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:chewie/src/chewie_progress_colors.dart';
import 'package:chewie/src/cupertino/cupertino_progress_bar.dart';
import 'package:chewie/src/cupertino/widgets/cupertino_options_dialog.dart';
import 'package:chewie/src/helpers/utils.dart';
import 'package:chewie/src/hit_area_controls.dart';
import 'package:chewie/src/models/option_item.dart';
import 'package:chewie/src/models/subtitle_model.dart';
import 'package:chewie/src/notifiers/index.dart';
Expand All @@ -22,12 +22,14 @@ class CupertinoControls extends StatefulWidget {
required this.backgroundColor,
required this.iconColor,
this.showPlayButton = true,
this.showSeekButton = true,
Key? key,
}) : super(key: key);

final Color backgroundColor;
final Color iconColor;
final bool showPlayButton;
final bool showSeekButton;

@override
State<StatefulWidget> createState() {
Expand Down Expand Up @@ -350,8 +352,8 @@ class _CupertinoControlsState extends State<CupertinoControls>
final bool showPlayButton =
widget.showPlayButton && !_latestValue.isPlaying && !_dragging;

return GestureDetector(
onTap: _latestValue.isPlaying
return HitAreaControls(
onTapPlay: _latestValue.isPlaying
? _cancelAndRestartTimer
: () {
_hideTimer?.cancel();
Expand All @@ -360,14 +362,13 @@ class _CupertinoControlsState extends State<CupertinoControls>
notifier.hideStuff = false;
});
},
child: CenterPlayButton(
backgroundColor: widget.backgroundColor,
iconColor: widget.iconColor,
isFinished: isFinished,
isPlaying: controller.value.isPlaying,
show: showPlayButton,
onPressed: _playPause,
),
Comment on lines -363 to -370
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cupertino controls already have the seek-forward and rewind buttons in the seek bar (i.e. the ones that rewind and fast-forward by 15 seconds).

As a result, this change should only apply to Material based widgets.

Do this for the other new widgets added in this PR, since they should only apply to Material.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @diegotori

requested changes done please review

Thank you

backgroundColor: widget.backgroundColor,
iconColor: widget.iconColor,
isFinished: isFinished,
isPlaying: controller.value.isPlaying,
showPlayButton: showPlayButton,
showSeekButton: false,
onPressedPlay: _playPause,
);
}

Expand Down
69 changes: 69 additions & 0 deletions lib/src/hit_area_controls.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import 'package:flutter/material.dart';

import 'center_play_button.dart';
import 'seek_control_button.dart';

class HitAreaControls extends StatelessWidget {
const HitAreaControls({
Key? key,
required this.onTapPlay,
required this.onPressedPlay,
required this.backgroundColor,
required this.iconColor,
required this.isFinished,
required this.isPlaying,
required this.showPlayButton,
required this.showSeekButton,
this.seekRewind,
this.seekForward,
}) : super(key: key);

final VoidCallback onTapPlay;
final VoidCallback onPressedPlay;
final VoidCallback? seekRewind;
final VoidCallback? seekForward;
final Color backgroundColor;
final Color iconColor;
final bool isFinished;
final bool isPlaying;
final bool showPlayButton;
final bool showSeekButton;

@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
showSeekButton
? SeekControlButton(
backgroundColor: backgroundColor,
iconColor: iconColor,
onPressed: seekRewind,
onDoublePressed: seekRewind,
icon: Icons.fast_rewind,
)
: const SizedBox.shrink(),
GestureDetector(
onTap: onTapPlay,
child: CenterPlayButton(
backgroundColor: backgroundColor,
iconColor: iconColor,
isFinished: isFinished,
isPlaying: isPlaying,
show: showPlayButton,
onPressed: onPressedPlay,
),
),
showSeekButton
? SeekControlButton(
backgroundColor: backgroundColor,
iconColor: iconColor,
onPressed: seekForward,
onDoublePressed: seekForward,
icon: Icons.fast_forward,
)
: const SizedBox.shrink(),
],
);
}
}
41 changes: 30 additions & 11 deletions lib/src/material/material_controls.dart
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import 'dart:async';

import 'package:chewie/src/center_play_button.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:chewie/src/chewie_progress_colors.dart';
import 'package:chewie/src/helpers/utils.dart';
import 'package:chewie/src/hit_area_controls.dart';
import 'package:chewie/src/material/material_progress_bar.dart';
import 'package:chewie/src/material/widgets/options_dialog.dart';
import 'package:chewie/src/material/widgets/playback_speed_dialog.dart';
Expand All @@ -17,10 +17,12 @@ import 'package:video_player/video_player.dart';
class MaterialControls extends StatefulWidget {
const MaterialControls({
this.showPlayButton = true,
this.showSeekButton = true,
Key? key,
}) : super(key: key);

final bool showPlayButton;
final bool showSeekButton;

@override
State<StatefulWidget> createState() {
Expand Down Expand Up @@ -366,9 +368,11 @@ class _MaterialControlsState extends State<MaterialControls>
final bool isFinished = _latestValue.position >= _latestValue.duration;
final bool showPlayButton =
widget.showPlayButton && !_dragging && !notifier.hideStuff;
final bool showSeekButton =
widget.showSeekButton && !_dragging && !notifier.hideStuff;

return GestureDetector(
onTap: () {
return HitAreaControls(
onTapPlay: () {
if (_latestValue.isPlaying) {
if (_displayTapped) {
setState(() {
Expand All @@ -385,14 +389,15 @@ class _MaterialControlsState extends State<MaterialControls>
});
}
},
child: CenterPlayButton(
backgroundColor: Colors.black54,
iconColor: Colors.white,
isFinished: isFinished,
isPlaying: controller.value.isPlaying,
show: showPlayButton,
onPressed: _playPause,
),
backgroundColor: Colors.black54,
iconColor: Colors.white,
isFinished: isFinished,
isPlaying: controller.value.isPlaying,
showPlayButton: showPlayButton,
showSeekButton: showSeekButton,
onPressedPlay: _playPause,
seekRewind: _seekRewind,
seekForward: _seekForward,
);
}

Expand Down Expand Up @@ -542,6 +547,20 @@ class _MaterialControlsState extends State<MaterialControls>
});
}

void _seekTo({int seconds = 10}) {
setState(() {
controller.seekTo(
Duration(
seconds: _latestValue.position.inSeconds + seconds,
),
);
});
}

void _seekForward() => _seekTo();

void _seekRewind() => _seekTo(seconds: -10);

void _startHideTimer() {
final hideControlsTimer = chewieController.hideControlsTimer.isNegative
? ChewieController.defaultHideControlsTimer
Expand Down
41 changes: 30 additions & 11 deletions lib/src/material/material_desktop_controls.dart
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import 'dart:async';

import 'package:chewie/src/animated_play_pause.dart';
import 'package:chewie/src/center_play_button.dart';
import 'package:chewie/src/chewie_player.dart';
import 'package:chewie/src/chewie_progress_colors.dart';
import 'package:chewie/src/helpers/utils.dart';
import 'package:chewie/src/hit_area_controls.dart';
import 'package:chewie/src/material/material_progress_bar.dart';
import 'package:chewie/src/material/widgets/options_dialog.dart';
import 'package:chewie/src/material/widgets/playback_speed_dialog.dart';
Expand All @@ -18,10 +18,12 @@ import 'package:video_player/video_player.dart';
class MaterialDesktopControls extends StatefulWidget {
const MaterialDesktopControls({
this.showPlayButton = true,
this.showSeekButton = true,
Key? key,
}) : super(key: key);

final bool showPlayButton;
final bool showSeekButton;

@override
State<StatefulWidget> createState() {
Expand Down Expand Up @@ -330,9 +332,11 @@ class _MaterialDesktopControlsState extends State<MaterialDesktopControls>
final bool isFinished = _latestValue.position >= _latestValue.duration;
final bool showPlayButton =
widget.showPlayButton && !_dragging && !notifier.hideStuff;
final bool showSeekButton =
widget.showSeekButton && !_dragging && !notifier.hideStuff;

return GestureDetector(
onTap: () {
return HitAreaControls(
onTapPlay: () {
if (_latestValue.isPlaying) {
if (_displayTapped) {
setState(() {
Expand All @@ -349,14 +353,15 @@ class _MaterialDesktopControlsState extends State<MaterialDesktopControls>
});
}
},
child: CenterPlayButton(
backgroundColor: Colors.black54,
iconColor: Colors.white,
isFinished: isFinished,
isPlaying: controller.value.isPlaying,
show: showPlayButton,
onPressed: _playPause,
),
backgroundColor: Colors.black54,
iconColor: Colors.white,
isFinished: isFinished,
isPlaying: controller.value.isPlaying,
showPlayButton: showPlayButton,
showSeekButton: showSeekButton,
onPressedPlay: _playPause,
seekRewind: _seekRewind,
seekForward: _seekForward,
);
}

Expand Down Expand Up @@ -596,4 +601,18 @@ class _MaterialDesktopControlsState extends State<MaterialDesktopControls>
),
);
}

void _seekTo({int seconds = 10}) {
setState(() {
controller.seekTo(
Duration(
seconds: _latestValue.position.inSeconds + seconds,
),
);
});
}

void _seekForward() => _seekTo();

void _seekRewind() => _seekTo(seconds: -10);
}
56 changes: 56 additions & 0 deletions lib/src/seek_control_button.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import 'package:flutter/material.dart';

class SeekControlButton extends StatefulWidget {
const SeekControlButton({
Key? key,
required this.backgroundColor,
required this.iconColor,
required this.icon,
this.onPressed,
this.onDoublePressed,
}) : super(key: key);

final Color backgroundColor;
final Color iconColor;
final VoidCallback? onPressed;
final VoidCallback? onDoublePressed;
final IconData icon;

@override
State<SeekControlButton> createState() => _SeekControlButtonState();
}

class _SeekControlButtonState extends State<SeekControlButton> {
@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return Expanded(
child: GestureDetector(
onDoubleTap: widget.onDoublePressed,
child: ColoredBox(
color: Colors.transparent,
child: Center(
child: DecoratedBox(
decoration: BoxDecoration(
color: widget.backgroundColor,
shape: BoxShape.circle,
),
// Always set the iconSize on the IconButton, not on the Icon itself:
// https://github.com/flutter/flutter/issues/52980
child: IconButton(
iconSize: 32,
padding: const EdgeInsets.all(12.0),
icon: Icon(widget.icon, color: widget.iconColor),
onPressed: widget.onPressed,
),
),
),
),
),
);
}
}