Giter VIP home page Giter VIP logo

instagram_stories's Introduction

Instagram Stories

Screenshots

Codacy Badge

Features

  • Supports portrait orientation(only) in iPhone.

  • Image Support

  • Video Support

  • Long press pause and play

  • Manual swipe between stories

  • Left tap and Right-tap gestures to switch between snaps and stories

  • If there is no user interruption, it will automatically move to the next snap or next story, once the progress bar completes.

  • Image caching handled using NSCache.

  • Video caching is handled in the documents directory using FileManager.

  • Users can define the snap index, from where they want to start the snap by setting the handPickedSnapIndex value. In IGHomeController, when instantiating IGStoryPreviewController user can set this value. The below code is just reference and it has been written in IGHomeController.

    let storyPreviewScene = IGStoryPreviewController.init(stories: stories_copy, handPickedStoryIndex: indexPath.row-1, handPickedSnapIndex: 2)

  • Delete snap

  • Clear Image & Video Caches

How To Use

  • Open the project(Instagram_Stories) folder. You can find the Source folder inside.
  • Drag and drop the Source folder into your project.
  • In your project, use the same IGStoryPreviewController.
  • But do not change the default code that we have written in IGStoryPreviewController. You can add code on top of that.
  • Also do not change the collectionView custom cell. Use the same IGStoryPreviewCell.
  • Because all the functionalities are handled in the IGStoryPreviewCell only.
  • If there is any issue or don't know how to configure the Source folder on your project, please raise Github's issues. We will reply as soon as possible.

Requirements

  • iOS 10
  • Xcode 8

We

Contributing

License

All the code here is under MIT license. Which means you could do virtually anything with the code. I will appreciate it very much if you keep an attribution where appropriate.

The MIT License (MIT)

Copyright (c) 2013 ranjit ([email protected])

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

instagram_stories's People

Contributors

boominadhapm avatar boominadhaprakash avatar codacy-badger avatar ranmyfriend avatar tiskender2 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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

instagram_stories's Issues

Images are stretched

Simulator Screen Shot - iPhone Xʀ - 2019-10-24 at 15 39 24
Describe the bug
when we upload images and show it from url using api's it looks stretched how we can fix this?

Video not getting resume when long Pressed

Describe the bug
When the video gets started playing and if i long press the video it pause's but when i leave it doesn't resume instead it skips to the next user story. could you kindly check this.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'any user story which has video in it'
  2. Click on 'Long Press on the Video to pause and leave it'
  3. Scroll down to '....'
  4. See error

Expected behavior
The Video should be resumed to from where it has paused

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: swift
  • Browser Simulator
  • Version iOS 13

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Start with specific snap

Hello!

Thanks for this library which I found it very robust and complete. While it supports to go to a specific story, how can I go to a specific snap before launching the story?

I tried to set lastPlayedSnapIndex before opening the story, but it gets confused and seems that all the progress bars start playing after that index.

Thanks!

I have many warnings

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Screenshot 2020-01-15 at 16 38 19

How to fix this?

Questions & Advices

  • We should not create UIImageView blindly for the Snaps_count. It should be on demand. Because user is going to check the snap one by one, and even we already showing him how many snaps is there under story with help of ProgressBars.
  • CreateSnappers method should not have High_Priority. This is expensive code but it should not happen on Synchronous way. It should happen on Race condition. like it create snap and also app should do other work also.
  • How SDWebImage will be able to get to know UITableViewCell or UICollectionViewCell is getting reused. If its getting reused how come SDWebImageManager stops the Pending Request? If we get base idea on this we could be able to get to know - We should create Operation Queue or SDWebImage itself handle the Queue
  • Is there any better way to clear the Previous story running variables behalf of clearing it on ScrollWillBegin

