digital-paper-edit-client

所属分类:视频捕捉采集剪辑
开发工具:JavaScript
文件大小:0KB
下载次数:0
上传日期:2023-07-18 21:14:13
上 传 者sh-1993
说明:  正在进行的工作-BBC新闻实验室数字论文编辑项目-React客户端
(Work in progress - BBC News Labs digital paper edit project - React Client)

文件列表:
bake-scripts/
docs/
mock_conf/
public/
src/
.env
.eslintignore
.eslintrc
.nvmrc
.travis.yml
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENCE.md
package-lock.json
package.json
rtl.setup.js
server.js

# Digital Paper Edit - Client An application to make it faster, easier and more accessible to edit audio and video interviews using automatically generated transcriptions form STT service. See [intro](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/intro.md) and [slides](https://github.com/bbc/digital-paper-edit-client/blob/master/https://docs.google.com/presentation/d/1vVe_hgTj6JhLhU2WuZBOWx41ajcKX-8m8Xa0NIVZT2M/edit?usp=sharing) for more info on the project and [user journey](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/user-journey/user-journey.md) for a high level overview of the user journey. ## Current status The client and API was initially developed to be portable to any platform - i.e local, web, cloud provider, and Electron. We are currently developing and maintaining a **[firebase version](https://github.com/bbc/digital-paper-edit-client/blob/master/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-client/blob/master/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/blob/master/https://github.com/bbc/digital-paper-edit-client/#active). A fork of the client and API is still being developed in the open, in a **[separate fork](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/pietrop/digital-paper-edit-client)**, thanks to @pietrop. We 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-client/blob/master/https://github.com/bbc/digital-paper-edit-firebase)** or get in touch with us! ### Collaborating across forks We will look at the changes in the [fork](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/pietrop/digital-paper-edit-client) and manually add them to our [firebase version](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-firebase). When manually adding changes to the changes from a fork - there are challenges of pulling in dependencies, such as: ```javascript [ ("@bbc/aes31-adl-composer": "^1.0.1"), ("@bbc/digital-paper-edit-react-components": "^1.3.2"), ("@bbc/fcpx-xml-composer": "^1.0.0"), ("@bbc/react-transcript-editor": "^1.4.0") ]; ``` These 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. For understanding the approach see [this PR](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/pull/94). --- ## Project Architecture It'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). The project is organised across these repository ### Active - [`bbc/digital-paper-edit-react-components`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-react-components) - React Storybook for Client components - `npm`. - [`bbc/digital-paper-edit-infrastructure`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-infrastructure) - Private repo: AWS infrastructure for API server and Client. - [`bbc/digital-paper-edit-stt-proxy`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-stt-proxy) - An express server to connect to STT service ### Inactive - [`bbc/digital-paper-edit-client`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client) - React Client - [npm](https://github.com/bbc/digital-paper-edit-client/blob/master/https://www.npmjs.com/package/@bbc/digital-paper-edit-client) - [`bbc/digital-paper-edit-api`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-api) - Express server API - [npm](https://github.com/bbc/digital-paper-edit-client/blob/master/https://www.npmjs.com/package/@bbc/digital-paper-edit-api) - [`bbc/digital-paper-edit-electron`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-electron) - Electron, Cross Platform Desktop app - Mac, Windows, Linux - [`bbc/digital-paper-edit-cep`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-cep) Adobe CEP (Common Extensibility Platform) - Premiere Pro Plugin Panel #### Archived Micro services for web app backend - [`bbc/digital-paper-edit-video-preview-converter`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-video-preview-converter) - An express server to generate an mp4 video preview using ffmpeg - [`bbc/digital-paper-edit-audio-converter`](https://github.com/bbc/digital-paper-edit-client/blob/master/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`. --- [See here to see them as a list in github](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/topics/digital-paper-edit). See [modular architecture section](https://github.com/bbc/digital-paper-edit-client/blob/master/./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/https://github.com/bbc/digital-paper-edit-client/blob/master/docs/ADR/2019-05-09-modular-architecture.md) The projects use [npm semantic versioning](https://github.com/bbc/digital-paper-edit-client/blob/master/https://docs.npmjs.com/about-semantic-versioning) ![](https://github.com/bbc/digital-paper-edit-client/blob/master/https://raw.githubusercontent.com/bbc/digital-paper-edit-infrastructure/master/docs/adr/newest_arch.png) - [BBC News Labs - Digital Paper Edit - Sprint Board](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/orgs/bbc/projects/33) is a Github project board [with linked repository](https://github.com/bbc/digital-paper-edit-client/blob/master/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. The project is divided into [concurrent milestones as described here](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/milestones) And there are [github project board for each milestone](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/projects) - [1 - Transcript - Editing](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/projects/2) - [2 - Transcript - Annotating](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/projects/3) - [3 - Paper-editing](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/projects/4) With UX being an overarching milestone that cuts across these different parts - [UX](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/projects/1) See [UX Approach](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/guides/ux-approach.md) in docs guides for more info. ## Setup See _optional_ [getting setup with the visual code workspace](https://github.com/bbc/digital-paper-edit-client/blob/master/docs/guides/visual-code-workspace-setup.md) to get up and running with the various repository needed for this project. ``` git clone git@github.com:bbc/digital-paper-edit-client.git ``` ``` cd digital-paper-edit-client ``` Optional step to setup [nvm](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/nvm-sh/nvm) to use node version 10, otherwise just use node version 10 ``` nvm use || nvm install` ``` in root of project ``` npm install ``` ## Usage - development In root of the client project (`cd digital-paper-edit-client`) start React ``` npm run start ``` To developer for the web app [you will need to start setup and the API server](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-api#setup) as well. > Runs the app in the development mode.
> Open [http://localhost:3000](https://github.com/bbc/digital-paper-edit-client/blob/master/http://localhost:3000) to view it in the browser. > > The page will reload if you make edits.
> You will also see any lint errors in the console. ## Usage - production The project is also publicly available in the npm registry [`@bbc/digital-paper-edit-client`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://www.npmjs.com/package/@bbc/digital-paper-edit-client) you can add it to your project ``` npm install @bbc/digital-paper-edit-client ``` and eg in an express server you can serve the static build as follows ``` app.use("/", express.static(path.join(__dirname, '..', 'node_modules/@bbc/digital-paper-edit-client'))); ``` ## System Architecture Client - React, is setup using [Create React App](https://github.com/bbc/digital-paper-edit-client/blob/master/https://facebook.github.io/create-react-app/docs/getting-started). > You can learn more in the [Create React App documentation](https://github.com/bbc/digital-paper-edit-client/blob/master/https://facebook.github.io/create-react-app/docs/getting-started). > > To learn React, check out the [React documentation](https://github.com/bbc/digital-paper-edit-client/blob/master/https://reactjs.org/). ## Development env - [ ] npm > `6.1.0` - [ ] node v 10 - [lts/dubnium](https://github.com/bbc/digital-paper-edit-client/blob/master/https://scotch.io/tutorials/whats-new-in-node-10-dubnium) - [ ] see [`.eslintrc`](https://github.com/bbc/digital-paper-edit-client/blob/master/./.eslintrc) in the various packages for linting rules Node version is set in node version manager [`.nvmrc`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/creationix/nvm#nvmrc) ## Documentation See [docs](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs) folder - [`docs/features-list`](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/features-list.md) overview of main features of the app. - [`docs/user-journey/user-journey.md`](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/user-journey/user-journey.md) overview of main features of the app. - [`docs/notes/`](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/notes/) contains unsorted dev notes on various aspects of the project (think of it as drafts). - [`docs/guides/`](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/guides/) contains good to know/how to on various aspects of the project. - [`docs/adr/`](https://github.com/bbc/digital-paper-edit-client/blob/master/./docs/adr/) contains [Architecture Decision Record](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/joelparkerhenderson/architecture_decision_record). > An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences. We are using [this template for ADR](https://github.com/bbc/digital-paper-edit-client/blob/master/https://gist.github.com/iaincollins/92923cc2c309c2751aea6f1b34b31d95) ## Build ``` npm run build ``` Build of react client side will be in `build` > Builds the app for production to the `build` folder.
> It correctly bundles React in production mode and optimizes the build for the best performance. > > The build is minified and the filenames include the hashes.
> Your app is ready to be deployed! ### Electron See [docs](https://github.com/bbc/digital-paper-edit-client/blob/master/https://github.com/bbc/digital-paper-edit-client/commit/15a9fe2d06c9b8666b6bd9ddd1aaa64246de6bfd) for more information on how this works with Electron. In `public/index.html`: ```js if (window.process && window.process.versions.electron) { const ElectronWrapper = require("../src/ElectronWrapper/index.js"); window.ElectronWrapper = ElectronWrapper; } ``` `ElectronWrapper` needs to be on the Electron render process otherwise (i.e. from the main process) the app will hang. 1. run `npm run build` which will output a `build` folder 2. move the `build` folder to `digital-paper-edit-electron` repository 3. from `digital-paper-edit-electron`, run `npm run start:prod` Running 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. ## Tests _TBC_ Test coverage using [`jest`](https://github.com/bbc/digital-paper-edit-client/blob/master/https://jestjs.io/), to run tests ``` npm run test ``` During development you can use ``` npm run test:watch ``` > Launches the test runner in the interactive watch mode.
> See the section about [running tests](https://github.com/bbc/digital-paper-edit-client/blob/master/https://facebook.github.io/create-react-app/docs/running-tests) for more information. ## Environment variables [`.env`](https://github.com/bbc/digital-paper-edit-client/blob/master/./.env) contains environment variables config for the React client side app. Do not store credentials in `.env` during development. `REACT_APP_NAME` App name is used in browser title and navbar component. ## Deployment ``` npm run publish:public ``` for more info on Create React app deployment: > See the section about [deployment](https://github.com/bbc/digital-paper-edit-client/blob/master/https://facebook.github.io/create-react-app/docs/deployment) for more information. ## Demo page on github pages To update demo on github pages [bbc.github.io/digital-paper-edit-client](https://github.com/bbc/digital-paper-edit-client/blob/master/https://bbc.github.io/digital-paper-edit-client) ``` npm run deploy:ghpages ``` ## Contributing See [CONTRIBUTING.md](https://github.com/bbc/digital-paper-edit-client/blob/master/./CONTRIBUTING.md) guidelines and [CODE_OF_CONDUCT.md](https://github.com/bbc/digital-paper-edit-client/blob/master/./CODE_OF_CONDUCT.md) guidelines. ## Licence See [LICENCE](https://github.com/bbc/digital-paper-edit-client/blob/master/./LICENCE.md) ## LegalDisclaimer _Despite using React and DraftJs, the BBC is not promoting any Facebook products or other commercial interest._

近期下载者

相关文件


收藏者