random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated Video component added aspect ratio for sizing

Browse Source
This commit is contained in:
mgabdev 2019-08-23 00:03:17 -04:00
parent 9b1f13487f
commit 449dd24b7f
4 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/gabsocial/components/status.js
View File

@ -344,6 +344,7 @@ class Status extends ImmutablePureComponent {
blurhash={video.get('blurhash')}
src={video.get('url')}
alt={video.get('description')}
aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
width={this.props.cachedMediaWidth}
height={110}
inline

1
app/javascript/gabsocial/features/report/components/status_check_box.js
View File

@ -38,6 +38,7 @@ export default class StatusCheckBox extends React.PureComponent {
blurhash={video.get('blurhash')}
src={video.get('url')}
alt={video.get('description')}
aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
width={239}
height={110}
inline

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

@ -111,6 +111,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
blurhash={video.get('blurhash')}
src={video.get('url')}
alt={video.get('description')}
aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
width={300}
height={150}
inline

16
app/javascript/gabsocial/features/video/index.js
View File

@ -8,6 +8,7 @@ import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/full
import { displayMedia } from '../../initial_state';
import Icon from 'gabsocial/components/icon';
import { decode } from 'blurhash';
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' },
@ -107,6 +108,7 @@ class Video extends React.PureComponent {
intl: PropTypes.object.isRequired,
blurhash: PropTypes.string,
link: PropTypes.node,
aspectRatio: PropTypes.number,
};
state = {
@ -373,7 +375,7 @@ class Video extends React.PureComponent {
}
render () {
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link } = this.props;
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100;
@ -384,8 +386,16 @@ class Video extends React.PureComponent {
let { width, height } = this.props;
if (inline && containerWidth) {
width = containerWidth;
height = containerWidth / (16/9);
width = containerWidth;
const minSize = containerWidth / (16/9);
if (isPanoramic(aspectRatio)) {
height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize);
} else if (isPortrait(aspectRatio)) {
height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize);
} else {
height = Math.floor(containerWidth / aspectRatio);
}
playerStyle.height = height;
}