react-video-seek-slider - npm Package Compare versions

Comparing version 6.0.8 to 6.0.9

index.js

 /*! For license information please see index.js.LICENSE.txt */
-(() => {
-  'use strict';
-  var e = {
-      20: (e, t, r) => {
-        var s = r(800),
-          o = Symbol.for('react.element'),
-          i = Symbol.for('react.fragment'),
-          n = Object.prototype.hasOwnProperty,
-          a =
-            s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
-              .ReactCurrentOwner,
-          c = { key: !0, ref: !0, __self: !0, __source: !0 };
-        function u(e, t, r) {
-          var s,
-            i = {},
-            u = null,
-            m = null;
-          for (s in (void 0 !== r && (u = '' + r),
-          void 0 !== t.key && (u = '' + t.key),
-          void 0 !== t.ref && (m = t.ref),
-          t))
-            n.call(t, s) && !c.hasOwnProperty(s) && (i[s] = t[s]);
-          if (e && e.defaultProps)
-            for (s in (t = e.defaultProps)) void 0 === i[s] && (i[s] = t[s]);
-          return {
-            $$typeof: o,
-            type: e,
-            key: u,
-            ref: m,
-            props: i,
-            _owner: a.current,
-          };
-        }
-        (t.Fragment = i), (t.jsx = u), (t.jsxs = u);
-      },
-      848: (e, t, r) => {
-        e.exports = r(20);
-      },
-      800: (e) => {
-        e.exports = require('react');
-      },
-    },
-    t = {};
-  function r(s) {
-    var o = t[s];
-    if (void 0 !== o) return o.exports;
-    var i = (t[s] = { exports: {} });
-    return e[s](i, i.exports, r), i.exports;
-  }
-  (r.d = (e, t) => {
-    for (var s in t)
-      r.o(t, s) &&
-        !r.o(e, s) &&
-        Object.defineProperty(e, s, { enumerable: !0, get: t[s] });
-  }),
-    (r.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)),
-    (r.r = (e) => {
-      'undefined' != typeof Symbol &&
-        Symbol.toStringTag &&
-        Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }),
-        Object.defineProperty(e, '__esModule', { value: !0 });
-    });
-  var s = {};
-  r.r(s), r.d(s, { VideoSeekSlider: () => v });
-  var o = r(848),
-    i = r(800);
-  const n = (e, t, r) => e >= t && e <= r;
-  function a(e, t, r, s) {
-    const o = n(e, t, r);
-    return s ? 1 : o ? (e - t) / (r - t) : 0;
-  }
-  const c = (0, i.memo)(
-    ({
-      label: e = '',
-      startTime: t,
-      maxTime: r,
-      endTime: s,
-      currentTime: i,
-      seekHoverTime: n,
-      bufferTime: c,
-      isTimePassed: u = !1,
-      isBufferPassed: m = !1,
-      isHoverPassed: l = !1,
-      onHover: d = () => {},
-      withGap: f,
-    }) => {
-      const v = (100 * t) / (r || -1),
-        h = ((s - t) / r) * 100,
-        p = 'main' + (f ? ' with-gap' : ''),
-        T = a(i, t, s, u),
-        x = a(n, t, s, l),
-        b = a(c, t, s, m);
-      return (0, o.jsxs)('div', {
-        className: p,
-        onMouseMove: () => d(e),
-        style: { width: `${h}%`, left: `${v}%` },
-        children: [
-          (0, o.jsx)('div', {
-            className: 'inner-seek-block buffered',
-            'data-test-id': 'test-buffered',
-            style: { transform: `scaleX(${b})` },
-          }),
-          (0, o.jsx)('div', {
-            className: 'inner-seek-block seek-hover',
-            'data-test-id': 'test-seek-hover',
-            style: { transform: `scaleX(${x})` },
-          }),
-          (0, o.jsx)('div', {
-            className: 'inner-seek-block connect',
-            style: { transform: `scaleX(${T})` },
-          }),
-        ],
-      });
-    }
-  );
-  function u(e, t, r) {
-    const s = (100 * t) / r;
-    return Math.floor((e / 100) * +s);
-  }
-  const m = (e, t, r) => (t + 1 < e.length ? e[t + 1].fromMs : r),
-    l = ({
-      max: e = 1e3,
-      currentTime: t = 0,
-      bufferTime: r = 0,
-      seekHoverPosition: s = 0,
-      timeCodes: a,
-      trackWidth: l,
-      mobileSeeking: d,
-      label: f,
-      setLabel: v,
-    }) => {
-      const h = u(e, s, l),
-        p = (0, i.useCallback)(
-          (e) => {
-            f !== e && v(e);
-          },
-          [f]
-        );
-      return (
-        (0, i.useEffect)(() => {
-          if (!d) return;
-          const r = a?.find(({ fromMs: r }, s) => {
-            const o = m(a, s, e);
-            return n(t, r, o);
-          });
-          r?.description !== f && v(r?.description || '');
-        }, [t, f, e, a]),
-        (0, o.jsx)(o.Fragment, {
-          children: a?.map(({ fromMs: s, description: i }, u) => {
-            const l = m(a, u, e),
-              d = l <= t,
-              f = l <= r,
-              v = l <= h;
-            let T = n(t, s, l);
-            const x = d || !T ? 0 : t;
-            T = n(r, s, l);
-            const b = f || !T ? 0 : r;
-            T = n(h, s, l);
-            const g = v || !T ? 0 : h;
-            return (0, o.jsx)(
-              c,
-              {
-                label: i,
-                maxTime: e,
-                startTime: s,
-                endTime: l,
-                isTimePassed: d,
-                isBufferPassed: f,
-                isHoverPassed: v,
-                currentTime: x,
-                bufferTime: b,
-                seekHoverTime: g,
-                onHover: p,
-                withGap: !0,
-              },
-              s
-            );
-          }),
-        })
-      );
-    };
-  const d = ({
-      max: e,
-      hoverTimeValue: t,
-      offset: r,
-      trackWidth: s,
-      seekHoverPosition: n,
-      isThumbActive: a,
-      limitTimeTooltipBySides: c,
-      label: u,
-      minutesPrefix: m,
-      secondsPrefix: l,
-      getPreviewScreenUrl: d,
-    }) => {
-      const f = (0, i.useRef)(null),
-        v = a ? 'hover-time active' : 'hover-time',
-        h = (function (e, t, r, s) {
-          let o = 0;
-          return (
-            t &&
-              ((o = e - t.offsetWidth / 2),
-              s &&
-                (o < 0
-                  ? (o = 0)
-                  : o + t.offsetWidth > r && (o = r - t.offsetWidth))),
-            { transform: `translateX(${o}px)` }
-          );
-        })(n, f?.current, s, c),
-        p = (function (e, t, r = 0, s = '', o = '') {
-          const i = (function (e, t = 0) {
-            const r = Math.round(e / 1e3 + t),
-              s = Math.floor(r / 3600),
-              o = r % 3600,
-              i = Math.floor(o / 60),
-              n = Math.ceil(o % 60);
-            return {
-              hh: s.toString(),
-              mm: i < 10 ? `0${i}` : i.toString(),
-              ss: n < 10 ? `0${n}` : n.toString(),
-            };
-          })(t, r);
-          return e + r < 6e4
-            ? o + i.ss
-            : e + r < 36e5
-            ? `${s + i.mm}:${i.ss}`
-            : `${i.hh}:${i.mm}:${i.ss}`;
-        })(e, t, r, m, l);
-      return (0, o.jsxs)('div', {
-        className: v,
-        style: h,
-        ref: f,
-        'data-testid': 'hover-time',
-        children: [
-          a &&
-            d &&
-            (0, o.jsx)('div', {
-              className: 'preview-screen',
-              style: { backgroundImage: `url(${d(t)})` },
-            }),
-          u && (0, o.jsx)('div', { children: u }),
-          p,
-        ],
-      });
-    },
-    f = ({ max: e, currentTime: t, isThumbActive: r }) =>
-      (0, o.jsx)('div', {
-        className: 'thumb active',
-        'data-testid': 'testThumb',
-        style: { left: `calc(${(t / e) * 100}% + -6px)` },
-        children: (0, o.jsx)('div', { className: 'handler' }),
-      }),
-    v = ({
-      max: e = 1e3,
-      currentTime: t = 0,
-      bufferTime: r = 0,
-      hideThumbTooltip: s = !1,
-      offset: a = 0,
-      secondsPrefix: v = '',
-      minutesPrefix: h = '',
-      limitTimeTooltipBySides: p = !0,
-      timeCodes: T,
-      onChange: x = () => {},
-      getPreviewScreenUrl: b,
-    }) => {
-      const [g, k] = (0, i.useState)(0),
-        [w, y] = (0, i.useState)(''),
-        P = (0, i.useRef)(!1),
-        S = (0, i.useRef)(!1),
-        j = (0, i.useRef)(null),
-        _ = j.current?.offsetWidth || 0,
-        M = g > 0 || P.current,
-        E = u(e, g, _),
-        $ = (t) => {
-          const r = j.current?.getBoundingClientRect(),
-            s = r?.left || 0,
-            o = r?.width || 0;
-          let i = t - s;
-          (i = i < 0 ? 0 : i), (i = i > o ? o : i);
-          const n = +(((100 * i) / o) * (e / 100)).toFixed(0);
-          k(i), x(n, n + a);
-        },
-        L = (e) => {
-          if ((e.preventDefault(), e.stopPropagation(), !S.current)) return;
-          const { changedTouches: t } = e;
-          let r = t?.[t.length - 1]?.pageX || 0;
-          (r = r < 0 ? 0 : r), $(r);
-        },
-        O = (e) => {
-          P.current && $(e.pageX);
-        },
-        N = (e, t) => {
-          const r = j.current?.getBoundingClientRect().left || 0,
-            s = e ? 0 : t.pageX - r;
-          k(s);
-        },
-        H = (e = !0) => {
-          (S.current = e), k(e ? g : 0);
-        },
-        R = (e, t) => {
-          t.preventDefault(), O(t), (P.current = e), k(e ? g : 0);
-        },
-        B = (e) => {
-          R(!1, e);
-        },
-        C = () => {
-          H(!1);
-        };
-      return (
-        (0, i.useEffect)(() => {
-          if (!S.current) return;
-          const r = T?.find(({ fromMs: r }, s) => {
-            const o = m(T, s, e);
-            return n(t, r, o);
-          });
-          r?.description !== w && y(r?.description || '');
-        }, [t, w, e, T]),
-        (0, i.useEffect)(
-          () => (
-            window.addEventListener('mousemove', O),
-            window.addEventListener('mouseup', B),
-            window.addEventListener('touchmove', L),
-            window.addEventListener('touchend', C),
-            () => {
-              window.removeEventListener('mousemove', O),
-                window.removeEventListener('mouseup', B),
-                window.removeEventListener('touchmove', L),
-                window.removeEventListener('touchend', C);
-            }
-          ),
-          [e, a, _]
-        ),
-        (0, o.jsxs)('div', {
-          className: 'ui-video-seek-slider',
-          children: [
-            (0, o.jsxs)('div', {
-              className: M ? 'track active' : 'track',
-              ref: j,
-              onMouseMove: (e) => N(!1, e),
-              onMouseLeave: (e) => N(!0, e),
-              onMouseDown: (e) => R(!0, e),
-              onTouchStart: () => H(!0),
-              'data-testid': 'main-track',
-              children: [
-                Boolean(T?.length) &&
-                  (0, o.jsx)(l, {
-                    currentTime: t,
-                    max: e,
-                    bufferTime: r,
-                    seekHoverPosition: g,
-                    timeCodes: T,
-                    mobileSeeking: S.current,
-                    trackWidth: _,
-                    label: w,
-                    setLabel: y,
-                  }),
-                !T &&
-                  (0, o.jsx)(c, {
-                    maxTime: e,
-                    startTime: 0,
-                    endTime: e,
-                    currentTime: t,
-                    bufferTime: r,
-                    seekHoverTime: E,
-                  }),
-              ],
-            }),
-            !s &&
-              (0, o.jsx)(d, {
-                max: e,
-                hoverTimeValue: E,
-                isThumbActive: M,
-                label: w,
-                limitTimeTooltipBySides: p,
-                offset: a,
-                seekHoverPosition: g,
-                trackWidth: _,
-                getPreviewScreenUrl: b,
-                minutesPrefix: h,
-                secondsPrefix: v,
-              }),
-            (0, o.jsx)(f, { max: e, currentTime: t, isThumbActive: M }),
-          ],
-        })
-      );
-    };
-  var h = exports;
-  for (var p in s) h[p] = s[p];
-  s.__esModule && Object.defineProperty(h, '__esModule', { value: !0 });
-})();
+(()=>{"use strict";var e={20:(e,t,r)=>{var s=r(800),o=Symbol.for("react.element"),i=Symbol.for("react.fragment"),n=Object.prototype.hasOwnProperty,a=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,r){var s,i={},u=null,m=null;for(s in void 0!==r&&(u=""+r),void 0!==t.key&&(u=""+t.key),void 0!==t.ref&&(m=t.ref),t)n.call(t,s)&&!c.hasOwnProperty(s)&&(i[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===i[s]&&(i[s]=t[s]);return{$$typeof:o,type:e,key:u,ref:m,props:i,_owner:a.current}}t.Fragment=i,t.jsx=u,t.jsxs=u},848:(e,t,r)=>{e.exports=r(20)},800:e=>{e.exports=require("react")}},t={};function r(s){var o=t[s];if(void 0!==o)return o.exports;var i=t[s]={exports:{}};return e[s](i,i.exports,r),i.exports}r.d=(e,t)=>{for(var s in t)r.o(t,s)&&!r.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};r.r(s),r.d(s,{VideoSeekSlider:()=>v});var o=r(848),i=r(800);const n=(e,t,r)=>e>=t&&e<=r;function a(e,t,r,s){const o=n(e,t,r);return s?1:o?(e-t)/(r-t):0}const c=(0,i.memo)((({label:e="",startTime:t,maxTime:r,endTime:s,currentTime:i,seekHoverTime:n,bufferTime:c,isTimePassed:u=!1,isBufferPassed:m=!1,isHoverPassed:l=!1,onHover:d=()=>{},withGap:f})=>{const v=100*t/(r||-1),h=(s-t)/r*100,p="main"+(f?" with-gap":""),T=a(i,t,s,u),x=a(n,t,s,l),b=a(c,t,s,m);return(0,o.jsxs)("div",{className:p,onMouseMove:()=>d(e),style:{width:`${h}%`,left:`${v}%`},children:[(0,o.jsx)("div",{className:"inner-seek-block buffered","data-test-id":"test-buffered",style:{transform:`scaleX(${b})`}}),(0,o.jsx)("div",{className:"inner-seek-block seek-hover","data-test-id":"test-seek-hover",style:{transform:`scaleX(${x})`}}),(0,o.jsx)("div",{className:"inner-seek-block connect",style:{transform:`scaleX(${T})`}})]})}));function u(e,t,r){const s=100*t/r;return Math.floor(e/100*+s)}const m=(e,t,r)=>t+1<e.length?e[t+1].fromMs:r,l=({max:e=1e3,currentTime:t=0,bufferTime:r=0,seekHoverPosition:s=0,timeCodes:a,trackWidth:l,mobileSeeking:d,label:f,setLabel:v})=>{const h=u(e,s,l),p=(0,i.useCallback)((e=>{f!==e&&v(e)}),[f]);return(0,i.useEffect)((()=>{if(!d)return;const r=a?.find((({fromMs:r},s)=>{const o=m(a,s,e);return n(t,r,o)}));r?.description!==f&&v(r?.description||"")}),[t,f,e,a]),(0,o.jsx)(o.Fragment,{children:a?.map((({fromMs:s,description:i},u)=>{const l=m(a,u,e),d=l<=t,f=l<=r,v=l<=h;let T=n(t,s,l);const x=d||!T?0:t;T=n(r,s,l);const b=f||!T?0:r;T=n(h,s,l);const g=v||!T?0:h;return(0,o.jsx)(c,{label:i,maxTime:e,startTime:s,endTime:l,isTimePassed:d,isBufferPassed:f,isHoverPassed:v,currentTime:x,bufferTime:b,seekHoverTime:g,onHover:p,withGap:!0},s)}))})};const d=({max:e,hoverTimeValue:t,offset:r,trackWidth:s,seekHoverPosition:n,isThumbActive:a,limitTimeTooltipBySides:c,label:u,minutesPrefix:m,secondsPrefix:l,getPreviewScreenUrl:d})=>{const f=(0,i.useRef)(null),v=a?"hover-time active":"hover-time",h=function(e,t,r,s){let o=0;return t&&(o=e-t.offsetWidth/2,s&&(o<0?o=0:o+t.offsetWidth>r&&(o=r-t.offsetWidth))),{transform:`translateX(${o}px)`}}(n,f?.current,s,c),p=function(e,t,r=0,s="",o=""){const i=function(e,t=0){const r=Math.round(e/1e3+t),s=Math.floor(r/3600),o=r%3600,i=Math.floor(o/60),n=Math.ceil(o%60);return{hh:s.toString(),mm:i<10?`0${i}`:i.toString(),ss:n<10?`0${n}`:n.toString()}}(t,r);return e+r<6e4?o+i.ss:e+r<36e5?`${s+i.mm}:${i.ss}`:`${i.hh}:${i.mm}:${i.ss}`}(e,t,r,m,l);return(0,o.jsxs)("div",{className:v,style:h,ref:f,"data-testid":"hover-time",children:[a&&d&&(0,o.jsx)("div",{className:"preview-screen",style:{backgroundImage:`url(${d(t)})`}}),u&&(0,o.jsx)("div",{children:u}),p]})},f=({max:e,currentTime:t,isThumbActive:r})=>(0,o.jsx)("div",{className:"thumb active","data-testid":"testThumb",style:{left:`calc(${t/e*100}% + -6px)`},children:(0,o.jsx)("div",{className:"handler"})}),v=({max:e=1e3,currentTime:t=0,bufferTime:r=0,hideThumbTooltip:s=!1,offset:a=0,secondsPrefix:v="",minutesPrefix:h="",limitTimeTooltipBySides:p=!0,timeCodes:T,onChange:x=()=>{},getPreviewScreenUrl:b})=>{const[g,k]=(0,i.useState)(0),[w,y]=(0,i.useState)(""),P=(0,i.useRef)(!1),S=(0,i.useRef)(!1),j=(0,i.useRef)(null),_=j.current?.offsetWidth||0,M=g>0||P.current,E=u(e,g,_),$=t=>{const r=j.current?.getBoundingClientRect(),s=r?.left||0,o=r?.width||0;let i=t-s;i=i<0?0:i,i=i>o?o:i;const n=+(100*i/o*(e/100)).toFixed(0);k(i),x(n,n+a)},L=e=>{if(e.preventDefault(),e.stopPropagation(),!S.current)return;const{changedTouches:t}=e;let r=t?.[t.length-1]?.pageX||0;r=r<0?0:r,$(r)},O=e=>{P.current&&$(e.pageX)},N=(e,t)=>{const r=j.current?.getBoundingClientRect().left||0,s=e?0:t.pageX-r;k(s)},H=(e=!0)=>{S.current=e,k(e?g:0)},R=(e,t)=>{t.preventDefault(),O(t),P.current=e,k(e?g:0)},B=e=>{R(!1,e)},C=()=>{H(!1)};return(0,i.useEffect)((()=>{if(!S.current)return;const r=T?.find((({fromMs:r},s)=>{const o=m(T,s,e);return n(t,r,o)}));r?.description!==w&&y(r?.description||"")}),[t,w,e,T]),(0,i.useEffect)((()=>(window.addEventListener("mousemove",O),window.addEventListener("mouseup",B),window.addEventListener("touchmove",L),window.addEventListener("touchend",C),()=>{window.removeEventListener("mousemove",O),window.removeEventListener("mouseup",B),window.removeEventListener("touchmove",L),window.removeEventListener("touchend",C)})),[e,a,_]),(0,o.jsxs)("div",{className:"ui-video-seek-slider",children:[(0,o.jsxs)("div",{className:M?"track active":"track",ref:j,onMouseMove:e=>N(!1,e),onMouseLeave:e=>N(!0,e),onMouseDown:e=>R(!0,e),onTouchStart:()=>H(!0),"data-testid":"main-track",children:[Boolean(T?.length)&&(0,o.jsx)(l,{currentTime:t,max:e,bufferTime:r,seekHoverPosition:g,timeCodes:T,mobileSeeking:S.current,trackWidth:_,label:w,setLabel:y}),!T&&(0,o.jsx)(c,{maxTime:e,startTime:0,endTime:e,currentTime:t,bufferTime:r,seekHoverTime:E})]}),!s&&(0,o.jsx)(d,{max:e,hoverTimeValue:E,isThumbActive:M,label:w,limitTimeTooltipBySides:p,offset:a,seekHoverPosition:g,trackWidth:_,getPreviewScreenUrl:b,minutesPrefix:h,secondsPrefix:v}),(0,o.jsx)(f,{max:e,currentTime:t,isThumbActive:M})]})};var h=exports;for(var p in s)h[p]=s[p];s.__esModule&&Object.defineProperty(h,"__esModule",{value:!0})})();

package.json

 {
   "name": "react-video-seek-slider",
   "description": "React video seek slider like youtube",
-  "version": "6.0.8",
+  "version": "6.0.9",
   "main": "/index.js",
@@ -76,5 +76,5 @@ "author": "Sergey Egorov",
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=16.8.0 && <19.0.0",
+    "react-dom": ">=16.8.0 && <19.0.0"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

17188

decreased by-23.44%

Lines of code

31

decreased by-92.62%

Number of low quality alerts

1

increased byInfinity%

No dependency changes