Slate transcript editor

Work in progress

Building on the success and lessons learned from @bbc/react-transcript-editor. Mostly to be used in the context of autoEdit 3(digital paper edit), and other proejcts.

Criterias/Principles

• Easy to reason around
• Can handle transcript and media over 1 hour without loss in performance
• Only essential features for correction of timed text
• adapters to and from other STT services, are external, except for dpe (digital paper edit, adapter).
• leverages existing libraries, such as Material UI, to focus on the diffuclt problems, and not wasting time re-inventing the wheel or fiddling around with css.

See project board for more details of ongoing work.

See draftJs vs slateJs in doc/notes for some considerations that inspired this version.

Storybook

Setup

git clone [email protected]:pietrop/slate-transcript-editor.git

cd slate-transcript-editor

npm install

Usage

Usage - dev

npm run storybook

or

npm start

Visit http://localhost:6006/

Usage - prod

slate-transcript-editor

npm install slate-transcript-editor

import  SlateTranscriptEditor  from 'slate-transcript-editor';

<SlateTranscriptEditor
  mediaUrl={DEMO_MEDIA_URL}
  transcriptData={DEMO_TRANSCRIPT}
  handleSaveEditor=// optional - function to handle when user clicks save btn in the UI
  />

or with more options, see table below

See storybook *.stories.js in src/components/ for more examples

Attributes	Description	required	type
transcriptData	Transcript json	yes	Json
mediaUrl	string url to media file - audio or video	yes	String
handleSaveEditor	function to handle when user clicks save btn in the UI	no	Function
handleAutoSaveChanges	returns content of transcription after there's a change, auto save has condierable performance lag on longer files, sudgest to not use for files over 45 min/1hour.	no	Function
autoSaveContentType	specify the file format for data returned by handleAutoSaveChanges and handleSaveEditor,falls default to digitalpaperedit, and runs alignement before export. Other option is slate,without alignement.	no	String
isEditable	set to true if you want to be able to edit the text	no	Boolean
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
title	defaults to empty String, also used in file names for exported files.	no	String
showTitle	Whether to display the provided title	no	String
handleAnalyticsEvents	optional function to log analytics, returns event name as string, and some data as object associated with that event, see storybook for example	no	Function
optionalBtns	optional buttons or react components can be passed to the sidebar see storybook for example	no	Jsx

see storybook for example code

Adapters

• assemblyai-to-dpe
• gcp-to-dpe
• aws-to-dpe
• deepspeech-node-wrapper
• pocketsphinx-stt
• speechmatics-to-dpe
• ibmwatson-to-dpe

System Architecture

• Uses slate as editor, see their docs.

• Uses stt-align-node for restoring timecodes.

• It re-syncs the timecodes when export of formats that require timecodes, eg dpe json, or docx and txt with timecodes. Also for the 'realignement'/sync UI btn.

• If you export or save as slate json, at the moment it doesn't run alignement. The function to perform the alignement is also exported by the module, so that you can performe this computational intensive alignement elsewhere if needed, eg server side.

Customizing look and feel

The project uses material-ui. The style of the components is therefore self contained and does not reequire any additional stylesheet.

Theming

You can use material-ui's Theming and colors

Examples

Theming a whole CRA app

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
// Material UI Theme provider
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
// You can use material UI color design tokens, your own or color hex value
import { blue, indigo, green, purple } from '@material-ui/core/colors';

import 'fontsource-roboto';
// customize yout theme as much or as little as you want
const theme = createMuiTheme({
  palette: {
    background: {
      // paper: '#424242',
      // default: '#303030',
    },
    primary: {
      main: purple,
    },
    secondary: {
      main: green,
    },
  },
});

ReactDOM.render(
  <>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
  </>,
  document.getElementById('root')
);

Theming only the Slate Transcript Editor, in a parent component

import React from 'react';
// Material UI Theme provider
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
// You can use material UI color design tokens, your own or color hex value
import { blue, indigo, green, purple } from '@material-ui/core/colors';
// optional fonts
import 'fontsource-roboto';
// customize yout theme as much or as little as you want
const theme = createMuiTheme({
  palette: {
    background: {
      // paper: '#424242',
      // default: '#303030',
    },
    primary: {
      main: purple,
    },
    secondary: {
      main: green,
    },
  },
});

function TranscriptPage(props) {
  // some state and functions handlers for `TranscriptEditor`
  // eg `handleSave`

  const handleSave = (data) => {
    // Do something with the data eg save
  };

  return (
    <ThemeProvider theme={theme}>
      <TranscriptEditor
        transcriptData={transcriptJson} // Transcript json
        mediaUrl={url} // string url to media file - audio
        handleSaveEditor={handleSave} // optional - function to handle when user clicks save btn in the UI
      />
    </ThemeProvider>
  );
}

export default TranscriptPage;

Documentation

There's a docs folder in this repository.

• docs/notes contains dev draft notes on various aspects of the project. This would generally be converted either into ADRs or guides when ready.
• docs/guides contains walk through / how to.
• docs/adr contains Architecture Decision Record.

The docs folder syncs with gitbook to make the documentation more pleasent to browse at autoedit.gitbook.io/slate-transcript-editor-docs/ - Work in progress

The doc folder syncs with gitbook for ease of browsing at gitbook slate-transcript-editor-docs

Development env

• npm 6.13.6
• node 12
• storybook

If you have nvm you can run nvm use to change to the node version for this repo.

Linting

This repo uses prettier for linting. If you are using visual code you can add the Prettier - Code formatter extension, and configure visual code to do things like format on save.

You can also run the linting via npm scripts

npm run lint

and there's also a pre-commit hook that runs it too.

Build

build module

Following storybook Distribute UI across an organization guide.

build storybook

nvm use 12

npm run build-storybook

Tests

nvm use 14

npm run test

🚧 Wok in progress 🚧

(for now only localized to CSV composer module - and not fully working)

Deployment

Deployment module

To publish module to npm

npm run publish:public

and for a test run use

npm run publish:dry:run

Deployment storybook

To publish storybook to github pages

npm run deploy:ghpages