Commit 0cc5dfab authored by Rob Colbert's avatar Rob Colbert

Merge branch 'feature/updating_media_aspect_ratio' of...

Merge branch 'feature/updating_media_aspect_ratio' of https://code.gab.com/gab/social/gab-social into develop
parents 65ce2a4b 4a4589bf
...@@ -344,6 +344,7 @@ class Status extends ImmutablePureComponent { ...@@ -344,6 +344,7 @@ class Status extends ImmutablePureComponent {
blurhash={video.get('blurhash')} blurhash={video.get('blurhash')}
src={video.get('url')} src={video.get('url')}
alt={video.get('description')} alt={video.get('description')}
aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
width={this.props.cachedMediaWidth} width={this.props.cachedMediaWidth}
height={110} height={110}
inline inline
......
...@@ -38,6 +38,7 @@ export default class StatusCheckBox extends React.PureComponent { ...@@ -38,6 +38,7 @@ export default class StatusCheckBox extends React.PureComponent {
blurhash={video.get('blurhash')} blurhash={video.get('blurhash')}
src={video.get('url')} src={video.get('url')}
alt={video.get('description')} alt={video.get('description')}
aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
width={239} width={239}
height={110} height={110}
inline inline
......
...@@ -111,6 +111,7 @@ export default class DetailedStatus extends ImmutablePureComponent { ...@@ -111,6 +111,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
blurhash={video.get('blurhash')} blurhash={video.get('blurhash')}
src={video.get('url')} src={video.get('url')}
alt={video.get('description')} alt={video.get('description')}
aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
width={300} width={300}
height={150} height={150}
inline inline
......
...@@ -8,6 +8,7 @@ import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/full ...@@ -8,6 +8,7 @@ import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/full
import { displayMedia } from '../../initial_state'; import { displayMedia } from '../../initial_state';
import Icon from 'gabsocial/components/icon'; import Icon from 'gabsocial/components/icon';
import { decode } from 'blurhash'; import { decode } from 'blurhash';
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
const messages = defineMessages({ const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' }, play: { id: 'video.play', defaultMessage: 'Play' },
...@@ -107,6 +108,7 @@ class Video extends React.PureComponent { ...@@ -107,6 +108,7 @@ class Video extends React.PureComponent {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
blurhash: PropTypes.string, blurhash: PropTypes.string,
link: PropTypes.node, link: PropTypes.node,
aspectRatio: PropTypes.number,
}; };
state = { state = {
...@@ -373,7 +375,7 @@ class Video extends React.PureComponent { ...@@ -373,7 +375,7 @@ class Video extends React.PureComponent {
} }
render () { 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 { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100; const progress = (currentTime / duration) * 100;
...@@ -385,7 +387,15 @@ class Video extends React.PureComponent { ...@@ -385,7 +387,15 @@ class Video extends React.PureComponent {
if (inline && containerWidth) { if (inline && containerWidth) {
width = containerWidth; width = containerWidth;
height = containerWidth / (16/9); 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; playerStyle.height = height;
} }
......
export const minimumAspectRatio = .8;
export const maximumAspectRatio = 2.8;
export const isPanoramic = ar => {
if (isNaN(ar)) return false;
return ar >= maximumAspectRatio;
}
export const isPortrait = ar => {
if (isNaN(ar)) return false;
return ar <= minimumAspectRatio;
}
export const isNonConformingRatio = ar => {
if (isNaN(ar)) return false;
return !isPanoramic(ar) && !isPortrait(ar);
}
...@@ -3580,13 +3580,6 @@ a.status-card.compact:hover { ...@@ -3580,13 +3580,6 @@ a.status-card.compact:hover {
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
&.standalone {
.media-gallery__item-gifv-thumbnail {
transform: none;
top: 0;
}
}
} }
.media-gallery__item-thumbnail { .media-gallery__item-thumbnail {
...@@ -3636,10 +3629,10 @@ a.status-card.compact:hover { ...@@ -3636,10 +3629,10 @@ a.status-card.compact:hover {
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
position: relative; position: relative;
top: 50%;
transform: translateY(-50%);
width: 100%; width: 100%;
z-index: 1; z-index: 1;
transform: none;
top: 0;
} }
.media-gallery__item-thumbnail-label { .media-gallery__item-thumbnail-label {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment