From 2364de569623d71c5752152e8a2ed752ebac9a51 Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 14 Dec 2021 17:22:30 +0100
Subject: [PATCH] Added animation to control behavior for video cards

Refs https://github.com/TryGhost/Team/issues/1229
---
 core/frontend/src/cards/css/video.css | 20 +++++++++++++++-----
 core/frontend/src/cards/js/video.js   | 16 ++++++++--------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/core/frontend/src/cards/css/video.css b/core/frontend/src/cards/css/video.css
index 918147aa3d..aee8cdcf16 100644
--- a/core/frontend/src/cards/css/video.css
+++ b/core/frontend/src/cards/css/video.css
@@ -1,8 +1,3 @@
-.kg-video-card video {
-    display: block;
-    max-width: 100%;
-    height: auto;
-}
 
 .kg-video-card {
     position: relative;
@@ -11,6 +6,12 @@
     --buffered-width: 0%;
 }
 
+.kg-video-card video {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
 .kg-video-container {
     position: relative;
 }
@@ -26,6 +27,7 @@
     align-items: center;
     background-image: linear-gradient(180deg,rgba(0,0,0,0.3) 0,transparent 70%,transparent 100%);
     z-index: 999;
+    transition: opacity .2s ease-in-out;
 }
 
 .kg-video-large-play-icon {
@@ -37,6 +39,7 @@
     padding: 0;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 50%;
+    transition: opacity .2s ease-in-out;
 }
 
 .kg-video-large-play-icon svg {
@@ -53,6 +56,8 @@
     height: 80px;
     background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
     z-index: 999;
+    transition: opacity .2s ease-in-out;
+
 }
 
 .kg-video-player {
@@ -101,6 +106,11 @@
     display: none !important;
 }
 
+.kg-video-hide-animated {
+    opacity: 0 !important;
+    transition: opacity .2s ease-in-out;
+}
+
 .kg-video-play-icon svg,
 .kg-video-pause-icon svg {
     width: 14px;
diff --git a/core/frontend/src/cards/js/video.js b/core/frontend/src/cards/js/video.js
index 070614f02b..79052a2a01 100644
--- a/core/frontend/src/cards/js/video.js
+++ b/core/frontend/src/cards/js/video.js
@@ -103,13 +103,13 @@
         }
 
         videoElementContainer.onmouseover = () => {
-            videoPlayerContainer.classList.remove("kg-video-hide");
+            videoPlayerContainer.classList.remove("kg-video-hide-animated");
         }
 
         videoElementContainer.onmouseleave = () => {
             const isPlaying = !!(videoEl.currentTime > 0 && !videoEl.paused && !videoEl.ended && videoEl.readyState > 2);
             if (isPlaying) {
-                videoPlayerContainer.classList.add("kg-video-hide");
+                videoPlayerContainer.classList.add("kg-video-hide-animated");
             }
         }
 
@@ -121,15 +121,15 @@
         });
 
         videoEl.onplay = () => {
-            largePlayIcon.classList.add("kg-video-hide");
-            videoOverlay.classList.add("kg-video-hide");
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
             playIconContainer.classList.add("kg-video-hide");
             pauseIconContainer.classList.remove("kg-video-hide");
         };
 
         const handleOnPlay = () => {
-            largePlayIcon.classList.add("kg-video-hide");
-            videoOverlay.classList.add("kg-video-hide");
+            largePlayIcon.classList.add("kg-video-hide-animated");
+            videoOverlay.classList.add("kg-video-hide-animated");
             playIconContainer.classList.add("kg-video-hide");
             pauseIconContainer.classList.remove("kg-video-hide");
             videoEl.play();
@@ -137,8 +137,8 @@
         }
 
         const handleOnPause = () => {
-            largePlayIcon.classList.remove("kg-video-hide");
-            videoOverlay.classList.remove("kg-video-hide");
+            largePlayIcon.classList.remove("kg-video-hide-animated");
+            videoOverlay.classList.remove("kg-video-hide-animated");
             pauseIconContainer.classList.add("kg-video-hide");
             playIconContainer.classList.remove("kg-video-hide");
             videoEl.pause();