From 1724d047c32c637524172c6888200361405ed6cb Mon Sep 17 00:00:00 2001
From: Samson Akol <akolson2010@gmail.com>
Date: Tue, 2 Sep 2025 16:01:11 +0300
Subject: [PATCH] Fixes the KLogo display in preview window

---
 .../views/files/ContentRenderer.vue           | 250 ++++++++++--------
 1 file changed, 138 insertions(+), 112 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
index d31b9cdaa3..403736e745 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/files/ContentRenderer.vue
@@ -4,131 +4,142 @@
     :key="fileId"
     :class="{ fullscreen }"
   >
-    <KLogo
-      v-if="loading"
-      altText=""
-      :animate="true"
-      :size="300"
-    />
-    <VCard
-      v-if="!file"
-      flat
-      class="message-card"
-    >
-      <VLayout
-        align-center
-        justify-center
-        fill-height
-      >
-        {{ $tr('noFileText') }}
-      </VLayout>
-    </VCard>
-    <VCard
-      v-else-if="file.uploading || file.error"
-      flat
-      class="message-card"
+    <div
+      class="renderer"
+      :aria-busy="loading"
     >
-      <VLayout
-        align-center
-        justify-center
-        fill-height
-        data-test="progress"
+      <div
+        v-show="loading"
+        class="overlay"
+        :style="{ background: $themePalette.white }"
       >
-        <FileStatus
-          :fileId="file.id"
-          large
+        <KLogo
+          altText=""
+          :animate="true"
+          :size="300"
         />
-      </VLayout>
-    </VCard>
-    <VFlex v-else-if="isVideo">
-      <video
-        controls
-        preload="metadata"
-        controlsList="nodownload"
-        crossOrigin
-        @loadeddata="loading = false"
+      </div>
+
+      <VCard
+        v-if="!file"
+        flat
+        class="message-card"
       >
-        <source
-          :src="src"
-          :type="file.mimetype"
-        >
-        <track
-          v-for="subtitle in subtitles"
-          :key="subtitle.id"
-          :src="subtitle.url"
-          kind="subtitles"
-          :srclang="subtitle.language.id"
-          :label="subtitle.language.native_name"
+        <VLayout
+          align-center
+          justify-center
+          fill-height
         >
-      </video>
-    </VFlex>
-    <VCard
-      v-else-if="isAudio"
-      flat
-    >
-      <VLayout
-        align-center
-        justify-center
-        fill-height
+          {{ $tr('noFileText') }}
+        </VLayout>
+      </VCard>
+      <VCard
+        v-else-if="file.uploading || file.error"
+        flat
+        class="message-card"
       >
-        <audio
+        <VLayout
+          align-center
+          justify-center
+          fill-height
+          data-test="progress"
+        >
+          <FileStatus
+            :fileId="file.id"
+            large
+          />
+        </VLayout>
+      </VCard>
+      <VFlex v-else-if="isVideo">
+        <video
           controls
-          :src="src"
-          :type="file.mimetype"
+          preload="metadata"
+          controlsList="nodownload"
+          crossOrigin
           @loadeddata="loading = false"
-        ></audio>
-      </VLayout>
-    </VCard>
-    <iframe
-      v-else-if="isHTML"
-      :src="htmlPath"
-      sandbox="allow-scripts"
-      @load="loading = false"
-    ></iframe>
-    <embed
-      v-else-if="isPDF"
-      :src="src"
-      :type="file.mimetype"
-      @load="loading = false"
-    >
-    <div
-      v-else-if="isEpub"
-      class="epub"
-    >
-      <EpubRenderer
+        >
+          <source
+            :src="src"
+            :type="file.mimetype"
+          >
+          <track
+            v-for="subtitle in subtitles"
+            :key="subtitle.id"
+            :src="subtitle.url"
+            kind="subtitles"
+            :srclang="subtitle.language.id"
+            :label="subtitle.language.native_name"
+          >
+        </video>
+      </VFlex>
+      <VCard
+        v-else-if="isAudio"
+        flat
+      >
+        <VLayout
+          align-center
+          justify-center
+          fill-height
+        >
+          <audio
+            controls
+            :src="src"
+            :type="file.mimetype"
+            @loadeddata="loading = false"
+          ></audio>
+        </VLayout>
+      </VCard>
+      <iframe
+        v-else-if="isHTML"
+        :src="htmlPath"
+        sandbox="allow-scripts"
+        @load="loading = false"
+      ></iframe>
+      <embed
+        v-else-if="isPDF"
         :src="src"
+        :type="file.mimetype"
         @load="loading = false"
-      />
-    </div>
+      >
+      <div
+        v-else-if="isEpub"
+        class="epub"
+      >
+        <EpubRenderer
+          :src="src"
+          @load="loading = false"
+        />
+      </div>
 
-    <VCard
-      v-else
-      class="message-card"
-      flat
-    >
-      <VLayout
-        align-center
-        justify-center
-        fill-height
-        data-test="not-supported"
+      <VCard
+        v-else
+        class="message-card"
+        flat
       >
-        <VTooltip
-          bottom
-          lazy
+        <VLayout
+          align-center
+          justify-center
+          fill-height
+          data-test="not-supported"
         >
-          <template #activator="{ on }">
-            <VIconWrapper
-              color="grey lighten-2"
-              large
-              v-on="on"
-            >
-              visibility_off
-            </VIconWrapper>
-          </template>
-          <span>{{ $tr('previewNotSupported') }}</span>
-        </VTooltip>
-      </VLayout>
-    </VCard>
+          <VTooltip
+            bottom
+            lazy
+          >
+            <template #activator="{ on }">
+              <VIconWrapper
+                color="grey lighten-2"
+                large
+                v-on="on"
+              >
+                visibility_off
+              </VIconWrapper>
+            </template>
+            <span>{{ $tr('previewNotSupported') }}</span>
+          </VTooltip>
+        </VLayout>
+      </VCard>
+    </div>
   </VLayout>
 
 </template>
@@ -231,6 +242,21 @@
 
   $max-height: calc(100vh - 96px);
 
+  .renderer {
+    position: relative;
+    width: 100%;
+  }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
   .v-card,
   video,
   audio,