feat: WIP: Import markers

src/controls.tsx

@@ -34,6 +34,7 @@ interface Props {
   onNextFrameClick: () => void
   onLastFrameClick: () => void
   onAddMarkerClick: () => void
+  onMarkerImported: (markers: Marker[]) => void
   selectedMarker?: Marker
   markerConfiguration?: MarkerConfiguration
 }
@@ -85,6 +86,7 @@ export class Controls extends React.Component<Props, never> {
       onNextFrameClick,
       onLastFrameClick,
       onAddMarkerClick,
+      onMarkerImported,
       selectedMarker,
       markerConfiguration,
     } = this.props
@@ -93,6 +95,26 @@ export class Controls extends React.Component<Props, never> {
     const currentTimeCode =
       currentTime !== duration ? this.getTimeCode(currentTime) : durationTimeCode
 
+    const onChangeFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files[0]) {
+        const updatedJSON = e.target.files[0]
+        if (updatedJSON.type === 'application/json') {
+          const fileReader = new FileReader()
+          fileReader.readAsText(e.target.files[0])
+          fileReader.onload = (ev: ProgressEvent<FileReader>) => {
+            const target = ev.target
+            if (target) {
+              const result: Marker[] = JSON.parse(target.result as any)
+              // const resultObject: Marker[] = JSON.parse(JSON.stringify(result, null, 2))
+              onMarkerImported(result)
+            } else {
+              console.error(`Unable to read the uploaded file`)
+            }
+          }
+        }
+      }
+    }
+
     return (
       <div className="react-video-controls">
         {controls.indexOf(ControlsSelection.LastFrame.toString()) !== -1 && (
@@ -171,6 +193,13 @@ export class Controls extends React.Component<Props, never> {
             FullScreen
           </button>
         )}
+        <input
+          className="import-markers"
+          type="file"
+          id="input_json"
+          accept=".json"
+          onChange={onChangeFile}
+        />
       </div>
     )
   }

src/index.tsx

@@ -306,6 +306,9 @@ function VideoPlayer(props: Props) {
           onNextFrameClick={handleNextFrameClick}
           onLastFrameClick={handleLastFrameClick}
           onAddMarkerClick={handleAddMarkerClick}
+          onMarkerImported={(importedMarkers: Marker[]) =>
+            console.log(`Imported Markers: ${JSON.stringify(importedMarkers)}`)
+          }
           selectedMarker={selectedMarker}
           markerConfiguration={markerConfiguration}
         />

src/styles.css

@@ -93,6 +93,13 @@
   width: 17px;
 }
 
+.react-video-controls .import-markers {
+  background-position-x: 0;
+  margin-top: 8px;
+  width: 180px;
+}
+
+
 .react-video-controls .time {
   color: #969696;
   font-size: 10px;