feat(videodetail): add animation to modal and player

.prettierrc

@@ -1,5 +1,5 @@
 {
   "singleQuote": true,
   "trailingComma": "all",
-  "printWidth": 120
+  "printWidth": 140
 }

src/components/Modal/Modal.module.scss

@@ -1,6 +1,52 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
 
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeInDelayed {
+  0% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes grow {
+  0% {
+    transform: scale(0.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes shrinkFadeOut {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
 .overlay {
   position: fixed;
   width: 100vw;
@@ -10,9 +56,13 @@
   z-index: 1;
 }
 .backdrop {
+  animation: 0.3s ease-out 0s 1 fadeIn;
   width: inherit;
   height: inherit;
   background: rgba(0, 0, 0, 0.6);
+  &.closing {
+    animation: 0.2s ease-out 0s 1 fadeOut;
+  }
 }
 .modalContainer {
   position: absolute;
@@ -23,11 +73,21 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  &.closing {
+    animation: 0.2s ease-out 0s 1 shrinkFadeOut;
+  }
 }
 .modal {
   position: relative;
   width: 80vw;
+  animation: 0.5s ease-out 0s 1 fadeInDelayed;
+}
+.modalBackground {
+  position: absolute;
+  width: 80vw;
+  height: calc(80vw / 16 * 9);
   background-color: rgba(0, 0, 0, 0.9);
+  animation: 0.2s ease-out 0s 1 grow;
 }
 .close {
   position: absolute;

src/components/Modal/Modal.tsx

@@ -1,5 +1,6 @@
-import React, { ReactFragment, useEffect } from 'react';
+import React, { ReactFragment, useEffect, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
 
 import IconButton from '../IconButton/IconButton';
 import Close from '../../icons/Close';
@@ -13,24 +14,33 @@ type Props = {
 
 const Modal: React.FC<Props> = ({ onClose, children }: Props) => {
   const { t } = useTranslation('common');
+  const [closing, setClosing] = useState<boolean>(false);
+
+  const prepareClose = useCallback(() => {
+    setClosing(true);
+    setTimeout(onClose, 200);
+  }, [onClose]);
 
   useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => event.keyCode === 27 && onClose();
+    const onKeyDown = (event: KeyboardEvent) => event.keyCode === 27 && prepareClose();
 
-    document.body.style.overflow = 'hidden';
+    document.body.style.overflowY = 'hidden';
     document.addEventListener('keydown', onKeyDown);
+
+    setClosing(false);
     return () => {
-      document.body.style.overflow = 'scroll';
+      document.body.style.overflowY = '';
       document.removeEventListener('keydown', onKeyDown);
     };
-  }, [onClose]);
+  }, [prepareClose]);
 
   return (
-    <div className={styles.overlay} onClick={onClose}>
+    <div className={styles.overlay} onClick={prepareClose}>
       <div className={styles.backdrop} />
-      <div className={styles.modalContainer}>
+      <div className={classNames(styles.modalContainer, { [styles.closing]: closing })}>
+        <div className={styles.modalBackground} />
         <div className={styles.modal} onClick={(event) => event.stopPropagation()}>
-          <IconButton onClick={onClose} aria-label={t('close_modal')} className={styles.close}>
+          <IconButton onClick={prepareClose} aria-label={t('close_modal')} className={styles.close}>
             <Close />
           </IconButton>
           {children}

src/components/Modal/__snapshots__/Modal.test.tsx.snap

@@ -11,6 +11,9 @@ exports[`<Modal> renders and matches snapshot 1`] = `
     <div
       class="modalContainer"
     >
+      <div
+        class="modalBackground"
+      />
       <div
         class="modal"
       >

src/components/Video/Video.module.scss

@@ -2,6 +2,15 @@
 @use '../../styles/theme';
 @use '../../styles/mixins/responsive';
 
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .video {
   color: var(--primary-color);
   font-family: var(--body-font-family);
@@ -168,6 +177,7 @@
   left: 0;
   overflow: hidden;
   background-color: black;
+  animation: 0.5s ease-out 0s 1 fadeIn;
 }
 .player {
   position: absolute;

src/components/Video/Video.tsx

@@ -156,10 +156,7 @@ const Video: React.FC<Props> = ({
             )}
           </div>
         </div>
-        <div
-          className={classNames(styles.poster, styles[poster])}
-          style={{ backgroundImage: `url('${posterImage}')` }}
-        />
+        <div className={classNames(styles.poster, styles[poster])} style={{ backgroundImage: `url('${posterImage}')` }} />
       </div>
       {!!children && <div className={classNames(styles.related, styles.mainPadding)}>{children}</div>}
       {play && (
@@ -185,9 +182,7 @@ const Video: React.FC<Props> = ({
         <Modal onClose={onTrailerClose}>
           <div onMouseMove={mouseActivity} onClick={mouseActivity}>
             <Cinema item={trailerItem} onComplete={onTrailerClose} isTrailer />
-            <div
-              className={classNames(styles.trailerMeta, styles.title, { [styles.hidden]: !mouseActive })}
-            >{`${title} - Trailer`}</div>
+            <div className={classNames(styles.trailerMeta, styles.title, { [styles.hidden]: !mouseActive })}>{`${title} - Trailer`}</div>
           </div>
         </Modal>
       )}