ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Story Viewer: Fix UI on mobiles (#3932)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-10-31 15:06:08 +01:00
parent d4bf696423
commit d48f9ca66a
3 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/story/StoryViewer.module.scss
View File

@ -238,9 +238,13 @@
overflow: hidden; overflow: hidden;
@media (max-width: 600px) { @media (max-width: 600px) {
width: calc(100% - 1rem) !important; // Update `MOBILE_MEDIA_OFFSET_X` in MediaAreaOverlay on change width: calc(100% - 1rem) !important;
height: calc(100% - 4.5rem) !important; // Update `MOBILE_MEDIA_OFFSET_Y` in MediaAreaOverlay on change height: auto !important;
margin: 0.5rem; margin: 0.5rem;
bottom: 3.5rem;
@supports (bottom: calc(3.5rem + env(safe-area-inset-bottom))) {
bottom: calc(3.5rem + env(safe-area-inset-bottom));
}
} }
:global(body.ghost-animating) & { :global(body.ghost-animating) & {

6
src/components/story/mediaArea/MediaArea.module.scss
View File

@ -4,8 +4,8 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: var(--media-width, auto); width: auto;
height: var(--media-height, auto); height: auto;
aspect-ratio: 9 / 16; aspect-ratio: 9 / 16;
pointer-events: none; pointer-events: none;
@ -13,6 +13,8 @@
right: auto; right: auto;
left: 50%; left: 50%;
top: 50%; top: 50%;
width: var(--media-width, 100%);
height: var(--media-height, 100%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }

12
src/components/story/mediaArea/MediaAreaOverlay.tsx
View File

@ -7,7 +7,6 @@ import { MOBILE_SCREEN_MAX_WIDTH } from '../../../config';
import { requestMutation } from '../../../lib/fasterdom/fasterdom'; import { requestMutation } from '../../../lib/fasterdom/fasterdom';
import buildClassName from '../../../util/buildClassName'; import buildClassName from '../../../util/buildClassName';
import buildStyle from '../../../util/buildStyle'; import buildStyle from '../../../util/buildStyle';
import { REM } from '../../common/helpers/mediaDimensions';
import useWindowSize from '../../../hooks/useWindowSize'; import useWindowSize from '../../../hooks/useWindowSize';
@ -22,8 +21,6 @@ type OwnProps = {
}; };
const STORY_ASPECT_RATIO = 9 / 16; const STORY_ASPECT_RATIO = 9 / 16;
const MOBILE_MEDIA_OFFSET_X = Number(REM);
const MOBILE_MEDIA_OFFSET_Y = 4.5 * REM;
const MediaAreaOverlay = ({ const MediaAreaOverlay = ({
story, isActive, className, story, isActive, className,
@ -47,13 +44,12 @@ const MediaAreaOverlay = ({
return; return;
} }
const adaptedHeight = windowSize.height - MOBILE_MEDIA_OFFSET_Y;
const adoptedWidth = windowSize.width - MOBILE_MEDIA_OFFSET_X;
const screenAspectRatio = windowSize.width / windowSize.height; const screenAspectRatio = windowSize.width / windowSize.height;
const width = screenAspectRatio < STORY_ASPECT_RATIO ? adaptedHeight * STORY_ASPECT_RATIO : adoptedWidth; const width = screenAspectRatio < STORY_ASPECT_RATIO
const height = screenAspectRatio < STORY_ASPECT_RATIO ? adaptedHeight : adoptedWidth / STORY_ASPECT_RATIO; ? element.clientHeight * STORY_ASPECT_RATIO : element.clientWidth;
const height = screenAspectRatio < STORY_ASPECT_RATIO
? element.clientHeight : element.clientWidth / STORY_ASPECT_RATIO;
requestMutation(() => { requestMutation(() => {
element.style.setProperty('--media-width', `${width}px`); element.style.setProperty('--media-width', `${width}px`);