stories-react - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

dist/index.esm.js

@@ -1,2 +0,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import{createContext as t,useState as r,useRef as o,Fragment as i,useEffect as u,useContext as s,useMemo as c}from"react";var l=function(){return l=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},l.apply(this,arguments)},d=t({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var a=Object.freeze({LEFT:"left",RIGHT:"right"}),v="Actions-styles_left__eky50",f="Actions-styles_right__zguoH";function y(t){var u=t.onNextClick,s=t.onPrevClick,c=t.onPause,d=t.onResume,y=r(!1),m=y[0],h=y[1],p=o(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(p.current),p.current=setTimeout((function(){c(),h(!0)}),200)}function g(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(p.current),m)return d(),void h(!1);d(),e!=a.LEFT?u():s()}function w(e){return{onMouseUp:function(n){return g(e,n)},onTouchEnd:function(n){return g(e,n)},onTouchStart:function(e){return _(e)},onMouseDown:function(e){return _(e)}}}return e(i,{children:[n("div",l({className:v},w(a.LEFT)),void 0),n("div",l({className:f},w(a.RIGHT)),void 0)]},void 0)}function m(){return s(d)}var h="ProgressBar-styles_wrapper__oqUCo",p="ProgressBar-styles_bar__x0O50";function _(e){var t,i,s,c,d,a=m().defaultDuration,v=o(null),f=o(null),y=r(!1),_=y[0],g=y[1],w=0,x=.1;return u((function(){e.isPaused?g(!1):e.isActive?g(!0):g(!1)}),[e.isActive,e.isPaused]),u((function(){e.isActive&&v.current&&(v.current.style.width="0px")}),[e.isActive]),u((function(){var n;v.current&&(e.hasStoryPassed?v.current.style.width="".concat(null===(n=null==f?void 0:f.current)||void 0===n?void 0:n.offsetWidth,"px"):e.isActive||(v.current.style.width="0px"))}),[e.hasStoryPassed,e.isActive]),t=function(n){var t;v.current&&f.current&&((w=Number((v.current.style.width||"1px").slice(0,v.current.style.width.length-2))||0)>f.current.offsetWidth?g(!1):(x=(null===(t=null==f?void 0:f.current)||void 0===t?void 0:t.offsetWidth)/((e.story.duration||a)/n),v.current.style.width="".concat(w+x,"px")))},i=_,s=o(),c=o(),d=o(t),u((function(){d.current=t}),[t]),u((function(){return!1!==i?(s.current=requestAnimationFrame((function e(n){if(null!=c.current){var t=n-c.current;d.current(t)}c.current=n,s.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(s.current),s.current=null,c.current=null}):function(){s.current&&(s.current=null),cancelAnimationFrame(s.current),c.current=null}}),[i]),n("div",l({className:h,ref:f},{children:n("div",{className:p,ref:v},void 0)}),void 0)}var g="progress-styles_wrapper__qQPyW";function w(e){var t=m().stories;return n("div",l({className:g,style:{gridTemplateColumns:"repeat(".concat(t.length,",1fr)")}},{children:t.map((function(t){return n(_,{hasStoryPassed:t.index<e.activeStoryIndex,isActive:t.index===e.activeStoryIndex,story:t,isPaused:t.index===e.activeStoryIndex&&e.isPaused},t.index)}))}),void 0)}var x=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),M="Story-styles_wrapper__oJP7j",S="Story-styles_header__-rnWL",P="Image-styles_image__gnfW1";function C(e){return u((function(){e.onPause()}),[]),n("img",{className:P,src:e.story.url,alt:"story",onLoad:function(){setTimeout((function(){e.onResume()}),4)}},void 0)}var N,T="Video-styles_video__BykuO",I="Video-styles_loaderWrapper__TqVWk",O="Video-styles_loader__FxxSV",A="Video-styles_soundIcon__ZvYXE";function D(e){return"off"===e.type?n("svg",l({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):n("svg",l({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var E="RSIsMute",b="undefined"==typeof window?{}:window;function k(t){var s,c=m().isPaused,d=r("true"===(null===(s=null==b?void 0:b.localStorage)||void 0===s?void 0:s.getItem(E))),a=d[0],v=d[1],f=r(!1),y=f[0],h=f[1],p=o(null);function _(e){var n;null===(n=null==b?void 0:b.localStorage)||void 0===n||n.setItem(E,String(e)),v(e)}return u((function(){t.onPause(),h(!0)}),[]),u((function(){p.current&&(!c||p.current.paused?p.current.play().catch((function(){var e;_(!0),null===(e=p.current)||void 0===e||e.play()})):p.current.pause())}),[c]),e(i,{children:[e("video",l({className:T,ref:p,playsInline:!0,"webkit-playsinline":"",controls:!1,src:t.story.url,onLoadedData:function(){setTimeout((function(){t.onResume(),h(!1)}),4)},muted:a},{children:[n("source",{src:t.story.url,type:"video/mp4"},void 0),n("source",{src:t.story.url,type:"video/webm"},void 0),n("source",{src:t.story.url,type:"video/ogg"},void 0),n("p",{children:"Video not supported"},void 0)]}),void 0),n("div",l({className:A,onClick:function(){return _(!a)}},{children:n(D,{type:a?"off":"on"},void 0)}),void 0),y&&n("div",l({className:I},{children:n("div",{className:O},void 0)}),void 0)]},void 0)}null===(N=null==b?void 0:b.localStorage)||void 0===N||N.setItem(E,"true");var W="CustomComponents-styles_component__w87Wx";function z(e){return n("div",l({className:W},{children:n(e.story.component,{pause:e.onPause,resume:e.onResume,story:e.story},void 0)}),void 0)}var R="SeeMore-styles_seeMoreWrapper__kwjif",F="SeeMore-styles_defaultSeeMore__-B1QW";function V(t){return t.story.seeMore?n("button",l({type:"button",onClick:function(){t.onSeeMoreClick()},className:R},{children:function(){var r=t.story.seeMore,o=typeof r;if(["string","boolean"].includes(o)){var i="string"===o?r:"See More";return e("div",l({className:F},{children:[n("span",{children:"^"},void 0),n("p",{children:i},void 0)]}),void 0)}return"function"===o?n(t.story.seeMore,{},void 0):t.story.seeMore}()}),void 0):null}var j="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",U="SeeMoreComponent-styles_closeIcon__LMm3b";function L(t){return t.story.seeMore&&t.story.seeMoreComponent?e("div",l({className:j},{children:[n("button",l({className:U,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?n(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function B(t){var o=r(!1),i=o[0],s=o[1];return u((function(){s(!1)}),[t.story]),e("div",l({className:M},{children:[t.story.type===x.IMAGE?n(C,l({},t),void 0):t.story.type===x.VIDEO?n(k,l({},t),void 0):t.story.type===x.COMPONENT?n(z,l({},t),void 0):null,t.story.header&&n("div",l({className:S},{children:"function"==typeof t.story.header?n(t.story.header,{},void 0):t.story.header}),void 0),n(V,{onSeeMoreClick:function(){var e,n;t.onPause(),s(!0),null===(n=(e=t.story).onSeeMoreClick)||void 0===n||n.call(e,t.story.index)},story:t.story},void 0),i&&n(L,{story:t.story,onClose:function(){t.onResume(),s(!1)}},void 0)]}),void 0)}var q="styles_main__-0FEu";function H(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}function G(t){var i,s,a,v,f,m,h,p=t.stories,_=void 0===p?[]:p,g=t.width,x=void 0===g?"100%":g,M=t.height,S=void 0===M?"100%":M,P=t.onStoryChange,C=void 0===P?function(){}:P,N=t.currentIndex,T=void 0===N?0:N,I=t.defaultDuration,O=void 0===I?1e4:I,A=t.onAllStoriesEnd,D=void 0===A?function(){}:A,E=t.onStoriesStart,b=void 0===E?function(){}:E,k=c((function(){return function(e,n){var t=0;return e.map((function(e,r){var o=e.duration||n,i=o+H();return i===t&&(i=o+H(6)),t=i,l(l({},e),{index:r,calculatedDuration:i})}))}(_,O)}),[_,O]),W=r(),z=W[0],R=W[1],F=_.length-1,V=r(!1),j=V[0],U=V[1],L=o(!1),G=o(!1);function Q(){L.current||(null==z?void 0:z.index)!==F||(D(),L.current=!0),(null==z?void 0:z.index)!==F&&R((function(e){if(!e)return k[0];var n=(null==e?void 0:e.index)+1;return k[n]}))}function J(){U(!0)}function X(){U(!1)}u((function(){G.current||(G.current=!0,b())}),[b]),u((function(){var e=k[T];e&&R(e)}),[T,_]),u((function(){z&&C(z.index)}),[z]),s=function(){Q()},a=null!==(i=null==z?void 0:z.calculatedDuration)&&void 0!==i?i:null,v=j,f=o(),m=o(a),h=o(Date.now()),u((function(){f.current=s}),[s]),u((function(){m.current=a}),[a]),u((function(){if(null!==a&&!1===v){h.current=Date.now();var e=setTimeout((function(){f.current()}),m.current);return function(){clearTimeout(e)}}return function(){}}),[a,v]),u((function(){v&&(m.current=m.current-(Date.now()-h.current))}),[v]);var Y={stories:k,width:x,height:S,defaultDuration:O,isPaused:j};return z?n(d.Provider,l({value:Y},{children:e("div",l({className:q,style:{width:x,height:S}},{children:[n(w,{activeStoryIndex:z.index,isPaused:j},void 0),n(B,{onPause:J,onResume:X,story:z},z.index),n(y,{onNextClick:Q,onPrevClick:function(){0!==(null==z?void 0:z.index)&&R((function(e){if(!e)return k[0];var n=(null==e?void 0:e.index)-1;return k[n]}))},onPause:J,onResume:X},void 0)]}),void 0)}),void 0):null}export{G as default};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import{createContext as t,useState as r,useRef as o,Fragment as i,useEffect as u,useContext as s,useMemo as c}from"react";var l=function(){return l=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var o in n=arguments[t])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},l.apply(this,arguments)},d=t({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var a=Object.freeze({LEFT:"left",RIGHT:"right"}),v="Actions-styles_left__eky50",f="Actions-styles_right__zguoH";function y(t){var u=t.onNextClick,s=t.onPrevClick,c=t.onPause,d=t.onResume,y=r(!1),m=y[0],h=y[1],p=o(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(p.current),p.current=setTimeout((function(){c(),h(!0)}),200)}function g(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(p.current),m)return d(),void h(!1);d(),e!=a.LEFT?u():s()}function w(e){return{onMouseUp:function(n){return g(e,n)},onTouchEnd:function(n){return g(e,n)},onTouchStart:function(e){return _(e)},onMouseDown:function(e){return _(e)}}}return e(i,{children:[n("div",l({className:v},w(a.LEFT)),void 0),n("div",l({className:f},w(a.RIGHT)),void 0)]},void 0)}function m(){return s(d)}var h="ProgressBar-styles_wrapper__oqUCo",p="ProgressBar-styles_bar__x0O50";function _(e){var t,i,s,c,d,a=m().defaultDuration,v=o(null),f=o(null),y=r(!1),_=y[0],g=y[1],w=0,x=.1;return u((function(){e.isPaused?g(!1):e.isActive?g(!0):g(!1)}),[e.isActive,e.isPaused]),u((function(){e.isActive&&v.current&&(v.current.style.width="0px")}),[e.isActive]),u((function(){var n;v.current&&(e.hasStoryPassed?v.current.style.width="".concat(null===(n=null==f?void 0:f.current)||void 0===n?void 0:n.offsetWidth,"px"):e.isActive||(v.current.style.width="0px"))}),[e.hasStoryPassed,e.isActive]),t=function(n){var t;v.current&&f.current&&((w=Number((v.current.style.width||"1px").slice(0,v.current.style.width.length-2))||0)>f.current.offsetWidth?g(!1):(x=(null===(t=null==f?void 0:f.current)||void 0===t?void 0:t.offsetWidth)/((e.story.duration||a)/n),v.current.style.width="".concat(w+x,"px")))},i=_,s=o(),c=o(),d=o(t),u((function(){d.current=t}),[t]),u((function(){return!1!==i?(s.current=requestAnimationFrame((function e(n){if(null!=c.current){var t=n-c.current;d.current(t)}c.current=n,s.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(s.current),s.current=null,c.current=null}):function(){s.current&&(s.current=null),cancelAnimationFrame(s.current),c.current=null}}),[i]),n("div",l({className:h,ref:f},{children:n("div",{className:p,ref:v},void 0)}),void 0)}var g="progress-styles_wrapper__qQPyW";function w(e){var t=m().stories;return n("div",l({className:g,style:{gridTemplateColumns:"repeat(".concat(t.length,",1fr)")}},{children:t.map((function(t){return n(_,{hasStoryPassed:t.index<e.activeStoryIndex,isActive:t.index===e.activeStoryIndex,story:t,isPaused:t.index===e.activeStoryIndex&&e.isPaused},t.index)}))}),void 0)}var x=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),P="Story-styles_wrapper__oJP7j",M="Story-styles_header__-rnWL",S="Image-styles_image__gnfW1";function C(e){return u((function(){e.onPause()}),[]),n("img",{className:S,src:e.story.url,alt:"story",onLoad:function(){setTimeout((function(){e.onResume()}),4)}},void 0)}var N,T="Video-styles_video__BykuO",I="Video-styles_loaderWrapper__TqVWk",O="Video-styles_loader__FxxSV",A="Video-styles_soundIcon__ZvYXE";function D(e){return"off"===e.type?n("svg",l({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):n("svg",l({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:n("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var E="RSIsMute",b="undefined"==typeof window?{}:window;function k(t){var s,c=m().isPaused,d=r("true"===(null===(s=null==b?void 0:b.localStorage)||void 0===s?void 0:s.getItem(E))),a=d[0],v=d[1],f=r(!1),y=f[0],h=f[1],p=o(null);function _(e){var n;null===(n=null==b?void 0:b.localStorage)||void 0===n||n.setItem(E,String(e)),v(e)}return u((function(){t.onPause(),h(!0)}),[]),u((function(){p.current&&(!c||p.current.paused?p.current.play().catch((function(){var e;_(!0),null===(e=p.current)||void 0===e||e.play()})):p.current.pause())}),[c]),e(i,{children:[e("video",l({className:T,ref:p,playsInline:!0,"webkit-playsinline":"",controls:!1,src:t.story.url,onLoadedData:function(){setTimeout((function(){t.onResume(),h(!1)}),4)},muted:a},{children:[n("source",{src:t.story.url,type:"video/mp4"},void 0),n("source",{src:t.story.url,type:"video/webm"},void 0),n("source",{src:t.story.url,type:"video/ogg"},void 0),n("p",{children:"Video not supported"},void 0)]}),void 0),n("div",l({className:A,onClick:function(){return _(!a)}},{children:n(D,{type:a?"off":"on"},void 0)}),void 0),y&&n("div",l({className:I},{children:n("div",{className:O},void 0)}),void 0)]},void 0)}null===(N=null==b?void 0:b.localStorage)||void 0===N||N.setItem(E,"true");var W="CustomComponents-styles_component__w87Wx";function z(e){return n("div",l({className:W},{children:n(e.story.component,{pause:e.onPause,resume:e.onResume,story:e.story,isPaused:e.isPaused},void 0)}),void 0)}var R="SeeMore-styles_seeMoreWrapper__kwjif",F="SeeMore-styles_defaultSeeMore__-B1QW";function V(t){return t.story.seeMore?n("button",l({type:"button",onClick:function(){t.onSeeMoreClick()},className:R},{children:function(){var r=t.story.seeMore,o=typeof r;if(["string","boolean"].includes(o)){var i="string"===o?r:"See More";return e("div",l({className:F},{children:[n("span",{children:"^"},void 0),n("p",{children:i},void 0)]}),void 0)}return"function"===o?n(t.story.seeMore,{},void 0):t.story.seeMore}()}),void 0):null}var j="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",U="SeeMoreComponent-styles_closeIcon__LMm3b";function L(t){return t.story.seeMore&&t.story.seeMoreComponent?e("div",l({className:j},{children:[n("button",l({className:U,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?n(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function B(t){var o=r(!1),i=o[0],s=o[1];return u((function(){s(!1)}),[t.story]),e("div",l({className:P},{children:[t.story.type===x.IMAGE?n(C,l({},t),void 0):t.story.type===x.VIDEO?n(k,l({},t),void 0):t.story.type===x.COMPONENT?n(z,l({},t),void 0):null,t.story.header&&n("div",l({className:M},{children:"function"==typeof t.story.header?n(t.story.header,{},void 0):t.story.header}),void 0),n(V,{onSeeMoreClick:function(){var e,n;t.onPause(),s(!0),null===(n=(e=t.story).onSeeMoreClick)||void 0===n||n.call(e,t.story.index)},story:t.story},void 0),i&&n(L,{story:t.story,onClose:function(){t.onResume(),s(!1)}},void 0)]}),void 0)}var q="styles_main__-0FEu";function H(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}function G(t){var i,s,a,v,f,m,h,p=t.stories,_=void 0===p?[]:p,g=t.width,x=void 0===g?"100%":g,P=t.height,M=void 0===P?"100%":P,S=t.onStoryChange,C=void 0===S?function(){}:S,N=t.currentIndex,T=void 0===N?0:N,I=t.defaultDuration,O=void 0===I?1e4:I,A=t.onAllStoriesEnd,D=void 0===A?function(){}:A,E=t.onStoriesStart,b=void 0===E?function(){}:E,k=c((function(){return function(e,n){var t=0;return e.map((function(e,r){var o=e.duration||n,i=o+H();return i===t&&(i=o+H(6)),t=i,l(l({},e),{index:r,calculatedDuration:i})}))}(_,O)}),[_,O]),W=r(),z=W[0],R=W[1],F=_.length-1,V=r(!1),j=V[0],U=V[1],L=o(!1),G=o(!1);function Q(){L.current||(null==z?void 0:z.index)!==F||(D(),L.current=!0),(null==z?void 0:z.index)!==F&&R((function(e){if(!e)return k[0];var n=(null==e?void 0:e.index)+1;return k[n]}))}function J(){U(!0)}function X(){U(!1)}u((function(){G.current||(G.current=!0,b())}),[b]),u((function(){var e=k[T];e&&R(e)}),[T,_]),u((function(){z&&C(z.index)}),[z]),s=function(){Q()},a=null!==(i=null==z?void 0:z.calculatedDuration)&&void 0!==i?i:null,v=j,f=o(),m=o(a),h=o(Date.now()),u((function(){f.current=s}),[s]),u((function(){m.current=a}),[a]),u((function(){if(null!==a&&!1===v){h.current=Date.now();var e=setTimeout((function(){f.current()}),m.current);return function(){clearTimeout(e)}}return function(){}}),[a,v]),u((function(){v&&(m.current=m.current-(Date.now()-h.current))}),[v]);var Y={stories:k,width:x,height:M,defaultDuration:O,isPaused:j};return z?n(d.Provider,l({value:Y},{children:e("div",l({className:q,style:{width:x,height:M}},{children:[n(w,{activeStoryIndex:z.index,isPaused:j},void 0),n(B,{onPause:J,onResume:X,story:z,isPaused:j},z.index),n(y,{onNextClick:Q,onPrevClick:function(){0!==(null==z?void 0:z.index)&&R((function(e){if(!e)return k[0];var n=(null==e?void 0:e.index)-1;return k[n]}))},onPause:J,onResume:X},void 0)]}),void 0)}),void 0):null}export{G as default};
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},n.apply(this,arguments)},r=t.createContext({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var o=Object.freeze({LEFT:"left",RIGHT:"right"}),i="Actions-styles_left__eky50",s="Actions-styles_right__zguoH";function u(r){var u=r.onNextClick,c=r.onPrevClick,l=r.onPause,a=r.onResume,d=t.useState(!1),v=d[0],f=d[1],y=t.useRef(null);function m(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){l(),f(!0)}),200)}function h(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(y.current),v)return a(),void f(!1);a(),e!=o.LEFT?u():c()}function x(e){return{onMouseUp:function(t){return h(e,t)},onTouchEnd:function(t){return h(e,t)},onTouchStart:function(e){return m(e)},onMouseDown:function(e){return m(e)}}}return e.jsxs(t.Fragment,{children:[e.jsx("div",n({className:i},x(o.LEFT)),void 0),e.jsx("div",n({className:s},x(o.RIGHT)),void 0)]},void 0)}function c(){return t.useContext(r)}var l="ProgressBar-styles_wrapper__oqUCo",a="ProgressBar-styles_bar__x0O50";function d(r){var o,i,s,u,d,v=c().defaultDuration,f=t.useRef(null),y=t.useRef(null),m=t.useState(!1),h=m[0],x=m[1],p=0,_=.1;return t.useEffect((function(){r.isPaused?x(!1):r.isActive?x(!0):x(!1)}),[r.isActive,r.isPaused]),t.useEffect((function(){r.isActive&&f.current&&(f.current.style.width="0px")}),[r.isActive]),t.useEffect((function(){var e;f.current&&(r.hasStoryPassed?f.current.style.width="".concat(null===(e=null==y?void 0:y.current)||void 0===e?void 0:e.offsetWidth,"px"):r.isActive||(f.current.style.width="0px"))}),[r.hasStoryPassed,r.isActive]),o=function(e){var t;f.current&&y.current&&((p=Number((f.current.style.width||"1px").slice(0,f.current.style.width.length-2))||0)>y.current.offsetWidth?x(!1):(_=(null===(t=null==y?void 0:y.current)||void 0===t?void 0:t.offsetWidth)/((r.story.duration||v)/e),f.current.style.width="".concat(p+_,"px")))},i=h,s=t.useRef(),u=t.useRef(),d=t.useRef(o),t.useEffect((function(){d.current=o}),[o]),t.useEffect((function(){return!1!==i?(s.current=requestAnimationFrame((function e(t){if(null!=u.current){var n=t-u.current;d.current(n)}u.current=t,s.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(s.current),s.current=null,u.current=null}):function(){s.current&&(s.current=null),cancelAnimationFrame(s.current),u.current=null}}),[i]),e.jsx("div",n({className:l,ref:y},{children:e.jsx("div",{className:a,ref:f},void 0)}),void 0)}var v="progress-styles_wrapper__qQPyW";function f(t){var r=c().stories;return e.jsx("div",n({className:v,style:{gridTemplateColumns:"repeat(".concat(r.length,",1fr)")}},{children:r.map((function(n){return e.jsx(d,{hasStoryPassed:n.index<t.activeStoryIndex,isActive:n.index===t.activeStoryIndex,story:n,isPaused:n.index===t.activeStoryIndex&&t.isPaused},n.index)}))}),void 0)}var y=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),m="Story-styles_wrapper__oJP7j",h="Story-styles_header__-rnWL",x="Image-styles_image__gnfW1";function p(n){return t.useEffect((function(){n.onPause()}),[]),e.jsx("img",{className:x,src:n.story.url,alt:"story",onLoad:function(){setTimeout((function(){n.onResume()}),4)}},void 0)}var _,j="Video-styles_video__BykuO",g="Video-styles_loaderWrapper__TqVWk",w="Video-styles_loader__FxxSV",S="Video-styles_soundIcon__ZvYXE";function M(t){return"off"===t.type?e.jsx("svg",n({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):e.jsx("svg",n({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var E="RSIsMute",P="undefined"==typeof window?{}:window;function C(r){var o,i=c().isPaused,s=t.useState("true"===(null===(o=null==P?void 0:P.localStorage)||void 0===o?void 0:o.getItem(E))),u=s[0],l=s[1],a=t.useState(!1),d=a[0],v=a[1],f=t.useRef(null);function y(e){var t;null===(t=null==P?void 0:P.localStorage)||void 0===t||t.setItem(E,String(e)),l(e)}return t.useEffect((function(){r.onPause(),v(!0)}),[]),t.useEffect((function(){f.current&&(!i||f.current.paused?f.current.play().catch((function(){var e;y(!0),null===(e=f.current)||void 0===e||e.play()})):f.current.pause())}),[i]),e.jsxs(t.Fragment,{children:[e.jsxs("video",n({className:j,ref:f,playsInline:!0,"webkit-playsinline":"",controls:!1,src:r.story.url,onLoadedData:function(){setTimeout((function(){r.onResume(),v(!1)}),4)},muted:u},{children:[e.jsx("source",{src:r.story.url,type:"video/mp4"},void 0),e.jsx("source",{src:r.story.url,type:"video/webm"},void 0),e.jsx("source",{src:r.story.url,type:"video/ogg"},void 0),e.jsx("p",{children:"Video not supported"},void 0)]}),void 0),e.jsx("div",n({className:S,onClick:function(){return y(!u)}},{children:e.jsx(M,{type:u?"off":"on"},void 0)}),void 0),d&&e.jsx("div",n({className:g},{children:e.jsx("div",{className:w},void 0)}),void 0)]},void 0)}null===(_=null==P?void 0:P.localStorage)||void 0===_||_.setItem(E,"true");var N="CustomComponents-styles_component__w87Wx";function R(t){return e.jsx("div",n({className:N},{children:e.jsx(t.story.component,{pause:t.onPause,resume:t.onResume,story:t.story},void 0)}),void 0)}var T="SeeMore-styles_seeMoreWrapper__kwjif",I="SeeMore-styles_defaultSeeMore__-B1QW";function O(t){return t.story.seeMore?e.jsx("button",n({type:"button",onClick:function(){t.onSeeMoreClick()},className:T},{children:function(){var r=t.story.seeMore,o=typeof r;if(["string","boolean"].includes(o)){var i="string"===o?r:"See More";return e.jsxs("div",n({className:I},{children:[e.jsx("span",{children:"^"},void 0),e.jsx("p",{children:i},void 0)]}),void 0)}return"function"===o?e.jsx(t.story.seeMore,{},void 0):t.story.seeMore}()}),void 0):null}var A="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",D="SeeMoreComponent-styles_closeIcon__LMm3b";function b(t){return t.story.seeMore&&t.story.seeMoreComponent?e.jsxs("div",n({className:A},{children:[e.jsx("button",n({className:D,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?e.jsx(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function k(r){var o=t.useState(!1),i=o[0],s=o[1];return t.useEffect((function(){s(!1)}),[r.story]),e.jsxs("div",n({className:m},{children:[r.story.type===y.IMAGE?e.jsx(p,n({},r),void 0):r.story.type===y.VIDEO?e.jsx(C,n({},r),void 0):r.story.type===y.COMPONENT?e.jsx(R,n({},r),void 0):null,r.story.header&&e.jsx("div",n({className:h},{children:"function"==typeof r.story.header?e.jsx(r.story.header,{},void 0):r.story.header}),void 0),e.jsx(O,{onSeeMoreClick:function(){var e,t;r.onPause(),s(!0),null===(t=(e=r.story).onSeeMoreClick)||void 0===t||t.call(e,r.story.index)},story:r.story},void 0),i&&e.jsx(b,{story:r.story,onClose:function(){r.onResume(),s(!1)}},void 0)]}),void 0)}var W="styles_main__-0FEu";function F(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}module.exports=function(o){var i,s,c,l,a,d,v,y=o.stories,m=void 0===y?[]:y,h=o.width,x=void 0===h?"100%":h,p=o.height,_=void 0===p?"100%":p,j=o.onStoryChange,g=void 0===j?function(){}:j,w=o.currentIndex,S=void 0===w?0:w,M=o.defaultDuration,E=void 0===M?1e4:M,P=o.onAllStoriesEnd,C=void 0===P?function(){}:P,N=o.onStoriesStart,R=void 0===N?function(){}:N,T=t.useMemo((function(){return function(e,t){var r=0;return e.map((function(e,o){var i=e.duration||t,s=i+F();return s===r&&(s=i+F(6)),r=s,n(n({},e),{index:o,calculatedDuration:s})}))}(m,E)}),[m,E]),I=t.useState(),O=I[0],A=I[1],D=m.length-1,b=t.useState(!1),z=b[0],V=b[1],U=t.useRef(!1),q=t.useRef(!1);function L(){U.current||(null==O?void 0:O.index)!==D||(C(),U.current=!0),(null==O?void 0:O.index)!==D&&A((function(e){if(!e)return T[0];var t=(null==e?void 0:e.index)+1;return T[t]}))}function B(){V(!0)}function H(){V(!1)}t.useEffect((function(){q.current||(q.current=!0,R())}),[R]),t.useEffect((function(){var e=T[S];e&&A(e)}),[S,m]),t.useEffect((function(){O&&g(O.index)}),[O]),s=function(){L()},c=null!==(i=null==O?void 0:O.calculatedDuration)&&void 0!==i?i:null,l=z,a=t.useRef(),d=t.useRef(c),v=t.useRef(Date.now()),t.useEffect((function(){a.current=s}),[s]),t.useEffect((function(){d.current=c}),[c]),t.useEffect((function(){if(null!==c&&!1===l){v.current=Date.now();var e=setTimeout((function(){a.current()}),d.current);return function(){clearTimeout(e)}}return function(){}}),[c,l]),t.useEffect((function(){l&&(d.current=d.current-(Date.now()-v.current))}),[l]);var G={stories:T,width:x,height:_,defaultDuration:E,isPaused:z};return O?e.jsx(r.Provider,n({value:G},{children:e.jsxs("div",n({className:W,style:{width:x,height:_}},{children:[e.jsx(f,{activeStoryIndex:O.index,isPaused:z},void 0),e.jsx(k,{onPause:B,onResume:H,story:O},O.index),e.jsx(u,{onNextClick:L,onPrevClick:function(){0!==(null==O?void 0:O.index)&&A((function(e){if(!e)return T[0];var t=(null==e?void 0:e.index)-1;return T[t]}))},onPause:B,onResume:H},void 0)]}),void 0)}),void 0):null};
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},n.apply(this,arguments)},r=t.createContext({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var o=Object.freeze({LEFT:"left",RIGHT:"right"}),s="Actions-styles_left__eky50",i="Actions-styles_right__zguoH";function u(r){var u=r.onNextClick,c=r.onPrevClick,l=r.onPause,a=r.onResume,d=t.useState(!1),v=d[0],f=d[1],y=t.useRef(null);function m(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){l(),f(!0)}),200)}function h(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(y.current),v)return a(),void f(!1);a(),e!=o.LEFT?u():c()}function x(e){return{onMouseUp:function(t){return h(e,t)},onTouchEnd:function(t){return h(e,t)},onTouchStart:function(e){return m(e)},onMouseDown:function(e){return m(e)}}}return e.jsxs(t.Fragment,{children:[e.jsx("div",n({className:s},x(o.LEFT)),void 0),e.jsx("div",n({className:i},x(o.RIGHT)),void 0)]},void 0)}function c(){return t.useContext(r)}var l="ProgressBar-styles_wrapper__oqUCo",a="ProgressBar-styles_bar__x0O50";function d(r){var o,s,i,u,d,v=c().defaultDuration,f=t.useRef(null),y=t.useRef(null),m=t.useState(!1),h=m[0],x=m[1],p=0,_=.1;return t.useEffect((function(){r.isPaused?x(!1):r.isActive?x(!0):x(!1)}),[r.isActive,r.isPaused]),t.useEffect((function(){r.isActive&&f.current&&(f.current.style.width="0px")}),[r.isActive]),t.useEffect((function(){var e;f.current&&(r.hasStoryPassed?f.current.style.width="".concat(null===(e=null==y?void 0:y.current)||void 0===e?void 0:e.offsetWidth,"px"):r.isActive||(f.current.style.width="0px"))}),[r.hasStoryPassed,r.isActive]),o=function(e){var t;f.current&&y.current&&((p=Number((f.current.style.width||"1px").slice(0,f.current.style.width.length-2))||0)>y.current.offsetWidth?x(!1):(_=(null===(t=null==y?void 0:y.current)||void 0===t?void 0:t.offsetWidth)/((r.story.duration||v)/e),f.current.style.width="".concat(p+_,"px")))},s=h,i=t.useRef(),u=t.useRef(),d=t.useRef(o),t.useEffect((function(){d.current=o}),[o]),t.useEffect((function(){return!1!==s?(i.current=requestAnimationFrame((function e(t){if(null!=u.current){var n=t-u.current;d.current(n)}u.current=t,i.current=requestAnimationFrame(e)})),function(){cancelAnimationFrame(i.current),i.current=null,u.current=null}):function(){i.current&&(i.current=null),cancelAnimationFrame(i.current),u.current=null}}),[s]),e.jsx("div",n({className:l,ref:y},{children:e.jsx("div",{className:a,ref:f},void 0)}),void 0)}var v="progress-styles_wrapper__qQPyW";function f(t){var r=c().stories;return e.jsx("div",n({className:v,style:{gridTemplateColumns:"repeat(".concat(r.length,",1fr)")}},{children:r.map((function(n){return e.jsx(d,{hasStoryPassed:n.index<t.activeStoryIndex,isActive:n.index===t.activeStoryIndex,story:n,isPaused:n.index===t.activeStoryIndex&&t.isPaused},n.index)}))}),void 0)}var y=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),m="Story-styles_wrapper__oJP7j",h="Story-styles_header__-rnWL",x="Image-styles_image__gnfW1";function p(n){return t.useEffect((function(){n.onPause()}),[]),e.jsx("img",{className:x,src:n.story.url,alt:"story",onLoad:function(){setTimeout((function(){n.onResume()}),4)}},void 0)}var _,j="Video-styles_video__BykuO",g="Video-styles_loaderWrapper__TqVWk",w="Video-styles_loader__FxxSV",S="Video-styles_soundIcon__ZvYXE";function M(t){return"off"===t.type?e.jsx("svg",n({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M3 9v6h-1v-6h1zm13-7l-9 5v2.288l7-3.889v13.202l-7-3.889v2.288l9 5v-20zm-11 5h-5v10h5v-10zm17.324 4.993l1.646-1.659-1.324-1.324-1.651 1.67-1.665-1.648-1.316 1.318 1.67 1.657-1.65 1.669 1.318 1.317 1.658-1.672 1.666 1.653 1.324-1.325-1.676-1.656z"},void 0)}),void 0):e.jsx("svg",n({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:e.jsx("path",{d:"M22 0v24l-11-6v-2.278l9 4.909v-17.262l-9 4.91v-2.279l11-6zm-13 6v12h-7v-12h7zm-2 2h-3v8h3v-8z"},void 0)}),void 0)}var P="RSIsMute",E="undefined"==typeof window?{}:window;function C(r){var o,s=c().isPaused,i=t.useState("true"===(null===(o=null==E?void 0:E.localStorage)||void 0===o?void 0:o.getItem(P))),u=i[0],l=i[1],a=t.useState(!1),d=a[0],v=a[1],f=t.useRef(null);function y(e){var t;null===(t=null==E?void 0:E.localStorage)||void 0===t||t.setItem(P,String(e)),l(e)}return t.useEffect((function(){r.onPause(),v(!0)}),[]),t.useEffect((function(){f.current&&(!s||f.current.paused?f.current.play().catch((function(){var e;y(!0),null===(e=f.current)||void 0===e||e.play()})):f.current.pause())}),[s]),e.jsxs(t.Fragment,{children:[e.jsxs("video",n({className:j,ref:f,playsInline:!0,"webkit-playsinline":"",controls:!1,src:r.story.url,onLoadedData:function(){setTimeout((function(){r.onResume(),v(!1)}),4)},muted:u},{children:[e.jsx("source",{src:r.story.url,type:"video/mp4"},void 0),e.jsx("source",{src:r.story.url,type:"video/webm"},void 0),e.jsx("source",{src:r.story.url,type:"video/ogg"},void 0),e.jsx("p",{children:"Video not supported"},void 0)]}),void 0),e.jsx("div",n({className:S,onClick:function(){return y(!u)}},{children:e.jsx(M,{type:u?"off":"on"},void 0)}),void 0),d&&e.jsx("div",n({className:g},{children:e.jsx("div",{className:w},void 0)}),void 0)]},void 0)}null===(_=null==E?void 0:E.localStorage)||void 0===_||_.setItem(P,"true");var N="CustomComponents-styles_component__w87Wx";function R(t){return e.jsx("div",n({className:N},{children:e.jsx(t.story.component,{pause:t.onPause,resume:t.onResume,story:t.story,isPaused:t.isPaused},void 0)}),void 0)}var T="SeeMore-styles_seeMoreWrapper__kwjif",I="SeeMore-styles_defaultSeeMore__-B1QW";function O(t){return t.story.seeMore?e.jsx("button",n({type:"button",onClick:function(){t.onSeeMoreClick()},className:T},{children:function(){var r=t.story.seeMore,o=typeof r;if(["string","boolean"].includes(o)){var s="string"===o?r:"See More";return e.jsxs("div",n({className:I},{children:[e.jsx("span",{children:"^"},void 0),e.jsx("p",{children:s},void 0)]}),void 0)}return"function"===o?e.jsx(t.story.seeMore,{},void 0):t.story.seeMore}()}),void 0):null}var A="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",D="SeeMoreComponent-styles_closeIcon__LMm3b";function b(t){return t.story.seeMore&&t.story.seeMoreComponent?e.jsxs("div",n({className:A},{children:[e.jsx("button",n({className:D,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?e.jsx(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function k(r){var o=t.useState(!1),s=o[0],i=o[1];return t.useEffect((function(){i(!1)}),[r.story]),e.jsxs("div",n({className:m},{children:[r.story.type===y.IMAGE?e.jsx(p,n({},r),void 0):r.story.type===y.VIDEO?e.jsx(C,n({},r),void 0):r.story.type===y.COMPONENT?e.jsx(R,n({},r),void 0):null,r.story.header&&e.jsx("div",n({className:h},{children:"function"==typeof r.story.header?e.jsx(r.story.header,{},void 0):r.story.header}),void 0),e.jsx(O,{onSeeMoreClick:function(){var e,t;r.onPause(),i(!0),null===(t=(e=r.story).onSeeMoreClick)||void 0===t||t.call(e,r.story.index)},story:r.story},void 0),s&&e.jsx(b,{story:r.story,onClose:function(){r.onResume(),i(!1)}},void 0)]}),void 0)}var W="styles_main__-0FEu";function F(e){return void 0===e&&(e=4),Number(Math.random().toFixed(e))}module.exports=function(o){var s,i,c,l,a,d,v,y=o.stories,m=void 0===y?[]:y,h=o.width,x=void 0===h?"100%":h,p=o.height,_=void 0===p?"100%":p,j=o.onStoryChange,g=void 0===j?function(){}:j,w=o.currentIndex,S=void 0===w?0:w,M=o.defaultDuration,P=void 0===M?1e4:M,E=o.onAllStoriesEnd,C=void 0===E?function(){}:E,N=o.onStoriesStart,R=void 0===N?function(){}:N,T=t.useMemo((function(){return function(e,t){var r=0;return e.map((function(e,o){var s=e.duration||t,i=s+F();return i===r&&(i=s+F(6)),r=i,n(n({},e),{index:o,calculatedDuration:i})}))}(m,P)}),[m,P]),I=t.useState(),O=I[0],A=I[1],D=m.length-1,b=t.useState(!1),z=b[0],V=b[1],U=t.useRef(!1),q=t.useRef(!1);function L(){U.current||(null==O?void 0:O.index)!==D||(C(),U.current=!0),(null==O?void 0:O.index)!==D&&A((function(e){if(!e)return T[0];var t=(null==e?void 0:e.index)+1;return T[t]}))}function B(){V(!0)}function H(){V(!1)}t.useEffect((function(){q.current||(q.current=!0,R())}),[R]),t.useEffect((function(){var e=T[S];e&&A(e)}),[S,m]),t.useEffect((function(){O&&g(O.index)}),[O]),i=function(){L()},c=null!==(s=null==O?void 0:O.calculatedDuration)&&void 0!==s?s:null,l=z,a=t.useRef(),d=t.useRef(c),v=t.useRef(Date.now()),t.useEffect((function(){a.current=i}),[i]),t.useEffect((function(){d.current=c}),[c]),t.useEffect((function(){if(null!==c&&!1===l){v.current=Date.now();var e=setTimeout((function(){a.current()}),d.current);return function(){clearTimeout(e)}}return function(){}}),[c,l]),t.useEffect((function(){l&&(d.current=d.current-(Date.now()-v.current))}),[l]);var G={stories:T,width:x,height:_,defaultDuration:P,isPaused:z};return O?e.jsx(r.Provider,n({value:G},{children:e.jsxs("div",n({className:W,style:{width:x,height:_}},{children:[e.jsx(f,{activeStoryIndex:O.index,isPaused:z},void 0),e.jsx(k,{onPause:B,onResume:H,story:O,isPaused:z},O.index),e.jsx(u,{onNextClick:L,onPrevClick:function(){0!==(null==O?void 0:O.index)&&A((function(e){if(!e)return T[0];var t=(null==e?void 0:e.index)-1;return T[t]}))},onPause:B,onResume:H},void 0)]}),void 0)}),void 0):null};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "stories-react",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "instagram style stories in react js",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -5,4 +5,5 @@ <h1 style="margin: 0" align="center">stories-react</h1>
 <p align="center"><a href="https://hannadrehman.github.io/stories-react/">Homepage</a>
+
 <div align="center">
-  <a href="https://www.npmjs.com/package/react-insta-stories">
+  <a href="https://www.npmjs.com/package/stories-react">
     <img alt="NPM" src="https://img.shields.io/npm/v/stories-react" />
@@ -16,3 +17,2 @@ </a>
 
-
 # Install
@@ -67,3 +67,3 @@ ```sh
 
-| Property                 | Type                          | Defaul        | Description                                                                             |
+| Property                 | Type                          | Default       | Description                                                                            |
 | ------------------------ | ------------------------------| --------------| --------------------------------------------------------------------------------------- |
@@ -81,3 +81,3 @@ | `stories`                | `IStoryObject[]`              | `[]`          |  An array of story objects. description of `IStoryObject` is mentioned below            |
 
-| Property              | Type                                 | Defaul       | Description                                                 |
+| Property              | Type                                 | Default      | Description                                                |
 | --------------------- |--------------------------------------| -------------| ------------------------------------------------------------|
@@ -91,4 +91,13 @@ | `type`                | `image , video , component`          | `-`          |  type of story to render                                    |
 | `seeMoreComponent`    | `React Component`                    | `-`          |  see more component opens after clicking see more           |
-| `onSeeMoreClick`      | `function(index:number)`             | `-`          |  Callback called when story see more is clicked                                                     |
+| `onSeeMoreClick`      | `function(index:number)`             | `-`          |  Callback called when story see more is clicked             |
 
-o
+
+## Custom Component Story Props
+
+
+| Property              | Type                                 |              | Description                                                 |
+| --------------------- |--------------------------------------| -------------| ------------------------------------------------------------|
+| `pause`               | `function`                           |              |  call it to pause a story                                   |
+| `resume`              | `function`                           |              |  call it to resume a story                                  |
+| `story`               | `IStoryObject`                       |              |  current story properties                                   |
+| `isPaused`            | `boolean`                            |              |  state of a story                                           |

src/types.d.ts

@@ -40,2 +40,3 @@ interface IStoryObject {
   onResume: () => void;
+  isPaused: boolean;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

539395

increased by0.18%

Lines of code

1204

increased by0.25%

Number of lines in readme file

99

increased by10%

No dependency changes