From 5d96c5ac41f4ae0c43b2cce53cb30b4e76ec5312 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sat, 14 Apr 2018 17:14:04 +0200 Subject: [PATCH] [Glitch] Responsively enforce 16:9 ratio on video thumbnails in web UI Port the video-player part of 036dd98abb1fe6ae1d25ff0f3ecffe4dd9a79ea3 to glitch-soc. MediaGallery part ignored since it has diverged quite a bit. This fixes #423 --- .../flavours/glitch/components/status.js | 1 + .../status/components/detailed_status.js | 1 + .../flavours/glitch/features/video/index.js | 25 ++++++++++++++++--- .../glitch/styles/components/media.scss | 2 +- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js index 2fcc44882d..eb621d5d74 100644 --- a/app/javascript/flavours/glitch/components/status.js +++ b/app/javascript/flavours/glitch/components/status.js @@ -326,6 +326,7 @@ export default class Status extends ImmutablePureComponent { {Component => ( { 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 ( -
+