From 133d883102ea12007c943635ebf9fc488c6457e5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 26 Feb 2024 09:41:31 -0600
Subject: [PATCH] fading effects

---
 web/src/components/player/PreviewThumbnailPlayer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 7227d5e47..32bd491dc 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -113,7 +113,7 @@ export default function PreviewThumbnailPlayer({
           onClick={onClick}
         >
           {playingBack && (
-            <div className="absolute left-0 top-0 right-0 bottom-0">
+            <div className="absolute left-0 top-0 right-0 bottom-0 animate-in fade-in">
               <PreviewContent
                 review={review}
                 relevantPreview={relevantPreview}
@@ -124,7 +124,7 @@ export default function PreviewThumbnailPlayer({
           )}
           <LazyLoadImage
             className={`w-full h-full transition-opacity ${
-              playingBack && imgLoaded ? "opacity-0" : "opacity-100"
+              playingBack ? "opacity-0" : "opacity-100"
             }`}
             src={`${apiHost}${review.thumb_path.replace(
               "/media/frigate/",
@@ -138,7 +138,7 @@ export default function PreviewThumbnailPlayer({
 
           {!playingBack && imgLoaded && (
             <>
-              <div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none">
+              <div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none animate-in fade-in">
                 <div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
                   {(review.severity == "alert" ||
                     review.severity == "detection") && (
@@ -156,7 +156,7 @@ export default function PreviewThumbnailPlayer({
                   )}
                 </div>
               </div>
-              <div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none">
+              <div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none animate-in fade-in">
                 <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
                   <TimeAgo time={review.start_time * 1000} dense />
                   {formattedDate}