Pending Things

  • Check for the Auto Slide on the Story Detail @boominadhaprakash
  • Determine some standard time duration for ImageType and the Progress should be like 0...1.0 @boominadhaprakash
  • Play/Resume Story @ranmyfriend
  • Capture the lastPlayedSnap on Story and whenever user is trying visit before going to start index of 0, it should start with lastPlayedSnap and also make ..< lastPlayedIndex to be a Played snap @ranmyfriend
  • Cubic Animated collection view if the index goes to last or user stays in First, In this user try to swipe down, He should be able to dismiss the scene(@note:nicely done in Instagram) @ranmyfriend
  • Change the User Name and Close button text color based on the Background image or video. It should be contrast one @shantharsk
  • Write one helper for AVPlayer and stream from snap.url. Here protocol funcs are (simple Play and give played progress) @shantharsk

Feature to add story with simple add text with different colors.

Hi guys,

I am highly impressed by your work for story views exact similar to Instagram.
I am looking for some workaround on creating add story feature.
Just want to know like if you guys are working on the same as in your demo you have mentioned as "Coming Soon".
If yes then when can I expect it on your repository?

Thanks in advance !!!

Delete a story snap

Thanks for this awesome library.

Can you please add functionality for deleting a snap at runtime.

Not able to delete a snap in the current code.

Thanks in Advance.

Documentation on how to display stories from API

I was trying to implement this awesome library :) but I could not seem to understand how to fetch stories from API. I know there is a function loadAPIResponse but I am not understanding on how to use it. It would be great if you provided an example of both offline and online data.

Move seen stories back with gray tint

Is your feature request related to a problem? Please describe.
Requesting this as an enhancement not at all related to a problem.

Describe the solution you'd like
I would like the seen stories to move at end like it is on other similar social app.

Describe alternatives you've considered
I don't have an idea to do this so requesting here.

Additional context
This library has been amazing, cheers to the devs behind it!

functionality to pause or play the current story

I would like to request the feature to pause and play again from the point where it is paused in the stories section i.e. IGStoryPreviewController

Currently I'm not able to select pause the story when preforming specific actions like share. If it is already in the library. Please let me know what I can use.

Implementation of Text also to the user stories

Is your feature request related to a problem? Please describe.
Its a great framework you have created, respect for both of you bro. I would like to request to add text Story also to it.

Describe the solution you'd like
In the Preview of the Stories adding the text to it.

iPad Rotation

Hello!

I'm using the library for an Universal app with stories, and while on the iPhone I have the orientation locked to portrait, on iPad I support all orientations (since I want to support the multitasking iPad features). This means that it's necessary to support the stories both on landscape and portrait (the library already does this fine while loading the view controller, but it lacks proper rotations of the UI elements, if the device rotates).

Is this something that can be looked on?

Thanks!

How to start playing snaps from some desired index inside a story? Can you suggest something.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Images or videos not load in iOS 10

Describe the bug
when i run in on a iOS 10 simulator it doesn't load or show the stories (images or videos)
maybe it's because of auto layout,

To Reproduce
run app in iOS 10

Expected behavior
it should work!

**Desktop

  • OS: iOS 10

We cannot move to previous story by swiping left

Describe the bug
When we start Story from 2nd Story or any story after 1st from top story list then we can't go to previous Story when do Swipe left

Swipe left story is only working when we go to next by Swipe right and come back by swiping left.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Top Stories'
  2. Click on '2nd Story'
  3. Scroll down to 'Swipe left to go to previous story'
  4. See error

Expected behaviour
It should allow to go to previous story in all condition without check that from which story we started timeline/stroy videos view.

Need pause and resume when redirect to another controller on click button action and pop to story module.

Describe the bug
In my requirement I have implemented Tag button for knowing another product details by redirecting with another controller. The Tag button creation process on this method success case private func startRequest(snapView: UIImageView, with url: String, placeholderImage: UIImage? = nil, aSnapInfo: Snap)

Here If a story have couple of image type stories. when I click on tag button at second index story image and button action fired redirection process at this time you can see the corresponding story pause with 0th index image instead of 1st one. I have checked lot how it could be changed? but I can't trace where it's happening.

