fix(FEC-14000): Download plugins opens empty overlay while there are … (

#56) 1. remove flavors filter preventing audio files from being displayed 2. display an audio icon for audio files 3. display language as a description (instead of bitrate in video files) in audio files Resolves [FEC-14000](https://kaltura.atlassian.net/browse/FEC-14000), FEC-13915 FEC-13939 Related pr: kaltura/kaltura-player-js#805 kaltura/playkit-js-audio-player#27 kaltura/playkit-js-share#50 kaltura/playkit-js-transcript#205 [FEC-14000]: https://kaltura.atlassian.net/browse/FEC-14000?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --------- Co-authored-by: JonathanTGold <jonathan.gold@86@gmail.com>
kaltura · Jul 18, 2024 · 4cb857a · 4cb857a
1 parent 556dc08
commit 4cb857a
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 200 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -35,7 +35,28 @@
         plugins: {
           uiManagers: {},
           download: {}
-        }
+        },
+        ui: {
+          // translations - for local environment
+          translations: {
+            en: {
+              download: {
+                download: 'Download',
+                downloads: 'Downloads',
+                download_has_started: 'Download has started',
+                download_has_failed: 'Download has failed',
+                attachments: 'Attachments',
+                download_button_label: 'Click to download the video',
+                select_quality_label: 'Select quality',
+                hide_label: 'Hide',
+                source_label: 'Source',
+                more_captions_label: 'More captions',
+                less_captions_label: 'Less captions',
+                attachments_label: 'Attachments'
+              },
+            }
+          }
+        },
       };
 
       const player = KalturaPlayer.setup(config);

diff --git a/demo/style.css b/demo/style.css
@@ -4,6 +4,6 @@ body {
 
 #player-placeholder {
   margin: 100px auto;
-  max-width: 640px;
+  max-width: 840px;
   aspect-ratio: 10 / 5.62;
 }
diff --git a/src/components/download-overlay/download-overlay.scss b/src/components/download-overlay/download-overlay.scss
@@ -1,68 +1,67 @@
 @import '~@playkit-js/playkit-js-ui';
 @import '../../theme.scss';
 
