stories-react - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

dist/index.esm.js

@@ -1,2 +0,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{createContext as n,useState as r,useRef as o,Fragment as i,useEffect as u,useContext as s,useMemo as c}from"react";var a=function(){return a=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},a.apply(this,arguments)},l=n({stories:[],width:"100%",height:"100%",defaultDuration:1e4,isPaused:!1});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var d=Object.freeze({LEFT:"left",RIGHT:"right"}),v="Actions-styles_left__eky50",f="Actions-styles_right__zguoH";function y(n){var u=n.onNextClick,s=n.onPrevClick,c=n.onPause,l=n.onResume,y=r(!1),h=y[0],m=y[1],p=o(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(p.current),p.current=setTimeout((function(){c(),m(!0)}),200)}function g(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(p.current),h)return l(),void m(!1);l(),e!=d.LEFT?u():s()}function w(e){return{onMouseUp:function(t){return g(e,t)},onTouchEnd:function(t){return g(e,t)},onTouchStart:function(e){return _(e)},onMouseDown:function(e){return _(e)}}}return e(i,{children:[t("div",a({className:v},w(d.LEFT)),void 0),t("div",a({className:f},w(d.RIGHT)),void 0)]},void 0)}function h(){return s(l)}var m="ProgressBar-styles_wrapper__oqUCo",p="ProgressBar-styles_bar__x0O50";function _(e){var n,i,s,c,l,d=h().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 t;v.current&&(e.hasStoryPassed?v.current.style.width="".concat(null===(t=null==f?void 0:f.current)||void 0===t?void 0:t.offsetWidth,"px"):e.isActive||(v.current.style.width="0px"))}),[e.hasStoryPassed,e.isActive]),n=function(t){var n;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===(n=null==f?void 0:f.current)||void 0===n?void 0:n.offsetWidth)/((e.story.duration||d)/t),v.current.style.width="".concat(w+x,"px")))},i=_,s=o(),c=o(),l=o(n),u((function(){l.current=n}),[n]),u((function(){return!1!==i?(s.current=requestAnimationFrame((function e(t){if(null!=c.current){var n=t-c.current;l.current(n)}c.current=t,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]),t("div",a({className:m,ref:f},{children:t("div",{className:p,ref:v},void 0)}),void 0)}var g="progress-styles_wrapper__qQPyW";function w(e){var n=h().stories;return t("div",a({className:g,style:{gridTemplateColumns:"repeat(".concat(n.length,",1fr)")}},{children:n.map((function(n){return t(_,{hasStoryPassed:n.index<e.activeStoryIndex,isActive:n.index===e.activeStoryIndex,story:n,isPaused:n.index===e.activeStoryIndex&&e.isPaused},n.index)}))}),void 0)}var x=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),M="Story-styles_wrapper__oJP7j",P="Story-styles_header__-rnWL",S="Image-styles_image__gnfW1";function C(e){return u((function(){e.onPause()}),[]),t("img",{className:S,src:e.story.url,alt:"story",onLoad:function(){setTimeout((function(){e.onResume()}),4)}},void 0)}var N="Video-styles_video__BykuO",T="Video-styles_loaderWrapper__TqVWk",I="Video-styles_loader__FxxSV",O="Video-styles_soundIcon__ZvYXE";function A(e){return"off"===e.type?t("svg",a({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:t("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):t("svg",a({xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"white"},{children:t("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 D="RSIsMute";function E(n){var s=h().isPaused,c=r("true"===localStorage.getItem(D)),l=c[0],d=c[1],v=r(!0),f=v[0],y=v[1],m=o(null);function p(e){localStorage.setItem(D,String(e)),d(e)}return u((function(){n.onPause()}),[]),u((function(){m.current&&(!s||m.current.paused?m.current.play().catch((function(){var e,t;(null===(e=m.current)||void 0===e?void 0:e.paused)||(p(!0),null===(t=m.current)||void 0===t||t.play())})):m.current.pause())}),[s]),e(i,{children:[e("video",a({className:N,ref:m,playsInline:!0,"webkit-playsinline":"",controls:!1,src:n.story.url,onLoadedData:function(){setTimeout((function(){n.onResume(),y(!1)}),4)},muted:l},{children:[t("source",{src:n.story.url,type:"video/mp4"},void 0),t("source",{src:n.story.url,type:"video/webm"},void 0),t("source",{src:n.story.url,type:"video/ogg"},void 0),t("p",{children:"Video not supported"},void 0)]}),void 0),t("div",a({className:O,onClick:function(){return p(!l)}},{children:t(A,{type:l?"off":"on"},void 0)}),void 0),f&&t("div",a({className:T},{children:t("div",{className:I},void 0)}),void 0)]},void 0)}localStorage.setItem(D,"true");var k="CustomComponents-styles_component__w87Wx";function b(e){return t("div",a({className:k},{children:t(e.story.component,{pause:e.onPause,resume:e.onResume,story:e.story},void 0)}),void 0)}var W="SeeMore-styles_seeMoreWrapper__kwjif",z="SeeMore-styles_defaultSeeMore__-B1QW";function R(n){return n.story.seeMore?t("button",a({type:"button",onClick:function(){n.onSeeMoreClick()},className:W},{children:function(){var r=n.story.seeMore,o=typeof r;if(["string","boolean"].includes(o)){var i="string"===o?r:"See More";return e("div",a({className:z},{children:[t("span",{children:"^"},void 0),t("p",{children:i},void 0)]}),void 0)}return"function"===o?t(n.story.seeMore,{},void 0):n.story.seeMore}()}),void 0):null}var F="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",V="SeeMoreComponent-styles_closeIcon__LMm3b";function j(n){return n.story.seeMore&&n.story.seeMoreComponent?e("div",a({className:F},{children:[t("button",a({className:V,onClick:n.onClose},{children:"✕"}),void 0),"function"==typeof n.story.seeMoreComponent?t(n.story.seeMoreComponent,{},void 0):n.story.seeMoreComponent]}),void 0):null}function U(n){var o=r(!1),i=o[0],s=o[1];return u((function(){s(!1)}),[n.story]),e("div",a({className:M},{children:[n.story.type===x.IMAGE?t(C,a({},n),void 0):n.story.type===x.VIDEO?t(E,a({},n),void 0):n.story.type===x.COMPONENT?t(b,a({},n),void 0):null,n.story.header&&t("div",a({className:P},{children:"function"==typeof n.story.header?t(n.story.header,{},void 0):n.story.header}),void 0),t(R,{onSeeMoreClick:function(){var e,t;n.onPause(),s(!0),null===(t=(e=n.story).onSeeMoreClick)||void 0===t||t.call(e,n.story.index)},story:n.story},void 0),i&&t(j,{story:n.story,onClose:function(){n.onResume(),s(!1)}},void 0)]}),void 0)}var L="styles_main__-0FEu";function B(n){var i,s,d,v,f,h,m=n.stories,p=void 0===m?[]:m,_=n.width,g=void 0===_?"100%":_,x=n.height,M=void 0===x?"100%":x,P=n.onStoryChange,S=void 0===P?function(){}:P,C=n.currentIndex,N=void 0===C?0:C,T=n.defaultDuration,I=void 0===T?1e4:T,O=c((function(){return p.map((function(e,t){return a(a({},e),{index:t})}))}),[p]),A=r(O[N]),D=A[0],E=A[1],k=p.length-1,b=r(!1),W=b[0],z=b[1];function R(){D.index<k&&E((function(e){var t=e.index+1;return O[t]}))}function F(){z(!0)}function V(){z(!1)}u((function(){D&&S(D.index)}),[D]),i=function(){R()},s=D.duration||I,d=W,v=o(),f=o(s),h=o(Date.now()),u((function(){v.current=i}),[i]),u((function(){f.current=s}),[s]),u((function(){if(null!==s&&!1===d){h.current=Date.now();var e=setTimeout((function(){v.current()}),f.current);return function(){clearTimeout(e)}}return function(){}}),[s,d]),u((function(){d&&(f.current=f.current-(Date.now()-h.current))}),[d]);var j={stories:O,width:g,height:M,defaultDuration:I,isPaused:W};return t(l.Provider,a({value:j},{children:e("div",a({className:L,style:{width:g,height:M}},{children:[t(w,{activeStoryIndex:D.index,isPaused:W},void 0),t(U,{onPause:F,onResume:V,story:D},D.index),t(y,{onNextClick:R,onPrevClick:function(){D.index>0&&E((function(e){var t=e.index-1;return O[t]}))},onPause:F,onResume:V},void 0)]}),void 0)}),void 0)}export{B 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),h=y[0],m=y[1],p=o(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(p.current),p.current=setTimeout((function(){c(),m(!0)}),200)}function g(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(p.current),h)return d(),void m(!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 h(){return s(d)}var m="ProgressBar-styles_wrapper__oqUCo",p="ProgressBar-styles_bar__x0O50";function _(e){var t,i,s,c,d,a=h().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:m,ref:f},{children:n("div",{className:p,ref:v},void 0)}),void 0)}var g="progress-styles_wrapper__qQPyW";function w(e){var t=h().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",P="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",k="undefined"==typeof window?{}:window;function b(t){var s,c=h().isPaused,d=r("true"===(null===(s=null==k?void 0:k.localStorage)||void 0===s?void 0:s.getItem(E))),a=d[0],v=d[1],f=r(!1),y=f[0],m=f[1],p=o(null);function _(e){var n;null===(n=null==k?void 0:k.localStorage)||void 0===n||n.setItem(E,String(e)),v(e)}return u((function(){t.onPause(),m(!0)}),[]),u((function(){p.current&&(!c||p.current.paused?p.current.play().catch((function(){var e,n;(null===(e=p.current)||void 0===e?void 0:e.paused)||(_(!0),null===(n=p.current)||void 0===n||n.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(),m(!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==k?void 0:k.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(b,l({},t),void 0):t.story.type===x.COMPONENT?n(z,l({},t),void 0):null,t.story.header&&n("div",l({className:P},{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(t){var i,s,a,v,f,h,m=t.stories,p=void 0===m?[]:m,_=t.width,g=void 0===_?"100%":_,x=t.height,M=void 0===x?"100%":x,P=t.onStoryChange,S=void 0===P?function(){}:P,C=t.currentIndex,N=void 0===C?0:C,T=t.defaultDuration,I=void 0===T?1e4:T,O=c((function(){return p.map((function(e,n){return l(l({},e),{index:n})}))}),[p]),A=r(O[N]),D=A[0],E=A[1],k=p.length-1,b=r(!1),W=b[0],z=b[1];function R(){D.index<k&&E((function(e){var n=e.index+1;return O[n]}))}function F(){z(!0)}function V(){z(!1)}u((function(){D&&S(D.index)}),[D]),i=function(){R()},s=D.duration||I,a=W,v=o(),f=o(s),h=o(Date.now()),u((function(){v.current=i}),[i]),u((function(){f.current=s}),[s]),u((function(){if(null!==s&&!1===a){h.current=Date.now();var e=setTimeout((function(){v.current()}),f.current);return function(){clearTimeout(e)}}return function(){}}),[s,a]),u((function(){a&&(f.current=f.current-(Date.now()-h.current))}),[a]);var j={stories:O,width:g,height:M,defaultDuration:I,isPaused:W};return n(d.Provider,l({value:j},{children:e("div",l({className:q,style:{width:g,height:M}},{children:[n(w,{activeStoryIndex:D.index,isPaused:W},void 0),n(B,{onPause:F,onResume:V,story:D},D.index),n(y,{onNextClick:R,onPrevClick:function(){D.index>0&&E((function(e){var n=e.index-1;return O[n]}))},onPause:F,onResume:V},void 0)]}),void 0)}),void 0)}export{H 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"}),s="Actions-styles_left__eky50",i="Actions-styles_right__zguoH";function u(r){var u=r.onNextClick,c=r.onPrevClick,a=r.onPause,l=r.onResume,d=t.useState(!1),v=d[0],f=d[1],y=t.useRef(null);function h(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){a(),f(!0)}),200)}function m(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(y.current),v)return l(),void f(!1);l(),e!=o.LEFT?u():c()}function x(e){return{onMouseUp:function(t){return m(e,t)},onTouchEnd:function(t){return m(e,t)},onTouchStart:function(e){return h(e)},onMouseDown:function(e){return h(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 a="ProgressBar-styles_wrapper__oqUCo",l="ProgressBar-styles_bar__x0O50";function d(r){var o,s,i,u,d,v=c().defaultDuration,f=t.useRef(null),y=t.useRef(null),h=t.useState(!1),m=h[0],x=h[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=m,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:a,ref:y},{children:e.jsx("div",{className:l,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"}),h="Story-styles_wrapper__oJP7j",m="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 _="Video-styles_video__BykuO",j="Video-styles_loaderWrapper__TqVWk",g="Video-styles_loader__FxxSV",w="Video-styles_soundIcon__ZvYXE";function S(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 M="RSIsMute";function P(r){var o=c().isPaused,s=t.useState("true"===localStorage.getItem(M)),i=s[0],u=s[1],a=t.useState(!0),l=a[0],d=a[1],v=t.useRef(null);function f(e){localStorage.setItem(M,String(e)),u(e)}return t.useEffect((function(){r.onPause()}),[]),t.useEffect((function(){v.current&&(!o||v.current.paused?v.current.play().catch((function(){var e,t;(null===(e=v.current)||void 0===e?void 0:e.paused)||(f(!0),null===(t=v.current)||void 0===t||t.play())})):v.current.pause())}),[o]),e.jsxs(t.Fragment,{children:[e.jsxs("video",n({className:_,ref:v,playsInline:!0,"webkit-playsinline":"",controls:!1,src:r.story.url,onLoadedData:function(){setTimeout((function(){r.onResume(),d(!1)}),4)},muted:i},{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:w,onClick:function(){return f(!i)}},{children:e.jsx(S,{type:i?"off":"on"},void 0)}),void 0),l&&e.jsx("div",n({className:j},{children:e.jsx("div",{className:g},void 0)}),void 0)]},void 0)}localStorage.setItem(M,"true");var C="CustomComponents-styles_component__w87Wx";function E(t){return e.jsx("div",n({className:C},{children:e.jsx(t.story.component,{pause:t.onPause,resume:t.onResume,story:t.story},void 0)}),void 0)}var N="SeeMore-styles_seeMoreWrapper__kwjif",T="SeeMore-styles_defaultSeeMore__-B1QW";function R(t){return t.story.seeMore?e.jsx("button",n({type:"button",onClick:function(){t.onSeeMoreClick()},className:N},{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:T},{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 I="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",O="SeeMoreComponent-styles_closeIcon__LMm3b";function A(t){return t.story.seeMore&&t.story.seeMoreComponent?e.jsxs("div",n({className:I},{children:[e.jsx("button",n({className:O,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 D(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:h},{children:[r.story.type===y.IMAGE?e.jsx(p,n({},r),void 0):r.story.type===y.VIDEO?e.jsx(P,n({},r),void 0):r.story.type===y.COMPONENT?e.jsx(E,n({},r),void 0):null,r.story.header&&e.jsx("div",n({className:m},{children:"function"==typeof r.story.header?e.jsx(r.story.header,{},void 0):r.story.header}),void 0),e.jsx(R,{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(A,{story:r.story,onClose:function(){r.onResume(),i(!1)}},void 0)]}),void 0)}var k="styles_main__-0FEu";module.exports=function(o){var s,i,c,a,l,d,v=o.stories,y=void 0===v?[]:v,h=o.width,m=void 0===h?"100%":h,x=o.height,p=void 0===x?"100%":x,_=o.onStoryChange,j=void 0===_?function(){}:_,g=o.currentIndex,w=void 0===g?0:g,S=o.defaultDuration,M=void 0===S?1e4:S,P=t.useMemo((function(){return y.map((function(e,t){return n(n({},e),{index:t})}))}),[y]),C=t.useState(P[w]),E=C[0],N=C[1],T=y.length-1,R=t.useState(!1),I=R[0],O=R[1];function A(){E.index<T&&N((function(e){var t=e.index+1;return P[t]}))}function b(){O(!0)}function W(){O(!1)}t.useEffect((function(){E&&j(E.index)}),[E]),s=function(){A()},i=E.duration||M,c=I,a=t.useRef(),l=t.useRef(i),d=t.useRef(Date.now()),t.useEffect((function(){a.current=s}),[s]),t.useEffect((function(){l.current=i}),[i]),t.useEffect((function(){if(null!==i&&!1===c){d.current=Date.now();var e=setTimeout((function(){a.current()}),l.current);return function(){clearTimeout(e)}}return function(){}}),[i,c]),t.useEffect((function(){c&&(l.current=l.current-(Date.now()-d.current))}),[c]);var z={stories:P,width:m,height:p,defaultDuration:M,isPaused:I};return e.jsx(r.Provider,n({value:z},{children:e.jsxs("div",n({className:k,style:{width:m,height:p}},{children:[e.jsx(f,{activeStoryIndex:E.index,isPaused:I},void 0),e.jsx(D,{onPause:b,onResume:W,story:E},E.index),e.jsx(u,{onNextClick:A,onPrevClick:function(){E.index>0&&N((function(e){var t=e.index-1;return P[t]}))},onPause:b,onResume:W},void 0)]}),void 0)}),void 0)};
+"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,a=r.onPause,l=r.onResume,d=t.useState(!1),v=d[0],f=d[1],y=t.useRef(null);function h(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){a(),f(!0)}),200)}function m(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(y.current),v)return l(),void f(!1);l(),e!=o.LEFT?u():c()}function x(e){return{onMouseUp:function(t){return m(e,t)},onTouchEnd:function(t){return m(e,t)},onTouchStart:function(e){return h(e)},onMouseDown:function(e){return h(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 a="ProgressBar-styles_wrapper__oqUCo",l="ProgressBar-styles_bar__x0O50";function d(r){var o,s,i,u,d,v=c().defaultDuration,f=t.useRef(null),y=t.useRef(null),h=t.useState(!1),m=h[0],x=h[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=m,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:a,ref:y},{children:e.jsx("div",{className:l,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"}),h="Story-styles_wrapper__oJP7j",m="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",C="undefined"==typeof window?{}:window;function E(r){var o,s=c().isPaused,i=t.useState("true"===(null===(o=null==C?void 0:C.localStorage)||void 0===o?void 0:o.getItem(P))),u=i[0],a=i[1],l=t.useState(!1),d=l[0],v=l[1],f=t.useRef(null);function y(e){var t;null===(t=null==C?void 0:C.localStorage)||void 0===t||t.setItem(P,String(e)),a(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,t;(null===(e=f.current)||void 0===e?void 0:e.paused)||(y(!0),null===(t=f.current)||void 0===t||t.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==C?void 0:C.localStorage)||void 0===_||_.setItem(P,"true");var N="CustomComponents-styles_component__w87Wx";function T(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 R="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:R},{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 k(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 b(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:h},{children:[r.story.type===y.IMAGE?e.jsx(p,n({},r),void 0):r.story.type===y.VIDEO?e.jsx(E,n({},r),void 0):r.story.type===y.COMPONENT?e.jsx(T,n({},r),void 0):null,r.story.header&&e.jsx("div",n({className:m},{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(k,{story:r.story,onClose:function(){r.onResume(),i(!1)}},void 0)]}),void 0)}var W="styles_main__-0FEu";module.exports=function(o){var s,i,c,a,l,d,v=o.stories,y=void 0===v?[]:v,h=o.width,m=void 0===h?"100%":h,x=o.height,p=void 0===x?"100%":x,_=o.onStoryChange,j=void 0===_?function(){}:_,g=o.currentIndex,w=void 0===g?0:g,S=o.defaultDuration,M=void 0===S?1e4:S,P=t.useMemo((function(){return y.map((function(e,t){return n(n({},e),{index:t})}))}),[y]),C=t.useState(P[w]),E=C[0],N=C[1],T=y.length-1,R=t.useState(!1),I=R[0],O=R[1];function A(){E.index<T&&N((function(e){var t=e.index+1;return P[t]}))}function D(){O(!0)}function k(){O(!1)}t.useEffect((function(){E&&j(E.index)}),[E]),s=function(){A()},i=E.duration||M,c=I,a=t.useRef(),l=t.useRef(i),d=t.useRef(Date.now()),t.useEffect((function(){a.current=s}),[s]),t.useEffect((function(){l.current=i}),[i]),t.useEffect((function(){if(null!==i&&!1===c){d.current=Date.now();var e=setTimeout((function(){a.current()}),l.current);return function(){clearTimeout(e)}}return function(){}}),[i,c]),t.useEffect((function(){c&&(l.current=l.current-(Date.now()-d.current))}),[c]);var z={stories:P,width:m,height:p,defaultDuration:M,isPaused:I};return e.jsx(r.Provider,n({value:z},{children:e.jsxs("div",n({className:W,style:{width:m,height:p}},{children:[e.jsx(f,{activeStoryIndex:E.index,isPaused:I},void 0),e.jsx(b,{onPause:D,onResume:k,story:E},E.index),e.jsx(u,{onNextClick:A,onPrevClick:function(){E.index>0&&N((function(e){var t=e.index-1;return P[t]}))},onPause:D,onResume:k},void 0)]}),void 0)}),void 0)};
 //# sourceMappingURL=index.js.map

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

534183

increased by0.15%

Lines of code

1162

increased by0.61%

No dependency changes