{"id":18376912,"url":"https://github.com/bbc/digital-paper-edit-client","last_synced_at":"2025-08-08T05:41:56.494Z","repository":{"id":34909787,"uuid":"177138580","full_name":"bbc/digital-paper-edit-client","owner":"bbc","description":"Work in progress - BBC News Labs digital paper edit project - React Client","archived":false,"fork":false,"pushed_at":"2023-07-18T21:14:13.000Z","size":21261,"stargazers_count":45,"open_issues_count":70,"forks_count":13,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-22T06:51:16.801Z","etag":null,"topics":["audio","bbc-news-labs","digital-paper-edit","interviews","news-labs","newslabs","paper-edit","paper-editing","paperedit","speech-to-text","stt","transcript","transcript-editor","video","video-editing","video-editing-software"],"latest_commit_sha":null,"homepage":"https://bbc.github.io/digital-paper-edit-client","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bbc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-22T12:45:46.000Z","updated_at":"2024-09-16T01:58:02.000Z","dependencies_parsed_at":"2024-11-06T00:37:46.501Z","dependency_job_id":null,"html_url":"https://github.com/bbc/digital-paper-edit-client","commit_stats":{"total_commits":144,"total_committers":9,"mean_commits":16.0,"dds":0.5416666666666667,"last_synced_commit":"53b7c156b3f7189623d30e0b5c5ca379f990b050"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fdigital-paper-edit-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fdigital-paper-edit-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fdigital-paper-edit-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbc%2Fdigital-paper-edit-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbc","download_url":"https://codeload.github.com/bbc/digital-paper-edit-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247547661,"owners_count":20956591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","bbc-news-labs","digital-paper-edit","interviews","news-labs","newslabs","paper-edit","paper-editing","paperedit","speech-to-text","stt","transcript","transcript-editor","video","video-editing","video-editing-software"],"created_at":"2024-11-06T00:25:23.549Z","updated_at":"2025-04-06T20:31:49.153Z","avatar_url":"https://github.com/bbc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Digital Paper Edit - Client\n\nAn application to make it faster, easier and more accessible to edit audio and video interviews using automatically generated transcriptions form STT service.\n\nSee [intro](./docs/intro.md) and [slides](https://docs.google.com/presentation/d/1vVe_hgTj6JhLhU2WuZBOWx41ajcKX-8m8Xa0NIVZT2M/edit?usp=sharing) for more info on the project and [user journey](./docs/user-journey/user-journey.md) for a high level overview of the user journey.\n\n## Current status\n\nThe client and API was initially developed to be portable to any platform - i.e local, web, cloud provider, and Electron.\nWe are currently developing and maintaining a **[firebase version](https://github.com/bbc/digital-paper-edit-firebase)** that merged the functionalities of the client (this repo) and [API](https://github.com/bbc/digital-paper-edit-api/). The BBC is **not actively working on this repo and digital-paper-edit-api**. This is because we are prioritising getting Digital Paper Edit in front of our journalists. For the full list of active/inactive DPE repos, see [here](https://github.com/bbc/digital-paper-edit-client/#active).\n\nA fork of the client and API is still being developed in the open, in a **[separate fork](https://github.com/pietrop/digital-paper-edit-client)**, thanks to @pietrop. \n\nWe don't want the opensource collaboration to stop, so we will be pulling in changes from the forks. If there's a valuable feature that we haven't yet implemented from the fork, please open an issue in **[this repo](https://github.com/bbc/digital-paper-edit-firebase)** or get in touch with us!\n\n### Collaborating across forks\n\nWe will look at the changes in the [fork](https://github.com/pietrop/digital-paper-edit-client) and manually add them to our [firebase version](https://github.com/bbc/digital-paper-edit-firebase).\n\nWhen manually adding changes to the changes from a fork - there are challenges of pulling in dependencies, such as:\n\n```javascript\n[\n  (\"@bbc/aes31-adl-composer\": \"^1.0.1\"),\n  (\"@bbc/digital-paper-edit-react-components\": \"^1.3.2\"),\n  (\"@bbc/fcpx-xml-composer\": \"^1.0.0\"),\n  (\"@bbc/react-transcript-editor\": \"^1.4.0\")\n];\n```\n\nThese dependencies (non-exhaustive) they might've been forked also. In this case, this is a matter of updating the BBC's version with the newest changes from the dependency's forks and making sure everything works together.\n\nFor understanding the approach see [this PR](https://github.com/bbc/digital-paper-edit-client/pull/94).\n\n---\n\n## Project Architecture\n\nIt's a React, Express, Electron, Adobe CEP, AWS stack to be able to deploy one modular code base as a Web app or Cross platform Desktop app (for Mac, win and linux).\n\nThe project is organised across these repository\n\n### Active\n\n- [`bbc/digital-paper-edit-react-components`](https://github.com/bbc/digital-paper-edit-react-components) - React Storybook for Client components - `npm`.\n- [`bbc/digital-paper-edit-infrastructure`](https://github.com/bbc/digital-paper-edit-infrastructure) - Private repo: AWS infrastructure for API server and Client.\n- [`bbc/digital-paper-edit-stt-proxy`](https://github.com/bbc/digital-paper-edit-stt-proxy) - An express server to connect to STT service\n\n### Inactive\n\n- [`bbc/digital-paper-edit-client`](https://github.com/bbc/digital-paper-edit-client) - React Client - [npm](https://www.npmjs.com/package/@bbc/digital-paper-edit-client)\n- [`bbc/digital-paper-edit-api`](https://github.com/bbc/digital-paper-edit-api) - Express server API - [npm](https://www.npmjs.com/package/@bbc/digital-paper-edit-api)\n- [`bbc/digital-paper-edit-electron`](https://github.com/bbc/digital-paper-edit-electron) - Electron, Cross Platform Desktop app - Mac, Windows, Linux\n- [`bbc/digital-paper-edit-cep`](https://github.com/bbc/digital-paper-edit-cep) Adobe CEP (Common Extensibility Platform) - Premiere Pro Plugin Panel\n\n#### Archived\n\nMicro services for web app backend\n\n- [`bbc/digital-paper-edit-video-preview-converter`](https://github.com/bbc/digital-paper-edit-video-preview-converter) - An express server to generate an mp4 video preview using ffmpeg\n- [`bbc/digital-paper-edit-audio-converter`](https://github.com/bbc/digital-paper-edit-audio-converter) - An express server to generate an audio file with the stt specs to be able to send it to `STT Proxy`.\n\n---\n\n[See here to see them as a list in github](https://github.com/topics/digital-paper-edit).\n\nSee [modular architecture section](./docs/guides/modular-architecture.md) for more details on the stack and the [Modular Architecture ADR for more info on the implementation](https://github.com/bbc/digital-paper-edit-client/blob/master/docs/ADR/2019-05-09-modular-architecture.md)\n\nThe projects use [npm semantic versioning](https://docs.npmjs.com/about-semantic-versioning)\n\n![](https://raw.githubusercontent.com/bbc/digital-paper-edit-infrastructure/master/docs/adr/newest_arch.png)\n\n- [BBC News Labs - Digital Paper Edit - Sprint Board](https://github.com/orgs/bbc/projects/33) is a Github project board [with linked repository](https://help.github.com/en/articles/linking-a-repository-to-a-project-board) where issues are added from the relevant repository listed in architecture section.\n\nThe project is divided into [concurrent milestones as described here](https://github.com/bbc/digital-paper-edit-client/milestones)\n\nAnd there are [github project board for each milestone](https://github.com/bbc/digital-paper-edit-client/projects)\n\n- [1 - Transcript - Editing](https://github.com/bbc/digital-paper-edit-client/projects/2)\n- [2 - Transcript - Annotating](https://github.com/bbc/digital-paper-edit-client/projects/3)\n- [3 - Paper-editing](https://github.com/bbc/digital-paper-edit-client/projects/4)\n\nWith UX being an overarching milestone that cuts across these different parts\n\n- [UX](https://github.com/bbc/digital-paper-edit-client/projects/1)\n\nSee [UX Approach](./docs/guides/ux-approach.md) in docs guides for more info.\n\n## Setup\n\n\u003c!-- _stack - optional_\n\n_How to build and run the code/app_ --\u003e\n\nSee _optional_ [getting setup with the visual code workspace](docs/guides/visual-code-workspace-setup.md) to get up and running with the various repository needed for this project.\n\n```\ngit clone git@github.com:bbc/digital-paper-edit-client.git\n```\n\n```\ncd digital-paper-edit-client\n```\n\nOptional step to setup [nvm](https://github.com/nvm-sh/nvm) to use node version 10, otherwise just use node version 10\n\n```\nnvm use || nvm install`\n```\n\nin root of project\n\n```\nnpm install\n```\n\n## Usage - development\n\n\u003c!-- `cd` into the individual repository inside [`./packages`](./packages) and npm start, or see respective README and package.json for how deal with each. --\u003e\n\nIn root of the client project (`cd digital-paper-edit-client`) start React\n\n```\nnpm run start\n```\n\nTo developer for the web app [you will need to start setup and the API server](https://github.com/bbc/digital-paper-edit-api#setup) as well.\n\n\u003e Runs the app in the development mode.\u003cbr\u003e\n\u003e Open [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\u003e\n\u003e The page will reload if you make edits.\u003cbr\u003e\n\u003e You will also see any lint errors in the console.\n\n\u003c!-- additionally to develop for electron also run ,in another terminal, in root of project.\n\n```\nmake start-electron\n``` --\u003e\n\n## Usage - production\n\nThe project is also publicly available in the npm registry [`@bbc/digital-paper-edit-client`](https://www.npmjs.com/package/@bbc/digital-paper-edit-client)\n\nyou can add it to your project\n\n```\nnpm install @bbc/digital-paper-edit-client\n```\n\nand eg in an express server you can serve the static build as follows\n\n```\napp.use(\"/\", express.static(path.join(__dirname, '..', 'node_modules/@bbc/digital-paper-edit-client')));\n```\n\n## System Architecture\n\nClient - React, is setup using [Create React App](https://facebook.github.io/create-react-app/docs/getting-started).\n\n\u003e You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\u003e\n\u003e To learn React, check out the [React documentation](https://reactjs.org/).\n\n## Development env\n\n\u003c!--\n _How to run the development environment_\n\n_Coding style convention ref optional, eg which linter to use_\n\n_Linting, github pre-push hook - optional_ --\u003e\n\n- [ ] npm \u003e `6.1.0`\n- [ ] node v 10 - [lts/dubnium](https://scotch.io/tutorials/whats-new-in-node-10-dubnium)\n- [ ] see [`.eslintrc`](./.eslintrc) in the various packages for linting rules\n\nNode version is set in node version manager [`.nvmrc`](https://github.com/creationix/nvm#nvmrc)\n\n\u003c!-- TODO: Setup eslint in express server --\u003e\n\n## Documentation\n\nSee [docs](./docs) folder\n\n- [`docs/features-list`](./docs/features-list.md) overview of main features of the app.\n- [`docs/user-journey/user-journey.md`](./docs/user-journey/user-journey.md) overview of main features of the app.\n- [`docs/notes/`](./docs/notes/) contains unsorted dev notes on various aspects of the project (think of it as drafts).\n- [`docs/guides/`](./docs/guides/) contains good to know/how to on various aspects of the project.\n- [`docs/adr/`](./docs/adr/) contains [Architecture Decision Record](https://github.com/joelparkerhenderson/architecture_decision_record).\n\n\u003e An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.\n\nWe are using [this template for ADR](https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95)\n\n\u003c!--\n[There also QA testing docs](./docs/qa/README.md) to manual test the component before a major release, (QA testing does not require any technical knowledge). --\u003e\n\n## Build\n\n\u003c!-- _How to run build_ --\u003e\n\n\u003c!-- See README for individual packages for more details ?--\u003e\n\n```\nnpm run build\n```\n\nBuild of react client side will be in `build`\n\n\u003e Builds the app for production to the `build` folder.\u003cbr\u003e\n\u003e It correctly bundles React in production mode and optimizes the build for the best performance.\n\u003e\n\u003e The build is minified and the filenames include the hashes.\u003cbr\u003e\n\u003e Your app is ready to be deployed!\n\n### Electron\n\nSee [docs](https://github.com/bbc/digital-paper-edit-client/commit/15a9fe2d06c9b8666b6bd9ddd1aaa64246de6bfd) for more information on how this works with Electron.\n\nIn `public/index.html`:\n\n```js\nif (window.process \u0026\u0026 window.process.versions.electron) {\n  const ElectronWrapper = require(\"../src/ElectronWrapper/index.js\");\n  window.ElectronWrapper = ElectronWrapper;\n}\n```\n\n`ElectronWrapper` needs to be on the Electron render process otherwise (i.e. from the main process) the app will hang.\n\n\u003c!-- Build proc\nFirst do `make build-react` then `make build-electron`\n`packages/client/dist` will contain your packaged version of the app for desktop\n--\u003e\n\n1. run `npm run build` which will output a `build` folder\n2. move the `build` folder to `digital-paper-edit-electron` repository\n3. from `digital-paper-edit-electron`, run `npm run start:prod`\n\nRunning in development (`npm start:dev`) in `digital-paper-edit-electron` will not work. In development mode, the `electron-main.js` looks for the app served by webpack in `src/ElectronWrapper/index.js`, which doesn't resolve as that is in a different repository.\n\n## Tests\n\n\u003c!-- _How to carry out tests_ --\u003e\n\n_TBC_\n\nTest coverage using [`jest`](https://jestjs.io/), to run tests\n\n```\nnpm run test\n```\n\nDuring development you can use\n\n```\nnpm run test:watch\n```\n\n\u003e Launches the test runner in the interactive watch mode.\u003cbr\u003e\n\u003e See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n\u003c!-- See README for individual packages for more details --\u003e\n\n\u003c!-- ## Travis CI\n\nOn 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). --\u003e\n\n## Environment variables\n\n[`.env`](./.env) contains environment variables config for the React client side app.\n\n\u003cmark\u003eDo not store credentials in `.env` during development.\u003c/mark\u003e\n\n`REACT_APP_NAME` App name is used in browser title and navbar component.\n\n## Deployment\n\n\u003c!-- _How to deploy the code/app into test/staging/production_ --\u003e\n\n```\nnpm run publish:public\n```\n\n\u003c!-- See README for individual packages for more details --\u003e\n\nfor more info on Create React app deployment:\n\n\u003e See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n## Demo page on github pages\n\nTo update demo on github pages [bbc.github.io/digital-paper-edit-client](https://bbc.github.io/digital-paper-edit-client)\n\n```\nnpm run deploy:ghpages\n```\n\n## Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) guidelines.\n\n## Licence\n\n\u003c!-- mention MIT Licence --\u003e\n\nSee [LICENCE](./LICENCE.md)\n\n## Legal Disclaimer\n\n_Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Fdigital-paper-edit-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbc%2Fdigital-paper-edit-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbc%2Fdigital-paper-edit-client/lists"}