-.download-overlay {
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
-    background-color: rgba(0, 0, 0, .7);
-    color: $tone-1-color;
-    height: 100%;
-    position: absolute;
-    width: 100%;
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-
-    .header {
-        font-size: 25px;
-        font-weight: 700;
-        margin-top: 48px;
-        text-align: center;
-
-        &.small,
-        &.medium {
-            font-size: 18px;
-        }
-    }
+.header {
+  font-size: 32px;
+  font-weight: 500;
+  margin-top: 30px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
 
-    .file-info-list {
-        margin: auto;
-        margin-top: 25px;
-        overflow: auto;
-        height: 100%;
-        width: 100%;
+:global(.playkit-size-sm),
+:global(.playkit-size-md), {
+  .header {
+    font-size: 20px;
+  }
+}
 
-        .sources-captions-container {
-            margin-bottom: 24px;
-        }
-
-        @include download-scrollbar();
-        &:hover::-webkit-scrollbar-track,
-        &:hover::-webkit-scrollbar-thumb, {
-            visibility: visible;
-        }
+.download-overlay {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  padding: 0 calc(100% / 9);
+  overflow-y: auto;
 
-        &.large {
-            max-width: 600px;
-        }
+  @include download-scrollbar();
+  &:hover::-webkit-scrollbar-track,
+  &:hover::-webkit-scrollbar-thumb {
+    visibility: visible;
+  }
 
-        &.medium {
-            max-width: calc(100% - 48px);
-        }
+  .file-info-list {
+    margin: auto;
+    margin-top: 25px;
+    height: 100%;
+    width: 100%;
 
-        &.small {
-            max-width: calc(100% - 16px);
-        }
+    .sources-captions-container {
+      margin-bottom: 24px;
     }
+  }
+}
 
-    .close-button-container {
-        position: absolute;
-        top: 36px;
-        right: 36px;
+:global(.playkit-player.playkit-size-lg),
+:global(.playkit-player.playkit-size-md),
+:global(.playkit-player.playkit-size-sm),
+:global(.playkit-player.playkit-size-xs),
+:global(.playkit-player.playkit-size-ty) {
+  :global(.playkit-overlay.playkit-download-overlay) {
+    :global(.playkit-close-overlay) {
+      top: 15px !important;
+      right: 15px !important;
+    }
 
-        &.small {
-            top: 10px;
-            right:10px;
-        }
+    :global(.playkit-overlay-contents) {
+      padding: 0;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: $tone-1-color;
+      text-align: initial;
+      overflow-y: initial;
+      :global(.playkit-title) {
+        margin: 0;
+      }
     }
-}
+  }
+}
diff --git a/src/components/download-overlay/download-overlay.tsx b/src/components/download-overlay/download-overlay.tsx
@@ -1,16 +1,17 @@
-import {Button, ButtonType, ButtonSize, A11yWrapper, OnClickEvent} from '@playkit-js/common';
 import {DownloadPluginManager} from '../../download-plugin-manager';
 import {createRef} from 'preact';
 import {useState, useEffect} from 'preact/hooks';
 import {DownloadMetadata} from '../../types';
 import {ui} from '@playkit-js/kaltura-player-js';
 
+import {OverlayPortal} from '@playkit-js/common/dist/hoc/overlay-portal';
+const {Overlay} = ui.Components;
+
 const {bindActions} = ui.utils;
 
 const overlayActions = ui.reducers.overlay.actions;
 
 const {withEventManager} = KalturaPlayer.ui.Event;
-const {PLAYER_SIZE} = KalturaPlayer.ui.components;
 const {connect} = KalturaPlayer.ui.redux;
 
 const {withText} = KalturaPlayer.ui.preacti18n;
@@ -24,143 +25,88 @@ import {DownloadEvent} from '../../event';
 interface DownloadOverlayProps {
   downloadPluginManager: DownloadPluginManager;
   eventManager: any;
-  sizeClass?: string;
   downloadsLabel?: string;
   closeLabel?: string;
   setFocus: () => void;
   downloadMetadata: DownloadMetadata;
   updateOverlay: (isOpen: boolean) => void;
 }
 
-const mapStateToProps = (state: any) => {
-  const {
-    shell: {playerSize}
-  } = state;
-  let sizeClass = '';
-
-  switch (playerSize) {
-    case PLAYER_SIZE.EXTRA_LARGE:
-    case PLAYER_SIZE.LARGE: {
-      sizeClass = styles.large;
-      break;
-    }
-    case PLAYER_SIZE.MEDIUM: {
-      sizeClass = styles.medium;
-      break;
-    }
-    case PLAYER_SIZE.SMALL:
-    case PLAYER_SIZE.EXTRA_SMALL: {
-      sizeClass = styles.small;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-
-  return {
-    sizeClass
-  };
-};
-
 const DownloadOverlay = withText({
   downloadsLabel: 'download.downloads',
   closeLabel: 'overlay.close'
 })(
   connect(
-    mapStateToProps,
+    null,
     bindActions(overlayActions)
   )(
-    withEventManager(
-      ({
-        downloadPluginManager,
-        eventManager,
-        sizeClass,
-        downloadsLabel,
-        closeLabel,
-        setFocus,
-        downloadMetadata,
-        updateOverlay
-      }: DownloadOverlayProps) => {
-        const [isVisible, setIsVisible] = useState(false);
-        const closeButtonRef = createRef<HTMLButtonElement>();
-        const downloadConfig = downloadPluginManager.downloadPlugin.config;
-        useEffect(() => {
-          eventManager?.listen(downloadPluginManager, DownloadEvent.SHOW_OVERLAY, () => {
-            setIsVisible(true);
-          });
-
-          eventManager?.listen(downloadPluginManager, DownloadEvent.HIDE_OVERLAY, () => {
-            setIsVisible(false);
-          });
-        }, []);
-
-        const renderSources = () => {
-          return (
-            <SourcesList
-              flavors={downloadMetadata!.flavors}
-              imageUrl={downloadMetadata!.imageDownloadUrl}
-              downloadPluginManager={downloadPluginManager}
-              downloadConfig={downloadConfig}
-              fileName={downloadMetadata!.fileName}
-              displayFlavors={downloadConfig.displayFlavors}
-            />
-          );
-        };
-
-        const renderCaptions = () => {
-          return (
-            <CaptionsList captions={downloadMetadata!.captions} downloadPluginManager={downloadPluginManager} fileName={downloadMetadata!.fileName} />
-          );
-        };
-
-        const renderAttachments = () => {
-          return <AttachmentsList attachments={downloadMetadata!.attachments} downloadPluginManager={downloadPluginManager} />;
-        };
-
-        const shouldRenderSources = downloadConfig.displaySources && (downloadMetadata!.flavors.length || downloadMetadata!.imageDownloadUrl);
-        const shouldRenderCaptions = downloadConfig.displayCaptions && downloadMetadata!.captions.length;
-        const shouldRenderAttachments = downloadConfig.displayAttachments && downloadMetadata!.attachments.length;
+    withEventManager(({downloadPluginManager, eventManager, downloadsLabel, downloadMetadata, updateOverlay}: DownloadOverlayProps) => {
+      const [isVisible, setIsVisible] = useState(false);
+      const closeButtonRef = createRef<HTMLButtonElement>();
+      const downloadConfig = downloadPluginManager.downloadPlugin.config;
+      useEffect(() => {
+        eventManager?.listen(downloadPluginManager, DownloadEvent.SHOW_OVERLAY, () => {
+          setIsVisible(true);
+        });
+
+        eventManager?.listen(downloadPluginManager, DownloadEvent.HIDE_OVERLAY, () => {
+          setIsVisible(false);
+        });
+      }, []);
+
+      const renderSources = () => {
+        return (
+          <SourcesList
+            flavors={downloadMetadata!.flavors}
+            imageUrl={downloadMetadata!.imageDownloadUrl}
+            downloadPluginManager={downloadPluginManager}
+            downloadConfig={downloadConfig}
+            fileName={downloadMetadata!.fileName}
+            displayFlavors={downloadConfig.displayFlavors}
+          />
+        );
+      };
 
-        return isVisible ? (
-          <div data-testid="download-overlay" className={styles.downloadOverlay}>
-            <div data-testid="download-overlay-close-button" className={`${styles.closeButtonContainer} ${sizeClass}`}>
-              <A11yWrapper
-                onClick={(e: OnClickEvent, byKeyboard: boolean) => {
-                  updateOverlay(false);
-                  downloadPluginManager.setShowOverlay(false);
-                  if (byKeyboard) {
-                    setFocus();
-                  }
-                }}>
-                <Button
-                  type={ButtonType.borderless}
-                  size={ButtonSize.medium}
-                  tooltip={{label: closeLabel!}}
-                  ariaLabel={closeLabel}
-                  icon={'close'}
-                  setRef={ref => {
-                    closeButtonRef.current = ref;
-                  }}
-                />
-              </A11yWrapper>
-            </div>
-            <div className={`${styles.header} ${sizeClass}`}>{downloadsLabel}</div>
-            <div className={`${styles.fileInfoList} ${sizeClass}`}>
-              {shouldRenderSources || shouldRenderCaptions ? (
-                <div className={styles.sourcesCaptionsContainer}>
-                  {shouldRenderSources && renderSources()}
-                  {shouldRenderCaptions && renderCaptions()}
-                </div>
-              ) : undefined}
-              {shouldRenderAttachments && renderAttachments()}
-            </div>
-          </div>
-        ) : (
-          <div />
+      const renderCaptions = () => {
+        return (
+          <CaptionsList captions={downloadMetadata!.captions} downloadPluginManager={downloadPluginManager} fileName={downloadMetadata!.fileName} />
         );
-      }
-    )
+      };
+
+      const renderAttachments = () => {
+        return <AttachmentsList attachments={downloadMetadata!.attachments} downloadPluginManager={downloadPluginManager} />;
+      };
+
+      const shouldRenderSources = downloadConfig.displaySources && (downloadMetadata!.flavors.length || downloadMetadata!.imageDownloadUrl);
+      const shouldRenderCaptions = downloadConfig.displayCaptions && downloadMetadata!.captions.length;
+      const shouldRenderAttachments = downloadConfig.displayAttachments && downloadMetadata!.attachments.length;
+
+      return isVisible ? (
+        <OverlayPortal>
+          {/*@ts-ignore*/}
+          <Overlay
+            open
+            onClose={() => {
+              updateOverlay(false);
+              downloadPluginManager.setShowOverlay(false);
+            }}
+            type="playkit-download">
+            <div data-testid="download-overlay" className={styles.downloadOverlay}>
+              <div className={styles.header}>{downloadsLabel}</div>
+              <div className={styles.fileInfoList}>
+                {shouldRenderSources || shouldRenderCaptions ? (
+                  <div className={styles.sourcesCaptionsContainer}>
+                    {shouldRenderSources && renderSources()}
+                    {shouldRenderCaptions && renderCaptions()}
+                  </div>
+                ) : undefined}
+                {shouldRenderAttachments && renderAttachments()}
+              </div>
+            </div>
+          </Overlay>
+        </OverlayPortal>
+      ) : null;
+    })
   )
 );