monorail
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/flavours/glitch/components/status.js
View File

@ -628,6 +628,7 @@ class Status extends ImmutablePureComponent {
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
{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/flavours/glitch/features/status/components/detailed_status.js
View File

@ -160,6 +160,7 @@ export default 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/flavours/glitch/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/flavours/glitch/features/ui/components/video_modal.js
View File

@ -40,6 +40,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/flavours/glitch/features/video/index.js
View File

@ -98,6 +98,7 @@ class Video extends React.PureComponent {
static propTypes = {
preview: PropTypes.string,
frameRate: PropTypes.string,
src: PropTypes.string.isRequired,
alt: PropTypes.string,
width: PropTypes.number,
@ -125,6 +126,10 @@ class Video extends React.PureComponent {
muted: PropTypes.bool,
};
static defaultProps = {
frameRate: 25,
};
state = {
currentTime: 0,
duration: 0,
@ -298,7 +303,7 @@ class Video extends React.PureComponent {
}
handleKeyDown = e => {
const frameTime = 1 / 25;
const frameTime = 1 / this.getFrameRate();
switch(e.key) {
case 'k':
@ -531,6 +536,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, letterbox, fullwidth, detailed, sensitive, link, editable, blurhash } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;