[bug] The progress part of the progress bar is not redrawn while dragging the thumb about audio_video_progress_bar HOT 13 CLOSED

This change is live in version 1.0.0

from audio_video_progress_bar.

@suragch What if we do the following:

final bool redrawProgressBarWhenDragging; // Default is false

...
if(redrawProgressBarWhenDragging && _userIsDraggingThumb){
 // handle redrawing the progress bar like we did in the reverted PR
}

If someone wants to use redrawProgressBarWhenDragging = true then they should pause any other sources of progress updates in onDragStart() (and resume in onDragEnd())

The docs should be updated with a code sample to illustrate this.

I don't think that the widget itself can provide a full solution to the problem, so this is a compromise.

In regards to the time label, I don't think anything should change.
Unless if you want to add a time label that represents the current duration for the thumb position.

from audio_video_progress_bar.

Do you mean in the example project or your own project? If it is in the example project (or a close derivative of it) the bug is easier for me to track down.

from audio_video_progress_bar.

In my own project. I used the video_player package to provide the progress.

import 'package:flutter/widgets.dart';

import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:video_player/video_player.dart';

/// This widget represents the progress bar in the video player.
class VideoPlayerProgressBar extends StatelessWidget {
  /// The default constructor.
  const VideoPlayerProgressBar({
    Key? key,
    required this.notifier,
    required this.onSeek,
  }) : super(key: key);

  /// The notifier that provides updates for the progress bar.
  /// This is the VideoPlayerController.
  final ValueNotifier<VideoPlayerValue> notifier;

  /// The function that handles seeking to a given duration.
  /// This is essentially `VideoPlayerController.onSeek(duration)`
  final void Function(Duration) onSeek;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: notifier,
      builder: (context, child) {
        final value = notifier.value;
        final total = value.duration;
        final current = value.position;

        const double thumbRadius = 12;
        const double thumbGlowRadius = 16;

        return Padding(
          // The thumb paints outside the progress bar when at the edges.
          // Provide enough padding to the progress indicator and the labels.
          padding: const EdgeInsets.symmetric(horizontal: thumbRadius),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 8),
                      child: ProgressBar(
                        progress: current,
                        total: total,
                        barHeight: 8,
                        timeLabelLocation: TimeLabelLocation.none,
                        baseBarColor: backgroundColor,
                        progressBarColor: progressColor,
                        thumbGlowRadius: thumbGlowRadius,
                        thumbRadius: thumbRadius,
                        thumbColor: thumbColor,
                        thumbGlowColor: thumbGlowColor,
                        thumbCanPaintOutsideBar: true,
                        onSeek: onSeek,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
    );
  }
}

from audio_video_progress_bar.

@suragch I edited the OP with more details of the bug. I managed to fix it by updating the progress in _updateThumbPosition()

from audio_video_progress_bar.

Now that I see your videos and PR I understand what you are talking about. I wouldn't actually call this a bug since it was the intended original behavior, but I think it could be a new feature request. It seems reasonable to move the progress bar to follow the thumb.

from audio_video_progress_bar.

The next question is should the time label show the progress time or the drag time?

from audio_video_progress_bar.

I tried one solution based on your PR (see the commit referenced above) but that still didn't work because the progress is updated every time the music sends a progress update. I undid the changes. I'm not sure how to fix this right now.

from audio_video_progress_bar.

We need a way to somehow disconnect from the progress updates while the user is dragging the thumb, since then the user 'takes over' from those updates. Perhaps using a listener to update the widget (which ignores the value update if _userIsDraggingThumb is true)

from audio_video_progress_bar.

I was able to get the expected behavior by using a StatefulWidget. There's probably a neater way to do it, but so far this is working well for me. It has the, I think desirable, side effect of updated the current position timestamp to show the position under the thumb.

class PlayerProgressBar extends StatefulWidget {
  const PlayerProgressBar({
    this.positionData,
    this.onSeek,
    super.key,
  });
  final PositionData? positionData; // A class containing two Duration objects.
  final ValueChanged<Duration>? onSeek;

  @override
  State<PlayerProgressBar> createState() => _PlayerProgressBarState();
}

class _PlayerProgressBarState extends State<PlayerProgressBar> {
  bool useDragPosition = false;
  Duration dragPosition = Duration.zero;
  @override
  Widget build(BuildContext context) {
    return ProgressBar(
      progress: useDragPosition ? dragPosition : widget.positionData?.position ?? Duration.zero,
      buffered: widget.positionData?.bufferedPosition ?? Duration.zero,
      total: widget.positionData?.duration ?? Duration.zero,
      onSeek: widget.onSeek,
      onDragStart: (details) => setState(() => useDragPosition = true),
      onDragUpdate: (details) => setState(() => dragPosition = details.timeStamp),
      onDragEnd: () => setState(() {
        useDragPosition = false;
        widget.onSeek;
      }),
    );
  }
}

from audio_video_progress_bar.

@suragch What if we do the following:

final bool redrawProgressBarWhenDragging; // Default is false

...
if(redrawProgressBarWhenDragging && _userIsDraggingThumb){
 // handle redrawing the progress bar like we did in the reverted PR
}

If someone wants to use redrawProgressBarWhenDragging = true then they should pause any other sources of progress updates in onDragStart() (and resume in onDragEnd())

The docs should be updated with a code sample to illustrate this.

I don't think that the widget itself can provide a full solution to the problem, so this is a compromise.

In regards to the time label, I don't think anything should change. Unless if you want to add a time label that represents the current duration for the thumb position.

I like this idea. Any chance you can add this to the package? @suragch

from audio_video_progress_bar.

Sorry for the long delay on this issue.

I looked back at my previously unsuccessful attempt to implement this (3e5c1e6). It turned out I was only missing one line. I just pushed another commit that appears to fix the problem.

Note that this also changes the behavior of the progress label. Now the label updates while dragging. Some other progress bars also have this behavior (YouTube web desktop for example) and it makes it useful for seeking to a specific time so I'm planning on keeping this behavior. However, since it does change the current behavior, I'll bump the version number up a major version.

from audio_video_progress_bar.

Fixed with version 1.0.0 as stated above.

from audio_video_progress_bar.