stories-react - npm Package Compare versions

Comparing version 1.0.6 to 1.0.8

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 a=function(){return a=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},a.apply(this,arguments)};function l(e,n,t,r){return new(t||(t=Promise))((function(o,i){function u(e){try{c(r.next(e))}catch(e){i(e)}}function s(e){try{c(r.throw(e))}catch(e){i(e)}}function c(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(u,s)}c((r=r.apply(e,n||[])).next())}))}function d(e,n){var t,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(i){return function(s){return function(i){if(t)throw new TypeError("Generator is already executing.");for(;u;)try{if(t=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return u.label++,{value:i[1],done:!1};case 5:u.label++,r=i[1],i=[0];continue;case 7:i=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){u=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){u.label=i[1];break}if(6===i[0]&&u.label<o[1]){u.label=o[1],o=i;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(i);break}o[2]&&u.ops.pop(),u.trys.pop();continue}i=n.call(e,u)}catch(e){i=[6,e],r=0}finally{t=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,s])}}}var f=t({stories:[],width:"100%",height:"100%",defaultDuration:1e4});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var v=Object.freeze({LEFT:"left",RIGHT:"right"}),y="Actions-styles_left__eky50",p="Actions-styles_right__zguoH";function h(t){var u=t.onNextClick,s=t.onPrevClick,c=t.onPause,l=t.onResume,d=r(!1),f=d[0],h=d[1],m=o(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(m.current),m.current=setTimeout((function(){c(),h(!0)}),200)}function w(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(m.current),f)return l(),void h(!1);l(),e!=v.LEFT?u():s()}function x(e){return{onMouseUp:function(n){return w(e,n)},onTouchEnd:function(n){return w(e,n)},onTouchStart:function(e){return _(e)},onMouseDown:function(e){return _(e)}}}return e(i,{children:[n("div",a({className:y},x(v.LEFT)),void 0),n("div",a({className:p},x(v.RIGHT)),void 0)]},void 0)}function m(){return s(f)}var _="ProgressBar-styles_wrapper__oqUCo",w="ProgressBar-styles_bar__x0O50";function x(e){var t,i,s,c,l,d=m().defaultDuration,f=o(null),v=o(null),y=r(!1),p=y[0],h=y[1],x=0,g=.1;return u((function(){e.isPaused?h(!1):e.isActive?h(!0):h(!1)}),[e.isActive,e.isPaused]),u((function(){e.isActive&&f.current&&(f.current.style.width="0px")}),[e.isActive]),u((function(){var n;f.current&&(e.hasStoryPassed?f.current.style.width="".concat(null===(n=null==v?void 0:v.current)||void 0===n?void 0:n.offsetWidth,"px"):e.isActive||(f.current.style.width="0px"))}),[e.hasStoryPassed,e.isActive]),t=function(n){var t;f.current&&v.current&&((x=Number((f.current.style.width||"1px").slice(0,f.current.style.width.length-2))||0)>v.current.offsetWidth?h(!1):(g=(null===(t=null==v?void 0:v.current)||void 0===t?void 0:t.offsetWidth)/((e.story.duration||d)/n),f.current.style.width="".concat(x+g,"px")))},i=p,s=o(),c=o(),l=o(t),u((function(){l.current=t}),[t]),u((function(){return!1!==i?(s.current=requestAnimationFrame((function e(n){if(null!=c.current){var t=n-c.current;l.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",a({className:_,ref:v},{children:n("div",{className:w,ref:f},void 0)}),void 0)}var g="progress-styles_wrapper__qQPyW";function b(e){var t=m().stories;return n("div",a({className:g,style:{gridTemplateColumns:"repeat(".concat(t.length,",1fr)")}},{children:t.map((function(t){return n(x,{hasStoryPassed:t.index<e.activeStoryIndex,isActive:t.index===e.activeStoryIndex,story:t,isPaused:t.index===e.activeStoryIndex&&e.isPaused},t.index)}))}),void 0)}var P=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),M="Story-styles_wrapper__oJP7j",C="Story-styles_header__-rnWL",S="Image-styles_image__gnfW1";function N(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 T="Video-styles_video__BykuO";function O(t){var r=o(null);return u((function(){t.onPause()}),[]),u((function(){!function(){l(this,void 0,void 0,(function(){var e;return d(this,(function(n){switch(n.label){case 0:if(!(e=r.current))return[2];n.label=1;case 1:return n.trys.push([1,3,,4]),[4,e.play()];case 2:return n.sent(),[3,4];case 3:return n.sent(),e.muted=!0,e.play(),[3,4];case 4:return[2]}}))}))}()}),[t.story.type]),e("video",a({className:T,ref:r,autoPlay:!0,playsInline:!0,"webkit-playsinline":"",controls:!1,src:t.story.url,onLoadedData:function(){setTimeout((function(){t.onResume()}),4)}},{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)}var k="CustomComponents-styles_component__w87Wx";function A(e){return n("div",a({className:k},{children:n(e.story.component,{pause:e.onPause,resume:e.onResume,story:e.story},void 0)}),void 0)}var D="SeeMore-styles_seeMoreWrapper__kwjif",E="SeeMore-styles_defaultSeeMore__-B1QW";function I(t){return t.story.seeMore?n("button",a({type:"button",onClick:function(){t.onSeeMoreClick()},className:D},{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",a({className:E},{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 W="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",R="SeeMoreComponent-styles_closeIcon__LMm3b";function j(t){return t.story.seeMore&&t.story.seeMoreComponent?e("div",a({className:W},{children:[n("button",a({className:R,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?n(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function F(t){var o=r(!1),i=o[0],s=o[1];return u((function(){s(!1)}),[t.story]),e("div",a({className:M},{children:[t.story.type===P.IMAGE?n(N,a({},t),void 0):t.story.type===P.VIDEO?n(O,a({},t),void 0):t.story.type===P.COMPONENT?n(A,a({},t),void 0):null,t.story.header&&n("div",a({className:C},{children:"function"==typeof t.story.header?n(t.story.header,{},void 0):t.story.header}),void 0),n(I,{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(j,{story:t.story,onClose:function(){t.onResume(),s(!1)}},void 0)]}),void 0)}var U="styles_main__-0FEu";function L(t){var i,s,l,d,v,y,p=t.stories,m=void 0===p?[]:p,_=t.width,w=void 0===_?"100%":_,x=t.height,g=void 0===x?"100%":x,P=t.onStoryChange,M=void 0===P?function(){}:P,C=t.currentIndex,S=void 0===C?0:C,N=t.defaultDuration,T=void 0===N?1e4:N,O=c((function(){return m.map((function(e,n){return a(a({},e),{index:n})}))}),[m]),k=r(O[S]),A=k[0],D=k[1],E=m.length-1,I=r(null),W=I[0],R=I[1],j=r(!1),L=j[0],G=j[1],H={stories:O,width:w,height:g,defaultDuration:T};function q(){A.index<E&&D((function(e){var n=e.index+1;return O[n]}))}function z(){G(!0)}function B(){G(!1)}return u((function(){if(A){var e=A.duration||T;R(e),M(A.index)}}),[A]),i=function(){R(null),q()},s=W,l=L,d=o(),v=o(s),y=o(Date.now()),u((function(){d.current=i}),[i]),u((function(){v.current=s}),[s]),u((function(){if(null!==s&&!1===l){y.current=Date.now();var e=setTimeout((function(){d.current()}),v.current);return function(){return clearTimeout(e)}}return function(){}}),[s,l]),u((function(){l&&(v.current=s-(Date.now()-y.current))}),[l]),n(f.Provider,a({value:H},{children:e("div",a({className:U,style:{width:w,height:g}},{children:[n(b,{activeStoryIndex:A.index,isPaused:L},void 0),n(F,{onPause:z,onResume:B,story:A},void 0),n(h,{onNextClick:q,onPrevClick:function(){A.index>0&&D((function(e){var n=e.index-1;return O[n]}))},onPause:z,onResume:B},void 0)]}),void 0)}),void 0)}export{L 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 a=function(){return a=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},a.apply(this,arguments)};function l(e,n,t,r){return new(t||(t=Promise))((function(o,i){function u(e){try{c(r.next(e))}catch(e){i(e)}}function s(e){try{c(r.throw(e))}catch(e){i(e)}}function c(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t((function(e){e(n)}))).then(u,s)}c((r=r.apply(e,n||[])).next())}))}function d(e,n){var t,r,o,i,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function s(i){return function(s){return function(i){if(t)throw new TypeError("Generator is already executing.");for(;u;)try{if(t=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return u.label++,{value:i[1],done:!1};case 5:u.label++,r=i[1],i=[0];continue;case 7:i=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){u=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){u.label=i[1];break}if(6===i[0]&&u.label<o[1]){u.label=o[1],o=i;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(i);break}o[2]&&u.ops.pop(),u.trys.pop();continue}i=n.call(e,u)}catch(e){i=[6,e],r=0}finally{t=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,s])}}}var f=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 v=Object.freeze({LEFT:"left",RIGHT:"right"}),y="Actions-styles_left__eky50",p="Actions-styles_right__zguoH";function h(t){var u=t.onNextClick,s=t.onPrevClick,c=t.onPause,l=t.onResume,d=r(!1),f=d[0],h=d[1],m=o(null);function _(e){e.stopPropagation(),e.preventDefault(),clearTimeout(m.current),m.current=setTimeout((function(){c(),h(!0)}),200)}function x(e,n){if(n.stopPropagation(),n.preventDefault(),clearTimeout(m.current),f)return l(),void h(!1);l(),e!=v.LEFT?u():s()}function w(e){return{onMouseUp:function(n){return x(e,n)},onTouchEnd:function(n){return x(e,n)},onTouchStart:function(e){return _(e)},onMouseDown:function(e){return _(e)}}}return e(i,{children:[n("div",a({className:y},w(v.LEFT)),void 0),n("div",a({className:p},w(v.RIGHT)),void 0)]},void 0)}function m(){return s(f)}var _="ProgressBar-styles_wrapper__oqUCo",x="ProgressBar-styles_bar__x0O50";function w(e){var t,i,s,c,l,d=m().defaultDuration,f=o(null),v=o(null),y=r(!1),p=y[0],h=y[1],w=0,P=.1;return u((function(){e.isPaused?h(!1):e.isActive?h(!0):h(!1)}),[e.isActive,e.isPaused]),u((function(){e.isActive&&f.current&&(f.current.style.width="0px")}),[e.isActive]),u((function(){var n;f.current&&(e.hasStoryPassed?f.current.style.width="".concat(null===(n=null==v?void 0:v.current)||void 0===n?void 0:n.offsetWidth,"px"):e.isActive||(f.current.style.width="0px"))}),[e.hasStoryPassed,e.isActive]),t=function(n){var t;f.current&&v.current&&((w=Number((f.current.style.width||"1px").slice(0,f.current.style.width.length-2))||0)>v.current.offsetWidth?h(!1):(P=(null===(t=null==v?void 0:v.current)||void 0===t?void 0:t.offsetWidth)/((e.story.duration||d)/n),f.current.style.width="".concat(w+P,"px")))},i=p,s=o(),c=o(),l=o(t),u((function(){l.current=t}),[t]),u((function(){return!1!==i?(s.current=requestAnimationFrame((function e(n){if(null!=c.current){var t=n-c.current;l.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",a({className:_,ref:v},{children:n("div",{className:x,ref:f},void 0)}),void 0)}var P="progress-styles_wrapper__qQPyW";function g(e){var t=m().stories;return n("div",a({className:P,style:{gridTemplateColumns:"repeat(".concat(t.length,",1fr)")}},{children:t.map((function(t){return n(w,{hasStoryPassed:t.index<e.activeStoryIndex,isActive:t.index===e.activeStoryIndex,story:t,isPaused:t.index===e.activeStoryIndex&&e.isPaused},t.index)}))}),void 0)}var b=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),M="Story-styles_wrapper__oJP7j",C="Story-styles_header__-rnWL",S="Image-styles_image__gnfW1";function N(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 T="Video-styles_video__BykuO",O="Video-styles_loaderWrapper__TqVWk",k="Video-styles_loader__FxxSV";function A(t){var s=m().isPaused,c=r(!0),f=c[0],v=c[1],y=o(null);return u((function(){t.onPause()}),[]),u((function(){y.current&&(!s||y.current.paused?y.current.play():y.current.pause())}),[s]),u((function(){!function(){l(this,void 0,void 0,(function(){var e;return d(this,(function(n){switch(n.label){case 0:if(!(e=y.current))return[2];n.label=1;case 1:return n.trys.push([1,3,,4]),[4,e.play()];case 2:return n.sent(),[3,4];case 3:return n.sent(),e.muted=!0,e.play(),[3,4];case 4:return[2]}}))}))}()}),[t.story.type]),e(i,{children:[e("video",a({className:T,ref:y,autoPlay:!0,playsInline:!0,"webkit-playsinline":"",controls:!1,src:t.story.url,onLoadedData:function(){setTimeout((function(){t.onResume(),v(!1)}),4)}},{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),f&&n("div",a({className:O},{children:n("div",{className:k},void 0)}),void 0)]},void 0)}var D="CustomComponents-styles_component__w87Wx";function E(e){return n("div",a({className:D},{children:n(e.story.component,{pause:e.onPause,resume:e.onResume,story:e.story},void 0)}),void 0)}var I="SeeMore-styles_seeMoreWrapper__kwjif",W="SeeMore-styles_defaultSeeMore__-B1QW";function R(t){return t.story.seeMore?n("button",a({type:"button",onClick:function(){t.onSeeMoreClick()},className:I},{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",a({className:W},{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 F="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",j="SeeMoreComponent-styles_closeIcon__LMm3b";function U(t){return t.story.seeMore&&t.story.seeMoreComponent?e("div",a({className:F},{children:[n("button",a({className:j,onClick:t.onClose},{children:"✕"}),void 0),"function"==typeof t.story.seeMoreComponent?n(t.story.seeMoreComponent,{},void 0):t.story.seeMoreComponent]}),void 0):null}function V(t){var o=r(!1),i=o[0],s=o[1];return u((function(){s(!1)}),[t.story]),e("div",a({className:M},{children:[t.story.type===b.IMAGE?n(N,a({},t),void 0):t.story.type===b.VIDEO?n(A,a({},t),void 0):t.story.type===b.COMPONENT?n(E,a({},t),void 0):null,t.story.header&&n("div",a({className:C},{children:"function"==typeof t.story.header?n(t.story.header,{},void 0):t.story.header}),void 0),n(R,{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(U,{story:t.story,onClose:function(){t.onResume(),s(!1)}},void 0)]}),void 0)}var L="styles_main__-0FEu";function q(t){var i,s,l,d,v,y,p=t.stories,m=void 0===p?[]:p,_=t.width,x=void 0===_?"100%":_,w=t.height,P=void 0===w?"100%":w,b=t.onStoryChange,M=void 0===b?function(){}:b,C=t.currentIndex,S=void 0===C?0:C,N=t.defaultDuration,T=void 0===N?1e4:N,O=c((function(){return m.map((function(e,n){return a(a({},e),{index:n})}))}),[m]),k=r(O[S]),A=k[0],D=k[1],E=m.length-1,I=r(!1),W=I[0],R=I[1],F={stories:O,width:x,height:P,defaultDuration:T,isPaused:W};function j(){A.index<E&&D((function(e){var n=e.index+1;return O[n]}))}function U(){R(!0)}function q(){R(!1)}return u((function(){A&&M(A.index)}),[A]),i=function(){j()},s=A.duration||T,l=W,d=o(),v=o(s),y=o(Date.now()),u((function(){d.current=i}),[i]),u((function(){v.current=s}),[s]),u((function(){if(null!==s&&!1===l){y.current=Date.now();var e=setTimeout((function(){d.current()}),v.current);return function(){clearTimeout(e)}}return function(){}}),[s,l]),u((function(){l&&(v.current=v.current-(Date.now()-y.current))}),[l]),n(f.Provider,a({value:F},{children:e("div",a({className:L,style:{width:x,height:P}},{children:[n(g,{activeStoryIndex:A.index,isPaused:W},void 0),n(V,{onPause:U,onResume:q,story:A},A.index),n(h,{onNextClick:j,onPrevClick:function(){A.index>0&&D((function(e){var n=e.index-1;return O[n]}))},onPause:U,onResume:q},void 0)]}),void 0)}),void 0)}export{q 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)};function r(e,t,n,r){return new(n||(n=Promise))((function(o,s){function i(e){try{c(r.next(e))}catch(e){s(e)}}function u(e){try{c(r.throw(e))}catch(e){s(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,u)}c((r=r.apply(e,t||[])).next())}))}function o(e,t){var n,r,o,s,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return s={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function u(s){return function(u){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,r&&(o=2&s[0]?r.return:s[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;switch(r=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,r=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],r=0}finally{n=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}}var s=t.createContext({stories:[],width:"100%",height:"100%",defaultDuration:1e4});Object.freeze({MOUSE_DOWN:"mouseDown",MOUSE_UP:"mouseUp",TOUCH_START:"touchStart",TOUCH_END:"touchEnd"});var i=Object.freeze({LEFT:"left",RIGHT:"right"}),u="Actions-styles_left__eky50",c="Actions-styles_right__zguoH";function a(r){var o=r.onNextClick,s=r.onPrevClick,a=r.onPause,l=r.onResume,f=t.useState(!1),d=f[0],v=f[1],y=t.useRef(null);function p(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){a(),v(!0)}),200)}function h(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(y.current),d)return l(),void v(!1);l(),e!=i.LEFT?o():s()}function m(e){return{onMouseUp:function(t){return h(e,t)},onTouchEnd:function(t){return h(e,t)},onTouchStart:function(e){return p(e)},onMouseDown:function(e){return p(e)}}}return e.jsxs(t.Fragment,{children:[e.jsx("div",n({className:u},m(i.LEFT)),void 0),e.jsx("div",n({className:c},m(i.RIGHT)),void 0)]},void 0)}function l(){return t.useContext(s)}var f="ProgressBar-styles_wrapper__oqUCo",d="ProgressBar-styles_bar__x0O50";function v(r){var o,s,i,u,c,a=l().defaultDuration,v=t.useRef(null),y=t.useRef(null),p=t.useState(!1),h=p[0],m=p[1],x=0,_=.1;return t.useEffect((function(){r.isPaused?m(!1):r.isActive?m(!0):m(!1)}),[r.isActive,r.isPaused]),t.useEffect((function(){r.isActive&&v.current&&(v.current.style.width="0px")}),[r.isActive]),t.useEffect((function(){var e;v.current&&(r.hasStoryPassed?v.current.style.width="".concat(null===(e=null==y?void 0:y.current)||void 0===e?void 0:e.offsetWidth,"px"):r.isActive||(v.current.style.width="0px"))}),[r.hasStoryPassed,r.isActive]),o=function(e){var t;v.current&&y.current&&((x=Number((v.current.style.width||"1px").slice(0,v.current.style.width.length-2))||0)>y.current.offsetWidth?m(!1):(_=(null===(t=null==y?void 0:y.current)||void 0===t?void 0:t.offsetWidth)/((r.story.duration||a)/e),v.current.style.width="".concat(x+_,"px")))},s=h,i=t.useRef(),u=t.useRef(),c=t.useRef(o),t.useEffect((function(){c.current=o}),[o]),t.useEffect((function(){return!1!==s?(i.current=requestAnimationFrame((function e(t){if(null!=u.current){var n=t-u.current;c.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:f,ref:y},{children:e.jsx("div",{className:d,ref:v},void 0)}),void 0)}var y="progress-styles_wrapper__qQPyW";function p(t){var r=l().stories;return e.jsx("div",n({className:y,style:{gridTemplateColumns:"repeat(".concat(r.length,",1fr)")}},{children:r.map((function(n){return e.jsx(v,{hasStoryPassed:n.index<t.activeStoryIndex,isActive:n.index===t.activeStoryIndex,story:n,isPaused:n.index===t.activeStoryIndex&&t.isPaused},n.index)}))}),void 0)}var h=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),m="Story-styles_wrapper__oJP7j",x="Story-styles_header__-rnWL",_="Image-styles_image__gnfW1";function j(n){return t.useEffect((function(){n.onPause()}),[]),e.jsx("img",{className:_,src:n.story.url,alt:"story",onLoad:function(){setTimeout((function(){n.onResume()}),4)}},void 0)}var w="Video-styles_video__BykuO";function g(s){var i=t.useRef(null);return t.useEffect((function(){s.onPause()}),[]),t.useEffect((function(){!function(){r(this,void 0,void 0,(function(){var e;return o(this,(function(t){switch(t.label){case 0:if(!(e=i.current))return[2];t.label=1;case 1:return t.trys.push([1,3,,4]),[4,e.play()];case 2:return t.sent(),[3,4];case 3:return t.sent(),e.muted=!0,e.play(),[3,4];case 4:return[2]}}))}))}()}),[s.story.type]),e.jsxs("video",n({className:w,ref:i,autoPlay:!0,playsInline:!0,"webkit-playsinline":"",controls:!1,src:s.story.url,onLoadedData:function(){setTimeout((function(){s.onResume()}),4)}},{children:[e.jsx("source",{src:s.story.url,type:"video/mp4"},void 0),e.jsx("source",{src:s.story.url,type:"video/webm"},void 0),e.jsx("source",{src:s.story.url,type:"video/ogg"},void 0),e.jsx("p",{children:"Video not supported"},void 0)]}),void 0)}var S="CustomComponents-styles_component__w87Wx";function b(t){return e.jsx("div",n({className:S},{children:e.jsx(t.story.component,{pause:t.onPause,resume:t.onResume,story:t.story},void 0)}),void 0)}var E="SeeMore-styles_seeMoreWrapper__kwjif",M="SeeMore-styles_defaultSeeMore__-B1QW";function P(t){return t.story.seeMore?e.jsx("button",n({type:"button",onClick:function(){t.onSeeMoreClick()},className:E},{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:M},{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 C="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",N="SeeMoreComponent-styles_closeIcon__LMm3b";function T(t){return t.story.seeMore&&t.story.seeMoreComponent?e.jsxs("div",n({className:C},{children:[e.jsx("button",n({className:N,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 R(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===h.IMAGE?e.jsx(j,n({},r),void 0):r.story.type===h.VIDEO?e.jsx(g,n({},r),void 0):r.story.type===h.COMPONENT?e.jsx(b,n({},r),void 0):null,r.story.header&&e.jsx("div",n({className:x},{children:"function"==typeof r.story.header?e.jsx(r.story.header,{},void 0):r.story.header}),void 0),e.jsx(P,{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(T,{story:r.story,onClose:function(){r.onResume(),i(!1)}},void 0)]}),void 0)}var O="styles_main__-0FEu";module.exports=function(r){var o,i,u,c,l,f,d=r.stories,v=void 0===d?[]:d,y=r.width,h=void 0===y?"100%":y,m=r.height,x=void 0===m?"100%":m,_=r.onStoryChange,j=void 0===_?function(){}:_,w=r.currentIndex,g=void 0===w?0:w,S=r.defaultDuration,b=void 0===S?1e4:S,E=t.useMemo((function(){return v.map((function(e,t){return n(n({},e),{index:t})}))}),[v]),M=t.useState(E[g]),P=M[0],C=M[1],N=v.length-1,T=t.useState(null),k=T[0],A=T[1],D=t.useState(!1),I=D[0],W=D[1],F={stories:E,width:h,height:x,defaultDuration:b};function U(){P.index<N&&C((function(e){var t=e.index+1;return E[t]}))}function L(){W(!0)}function q(){W(!1)}return t.useEffect((function(){if(P){var e=P.duration||b;A(e),j(P.index)}}),[P]),o=function(){A(null),U()},i=k,u=I,c=t.useRef(),l=t.useRef(i),f=t.useRef(Date.now()),t.useEffect((function(){c.current=o}),[o]),t.useEffect((function(){l.current=i}),[i]),t.useEffect((function(){if(null!==i&&!1===u){f.current=Date.now();var e=setTimeout((function(){c.current()}),l.current);return function(){return clearTimeout(e)}}return function(){}}),[i,u]),t.useEffect((function(){u&&(l.current=i-(Date.now()-f.current))}),[u]),e.jsx(s.Provider,n({value:F},{children:e.jsxs("div",n({className:O,style:{width:h,height:x}},{children:[e.jsx(p,{activeStoryIndex:P.index,isPaused:I},void 0),e.jsx(R,{onPause:L,onResume:q,story:P},void 0),e.jsx(a,{onNextClick:U,onPrevClick:function(){P.index>0&&C((function(e){var t=e.index-1;return E[t]}))},onPause:L,onResume:q},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)};function r(e,t,n,r){return new(n||(n=Promise))((function(o,s){function i(e){try{c(r.next(e))}catch(e){s(e)}}function u(e){try{c(r.throw(e))}catch(e){s(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(i,u)}c((r=r.apply(e,t||[])).next())}))}function o(e,t){var n,r,o,s,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return s={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function u(s){return function(u){return function(s){if(n)throw new TypeError("Generator is already executing.");for(;i;)try{if(n=1,r&&(o=2&s[0]?r.return:s[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,s[1])).done)return o;switch(r=0,o&&(s=[2&s[0],o.value]),s[0]){case 0:case 1:o=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,r=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!o||s[1]>o[0]&&s[1]<o[3])){i.label=s[1];break}if(6===s[0]&&i.label<o[1]){i.label=o[1],o=s;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(s);break}o[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],r=0}finally{n=o=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,u])}}}var s=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 i=Object.freeze({LEFT:"left",RIGHT:"right"}),u="Actions-styles_left__eky50",c="Actions-styles_right__zguoH";function a(r){var o=r.onNextClick,s=r.onPrevClick,a=r.onPause,l=r.onResume,d=t.useState(!1),f=d[0],v=d[1],y=t.useRef(null);function p(e){e.stopPropagation(),e.preventDefault(),clearTimeout(y.current),y.current=setTimeout((function(){a(),v(!0)}),200)}function h(e,t){if(t.stopPropagation(),t.preventDefault(),clearTimeout(y.current),f)return l(),void v(!1);l(),e!=i.LEFT?o():s()}function x(e){return{onMouseUp:function(t){return h(e,t)},onTouchEnd:function(t){return h(e,t)},onTouchStart:function(e){return p(e)},onMouseDown:function(e){return p(e)}}}return e.jsxs(t.Fragment,{children:[e.jsx("div",n({className:u},x(i.LEFT)),void 0),e.jsx("div",n({className:c},x(i.RIGHT)),void 0)]},void 0)}function l(){return t.useContext(s)}var d="ProgressBar-styles_wrapper__oqUCo",f="ProgressBar-styles_bar__x0O50";function v(r){var o,s,i,u,c,a=l().defaultDuration,v=t.useRef(null),y=t.useRef(null),p=t.useState(!1),h=p[0],x=p[1],m=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&&v.current&&(v.current.style.width="0px")}),[r.isActive]),t.useEffect((function(){var e;v.current&&(r.hasStoryPassed?v.current.style.width="".concat(null===(e=null==y?void 0:y.current)||void 0===e?void 0:e.offsetWidth,"px"):r.isActive||(v.current.style.width="0px"))}),[r.hasStoryPassed,r.isActive]),o=function(e){var t;v.current&&y.current&&((m=Number((v.current.style.width||"1px").slice(0,v.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||a)/e),v.current.style.width="".concat(m+_,"px")))},s=h,i=t.useRef(),u=t.useRef(),c=t.useRef(o),t.useEffect((function(){c.current=o}),[o]),t.useEffect((function(){return!1!==s?(i.current=requestAnimationFrame((function e(t){if(null!=u.current){var n=t-u.current;c.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:d,ref:y},{children:e.jsx("div",{className:f,ref:v},void 0)}),void 0)}var y="progress-styles_wrapper__qQPyW";function p(t){var r=l().stories;return e.jsx("div",n({className:y,style:{gridTemplateColumns:"repeat(".concat(r.length,",1fr)")}},{children:r.map((function(n){return e.jsx(v,{hasStoryPassed:n.index<t.activeStoryIndex,isActive:n.index===t.activeStoryIndex,story:n,isPaused:n.index===t.activeStoryIndex&&t.isPaused},n.index)}))}),void 0)}var h=Object.freeze({IMAGE:"image",VIDEO:"video",COMPONENT:"component"}),x="Story-styles_wrapper__oJP7j",m="Story-styles_header__-rnWL",_="Image-styles_image__gnfW1";function j(n){return t.useEffect((function(){n.onPause()}),[]),e.jsx("img",{className:_,src:n.story.url,alt:"story",onLoad:function(){setTimeout((function(){n.onResume()}),4)}},void 0)}var w="Video-styles_video__BykuO",g="Video-styles_loaderWrapper__TqVWk",P="Video-styles_loader__FxxSV";function S(s){var i=l().isPaused,u=t.useState(!0),c=u[0],a=u[1],d=t.useRef(null);return t.useEffect((function(){s.onPause()}),[]),t.useEffect((function(){d.current&&(!i||d.current.paused?d.current.play():d.current.pause())}),[i]),t.useEffect((function(){!function(){r(this,void 0,void 0,(function(){var e;return o(this,(function(t){switch(t.label){case 0:if(!(e=d.current))return[2];t.label=1;case 1:return t.trys.push([1,3,,4]),[4,e.play()];case 2:return t.sent(),[3,4];case 3:return t.sent(),e.muted=!0,e.play(),[3,4];case 4:return[2]}}))}))}()}),[s.story.type]),e.jsxs(t.Fragment,{children:[e.jsxs("video",n({className:w,ref:d,autoPlay:!0,playsInline:!0,"webkit-playsinline":"",controls:!1,src:s.story.url,onLoadedData:function(){setTimeout((function(){s.onResume(),a(!1)}),4)}},{children:[e.jsx("source",{src:s.story.url,type:"video/mp4"},void 0),e.jsx("source",{src:s.story.url,type:"video/webm"},void 0),e.jsx("source",{src:s.story.url,type:"video/ogg"},void 0),e.jsx("p",{children:"Video not supported"},void 0)]}),void 0),c&&e.jsx("div",n({className:g},{children:e.jsx("div",{className:P},void 0)}),void 0)]},void 0)}var E="CustomComponents-styles_component__w87Wx";function b(t){return e.jsx("div",n({className:E},{children:e.jsx(t.story.component,{pause:t.onPause,resume:t.onResume,story:t.story},void 0)}),void 0)}var M="SeeMore-styles_seeMoreWrapper__kwjif",C="SeeMore-styles_defaultSeeMore__-B1QW";function N(t){return t.story.seeMore?e.jsx("button",n({type:"button",onClick:function(){t.onSeeMoreClick()},className:M},{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:C},{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 T="SeeMoreComponent-styles_seeMoreComponentWrapper__0T6Ap",R="SeeMoreComponent-styles_closeIcon__LMm3b";function O(t){return t.story.seeMore&&t.story.seeMoreComponent?e.jsxs("div",n({className:T},{children:[e.jsx("button",n({className:R,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:x},{children:[r.story.type===h.IMAGE?e.jsx(j,n({},r),void 0):r.story.type===h.VIDEO?e.jsx(S,n({},r),void 0):r.story.type===h.COMPONENT?e.jsx(b,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(N,{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(O,{story:r.story,onClose:function(){r.onResume(),i(!1)}},void 0)]}),void 0)}var A="styles_main__-0FEu";module.exports=function(r){var o,i,u,c,l,d,f=r.stories,v=void 0===f?[]:f,y=r.width,h=void 0===y?"100%":y,x=r.height,m=void 0===x?"100%":x,_=r.onStoryChange,j=void 0===_?function(){}:_,w=r.currentIndex,g=void 0===w?0:w,P=r.defaultDuration,S=void 0===P?1e4:P,E=t.useMemo((function(){return v.map((function(e,t){return n(n({},e),{index:t})}))}),[v]),b=t.useState(E[g]),M=b[0],C=b[1],N=v.length-1,T=t.useState(!1),R=T[0],O=T[1],D={stories:E,width:h,height:m,defaultDuration:S,isPaused:R};function I(){M.index<N&&C((function(e){var t=e.index+1;return E[t]}))}function W(){O(!0)}function F(){O(!1)}return t.useEffect((function(){M&&j(M.index)}),[M]),o=function(){I()},i=M.duration||S,u=R,c=t.useRef(),l=t.useRef(i),d=t.useRef(Date.now()),t.useEffect((function(){c.current=o}),[o]),t.useEffect((function(){l.current=i}),[i]),t.useEffect((function(){if(null!==i&&!1===u){d.current=Date.now();var e=setTimeout((function(){c.current()}),l.current);return function(){clearTimeout(e)}}return function(){}}),[i,u]),t.useEffect((function(){u&&(l.current=l.current-(Date.now()-d.current))}),[u]),e.jsx(s.Provider,n({value:D},{children:e.jsxs("div",n({className:A,style:{width:h,height:m}},{children:[e.jsx(p,{activeStoryIndex:M.index,isPaused:R},void 0),e.jsx(k,{onPause:W,onResume:F,story:M},M.index),e.jsx(a,{onNextClick:I,onPrevClick:function(){M.index>0&&C((function(e){var t=e.index-1;return E[t]}))},onPause:W,onResume:F},void 0)]}),void 0)}),void 0)};
 //# sourceMappingURL=index.js.map

package.json

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

src/Contexts/index.ts

@@ -9,4 +9,5 @@ import { createContext } from 'react';
   defaultDuration: 10000,
+  isPaused: false,
 };
 
 export const StoriesContext = createContext(defaultStoryContext);

src/Hooks/index.ts

@@ -39,5 +39,6 @@ import { useContext, useRef, useEffect } from 'react';
       startTimeRef.current = Date.now();
-      const id = setTimeout(tick, timeRemaining.current);
-
-      return () => clearTimeout(id);
+      const timerId = setTimeout(tick, timeRemaining.current);
+      return () => {
+        clearTimeout(timerId);
+      };
     }
@@ -49,3 +50,4 @@ return () => {};
     if (pause) {
-      timeRemaining.current = delay - (Date.now() - startTimeRef.current);
+      timeRemaining.current =
+        timeRemaining.current - (Date.now() - startTimeRef.current);
     }
@@ -74,4 +76,2 @@ }, [pause]);
       previousTimeRef.current = time;
-      if (start === false) {
-      }
       requestRef.current = requestAnimationFrame(animate);
@@ -78,0 +78,0 @@ }

src/types.d.ts

@@ -30,2 +30,3 @@ interface IStoryObject {
   defaultDuration: number;
+  isPaused: boolean;
 }
@@ -32,0 +33,0 @@

No alert changes

Improved metrics

Total package byte prevSize

536641

increased by0.52%

Lines of code

1108

increased by5.12%

No dependency changes