feat: Export markers as JSON file

README.md

@@ -69,12 +69,13 @@ class App extends Component {
 - Markers creation, display and selection
 - Jumping back and forth between frames based on FPS (default fps value is 30)
 - Display various settings associated with the video player such as title, fps, volume, repeat, start time
+- Export markers as JSON file.
 
 ### Props
 
 Prop | Description | Default
 ---- | ----------- | -------
-`controls` | Set visible controls. Available controls: ControlSelection | [ControlSelection.Play, ControlSelection.Time, ControlSelection.Progress, ControlSelection.Volume, ControlSelection.FullScreen]
+`controls` | Set visible controls. Available controls: ControlSelection | [ControlSelection.Play, ControlSelection.Time, ControlSelection.Progress, ControlSelection.Volume, ControlSelection.FullScreen, ControlSelection.AddMarker, ControlSelection.ExportMarkers]
 `height` | Set the height of the player | '360px'
 `width` | Set the width of the player | '640px'
 `isPlaying` | Set to `true` or `false` to play or pause the media | false

dist/utils/download-attachment.d.ts

@@ -0,0 +1,2 @@
+export declare function downloadAttachment(data: string, fileName: string): void;
+export declare function downloadAttachmentFromUrl(url: string, fileName: string): void;

dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { downloadAttachment } from './download-attachment';

example/app.js

@@ -59,6 +59,10 @@ function App() {
       id: 'AddMarker',
       title: 'Add Marker',
     },
+    {
+      id: 'ExportMarkers',
+      title: 'Export Markers',
+    },
   ]
 
   const settingsList = [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-video-player-extended",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "React HTML5 video providing functionality for marking and selecting frames, jumping back and forth between frames based on the fps.",
   "author": "Amitt K Sharma",
   "license": "MIT",

src/controls.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { Marker, MarkerConfiguration, MarkerView } from './marker'
+import { downloadAttachment } from './utils'
 
 enum ControlsSelection {
   FullScreen = 'FullScreen',
@@ -10,6 +11,7 @@ enum ControlsSelection {
   LastFrame = 'LastFrame',
   NextFrame = 'NextFrame',
   AddMarker = 'AddMarker',
+  ExportMarkers = 'ExportMarkers',
 }
 
 interface Props {
@@ -141,6 +143,19 @@ export class Controls extends React.Component<Props, never> {
               })}
           </div>
         )}
+        {controls.indexOf(ControlsSelection.ExportMarkers.toString()) !== -1 && (
+          <button
+            className="export-markers"
+            onClick={() =>
+              downloadAttachment(
+                JSON.stringify(markers, null, 2),
+                `Markers_${new Date().toISOString().substring(0, 10)}.json`,
+              )
+            }
+          >
+            Export
+          </button>
+        )}
         {controls.indexOf(ControlsSelection.Volume.toString()) !== -1 && (
           <div className="volume-wrap">
             <progress ref={volumeEl} max="100" value={volume * 100} onClick={onVolumeClick}>

src/styles.css

@@ -47,7 +47,7 @@
   background-position: center center;
   border: 0;
   cursor: pointer;
-  margin: 10px 7px;
+  margin: 10px 5px;
   padding: 0;
   outline: none;
   height: 16px;
@@ -86,6 +86,12 @@
   width: 15px;
 }
 
+.react-video-controls .export-markers {
+  background-image: url('./images/export-markers.svg');
+  background-position-x: 0;
+  margin-top: 8px;
+  width: 17px;
+}
 
 .react-video-controls .time {
   color: #969696;

src/utils/download-attachment.ts

@@ -0,0 +1,11 @@
+export function downloadAttachment(data: string, fileName: string) {
+  const url = window.URL.createObjectURL(new Blob([data]))
+  downloadAttachmentFromUrl(url, fileName)
+}
+
+export function downloadAttachmentFromUrl(url: string, fileName: string) {
+  const link = document.createElement('a')
+  link.href = url
+  link.setAttribute('download', fileName)
+  link.click()
+}

src/utils/index.ts

@@ -0,0 +1 @@
+export { downloadAttachment } from './download-attachment'