Giter VIP home page Giter VIP logo

ertgrulll / advstory Goto Github PK

View Code? Open in Web Editor NEW
41.0 1.0 33.0 22.64 MB

An advanced, complete story viewer for Flutter. Has support for images, videos, custom widget contents, gestures, interceptors, listeners, manipulators and much more.

Home Page: https://advstory.sourcekod.com

License: MIT License

Kotlin 0.07% Ruby 0.76% Swift 0.23% Objective-C 0.02% Dart 98.93%
android dart flutter ios story

advstory's Introduction

"Buy Me A Coffee" pub package GitHub issues-closed

AdvStory ๐Ÿ“ธ

Quite simple & Quite advanced


๐Ÿš€ Advanced Story viewer for Flutter. Create and customize slideshow presentations similar to Instagram, TikTok and Snapchat stories. Supports image, video and custom story contents. Full control over stories for developer and smooth experience for users.

Features

โžก๏ธ High performance, minimum delays, preload and cache enabled. Works using builders, provides flexibility and lazy loading.

โžก๏ธ Story view can be in any shape, size and position or full-screen.

โžก๏ธ Predefined story types for images, videos and simple contents. But not limited to these types, allows you to use base class of predefined widgets. This literally makes the options endless.

โžก๏ธ Gestures for skip story, skip content, pause, resume and close.

โžก๏ธ Interceptors that block events and manipulate the story flow without being noticed by the app user.

โžก๏ธ A functional controller for listening interactions and skip stories/contents, pause, play and more...

โžก๏ธ Predefined highly customizable story tray. But you are not limited to that, you can create your own non-animated or animated trays, AdvStory handles animation.

โžก๏ธ Header and footer areas for predefined stories with customization option specific to a predefined story content.

โžก๏ธ Object based, you can create as many story views as you want within the same application.

โžก๏ธ Well documented, go to docs:

  • docs

What can I do using AdvStory?

  • Quite simple: when you don't need much customization, a fully functional story view is just 8 lines of code.
AdvStory(
  storyCount: 5,
  storyBuilder: (storyIndex) => Story(
    contentCount: 10,
    contentBuilder: (contentIndex) => const ImageContent(url: ""),
  ),
  trayBuilder: (index) => AdvStoryTray(url: ""),
);
  • Quite advanced: when you need more you can,
    • create stories asynchronously in storyBuilder, send some requests to your server!
    • create different story trays and tray animations for each story, trays can be any widget you want.
    • create different footer & header areas for each story contents.
    • create contents with different skip durations.
    • create your own contents, AdvStory provides ways to you for caching media and handling story logic.
    • disable gestures, jump to a position, hide and show header/footer areas, pause and resume story via controller.
    • block events and call your own callbacks instead default story flow actions via interceptor.
    • create story view using AdvStory.player to define opening animations, custom shape, size...
    • customize tray list, story progress indicator, loading screen.

If you find AdvStory useful, you can hit the like button and give a star to project on Github to motivate me or treat me with coffee to help me take time to develop this package.


๐Ÿค๐Ÿผ Supporters & Sponsors


Roadmap

Status Goal
๐Ÿš€ Custom advanced contents
โŒ Custom gestures
๐Ÿš€ Decouple trays & player
โŒ Web & Windows & MacOs & Linux support

Some screenshots:

advstory's People

Contributors

ertgrulll avatar jtkeyva avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

advstory's Issues

How to update story content dynamically

I want to update item count dynamically (by pagination or infinite scrolling)

I did the that in tray view by adding a scrollcontroller, But to update the story view we need some way to update the story item when data updates via pagination,

onSlideChanged & onStoryChanged Functions

Is your feature request related to a problem? Please describe.
Would be great to be able to call a custom function when a slide starts & when a slide ends. For instance once a video is finished it can trigger an onSlideEnd / videoViewed function to add a view count to the database. Also, would be useful to have a function fire onSlideStart

Describe the solution you'd like
Ability to define a custom function once a slide begins and ends.

Describe alternatives you've considered
Hack the code or use a pageview base approach which has onPageChanged

Additional context
Also makes sense to have onStoryChanged so that when a new story starts you can run a different function.

[flutter web] add support for flutter web

Add support to the package for flutter web
Hi, this looks like an amazing package, I'm using a different package for stories, this one look much richer package, I'm working with flutter on the web.

My suggestion is to remove caching if kIsWeb is true
I browsed a little bit in the source code of the package and I saw that the only thing that you depend on is the caching which is not currently available for the web, I just wondering if you can add a condition in case id kIsWeb true to get the image from the internet instead of the caching mechanism.

thank you

Web / MacOS / Windows / Linux Support

Is your feature request related to a problem? Please describe.
Says it works for iOS & Android

Describe the solution you'd like
To work across other platforms

Describe alternatives you've considered
None

Additional context
Is there anything specific that will make it difficult? I know video, caching & performance can be problematic so not sure how realistic it is.

Skip Viewed Content!

Skip the Already Viewed Story

