From 88ff94c2bb7ca38c46f735678b9c1f7d40053b72 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 16 Jan 2024 21:32:59 +0100
Subject: [PATCH] StorySlides: Fix active story transition on desktop (#4188)

---
 src/components/story/Story.tsx               | 19 ++++++++++++++++++-
 src/components/story/StoryPreview.tsx        |  5 +----
 src/components/story/StorySlides.tsx         |  1 +
 src/components/story/StoryViewer.module.scss | 12 +++++++++++-
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/story/Story.tsx b/src/components/story/Story.tsx
index 22e7bcfa9..0f57afe84 100644
--- a/src/components/story/Story.tsx
+++ b/src/components/story/Story.tsx
@@ -801,6 +801,18 @@ function Story({
         {isLoadedStory && fullMediaData && (
           <MediaAreaOverlay story={story} isActive />
         )}
+        {!isMobile && (
+          <div className={styles.content}>
+            <div className={styles.contentInner}>
+              <Avatar
+                peer={peer}
+                withStory
+                storyViewerMode="disabled"
+              />
+              <div className={styles.name}>{renderText(getSenderTitle(lang, peer) || '')}</div>
+            </div>
+          </div>
+        )}
       </div>
 
       {shouldShowFooter && (
@@ -850,7 +862,12 @@ function Story({
 }
 
 export default memo(withGlobal<OwnProps>((global, {
-  peerId, storyId, isPrivateStories, isArchivedStories, isReportModalOpen, isDeleteModalOpen,
+  peerId,
+  storyId,
+  isPrivateStories,
+  isArchivedStories,
+  isReportModalOpen,
+  isDeleteModalOpen,
 }): StateProps => {
   const { appConfig } = global;
   const user = selectUser(global, peerId);
diff --git a/src/components/story/StoryPreview.tsx b/src/components/story/StoryPreview.tsx
index 7389fc7cf..bca2a3135 100644
--- a/src/components/story/StoryPreview.tsx
+++ b/src/components/story/StoryPreview.tsx
@@ -8,12 +8,10 @@ import type { StoryViewerOrigin } from '../../types';
 
 import { getSenderTitle, getStoryMediaHash } from '../../global/helpers';
 import { selectTabState } from '../../global/selectors';
-import buildClassName from '../../util/buildClassName';
 import renderText from '../common/helpers/renderText';
 
 import useLang from '../../hooks/useLang';
 import useMedia from '../../hooks/useMedia';
-import useShowTransition from '../../hooks/useShowTransition';
 
 import Avatar from '../common/Avatar';
 import MediaAreaOverlay from './mediaArea/MediaAreaOverlay';
@@ -35,7 +33,6 @@ function StoryPreview({
 }: OwnProps & StateProps) {
   const { openStoryViewer, loadPeerSkippedStories } = getActions();
   const lang = useLang();
-  const { transitionClassNames: appearanceAnimationClassNames } = useShowTransition(true);
 
   const story = useMemo<ApiTypeStory | undefined>(() => {
     if (!peerStories) {
@@ -79,7 +76,7 @@ function StoryPreview({
       )}
       {isLoaded && <MediaAreaOverlay story={story} />}
 
-      <div className={buildClassName(styles.content, appearanceAnimationClassNames)}>
+      <div className={styles.content}>
         <div className={styles.contentInner}>
           <Avatar
             peer={peer}
diff --git a/src/components/story/StorySlides.tsx b/src/components/story/StorySlides.tsx
index cb6c3ddc0..5f44076b0 100644
--- a/src/components/story/StorySlides.tsx
+++ b/src/components/story/StorySlides.tsx
@@ -341,6 +341,7 @@ function StorySlides({
         current.style.setProperty('--slide-translate-x', '0px');
         current.style.setProperty('--slide-translate-y', '0px');
         current.style.setProperty('--slide-translate-scale', '1');
+        current.style.setProperty('--slide-content-scale', String(slideSizes.toActiveScale));
 
         return;
       }
diff --git a/src/components/story/StoryViewer.module.scss b/src/components/story/StoryViewer.module.scss
index 5a637726f..1e3830b2b 100644
--- a/src/components/story/StoryViewer.module.scss
+++ b/src/components/story/StoryViewer.module.scss
@@ -127,6 +127,11 @@
   .mediaPreview {
     opacity: 1;
   }
+
+  .content {
+    opacity: 1 !important;
+    visibility: visible;
+  }
 }
 
 .slide {
@@ -194,6 +199,11 @@
     opacity: 0;
     z-index: 3;
   }
+
+  .content {
+    transform: scale(var(--slide-content-scale, 1));
+    opacity: 0;
+  }
 }
 
 .slideInner {
@@ -260,6 +270,7 @@
   right: 0;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
+  transition: opacity 250ms ease-in-out;
   z-index: 1;
 }
 
@@ -274,7 +285,6 @@
   flex-direction: column;
   align-items: center;
   max-width: 90%;
-  transition: opacity 300ms;
 }
 
 .name {