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

Comparing version 6.0.7 to 6.0.8

index.js

 /*! For license information please see index.js.LICENSE.txt */
-(()=>{"use strict";var e={698:(e,t)=>{var r=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function i(e,t,s){var i=null;if(void 0!==s&&(i=""+s),void 0!==t.key&&(i=""+t.key),"key"in t)for(var n in s={},t)"key"!==n&&(s[n]=t[n]);else s=t;return t=s.ref,{$$typeof:r,type:e,key:i,ref:void 0!==t?t:null,props:s}}t.Fragment=s,t.jsx=i,t.jsxs=i},848:(e,t,r)=>{e.exports=r(698)}},t={};function r(s){var i=t[s];if(void 0!==i)return i.exports;var n=t[s]={exports:{}};return e[s](n,n.exports,r),n.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 i=r(848);const n=require("react"),o=(e,t,r)=>e>=t&&e<=r;function a(e,t,r,s){const i=o(e,t,r);return s?1:i?(e-t)/(r-t):0}const c=(0,n.memo)((({label:e="",startTime:t,maxTime:r,endTime:s,currentTime:n,seekHoverTime:o,bufferTime:c,isTimePassed:m=!1,isBufferPassed:u=!1,isHoverPassed:l=!1,onHover:d=()=>{},withGap:f})=>{const v=100*t/(r||-1),h=(s-t)/r*100,T="main"+(f?" with-gap":""),x=a(n,t,s,m),p=a(o,t,s,l),b=a(c,t,s,u);return(0,i.jsxs)("div",{className:T,onMouseMove:()=>d(e),style:{width:`${h}%`,left:`${v}%`},children:[(0,i.jsx)("div",{className:"inner-seek-block buffered","data-test-id":"test-buffered",style:{transform:`scaleX(${b})`}}),(0,i.jsx)("div",{className:"inner-seek-block seek-hover","data-test-id":"test-seek-hover",style:{transform:`scaleX(${p})`}}),(0,i.jsx)("div",{className:"inner-seek-block connect",style:{transform:`scaleX(${x})`}})]})}));function m(e,t,r){const s=100*t/r;return Math.floor(e/100*+s)}const u=(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=m(e,s,l),T=(0,n.useCallback)((e=>{f!==e&&v(e)}),[f]);return(0,n.useEffect)((()=>{if(!d)return;const r=a?.find((({fromMs:r},s)=>{const i=u(a,s,e);return o(t,r,i)}));r?.description!==f&&v(r?.description||"")}),[t,f,e,a]),(0,i.jsx)(i.Fragment,{children:a?.map((({fromMs:s,description:n},m)=>{const l=u(a,m,e),d=l<=t,f=l<=r,v=l<=h;let x=o(t,s,l);const p=d||!x?0:t;x=o(r,s,l);const b=f||!x?0:r;x=o(h,s,l);const k=v||!x?0:h;return(0,i.jsx)(c,{label:n,maxTime:e,startTime:s,endTime:l,isTimePassed:d,isBufferPassed:f,isHoverPassed:v,currentTime:p,bufferTime:b,seekHoverTime:k,onHover:T,withGap:!0},s)}))})};const d=({max:e,hoverTimeValue:t,offset:r,trackWidth:s,seekHoverPosition:o,isThumbActive:a,limitTimeTooltipBySides:c,label:m,minutesPrefix:u,secondsPrefix:l,getPreviewScreenUrl:d})=>{const f=(0,n.useRef)(null),v=a?"hover-time active":"hover-time",h=function(e,t,r,s){let i=0;return t&&(i=e-t.offsetWidth/2,s&&(i<0?i=0:i+t.offsetWidth>r&&(i=r-t.offsetWidth))),{transform:`translateX(${i}px)`}}(o,f?.current,s,c),T=function(e,t,r=0,s="",i=""){const n=function(e,t=0){const r=Math.round(e/1e3+t),s=Math.floor(r/3600),i=r%3600,n=Math.floor(i/60),o=Math.ceil(i%60);return{hh:s.toString(),mm:n<10?`0${n}`:n.toString(),ss:o<10?`0${o}`:o.toString()}}(t,r);return e+r<6e4?i+n.ss:e+r<36e5?`${s+n.mm}:${n.ss}`:`${n.hh}:${n.mm}:${n.ss}`}(e,t,r,u,l);return(0,i.jsxs)("div",{className:v,style:h,ref:f,"data-testid":"hover-time",children:[a&&d&&(0,i.jsx)("div",{className:"preview-screen",style:{backgroundImage:`url(${d(t)})`}}),m&&(0,i.jsx)("div",{children:m}),T]})},f=({max:e,currentTime:t,isThumbActive:r})=>(0,i.jsx)("div",{className:"thumb active","data-testid":"testThumb",style:{left:`calc(${t/e*100}% + -6px)`},children:(0,i.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:T=!0,timeCodes:x,onChange:p=()=>{},getPreviewScreenUrl:b})=>{const[k,g]=(0,n.useState)(0),[y,w]=(0,n.useState)(""),P=(0,n.useRef)(!1),j=(0,n.useRef)(!1),S=(0,n.useRef)(null),M=S.current?.offsetWidth||0,$=k>0||P.current,E=m(e,k,M),H=t=>{const r=S.current?.getBoundingClientRect(),s=r?.left||0,i=r?.width||0;let n=t-s;n=n<0?0:n,n=n>i?i:n;const o=+(100*n/i*(e/100)).toFixed(0);g(n),p(o,o+a)},L=e=>{if(e.preventDefault(),e.stopPropagation(),!j.current)return;const{changedTouches:t}=e;let r=t?.[t.length-1]?.pageX||0;r=r<0?0:r,H(r)},N=e=>{P.current&&H(e.pageX)},B=(e,t)=>{const r=S.current?.getBoundingClientRect().left||0,s=e?0:t.pageX-r;g(s)},W=(e=!0)=>{j.current=e,g(e?k:0)},C=(e,t)=>{t.preventDefault(),N(t),P.current=e,g(e?k:0)},X=e=>{C(!1,e)},O=()=>{W(!1)};return(0,n.useEffect)((()=>{if(!j.current)return;const r=x?.find((({fromMs:r},s)=>{const i=u(x,s,e);return o(t,r,i)}));r?.description!==y&&w(r?.description||"")}),[t,y,e,x]),(0,n.useEffect)((()=>(window.addEventListener("mousemove",N),window.addEventListener("mouseup",X),window.addEventListener("touchmove",L),window.addEventListener("touchend",O),()=>{window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",X),window.removeEventListener("touchmove",L),window.removeEventListener("touchend",O)})),[e,a,M]),(0,i.jsxs)("div",{className:"ui-video-seek-slider",children:[(0,i.jsxs)("div",{className:$?"track active":"track",ref:S,onMouseMove:e=>B(!1,e),onMouseLeave:e=>B(!0,e),onMouseDown:e=>C(!0,e),onTouchStart:()=>W(!0),"data-testid":"main-track",children:[Boolean(x?.length)&&(0,i.jsx)(l,{currentTime:t,max:e,bufferTime:r,seekHoverPosition:k,timeCodes:x,mobileSeeking:j.current,trackWidth:M,label:y,setLabel:w}),!x&&(0,i.jsx)(c,{maxTime:e,startTime:0,endTime:e,currentTime:t,bufferTime:r,seekHoverTime:E})]}),!s&&(0,i.jsx)(d,{max:e,hoverTimeValue:E,isThumbActive:$,label:y,limitTimeTooltipBySides:T,offset:a,seekHoverPosition:k,trackWidth:M,getPreviewScreenUrl:b,minutesPrefix:h,secondsPrefix:v}),(0,i.jsx)(f,{max:e,currentTime:t,isThumbActive:$})]})};var h=exports;for(var T in s)h[T]=s[T];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.7",
+  "version": "6.0.8",
   "main": "/index.js",
@@ -30,4 +30,4 @@ "author": "Sergey Egorov",
     "@types/jest": "^28.1.6",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
@@ -59,4 +59,4 @@ "@typescript-eslint/parser": "^5.6.0",
     "prettier": "^2.5.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "sass": "1.39.0",
@@ -63,0 +63,0 @@ "sass-loader": "12.1.0",

README.md

 # react-video-seek-slider
 
 The simplest, light weight and dependency free html video seeker like YouTube for React
-With time codes and video preview opportunity 
+With time codes and video preview opportunity
 
-Demo [codesandbox demo](https://codesandbox.io/s/react-video-seek-slider-lj2hmh)
+Demo [codesandbox demo](https://codesandbox.io/p/sandbox/react-video-seek-slider-forked-vglxvf)
 
 ![react-video-seek-slider](https://github.com/egorovsa/react-video-seek-slider/blob/develop/example.gif?raw=true)
 
+## What's new in v7
+
+- This version is built for React 19
+
+## Bracking changes from v6 -> v7
+
+- It's not compatible with React versions lower than v19
+- The last version for React 18 is v6.0.8
+
 ## What's new in v6
+
 - Added time codes and seeker preview fully like in youtube player!
@@ -21,6 +31,5 @@ - The codebase is completely refactored and optimized
 
-
 ## Braking changes from v4 -> v5
 
-All time values you pass to props like `max`, `currentTime` and `progress` now are in milliseconds instead of seconds. 
+All time values you pass to props like `max`, `currentTime` and `progress` now are in milliseconds instead of seconds.
 
@@ -35,3 +44,2 @@ `onChange` prop will also return `time` param in milliseconds as well.
 yarn add react-video-seek-slider
-
 ```
@@ -93,3 +101,2 @@
 
-
 ### TimeCode object
@@ -107,3 +114,3 @@
 
-```javascript 1.8
+```javascript
 $ npm i
@@ -110,0 +117,0 @@ $ npm run dev

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

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

22450

increased by34.43%

Lines of code

420

increased by1254.84%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

123

increased by6.03%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes