[_]: feature/Added animation when open/close chat

Gemfile.lock

@@ -104,7 +104,7 @@ GEM
     ethon (0.16.0)
       ffi (>= 1.15.0)
     excon (0.112.0)
-    faraday (1.10.4)
+    faraday (1.10.5)
       faraday-em_http (~> 1.0)
       faraday-em_synchrony (~> 1.0)
       faraday-excon (~> 1.1)
@@ -120,10 +120,10 @@ GEM
       faraday (>= 0.8.0)
       http-cookie (~> 1.0.0)
     faraday-em_http (1.0.0)
-    faraday-em_synchrony (1.0.0)
+    faraday-em_synchrony (1.0.1)
     faraday-excon (1.1.0)
     faraday-httpclient (1.0.1)
-    faraday-multipart (1.1.0)
+    faraday-multipart (1.2.0)
       multipart-post (~> 2.0)
     faraday-net_http (1.0.2)
     faraday-net_http_persistent (1.2.0)

package.json

@@ -203,7 +203,7 @@
         "@wdio/junit-reporter": "^9.21.0",
         "@wdio/local-runner": "^9.23.0",
         "@wdio/mocha-framework": "^9.23.0",
-        "ajv": "^8.17.1",
+        "ajv": "^8.18.0",
         "autoprefixer": "^10.4.20",
         "babel-loader": "9.1.0",
         "babel-plugin-optional-require": "0.3.1",

react/features/chat/components/web/Chat.tsx

@@ -124,6 +124,8 @@ const useStyles = makeStyles<{ _isResizing: boolean; width: number; }>()((theme,
             alignSelf: "center",
             borderColor: "#474747",
             borderWidth: "1px",
+            animation: "chatSlideIn 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards",
+            transformOrigin: "right center",
             "&:hover, &:focus-within": {
                 "& .dragHandleContainer": {
                     visibility: "visible",
@@ -140,12 +142,65 @@ const useStyles = makeStyles<{ _isResizing: boolean; width: number; }>()((theme,
                 width: "auto",
                 borderRadius: 0,
                 margin: 0,
+                animation: "chatSlideInMobile 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) forwards",
             },
 
             "*": {
                 userSelect: "text",
                 "-webkit-user-select": "text",
             },
+
+            "@keyframes chatSlideIn": {
+                "0%": {
+                    opacity: 0,
+                    transform: "translateX(100%) scale(0.95)",
+                },
+                "100%": {
+                    opacity: 1,
+                    transform: "translateX(0) scale(1)",
+                },
+            },
+
+            "@keyframes chatSlideInMobile": {
+                "0%": {
+                    opacity: 0,
+                    transform: "translateY(100%)",
+                },
+                "100%": {
+                    opacity: 1,
+                    transform: "translateY(0)",
+                },
+            },
+
+            "@keyframes chatSlideOut": {
+                "0%": {
+                    opacity: 1,
+                    transform: "translateX(0) scale(1)",
+                },
+                "100%": {
+                    opacity: 0,
+                    transform: "translateX(100%) scale(0.95)",
+                },
+            },
+
+            "@keyframes chatSlideOutMobile": {
+                "0%": {
+                    opacity: 1,
+                    transform: "translateY(0)",
+                },
+                "100%": {
+                    opacity: 0,
+                    transform: "translateY(100%)",
+                },
+            },
+        },
+
+        containerClosing: {
+            animation: "chatSlideOut 0.25s cubic-bezier(0.4, 0.0, 0.6, 1) forwards",
+
+            "@media (max-width: 580px)": {
+                animation: "chatSlideOutMobile 0.25s cubic-bezier(0.4, 0.0, 0.6, 1) forwards",
+            },
         },
 
         chatHeader: {
@@ -276,6 +331,8 @@ const Chat = ({
     const [ mousePosition, setMousePosition ] = useState<number | null>(null);
     const [ dragChatWidth, setDragChatWidth ] = useState<number | null>(null);
     const [showBanner, setShowBanner] = useState(true);
+    const [isClosing, setIsClosing] = useState(false);
+    const [shouldRender, setShouldRender] = useState(_isOpen);
     const maxChatWidth = useSelector(getChatMaxSize);
     const notifyTimestamp = useSelector((state: IReduxState) =>
         state['features/chat'].notifyPrivateRecipientsChangedTimestamp
@@ -287,6 +344,21 @@ const Chat = ({
     const participants = useSelector(getRemoteParticipants);
     const isPrivateChatAllowed = useSelector((state: IReduxState) => isPrivateChatEnabledSelf(state));
 
+    useEffect(() => {
+        if (_isOpen) {
+            setShouldRender(true);
+            setIsClosing(false);
+        } else if (shouldRender) {
+            setIsClosing(true);
+            const timer = setTimeout(() => {
+                setShouldRender(false);
+                setIsClosing(false);
+            }, 250);
+
+            return () => clearTimeout(timer);
+        }
+    }, [_isOpen]);
+
     const options = useMemo(() => {
         const o = Array.from(participants?.values() || [])
                 .filter(p => !p.fakeParticipant)
@@ -646,8 +718,8 @@ function renderChat() {
     }
 
     return (
-        _isOpen ? <div
-            className = { classes.container }
+        shouldRender ? <div
+            className = { cx(classes.container, isClosing && classes.containerClosing) }
             id = 'sideToolbarContainer'
             onKeyDown = { onEscClick } >
             <ChatHeader

react/features/chat/components/web/MessageContainer.tsx

@@ -150,7 +150,11 @@ class MessageContainer extends Component<IProps, IState> {
      */
     override componentDidMount() {
         if (this.props.messages.length > 0) {
-            this.scrollToElement(false, null);
+            const container = this._messageListRef.current;
+
+            if (container) {
+                container.scrollTop = container.scrollHeight;
+            }
             this._createBottomListObserver();
         }
     }

yarn.lock

@@ -5894,10 +5894,10 @@ ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.17.1, ajv@^8.9.0:
-  version "8.17.1"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
-  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+ajv@^8.0.0, ajv@^8.18.0, ajv@^8.9.0:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.18.0.tgz#8864186b6738d003eb3a933172bb3833e10cefbc"
+  integrity sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==
   dependencies:
     fast-deep-equal "^3.1.3"
     fast-uri "^3.0.1"
@@ -13163,9 +13163,9 @@ punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 qs@^6.9.4, qs@~6.14.0:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.14.1.tgz#a41d85b9d3902f31d27861790506294881871159"
-  integrity sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==
+  version "6.14.2"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.14.2.tgz#b5634cf9d9ad9898e31fba3504e866e8efb6798c"
+  integrity sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==
   dependencies:
     side-channel "^1.1.0"