have been trying to skip the stories in content builder but I am facing numerous problems, Is their any way to do this

Custom Gestures

Is your feature request related to a problem? Please describe.
Using a predefined set of gestures is limiting.

Describe the solution you'd like
Put gesture options inside AdvStory() so you can do whatever you want with any gesture. Ex: Swiping up opens a page or double tap runs a function etc.

Describe alternatives you've considered
Disable AdvStory gestures alltogether and wrap in a gestureDetector()

Additional context
Not quite sure how to call your functions inside a custom wrapped GestureDetector(). Perhaps some documentation?

Awesome job on performance! It runs great!

Decouple Tray & Player

Is your feature request related to a problem? Please describe.
What if you don't want to display a tray? or You only have a single story to play. What do you do?

Describe the solution you'd like
Decouple the Tray and the Story Player so that you can simply play a single story without using the tray. Or have a standalone Story Player.

Describe alternatives you've considered
Hacking your code

Additional context
N/A
Just wanted to thank you again and say great job. Caching works great and skipping slides is flawless!

Help wanted

Hello Ertugrul. Is there any way to disable page bouncing when tapped to AdvStoryTray?

2022-10-16 10:00:45.237726-0700 Runner[66039:3355191] [VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(VideoError, Failed to load video: Cannot Open, null, null)

Describe the bug
Unable to play video story on ios. The following error is thrown on ios 16.0:

2022-10-16 10:00:45.237726-0700 Runner[66039:3355191] [VERBOSE-2:dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(VideoError, Failed to load video: Cannot Open, null, null)

To Reproduce
Steps to reproduce the behavior:
Run an app on iOS and run a story with a Firebase Storage video file link:
Video Link

Expected behavior
It should run the firebase storage video file without any problem as it does on android

Smartphone (please complete the following information):

  • Device: iPhone 14 Pro (Simulator)
  • OS: iOS 16.0

progress bar frozens while calling on api inside iconbuttom of footer

Describe the bug

While calling an api call inside a iconButton callback in footer 2 things happens:

  1. if I am not using async/await in iconButton callback with advcontroller.pause() before API call and advcontroller.resume() after API call frozen the progress bar but does not thorws any error and moves to next content without resuming the progressbar.
  2. if I am using async/await in iconbuttom callback with advcontroller.pause() before API call and advcontroller.resume() after API call it gives me following error for advcontroller.resume() : AssertionError
    ('package:flutter/src/animation/animation_controller.dart': Failed
    assertion: line 527 pos 7: '_ticker != null':
    AnimationController.animateTo() called after
    AnimationController.dispose()
    AnimationController methods should not be used after calling dispose.)

To Reproduce
Steps to reproduce the behavior:
here is my implementation of logic:
IconButton(
onPressed: () async {
storyController.pause();
await ref
.read(storyProvider
.notifier)
.likePostById(
postId:
currentStory
.id);
storyController
.resume();

                                                },
                                                icon: Icon(
                                                  Icons.favorite,)),

Expected behavior
to freeze the progress indicator while calling API and resume after completing the API

versions

  • Flutter 3.10.5
  • Dart 3.0.5

Change Background Color

I would like to change StoryView background color for image and video, but there is no where i can find it

Bug in rtl app

Hello Thank you for this wonderful package In persian or rtl applications, this package has bugs, especially in the story and for skip content with gesture
please help

Tweaking to behave a little more like an image gallery

Firstly, thanks for what looks to be an awesome package. It looks really well designed and implemented.

This is probably more of a question than a feature request... my application is more of an "image gallery" than a "story viewer", but your implementation looks super flexible and has a lot of the features I think I am likely to need (eg. playing videos and showing cached images and swiping between them).

I've done a very quick POC using AdvStory.player() and it was pretty simple to get me about80% of the way there.

A few challenges I see in re-purposing advstory as a more general-purpose image gallery are:

  • Hiding the progress indicators. Not sure if there's a good way to hide them totally... setting valueColor and backgroundColor to transparent seems to work but not sure if there's a better way
  • Stopping the timed advancement to the next StoryContent. I saw another issue talking about this... and possibly using the interceptor to reset it. I wonder whether I'm just going to be constantly "fighting" advstory by doing this though.
  • I'd like my users to be able to double-tap/pinch to zoom. Again, I saw another issue where I could possibly add a gesture detector. Just wondering whether using an interceptor might be a better way to do it.

I'm happy to fork and add my own custom logic, but I'd prefer to use the built-in features if I can. However, if you think that trying to use advstory in this way is a terrible idea, I'd also be keen to know that before I get too far down the investigation path.

Update Example Stories & JSON

Is your feature request related to a problem? Please describe.
No a problem, but something useful was taken from first release.

Describe the solution you'd like
The first release had a few different stories and a nice JSON file to see how everything works. Bring back the JSON file. The JSON helped show how to model real world input data and parse it.

Add a couple more different stories so you can see how the JSON should be structured and to get a feel what it's like to advance to the next story when viewing it.

Describe alternatives you've considered
Using the data file from the previous release.

Additional context
Nested data can get a little tricky so it's nice to see how you consume and parse it into different stories.

AdvStory with Provider

This plugin is really awesome, but it only has a little problem when you try to make the stories dynamics with Provider plugin, because when you want to watch the changes of the stories array with provider the AdvStory plugin doesn't redraw and when you click on a story it throw the following error, because it didn't update the list in the widget. โ•โ•โ•ก EXCEPTION CAUGHT BY WIDGETS LIBRARY โ•žโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• The following RangeError was thrown building: RangeError (index): Invalid value: Only valid value is 0: 7

Is there any way to make this plugin work listening to a provider variable ?

Naming is a bit confusing

Is your feature request related to a problem? Please describe.
The terms cluster and story are a bit confusing the way you are using them. I think of a Cluster as a set of Stories. I think of a Story as a set of items/pages/slides. It seems that you are calling each item/slide a story, rather than a story item or page or slide.

storyCount to me would actually be what makes up a cluster. ex a cluster may have 7 stories. so that would be clusterCount: 7 but then that sounds like there are 7 clusters when it actually means there are 7 stories.

Describe the solution you'd like
Redefine/rename clusterCount to storyCount
ex: how many stories are in tray

Redefine/rename storyCount to storyItemCount
ex: how many items within a story

Describe alternatives you've considered
N/A

Additional context
You may not even need the name cluster anywhere, it's a bit confusing.

Awesome job BTW!

Sync Tray with Stories

Screen Shot 2022-09-27 at 20 11 52

Let's say the user browsed the stories and quit the story view in the 7th story. We would expect the 7th story item to be positioned in the middle of the tray. Is this possible? Btw thanks a lot for this great package and awesome documentation.

WidgetStory AnimationController exception

Is your feature request related to a problem? Please describe.
There is no problem, only opportunity.
The widget type is limitless which is great, but what if you want different widget types for say "Image with text" or "3 image rows" or "Video with scrolling text" or "Video with image overlay"?

Describe the solution you'd like
Allow devs to define custom content types with templates. Could be as simple as placing dart files within a content_type or content_template folder: image_with_text.dart, three_image_rows.dart, video_with_scrolling_text.dart or video_with_image_overlay.dart

The syntax in the template file could look something like:
ContentTypeVideoWithScrollingText
or
ContentType.videoWithScrollingText
or
SlideTemplateVideoWithScrollingText
or
SlideTemplate.videoWithScrollingText

Then in the "cluster" json that populates the stories, you could simply specify what content type / content template will be used for each individual slide. ex ImageWithTextSlide, VideoWithScrollingTextSlide, MyCustomTemplateSlide or ContentType.myCustomTemplate or Slide.myNewSlideTemplate along with your built in ImageSlide VideoSlide WidgetContent.

`ContentType: 'VideoWithScrollingText' {
videoUrl: 'https://mysite.com/linktovideo.mp4'
scrollingText: 'this is the text i want to scroll'
}
`

or

`SlideType: 'ImageWithText' {
videoUrl: 'https://mysite.com/linktovideo.mp4'
scrollingText: 'this is the text i want to scroll'
}
`

or

`Template: 'Advertisement' {
videoUrl: 'https://mysite.com/linktovideo.mp4'
Text: 'Order Now!'
link: 'https://mylink.com/ordernow'
backgroundImageUrl: 'https://mysite.com/bgimage.png'
}
`

Describe alternatives you've considered
Hacking and breaking your code

Additional context
Your story player outperforms all other packages I've tried. I appreciate your built in functionality and your opinionated approach as is. I think if you break it up a bit and modularize it a bit, it could become one of the more powerful packages for content display, particularly in this full screen story format. Not sure of your goals with this package though.

Not sure how much I can help with code, I'm not an expert. I've never done a PR and still wrapping my head around your code. I can do product development and map things out no problem, but implementing them into your code might be tough.

I can do a $ bounty to get this implemented with the other features if it can become a priority.

Stop Indicator When Story is Loading

Is your feature request related to a problem? Please describe.
This is a feature request

Describe the solution you'd like
i would love it if the indicators would stop when the content has not load yyet

Decouple to: Adv/Infinite PageView

Is your feature request related to a problem? Please describe.
Advstory is the best performing video playback package i've used. Preloading and caching second to none. Only issue is that you are kinda forced into the story format and into an opinionated way of navigating and gestures.

Describe the solution you'd like
A simple PageView solution that preloads & caches videos. Then the developers can do whatever they want from that point on. Video playback is a huge pain point in flutter and Advstory solves it but kinda forces you into a certain format.

Describe alternatives you've considered
Hacking advstory. Starting from the ground up.

Additional context
There's a huge community need and you would be a great help. Please check out this thread dedicated to it:
https://www.reddit.com/r/FlutterDev/comments/xpwtdr/coming_together_to_work_on_common_issues_every/

There's always a lot of questions on reddit about this...but no solid solution.
https://www.reddit.com/r/FlutterDev/comments/xou6uu/building_a_videodriven_social_app_with_flutter/

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.