treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

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

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

This fixes #423
lolsob-rspec
Thibaut Girka 2018-04-14 17:14:04 +02:00
parent 6153d6a6dc
commit 9a3fd77c72
4 changed files with 25 additions and 4 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

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

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

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

25
app/javascript/flavours/glitch/features/video/index.js
View File

@ -98,6 +98,7 @@ export default class Video extends React.PureComponent {
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
detailed: PropTypes.bool,
inline: PropTypes.bool,
intl: PropTypes.object.isRequired,
};
@ -106,6 +107,7 @@ export default class Video extends React.PureComponent {
duration: 0,
paused: true,
dragging: false,
containerWidth: false,
fullscreen: false,
hovered: false,
muted: false,
@ -114,6 +116,12 @@ export default class Video extends React.PureComponent {
setPlayerRef = c => {
this.player = c;
if (c) {
this.setState({
containerWidth: c.offsetWidth,
});
}
}
setVideoRef = c => {
@ -247,12 +255,23 @@ export default class Video extends React.PureComponent {
}
render () {
const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props;
const { currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed } = this.props;
const { containerWidth, currentTime, duration, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
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 (
<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
ref={this.setVideoRef}
src={src}

2
app/javascript/flavours/glitch/styles/components/media.scss
View File

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