Add parseCsv()

web/package.json

@@ -18,6 +18,7 @@
     "file-saver": "^2.0.2",
     "i18next": "^19.8.9",
     "moment": "^2.29.1",
+    "papaparse": "^5.4.1",
     "rc-bullets": "^1.5.16",
     "react": "17.0.2",
     "react-codemirror2": "^7.2.1",

web/src/VideoEditPage.js

@@ -6,6 +6,7 @@ import i18next from "i18next";
 import {LinkOutlined} from "@ant-design/icons";
 import Video from "./Video";
 import LabelTable from "./LabelTable";
+import * as Papa from "papaparse";
 
 const { Option } = Select;
 
@@ -35,6 +36,10 @@ class VideoEditPage extends React.Component {
           video: video,
           currentTime: 0,
         });
+
+        if (video.dataUrl !== "") {
+          this.parseCsv(video.dataUrl);
+        }
       });
   }
 
@@ -105,6 +110,16 @@ class VideoEditPage extends React.Component {
     )
   }
 
+  parseCsv(dataUrl) {
+    fetch(dataUrl, {
+      method: "GET",
+    }).then(res => res.text())
+      .then(res => {
+      const results = Papa.parse(res, { header: true });
+      console.log(results);
+    });
+  }
+
   renderVideo() {
     return (
       <Card size="small" title={
@@ -193,7 +208,10 @@ class VideoEditPage extends React.Component {
                 {i18next.t("general:Data")}:
               </Col>
               <Col span={22} >
-                <Select virtual={false} style={{width: '100%'}} value={this.state.video.dataUrl} onChange={(value => {this.updateVideoField('dataUrl', value);})}>
+                <Select virtual={false} style={{width: '100%'}} value={this.state.video.dataUrl} onChange={(value => {
+                  this.parseCsv(value);
+                  this.updateVideoField('dataUrl', value);
+                })}>
                   {
                     this.state.video.dataUrls?.map((dataUrl, index) => <Option key={index} value={dataUrl}>{dataUrl.split("/").pop()}</Option>)
                   }

web/yarn.lock

@@ -7188,6 +7188,11 @@ pako@~0.2.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==
 
+papaparse@^5.4.1:
+  version "5.4.1"
+  resolved "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz#f45c0f871853578bd3a30f92d96fdcfb6ebea127"
+  integrity sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==
+
 param-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"