react-scrubbing-timeline - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

dist/index.es.js

@@ -1,1 +0,1 @@
-import{exact as e,number as t,string as i,oneOf as r,arrayOf as o}from"prop-types";import a,{useState as n}from"react";import l from"react-ace";import"ace-builds/src-noconflict/theme-monokai";!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(":root{--timeline-bar-height:20px;--timeline-cursor-height:30px}.timeline-wrapper{margin:0 auto;position:relative;width:1100px}.timeline-bar{background-color:#a9a9a9;height:20px;position:relative}.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}.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}"),window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const s=({timelineArray:e,duration:t,language:i="javascript"})=>{const[r,o]=n(e?.[0]);return a.createElement("div",{className:"timeline-wrapper"},a.createElement(l,{mode:r?.lang??i,theme:"monokai",name:"brace-editor",style:{width:e?"calc(100% + 3px)":"100%"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:r?.code??"",markers:r.markers??[]}),a.createElement("div",{className:"timeline-bar"},e&&e.map(((i,r)=>a.createElement("div",{className:"timeline-item "+("PASTE"!==i.actionType?"white":"red"),key:`${i.lang}-${r}`,style:{left:i.time/t*100+"%"},onClick:()=>o(e[r])},a.createElement("div",{className:"timeslot"},a.createElement("p",null,(e=>{const t=e%3600;return Math.floor(e/3600)+":"+Math.floor(t/60)+":"+t%60})(i.time))))))))},c=e({startRow:t.isRequired,endRow:t.isRequired,startCol:t.isRequired,endCol:t.isRequired,className:i.isRequired,type:r(["text","fullLine","screenLine"])}),m=e({actionType:r(["PASTE","TEST","TYPE"]).isRequired,code:i.isRequired,time:t.isRequired,lang:i,markers:o(c)});s.propTypes={timelineArray:o(m).isRequired,duration:t.isRequired,language:i};export{s as default};
+import{exact as e,number as t,string as i,oneOf as r,arrayOf as o}from"prop-types";import a,{useState as n}from"react";import l from"react-ace";import"ace-builds/src-noconflict/theme-monokai";!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(":root{--timeline-bar-height:20px;--timeline-cursor-height:30px}.timeline-wrapper{margin:0 auto;position:relative;width:1100px}.timeline-bar{background-color:#a9a9a9;height:20px;position:relative}.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}.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}"),window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const s=({timelineArray:e,duration:t,language:i="javascript"})=>{const[r,o]=n(e?.[0]);return a.createElement("div",{className:"timeline-wrapper"},a.createElement(l,{mode:r?.lang??i,theme:"monokai",name:"brace-editor",style:{width:e?"calc(100% + 3px)":"100%"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:r?.code??"",markers:r?.markers??[]}),a.createElement("div",{className:"timeline-bar"},e&&e.map(((i,r)=>a.createElement("div",{className:"timeline-item "+("PASTE"!==i.actionType?"white":"red"),key:`${i.lang}-${r}`,style:{left:i.time/t*100+"%"},onClick:()=>o(e[r])},a.createElement("div",{className:"timeslot"},a.createElement("p",null,(e=>{const t=e%3600;return Math.floor(e/3600)+":"+Math.floor(t/60)+":"+t%60})(i.time))))))))},c=e({startRow:t.isRequired,endRow:t.isRequired,startCol:t.isRequired,endCol:t.isRequired,className:i.isRequired,type:r(["text","fullLine","screenLine"])}),m=e({actionType:r(["PASTE","TEST","TYPE"]).isRequired,code:i.isRequired,time:t.isRequired,lang:i,markers:o(c)});s.propTypes={timelineArray:o(m).isRequired,duration:t.isRequired,language:i};export{s as default};

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var e=require("prop-types"),t=require("react"),i=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),n=r(i);!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&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}.timeline-wrapper{margin:0 auto;position:relative;width:1100px}.timeline-bar{background-color:#a9a9a9;height:20px;position:relative}.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}.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}"),window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const o=({timelineArray:e,duration:i,language:r="javascript"})=>{const[o,l]=t.useState(e?.[0]);return a.default.createElement("div",{className:"timeline-wrapper"},a.default.createElement(n.default,{mode:o?.lang??r,theme:"monokai",name:"brace-editor",style:{width:e?"calc(100% + 3px)":"100%"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:o?.code??"",markers:o.markers??[]}),a.default.createElement("div",{className:"timeline-bar"},e&&e.map(((t,r)=>a.default.createElement("div",{className:"timeline-item "+("PASTE"!==t.actionType?"white":"red"),key:`${t.lang}-${r}`,style:{left:t.time/i*100+"%"},onClick:()=>l(e[r])},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})(t.time))))))))},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"])}),s=e.exact({actionType:e.oneOf(["PASTE","TEST","TYPE"]).isRequired,code:e.string.isRequired,time:e.number.isRequired,lang:e.string,markers:e.arrayOf(l)});o.propTypes={timelineArray:e.arrayOf(s).isRequired,duration:e.number.isRequired,language:e.string},module.exports=o;
+"use strict";var e=require("prop-types"),t=require("react"),i=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),n=r(i);!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&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}.timeline-wrapper{margin:0 auto;position:relative;width:1100px}.timeline-bar{background-color:#a9a9a9;height:20px;position:relative}.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}.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}"),window.ace.config.set("basePath","https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/");const o=({timelineArray:e,duration:i,language:r="javascript"})=>{const[o,l]=t.useState(e?.[0]);return a.default.createElement("div",{className:"timeline-wrapper"},a.default.createElement(n.default,{mode:o?.lang??r,theme:"monokai",name:"brace-editor",style:{width:e?"calc(100% + 3px)":"100%"},tabSize:4,readOnly:!0,highlightActiveLine:!1,value:o?.code??"",markers:o?.markers??[]}),a.default.createElement("div",{className:"timeline-bar"},e&&e.map(((t,r)=>a.default.createElement("div",{className:"timeline-item "+("PASTE"!==t.actionType?"white":"red"),key:`${t.lang}-${r}`,style:{left:t.time/i*100+"%"},onClick:()=>l(e[r])},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})(t.time))))))))},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"])}),s=e.exact({actionType:e.oneOf(["PASTE","TEST","TYPE"]).isRequired,code:e.string.isRequired,time:e.number.isRequired,lang:e.string,markers:e.arrayOf(l)});o.propTypes={timelineArray:e.arrayOf(s).isRequired,duration:e.number.isRequired,language:e.string},module.exports=o;

package.json

 {
   "name": "react-scrubbing-timeline",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "author": "MahdiBZ",
@@ -5,0 +5,0 @@ "private": false,

src/App.js

@@ -1,5 +0,4 @@
-import Timeline from './lib';
+import Timeline from "./lib";
 
 function App() {
-
   const actions = [
@@ -16,3 +15,3 @@ {
       actionType: "TYPE",
-      lang: "python"
+      lang: "python",
     },
@@ -27,3 +26,3 @@ {
       actionType: "TYPE",
-      lang: "golang"
+      lang: "golang",
     },
@@ -35,10 +34,12 @@ {
       lang: "ruby",
-      markers: [{
-        startRow: 0,
-        endRow: 0,
-        startCol: 6,
-        endCol: 25,
-        className: "copy-paste-marker",
-        type: "text",
-      }]
+      markers: [
+        {
+          startRow: 0,
+          endRow: 0,
+          startCol: 6,
+          endCol: 25,
+          className: "copy-paste-marker",
+          type: "text",
+        },
+      ],
     },
@@ -51,3 +52,3 @@ {
       actionType: "TEST",
-      lang: "kotlin"
+      lang: "kotlin",
     },
@@ -64,4 +65,4 @@ {
       lang: "c_cpp",
-      markers:
-        [{
+      markers: [
+        {
           startRow: 3,
@@ -73,3 +74,4 @@ endRow: 3,
           type: "text",
-        }]
+        },
+      ],
     },
@@ -87,3 +89,3 @@ {
       actionType: "TEST",
-      lang: "c_cpp"
+      lang: "c_cpp",
     },
@@ -102,10 +104,12 @@ {
       lang: "java",
-      markers: [{
-        startRow: 4,
-        endRow: 6,
-        startCol: 4,
-        endCol: 5,
-        className: "copy-paste-marker",
-        type: "text",
-      }]
+      markers: [
+        {
+          startRow: 4,
+          endRow: 6,
+          startCol: 4,
+          endCol: 5,
+          className: "copy-paste-marker",
+          type: "text",
+        },
+      ],
     },
@@ -116,7 +120,6 @@ {
       actionType: "TYPE",
-      lang: "swift"
+      lang: "swift",
     },
-  ]
+  ];
 
-
   return (
@@ -123,0 +126,0 @@ <div className="App h-screen flex flex-col items-center justify-center">

src/lib/components/Timeline.js

@@ -7,73 +7,73 @@ import { arrayOf, exact, number, oneOf, string } from "prop-types";
 
-
-
-
 window.ace.config.set(
-    "basePath",
-    "https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/"
+  "basePath",
+  "https://cdn.jsdelivr.net/npm/ace-builds@1.4.13/src-noconflict/"
 );
 
 const Timeline = ({ timelineArray, duration, language = "javascript" }) => {
-
-    const [focusedAction, setFocusedAction] = useState(timelineArray?.[0]);
-    const secondsToTime = (secs) => {
-        const hours = Math.floor(secs / (60 * 60));
-        const divisorForMinutes = secs % (60 * 60);
-        const minutes = Math.floor(divisorForMinutes / 60);
-        const seconds = divisorForMinutes % 60;
-        return hours+":"+minutes+":"+seconds; 
-      };
-    return (
-        <div className="timeline-wrapper">
-            <ReactAce
-                mode={focusedAction?.lang ?? language} // if there's no lang in focusedAction or language it will default to javascript
-                theme="monokai"
-                name="brace-editor"
-                style={{ width: timelineArray ? "calc(100% + 3px)" : "100%" }}
-                tabSize={4}
-                readOnly
-                highlightActiveLine={false}
-                value={focusedAction?.code ?? ""}
-                markers={focusedAction.markers ?? []}
-            />
-            <div className="timeline-bar">
-                {timelineArray && timelineArray.map((ta, i) => (
-                    <div className={`timeline-item ${ta.actionType !== "PASTE" ? "white" : "red"}`} key={`${ta.lang}-${i}`} style={{ left: (ta.time / duration) * 100 + "%" }} onClick={() => setFocusedAction(timelineArray[i])}>
-                        <div className="timeslot">
-                        <p>{secondsToTime(ta.time)}</p>
-                        </div>
-                    </div>
-                ))}
+  const [focusedAction, setFocusedAction] = useState(timelineArray?.[0]);
+  const secondsToTime = (secs) => {
+    const hours = Math.floor(secs / (60 * 60));
+    const divisorForMinutes = secs % (60 * 60);
+    const minutes = Math.floor(divisorForMinutes / 60);
+    const seconds = divisorForMinutes % 60;
+    return hours + ":" + minutes + ":" + seconds;
+  };
+  return (
+    <div className="timeline-wrapper">
+      <ReactAce
+        mode={focusedAction?.lang ?? language} // if there's no lang in focusedAction or language it will default to javascript
+        theme="monokai"
+        name="brace-editor"
+        style={{ width: timelineArray ? "calc(100% + 3px)" : "100%" }}
+        tabSize={4}
+        readOnly
+        highlightActiveLine={false}
+        value={focusedAction?.code ?? ""}
+        markers={focusedAction?.markers ?? []}
+      />
+      <div className="timeline-bar">
+        {timelineArray &&
+          timelineArray.map((ta, i) => (
+            <div
+              className={`timeline-item ${
+                ta.actionType !== "PASTE" ? "white" : "red"
+              }`}
+              key={`${ta.lang}-${i}`}
+              style={{ left: (ta.time / duration) * 100 + "%" }}
+              onClick={() => setFocusedAction(timelineArray[i])}
+            >
+              <div className="timeslot">
+                <p>{secondsToTime(ta.time)}</p>
+              </div>
             </div>
-        </div>
-    );
-}
+          ))}
+      </div>
+    </div>
+  );
+};
 
-
 const MarkersType = exact({
-    startRow: number.isRequired,
-    endRow: number.isRequired,
-    startCol: number.isRequired,
-    endCol: number.isRequired,
-    className: string.isRequired,
-    type: oneOf(["text", "fullLine", "screenLine"]),
-})
+  startRow: number.isRequired,
+  endRow: number.isRequired,
+  startCol: number.isRequired,
+  endCol: number.isRequired,
+  className: string.isRequired,
+  type: oneOf(["text", "fullLine", "screenLine"]),
+});
 
 const TimelineType = exact({
-    actionType: oneOf(["PASTE",
-        "TEST",
-        "TYPE"]).isRequired,
-    code: string.isRequired,
-    time: number.isRequired,
-    lang: string,
-    markers: arrayOf(MarkersType)
-})
+  actionType: oneOf(["PASTE", "TEST", "TYPE"]).isRequired,
+  code: string.isRequired,
+  time: number.isRequired,
+  lang: string,
+  markers: arrayOf(MarkersType),
+});
 
 Timeline.propTypes = {
-    timelineArray: arrayOf(TimelineType).isRequired,
-    duration: number.isRequired,
-    language: string
-}
+  timelineArray: arrayOf(TimelineType).isRequired,
+  duration: number.isRequired,
+  language: string,
+};
 
-
-export default Timeline;
+export default Timeline;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

338

increased by3.68%

Worsened metrics

Total package byte prevSize

38218

decreased by-0.11%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes