jayapriya durairajan
jayapriya durairajan

Reputation: 51

Flutter video_player not loading thumbnails on app load in iOS

I have built a video player using flutter using the package https://pub.dev/packages/video_player. For this I use the first frame of the video as a thumbnail. The video is streamed from firebase storage.

Everything works well for android. But the problem is with iOS. The thumbnails are not loading when the app is started. However everything loads on the first tap. I dont know what mistake I am doing.

Below is the screenshot for - iOS on load before tap and iOS after Tap

Below is my code

class MainContentWidget extends StatefulWidget {
  String videoLink;
  Map postDetail;
  int index;
  MainContentWidget({Key? key, required this.videoLink, required this.postDetail, required this.index}) : super(key: key);

  @override
  State<MainContentWidget> createState() => _MainContentWidgetState();
}

class _MainContentWidgetState extends State<MainContentWidget> {

  late VideoPlayerController _thumbNailController;
  late bool postUserLikeStatus;

  Future createLike(String postID) async{
    await setNewFirebaseTokenForUser().then((value) async=> {
      await firebaseLikesApi.likePost(postID).then((value) =>
      {
        if(value.statusCode == 200) {
          firebasePostsProvider.addLikeToPost(widget.index, value.data),
          profileInfoProvider.addProfileLikes(value.data),
        }
        else{
          navigateFromResponse.navigateTo(value.statusCode)
        }
      }
      )
    });
  }

  @override
  void initState() {
    super.initState();
    _thumbNailController = VideoPlayerController.network(widget.videoLink)
      ..initialize().then((_) {
        setState(() {});  //when your thumbnail will show.
      });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _thumbNailController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final firebasePostsProvider = Provider.of<FirebasePostsProvider>(context);
    final profileInfoProvider = Provider.of<ProfileInfoProvider>(context);
    List listProfileLikes = profileInfoProvider.profileInfo["likes"];
    List listPostsLikes = firebasePostsProvider.getPostsList[widget.index]["likes"].map((item) => item["_id"]).toList();
    List likeStatus = listPostsLikes.where(
            (item) => listProfileLikes.contains(item)
    ).toList();
    postUserLikeStatus = likeStatus.isEmpty ? false : true;

    var videoName = FirebaseStorage.instance.refFromURL(widget.videoLink);
    String videoNameDisplay = videoName.name.toString().split("_")[0].split(".")[1];
    return Container(
      decoration: const BoxDecoration(
          color: Colors.white),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Padding(
                  padding: const EdgeInsets.all(5),
                  child: CircleAvatar(
                    radius: 28,
                    backgroundColor: Colors.yellow,
                    child: CircleAvatar(
                        backgroundColor: const Color.fromRGBO(55, 65, 70, 10),
                        radius: 25,
                        child: Image.asset("assets/at-bg-mir-logo.png")
                    ),
                  )
              ),
              Padding(
                padding: const EdgeInsets.only(left: 10.0, top: 5),
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      videoNameDisplay.toString().text
                          .minFontSize(17)
                          .maxFontSize(18)
                          .fontWeight(FontWeight.w700)
                          .make(),
                      const SizedBox(
                        height: 5,
                      ),
                    ]),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: InkWell(
              child: Stack(
                  children:[
                    SizedBox(
                      child: _thumbNailController.value.isInitialized
                          ?  AspectRatio(aspectRatio:
                            9/16,
                            child: VideoPlayer(_thumbNailController)
                        )
                          : const AspectRatio(aspectRatio:
                            9/16,
                            child: Center(
                              child: CircularProgressIndicator()
                        ),
                      ),
                    ),
                    _thumbNailController.value.isInitialized ?
                    SizedBox(
                      height: Get.height *0.7,
                      width:  Get.width,
                      // color: Colors.black,
                      // padding: EdgeInsets.symmetric(horizontal: Get.width * 0.2, vertical: Get.height * 0.3),
                      child: const Center(
                        child: Icon(
                          CupertinoIcons.play_circle,
                          color:Colors.white ,
                          size: 50,
                        ),
                      ),
                    ) : Container()
                  ]
              ),
              onTap: (){
                Get.toNamed("videoscrollablescreen", arguments: widget.videoLink);
              },
            ),
          ),
          const Divider(
            thickness: 2,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              SpecialIcon(
                val:  firebasePostsProvider.getPostsList[widget.index]["likes"].length.toString(),
                iconData:  postUserLikeStatus
                    ?Icons.favorite
                    :Icons.favorite_border_outlined,
                color: widget.postDetail["likes"].isEmpty ? Colors.black45 : Colors.grey,
                doFunction: () {
                  if(postUserLikeStatus == false){
                    createLike(widget.postDetail["_id"]);
                    setState(() {
                      postUserLikeStatus = true;
                    });
                  }
                },
              ),
              SizedBox(
                height: MediaQuery.of(context).size.height *0.05,
                child: const VerticalDivider(
                  // width: 10,
                  thickness: 0.5,
                  color: Colors.black45,
                  endIndent: 3,
                ),
              ),
              SpecialIcon(
                val: firebasePostsProvider.getPostsList[widget.index]["comments"].length.toString(),
                iconData: Icons.comment_outlined,
                color: Colors.black45,
                doFunction: () {
                  Get.toNamed('/commentspage', arguments: {"index":widget.index, "route": "fromFirebasePostsFeed"});
                },
              ),
            ]
          ),
        ],
      ),
    );
  }
}

Upvotes: 4

Views: 189

Answers (0)

Related Questions