Fix hardcoded frame rate for frame by frame video navigation in web UI (#15198)

This commit is contained in:
Eugen Rochko 2020-11-21 23:19:04 +01:00 committed by GitHub
parent 66832cbf33
commit f970e1fab6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 1 deletions

View File

@ -391,6 +391,7 @@ class Status extends ImmutablePureComponent {
{Component => ( {Component => (
<Component <Component
preview={attachment.get('preview_url')} preview={attachment.get('preview_url')}
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
blurhash={attachment.get('blurhash')} blurhash={attachment.get('blurhash')}
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={attachment.get('description')}

View File

@ -142,6 +142,7 @@ class DetailedStatus extends ImmutablePureComponent {
media = ( media = (
<Video <Video
preview={attachment.get('preview_url')} preview={attachment.get('preview_url')}
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
blurhash={attachment.get('blurhash')} blurhash={attachment.get('blurhash')}
src={attachment.get('url')} src={attachment.get('url')}
alt={attachment.get('description')} alt={attachment.get('description')}

View File

@ -386,6 +386,7 @@ class FocalPointModal extends ImmutablePureComponent {
{media.get('type') === 'video' && ( {media.get('type') === 'video' && (
<Video <Video
preview={media.get('preview_url')} preview={media.get('preview_url')}
frameRate={media.getIn(['meta', 'original', 'frame_rate'])}
blurhash={media.get('blurhash')} blurhash={media.get('blurhash')}
src={media.get('url')} src={media.get('url')}
detailed detailed

View File

@ -64,6 +64,7 @@ export default class VideoModal extends ImmutablePureComponent {
<div className='video-modal__container'> <div className='video-modal__container'>
<Video <Video
preview={media.get('preview_url')} preview={media.get('preview_url')}
frameRate={media.getIn(['meta', 'original', 'frame_rate'])}
blurhash={media.get('blurhash')} blurhash={media.get('blurhash')}
src={media.get('url')} src={media.get('url')}
currentTime={options.startTime} currentTime={options.startTime}

View File

@ -99,6 +99,7 @@ class Video extends React.PureComponent {
static propTypes = { static propTypes = {
preview: PropTypes.string, preview: PropTypes.string,
frameRate: PropTypes.string,
src: PropTypes.string.isRequired, src: PropTypes.string.isRequired,
alt: PropTypes.string, alt: PropTypes.string,
width: PropTypes.number, width: PropTypes.number,
@ -123,6 +124,10 @@ class Video extends React.PureComponent {
muted: PropTypes.bool, muted: PropTypes.bool,
}; };
static defaultProps = {
frameRate: 25,
};
state = { state = {
currentTime: 0, currentTime: 0,
duration: 0, duration: 0,
@ -288,7 +293,7 @@ class Video extends React.PureComponent {
} }
handleKeyDown = e => { handleKeyDown = e => {
const frameTime = 1 / 25; const frameTime = 1 / this.getFrameRate();
switch(e.key) { switch(e.key) {
case 'k': case 'k':
@ -517,6 +522,17 @@ class Video extends React.PureComponent {
this.props.onCloseVideo(); this.props.onCloseVideo();
} }
getFrameRate () {
if (this.props.frameRate && isNaN(this.props.frameRate)) {
// The frame rate is returned as a fraction string so we
// need to convert it to a number
return this.props.frameRate.split('/').reduce((p, c) => p / c);
}
return this.props.frameRate;
}
render () { render () {
const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, editable, blurhash } = this.props; const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, editable, blurhash } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;