ramonszo/zuck.js

A javascript library that lets you add stories EVERYWHERE.

Hello, friend 👋

My name is Ramon Souza and I'm a full-stack developer. I also ♥ developing some ideas while studying new web technologies.

Take a look at my portfolio here.

---

zuck.js's Issues

React Port

Seeing Stories is basically an FB clone on a pre-existing idea, I feel like it is only right that there needs to be a React port to it.

I'll work on it!

Use a more permissive license

IANAL but GPL is too restrictive for a JS library. LGPL would be nice, apache better, or BSD if you want to make sure your name is kept on all derivatives.

Linktext attribute of Story items does not work.

The linkText attribute of the story item does not work. I believe the issue is parseItems function.

                    'src': a.getAttribute('href'),
                    'length': a.getAttribute('data-length'),
                    'type': a.getAttribute('data-type'),
                    'time': a.getAttribute('data-time'),
                    'link': a.getAttribute('data-link'),
                    'preview': img.getAttribute('src')
                });

It ignores linkText field completely.

if we change animation duration of a video item, then timer completed previously as compare to video.

Back does not go to the previous person's story

Hello, when I am viewing a video/image and I hit back repeatedly, I go back to that person's first video/image.

From there if I continue hitting back, nothing happens, though I'd expect to view the previous person's stories.

Is this intentional? What would be involved in correcting it?

close story

I am using zuck.js in my ionic project I have tried many thing but can't find an option to close story manually. just like WhatsApp when we swipe down story got close.

any idea ? help please

Thank you!

Thank you for making this open source! seriously, I'm laughing my ass off after seeing this, you should create some new paradigm, something like SaaJ (Software as a Joke) 😂 😂 😂 😂

Can't click link button, and back button

In new update can't click link and back button. Also screen flowing bug not fixed. Just test it long height (scrolling) page.

How do I add left and right arrows?

Hi,

I removed the "mousemove()" function to cancel the drag. I put the left and right arrows into the zuck.js. I've defined the setting called arrowControl.

(option("arrowControl") ? '<div class="story-left"><i class="icon-arrow-back"></i></div>' : "")
(option("arrowControl") ? '<div class="story-right"><i class="icon-arrow-forward"></i></div>' : "")

It's okay up here. I think click events will be done in the function named navigateItem. But I couldn't.

When the left arrow is clicked, the slider has to go back. In the same way, the slider should go forward when the right arrow is clicked. Can you help me? @ramon82

Thank you.

Multiple story arrays on a single page

Trying to pull multiple arrays of stories to different divs on a single page. The first array of stories plays, but everything after that simply pulls up a grey screen. Doing some digging, it looks like there are multiple zuck modals being generated, but only one is being affected by the content.

Cannot read property 'querySelectorAll' of undefined at window.ZuckitaDaGalera.window.Zuck.q.addItem

Hi guys ,
I'm using Zuck for a project, my backend is made with Laravel in php, and I use Vuejs in addition to laravel views for the FrontEnd.

here is my Zuck vue component:

<template>
    <div id="stories">
    </div>
</template>

<script>
    import "zuck.js/zuck.min";

    Date.prototype.getUnixTime = function() { return this.getTime()/1000|0 };
    if(!Date.now) Date.now = function() { return new Date(); };
    Date.time = function() { return Date.now().getUnixTime(); };

    export default {
        props: ['stories'],
        data() {
            return {
                orderedStories : []
            }
        },
        mounted (){
            let vm = this;
            for(let Story in vm.stories){
                    const escortId = vm.stories[Story].escort_id;
                    const escortName = vm.stories[Story].escort.user.name;
                    const escortAvatar = vm.stories[Story].escort.profile_picture?'/'+vm.stories[Story].escort.profile_picture.url:'/img/defaultAvatar.png';
                    const storyType = vm.stories[Story].type==="PIC"?"photo":"video";
                    const storyLength = storyType==="video"?0:10;
                    const storySrc = '/'+vm.stories[Story].upload.url;
                    const StoryTime = new Date(vm.stories[Story].updated_at).getUnixTime();
                    const StoryText = vm.stories[Story].text?vm.stories[Story].text:'';
                    const NewStoryItem = vm.buildItem(Story,storyType,storyLength,storySrc,storySrc,escortId,false, StoryTime, StoryText );
                    let alreadyStory= false;
                    vm.orderedStories.map(function (orderedStory) {
                        console.log(orderedStory)
                        if (orderedStory.id === escortId){
                            orderedStory.items.push(NewStoryItem);
                            if (orderedStory.lastUpdated>StoryTime) orderedStory.lastUpdated = StoryTime;
                            alreadyStory= true;
                        }
                    });
                    if (alreadyStory===false){
                        const newStory = {
                            id: parseInt(escortId),
                            photo: escortAvatar,
                            link:"/profile/"+escortId,
                            lastUpdated: StoryTime,
                            name: escortName,
                            items: [NewStoryItem]
                        };
                        vm.orderedStories.push(newStory)
                    }
            }
            this.initStories();
        },
        methods: {
            buildItem: function(id, type, length, src, preview, link, seen, time, linkText){
                return {
                    "id": parseInt(id),
                    "type": type,
                    "length": length,
                    "src": src,
                    "preview": preview,
                    "link": "/profile/"+link,
                    "linkText": linkText,
                    "seen": seen,
                    "time": time
                };
            },
            initStories: function(){
                let stories = new Zuck('stories', {
                    backNative: true,
                    autoFullScreen: false,
                    skin: 'Snapgram',
                    avatars: true,
                    list: false,
                    cubeEffect: true,
                    localStorage: true,
                    stories: this.orderedStories
                });
                document.body.style.display = 'block';
            }
        }
    }
