cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/mastodon/components/status.js
View file

@ -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')}

1
app/javascript/mastodon/features/status/components/detailed_status.js
View file

@ -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')}

1
app/javascript/mastodon/features/ui/components/focal_point_modal.js
View file

@ -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

1
app/javascript/mastodon/features/ui/components/video_modal.js
View file

@ -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}

18
app/javascript/mastodon/features/video/index.js
View file

@ -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;