Kindly check the attached video.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'Story Module'
  2. Click on 'Tag button which is representing on image story'
  3. See error - Pause and Resume will not working with corresponding Story snap index

Expected behavior
If I open a story > Click on a tag product > Open product detailed view > Go back to story, most of the time it's just like if the story time still went on while I was checking the other product. As a result usually I am when going back directly moved to a new Story. It should sort of "pause" the story and when going back I should start over.

Recorded Video
PauseAndResumeIssuewithCorrespondingSnapIndex.mov.zip

Kindly check the attached video and suggest me how to achieve pause the current snap and start resume will come back from redirect controller?

I know already you have achieved entire snap pause and resume process when long press. But that's not working for my requirement. Please it's bit urgent. I'm excepting your kind help cause I have tried couple of days to achieve this feature.

Failed with error: Cannot Open

I am receiving Failed with error: Cannot Open error on while loading video. Images work as expected but video are throwing cannot open error.

Any example here?

It's a really awesome project. But I don't know where to start after paste the sources to my project.

So is there an example to show how to start to code with this lib?

Show stories with specific snap

I want to start IGStoryPreviewCell from specific start index, myStartIndex for example:

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: IGStoryPreviewCell.reuseIdentifier, for: indexPath) as? IGStoryPreviewCell else {
            fatalError()
        }
        let story = viewModel?.cellForItemAtIndexPath(indexPath)
        cell.story = story
        cell.delegate = self
       cell.STARTINDEX = myStartIndex // how can i do that?
        nStoryIndex = indexPath.item
        return cell
    }

move to next or previous picture tap gesture

Hi, first of all, thanks for this awesome library. Can you please tell us, how to implement "move to next or previous picture on tap gesture" just like instagram and whatsapp?

progress bar not works in iOS 11.0.1

Describe the bug
progress bar not works in iOS 11.0.1

To Reproduce
run project in iOS simulator 11.0.1

Expected behavior
progress bar should start loading and increasing

Desktop (please complete the following information):

  • OS: iOS 11.0.1

Seems image and Video(If Portrait) not displaying full screen

Describe the bug
I can able to see full frame for IGStoryPreViewView and UICollectionView when I change constraint like below,

        NSLayoutConstraint.activate([
            self.leftAnchor.constraint(equalTo: snapsCollectionView.leftAnchor),
            self.topAnchor.constraint(equalTo: snapsCollectionView.topAnchor),
            snapsCollectionView.rightAnchor.constraint(equalTo: self.rightAnchor),
            snapsCollectionView.bottomAnchor.constraint(equalTo: self.bottomAnchor)])

But Seems In IGStoryPreViewCell Y position having 39 instead of 0

To Reproduce
Make build on iPhone 11 Pro Max simulator or device.

Expected behavior
Should have full screen based on IGStoryPreViewView

Screenshots
HierarchyFullview
HierarchyForIGStoryPreViewCell

Desktop (please complete the following information):

Smartphone (please complete the following information):

  • Xcode: 11.5
  • Device: iPhone 11 Pro Max
  • iOS: 13.5
  • OS: 10.15.5
  • Version [e.g. 22]

Additional context
FYI: I have tested your source on iOS 13.5, so I have added cv.contentInsetAdjustmentBehavior = .never on IGStoryPreviewView collectionView, cause automaticallyAdjustsScrollViewInsets is depreciated in iOS 11 automaticallyAdjustsScrollViewInsets = false

In IGStoryPreviewController class I can't see any constraint related code for IGStoryPreviewView?
How get it frame on there?
AnimatedCollectionViewLayout manage and handle snapsCollectionView super view frame on IGStoryPreviewView class?

Kindly suggest me to make full screen and the above clarifications.

How to display any stories

Hi, I want to open fifth snap . I think first snap default .
1- A User adds 5 snaps.
2- B user see 4 snaps
3- B user click and see fifth snaps

