Stories: Various fixes (#3915)

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%;

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(

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(

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,
   };
 }
 

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,

src/global/reducers/stories.ts

@@ -318,7 +318,7 @@ export function updateSentStoryReaction<T extends GlobalState>(
   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;