diff --git a/README.md b/README.md
index 32f923b2..3d8c6e80 100644
--- a/README.md
+++ b/README.md
@@ -92,15 +92,20 @@ With more attributes
| transcriptData | Transcript json | yes | Json |
| mediaUrl | string url to media file - audio or video | yes | String |
|`handleAutoSaveChanges`| returns content of transcription after a change | no | Function |
+| isAutoSave | default to true, enable the auto save callback `handleAutoSaveChanges` | no | Boolean |
| autoSaveContentType | specify the file format for data returned by `handleAutoSaveChanges`,falls back on `sttJsonType`. or `draftjs` | no | string |
| isEditable | set to true if you want to be able to edit the text | no | Boolean |
| spellCheck | set to true if you want the browser to spell check this transcript | no | Boolean |
-|`handleAnalyticsEvents`| if you want to collect analytics events. | yes | Function |
+| showTimecodes | set to true if you want to show timecodes in the transcript at paragraph level | no | Boolean |
+| showSpeakers | set to true if you want to show speaker labels in the transcript at paragraph level | no | Boolean |
+|`handleAnalyticsEvents`| if you want to collect analytics events. | yes | Function |
| fileName | used for saving and retrieving local storage blob files | no | String |
| title | defaults to empty string | no | String |
| ref | if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db. | no | React ref |
| mediaType | can be `audio` or `video`, if not provided the component uses the url file type to determine and adjust use of the page layout | no | String |
+
+
See [`./demo/app.js` demo](./demo/app.js) as a more detailed example usage of the component.
_Note: `fileName` it is optional but it's needed if working with user uploaded local media in the browser, to be able to save and retrieve from local storage. For instance if you are passing a blob url to `mediaUrl` using `createObjectURL` this url is randomly re-generated on every page refresh so you wouldn't be able to restore a session, as `mediaUrl` is used as the local storage key. See demo app for more detail example of this[`./src/index.js`](./src/index.js)_
diff --git a/demo/app.js b/demo/app.js
index 018e20fa..367d6633 100644
--- a/demo/app.js
+++ b/demo/app.js
@@ -4,7 +4,7 @@ import TranscriptEditor from "../packages/components/transcript-editor";
import SttTypeSelect from "./select-stt-json-type";
import ExportFormatSelect from "./select-export-format";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faThinkPeaks } from "@fortawesome/free-brands-svg-icons";
import {
loadLocalSavedData,
@@ -12,11 +12,62 @@ import {
localSave
} from "./local-storage.js";
-import DEMO_TRANSCRIPT from "./sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json";
-const DEMO_MEDIA_URL =
+const DEMO_MEDIA_URL_KATE =
"https://download.ted.com/talks/KateDarling_2018S-950k.mp4";
-const DEMO_TITLE =
+const DEMO_TITLE_KATE =
"TED Talk | Kate Darling - Why we have an emotional connection to robots";
+import DEMO_TRANSCRIPT_KATE from "./sample-data/KateDarling-bbcKaldiTranscriptWithSpeakerSegments.json";
+
+const DEMO_MEDIA_URL_ZUCK_5HOURS =
+ "https://democratic-presidential-debate-stt-analyses.s3.us-east-2.amazonaws.com/Facebook+CEO+Mark+Zuckerberg+FULL+testimony+before+U.S.+senate-pXq-5L2ghhg.mp4";
+
+const DEMO_TITLE_ZUCK_5HOURS =
+ "Facebook CEO Mark Zuckerberg | 5 Hours | full testimony before U.S. Senate";
+import DEMO_TRANSCRIPT_ZUCK_5HOURS_DPE from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.dpe.json";
+import DEMO_TRANSCRIPT_ZUCK_5HOURS_DRAFTJS from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.draftjs.json";
+
+ const DEMO_TITLE_ZUCK_2HOURS =
+ "Facebook CEO Mark Zuckerberg | 2 Hours | full testimony before U.S. Senate ";
+ import DEMO_TRANSCRIPT_ZUCK_2HOURS_DPE from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.dpe-2hours.json";
+ import DEMO_TRANSCRIPT_ZUCK_2HOURS_DRAFTJS from "./sample-data/Facebook-CEO-Mark-Zuckerberg-FULL-testimony-before-U.S.senate-pXq-5L2ghhg.mp4.draftjs-2hours.json";
+
+const DEMOS = [
+ {
+ id: 'kate',
+ title: DEMO_TITLE_KATE,
+ json: DEMO_TRANSCRIPT_KATE,
+ url: DEMO_MEDIA_URL_KATE,
+ type: "bbckaldi"
+ },
+ {
+ id: 'zuckDraftJs5h',
+ title: DEMO_TITLE_ZUCK_5HOURS,
+ json: DEMO_TRANSCRIPT_ZUCK_5HOURS_DRAFTJS,
+ url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+ type: 'draftjs'
+ },
+ {
+ id: 'zuckDpe5h',
+ title: DEMO_TITLE_ZUCK_5HOURS,
+ json: DEMO_TRANSCRIPT_ZUCK_5HOURS_DPE,
+ url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+ type: 'digitalpaperedit'
+ },
+ {
+ id: 'zuckDraftJs2h',
+ title: DEMO_TITLE_ZUCK_2HOURS,
+ json: DEMO_TRANSCRIPT_ZUCK_2HOURS_DRAFTJS,
+ url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+ type: 'draftjs'
+ },
+ {
+ id: 'zuckDpe2h',
+ title: DEMO_TITLE_ZUCK_2HOURS,
+ json: DEMO_TRANSCRIPT_ZUCK_2HOURS_DPE,
+ url: DEMO_MEDIA_URL_ZUCK_5HOURS,
+ type: 'digitalpaperedit'
+ },
+]
import style from "./index.module.scss";
@@ -36,19 +87,29 @@ class App extends React.Component {
autoSaveData: {},
autoSaveContentType: "draftjs",
autoSaveExtension: "json",
- useLocalStorage: true
+ useLocalStorage: false,
+ isAutoSave: false
};
this.transcriptEditorRef = React.createRef();
}
- loadDemo = () => {
+ loadDemo = (demoId) => {
+ const demo = DEMOS.find((d)=>{
+ return d.id === demoId;
+ })
+ const DEMO_TRANSCRIPT = demo.json;
+ const DEMO_MEDIA_URL = demo.url;
+ const DEMO_TITLE = demo.title;
+ const DEMO_TYPE = demo.type
+
if(this.state.useLocalStorage && isPresentInLocalStorage(DEMO_MEDIA_URL)){
const transcriptDataFromLocalStorage = loadLocalSavedData(DEMO_MEDIA_URL)
this.setState({
transcriptData: transcriptDataFromLocalStorage,
mediaUrl: DEMO_MEDIA_URL,
title: DEMO_TITLE,
+ // if loading from local storage, always saved in draftJS format
sttType: 'draftjs'
});
}
@@ -57,7 +118,7 @@ class App extends React.Component {
transcriptData: DEMO_TRANSCRIPT,
mediaUrl: DEMO_MEDIA_URL,
title: DEMO_TITLE,
- sttType: "bbckaldi"
+ sttType: DEMO_TYPE
});
}
};
@@ -125,12 +186,10 @@ class App extends React.Component {
};
handleExportFormatChange = event => {
- console.log(event.target.name, event.target.value);
this.setState({ [event.target.name]: event.target.value });
};
exportTranscript = () => {
- console.log("export");
// eslint-disable-next-line react/no-string-refs
const { data, ext } = this.transcriptEditorRef.current.getEditorContent(
this.state.exportFormat
@@ -146,7 +205,6 @@ class App extends React.Component {
// https://stackoverflow.com/questions/2897619/using-html5-javascript-to-generate-and-save-a-file
download = (content, filename, contentType) => {
- console.log("download");
const type = contentType || "application/octet-stream";
const link = document.createElement("a");
const blob = new Blob([content], { type: type });
@@ -180,7 +238,6 @@ class App extends React.Component {
};
handleAutoSaveChanges = newAutoSaveData => {
- console.log("handleAutoSaveChanges", newAutoSaveData);
const { data, ext } = newAutoSaveData;
this.setState({ autoSaveData: data, autoSaveExtension: ext });
// Saving to local storage
@@ -193,7 +250,12 @@ class App extends React.Component {
this.setState((prevState)=>{
return {useLocalStorage: !prevState.useLocalStorage}
}, ()=>{
- console.log('this.state.useLocalStorage',this.state.useLocalStorage)
+ // console.log('this.state.useLocalStorage',this.state.useLocalStorage)
+ })
+ }
+ handleIsAutoSave = (e) =>{
+ this.setState({
+ isAutoSave: e.target.checked
})
}
render() {
@@ -209,12 +271,36 @@ class App extends React.Component {