I tried change this class -> IGStoryPreviewController.swift
cell.willDisplayCellForZerothIndex(with: cell.story?.lastPlayedSnapIndex ?? 0) -> cell.willDisplayCellForZerothIndex(with: 4)
But its not work for me . How to show any snap ?

Snap ImageView background color

I changed snap imageview's content mode from here

    private func createSnapView() -> UIImageView {
        let snapView = UIImageView()
        snapView.translatesAutoresizingMaskIntoConstraints = false
        snapView.tag = snapIndex + snapViewTagIndicator
        snapView.backgroundColor = .black
        snapView.contentMode = .scaleAspectFit
        scrollview.addSubview(snapView)

Screen Shot 2020-03-05 at 13 23 01

My problem is that When I use a photo that doesn't fit the screen, Aspect fit shows it with blank spaces. Those space color is white, I want to change it to black. So I changed imageview's backgroundcolor but it didn't work. Do you have any idea?

Work with server

How can I request server to get story before swipe to next story?

When story moves automatically to another one I can request to server than show story.
But when user swipe the screen for another story how can I request to the server?

is this demo project available through storyboard ?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Xcode vs Android Studio

Hello everyone, I am an android developer, the work they have done for xcode is excellent but I would like to know if they have it also available for the android studio IDE

Firebase Implementation

Seems like a good project but as it's not compatible with Firebase I am unable to use it.
Implemented the same structure in the backend but with Firebase you will get the following data back.
After trying more than a day nearly every possibility of converting the DataSnapshot from Firebase to the right structure I give up..

Optional({
    count = 1;
    stories =     {
        id = a1;
        "last_updated" = 15047999962;
        snaps =         {
            id = c1;
            "last_updated" = 12h;
            "mime_type" = video;
            url = "http://mirrors.standaloneinstaller.com/video-sample/small.mp4";
        };
        "snaps_count" = 1;
        user =         {
            id = b1;
            name = Teresa;
            picture = "https://randomuser.me/api/portraits/med/women/1.jpg";
        };
    };
})

If someone has used this with firebase already, please help out.
Otherwise please implement a functionality of converting it to the right structure.

Any additional general documentation would be very helpful!

Video Cache support

Is your feature request related to a problem? Please describe.
Videos redownload from service when we reopen story.

Describe the solution you'd like
It's got to be a video cache.

Optional swipe up for more action

I needed to replicate the feature of how Instagram gives an option to swipe up to open a link only for specific stories. Is it possible at all to display an arrow with up direction also?

creating a variable to start a story from specific snap

Hi there

I am trying to add a variable to start a story from specific snap in IGStoryPreviewController

init(layout:IGLayoutType = .cubic,stories: IGStories,handPickedStoryIndex: Int) {
        self.layoutType = layout
        self.stories = stories
        self.handPickedStoryIndex = handPickedStoryIndex
        super.init(nibName: nil, bundle: nil)
    }

here I want to add something like handPickedSnapIndex so I can do sth like

let storyPreviewScene = IGStoryPreviewController.init(stories: stories_copy, handPickedStoryIndex: indexPath.row-1, handPickedSnapIndex: 6)

Can you help me with this?

v0.1 Beta Release

  • Apply MVVM in IGStoryPreviewViewController
  • Persist lastPlayedSnapIndex value for stories
  • Fix CubicAnimatedLayout issue
  • Concentrate on GUI Basic padding issues

Using Alamofire response as JSON data

Hi there

typealias CompletionHandler = ([String:Any]) -> ()
    func getStoriesNF (completion: @escaping CompletionHandler)  {

        let parameters: Parameters = ["user_id": userID]

        Alamofire.request("https://website.com/stories.php", method: .post, parameters: parameters).validate().responseJSON { response in
            switch response.result {
            case .success:
                if let json = response.result.value {
                        completion(json)
                }
            case .failure(_):
                print("hata")
            }
        }
    }

How can I use this response within loadAPIResponse function?

Can you please help me on this?

Video support

Hello guys is there any chance to have video support also for the stories ?

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.