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

Comparing version 5.0.0 to 5.0.1

index.js

 /*! For license information please see index.js.LICENSE.txt */
-(()=>{"use strict";var e={251:(e,t,r)=>{var n=r(699),o=Symbol.for("react.element"),s=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function u(e,t,r){var n,u={},d=null,c=null;for(n in void 0!==r&&(d=""+r),void 0!==t.key&&(d=""+t.key),void 0!==t.ref&&(c=t.ref),t)s.call(t,n)&&!a.hasOwnProperty(n)&&(u[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===u[n]&&(u[n]=t[n]);return{$$typeof:o,type:e,key:d,ref:c,props:u,_owner:i.current}}t.jsx=u,t.jsxs=u},893:(e,t,r)=>{e.exports=r(251)},699:e=>{e.exports=require("react")}},t={};function r(n){var o=t[n];if(void 0!==o)return o.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,r),s.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},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 n={};(()=>{r.r(n),r.d(n,{VideoSeekSlider:()=>s});var e=r(893),t=r(699);function o(e,t){return{transform:`scaleX(${100*t/(e||-1)/100})`}}const s=({max:r=1e3,currentTime:n=0,progress:s=0,hideHoverTime:i=!1,offset:a=0,secondsPrefix:u="",minutesPrefix:d="",onChange:c=(()=>{}),limitTimeTooltipBySides:l=!1})=>{const[f,v]=(0,t.useState)(0),m=(0,t.useRef)(!1),h=(0,t.useRef)(0),p=(0,t.useRef)(!1),y=(0,t.useRef)(null),w=(0,t.useRef)(null),x=(0,t.useMemo)((()=>function(e,t,r,n,o,s){const i=100*t/r,a=function(e,t){const r=Math.round(e/1e3+t),n=Math.floor(r/3600),o=r%3600,s=Math.floor(o/60),i=Math.ceil(o%60);return{hh:n.toString(),mm:s<10?`0${s}`:s.toString(),ss:i<10?`0${i}`:i.toString()}}(Math.floor(e/100*+i),n);return e+n<6e4?s+a.ss:e+n<36e5?`${o+a.mm}:${a.ss}`:`${a.hh}:${a.mm}:${a.ss}`}(r,f,h.current,a,d,u)),[r,d,a,u,f]),_=o(r,s),g=function(e,t){return{transform:`scaleX(${100*e/t/100})`}}(f,h?.current),S=function(e,t,r,n){let o=0;return t&&(o=e-t.offsetWidth/2,n&&(o<0?o=0:o+t.offsetWidth>r&&(o=r-t.offsetWidth))),{transform:`translateX(${o}px)`}}(f,w?.current,h?.current,l),j=f>0||m.current,E=j?"thumb active":"thumb",b=j?"hover-time active":"hover-time",M=e=>{let t=e-(y.current?.getBoundingClientRect().left||0);t=t<0?0:t,t=t>h.current?h.current:t,v(t);const n=+(100*t/h.current*(r/100)).toFixed(0);c(n,n+a)},L=e=>{e.preventDefault(),e.stopPropagation();let t=0;for(let r=0;r<e.changedTouches.length;r++)t=e.changedTouches?.[r].pageX;t=t<0?0:t,p.current&&M(t)},O=e=>{m.current&&M(e.pageX)},T=()=>{y.current&&(h.current=y.current.offsetWidth)},$=(e,t)=>{const r=y.current?.getBoundingClientRect().left||0,n=e?0:t.pageX-r;v(n)},N=(e=!0)=>{p.current=e,v(e?f:0)},P=(e,t)=>{t.preventDefault(),O(t),m.current=e,v(e?f:0)},R=e=>{P(!1,e)},k=()=>{N(!1)};return(0,t.useEffect)((()=>(T(),window.addEventListener("resize",T),window.addEventListener("mousemove",O),window.addEventListener("mouseup",R),window.addEventListener("touchmove",L),window.addEventListener("touchend",k),()=>{window.removeEventListener("resize",T),window.removeEventListener("mousemove",O),window.removeEventListener("mouseup",R),window.removeEventListener("touchmove",L),window.removeEventListener("touchend",k)})),[r,a]),(0,e.jsxs)("div",{className:"ui-video-seek-slider",children:[(0,e.jsx)("div",{className:j?"track active":"track",ref:y,onMouseMove:e=>$(!1,e),onMouseLeave:e=>$(!0,e),onMouseDown:e=>P(!0,e),onTouchStart:()=>N(!0),"data-testid":"main-track",children:(0,e.jsxs)("div",{className:"main",children:[(0,e.jsx)("div",{className:"buffered","data-test-id":"testBuffered",style:_}),(0,e.jsx)("div",{className:"seek-hover","data-test-id":"testSeekHover",style:g}),(0,e.jsx)("div",{className:"connect","data-test-id":"testConnect",style:o(r,n)})]})}),!i&&(0,e.jsx)("div",{className:b,style:S,ref:w,"data-testid":"hover-time",children:x}),(0,e.jsx)("div",{className:E,"data-testid":"testThumb",style:{transform:`translateX(${h.current/(r/n)}px)`},children:(0,e.jsx)("div",{className:"handler"})})]})}})();var o=exports;for(var s in n)o[s]=n[s];n.__esModule&&Object.defineProperty(o,"__esModule",{value:!0})})();
+(() => {
+  'use strict';
+  var e = {
+      251: (e, t, r) => {
+        var n = r(699),
+          o = Symbol.for('react.element'),
+          s = (Symbol.for('react.fragment'), Object.prototype.hasOwnProperty),
+          i =
+            n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+              .ReactCurrentOwner,
+          a = { key: !0, ref: !0, __self: !0, __source: !0 };
+        function u(e, t, r) {
+          var n,
+            u = {},
+            d = null,
+            c = null;
+          for (n in (void 0 !== r && (d = '' + r),
+          void 0 !== t.key && (d = '' + t.key),
+          void 0 !== t.ref && (c = t.ref),
+          t))
+            s.call(t, n) && !a.hasOwnProperty(n) && (u[n] = t[n]);
+          if (e && e.defaultProps)
+            for (n in (t = e.defaultProps)) void 0 === u[n] && (u[n] = t[n]);
+          return {
+            $$typeof: o,
+            type: e,
+            key: d,
+            ref: c,
+            props: u,
+            _owner: i.current,
+          };
+        }
+        (t.jsx = u), (t.jsxs = u);
+      },
+      893: (e, t, r) => {
+        e.exports = r(251);
+      },
+      699: (e) => {
+        e.exports = require('react');
+      },
+    },
+    t = {};
+  function r(n) {
+    var o = t[n];
+    if (void 0 !== o) return o.exports;
+    var s = (t[n] = { exports: {} });
+    return e[n](s, s.exports, r), s.exports;
+  }
+  (r.n = (e) => {
+    var t = e && e.__esModule ? () => e.default : () => e;
+    return r.d(t, { a: t }), t;
+  }),
+    (r.d = (e, t) => {
+      for (var n in t)
+        r.o(t, n) &&
+          !r.o(e, n) &&
+          Object.defineProperty(e, n, { enumerable: !0, get: t[n] });
+    }),
+    (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 n = {};
+  (() => {
+    r.r(n), r.d(n, { VideoSeekSlider: () => s });
+    var e = r(893),
+      t = r(699);
+    function o(e, t) {
+      return { transform: `scaleX(${(100 * t) / (e || -1) / 100})` };
+    }
+    const s = ({
+      max: r = 1e3,
+      currentTime: n = 0,
+      progress: s = 0,
+      hideHoverTime: i = !1,
+      offset: a = 0,
+      secondsPrefix: u = '',
+      minutesPrefix: d = '',
+      onChange: c = () => {},
+      limitTimeTooltipBySides: l = !1,
+    }) => {
+      const [f, v] = (0, t.useState)(0),
+        m = (0, t.useRef)(!1),
+        h = (0, t.useRef)(0),
+        p = (0, t.useRef)(!1),
+        y = (0, t.useRef)(null),
+        w = (0, t.useRef)(null),
+        x = (0, t.useMemo)(
+          () =>
+            (function (e, t, r, n, o, s) {
+              const i = (100 * t) / r,
+                a = (function (e, t) {
+                  const r = Math.round(e / 1e3 + t),
+                    n = Math.floor(r / 3600),
+                    o = r % 3600,
+                    s = Math.floor(o / 60),
+                    i = Math.ceil(o % 60);
+                  return {
+                    hh: n.toString(),
+                    mm: s < 10 ? `0${s}` : s.toString(),
+                    ss: i < 10 ? `0${i}` : i.toString(),
+                  };
+                })(Math.floor((e / 100) * +i), n);
+              return e + n < 6e4
+                ? s + a.ss
+                : e + n < 36e5
+                ? `${o + a.mm}:${a.ss}`
+                : `${a.hh}:${a.mm}:${a.ss}`;
+            })(r, f, h.current, a, d, u),
+          [r, d, a, u, f]
+        ),
+        _ = o(r, s),
+        g = (function (e, t) {
+          return { transform: `scaleX(${(100 * e) / t / 100})` };
+        })(f, h?.current),
+        S = (function (e, t, r, n) {
+          let o = 0;
+          return (
+            t &&
+              ((o = e - t.offsetWidth / 2),
+              n &&
+                (o < 0
+                  ? (o = 0)
+                  : o + t.offsetWidth > r && (o = r - t.offsetWidth))),
+            { transform: `translateX(${o}px)` }
+          );
+        })(f, w?.current, h?.current, l),
+        j = f > 0 || m.current,
+        E = j ? 'thumb active' : 'thumb',
+        b = j ? 'hover-time active' : 'hover-time',
+        M = (e) => {
+          let t = e - (y.current?.getBoundingClientRect().left || 0);
+          (t = t < 0 ? 0 : t), (t = t > h.current ? h.current : t), v(t);
+          const n = +(((100 * t) / h.current) * (r / 100)).toFixed(0);
+          c(n, n + a);
+        },
+        L = (e) => {
+          e.preventDefault(), e.stopPropagation();
+          let t = 0;
+          for (let r = 0; r < e.changedTouches.length; r++)
+            t = e.changedTouches?.[r].pageX;
+          (t = t < 0 ? 0 : t), p.current && M(t);
+        },
+        O = (e) => {
+          m.current && M(e.pageX);
+        },
+        T = () => {
+          y.current && (h.current = y.current.offsetWidth);
+        },
+        $ = (e, t) => {
+          const r = y.current?.getBoundingClientRect().left || 0,
+            n = e ? 0 : t.pageX - r;
+          v(n);
+        },
+        N = (e = !0) => {
+          (p.current = e), v(e ? f : 0);
+        },
+        P = (e, t) => {
+          t.preventDefault(), O(t), (m.current = e), v(e ? f : 0);
+        },
+        R = (e) => {
+          P(!1, e);
+        },
+        k = () => {
+          N(!1);
+        };
+      return (
+        (0, t.useEffect)(
+          () => (
+            T(),
+            window.addEventListener('resize', T),
+            window.addEventListener('mousemove', O),
+            window.addEventListener('mouseup', R),
+            window.addEventListener('touchmove', L),
+            window.addEventListener('touchend', k),
+            () => {
+              window.removeEventListener('resize', T),
+                window.removeEventListener('mousemove', O),
+                window.removeEventListener('mouseup', R),
+                window.removeEventListener('touchmove', L),
+                window.removeEventListener('touchend', k);
+            }
+          ),
+          [r, a]
+        ),
+        (0, e.jsxs)('div', {
+          className: 'ui-video-seek-slider',
+          children: [
+            (0, e.jsx)('div', {
+              className: j ? 'track active' : 'track',
+              ref: y,
+              onMouseMove: (e) => $(!1, e),
+              onMouseLeave: (e) => $(!0, e),
+              onMouseDown: (e) => P(!0, e),
+              onTouchStart: () => N(!0),
+              'data-testid': 'main-track',
+              children: (0, e.jsxs)('div', {
+                className: 'main',
+                children: [
+                  (0, e.jsx)('div', {
+                    className: 'buffered',
+                    'data-test-id': 'testBuffered',
+                    style: _,
+                  }),
+                  (0, e.jsx)('div', {
+                    className: 'seek-hover',
+                    'data-test-id': 'testSeekHover',
+                    style: g,
+                  }),
+                  (0, e.jsx)('div', {
+                    className: 'connect',
+                    'data-test-id': 'testConnect',
+                    style: o(r, n),
+                  }),
+                ],
+              }),
+            }),
+            !i &&
+              (0, e.jsx)('div', {
+                className: b,
+                style: S,
+                ref: w,
+                'data-testid': 'hover-time',
+                children: x,
+              }),
+            (0, e.jsx)('div', {
+              className: E,
+              'data-testid': 'testThumb',
+              style: { transform: `translateX(${h.current / (r / n)}px)` },
+              children: (0, e.jsx)('div', { className: 'handler' }),
+            }),
+          ],
+        })
+      );
+    };
+  })();
+  var o = exports;
+  for (var s in n) o[s] = n[s];
+  n.__esModule && Object.defineProperty(o, '__esModule', { value: !0 });
+})();

package.json

 {
     "name": "react-video-seek-slider",
     "description": "React video seek slider like youtube",
-    "version": "5.0.0",
+    "version": "5.0.1",
     "main": "/index.js",
@@ -6,0 +6,0 @@ "author": "Sergey Egorov",

README.md

@@ -11,3 +11,3 @@ # react-video-seek-slider
 
-All time values you pass to props like `max`, `currentTime` and `progress` now are im milliseconds instead of seconds. 
+All time values you pass to props like `max`, `currentTime` and `progress` now are in milliseconds instead of seconds. 
 
@@ -14,0 +14,0 @@ `onChange` prop will also return `time` param in milliseconds as well.

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

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

Improved metrics

Total package byte prevSize

16916

increased by26.52%

Lines of code

268

increased by972%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes