[Glitch] Fix hardcoded frame rate for frame by frame video navigation in web UI

Port f970e1fab6 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2020-11-21 23:19:04 +01:00 committed by Thibaut Girka
parent e71b16ae2b
commit 51d0e1c7b4
5 changed files with 21 additions and 1 deletions

View file

@ -628,6 +628,7 @@ class Status extends ImmutablePureComponent {
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} > <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
{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

@ -160,6 +160,7 @@ export default 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

@ -40,6 +40,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

@ -98,6 +98,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,
@ -125,6 +126,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,
@ -298,7 +303,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':
@ -531,6 +536,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, letterbox, fullwidth, detailed, sensitive, link, editable, blurhash } = this.props; const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, 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;