</script>

When Mounted, the component take the stories and build items like Zuck need in the orderedStories array. (The process look if Story's owner already own a Story in the ordredStories array, if yes, it push the item, if not it creates the story and push the item !).
It looks first amazing in local, but when putted in production server and when there is more than 1 story, stories appears nice, but when click on them, it shows the story but with this error message :
app.js:137203 Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined at window.ZuckitaDaGalera.window.Zuck.q.addItem (app.js:137203) at app.js:137203 at t (app.js:137203) at window.ZuckitaDaGalera.window.Zuck.q.add.q.update (app.js:137203) at app.js:137203 at t (app.js:137203) at k (app.js:137203) at T (app.js:137203) at onEnd (app.js:137203) at Object.next (app.js:137203)

and then, story appears in a list and all is messed up (utill I clear localstorage, then stories appears again)

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

It occurs on an Android app using Ionic 3. After it happens, I'm unable to open the modal again.

The error log provided this link about the issue https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

I tested it in another faster phone and the problem doesn't occur, I believe it is because the promise is resolved before the call to pause in that case.

Story Item modal get out of screen when there are some context below story carousel

Hi,
I am facing a strange glitch while implementing stories in my project. Story Item modal get out of screen when scroller is there to show some information beneath story div.

how can we stop timebar untill the images is not loaded properly like in other apps

how can we stop timebar untill the images is not loaded properly like in other apps

Needed Loader before Videos plays, Code extended, only not working on IDevices

Hi,

I needed loader before video plays so I updated code.
I tested it on:
[Firefox, Chrome] (Windows 10)
[Chrome, Safari] (Macbook)
[Samsung C7, IPhone 6S] (mobiles)

Plugin is working fine on all except Safari (Macbook), IPhone 6S (mobiles)
Clicking on story, modal opens up. Animation stops, first Video loads and plays but next item does not loads.
Can you please check code what is missing something in code only on IDevices.

here is link to check story:
https://beta.halonet.io/webhub/mambaday01/hub

Source code links:
https://beta.halonet.io/assets/story/story_custom.js
https://beta.halonet.io/assets/story/story.js

Thanks.

Needs (more) React

Because this project was heavily inspired by Facebook, I think the project should have the whole user interface implemented by React.

React is a technology that Facebook heavily relies on, including their web and native applications.

Story Item Seen By

There is callback onView for story where we get the story id. Do we have similar callback that we can specify which item is seen by the user and also render the list of seen users on each item?

stories.remove(storyId) not defined

This is throwing exception. remove() is not defined as a method

Event on next story

Is there any event I can catch when next story is loaded or being loaded?

Story Order Get Confuse When User Fast Swipe To Previous One

I tried on https://rawgit.com/ramon82/zuck.js/master/index.html#!stories here and aware that when I swipe little bit fast all order changes and the first story disappear the only overlay is visible like that https://prnt.sc/lz37ro. @ramon82

Stop timer

A question where someone maybe can give guidance:

How can I stop the timing when viewing the story? In the app I'm coding on I need it when someone clicks on a custom button that's displayed for each story (which then opens a popup).

Drag thumbnails on desktop with mouse or buttons (no touch), any setting opt ?

Thanks Ramon! I couldn't dragcarousel thumbnails with "mouse on desktop", is there the way, or to include arrow buttons? This case an additional code would be precious

Package and publish to npm.

Hello Ramon,

Could you please package this and publish to npm?

Videos on iOS play in full screen above the plugin ui

It happens in an Ionic 3 app using WKWebView.

Instead of playing inline, the video plays fullscreen and the controls are visible. If I swipe left or right or if I tap to go to the next slide it does nothing. I tried playing the demo page on safari and it works fine but not inside the app.

If you need more information please let me know.

How to disable touch actions

I need to disable the touch actions when viewing a story (e.g view next story, or previous) so that the custom element (in my case a button) is clicked and not the next story is viewed.

Any advice on how to go about that?

Add custom action when click on link

Is there a way to add custom action when click on link instead of redirect to a new page?
I'm using this with Angular and want to do a routing with Angular router instead.

Thanks

Open story modal by default or by clicking a button

Hi,
1 - Is there any option to open story modal on page loads without clicking story item?
2- Is there any option to open story modal by clicking a button which will open first story item?
thanks

Cannot read property 'hasModal' of undefined

Updating to version 1.5.2 and got this bug

Cannot read property 'hasModal' of undefined at ZuckModal (zuck.js:408) at new ZuckJS (zuck.js:964)

Uncaught (in promise) TypeError: Document not active

Hi guys,

Even if Fullscreen mode is true or false, there is an error occurring in console; "Uncaught (in promise) TypeError: Document not active". As a result of my research I could not solve the problem. Can you help me? @ramon82

How to select an item with particular ID

I am trying to add custom filter to an Item with a particular ID

Go back when clicking on left half

Hi!
When I click on a story it goes ahead with the next one.
I would like to go ahead If I click on the right half and go back to previous story if I click on the left half, just like Instagram.
Thank you!

Initiate slider after media loaded in DOM

The slider should start, only after the image/video is loaded. Otherwise, there are possibilities to miss a story if the image takes more time to load than the slider loading time.

Stories come with an horizontal and vertical overflow

Hi!
The stories come with a horizontal and vertical overflow on the pages of a height greater than 100vh.
Tested on :

Chrome Version 70.0.3538.77 (Build officiel) (64 bits)

Opera Version 56.0.3051.52

Firefox Quantum 62.0.3

RTL Support

Hi,
Is there RTL support for this library? If not, will RTL support come in a future release?
Thanks.

Plugin not working with videos on Safari (IPhone, Macbook)

Hi,

Plugin is not working with videos on IPhone (Safari), Macbook (Safari). Before video loads it jumps to next video.
Ref Url:
https://beta.halonet.io/main_zuck.php

Trying to make it dynamic using php in DRUPAL 7

zuck.js?pcdltd:893 Uncaught TypeError: Cannot read property 'parentNode' of undefined
at playVideoItem (zuck.js?pcdltd:893)
at createStoryViewer (zuck.js?pcdltd:503)
at callback (zuck.js?pcdltd:704)
at onOpen (zuck.js?pcdltd:227)
at Object.show (zuck.js?pcdltd:751)
at HTMLDivElement.story.onclick (zuck.js?pcdltd:857)

This is my code
var stories =

                                    new Zuck('stories', {
				backNative: true,
				autoFullScreen: skins[skin]['autoFullScreen'],
				skin: skin,
				avatars: skins[skin]['avatars'],
				list: skins[skin]['list'],
				localStorage: true,
				stories: [
                                       
                                                {
                                                    id: "<?php print $fields['nid']->content; ?>",
						photo: "<?php print $fields['field_influenceur']->content; ?>",
						name: "<?php print $fields['title']->content; ?>",
						link: "https://ramon.codes",
						lastUpdated: "<?php print $fields['changed']->content; ?>",
						
                                                        items: [
                                                   
							buildItem("<?php print $fields['title']->content; ?>-1", "photo", 3, "<?php print $fields['field_influenceur']->content; ?>", "https://pbs.twimg.com/media/C75V20SWsAAw5fO.jpg:small", '', false, "<?php print $fields['changed']->content; ?>"),
							buildItem("<?php print $fields['title']->content; ?>-2", "photo", 3, "<?php print $fields['field_influenceur_1']->content; ?>", "https://pbs.twimg.com/media/C7oA3btX0AE9hAx.jpg:small", 'https://ramon.codes', false, "<?php print $fields['changed']->content; ?>"),
							buildItem("<?php print $fields['title']->content; ?>-3", "video", 0, "<?php print $fields['field_video']->content; ?>", "https://pbs.twimg.com/media/C7oA3btX0AE9hAx.jpg:small", '', false, "<?php print $fields['changed']->content; ?>")
                                                            ]
                                                   
					
                                                }<?php print ','; ?>
                                                
				]
                                   
			});

Video and time bugs

Why the video stories doesn't work on mobile ? and why we see those numbers instead of time ?

Logo proposal

Hello @ramon82 , today while exploring GitHub looking for interesting projects found yours and I would love to contribute by designing a logo for it since I'm a designer in development and an open source enthusiast. We would be working together to create the design that fits best. Of course it's totally free and you can quit whenever you want. In case you agree, please share any preferences you may have about colours, shapes, etc.

Kind regards.

Typo in npm description

https://www.npmjs.com/package/zuck.js

I found a typo on npm description, same as #8 .
In section "Stories structure example".

{
    id: "",               // story id 
    photo: "",            // story photo (or user photo) 
    name: "",             // story name (or user name) 
    link: "",             // story link (useless on story generated by script) 
    lastUpdated: "",      // last updated date in unix time format 
    seem: false,          // set true if user has opened - if local storage is used, you don't need to care about this  
 
    items: [              // array of items 
        // story item example 
        {
            id: "",       // item id 
            type: "",     // photo or video 
            length: 3,    // photo timeout or video length in seconds - uses 3 seconds timeout for images if not set 
            src: "",      // photo or video src 
            preview: "",  // optional - item thumbnail to show in the story carousel instead of the story defined image 
            link: "",     // a link to click on story 
            linkText: "", // link text 
            time: "",     // optional a date to display with the story item. unix timestamp are converted to "time ago" format 
            **seem: false**   // set true if current user was read - if local storage is used, you don't need to care about this 
        }
    ]
}

The buttons not work in Windows Chrome desktop and android mobile

Hi there,

This is a really good library for stories. One thing I notice though is that for our Shop Now buttons, they are not working in Chrome desktop and mobile. Lemme give you this as an example: http://feel22.com

And it is possible to insert Google Analytics code, right? To make sure that every click will fire an event to Google Analytics. I'd really appreciate your help, man. Thank you so much!

custom viewer template to add title/text

Ramon, Great work with the library.
Is there a way to make a text only post or be able to make custom template viewer like adding title and description with a background image maybe.

Syntax error: Unknown word (39:93) while importing zuck.css locally

I got an error while importing zuck.css from node_modules using @import "~zuck.js/zuck.css"; in create-react-app . Here is the snippet of the code that I think produces the error :

#zuck-modal { outline: 0!important; overflow: hidden; position: fixed; background: rgba(0, 0, 0, 0.75); 0; z-index: 100000; font-size: 14px; font-family: inherit; }

Thank you.

Implementation in carousel

Hi Ramon
First of all thanks for this awesome library. I am planning to use it in one of my project. Since I didnt get good examples on web I am opening this ticket.
I have carousels in my project like this-->

I want to implement stroies on each carousel. Can you briefly tell me if its possible ?
If so a liittle help or a small example is appreciable.
Thanks in Advance

Using custom elements

Hello,

Is it possible to use custom elements on images? Like adding button or any other html element?

I found I could do it with onRender callback. But I'll be happy if it's possible to call Angular functions from the added elements like a button.

Close modal programatically

First of all, thank you for this plugin!

I'm using this in ionic 3, and as you say in the docs, backNative is set to false. I would like to implement the backNative functionality using ionic, but for that I need some function that I can trigger when the back button is pressed.

Is there a function to do that available or a way I can implement it?

How to Integrate with React.js

Hi. .
How to integrate with React.js

Custom link to open stories

I am working with zuck.js javascript library to show some stories on my website.

Instead of placing the avatar and the username on the website I prefer to integrate it as a link in my navigation. What's the best way to achieve this?

Thanks for your help!

The demo site runs bad on iOS

Hi,

Cool project!
Here is my experience with the demo live site on my iPhone 7 Plus:

Bad scrolling (i.e. overflow not set to "touch"), animations are very choppy, videos do not play inline (no "playsinline"), unable to swipe to dismiss. The last one is not a big deal, but the others are crucial.

Para android studio

Está disponible

Typo in Story Struct? seem: -> should be 'seen'?

In the Stories Struct example, one of the properties is called seem.
seem: false, // set true if user has opened...

I think it should be 'seen'