editor

package.json

@@ -36,6 +36,7 @@
     "postcss-loader": "^6.2.1",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.3.1",
+    "prop-types": "^15.7.2",
     "react-hot-loader": "^4.13.0",
     "react-pan-zoom-element": "^2.0.1",
     "run-sequence": "^2.2.1",
@@ -52,6 +53,7 @@
   },
   "dependencies": {
     "@demostf/parser-worker": "0.1.1",
+    "@demostf/edit": "0.1.1",
     "promise-polyfill": "^8.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.css

@@ -263,3 +263,12 @@ kbd, pre, samp {
 code {
   font-family: monospace;
 }
+
+p.page-note {
+  border-bottom: 1px solid #ddd;
+  margin: -10px -30px 50px;
+  padding: 15px 30px;
+  background-color: var(--primary-color-accent);
+  line-height: 32px;
+  font-size: 120%;
+}

src/App.tsx

@@ -83,6 +83,7 @@ function AppRouter({demoListProvider, demoProvider, user, auth, logoutHandler}:
 					   element={<React.Suspense fallback={<Loading/>}><LoadableApiPage user={user}/></React.Suspense>}/>
 				<Route path='/viewer/:id' element={<AnalysePageRoute user={user}/>}/>
 				<Route path='/viewer' element={<AnalysePageRoute user={user}/>}/>
+				<Route path='/edit' element={<EditPageRoute user={user}/>}/>
 				<Route path='/:id'
 					   element={<DemoPageRoute demoProvider={demoProvider}/>}/>
 				<Route path='/' element={<ListPageRoute demoListProvider={demoListProvider}/>}/>
@@ -117,6 +118,14 @@ function AnalysePageRoute({user}: { user: User | null }) {
 		</React.Suspense>)
 }
 
+function EditPageRoute({user}: { user: User | null }) {
+	const match = useParams();
+	return (
+		<React.Suspense fallback={<Loading/>}>
+			<LoadableEditPage match={match}/>
+		</React.Suspense>)
+}
+
 function DemoPageRoute({demoProvider}: { demoProvider: DemoProvider }) {
 	const match = useParams();
 	const location = useLocation();
@@ -131,6 +140,7 @@ const getApiComponent = () => import('./Pages/APIPage');
 const getAboutComponent = () => import('./Pages/AboutPage');
 const getUploadComponent = () => import('./Pages/UploadPage');
 const getAnalyseComponent = () => import('./Pages/AnalysePage');
+const getEditComponent = () => import('./Pages/EditPage');
 
 const getLoadable = (loader) => {
 	return (<React.Suspense fallback={<Loading/>}>
@@ -142,4 +152,5 @@ const LoadableApiPage = React.lazy(getApiComponent);
 const LoadableAboutPage = React.lazy(getAboutComponent);
 const LoadableUploadPage = React.lazy(getUploadComponent);
 const LoadableAnalysePage = React.lazy(getAnalyseComponent);
+const LoadableEditPage = React.lazy(getEditComponent);
 

src/Components/Duration.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-function format(input) {
+export function formatDuration(input) {
 	if (!input) {
-		return '-';
+		return '0:00';
 	}
 	const hours = Math.floor(input / 3600);
 	const minutes = Math.floor((input - (hours * 3600)) / 60);
-	const seconds = input - (hours * 3600) - (minutes * 60);
+	const seconds = Math.floor(input - (hours * 3600) - (minutes * 60));
 
 	const hourString = (hours < 10) ? "0" + hours : "" + hours;
 	const minuteString = (minutes < 10) ? "0" + minutes : "" + minutes;
@@ -25,7 +25,7 @@ export interface DurationProps {
 }
 
 export function Duration(props: DurationProps) {
-	const duration = format(props.duration);
+	const duration = formatDuration(props.duration);
 	return (
 		<span className={props.className||''}>{duration}</span>
 	);

src/Components/Header.css

@@ -23,6 +23,22 @@ header {
     padding: 0;
     float: left;
     max-width: 220px;
+    position: relative;
+
+    &.beta {
+      margin-right: 20px;
+
+      &:after {
+        content: 'beta';
+        color: var(--highlight-primary);
+        text-transform: uppercase;
+        font-size: 12px;
+        position: absolute;
+        right: -15px;
+        top: 2px;
+        font-weight: bold;
+      }
+    }
   }
 
   a, a:visited {

src/Components/Header.tsx

@@ -50,6 +50,10 @@ export function Header(props: HeaderProps) {
 				<Link className="pure-menu-link link-analyse"
 					  to="/viewer">VIEWER</Link>
 			</span>
+			<span key="edit" className="beta">
+				<Link className="pure-menu-link link-analyse"
+					  to="/edit">EDITOR</Link>
+			</span>
 
 			{rightMenu}
 		</header>

src/Components/MultiSlider.css

@@ -0,0 +1,113 @@
+.container {
+    padding-top: 30px;
+    display: flex;
+    height: 35px;
+}
+
+.slider {
+    position: relative;
+    width: 400px;
+}
+
+.slider__track,
+.slider__range,
+.slider__left-value,
+.slider__right-value,
+.slider__left-input,
+.slider__right-input {
+    position: absolute;
+}
+
+.slider__track,
+.slider__range {
+    border-radius: 3px;
+    height: 5px;
+}
+
+.slider__track {
+    background-color: #ced4da;
+    width: 100%;
+    z-index: 1;
+}
+
+.slider__range {
+    background-color: #9fe5e1;
+    z-index: 2;
+}
+
+.slider__left-value,
+.slider__right-value {
+    font-size: 12px;
+    margin-top: 20px;
+}
+
+.slider__left-input,
+.slider__right-input {
+    font-size: 12px;
+    margin-top: -36px;
+}
+
+
+.slider__left-input input,
+.slider__right-input input {
+    width: 80px;
+}
+
+.slider__left-value, .slider__left-input {
+    left: 6px;
+}
+
+.slider__right-value, .slider__right-input {
+    right: -4px;
+}
+
+/* Removing the default appearance */
+.thumb,
+.thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    width: 400px;
+    outline: none;
+}
+
+.thumb--left {
+    z-index: 3;
+}
+
+.thumb--right {
+    z-index: 4;
+}
+
+/* For Chrome browsers */
+.thumb::-webkit-slider-thumb {
+    background-color: #f1f5f7;
+    border: none;
+    border-radius: 50%;
+    box-shadow: 0 0 1px 1px #ced4da;
+    cursor: pointer;
+    height: 18px;
+    width: 18px;
+    margin-top: 4px;
+    pointer-events: all;
+    position: relative;
+}
+
+/* For Firefox browsers */
+.thumb::-moz-range-thumb {
+    background-color: #f1f5f7;
+    border: none;
+    border-radius: 50%;
+    box-shadow: 0 0 1px 1px #ced4da;
+    cursor: pointer;
+    height: 18px;
+    width: 18px;
+    margin-top: 4px;
+    pointer-events: all;
+    position: relative;
+}

src/Components/MultiSlider.tsx

@@ -0,0 +1,117 @@
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import "./MultiSlider.css";
+
+export interface SliderProps {
+	min: number,
+	max: number,
+	onChange: (min: number, max: number) => void,
+	labelFn?: (value: number) => string,
+}
+
+const MultiRangeSlider = ({ min, max, onChange, labelFn }: SliderProps) => {
+	if (!labelFn) {
+		labelFn = (_val) => '';
+	}
+	const [minVal, setMinVal] = useState<number>(min);
+	const [maxVal, setMaxVal] = useState<number>(max);
+	const minValRef = useRef<number>(min);
+	const maxValRef = useRef<number>(max);
+	const range = useRef<HTMLInputElement | null>(null);
+
+	// Convert to percentage
+	const getPercent = useCallback(
+		(value) => Math.round(((value - min) / (max - min)) * 100),
+		[min, max]
+	);
+
+	// Set width of the range to decrease from the left side
+	useEffect(() => {
+		const minPercent = getPercent(minVal);
+		const maxPercent = getPercent(maxValRef.current);
+
+		if (range.current) {
+
+			range.current.style.left = `${minPercent}%`;
+			range.current.style.width = `${maxPercent - minPercent}%`;
+		}
+	}, [minVal, getPercent]);
+
+	// Set width of the range to decrease from the right side
+	useEffect(() => {
+		const minPercent = getPercent(minValRef.current);
+		const maxPercent = getPercent(maxVal);
+
+		if (range.current) {
+			range.current.style.width = `${maxPercent - minPercent}%`;
+		}
+	}, [maxVal, getPercent]);
+
+	// Get min and max values when their state changes
+	useEffect(() => {
+		onChange(minVal, maxVal);
+	}, [minVal, maxVal, onChange]);
+
+	return (
+		<span className="container">
+			<input
+				type="range"
+				min={min}
+				max={max}
+				value={minVal}
+				onChange={(event) => {
+					const value = Math.min(Number(event.target.value), maxVal - 1);
+					setMinVal(value);
+					minValRef.current = value;
+				}}
+				className="thumb thumb--left"
+				style={{ zIndex: (minVal > max - 100) ? "5" : undefined }}
+			/>
+			<input
+				type="range"
+				min={min}
+				max={max}
+				value={maxVal}
+				onChange={(event) => {
+					const value = Math.max(Number(event.target.value), minVal + 1);
+					setMaxVal(value);
+					maxValRef.current = value;
+				}}
+				className="thumb thumb--right"
+			/>
+
+			<span className="slider">
+				<span className="slider__left-input">
+					<input type="number" value={minVal} onChange={(event) => {
+						const value = Math.max(Math.min(Number(event.target.value), maxVal - 1), min);
+						setMinVal(value);
+						minValRef.current = value;
+					}}/>
+				</span>
+				<span className="slider__right-input">
+					<input type="number" value={maxVal} onChange={(event) => {
+						const value = Math.min(Math.max(Number(event.target.value), minVal + 1), max);
+						setMaxVal(value);
+						maxValRef.current = value;
+					}}/>
+				</span>
+				<span className="slider__track" />
+				<span ref={range} className="slider__range" />
+				<span className="slider__left-value">
+					{labelFn(minVal)}
+				</span>
+				<span className="slider__right-value">
+					{labelFn(maxVal)}
+				</span>
+			</span>
+		</span>
+	);
+};
+
+MultiRangeSlider.propTypes = {
+	min: PropTypes.number.isRequired,
+	max: PropTypes.number.isRequired,
+	onChange: PropTypes.func.isRequired
+};
+
+export default MultiRangeSlider;