diff --git a/src/components/common/reactions/ReactionAnimatedEmoji.module.scss b/src/components/common/reactions/ReactionAnimatedEmoji.module.scss index 337e49f71..4ff5c47c7 100644 --- a/src/components/common/reactions/ReactionAnimatedEmoji.module.scss +++ b/src/components/common/reactions/ReactionAnimatedEmoji.module.scss @@ -12,12 +12,6 @@ z-index: 1; } -.effect { - position: fixed; - top: -2.25rem; - left: -2.25rem; -} - .animated-icon, .effect { pointer-events: none; @@ -37,7 +31,7 @@ contain: layout; } -.withEffectOnly, .animated-icon { +.withEffectOnly, .animated-icon, .effect { position: absolute; top: 50%; left: 50%; diff --git a/src/components/story/MediaStory.tsx b/src/components/story/MediaStory.tsx index 1edd8a1d7..2def2b368 100644 --- a/src/components/story/MediaStory.tsx +++ b/src/components/story/MediaStory.tsx @@ -47,6 +47,7 @@ function MediaStory({ story, isProtected, isArchive }: OwnProps) { const peerId = story && story.peerId; const isFullyLoaded = story && 'content' in story; + const isOwn = isFullyLoaded && story.isOut; const isDeleted = story && 'isDeleted' in story; const video = isFullyLoaded ? (story as ApiStory).content.video : undefined; const imageHash = isFullyLoaded ? getStoryMediaHash(story as ApiStory) : undefined; @@ -63,7 +64,7 @@ function MediaStory({ story, isProtected, isArchive }: OwnProps) { isContextMenuOpen, contextMenuPosition, handleBeforeContextMenu, handleContextMenu, handleContextMenuClose, handleContextMenuHide, - } = useContextMenuHandlers(containerRef); + } = useContextMenuHandlers(containerRef, !isOwn); const { positionX, positionY, transformOriginX, transformOriginY, style: menuStyle, } = useMenuPosition( diff --git a/src/components/story/StorySlides.tsx b/src/components/story/StorySlides.tsx index 1262dc160..b729b68c5 100644 --- a/src/components/story/StorySlides.tsx +++ b/src/components/story/StorySlides.tsx @@ -47,9 +47,6 @@ interface StateProps { const ANIMATION_DURATION_MS = 350 + (IS_SAFARI || IS_FIREFOX ? ANIMATION_END_DELAY : 20); const ACTIVE_SLIDE_VERTICAL_CORRECTION_REM = 1.75; -const FROM_ACTIVE_SCALE_VALUE = 0.333; -const ANIMATION_TO_ACTIVE_SCALE = '3'; -const ANIMATION_FROM_ACTIVE_SCALE = `${FROM_ACTIVE_SCALE_VALUE}`; function StorySlides({ peerIds, @@ -228,13 +225,12 @@ function StorySlides({ return; } - const scale = currentPeerId === peerId - ? ANIMATION_TO_ACTIVE_SCALE - : peerId === renderingPeerId ? ANIMATION_FROM_ACTIVE_SCALE : '1'; + const scale = String(currentPeerId === peerId ? slideSizes.toActiveScale + : peerId === renderingPeerId ? slideSizes.fromActiveScale : 1); let offsetY = 0; if (peerId === renderingPeerId) { - offsetY = -ACTIVE_SLIDE_VERTICAL_CORRECTION_REM * FROM_ACTIVE_SCALE_VALUE; + offsetY = -ACTIVE_SLIDE_VERTICAL_CORRECTION_REM * slideSizes.fromActiveScale; current.classList.add(styles.slideAnimationFromActive); } if (peerId === currentPeerId) { @@ -247,7 +243,7 @@ function StorySlides({ current.style.setProperty('--slide-translate-y', `${offsetY}rem`); current.style.setProperty('--slide-translate-scale', scale); }); - }, [currentPeerId, getIsAnimating, renderingPeerId]); + }, [currentPeerId, getIsAnimating, renderingPeerId, slideSizes]); function renderStoryPreview(peerId: string, index: number, position: number) { const style = buildStyle( diff --git a/src/components/story/helpers/dimensions.ts b/src/components/story/helpers/dimensions.ts index b06c7da25..3aa34e955 100644 --- a/src/components/story/helpers/dimensions.ts +++ b/src/components/story/helpers/dimensions.ts @@ -14,20 +14,26 @@ export function calculateSlideSizes(windowWidth: number, windowHeight: number): activeSlide: IDimensions; slide: IDimensions; scale: number; + toActiveScale: number; + fromActiveScale: number; } { const scale = calculateScale(BASE_SCREEN_WIDTH, BASE_SCREEN_HEIGHT, windowWidth, windowHeight); + const activeSlideWidth = roundToNearestEven(BASE_ACTIVE_SLIDE_WIDTH * scale); + const slideWidth = roundToNearestEven(BASE_SLIDE_WIDTH * scale); // Avoid fractional values to prevent blurry text return { activeSlide: { - width: roundToNearestEven(BASE_ACTIVE_SLIDE_WIDTH * scale), + width: activeSlideWidth, height: roundToNearestEven(BASE_ACTIVE_SLIDE_HEIGHT * scale), }, slide: { - width: roundToNearestEven(BASE_SLIDE_WIDTH * scale), + width: slideWidth, height: roundToNearestEven(BASE_SLIDE_HEIGHT * scale), }, scale, + toActiveScale: activeSlideWidth / slideWidth, + fromActiveScale: slideWidth / activeSlideWidth, }; } diff --git a/src/components/story/mediaArea/MediaAreaSuggestedReaction.tsx b/src/components/story/mediaArea/MediaAreaSuggestedReaction.tsx index c5dae8b0b..c926771b7 100644 --- a/src/components/story/mediaArea/MediaAreaSuggestedReaction.tsx +++ b/src/components/story/mediaArea/MediaAreaSuggestedReaction.tsx @@ -28,7 +28,7 @@ type OwnProps = { }; const REACTION_SIZE_MULTIPLIER = 0.6; -const EFFECT_SIZE_MULTIPLIER = 2; +const EFFECT_SIZE_MULTIPLIER = 4; const MediaAreaSuggestedReaction = ({ story, diff --git a/src/global/reducers/stories.ts b/src/global/reducers/stories.ts index b007b0dac..07009046e 100644 --- a/src/global/reducers/stories.ts +++ b/src/global/reducers/stories.ts @@ -318,7 +318,7 @@ export function updateSentStoryReaction( if (!story || !('content' in story)) return global; const reactionsCount = story.reactionsCount || 0; - const hasReaction = story.reactions?.some((r) => r.chosenOrder); + const hasReaction = story.reactions?.some((r) => r.chosenOrder !== undefined); const reactions = updateReactionCount(story.reactions || [], [reaction].filter(Boolean)); const countDiff = !reaction ? -1 : hasReaction ? 0 : 1;