Buffering Progress Indicator does not disappear from the screen after buffering

[PachecoLpG]

What is the bug?

When using the 10-second skip button or clicking on the progress bar, the progress indicator no longer leaves the screen, making it impossible to use the pause and skip buttons.

I only tested it on Android, I don't know if the behavior is repeated on other platforms.

How can we reproduce it?

It is possible to reproduce with the code from the Chewie example

[jsenitza]

Chiming in here - same issue for me. Was just hunting around for comments on this issue. It works fine on iOS but Android seems to leave the buffering spinner up permanently if you manually scroll the progress bar.

[diegotori]

@PachecoLpG If you can create a minimal reproduction example, where it triggers buffering and where it triggers the issue in question, then i'll be able to best assist you. Thanks.

[PachecoLpG]

Minimal reproduction code:

import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(MaterialApp(home: const Player()));
}

class Player extends StatefulWidget {
  const Player({super.key});

  @override
  State<Player> createState() => _PlayerState();
}

class _PlayerState extends State<Player> {
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;

  Future<void> initializePlayer() async {
    _videoPlayerController = VideoPlayerController.networkUrl(
      Uri.parse(
          "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"),
    );

    await _videoPlayerController.initialize();

    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      hideControlsTimer: const Duration(seconds: 2),
      progressIndicatorDelay: const Duration(milliseconds: 500),
    );

    setState(() {});
  }

  bool get isReady =>
      _chewieController != null &&
      _chewieController!.videoPlayerController.value.isInitialized;

  @override
  void initState() {
    super.initState();
    initializePlayer();
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isReady
          ? Chewie(controller: _chewieController!)
          : const Center(child: CircularProgressIndicator()),
    );
  }
}

In the chewie example it is also possible to reproduce the problem

I also made a video

player_bug.webm

[diegotori]

In material_controls.dart, line 651, step through the code to determine whether it's cancelling the timer.

Otherwise, I would probably set a different value for the progress indicator delay.

My advice is to check where it's setting _displayBufferingIndicator to true, since that will display the buffering indicator. It might be a race condition.

If you have a handle on a possible fix, then feel free to open a PR for it, and I'll gladly review it.

[diegotori]

Also, keep in mind that video_player updates in certain intervals, so that might be the issue. You may have to give it a higher progress indicator delay value.

Right now, they're trying to reduce the update interval from 500ms to 100ms with this pending PR. This library uses VideoPlayerController's callbacks to update the UI, so if you set it at 500ms, it might go missed.

[diegotori]

One possible solution is to check if the video is still buffering when the timeout method is called. If it's not, then it should cancel the timer and not call setState further.

[PachecoLpG]

I did some more testing, it seems that the controller.value.isBuffering always returns true after clicking on the progress bar or skip, the controller says the video is buffering throughout its full duration, therefore the buffering indicator never leaves the screen.

[diegotori]

I did some more testing, it seems that the controller.value.isBuffering always returns true after clicking on the progress bar or skip, the controller says the video is buffering throughout its full duration, therefore the buffering indicator never leaves the screen.

That definitely means that VideoPlayerController is the culprit. Right now, it's taking orders from there. If it says that its buffering, then it'll display the requisite UI until it tells Chewie that it's not, which will then make it disappear.

I think you may have to raise an issue with the Flutter Team regarding video_player, since you can also reproduce this without Chewie.

[PachecoLpG]

I opened an issue

Closing here for now, thanks for the help.