Performance no entities spike

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-**Is your Pull Request request related to another [issue](https://github.com/bbc/react-transcript-editor/issues) in this repository ?**      
+**Is your Pull Request request related to another issue in this repository ?**      
 <!-- _If so please link to other issues and PRs as appropriate_ -->
 
 **Describe what the PR does**    

CONTRIBUTING.md

@@ -7,16 +7,16 @@ By submitting code as an individual or as an entity you agree that your code is
 
 ## Pull requests and branching
 
-1. [Feel free to start by raising an issue](https://github.com/bbc/react-transcript-editor/issues/new?template=feature_request.md) so that others can be aware of areas where there is active development, and if needed we can synchronies the effort.
+1. [Feel free to start by raising an issue](https://github.com/pietrop/react-transcript-editor/issues/new?template=feature_request.md) so that others can be aware of areas where there is active development, and if needed we can synchronies the effort.
 
 2. [Fork the repo](https://help.github.com/articles/fork-a-repo/)
 
 3. Before working on a feature **always** create a new branch first. Createa a branch with a meaningful name.
 4. Branches should be short lived - consider doing multiple PR breaking down functionalities as opposed to one big change.
-5. If you've added code that should be tested, add tests, if you need help with automated testing, feel free to raise an [issue](https://github.com/bbc/react-transcript-editor/issues/new?template=feature_request.md).
+5. If you've added code that should be tested, add tests, if you need help with automated testing, feel free to raise an [issue](https://github.com/pietrop/react-transcript-editor/issues/new?template=feature_request.md).
 6. Ensure the test suite passes.
 7. Make sure your code lints.
-8. If you've changed APIs, consider [updating the documentation](https://github.com/bbc/react-transcript-editor#documentation) and QA Testing docs.
+8. If you've changed APIs, consider [updating the documentation](https://github.com/pietrop/react-transcript-editor#documentation) and QA Testing docs.
 9. Once the work is complete push the branch up on to GitHub for review. Make sure your branch is up to date with `master` before making a pull request. eg use [`git merge origin/master`](https://git-scm.com/docs/git-merge) or [rebase](https://git-scm.com/book/en/v2/Git-Branching-Rebasing)
 10. Once a branch has been merged into `master`, delete it.
 
@@ -39,7 +39,7 @@ See [this blog post for more on this](https://medium.com/mindorks/how-to-write-c
 - [ ] Ensure test suite passes (`npm run test`)
 - [ ] Make sure your code lints. (`npm run lint`)
 - [ ] consider re-factoring for code quality and readability
-- [ ] Update documentation and QA docs where appropriate - [see updating the documentation](https://github.com/bbc/react-transcript-editor#documentation)
+- [ ] Update documentation and QA docs where appropriate - [see updating the documentation](https://github.com/pietrop/react-transcript-editor#documentation)
 - [ ] Setup your PR for review 
 
 <!-- 

README.md

@@ -4,15 +4,16 @@
 
 A React component to make transcribing audio and video easier and faster.
 
-[![install size](https://packagephobia.now.sh/badge?p=@bbc/react-transcript-editor)](https://packagephobia.now.sh/result?p=@bbc/react-transcript-editor)
+<!-- [![install size](https://packagephobia.now.sh/badge?p=@bbc/react-transcript-editor)](https://packagephobia.now.sh/result?p=@bbc/react-transcript-editor) -->
+
+<!-- The project uses [this github project boards to organise and the co-ordinate development](https://github.com/bbc/react-transcript-editor/projects). -->
 
-The project uses [this github project boards to organise and the co-ordinate development](https://github.com/bbc/react-transcript-editor/projects).
 
 _--> Work in progress <--_
 
 <!-- _Screenshot of UI - optional_ -->
 
-- [You can see a demo by clicking here](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default) (and then click the `load demo` button)
+- [You can see a demo by clicking here](https://pietrop.github.io/react-transcript-editor/iframe.html?id=demo--default) (and then click the `load demo` button)
 - [And you can see a list of features here](./docs/features-list.md).
 
 ## Development env
@@ -49,14 +50,14 @@ Visit [http://localhost:6006](http://localhost:6006)
 
 ## Usage - production
 
-Available on [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
+Available on [npm - `@pietrop/react-transcript-editor`](https://www.npmjs.com/package/@pietrop/react-transcript-editor)
 
 ```
-npm install @bbc/react-transcript-editor
+npm install @pietrop/react-transcript-editor
 ```
 
 ```js
-import TranscriptEditor from "@bbc/react-transcript-editor";
+import TranscriptEditor from "@pietrop/react-transcript-editor";
 ```
 
 Minimal data needed for initialization 
@@ -77,7 +78,7 @@ With more attributes
   autoSaveContentType={'digitalpaperedit'}
   isEditable={true}
   spellCheck={false}
-  sttJsonType={"bbckaldi"}
+  sttJsonType={"pietropkaldi"}
   handleAnalyticsEvents={this.handleAnalyticsEvents}
   fileName={"ted-talk.mp4"}
   title={"Ted Talk"}
@@ -91,28 +92,43 @@ 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.                                                                                |    no    | 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)_
 
 _Note: `mediaType` if not defined, the component uses the url to determine the type and adjust the layout accordingly, however this could result in a slight delay when loading the component as it needs to fetch the media to determine it's file type_
 
+_Note: in current version you need to add `handleAnalyticsEvents` function to be able to use keyboard shortcuts. But you can also just add a placeholder function if you don't wish to implement analytics_
+
+```js
+<TranscriptEditor
+  transcriptData={someJsonFile}
+  mediaUrl={"https://download.ted.com/talks/KateDarling_2018S-950k.mp4"}
+  ...
+  handleAnalyticsEvents = {()=>{console.log('handleAnalyticsEvents')}}
+/>
+```
 ### Typescript projects
 
 If using in a parent project where [typescript](https://www.typescriptlang.org/) is being used you might need to add `//@ts-ignore` before the import statment like this
 
 ```js
 //@ts-ignore
-import { TranscriptEditor } from "@bbc/react-transcript-editor";
+import { TranscriptEditor } from "@pietrop/react-transcript-editor";
 ```
 
 #### Internal components
@@ -135,27 +151,27 @@ You can also import some of the underlying React components directly.
 To import the components you can do as follows
 
 ```js
-import TimedTextEditor from "@bbc/react-transcript-editor/TimedTextEditor";
+import TimedTextEditor from "@pietrop/react-transcript-editor/TimedTextEditor";
 ```
 
 ```js
-import { TimedTextEditor } from "@bbc/react-transcript-editor";
+import { TimedTextEditor } from "@pietrop/react-transcript-editor";
 ```
 
-However if you are not using `TranscriptEditor` it is recommended to follow the second option and import individual components like: `@bbc/react-transcript-editor/TimedTextEditor` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client. (Similarly to how [`react-bootstrap`](https://react-bootstrap.github.io/getting-started/introduction) works)
+However if you are not using `TranscriptEditor` it is recommended to follow the second option and import individual components like: `@pietrop/react-transcript-editor/TimedTextEditor` rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client. (Similarly to how [`react-bootstrap`](https://react-bootstrap.github.io/getting-started/introduction) works)
 
-See [the storybook](https://bbc.github.io/react-transcript-editor) for each component details on optional and required attributes.
+See [the storybook](https://pietrop.github.io/react-transcript-editor) for each component details on optional and required attributes.
 
 You can also use this node modules as standalone
 
 ```js
-import exportAdapter from "@bbc/react-transcript-editor/exportAdapter";
+import exportAdapter from "@pietrop/react-transcript-editor/exportAdapter";
 ```
 
 Converts from draftJs json format to other formats
 
 ```js
-import sttJsonAdapter from "@bbc/react-transcript-editor/sttJsonAdapter";
+import sttJsonAdapter from "@pietrop/react-transcript-editor/sttJsonAdapter";
 ```
 
 Converts various stt json formats to draftJs
@@ -165,7 +181,7 @@ import {
   secondsToTimecode,
   timecodeToSeconds,
   shortTimecode
-} from "@bbc/react-transcript-editor/timecodeConverter";
+} from "@pietrop/react-transcript-editor/timecodeConverter";
 ```
 
 some modules to convert to and from timecodes
@@ -208,9 +224,9 @@ npm run build:component
 
 ## Demo & storybook
 
-- **Storybook** can bew viewed at [https://bbc.github.io/react-transcript-editor/](https://bbc.github.io/react-transcript-editor/)
+- **Storybook** can bew viewed at [https://pietrop.github.io/react-transcript-editor/](https://pietrop.github.io/react-transcript-editor/)
 
-- **Demo** can be viewed at [https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default](https://bbc.github.io/react-transcript-editor/iframe.html?id=demo--default)
+- **Demo** can be viewed at [https://pietrop.github.io/react-transcript-editor/iframe.html?id=demo--default](https://pietrop.github.io/react-transcript-editor/iframe.html?id=demo--default)
 
 http://localhost:6006
 
@@ -267,13 +283,13 @@ npm run test:watch
 
 ## Travis CI
 
-On commit this repo uses the [.travis.yml](./.travis.yml) config tu run the automated test on [travis CI](https://travis-ci.org/bbc/react-transcript-editor).
+On commit this repo uses the [.travis.yml](./.travis.yml) config tu run the automated test on [travis CI](https://travis-ci.org/pietrop/react-transcript-editor).
 
 ## Deployment
 
 <!-- _How to deploy the code/app into test/staging/production_ -->
 
-To push to [npm - `@bbc/react-transcript-editor`](https://www.npmjs.com/package/@bbc/react-transcript-editor)
+To push to [npm - `@pietrop/react-transcript-editor`](https://www.npmjs.com/package/@pietrop/react-transcript-editor)
 
 ```
 npm publish:public
@@ -295,4 +311,4 @@ See [LICENCE](./LICENCE.md)
 
 ## Legal Disclaimer
 
-_Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest._
+_Despite using React and DraftJs, the pietrop is not promoting any Facebook products or other commercial interest._