bbc / digital-paper-edit-client Goto Github PK
View Code? Open in Web Editor NEWWork in progress - BBC News Labs digital paper edit project - React Client
Home Page: https://bbc.github.io/digital-paper-edit-client
License: Other
Work in progress - BBC News Labs digital paper edit project - React Client
Home Page: https://bbc.github.io/digital-paper-edit-client
License: Other
Usability testing
Date: roughly set for the week c/ 18.11.
Recruitment and facilitation options discussed with Nalika and Jenny H. (23.10.2019)
1.) Recruitment through external agency + facilitation with internal people
2.) Recruitment + facilitation through external agency
Recruiting people needs to be done through external agency because we can't pay people directly
[email protected]
Is the person who has contacts to external producers
To do:
AWS RDS
Describe the bug
Client doesn't communicate to the server in local dev
To Reproduce
in server npm run start:dev
in client npm run start:dev
I get this screen with error in console
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Expected behaviour
Expect to see this
Additional context
PR with fix coming up
AWS RDS
Some things to figure out about how BBC Video Context React wrapper could work to integrate with DPE functionalities
.currentTime =
for HTML5 video/audio element. (eg to enable functionalities such as click on a word in programme script, after calculating offset etc..)Describe the bug
VideoContext preview of paper edit is not responsive
To Reproduce
Steps to reproduce the behavior:
Expected behavior
This is what it looked like before - screenshot from electron app Version 1.0.9-alpha.1
Screenshots
Additional context
previewcanvas--videocontext in bbc.github.io/digital-paper-edit-storybook
Also there is CORS error in the demo (probl separate issue?)
Access to video at 'https://digital-paper-edit-demo.s3.eu-west-2.amazonaws.com/PBS-Frontline/The+Facebook+Dilemma+-+interviews/The+Facebook+Dilemma+-+Soleio+Cuervo-OIAUfZBd_7w.mp4' from origin 'https://bbc.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I think that might be the CORS settings in S3
Is your feature request related to a problem? Please describe.
Since the build is still quite not stable (see bug reports of app crashing), automatic save is needed as a workaround feature. It's quite handy to have any ways!
Describe the solution you'd like
I would like the automatic save to happen. This can be at the frequency that is suitable for the application to run still smoothly - after every transfer, adding of elements, etc. Maybe there should be an indication that it is automatically saved somewhere - but that is secondary to having the feature.
Additional context
There have been quite a few suggestions during workshops and UX research.
The current code for save is in the Programme Script Component.
Is your feature request related to a problem? Please describe.
Need to add audio to the demo page. Currently we don't make any differences based on audio or video file content. This is just for the demo only and needs a proper solution for the actual DPE Client (e.g. determine MIME type on file upload) and API (update database in transcripts to have mediaType).
Describe the solution you'd like
Describe alternatives you've considered
Not having it would be easier, but could make DPE less impressionable for people who only care about audio content.
Additional context
Cloud formation add RDS DB to API Server
Based on Sutherland Labs report, p. 38
Paper Edits tab easily missed.
Initial UX explorations have been done:
https://zpl.io/25pJ4jJ
Describe the bug
clicking progress bar of Video preview (video context) component in programme script crashes the app.
To Reproduce
Steps to reproduce the behavior:
TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite
Expected behavior
Expect to be able to click around the progress bar without crashing the app
Desktop (please complete the following information):
1.0.2
Additional context
NA
As part of the Paper-edit view
As a user, I want to be able to get (watch or listen to) a preview of the paper-edit/program script so that I can see how my program's paper-cuts (transcripts text selections) will "render" as audio and/or video.
In the sketch, this would be the "canvas" - borrowing terminology from to the NLE video editors distinction between preview and canvas
A React component that takes a sequence of audio or video clips as an input, with start and end time, and displays a player that can
Note that the component should be able to generate the preview if the sequence is made of audio, video or a mix of audio and video files.
In first version it could just deal with sequences of media, but it be good if in subsequent versions it could handle things like text, titles (as a possible way to display place holders for voice over text?) - this second part needs to be flashed out more. But the general thing to keep in mind is the extensibility of the elements to display, if that makes sense.
bbc/VideoContext
Main option considered is to use bbc/VideoContext
within a React component.
See this issue for more details on how it works with an EDL(Edit Decision List) sequence of clips bbc/VideoContext#42
There are other examples and indications in the repo on how to enable, play, pause, and a progress bar.
I think under the hood, Video Context, used the HTML5 canvas to concat the videos in the sequence and then provides a unified interface to treat it as a single media.
in autoedit2, paper-editing because the files are stored locally, there's no network buffer issue when loading the different clips so used a vanilla js implementation that you can see in this js fiddle
This also uses media fragments to only get the specific segment.
html5-video-compositor was a precoursor of bbc/VideoContext
, now deprecated.
Popcorn js was a library by Mozilla, but is no longer mantained.
There was a JSfiddle with an example but
it's not working, coz no popcorn js CDN url is not valid.
The Documentation shows what the sequence
function used to do
Hyperaud.io was one of the first project to experiment with the idea of Hypertranscripts
and you can see in the hyperaud.io pad how you can mix from multiple selections and then get a preview.
I think under the hood two HTML5 video elements are cued up one after the other as a workaround to reduce load time of the media.
For preview videos you could use two or more Ted Talks
We want to upload directly to S3 from the client using the signed URL.
-Make sure upload of files are only done through signed URLs, retrieved from the API-
(moved to a different ticket)
We want an architecture for the transcript section of digital paper edit. The architecture will evolve and incorporate varying technologies, which we will need to evaluate.
See discussions below, let's try and narrow down as much as possible, based on rapid UX research findings.
Selected text can be transferred by
users should be able to duplicate content in order to version: e.g. when re-versioning long format content to shorter format and multiple programmes.
Once copy of selection is displayed in Programme Script, original selection should be signposted as being copied – that the clips have been used. This will help with users being able to quickly identify what has already been used.
Build fails on Jenkins due to Javascript heap (and possibly other things, such as node-sass).
The mock package from fedora creates a mocked environment. This is missing the python2 package needed for pulling in node-sass bind to build the RPM.
Using nspawn with args ['--capability=cap_ipc_lock', '--bind=/tmp/mock-resolv.cfcqrlft:/...skipping...
gyp verb `which` failed Error: not found: python2
...skipping...
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed at getNotFoundError (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:13:12)
gyp verb `which` failed at F (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:68:19)
gyp verb `which` failed at E (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:80:29)
gyp verb `which` failed at /builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:89:16
gyp verb `which` failed at /builddir/build/BUILD/digital-paper-edit-client/node_modules/isexe/index.js:42:5
gyp verb `which` failed at /builddir/build/BUILD/digital-paper-edit-client/node_modules/isexe/mode.js:8:5
gyp verb `which` failed at FSReqWrap.oncomplete (fs.js:123:15)
gyp verb `which` failed python2 { Error: not found: python2
gyp verb `which` failed at getNotFoundError (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:13:12)
gyp verb `which` failed at F (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:68:19)
gyp verb `which` failed at E (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:80:29)
gyp verb `which` failed at /builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:89:16
gyp verb `which` failed at /builddir/build/BUILD/digital-paper-edit-client/node_modules/isexe/index.js:42:5
gyp verb `which` failed at /builddir/build/BUILD/digital-paper-edit-client/node_modules/isexe/mode.js:8:5
gyp verb `which` failed at FSReqWrap.oncomplete (fs.js:123:15)
gyp verb `which` failed stack: 'Error: not found: python2\n at getNotFoundError (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:13:12)\n at F (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:68:19)\n at E (/builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:80:29)\n at /builddir/build/BUILD/digital-paper-edit-client/node_modules/which/which.js:89:16\n at /builddir/build/BUILD/digital-paper-edit-client/node_modules/isexe/index.js:42:5\n at /builddir/build/BUILD/digital-paper-edit-client/node_modules/isexe/mode.js:8:5\n at FSReqWrap.oncomplete (fs.js:123:15)',
gyp verb `which` failed code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
Build succeeds and digital-paper-edit int tools has a new version of the client RPM.
https://fedoraproject.org/wiki/Using_Mock_to_test_package_builds#Building_packages_that_depend_on_packages_not_in_a_repository
https://jenkins.newslabs.tools.bbc.co.uk/job/digital-paper-edit-client/36/console
Describe the bug
This is comparing the changes between #40 (including) to the most recent changes in ui-tweaks.
Originally the boxes didn't bleed into the transcript column.
After ui-tweaks update, this is what it looks like.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Similar CSS behaviour to before.
Screenshots
See above.
display contributor, labels are important because multiple pieces of footage
For reference, we used to have a little bit of commented code from Pietro which demonstrated how to do it in packages/components/ProgrammeScriptContainer/ProgrammeElements/PaperCut.js
which was removed during migrating ProgrammeScriptContainer to the Storybook.
// In PaperCut() function
// TODO could wrap words in span and add timecodes to make it cliccable on programme script
<Col sm={ 3 } className={ 'text-truncate text-muted' }
// TODO: could add timecode from eg - ${ shortTimecode(this.props.words[0].start) }
// TODO: Could add transcript name along side the timecode for the paper-cut
{/* <br/> */}
{/* <u style={ { cursor: 'pointer' } }>00:01:20</u> */}
{/* <br/> */}
{/* <FontAwesomeIcon icon={ faTag } />TagExample */}
Is your feature request related to a problem? Please describe.
#65
Describe the solution you'd like
https://github.com/bbc/VideoContext
Add a node (of your choice) to the videocontext to be able to see the voiceover in the rough cut video.
Describe alternatives you've considered
See ADR #65
Additional context
Highlighting Feature in Transcript to be investigated and mocked up
Describe the bug
The build and the demo page is showing an error message, but no console errors.
This is due to the browserrouter replacing the hashrouter in refactor for npm-simple-refactor
. The browser router does not work with dynamic paths when the hosted websites have paths already in them.
To Reproduce
Steps to reproduce the behavior:
or
Expected behavior
Should not have an error message, and should show bottom screenshot.
Additional context
See below.
Is your feature request related to a problem? Please describe.
We would like to make informed decisions when developing an idea further and taking it to development. Therefor we are conducting the rapid testing sessions with actual users to gather their feedback and opinion on our shortlisted ideas.
Methodology
Finding, 30 mins testing with paper, evaluation and analysis.
The number o participants will depend on whether some of the people who approached us are willing to give feedback again.
We are separating testing sessions for 'Reordering' and 'Transfer' to keep the sessions short.
Schedule for testing
https://paper.dropbox.com/doc/Research-II-schedule-and-content--Ak4iKgyNmi200lb4giW81FGeAQ-ElAKmqWz4hAxhMB6yq8Z4
Discussion guide
https://paper.dropbox.com/doc/DPE-Rapid-in-house-testing--Ak4KpHaXZmOpPRV0H9VF8040AQ-c2OJVZMlfdPEWT4kcQJIy
Tim - User research
Describe the bug
when previewing a clip the progress bar as multiple tracks
To Reproduce
:id
/paperedits/:id
)Expected behavior
to see one track in progress bar instead of severals
Screenshots
Additional context
at the moment working of this branch bbc/digital-paper-edit-client/ui-tweaks
AWS RDS
https://support.apple.com/kb/PH12701?locale=en_US
Linked to Signposting Voice over/link #63
Analysis
Is your feature request related to a problem? Please describe.
Not a problem so to speak - but there's been quite a lot of chatter from UX interviews that they'd want a more collaborative way to work. One of the suggested ways was to "Share". We want to understand what the size of the demand is and what it solves.
Describe the solution you'd like
A decision on the sharing feature.
Describe alternatives you've considered
The alternative is not allow users to directly share in DPE's UI, but they'll share the files exported from DPE.
Additional context
Is your feature request related to a problem? Please describe.
Describe the solution you'd like
Describe alternatives you've considered
Additional context
Based on Sutherland Labs research report, p. 45
Lack of clarity on Voice Over. Some participants assumed due to the icon, that recording a voice over was possible.
Is your feature request related to a problem? Please describe.
There's been numerous feedback regarding the, "how long is my output video"?
Related to first check box in #45 and there's a comment from @pietrop about how to go on about it.
Describe the solution you'd like
See comment in #45
The solution is a time display from the video context preview, somewhere in the workspace (preferably in the programme script).
There are limitations around updating the video context preview see bbc/digital-paper-edit-storybook#22
It is related but this ticket is not blocked by it.
Describe alternatives you've considered
Additional context
Is your feature request related to a problem? Please describe.
Describe the solution you'd like
Describe alternatives you've considered
Additional context
Based on Sutherland Labs research report
From research we found that a lot of producers wanted to remove parts of text in the Programme Script (without having to delete the entire snippet).
Although DPE is not an editing tool for refining the AV file, removing bits of snippets in the programme script can avoid another work around for producers.
The hypothesis is, the closer the rough cut comes to the final file by preventing producers to come up with more hacks THEN the producer is more likely to work in and use DPE – maybe for other kind of projects too.
The security for the API is completely loose right now for easier experimentation. We do not yet have any business critical data in the API. However this will change and we should tighten communication of the API.
Issues relating to this:
bbc/digital-paper-edit-api#7
AWS RDS
Describe the bug
This is a bug in the ui-tweaks
branch in changes between #40 (including) to the most recent changes and needs to be resolved before ui-tweaks can be merged in into master.
Transcript, on update loses details in the cards and in the Programme Script UI becomes undefined.
To Reproduce
Steps to reproduce the behaviour:
Expected behavior
No missing details after save or undefined state of transcript.
Screenshots
Desktop (please complete the following information):
Describe the bug
It's not a fully fledged bug, but more like a worm. There are so many deps, might be worth considering cleaning it up
To Reproduce
Steps to reproduce the behavior:
Install dependencies for the deployed NPM package.
Expected behavior
No errors or warnings from NPM.
Additional context
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: Way too old
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@^15.6.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/chokidar/node_modules/fsevents/node_modules/rc/node_modules/minimist):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/media/workspace/digital-paper-edit-infrastructure/dpe-client/src/node_modules/chokidar/node_modules/fsevents/node_modules/rc/node_modules/minimist/package.json.3811107122'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents/node_modules/rc/node_modules/minimist):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/media/workspace/digital-paper-edit-infrastructure/dpe-client/src/node_modules/fsevents/node_modules/rc/node_modules/minimist/package.json.3191992871'
+ @bbc/[email protected]
added 71 packages from 30 contributors, removed 40 packages, updated 8 packages, moved 4 packages and audited 37212 packages in 93.944s
found 68 vulnerabilities (63 low, 5 high)
run `npm audit fix` to fix them, or `npm audit` for details
Being able to fully edit with a full screen would be very helpful for users.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.