From 113cceab4bd49ed84669820b939a646ff6a347d5 Mon Sep 17 00:00:00 2001
From: v-almonacid <ealmonacid@gmail.com>
Date: Thu, 8 Feb 2024 11:13:31 -0300
Subject: [PATCH] handle tags and no results

---
 .../src/components/media/MediaModule.tsx      | 56 ++++++++++++-------
 .../src/containers/media/MediaContainer.tsx   |  4 +-
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/packages/frontend/src/components/media/MediaModule.tsx b/packages/frontend/src/components/media/MediaModule.tsx
index 5a1c940b..c8e9fa0b 100644
--- a/packages/frontend/src/components/media/MediaModule.tsx
+++ b/packages/frontend/src/components/media/MediaModule.tsx
@@ -1,5 +1,6 @@
 import { FC, memo, useEffect, useRef } from "react";
-import { ModuleLoader } from "@alphaday/ui-kit";
+import { CenteredBlock, ModuleLoader } from "@alphaday/ui-kit";
+import globalMessages from "src/globalMessages";
 
 interface IMedia {
     title: string;
@@ -28,26 +29,39 @@ const MediaModule: FC<IMedia> = memo(function MediaModule({
         return () => clearTimeout(timeout);
     }, []);
 
-    return isLoading ? (
-        <ModuleLoader $height="300px" />
-    ) : (
-        <iframe
-            src={entryUrl}
-            title={title}
-            allow="autoplay; encrypted-media"
-            className="w-full border-none"
-            style={{
-                height: "410px",
-                visibility: "hidden",
-            }}
-            allowFullScreen
-            ref={frameRef}
-            onLoad={() => {
-                if (frameRef.current) {
-                    frameRef.current.style.visibility = "visible";
-                }
-            }}
-        />
+    if (isLoading) {
+        return <ModuleLoader $height="410px" />;
+    }
+
+    if (entryUrl) {
+        return (
+            <iframe
+                src={entryUrl}
+                title={title}
+                allow="autoplay; encrypted-media"
+                className="w-full border-none"
+                style={{
+                    height: "410px",
+                    visibility: "hidden",
+                }}
+                allowFullScreen
+                ref={frameRef}
+                onLoad={() => {
+                    if (frameRef.current) {
+                        frameRef.current.style.visibility = "visible";
+                    }
+                }}
+            />
+        );
+    }
+    return (
+        <div style={{ height: "410px" }}>
+            <CenteredBlock>
+                <p className="text-primary fontGroup-highlightSemi">
+                    {globalMessages.queries.noMatchFound("video")}
+                </p>
+            </CenteredBlock>
+        </div>
     );
 });
 
diff --git a/packages/frontend/src/containers/media/MediaContainer.tsx b/packages/frontend/src/containers/media/MediaContainer.tsx
index 3a2e4c77..9080d951 100644
--- a/packages/frontend/src/containers/media/MediaContainer.tsx
+++ b/packages/frontend/src/containers/media/MediaContainer.tsx
@@ -17,7 +17,7 @@ const MediaContainer: FC<IModuleContainer<TSourceData[]>> = ({
             EWidgetSettingsRegistry.IncludedTags
     )?.tags;
 
-    const { currentData: latestVideo } = useGetLatestVideoQuery(
+    const { currentData: latestVideo, isFetching } = useGetLatestVideoQuery(
         {
             tags: tags ? filteringListToStr(tags) : undefined,
         },
@@ -64,7 +64,7 @@ const MediaContainer: FC<IModuleContainer<TSourceData[]>> = ({
 
     return (
         <MediaModule
-            isLoading={!moduleData}
+            isLoading={!moduleData || isFetching}
             entryUrl={entryUrl || ""}
             title={moduleData.widget.name}
         />