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

Comparing version 6.0.0-beta.0 to 6.0.0

index.d.ts

 /// <reference types="react" />
 import './ui-video-seek-slider.scss';
+export interface TimeCode {
+    fromMs: number;
+    description: string;
+}
 export interface Props {
     max: number;
     currentTime: number;
-    progress?: number;
+    bufferTime?: number;
     onChange: (time: number, offsetTime: number) => void;
-    hideHoverTime?: boolean;
+    hideThumbTooltip?: boolean;
     offset?: number;
@@ -13,3 +17,5 @@ secondsPrefix?: string;
     limitTimeTooltipBySides?: boolean;
+    timeCodes?: TimeCode[];
+    getPreviewScreenUrl?: (hoverTimeValue: number) => string;
 }
 export declare const VideoSeekSlider: React.FC<Props>;

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

package.json

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

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16794

increased by15.38%

Lines of code

32

increased by28%

Number of low quality alerts

1

decreased by-50%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes