[Glitch] Responsively enforce 16:9 ratio on video thumbnails in web UI

Port the video-player part of 036dd98abb to
glitch-soc. MediaGallery part ignored since it has diverged quite a bit.

This fixes #423
This commit is contained in:
Thibaut Girka 2018-04-14 17:14:04 +02:00
parent c5dd4ed1d5
commit 5d96c5ac41
4 changed files with 25 additions and 4 deletions

View File

@ -326,6 +326,7 @@ export default class Status extends ImmutablePureComponent {
{Component => (<Component {Component => (<Component
preview={video.get('preview_url')} preview={video.get('preview_url')}
src={video.get('url')} src={video.get('url')}
inline
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])} fullwidth={settings.getIn(['media', 'fullwidth'])}

View File

@ -58,6 +58,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<Video <Video
preview={video.get('preview_url')} preview={video.get('preview_url')}
src={video.get('url')} src={video.get('url')}
inline
sensitive={status.get('sensitive')} sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])} letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])} fullwidth={settings.getIn(['media', 'fullwidth'])}

View File

@ -98,6 +98,7 @@ export default class Video extends React.PureComponent {
letterbox: PropTypes.bool, letterbox: PropTypes.bool,
fullwidth: PropTypes.bool, fullwidth: PropTypes.bool,
detailed: PropTypes.bool, detailed: PropTypes.bool,
inline: PropTypes.bool,
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
}; };
@ -106,6 +107,7 @@ export default class Video extends React.PureComponent {
duration: 0, duration: 0,
paused: true, paused: true,
dragging: false, dragging: false,
containerWidth: false,
fullscreen: false, fullscreen: false,
hovered: false, hovered: false,
muted: false, muted: false,
@ -114,6 +116,12 @@ export default class Video extends React.PureComponent {
setPlayerRef = c => { setPlayerRef = c => {
this.player = c; this.player = c;
if (c) {
this.setState({
containerWidth: c.offsetWidth,
});
}
} }
setVideoRef = c => { setVideoRef = c => {
@ -247,12 +255,23 @@ export default class Video extends React.PureComponent {
} }
render () { render () {
const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props; const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props;
const { currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; const { containerWidth, currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100; const progress = (currentTime / duration) * 100;
const playerStyle = {};
let { width, height } = this.props;
if (inline && containerWidth) {
width = containerWidth;
height = containerWidth / (16/9);
playerStyle.width = width;
playerStyle.height = height;
}
return ( return (
<div className={classNames('video-player', { inactive: !revealed, detailed, inline: width && height && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} style={{ width, height }} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> <div className={classNames('video-player', { inactive: !revealed, detailed, inline: width && height && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} style={playerStyle} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<video <video
ref={this.setVideoRef} ref={this.setVideoRef}
src={src} src={src}

View File

@ -307,7 +307,7 @@
&.inline { &.inline {
video { video {
object-fit: cover; object-fit: contain;
position: relative; position: relative;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);