Page MenuHomePhabricator
Files F3754464

D9497.id32109.diff
No OneTemporary
Actions

D9497.id32109.diff
View Options

diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -130,8 +130,8 @@
const multimediaModal = React.useMemo(
() => (
<FullScreenViewModal
- contentDimensions={dimensions}
- setContentDimensions={setDimensions}
+ dynamicContentDimensions={dimensions}
+ setDynamicContentDimensions={setDimensions}
>
{mediaModalItem}
</FullScreenViewModal>
diff --git a/web/modals/full-screen-view-modal.react.js b/web/modals/full-screen-view-modal.react.js
--- a/web/modals/full-screen-view-modal.react.js
+++ b/web/modals/full-screen-view-modal.react.js
@@ -12,8 +12,8 @@
type BaseProps = {
+children: React.Node,
- +contentDimensions: ?Dimensions,
- +setContentDimensions: SetState<?Dimensions>,
+ +dynamicContentDimensions?: ?Dimensions,
+ +setDynamicContentDimensions?: SetState<?Dimensions>,
};
type Props = {
@@ -27,12 +27,15 @@
componentDidMount() {
invariant(this.overlay, 'overlay ref unset');
this.overlay.focus();
- this.calculateMediaDimensions();
- window.addEventListener('resize', this.calculateMediaDimensions);
+ this.calculateDynamicContentDimensions();
+ window.addEventListener('resize', this.calculateDynamicContentDimensions);
}
componentWillUnmount() {
- window.removeEventListener('resize', this.calculateMediaDimensions);
+ window.removeEventListener(
+ 'resize',
+ this.calculateDynamicContentDimensions,
+ );
}
render(): React.Node {
@@ -75,27 +78,36 @@
}
};
- calculateMediaDimensions: () => void = () => {
- if (!this.overlay || !this.props.contentDimensions) {
+ calculateDynamicContentDimensions: () => mixed = () => {
+ const { dynamicContentDimensions, setDynamicContentDimensions } =
+ this.props;
+
+ if (
+ !this.overlay ||
+ !dynamicContentDimensions ||
+ !setDynamicContentDimensions
+ ) {
return;
}
+
const containerWidth = this.overlay.clientWidth;
const containerHeight = this.overlay.clientHeight;
const containerAspectRatio = containerWidth / containerHeight;
- const { width: mediaWidth, height: mediaHeight } =
- this.props.contentDimensions;
- const mediaAspectRatio = mediaWidth / mediaHeight;
+ const { width: contentWidth, height: contentHeight } =
+ dynamicContentDimensions;
+ const contentAspectRatio = contentWidth / contentHeight;
let newWidth, newHeight;
- if (containerAspectRatio > mediaAspectRatio) {
- newWidth = Math.min(mediaWidth, containerHeight * mediaAspectRatio);
- newHeight = newWidth / mediaAspectRatio;
+ if (containerAspectRatio > contentAspectRatio) {
+ newWidth = Math.min(contentWidth, containerHeight * contentAspectRatio);
+ newHeight = newWidth / contentAspectRatio;
} else {
- newHeight = Math.min(mediaHeight, containerWidth / mediaAspectRatio);
- newWidth = newHeight * mediaAspectRatio;
+ newHeight = Math.min(contentHeight, containerWidth / contentAspectRatio);
+ newWidth = newHeight * contentAspectRatio;
}
- this.props.setContentDimensions({
+
+ setDynamicContentDimensions({
width: newWidth,
height: newHeight,
});

File Metadata

Mime Type
text/plain
Expires
Sat, Jan 11, 3:04 AM (20 h, 23 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2856157
Default Alt Text
D9497.id32109.diff (3 KB)

Event Timeline