imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make video sizing consistent with images (#8102)

Browse source 
* Make video sizing consistent with images

* Test suggestedSize

* Constrain width of media in large mode
This commit is contained in:
Robin 2022-03-22 18:16:03 -04:00 • committed by GitHub
parent bff1ef31d6
commit 953e3148d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 90 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/settings/enums/ImageSize.ts
View file

@ -15,24 +15,46 @@ limitations under the License.
*/
// For Large the image gets drawn as big as possible.
// constraint by: timeline width, manual heigh overrides, SIZE_LARGE.h
// constraint by: timeline width, manual height overrides, SIZE_LARGE.h
const SIZE_LARGE = { w: 800, h: 600 };
// For Normal the image gets drawn to never exceed SIZE_NORMAL.w, SIZE_NORMAL.h
// constraint by: timeline width, manual heigh overrides
// constraint by: timeline width, manual height overrides
const SIZE_NORMAL_LANDSCAPE = { w: 324, h: 324 }; // for w > h
const SIZE_NORMAL_PORTRAIT = { w: 324 * (9/16), h: 324 }; // for h > w
type Dimensions = { w: number, h: number };
export enum ImageSize {
Normal = "normal",
Large = "large",
}
export function suggestedSize(size: ImageSize, portrait = false): { w: number, h: number} {
switch (size) {
case ImageSize.Large:
return SIZE_LARGE;
case ImageSize.Normal:
default:
return portrait ? SIZE_NORMAL_PORTRAIT : SIZE_NORMAL_LANDSCAPE;
/**
* @param {ImageSize} size The user's image size preference
* @param {Dimensions} contentSize The natural dimensions of the content
* @param {number} maxHeight Overrides the default height limit
* @returns {Dimensions} The suggested maximum dimensions for the image
*/
export function suggestedSize(size: ImageSize, contentSize: Dimensions, maxHeight?: number): Dimensions {
const aspectRatio = contentSize.w / contentSize.h;
const portrait = aspectRatio < 1;
const maxSize = (size === ImageSize.Large) ? SIZE_LARGE :
portrait ? SIZE_NORMAL_PORTRAIT : SIZE_NORMAL_LANDSCAPE;
if (!contentSize.w || !contentSize.h) {
return maxSize;
}
const constrainedSize = {
w: Math.min(maxSize.w, contentSize.w),
h: maxHeight ? Math.min(maxSize.h, contentSize.h, maxHeight) : Math.min(maxSize.h, contentSize.h),
};
if (constrainedSize.h * aspectRatio < constrainedSize.w) {
// Height dictates width
return { w: constrainedSize.h * aspectRatio, h: constrainedSize.h };
} else {
// Width dictates height
return { w: constrainedSize.w, h: constrainedSize.w / aspectRatio };
}
}