Video play dispose and loading issue

[Minsamin]

If I use autoplay false, the loading continues. If I tap on 10Sec buttons or loading widget, then playButton appears. Using meedu_player: ^0.4.1+1

One more issue, (Tested with mid to low-end device.) If I frequently toggle full screen On Off, then the dispose error showing →

A VideoPlayerController was used after being disposed.

Using same code from https://player.meedu.app/#/?id=how-to-use in ListView.Builder

[darwin-morocho]

https://player.meedu.app/#/?id=how-to-use

Hi @Minsamin, Are you trying to have multiples videos inside a ListView.Builder>

[Minsamin]

I am creating a feeds page so it contains images, or text, or videos. So, listview items, can contain, single video.

This is the screen, and the loading forever, until I press 10Sec buttons.

[Minsamin]

https://user-images.githubusercontent.com/23526722/104033388-75cae280-51f5-11eb-977b-39196f46b386.mp4

Screen Recording of the issue.

[darwin-morocho]

20210108_210646.mp4 Screen Recording of the issue.

The problem is because the ListView.builder destroy the widgets when they are not visible. To avoid this maybe you need use a global key for each item in your list. I will try to find a good solution for your case and add an example in the example folder.

[darwin-morocho]

@Minsamin the loading animation was fixed on the version 0.4.2.

For the dispose error please can you share the code or let me know if using globalKey the error is solved

[Minsamin]

Sure sir, I will update you, after I implement your suggestion. Thanks...

[Minsamin]

Loading Issue Fixed in version 0.4.2. Thanks But Full-screen toggle shows error some time.

https://user-images.githubusercontent.com/23526722/104149198-4ab1e000-53fb-11eb-8fe0-a7c861c9bb7f.mp4

I can see, IF & only IF, in list view, 2 Feed with video completely visible, then I'm getting this error & video not playing in full screen shows black thumbnail (see in screen recording) (Otherwise I can't reproduce this error, all working fine). I don't know about how to use keys in listView.

I am using sample Stateful Widget code.

Getting this error.

[Minsamin]

@darwin-morocho , Let me know if I'm using Global key correct way! Cause this not solves the issue. Same error.

This is my PageList Library for pagination in Feed Screen. This is a Stateless Widget

This is List Item Stateful Widget

And Here I can have Images or Videos or text in List View Item. So I have if conditions and show image or Stateful Video Widget (Code screenshot given in above comment).

[darwin-morocho]

@darwin-morocho , Let me know if I'm using Global key correct way! Cause this not solves the issue. Same error.

This is my PageList Library for pagination in Feed Screen. This is a Stateless Widget

This is List Item Stateful Widget

And Here I can have Images or Videos or text in List View Item. So I have if conditions and show image or Stateful Video Widget (Code screenshot given in above comment).

Keys help you to preserve the widget state when you have a widget inside a list or when the ui changes for screen rotation. For that reason you need create a key for each item in your list, and store these keys into a property list

[Minsamin]

Very Sorry, cant understand, any snippet or example code is highly appreciable.

[Minsamin]

I have used this two... But both has the same error.

I think it's not the keys, because if list view has only one video showing, then there is no problem. Only if two video is fully visible in the screen, and I click on Full screen button, then I got this error.

[Minsamin]

"Only if two video is fully visible in the screen, and I click on the Full screen button, then I got this error."

https://user-images.githubusercontent.com/23526722/104446306-4387ff00-55c0-11eb-90c3-592e9e47d057.mp4

I used this in under "Padding" Widget and also tried under "FeedItemVerticalWidget" in "Stateless" and "Stateful" widget.

No success. :(

[darwin-morocho]

@Minsamin I been tried to reproduce your error and yes the problem is because the ListView.builder destroy the element when the device rotate. I could fix it using AutomaticKeepAliveClientMixin but each item in the list never dies when you do scroll so you need to be careful with the performance

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:meedu_player/meedu_player.dart';

class ListViewExample extends StatefulWidget {
  ListViewExample({Key key}) : super(key: key);

  @override
  _ListViewExampleState createState() => _ListViewExampleState();
}

class _ListViewExampleState extends State<ListViewExample> with AutomaticKeepAliveClientMixin {
  // final List<MeeduPlayerController> _controllers = [];

  // @override
  // void dispose() {
  //   _controllers.forEach((element) {
  //     element.dispose();
  //   });
  //   super.dispose();
  // }

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

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(),
      body: ListView.builder(
        cacheExtent: 600,
        itemBuilder: (_, index) => VideoItem(),
        itemCount: 10,
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

class VideoItem extends StatefulWidget {
  VideoItem({Key key}) : super(key: key);

  @override
  _VideoItemState createState() => _VideoItemState();
}

class _VideoItemState extends State<VideoItem> with AutomaticKeepAliveClientMixin {
  MeeduPlayerController _controller = MeeduPlayerController(
    screenManager: ScreenManager(orientations: [
      DeviceOrientation.portraitUp,
    ]),
  );

  @override
  void initState() {
    super.initState();
    _controller.setDataSource(
      DataSource(
        source: 'https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4',
        type: DataSourceType.network,
      ),
      autoplay: false,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    print("❌ dispose video player");
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: MeeduVideoPlayer(
        controller: _controller,
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

[Minsamin]

It's a pagination, so I can't keep all items in memory, this list can be more than 5k, maybe more in long term of the project. How can i use this video library then? Can't you find any other solution? Because I want to use this package, it's awesome. But with this issue i can deliver in production.

Please try to find some other ways. Is this issue has every video package.? I think not.

[darwin-morocho]

It's a pagination, so I can't keep all items in memory, this list can be more than 5k, maybe more in long term of the project. How can i use this video library then? Can't you find any other solution? Because I want to use this package, it's awesome. But with this issue i can deliver in production.

Please try to find some other ways. Is this issue has every video package.? I think not.

@Minsamin this is not an issue is a normal behavior of this and other plugin because the ListView.builder destroy the widgets when they are not visible, here you need to find a solution like destroy the widgets when they are no visible or something similar. I will try to find a code to show you how to do that

[Minsamin]

Ookk, waiting for your solution.

[darwin-morocho]

Ookk, waiting for your solution.

you can find more info here https://github.com/flutter/flutter/issues/58917

And you could try this package https://pub.dev/packages/visibility_detector

[darwin-morocho]

@Minsamin other alternative is you can show a preview in your list as an image preview and when you click the image show the player in fullscreen mode

[Minsamin]

@Minsamin other alternative is you can show a preview in your list as an image preview and when you click the image show the player in fullscreen mode

Yeah, I'm already using this. Not showing full screen button in list. Only full screen will work in feed details screen. Thanks BTW. 😊😊