forked from fedi/mastodon
Fix hardcoded frame rate for frame by frame video navigation in web UI (#15198)
This commit is contained in:
parent
66832cbf33
commit
f970e1fab6
|
@ -391,6 +391,7 @@ class Status extends ImmutablePureComponent {
|
|||
{Component => (
|
||||
<Component
|
||||
preview={attachment.get('preview_url')}
|
||||
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
|
||||
blurhash={attachment.get('blurhash')}
|
||||
src={attachment.get('url')}
|
||||
alt={attachment.get('description')}
|
||||
|
|
|
@ -142,6 +142,7 @@ class DetailedStatus extends ImmutablePureComponent {
|
|||
media = (
|
||||
<Video
|
||||
preview={attachment.get('preview_url')}
|
||||
frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
|
||||
blurhash={attachment.get('blurhash')}
|
||||
src={attachment.get('url')}
|
||||
alt={attachment.get('description')}
|
||||
|
|
|
@ -386,6 +386,7 @@ class FocalPointModal extends ImmutablePureComponent {
|
|||
{media.get('type') === 'video' && (
|
||||
<Video
|
||||
preview={media.get('preview_url')}
|
||||
frameRate={media.getIn(['meta', 'original', 'frame_rate'])}
|
||||
blurhash={media.get('blurhash')}
|
||||
src={media.get('url')}
|
||||
detailed
|
||||
|
|
|
@ -64,6 +64,7 @@ export default class VideoModal extends ImmutablePureComponent {
|
|||
<div className='video-modal__container'>
|
||||
<Video
|
||||
preview={media.get('preview_url')}
|
||||
frameRate={media.getIn(['meta', 'original', 'frame_rate'])}
|
||||
blurhash={media.get('blurhash')}
|
||||
src={media.get('url')}
|
||||
currentTime={options.startTime}
|
||||
|
|
|
@ -99,6 +99,7 @@ class Video extends React.PureComponent {
|
|||
|
||||
static propTypes = {
|
||||
preview: PropTypes.string,
|
||||
frameRate: PropTypes.string,
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string,
|
||||
width: PropTypes.number,
|
||||
|
@ -123,6 +124,10 @@ class Video extends React.PureComponent {
|
|||
muted: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
frameRate: 25,
|
||||
};
|
||||
|
||||
state = {
|
||||
currentTime: 0,
|
||||
duration: 0,
|
||||
|
@ -288,7 +293,7 @@ class Video extends React.PureComponent {
|
|||
}
|
||||
|
||||
handleKeyDown = e => {
|
||||
const frameTime = 1 / 25;
|
||||
const frameTime = 1 / this.getFrameRate();
|
||||
|
||||
switch(e.key) {
|
||||
case 'k':
|
||||
|
@ -517,6 +522,17 @@ class Video extends React.PureComponent {
|
|||
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 () {
|
||||
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;
|
||||
|
|
Loading…
Reference in a new issue