[sync story_view progress bar animation controller with the video controller] - controlling the progres indicator animation

[himmat12]

is there any way to control the progress bar animation while the media files like videos are in loading state ... if the video is in loading state then the animation must pause at that moment and when the video initializes and plays then the progress indicator animation should've to be forwarded ..

i've tried several times to understand the package src code but still got confused so i need help in this one ..

[2shrestha22]

The progress animation starts animating before video is finished loading/downloading. Please fix this issue, other wise this package is great.

[blackmann]

@kaledai @2shrestha22 You need to pass the same instance of a StoryController to both the story view and .pageVideo for it to work this way.

[himmat12]

@blackmann yes i ve passed same instance of StoryController on both StoryView as well as StoryView.pageVideo()/StoryView.pageImage() but also there's still issue exists

class ExampleStory {
  StoryController? _storyController = StoryController();
  List<StoryItem> storyItems = [];

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    getStoryItems(widget.medias);


  }

  void getStoryItems(List<Medias> medias) {
    for (var i in medias) {
      if (i.fileType.toLowerCase() == "image") {
        storyItems.add(StoryItem.pageImage(
          url: i.mediaLink,
          controller: _storyController!,
          duration: Duration(milliseconds: 4000),
          imageFit: BoxFit.fitWidth,
        ));
      } else {
        storyItems.add(StoryItem.pageVideo(
          i.mediaLink,
          controller: _storyController!,
          duration: Duration(
              milliseconds: i.duration == null ? 4 : i.duration! ~/ 0.001),
          imageFit: BoxFit.cover,
        ));
      }
    }
  }
}

[blackmann]

@kaledai Can I see you build method? Especially the StoryView(...) child?

[himmat12]

@blackmann here is the whole story view page code

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

class PostMediaView extends StatefulWidget {
  PostMediaView({
    required this.medias,
    Key? key,
  }) : super(key: key);

  final List<Medias> medias;

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

class _PostMediaViewState extends RouteAwareState<PostMediaView> {
  final StoryController? _storyController = StoryController();
  List<StoryItem> storyItems = [];

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
    getStoryItems(widget.medias);

    debugPrint(
        "++++++++++++++++++++++++++++++++ story view initialized +++++++++++++++++++++++++++++++++++++");
  }

  void getStoryItems(List<Medias> medias) {
    for (var i in medias) {
      if (i.fileType.toLowerCase() == "image") {
        storyItems.add(StoryItem.pageImage(
          url: i.mediaLink,
          controller: _storyController!,
          duration: Duration(milliseconds: 4000),
          imageFit: BoxFit.fitWidth,
        ));
      } else {
        storyItems.add(StoryItem.pageVideo(
          i.mediaLink,
          controller: _storyController!,
          duration: Duration(
              milliseconds: i.duration == null ? 4 : i.duration! ~/ 0.001),
          imageFit: BoxFit.cover,
        ));
      }
    }
  }

  @override
  void dispose() {
    debugPrint(
        "++++++++++++++++++++++++++++++++ story view disposed +++++++++++++++++++++++++++++++++++++");
    // _storyController = null;
    // _storyController?.pause();
    _storyController?.dispose();
    super.dispose();
  }

  /// Called when the top route has been popped off, and the current route
  /// shows up.
  @override
  void didPopNext() {
    print("didPopNext");
    _storyController!.play();
    super.didPopNext();
  }

  /// Called when a new route has been pushed, and the current route is no
  /// longer visible.
  @override
  void didPushNext() {
    print("didPushNext");
    _storyController!.pause();
    super.didPushNext();
  }

  @override
  Widget build(BuildContext context) {
    return VisibilityDetector(
      key: UniqueKey(),
      onVisibilityChanged: (info) {
        if (info.visibleFraction == 0) {
          _storyController?.pause();
        } else if (info.visibleFraction == 1) {
          _storyController!.play();
        }
      },
      child: StoryView(
        controller: _storyController!,
        onComplete: () {},
        onStoryShow: (storyItem) {},
        inline: true,
        // storyItems: List.from(widget.medias.map(
        //   (e) => evaluateMedia(media: e),
        // )),
        storyItems: storyItems,
      ),
    );
  }

  /// evaluate media by its type (image/video)
  // StoryItem? evaluateMedia({required Medias media}) {
  //   switch (media.fileType) {
  //     case "image":
  //       if (media.mediaLink.isEmpty || media.mediaLink != "") {
  //         return StoryItem.pageImage(
  //           url: "${media.mediaLink}",
  //           controller: _storyController!,
  //           duration: Duration(milliseconds: 4000),
  //           imageFit: BoxFit.fitWidth,
  //         );
  //       }
  //       break;
  //     case "video":
  //       if (media.mediaLink.isEmpty || media.mediaLink != "") {
  //         return StoryItem.pageVideo(
  //           "${media.mediaLink}",
  //           controller: _storyController!,
  //           duration: Duration(
  //               milliseconds:
  //                   media.duration == null ? 4 : media.duration! ~/ 0.001),
  //           imageFit: BoxFit.cover,
  //         );
  //       }
  //       break;
  //   }
  // }
}

[hwasiq15]

Please fix this.

[deevsaini]

please fix this @blackmann !

[deevsaini]

update:- I have used state management but still the result is uncertain as provider invoked rebuild inside the build method without any walk around. anyone have any ideas?

[mohammadamini-tooti]

2024 update - I had the same issue that story would load and even finish before my video or image is even loaded and displayed, but I did what the author said here and now it works.

#126 (comment)

You just need to make sure to pass your story controller to every single storyItem you have.