bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Start refactoring media aspect ratio code

Browse source
This commit is contained in:
Alex Gleason 2020-04-23 12:12:03 -05:00
parent 85a68e0715
commit 42f39d6aae
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 216 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

405
app/gabsocial/components/media_gallery.js
View file

@ -280,214 +280,241 @@ class MediaGallery extends React.PureComponent {
} }
} }
getSizeData = () => { getSizeDataSingle = () => {
const { media, height, defaultWidth } = this.props; const { media, defaultWidth } = this.props;
const width = this.state.width || defaultWidth; const width = this.state.width || defaultWidth;
const size = media.take(4).size; const aspectRatio = media.getIn([0, 'meta', 'small', 'aspect']);
const style = {}; const style = {};
if (isPanoramic(aspectRatio)) {
style.height = Math.floor(width / maximumAspectRatio);
} else if (isPortrait(aspectRatio)) {
style.height = Math.floor(width / minimumAspectRatio);
} else {
style.height = Math.floor(width / aspectRatio);
}
return ImmutableMap({
style,
itemsDimensions: [],
size: 1,
width,
});
}
getSizeDataMultiple = size => {
const { media, defaultWidth } = this.props;
const width = this.state.width || defaultWidth;
const panoSize = Math.floor(width / maximumAspectRatio); const panoSize = Math.floor(width / maximumAspectRatio);
const panoSize_px = `${Math.floor(width / maximumAspectRatio)}px`; const panoSize_px = `${Math.floor(width / maximumAspectRatio)}px`;
const style = {};
let itemsDimensions = []; let itemsDimensions = [];
if (size === 1 && width) { const ratios = Array(size).fill().map((_, i) =>
const aspectRatio = media.getIn([0, 'meta', 'small', 'aspect']); media.getIn([i, 'meta', 'small', 'aspect'])
);
if (isPanoramic(aspectRatio)) { const [ar1, ar2, ar3, ar4] = ratios;
style.height = Math.floor(width / maximumAspectRatio);
} else if (isPortrait(aspectRatio)) { if (size === 2) {
if (isPortrait(ar1) && isPortrait(ar2)) {
style.height = width - (width / maximumAspectRatio);
} else if (isPanoramic(ar1) && isPanoramic(ar2)) {
style.height = panoSize * 2;
} else if (
(isPanoramic(ar1) && isPortrait(ar2)) ||
(isPortrait(ar1) && isPanoramic(ar2)) ||
(isPanoramic(ar1) && isNonConformingRatio(ar2)) ||
(isNonConformingRatio(ar1) && isPanoramic(ar2))
) {
style.height = (width * 0.6) + (width / maximumAspectRatio);
} else {
style.height = width / 2;
}
//
if (isPortrait(ar1) && isPortrait(ar2)) {
itemsDimensions = [
{ w: 50, h: '100%', r: '2px' },
{ w: 50, h: '100%', l: '2px' },
];
} else if (isPanoramic(ar1) && isPanoramic(ar2)) {
itemsDimensions = [
{ w: 100, h: panoSize_px, b: '2px' },
{ w: 100, h: panoSize_px, t: '2px' },
];
} else if (
(isPanoramic(ar1) && isPortrait(ar2)) ||
(isPanoramic(ar1) && isNonConformingRatio(ar2))
) {
itemsDimensions = [
{ w: 100, h: `${(width / maximumAspectRatio)}px`, b: '2px' },
{ w: 100, h: `${(width * 0.6)}px`, t: '2px' },
];
} else if (
(isPortrait(ar1) && isPanoramic(ar2)) ||
(isNonConformingRatio(ar1) && isPanoramic(ar2))
) {
itemsDimensions = [
{ w: 100, h: `${(width * 0.6)}px`, b: '2px' },
{ w: 100, h: `${(width / maximumAspectRatio)}px`, t: '2px' },
];
} else {
itemsDimensions = [
{ w: 50, h: '100%', r: '2px' },
{ w: 50, h: '100%', l: '2px' },
];
}
} else if (size === 3) {
if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) {
style.height = panoSize * 3;
} else if (isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3)) {
style.height = Math.floor(width / minimumAspectRatio); style.height = Math.floor(width / minimumAspectRatio);
} else { } else {
style.height = Math.floor(width / aspectRatio); style.height = width;
} }
} else if (size > 1 && width) {
const ar1 = media.getIn([0, 'meta', 'small', 'aspect']);
const ar2 = media.getIn([1, 'meta', 'small', 'aspect']);
const ar3 = media.getIn([2, 'meta', 'small', 'aspect']);
const ar4 = media.getIn([3, 'meta', 'small', 'aspect']);
if (size === 2) { //
if (isPortrait(ar1) && isPortrait(ar2)) {
style.height = width - (width / maximumAspectRatio);
} else if (isPanoramic(ar1) && isPanoramic(ar2)) {
style.height = panoSize * 2;
} else if (
(isPanoramic(ar1) && isPortrait(ar2)) ||
(isPortrait(ar1) && isPanoramic(ar2)) ||
(isPanoramic(ar1) && isNonConformingRatio(ar2)) ||
(isNonConformingRatio(ar1) && isPanoramic(ar2))
) {
style.height = (width * 0.6) + (width / maximumAspectRatio);
} else {
style.height = width / 2;
}
// if (isPanoramic(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) {
itemsDimensions = [
if (isPortrait(ar1) && isPortrait(ar2)) { { w: 100, h: '50%', b: '2px' },
itemsDimensions = [ { w: 50, h: '50%', t: '2px', r: '2px' },
{ w: 50, h: '100%', r: '2px' }, { w: 50, h: '50%', t: '2px', l: '2px' },
{ w: 50, h: '100%', l: '2px' }, ];
]; } else if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) {
} else if (isPanoramic(ar1) && isPanoramic(ar2)) { itemsDimensions = [
itemsDimensions = [ { w: 100, h: panoSize_px, b: '4px' },
{ w: 100, h: panoSize_px, b: '2px' }, { w: 100, h: panoSize_px },
{ w: 100, h: panoSize_px, t: '2px' }, { w: 100, h: panoSize_px, t: '4px' },
]; ];
} else if ( } else if (isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) {
(isPanoramic(ar1) && isPortrait(ar2)) || itemsDimensions = [
(isPanoramic(ar1) && isNonConformingRatio(ar2)) { w: 50, h: '100%', r: '2px' },
) { { w: 50, h: '50%', b: '2px', l: '2px' },
itemsDimensions = [ { w: 50, h: '50%', t: '2px', l: '2px' },
{ w: 100, h: `${(width / maximumAspectRatio)}px`, b: '2px' }, ];
{ w: 100, h: `${(width * 0.6)}px`, t: '2px' }, } else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPortrait(ar3)) {
]; itemsDimensions = [
} else if ( { w: 50, h: '50%', b: '2px', r: '2px' },
(isPortrait(ar1) && isPanoramic(ar2)) || { w: 50, h: '50%', l: '-2px', b: '-2px', pos: 'absolute', float: 'none' },
(isNonConformingRatio(ar1) && isPanoramic(ar2)) { w: 50, h: '100%', r: '-2px', t: '0px', b: '0px', pos: 'absolute', float: 'none' },
) { ];
itemsDimensions = [ } else if (
{ w: 100, h: `${(width * 0.6)}px`, b: '2px' }, (isNonConformingRatio(ar1) && isPortrait(ar2) && isNonConformingRatio(ar3)) ||
{ w: 100, h: `${(width / maximumAspectRatio)}px`, t: '2px' }, (isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3))
]; ) {
} else { itemsDimensions = [
itemsDimensions = [ { w: 50, h: '50%', b: '2px', r: '2px' },
{ w: 50, h: '100%', r: '2px' }, { w: 50, h: '100%', l: '2px', float: 'right' },
{ w: 50, h: '100%', l: '2px' }, { w: 50, h: '50%', t: '2px', r: '2px' },
]; ];
} } else if (
} else if (size === 3) { (isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3)) ||
if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) { (isPanoramic(ar1) && isPanoramic(ar2) && isPortrait(ar3))
style.height = panoSize * 3; ) {
} else if (isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3)) { itemsDimensions = [
style.height = Math.floor(width / minimumAspectRatio); { w: 50, h: panoSize_px, b: '2px', r: '2px' },
} else { { w: 50, h: panoSize_px, b: '2px', l: '2px' },
style.height = width; { w: 100, h: `${width - panoSize}px`, t: '2px' },
} ];
} else if (
// (isNonConformingRatio(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) ||
(isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3))
if (isPanoramic(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) { ) {
itemsDimensions = [ itemsDimensions = [
{ w: 100, h: '50%', b: '2px' }, { w: 100, h: `${width - panoSize}px`, b: '2px' },
{ w: 50, h: '50%', t: '2px', r: '2px' }, { w: 50, h: panoSize_px, t: '2px', r: '2px' },
{ w: 50, h: '50%', t: '2px', l: '2px' }, { w: 50, h: panoSize_px, t: '2px', l: '2px' },
]; ];
} else if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) { } else {
itemsDimensions = [ itemsDimensions = [
{ w: 100, h: panoSize_px, b: '4px' }, { w: 50, h: '50%', b: '2px', r: '2px' },
{ w: 100, h: panoSize_px }, { w: 50, h: '50%', b: '2px', l: '2px' },
{ w: 100, h: panoSize_px, t: '4px' }, { w: 100, h: '50%', t: '2px' },
]; ];
} else if (isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) { }
itemsDimensions = [ } else if (size === 4) {
{ w: 50, h: '100%', r: '2px' }, if (
{ w: 50, h: '50%', b: '2px', l: '2px' }, (isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3) && isPortrait(ar4)) ||
{ w: 50, h: '50%', t: '2px', l: '2px' }, (isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3) && isNonConformingRatio(ar4)) ||
]; (isPortrait(ar1) && isPortrait(ar2) && isNonConformingRatio(ar3) && isPortrait(ar4)) ||
} else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPortrait(ar3)) { (isPortrait(ar1) && isNonConformingRatio(ar2) && isPortrait(ar3) && isPortrait(ar4)) ||
itemsDimensions = [ (isNonConformingRatio(ar1) && isPortrait(ar2) && isPortrait(ar3) && isPortrait(ar4))
{ w: 50, h: '50%', b: '2px', r: '2px' }, ) {
{ w: 50, h: '50%', l: '-2px', b: '-2px', pos: 'absolute', float: 'none' }, style.height = Math.floor(width / minimumAspectRatio);
{ w: 50, h: '100%', r: '-2px', t: '0px', b: '0px', pos: 'absolute', float: 'none' }, } else if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3) && isPanoramic(ar4)) {
]; style.height = panoSize * 2;
} else if ( } else if (
(isNonConformingRatio(ar1) && isPortrait(ar2) && isNonConformingRatio(ar3)) || (isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) ||
(isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3)) (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPanoramic(ar3) && isPanoramic(ar4))
) { ) {
itemsDimensions = [ style.height = panoSize + (width / 2);
{ w: 50, h: '50%', b: '2px', r: '2px' }, } else {
{ w: 50, h: '100%', l: '2px', float: 'right' }, style.height = width;
{ w: 50, h: '50%', t: '2px', r: '2px' }, }
];
} else if ( //
(isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3)) ||
(isPanoramic(ar1) && isPanoramic(ar2) && isPortrait(ar3)) if (isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) {
) { itemsDimensions = [
itemsDimensions = [ { w: 50, h: panoSize_px, b: '2px', r: '2px' },
{ w: 50, h: panoSize_px, b: '2px', r: '2px' }, { w: 50, h: panoSize_px, b: '2px', l: '2px' },
{ w: 50, h: panoSize_px, b: '2px', l: '2px' }, { w: 50, h: `${(width / 2)}px`, t: '2px', r: '2px' },
{ w: 100, h: `${width - panoSize}px`, t: '2px' }, { w: 50, h: `${(width / 2)}px`, t: '2px', l: '2px' },
]; ];
} else if ( } else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPanoramic(ar3) && isPanoramic(ar4)) {
(isNonConformingRatio(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) || itemsDimensions = [
(isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) { w: 50, h: `${(width / 2)}px`, b: '2px', r: '2px' },
) { { w: 50, h: `${(width / 2)}px`, b: '2px', l: '2px' },
itemsDimensions = [ { w: 50, h: panoSize_px, t: '2px', r: '2px' },
{ w: 100, h: `${width - panoSize}px`, b: '2px' }, { w: 50, h: panoSize_px, t: '2px', l: '2px' },
{ w: 50, h: panoSize_px, t: '2px', r: '2px' }, ];
{ w: 50, h: panoSize_px, t: '2px', l: '2px' }, } else if (
]; (isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) ||
} else { (isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3) && isPanoramic(ar4))
itemsDimensions = [ ) {
{ w: 50, h: '50%', b: '2px', r: '2px' }, itemsDimensions = [
{ w: 50, h: '50%', b: '2px', l: '2px' }, { w: 67, h: '100%', r: '2px' },
{ w: 100, h: '50%', t: '2px' }, { w: 33, h: '33%', b: '4px', l: '2px' },
]; { w: 33, h: '33%', l: '2px' },
} { w: 33, h: '33%', t: '4px', l: '2px' },
} else if (size === 4) { ];
if ( } else {
(isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3) && isPortrait(ar4)) || itemsDimensions = [
(isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3) && isNonConformingRatio(ar4)) || { w: 50, h: '50%', b: '2px', r: '2px' },
(isPortrait(ar1) && isPortrait(ar2) && isNonConformingRatio(ar3) && isPortrait(ar4)) || { w: 50, h: '50%', b: '2px', l: '2px' },
(isPortrait(ar1) && isNonConformingRatio(ar2) && isPortrait(ar3) && isPortrait(ar4)) || { w: 50, h: '50%', t: '2px', r: '2px' },
(isNonConformingRatio(ar1) && isPortrait(ar2) && isPortrait(ar3) && isPortrait(ar4)) { w: 50, h: '50%', t: '2px', l: '2px' },
) { ];
style.height = Math.floor(width / minimumAspectRatio);
} else if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3) && isPanoramic(ar4)) {
style.height = panoSize * 2;
} else if (
(isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) ||
(isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPanoramic(ar3) && isPanoramic(ar4))
) {
style.height = panoSize + (width / 2);
} else {
style.height = width;
}
//
if (isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) {
itemsDimensions = [
{ w: 50, h: panoSize_px, b: '2px', r: '2px' },
{ w: 50, h: panoSize_px, b: '2px', l: '2px' },
{ w: 50, h: `${(width / 2)}px`, t: '2px', r: '2px' },
{ w: 50, h: `${(width / 2)}px`, t: '2px', l: '2px' },
];
} else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPanoramic(ar3) && isPanoramic(ar4)) {
itemsDimensions = [
{ w: 50, h: `${(width / 2)}px`, b: '2px', r: '2px' },
{ w: 50, h: `${(width / 2)}px`, b: '2px', l: '2px' },
{ w: 50, h: panoSize_px, t: '2px', r: '2px' },
{ w: 50, h: panoSize_px, t: '2px', l: '2px' },
];
} else if (
(isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) ||
(isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3) && isPanoramic(ar4))
) {
itemsDimensions = [
{ w: 67, h: '100%', r: '2px' },
{ w: 33, h: '33%', b: '4px', l: '2px' },
{ w: 33, h: '33%', l: '2px' },
{ w: 33, h: '33%', t: '4px', l: '2px' },
];
} else {
itemsDimensions = [
{ w: 50, h: '50%', b: '2px', r: '2px' },
{ w: 50, h: '50%', b: '2px', l: '2px' },
{ w: 50, h: '50%', t: '2px', r: '2px' },
{ w: 50, h: '50%', t: '2px', l: '2px' },
];
}
} }
} else {
style.height = height;
} }
return ImmutableMap({ return ImmutableMap({
style, style,
itemsDimensions, itemsDimensions,
size: size,
width,
});
}
getSizeData = size => {
const { height, defaultWidth } = this.props;
const width = this.state.width || defaultWidth;
if (width) {
if (size === 1) return this.getSizeDataSingle();
if (size > 1) return this.getSizeDataMultiple(size);
}
// Default
return ImmutableMap({
style: { height },
itemsDimensions: [],
size, size,
width, width,
}); });
@ -496,7 +523,7 @@ class MediaGallery extends React.PureComponent {
render() { render() {
const { media, intl, sensitive } = this.props; const { media, intl, sensitive } = this.props;
const { visible } = this.state; const { visible } = this.state;
const sizeData = this.getSizeData(); const sizeData = this.getSizeData(media.size);
let children, spoilerButton; let children, spoilerButton;
children = media.take(4).map((attachment, i) => ( children = media.take(4).map((attachment, i) => (