New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-scrubbing-timeline
Advanced tools
react-scrubbing-timeline - npm Package Compare versions
Comparing version 0.3.0 to 0.3.1
@@ -1,1 +0,1 @@ | ||
| import{exact as e,number as t,string as n,oneOf as r,bool as i,arrayOf as a,func as c}from"prop-types";import l,{useState as o,useRef as s,useEffect as u}from"react";import p from"react-ace";import"ace-builds/src-noconflict/theme-monokai";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(":root{--timeline-bar-height:20px;--timeline-cursor-height:30px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;display:none;margin:0;opacity:.5}input[type=number]{-moz-appearance:textfield}.timeline-wrapper,.timeline-wrapper-test{margin:0 auto;position:relative;width:1100px}.test-wrapper,.timeline-wrapper-test{display:inline-block}.test-wrapper{margin:1rem;position:absolute}.timeline-bar,.timeline-player{background-color:#a9a9a9;height:20px;position:relative}.timeline-player{align-items:center;display:flex;justify-content:center;width:calc(100% + 3px)}.timeline-player *{padding:0 2rem}.current-snap{background-color:#a9a9a9;bottom:40px;font-weight:700;position:absolute}.current-snap input{height:100%;padding:0;width:10px}.timeline-cursor{border-radius:50%;height:30px;left:0;top:calc(var(--timeline-bar-height)/2 - var(--timeline-cursor-height)/2);width:30px}.timeline-cursor,.timeline-item{cursor:pointer;position:absolute}.timeline-item{height:100%;width:3px}.red{background-color:red}.white{background-color:#676767}.blue{background-color:#1b36ba}.timeslot{background-color:#fff;display:none;padding:.3rem 0;position:absolute;right:-13.5px;top:-20px;width:30px;z-index:5}.timeslot p{font-size:10px;margin:0;text-align:center}.timeline-item:hover .timeslot{display:block}.copy-paste-marker{background-color:#bd2e4c5e;position:absolute}.pointer{clip-path:polygon(0 0,100% 0,50% 100%);height:10px;left:calc(50% - 5px);position:absolute;top:-25%;width:10px;z-index:5}.player-icon{fill:#444;cursor:pointer;height:1em;vertical-align:-.125em}.test-result{border:1px solid #000;border-radius:1em;margin-left:auto;margin-right:auto;padding:1em;width:fit-content}");const d=e({startRow:t.isRequired,endRow:t.isRequired,startCol:t.isRequired,endCol:t.isRequired,className:n.isRequired,type:r(["text","fullLine","screenLine"])}),m=e({testId:t.isRequired,testInput:n.isRequired,testOutput:n.isRequired,expectedOutput:n.isRequired,result:i.isRequired,reason:n}),h=e({actionType:r(["PASTE","TEST","TYPE"]).isRequired,code:n.isRequired,time:t.isRequired,lang:n,markers:a(d),test:a(m)}),g=({timelineArray:e,duration:t,setFocusedActionIndex:n,focusedActionIndex:r})=>{const i=e=>{switch(e){case"PASTE":return"red";case"TYPE":default:return"white";case"TEST":return"blue"}};return l.createElement("div",{className:"timeline-bar"},e&&e.map(((e,a)=>l.createElement("div",{className:`timeline-item ${i(e.actionType)}`,key:`${e.lang}-${a}`,style:{left:e.time/t*100+"%"},onClick:()=>n(a)},l.createElement("div",{className:"timeslot"},l.createElement("p",null,(e=>{const t=e%3600;return Math.floor(e/3600)+":"+Math.floor(t/60)+":"+t%60})(e.time))),r===a&&l.createElement("div",{className:`pointer ${i(e.actionType)}`})))))};g.propTypes={timelineArray:a(h).isRequired,duration:t.isRequired,setFocusedActionIndex:c.isRequired,focusedActionIndex:t.isRequired},window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const v=({currentAction:e,defaultLanguage:t})=>l.createElement(p,{mode:e?.lang??t,theme:"monokai",name:"brace-editor",style:{width:"calc(100% + 3px)"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:e?.code??"",markers:e?.markers??[]});function x(){return x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},x.apply(this,arguments)}function w(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512"}),l.createElement("path",{d:"M361 215c14.3 8.8 23 24.3 23 41s-8.7 32.2-23 40.1l-287.97 176c-14.82 9.9-33.37 10.3-48.51 1.8A48.02 48.02 0 010 432V80a48.02 48.02 0 0124.52-41.87 48.019 48.019 0 0148.51.91L361 215z"}))}function y(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),l.createElement("path",{d:"M287.1 447.1c17.67 0 31.1-14.33 31.1-32V96.03c0-17.67-14.33-32-32-32s-31.1 14.33-31.1 31.1v319.9c0 18.57 15.2 32.07 32 32.07zm-234.59-6.5l192-159.1c7.625-6.436 11.43-15.53 11.43-24.62 0-9.094-3.809-18.18-11.43-24.62l-192-159.1C31.88 54.28 0 68.66 0 96.03v319.9c0 27.37 31.88 41.77 52.51 24.67z"}))}function E(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),l.createElement("path",{d:"M31.1 64.03c-17.67 0-31.1 14.33-31.1 32v319.9c0 17.67 14.33 32 32 32 17.67-.83 32-14.33 32-32.83V96.03c0-17.67-14.33-32-32.9-32zm236.4 7.38l-192 159.1C67.82 237.8 64 246.9 64 256c0 9.094 3.82 18.18 11.44 24.62l192 159.1c20.63 17.12 52.51 2.75 52.51-24.62V95.2c-.85-26.54-31.85-40.92-52.45-23.79z"}))}function f(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),l.createElement("path",{d:"M512 96.03v319.9c0 17.67-14.33 31.1-31.1 31.1-18.6.07-32.9-13.43-32.9-31.93v-131L276.5 440.6c-20.6 17.1-52.5 2.7-52.5-25.5v-131L52.5 440.6C31.88 457.7 0 443.3 0 415.1V96.03c0-27.37 31.88-41.74 52.5-24.62L224 226.8V96.03c0-27.37 31.88-41.74 52.5-24.62L448 226.8V96.03c0-17.67 14.33-31.1 31.1-31.1 18.6-.9 32.9 13.43 32.9 31.1z"}))}function b(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),l.createElement("path",{d:"M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1 18.57-.9 32.9 13.43 32.9 31.1v131.8l171.5-156.5c20.6-17.05 52.5-2.67 52.5 24.7v131.9l171.5-156.5c20.6-17.15 52.5-2.77 52.5 24.6v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1-18.57.1-32.9-13.4-32.9-31.9z"}))}function A(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),l.createElement("path",{d:"M272 63.1h-32c-26.51 0-48 21.49-48 47.1v288c0 26.51 21.49 48 48 48l32 1.8c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9zm-192 0H48c-26.51 0-48 21.49-48 48v288C0 426.5 21.49 448 48 448h32c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9z"}))}v.propTypes={action:h,defaultLanguage:n};const k=({updateFocusedActionIndex:e,lastActionIndex:t,focusedActionIndex:n})=>{const[r,i]=o(n+1),[a,c]=o(!1),p=s(null),d=()=>{r>=1&&r<=t+1?e(r-1):i(n+1)};return u((()=>{if(a)return p.current=setInterval((()=>e((e=>e+1))),500),()=>clearInterval(p.current)}),[a,e]),u((()=>{p.current&&n>t-1&&(clearInterval(p.current),c(!1),p.current=null)}),[n,t]),u((()=>{i(n+1)}),[n]),l.createElement("div",{className:"timeline-player"},l.createElement(b,{className:"player-icon first-button",onClick:()=>e(0)}),l.createElement(E,{className:"player-icon previous-button",onClick:()=>e((e=>e>0?e-1:0))}),l.createElement("div",{className:"current-snap"},l.createElement("input",{type:"number",value:r,onChange:e=>{const t=e.target.value;i(t)},onBlur:d,style:{width:10*`${t}`.length+"px"},onKeyDown:e=>"Enter"===e.key&&d()}),"/",t+1),a?l.createElement(A,{className:"player-icon pause-button",onClick:()=>{c(!1),clearInterval(p.current),p.current=null}}):l.createElement(w,{className:"player-icon play-button",onClick:()=>{n<t&&c(!0)}}),l.createElement(y,{className:"player-icon next-button",onClick:()=>e((e=>e<t?e+1:t))}),l.createElement(f,{className:"player-icon last-button",onClick:()=>e(t)}))};k.propTypes={updateFocusedActionIndex:c.isRequired,lastActionIndex:t.isRequired,focusedActionIndex:t.isRequired};const T=({currentAction:e})=>"TEST"===e.actionType&&e?.test?e?.test.map(((e,t)=>l.createElement("div",{style:{textAlign:"center"}},l.createElement("h4",null,"Input"),l.createElement("p",{className:"test-result"}," ",e.testInput," "),l.createElement("h4",null,"Output"),l.createElement("p",{className:"test-result"},e.testOutput," "),l.createElement("h4",null,"Expected Output"),l.createElement("p",{className:"test-result"}," ",e.expectedOutput," ")))):l.createElement("div",null);T.propTypes={action:h};const R=l.memo(g),I=({timelineArray:e,duration:t,language:n="javascript"})=>{const[r,i]=o(0);return l.createElement("div",null,l.createElement("div",{className:"TEST"===e[r].actionType&&e[r]?.test?"timeline-wrapper-test":"timeline-wrapper"},l.createElement(v,{defaultLanguage:n,currentAction:e[r]}),l.createElement(R,{focusedActionIndex:r,duration:t,timelineArray:e,setFocusedActionIndex:i}),l.createElement(k,{lastActionIndex:e?.length-1??0,focusedActionIndex:r,updateFocusedActionIndex:i})),l.createElement("div",{className:"test-wrapper"},l.createElement(T,{currentAction:e[r]})))};I.propTypes={timelineArray:a(h).isRequired,duration:t.isRequired,language:n};export{I as default}; | ||
| import{exact as e,number as t,string as n,oneOf as r,bool as i,arrayOf as a,func as c}from"prop-types";import l,{useState as o,useRef as s,useEffect as u}from"react";import p from"react-ace";import"ace-builds/src-noconflict/theme-monokai";!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&r.firstChild?r.insertBefore(i,r.firstChild):r.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(":root{--timeline-bar-height:20px;--timeline-cursor-height:30px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;display:none;margin:0;opacity:.5}input[type=number]{-moz-appearance:textfield}.timeline-wrapper{margin:0 auto;position:relative;width:1100px}.timeline-wrapper-test{flex:1;margin:0 auto;position:relative}.test-wrapper{margin:1rem}.timeline-bar,.timeline-player{background-color:#a9a9a9;height:20px;position:relative}.timeline-player{align-items:center;display:flex;justify-content:center;width:calc(100% + 3px)}.timeline-player *{padding:0 2rem}.current-snap{background-color:#a9a9a9;bottom:40px;font-weight:700;position:absolute}.current-snap input{height:100%;padding:0;width:10px}.timeline-cursor{border-radius:50%;height:30px;left:0;top:calc(var(--timeline-bar-height)/2 - var(--timeline-cursor-height)/2);width:30px}.timeline-cursor,.timeline-item{cursor:pointer;position:absolute}.timeline-item{height:100%;width:3px}.red{background-color:red}.white{background-color:#676767}.blue{background-color:#1b36ba}.timeslot{background-color:#fff;display:none;padding:.3rem 0;position:absolute;right:-13.5px;top:-20px;width:30px;z-index:5}.timeslot p{font-size:10px;margin:0;text-align:center}.timeline-item:hover .timeslot{display:block}.copy-paste-marker{background-color:#bd2e4c5e;position:absolute}.pointer{clip-path:polygon(0 0,100% 0,50% 100%);height:10px;left:calc(50% - 5px);position:absolute;top:-25%;width:10px;z-index:5}.player-icon{fill:#444;cursor:pointer;height:1em;vertical-align:-.125em}.test-result{border:1px solid #000;border-radius:1em;margin-left:auto;margin-right:auto;padding:1em;width:fit-content}");const d=e({startRow:t.isRequired,endRow:t.isRequired,startCol:t.isRequired,endCol:t.isRequired,className:n.isRequired,type:r(["text","fullLine","screenLine"])}),m=e({testId:t.isRequired,testInput:n.isRequired,testOutput:n.isRequired,expectedOutput:n.isRequired,result:i.isRequired,reason:n}),g=e({actionType:r(["PASTE","TEST","TYPE"]).isRequired,code:n.isRequired,time:t.isRequired,lang:n,markers:a(d),test:a(m)}),h=({timelineArray:e,duration:t,setFocusedActionIndex:n,focusedActionIndex:r})=>{const i=e=>{switch(e){case"PASTE":return"red";case"TYPE":default:return"white";case"TEST":return"blue"}};return l.createElement("div",{className:"timeline-bar"},e&&e.map(((e,a)=>l.createElement("div",{className:`timeline-item ${i(e.actionType)}`,key:`${e.lang}-${a}`,style:{left:e.time/t*100+"%"},onClick:()=>n(a)},l.createElement("div",{className:"timeslot"},l.createElement("p",null,(e=>{const t=e%3600;return Math.floor(e/3600)+":"+Math.floor(t/60)+":"+t%60})(e.time))),r===a&&l.createElement("div",{className:`pointer ${i(e.actionType)}`})))))};h.propTypes={timelineArray:a(g).isRequired,duration:t.isRequired,setFocusedActionIndex:c.isRequired,focusedActionIndex:t.isRequired},window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const v=({currentAction:e,defaultLanguage:t})=>l.createElement(p,{mode:e?.lang??t,theme:"monokai",name:"brace-editor",style:{width:"calc(100% + 3px)"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:e?.code??"",markers:e?.markers??[]});function x(){return x=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},x.apply(this,arguments)}function w(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512"}),l.createElement("path",{d:"M361 215c14.3 8.8 23 24.3 23 41s-8.7 32.2-23 40.1l-287.97 176c-14.82 9.9-33.37 10.3-48.51 1.8A48.02 48.02 0 010 432V80a48.02 48.02 0 0124.52-41.87 48.019 48.019 0 0148.51.91L361 215z"}))}function y(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),l.createElement("path",{d:"M287.1 447.1c17.67 0 31.1-14.33 31.1-32V96.03c0-17.67-14.33-32-32-32s-31.1 14.33-31.1 31.1v319.9c0 18.57 15.2 32.07 32 32.07zm-234.59-6.5l192-159.1c7.625-6.436 11.43-15.53 11.43-24.62 0-9.094-3.809-18.18-11.43-24.62l-192-159.1C31.88 54.28 0 68.66 0 96.03v319.9c0 27.37 31.88 41.77 52.51 24.67z"}))}function f(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),l.createElement("path",{d:"M31.1 64.03c-17.67 0-31.1 14.33-31.1 32v319.9c0 17.67 14.33 32 32 32 17.67-.83 32-14.33 32-32.83V96.03c0-17.67-14.33-32-32.9-32zm236.4 7.38l-192 159.1C67.82 237.8 64 246.9 64 256c0 9.094 3.82 18.18 11.44 24.62l192 159.1c20.63 17.12 52.51 2.75 52.51-24.62V95.2c-.85-26.54-31.85-40.92-52.45-23.79z"}))}function E(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),l.createElement("path",{d:"M512 96.03v319.9c0 17.67-14.33 31.1-31.1 31.1-18.6.07-32.9-13.43-32.9-31.93v-131L276.5 440.6c-20.6 17.1-52.5 2.7-52.5-25.5v-131L52.5 440.6C31.88 457.7 0 443.3 0 415.1V96.03c0-27.37 31.88-41.74 52.5-24.62L224 226.8V96.03c0-27.37 31.88-41.74 52.5-24.62L448 226.8V96.03c0-17.67 14.33-31.1 31.1-31.1 18.6-.9 32.9 13.43 32.9 31.1z"}))}function b(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),l.createElement("path",{d:"M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1 18.57-.9 32.9 13.43 32.9 31.1v131.8l171.5-156.5c20.6-17.05 52.5-2.67 52.5 24.7v131.9l171.5-156.5c20.6-17.15 52.5-2.77 52.5 24.6v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1-18.57.1-32.9-13.4-32.9-31.9z"}))}function A(e){return l.createElement("svg",x({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),l.createElement("path",{d:"M272 63.1h-32c-26.51 0-48 21.49-48 47.1v288c0 26.51 21.49 48 48 48l32 1.8c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9zm-192 0H48c-26.51 0-48 21.49-48 48v288C0 426.5 21.49 448 48 448h32c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9z"}))}v.propTypes={action:g,defaultLanguage:n};const k=({updateFocusedActionIndex:e,lastActionIndex:t,focusedActionIndex:n})=>{const[r,i]=o(n+1),[a,c]=o(!1),p=s(null),d=()=>{r>=1&&r<=t+1?e(r-1):i(n+1)};return u((()=>{if(a)return p.current=setInterval((()=>e((e=>e+1))),500),()=>clearInterval(p.current)}),[a,e]),u((()=>{p.current&&n>t-1&&(clearInterval(p.current),c(!1),p.current=null)}),[n,t]),u((()=>{i(n+1)}),[n]),l.createElement("div",{className:"timeline-player"},l.createElement(b,{className:"player-icon first-button",onClick:()=>e(0)}),l.createElement(f,{className:"player-icon previous-button",onClick:()=>e((e=>e>0?e-1:0))}),l.createElement("div",{className:"current-snap"},l.createElement("input",{type:"number",value:r,onChange:e=>{const t=e.target.value;i(t)},onBlur:d,style:{width:10*`${t}`.length+"px"},onKeyDown:e=>"Enter"===e.key&&d()}),"/",t+1),a?l.createElement(A,{className:"player-icon pause-button",onClick:()=>{c(!1),clearInterval(p.current),p.current=null}}):l.createElement(w,{className:"player-icon play-button",onClick:()=>{n<t&&c(!0)}}),l.createElement(y,{className:"player-icon next-button",onClick:()=>e((e=>e<t?e+1:t))}),l.createElement(E,{className:"player-icon last-button",onClick:()=>e(t)}))};k.propTypes={updateFocusedActionIndex:c.isRequired,lastActionIndex:t.isRequired,focusedActionIndex:t.isRequired};const T=({currentAction:e})=>"TEST"===e.actionType&&e?.test?e?.test.map(((e,t)=>l.createElement("div",{style:{textAlign:"center"}},l.createElement("h4",null,"Input"),l.createElement("p",{className:"test-result"}," ",e.testInput," "),l.createElement("h4",null,"Output"),l.createElement("p",{className:"test-result"},e.testOutput," "),l.createElement("h4",null,"Expected Output"),l.createElement("p",{className:"test-result"}," ",e.expectedOutput," ")))):l.createElement("div",null);T.propTypes={action:g};const R=l.memo(h),I=({timelineArray:e,duration:t,language:n="javascript"})=>{const[r,i]=o(0);return l.createElement("div",{style:{display:"flex"}},l.createElement("div",{className:"TEST"===e[r].actionType&&e[r]?.test?"timeline-wrapper-test":"timeline-wrapper"},l.createElement(v,{defaultLanguage:n,currentAction:e[r]}),l.createElement(R,{focusedActionIndex:r,duration:t,timelineArray:e,setFocusedActionIndex:i}),l.createElement(k,{lastActionIndex:e?.length-1??0,focusedActionIndex:r,updateFocusedActionIndex:i})),l.createElement("div",{className:"test-wrapper"},l.createElement(T,{currentAction:e[r]})))};I.propTypes={timelineArray:a(g).isRequired,duration:t.isRequired,language:n};export{I as default}; |
@@ -1,1 +0,1 @@ | ||
| "use strict";var e=require("prop-types"),t=require("react"),n=require("react-ace");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("ace-builds/src-noconflict/theme-monokai");var a=r(t),i=r(n);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(":root{--timeline-bar-height:20px;--timeline-cursor-height:30px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;display:none;margin:0;opacity:.5}input[type=number]{-moz-appearance:textfield}.timeline-wrapper,.timeline-wrapper-test{margin:0 auto;position:relative;width:1100px}.test-wrapper,.timeline-wrapper-test{display:inline-block}.test-wrapper{margin:1rem;position:absolute}.timeline-bar,.timeline-player{background-color:#a9a9a9;height:20px;position:relative}.timeline-player{align-items:center;display:flex;justify-content:center;width:calc(100% + 3px)}.timeline-player *{padding:0 2rem}.current-snap{background-color:#a9a9a9;bottom:40px;font-weight:700;position:absolute}.current-snap input{height:100%;padding:0;width:10px}.timeline-cursor{border-radius:50%;height:30px;left:0;top:calc(var(--timeline-bar-height)/2 - var(--timeline-cursor-height)/2);width:30px}.timeline-cursor,.timeline-item{cursor:pointer;position:absolute}.timeline-item{height:100%;width:3px}.red{background-color:red}.white{background-color:#676767}.blue{background-color:#1b36ba}.timeslot{background-color:#fff;display:none;padding:.3rem 0;position:absolute;right:-13.5px;top:-20px;width:30px;z-index:5}.timeslot p{font-size:10px;margin:0;text-align:center}.timeline-item:hover .timeslot{display:block}.copy-paste-marker{background-color:#bd2e4c5e;position:absolute}.pointer{clip-path:polygon(0 0,100% 0,50% 100%);height:10px;left:calc(50% - 5px);position:absolute;top:-25%;width:10px;z-index:5}.player-icon{fill:#444;cursor:pointer;height:1em;vertical-align:-.125em}.test-result{border:1px solid #000;border-radius:1em;margin-left:auto;margin-right:auto;padding:1em;width:fit-content}");const l=e.exact({startRow:e.number.isRequired,endRow:e.number.isRequired,startCol:e.number.isRequired,endCol:e.number.isRequired,className:e.string.isRequired,type:e.oneOf(["text","fullLine","screenLine"])}),c=e.exact({testId:e.number.isRequired,testInput:e.string.isRequired,testOutput:e.string.isRequired,expectedOutput:e.string.isRequired,result:e.bool.isRequired,reason:e.string}),u=e.exact({actionType:e.oneOf(["PASTE","TEST","TYPE"]).isRequired,code:e.string.isRequired,time:e.number.isRequired,lang:e.string,markers:e.arrayOf(l),test:e.arrayOf(c)}),o=({timelineArray:e,duration:t,setFocusedActionIndex:n,focusedActionIndex:r})=>{const i=e=>{switch(e){case"PASTE":return"red";case"TYPE":default:return"white";case"TEST":return"blue"}};return a.default.createElement("div",{className:"timeline-bar"},e&&e.map(((e,l)=>a.default.createElement("div",{className:`timeline-item ${i(e.actionType)}`,key:`${e.lang}-${l}`,style:{left:e.time/t*100+"%"},onClick:()=>n(l)},a.default.createElement("div",{className:"timeslot"},a.default.createElement("p",null,(e=>{const t=e%3600;return Math.floor(e/3600)+":"+Math.floor(t/60)+":"+t%60})(e.time))),r===l&&a.default.createElement("div",{className:`pointer ${i(e.actionType)}`})))))};o.propTypes={timelineArray:e.arrayOf(u).isRequired,duration:e.number.isRequired,setFocusedActionIndex:e.func.isRequired,focusedActionIndex:e.number.isRequired},window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const s=({currentAction:e,defaultLanguage:t})=>a.default.createElement(i.default,{mode:e?.lang??t,theme:"monokai",name:"brace-editor",style:{width:"calc(100% + 3px)"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:e?.code??"",markers:e?.markers??[]});function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d.apply(this,arguments)}function p(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512"}),a.default.createElement("path",{d:"M361 215c14.3 8.8 23 24.3 23 41s-8.7 32.2-23 40.1l-287.97 176c-14.82 9.9-33.37 10.3-48.51 1.8A48.02 48.02 0 010 432V80a48.02 48.02 0 0124.52-41.87 48.019 48.019 0 0148.51.91L361 215z"}))}function m(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),a.default.createElement("path",{d:"M287.1 447.1c17.67 0 31.1-14.33 31.1-32V96.03c0-17.67-14.33-32-32-32s-31.1 14.33-31.1 31.1v319.9c0 18.57 15.2 32.07 32 32.07zm-234.59-6.5l192-159.1c7.625-6.436 11.43-15.53 11.43-24.62 0-9.094-3.809-18.18-11.43-24.62l-192-159.1C31.88 54.28 0 68.66 0 96.03v319.9c0 27.37 31.88 41.77 52.51 24.67z"}))}function f(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),a.default.createElement("path",{d:"M31.1 64.03c-17.67 0-31.1 14.33-31.1 32v319.9c0 17.67 14.33 32 32 32 17.67-.83 32-14.33 32-32.83V96.03c0-17.67-14.33-32-32.9-32zm236.4 7.38l-192 159.1C67.82 237.8 64 246.9 64 256c0 9.094 3.82 18.18 11.44 24.62l192 159.1c20.63 17.12 52.51 2.75 52.51-24.62V95.2c-.85-26.54-31.85-40.92-52.45-23.79z"}))}function g(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),a.default.createElement("path",{d:"M512 96.03v319.9c0 17.67-14.33 31.1-31.1 31.1-18.6.07-32.9-13.43-32.9-31.93v-131L276.5 440.6c-20.6 17.1-52.5 2.7-52.5-25.5v-131L52.5 440.6C31.88 457.7 0 443.3 0 415.1V96.03c0-27.37 31.88-41.74 52.5-24.62L224 226.8V96.03c0-27.37 31.88-41.74 52.5-24.62L448 226.8V96.03c0-17.67 14.33-31.1 31.1-31.1 18.6-.9 32.9 13.43 32.9 31.1z"}))}function h(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),a.default.createElement("path",{d:"M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1 18.57-.9 32.9 13.43 32.9 31.1v131.8l171.5-156.5c20.6-17.05 52.5-2.67 52.5 24.7v131.9l171.5-156.5c20.6-17.15 52.5-2.77 52.5 24.6v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1-18.57.1-32.9-13.4-32.9-31.9z"}))}function v(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),a.default.createElement("path",{d:"M272 63.1h-32c-26.51 0-48 21.49-48 47.1v288c0 26.51 21.49 48 48 48l32 1.8c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9zm-192 0H48c-26.51 0-48 21.49-48 48v288C0 426.5 21.49 448 48 448h32c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9z"}))}s.propTypes={action:u,defaultLanguage:e.string};const x=({updateFocusedActionIndex:e,lastActionIndex:n,focusedActionIndex:r})=>{const[i,l]=t.useState(r+1),[c,u]=t.useState(!1),o=t.useRef(null),s=()=>{i>=1&&i<=n+1?e(i-1):l(r+1)};return t.useEffect((()=>{if(c)return o.current=setInterval((()=>e((e=>e+1))),500),()=>clearInterval(o.current)}),[c,e]),t.useEffect((()=>{o.current&&r>n-1&&(clearInterval(o.current),u(!1),o.current=null)}),[r,n]),t.useEffect((()=>{l(r+1)}),[r]),a.default.createElement("div",{className:"timeline-player"},a.default.createElement(h,{className:"player-icon first-button",onClick:()=>e(0)}),a.default.createElement(f,{className:"player-icon previous-button",onClick:()=>e((e=>e>0?e-1:0))}),a.default.createElement("div",{className:"current-snap"},a.default.createElement("input",{type:"number",value:i,onChange:e=>{const t=e.target.value;l(t)},onBlur:s,style:{width:10*`${n}`.length+"px"},onKeyDown:e=>"Enter"===e.key&&s()}),"/",n+1),c?a.default.createElement(v,{className:"player-icon pause-button",onClick:()=>{u(!1),clearInterval(o.current),o.current=null}}):a.default.createElement(p,{className:"player-icon play-button",onClick:()=>{r<n&&u(!0)}}),a.default.createElement(m,{className:"player-icon next-button",onClick:()=>e((e=>e<n?e+1:n))}),a.default.createElement(g,{className:"player-icon last-button",onClick:()=>e(n)}))};x.propTypes={updateFocusedActionIndex:e.func.isRequired,lastActionIndex:e.number.isRequired,focusedActionIndex:e.number.isRequired};const y=({currentAction:e})=>"TEST"===e.actionType&&e?.test?e?.test.map(((e,t)=>a.default.createElement("div",{style:{textAlign:"center"}},a.default.createElement("h4",null,"Input"),a.default.createElement("p",{className:"test-result"}," ",e.testInput," "),a.default.createElement("h4",null,"Output"),a.default.createElement("p",{className:"test-result"},e.testOutput," "),a.default.createElement("h4",null,"Expected Output"),a.default.createElement("p",{className:"test-result"}," ",e.expectedOutput," ")))):a.default.createElement("div",null);y.propTypes={action:u};const b=a.default.memo(o),w=({timelineArray:e,duration:n,language:r="javascript"})=>{const[i,l]=t.useState(0);return a.default.createElement("div",null,a.default.createElement("div",{className:"TEST"===e[i].actionType&&e[i]?.test?"timeline-wrapper-test":"timeline-wrapper"},a.default.createElement(s,{defaultLanguage:r,currentAction:e[i]}),a.default.createElement(b,{focusedActionIndex:i,duration:n,timelineArray:e,setFocusedActionIndex:l}),a.default.createElement(x,{lastActionIndex:e?.length-1??0,focusedActionIndex:i,updateFocusedActionIndex:l})),a.default.createElement("div",{className:"test-wrapper"},a.default.createElement(y,{currentAction:e[i]})))};w.propTypes={timelineArray:e.arrayOf(u).isRequired,duration:e.number.isRequired,language:e.string},module.exports=w; | ||
| "use strict";var e=require("prop-types"),t=require("react"),n=require("react-ace");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("ace-builds/src-noconflict/theme-monokai");var a=r(t),i=r(n);!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(":root{--timeline-bar-height:20px;--timeline-cursor-height:30px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;display:none;margin:0;opacity:.5}input[type=number]{-moz-appearance:textfield}.timeline-wrapper{margin:0 auto;position:relative;width:1100px}.timeline-wrapper-test{flex:1;margin:0 auto;position:relative}.test-wrapper{margin:1rem}.timeline-bar,.timeline-player{background-color:#a9a9a9;height:20px;position:relative}.timeline-player{align-items:center;display:flex;justify-content:center;width:calc(100% + 3px)}.timeline-player *{padding:0 2rem}.current-snap{background-color:#a9a9a9;bottom:40px;font-weight:700;position:absolute}.current-snap input{height:100%;padding:0;width:10px}.timeline-cursor{border-radius:50%;height:30px;left:0;top:calc(var(--timeline-bar-height)/2 - var(--timeline-cursor-height)/2);width:30px}.timeline-cursor,.timeline-item{cursor:pointer;position:absolute}.timeline-item{height:100%;width:3px}.red{background-color:red}.white{background-color:#676767}.blue{background-color:#1b36ba}.timeslot{background-color:#fff;display:none;padding:.3rem 0;position:absolute;right:-13.5px;top:-20px;width:30px;z-index:5}.timeslot p{font-size:10px;margin:0;text-align:center}.timeline-item:hover .timeslot{display:block}.copy-paste-marker{background-color:#bd2e4c5e;position:absolute}.pointer{clip-path:polygon(0 0,100% 0,50% 100%);height:10px;left:calc(50% - 5px);position:absolute;top:-25%;width:10px;z-index:5}.player-icon{fill:#444;cursor:pointer;height:1em;vertical-align:-.125em}.test-result{border:1px solid #000;border-radius:1em;margin-left:auto;margin-right:auto;padding:1em;width:fit-content}");const l=e.exact({startRow:e.number.isRequired,endRow:e.number.isRequired,startCol:e.number.isRequired,endCol:e.number.isRequired,className:e.string.isRequired,type:e.oneOf(["text","fullLine","screenLine"])}),c=e.exact({testId:e.number.isRequired,testInput:e.string.isRequired,testOutput:e.string.isRequired,expectedOutput:e.string.isRequired,result:e.bool.isRequired,reason:e.string}),u=e.exact({actionType:e.oneOf(["PASTE","TEST","TYPE"]).isRequired,code:e.string.isRequired,time:e.number.isRequired,lang:e.string,markers:e.arrayOf(l),test:e.arrayOf(c)}),o=({timelineArray:e,duration:t,setFocusedActionIndex:n,focusedActionIndex:r})=>{const i=e=>{switch(e){case"PASTE":return"red";case"TYPE":default:return"white";case"TEST":return"blue"}};return a.default.createElement("div",{className:"timeline-bar"},e&&e.map(((e,l)=>a.default.createElement("div",{className:`timeline-item ${i(e.actionType)}`,key:`${e.lang}-${l}`,style:{left:e.time/t*100+"%"},onClick:()=>n(l)},a.default.createElement("div",{className:"timeslot"},a.default.createElement("p",null,(e=>{const t=e%3600;return Math.floor(e/3600)+":"+Math.floor(t/60)+":"+t%60})(e.time))),r===l&&a.default.createElement("div",{className:`pointer ${i(e.actionType)}`})))))};o.propTypes={timelineArray:e.arrayOf(u).isRequired,duration:e.number.isRequired,setFocusedActionIndex:e.func.isRequired,focusedActionIndex:e.number.isRequired},window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const s=({currentAction:e,defaultLanguage:t})=>a.default.createElement(i.default,{mode:e?.lang??t,theme:"monokai",name:"brace-editor",style:{width:"calc(100% + 3px)"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:e?.code??"",markers:e?.markers??[]});function d(){return d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d.apply(this,arguments)}function p(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512"}),a.default.createElement("path",{d:"M361 215c14.3 8.8 23 24.3 23 41s-8.7 32.2-23 40.1l-287.97 176c-14.82 9.9-33.37 10.3-48.51 1.8A48.02 48.02 0 010 432V80a48.02 48.02 0 0124.52-41.87 48.019 48.019 0 0148.51.91L361 215z"}))}function m(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),a.default.createElement("path",{d:"M287.1 447.1c17.67 0 31.1-14.33 31.1-32V96.03c0-17.67-14.33-32-32-32s-31.1 14.33-31.1 31.1v319.9c0 18.57 15.2 32.07 32 32.07zm-234.59-6.5l192-159.1c7.625-6.436 11.43-15.53 11.43-24.62 0-9.094-3.809-18.18-11.43-24.62l-192-159.1C31.88 54.28 0 68.66 0 96.03v319.9c0 27.37 31.88 41.77 52.51 24.67z"}))}function f(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),a.default.createElement("path",{d:"M31.1 64.03c-17.67 0-31.1 14.33-31.1 32v319.9c0 17.67 14.33 32 32 32 17.67-.83 32-14.33 32-32.83V96.03c0-17.67-14.33-32-32.9-32zm236.4 7.38l-192 159.1C67.82 237.8 64 246.9 64 256c0 9.094 3.82 18.18 11.44 24.62l192 159.1c20.63 17.12 52.51 2.75 52.51-24.62V95.2c-.85-26.54-31.85-40.92-52.45-23.79z"}))}function g(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),a.default.createElement("path",{d:"M512 96.03v319.9c0 17.67-14.33 31.1-31.1 31.1-18.6.07-32.9-13.43-32.9-31.93v-131L276.5 440.6c-20.6 17.1-52.5 2.7-52.5-25.5v-131L52.5 440.6C31.88 457.7 0 443.3 0 415.1V96.03c0-27.37 31.88-41.74 52.5-24.62L224 226.8V96.03c0-27.37 31.88-41.74 52.5-24.62L448 226.8V96.03c0-17.67 14.33-31.1 31.1-31.1 18.6-.9 32.9 13.43 32.9 31.1z"}))}function h(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"}),a.default.createElement("path",{d:"M0 415.1V96.03c0-17.67 14.33-31.1 31.1-31.1 18.57-.9 32.9 13.43 32.9 31.1v131.8l171.5-156.5c20.6-17.05 52.5-2.67 52.5 24.7v131.9l171.5-156.5c20.6-17.15 52.5-2.77 52.5 24.6v319.9c0 27.37-31.88 41.74-52.5 24.62L288 285.2v130.7c0 27.37-31.88 41.74-52.5 24.62L64 285.2v130.7c0 17.67-14.33 31.1-31.1 31.1-18.57.1-32.9-13.4-32.9-31.9z"}))}function v(e){return a.default.createElement("svg",d({},e,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 320 512"}),a.default.createElement("path",{d:"M272 63.1h-32c-26.51 0-48 21.49-48 47.1v288c0 26.51 21.49 48 48 48l32 1.8c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9zm-192 0H48c-26.51 0-48 21.49-48 48v288C0 426.5 21.49 448 48 448h32c26.51 0 48-21.49 48-48V112c0-26.51-21.5-48.9-48-48.9z"}))}s.propTypes={action:u,defaultLanguage:e.string};const x=({updateFocusedActionIndex:e,lastActionIndex:n,focusedActionIndex:r})=>{const[i,l]=t.useState(r+1),[c,u]=t.useState(!1),o=t.useRef(null),s=()=>{i>=1&&i<=n+1?e(i-1):l(r+1)};return t.useEffect((()=>{if(c)return o.current=setInterval((()=>e((e=>e+1))),500),()=>clearInterval(o.current)}),[c,e]),t.useEffect((()=>{o.current&&r>n-1&&(clearInterval(o.current),u(!1),o.current=null)}),[r,n]),t.useEffect((()=>{l(r+1)}),[r]),a.default.createElement("div",{className:"timeline-player"},a.default.createElement(h,{className:"player-icon first-button",onClick:()=>e(0)}),a.default.createElement(f,{className:"player-icon previous-button",onClick:()=>e((e=>e>0?e-1:0))}),a.default.createElement("div",{className:"current-snap"},a.default.createElement("input",{type:"number",value:i,onChange:e=>{const t=e.target.value;l(t)},onBlur:s,style:{width:10*`${n}`.length+"px"},onKeyDown:e=>"Enter"===e.key&&s()}),"/",n+1),c?a.default.createElement(v,{className:"player-icon pause-button",onClick:()=>{u(!1),clearInterval(o.current),o.current=null}}):a.default.createElement(p,{className:"player-icon play-button",onClick:()=>{r<n&&u(!0)}}),a.default.createElement(m,{className:"player-icon next-button",onClick:()=>e((e=>e<n?e+1:n))}),a.default.createElement(g,{className:"player-icon last-button",onClick:()=>e(n)}))};x.propTypes={updateFocusedActionIndex:e.func.isRequired,lastActionIndex:e.number.isRequired,focusedActionIndex:e.number.isRequired};const y=({currentAction:e})=>"TEST"===e.actionType&&e?.test?e?.test.map(((e,t)=>a.default.createElement("div",{style:{textAlign:"center"}},a.default.createElement("h4",null,"Input"),a.default.createElement("p",{className:"test-result"}," ",e.testInput," "),a.default.createElement("h4",null,"Output"),a.default.createElement("p",{className:"test-result"},e.testOutput," "),a.default.createElement("h4",null,"Expected Output"),a.default.createElement("p",{className:"test-result"}," ",e.expectedOutput," ")))):a.default.createElement("div",null);y.propTypes={action:u};const b=a.default.memo(o),w=({timelineArray:e,duration:n,language:r="javascript"})=>{const[i,l]=t.useState(0);return a.default.createElement("div",{style:{display:"flex"}},a.default.createElement("div",{className:"TEST"===e[i].actionType&&e[i]?.test?"timeline-wrapper-test":"timeline-wrapper"},a.default.createElement(s,{defaultLanguage:r,currentAction:e[i]}),a.default.createElement(b,{focusedActionIndex:i,duration:n,timelineArray:e,setFocusedActionIndex:l}),a.default.createElement(x,{lastActionIndex:e?.length-1??0,focusedActionIndex:i,updateFocusedActionIndex:l})),a.default.createElement("div",{className:"test-wrapper"},a.default.createElement(y,{currentAction:e[i]})))};w.propTypes={timelineArray:e.arrayOf(u).isRequired,duration:e.number.isRequired,language:e.string},module.exports=w; |
| { | ||
| "name": "react-scrubbing-timeline", | ||
| "version": "0.3.0", | ||
| "version": "0.3.1", | ||
| "author": "MahdiBZ", | ||
@@ -5,0 +5,0 @@ "private": false, |
@@ -19,3 +19,3 @@ import _Timeine from "./components/Timeline"; | ||
| return ( | ||
| <div> | ||
| <div style={{display:'flex'}}> | ||
| <div className={(timelineArray[focusedActionIndex].actionType === "TEST" && timelineArray[focusedActionIndex]?.test)?"timeline-wrapper-test":"timeline-wrapper"}> | ||
@@ -22,0 +22,0 @@ <Editor |
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.14%
63209
- Lines of code
- decreased by-0.39%
764
No dependency changes