x-audio #269
x-audio #269
Conversation
* configure expanded + minimised stories * setup styling * move to css grid layout * More descriptive var names * Fix eslint errors * Update snapshot * Update snapshot again * Tidy up a little bit
- nasty, need to find a cleaner way to do this
- also notify state changes
Only care about state/props changes that are relevant
Otherwise this can fire false re-renders which creates unnecessary noise.
Hook up Play + Pause actions to the app
Revert "Call audio.load() on LOAD_MEDIA action to trigger preloading"
Also set state to loaded when playing
Column was too wide in expanded mode in safari and iOS app, fixed
ensure 0ish time is always rendered as 00:00
Testing has showed some interesting inputs when calculating this which resulted in showing things like 'infinity' time left to the user.
Guard against rocky network conditions when calculating time remaining
| @@ -0,0 +1,11 @@ | |||
| { | |||
| "name": "x-audio", | |||
| "main": "dist/Audio.es5.js", | |||
There was a problem hiding this comment.
This could be the ES6 bundle as we always transform the contents of Bower components (Origami components are ES6)
| "@financial-times/x-engine": "file:../../packages/x-engine", | ||
| "classnames": "^2.2.6", | ||
| "hammerjs": "^2.0.8", | ||
| "prop-types": "^15.7.2", |
There was a problem hiding this comment.
Should this be a peer dependency?
There was a problem hiding this comment.
I think it may also be desirable to add some extra configuration to our build step to ensure they are removed in production.... but that's for another time.
|
|
||
| This module can be used to play an audio file via pluggable engines/players. | ||
|
|
||
| It comes bundled with a web audio player (via [HTMLAudioElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement)), but can be used with another engine such as in the native layer. The bundled engine uses a [Redux](https://redux.js.org/) to manage state. |
There was a problem hiding this comment.
use a Redux to manage state
-> "uses Redux to manage state"
|
This is too big for me to do an in-depth review of, but it looks good! It appears to be documented and tested well and I trust that you had a good feedback loop in the team. However, this is not on FT.com and I'm not sure if there are any plans to make it so which means it is not technically an As discussed IRL I don't think that necessarily has to be a problem (cc #263) but some reassurance that the component has been tested and would work on FT.com in its current form would be a bonus - has it been tried? |
|
we've not as there would be work to get it all set up on dot com, so whoever comes back to it would need to do that. for example, the slider for the timeline is set up for touch devices and would need mouse support added in. |
|
This PR is being closed due to inactivity as part of a Pull Request Bankruptcy. If you feel it’s still useful or relevant please feel free to re-open it. |
|
This component was never added to ft.com, and because we needed tighter integration within the app*, we have imported and adopted it as a player component within ft-app. So I'm going to close this PR :) (* Note this would have been perfectly possibly with x-interaction etc, but we could simplify the implementation if we knew it was app-only!) |
🚧 WIP 🚧
Audio player