react-scrubbing-timeline
Advanced tools
Comparing version 0.2.1 to 0.2.2
@@ -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 a}from"prop-types";import o,{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],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}.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}"),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,a]=n(e?.[0]),s=e=>{switch(e){case"PASTE":return"red";case"TYPE":default:return"white";case"TEST":return"blue"}};return o.createElement("div",{className:"timeline-wrapper"},o.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??[]}),o.createElement("div",{className:"timeline-bar"},e&&e.map(((i,r)=>o.createElement("div",{className:`timeline-item ${s(i.actionType)}`,key:`${i.lang}-${r}`,style:{left:i.time/t*100+"%"},onClick:()=>a(e[r])},o.createElement("div",{className:"timeslot"},o.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"])}),d=e({actionType:r(["PASTE","TEST","TYPE"]).isRequired,code:i.isRequired,time:t.isRequired,lang:i,markers:a(c)});s.propTypes={timelineArray:a(d).isRequired,duration:t.isRequired,language:i};export{s as default}; |
@@ -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}.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}"),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]),s=e=>{switch(e){case"PASTE":return"red";case"TYPE":default:return"white";case"TEST":return"blue"}};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 ${s(t.actionType)}`,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; |
{ | ||
"name": "react-scrubbing-timeline", | ||
"version": "0.2.1", | ||
"version": "0.2.2", | ||
"author": "MahdiBZ", | ||
@@ -5,0 +5,0 @@ "private": false, |
@@ -26,3 +26,3 @@ import { arrayOf, exact, number, oneOf, string } from "prop-types"; | ||
case "TEST": return "blue"; | ||
default: return "white" | ||
default: return "white"; | ||
} | ||
@@ -29,0 +29,0 @@ }; |
38660
350