kaltura · JonathanTGold · May 6, 2024 · Apr 9, 2024 · Apr 10, 2024 · Apr 10, 2024
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Kaltura Player Demo Page" />
+    <title>Download Plugin</title>
+    <link rel="stylesheet" type="text/css" href="./style.css" />
+    <script src="https://unpkg.com/@playkit-js/kaltura-player-js@canary/dist/kaltura-ovp-player.js"></script>
+    <script src="https://unpkg.com/@playkit-js/ui-managers@canary/dist/playkit-ui-managers.js" type="text/javascript"></script>
+    <script src="./playkit-downloads.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div id="player-placeholder"></div>
+    <script type="text/javascript">
+      const config = {
+        log: {
+          level: 'DEBUG'
+        },
+        targetId: 'player-placeholder',
+        provider: {
+          env: {
+            serviceUrl: 'https://cdnapisec.kaltura.com/api_v3',
+            cdnUrl: 'https://cfvod.kaltura.com',
+            statsServiceUrl: 'https://stats.kaltura.com',
+            liveStatsServiceUrl: 'https://livestats.kaltura.com',
+            analyticsServiceUrl: 'https://analytics.kaltura.com',
+            apiFeatures: {
+              entryRedirect: '1'
+            }
+          },
+          partnerId: 3076893
+        },
+        plugins: {
+          uiManagers: {},
+          download: {}
+        }
+      };
+
+      const player = KalturaPlayer.setup(config);
+      player.loadMedia({entryId: '1_rhur4p1n'});
+    </script>
+  </body>
+</html>
diff --git a/demo/style.css b/demo/style.css
@@ -0,0 +1,9 @@
+body {
+  background-color: #212121;
+}
+
+#player-placeholder {
+  margin: 100px auto;
+  max-width: 640px;
+  aspect-ratio: 10 / 5.62;
+}
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "build": "webpack --mode production",
     "dev": "webpack-dev-server --mode development",
     "docs:generate": "documentation build src/** -f md -o docs/api.md",
-    "watch": "webpack --progress --colors --watch --mode development",
+    "watch": "webpack --progress --watch --mode development",
     "pushTaggedRelease": "git push --follow-tags --no-verify origin master",
     "release": "standard-version",
     "eslint": "eslint . --color",

diff --git a/src/components/download-overlay/download-overlay.scss b/src/components/download-overlay/download-overlay.scss
@@ -57,5 +57,10 @@
         position: absolute;
         top: 36px;
         right: 36px;
+
+        &.small {
+            top: 10px;
+            right:10px;
+        }
     }
 }
diff --git a/src/components/download-overlay/download-overlay.tsx b/src/components/download-overlay/download-overlay.tsx
@@ -3,6 +3,12 @@ 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';
+
+// @ts-expect-error - TS2339: Property 'bindActions' does not exist on type
+const {bindActions} = ui.utils;
+// @ts-expect-error - TS2339: Property 'bindActions' does not exist on type
+const overlayActions = ui.reducers.overlay.actions;
 
 const {withEventManager} = KalturaPlayer.ui.Event;
 const {PLAYER_SIZE} = KalturaPlayer.ui.components;
@@ -24,6 +30,7 @@ interface DownloadOverlayProps {
   closeLabel?: string;
   setFocus: () => void;
   downloadMetadata: DownloadMetadata;
+  updateOverlay: (isOpen: boolean) => void;
 }
 
 const mapStateToProps = (state: any) => {
@@ -61,9 +68,21 @@ const DownloadOverlay = withText({
   downloadsLabel: 'download.downloads',
   closeLabel: 'overlay.close'
 })(
-  connect(mapStateToProps)(
+  connect(
+    mapStateToProps,
+    bindActions(overlayActions)
+  )(
     withEventManager(
-      ({downloadPluginManager, eventManager, sizeClass, downloadsLabel, closeLabel, setFocus, downloadMetadata}: DownloadOverlayProps) => {
+      ({
+        downloadPluginManager,
+        eventManager,
+        sizeClass,
+        downloadsLabel,
+        closeLabel,
+        setFocus,
+        downloadMetadata,
+        updateOverlay
+      }: DownloadOverlayProps) => {
         const [isVisible, setIsVisible] = useState(false);
         const closeButtonRef = createRef<HTMLButtonElement>();
         const downloadConfig = downloadPluginManager.downloadPlugin.config;
@@ -117,9 +136,10 @@ const DownloadOverlay = withText({
               {shouldRenderAttachments && renderAttachments()}
             </div>
             <div>
-              <div data-testid="download-overlay-close-button" className={styles.closeButtonContainer}>
+              <div data-testid="download-overlay-close-button" className={`${styles.closeButtonContainer} ${sizeClass}`}>
                 <A11yWrapper
                   onClick={(e: OnClickEvent, byKeyboard: boolean) => {
+                    updateOverlay(false);
                     downloadPluginManager.showOverlay = false;
                     if (byKeyboard) {
                       setFocus();

diff --git a/src/download.tsx b/src/download.tsx
@@ -12,8 +12,8 @@ import {DownloadEvent} from './event';
 
 const {ReservedPresetNames} = ui;
 const {Text} = ui.preacti18n;
-
-const PRESETS = [ReservedPresetNames.Playback, ReservedPresetNames.Img];
+// @ts-expect-error - TS2339: Property 'MiniAudioUI' does not exist on type
+const PRESETS = [ReservedPresetNames.Playback, ReservedPresetNames.Img, ReservedPresetNames.MiniAudioUI];
 
 class Download extends KalturaPlayer.core.BasePlugin {
   static defaultConfig: DownloadConfig = {
@@ -33,11 +33,13 @@ class Download extends KalturaPlayer.core.BasePlugin {
   private downloadPluginManager: DownloadPluginManager;
   private _pluginButtonRef: HTMLButtonElement | null = null;
   public triggeredByKeyboard = false;
+  private store: any;
 
   constructor(name: string, player: KalturaPlayerTypes.Player, config: DownloadConfig) {
     super(name, player, config);
     this.downloadPluginManager = new DownloadPluginManager(this);
     this._addBindings();
+    this.store = ui.redux.useStore();
   }
 
   static isValid(): boolean {
@@ -63,6 +65,10 @@ class Download extends KalturaPlayer.core.BasePlugin {
     });
   }
 
+  showOverlay(): void {
+    this.downloadPluginManager.showOverlay = true;
+  }
+
   private _setPluginButtonRef = (ref: HTMLButtonElement) => {
     this._pluginButtonRef = ref;
   };
@@ -82,24 +88,27 @@ class Download extends KalturaPlayer.core.BasePlugin {
     if (this.iconId > 0) {
       return;
     }
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    this.iconId = this.upperBarManager.add({
+    // @ts-expect-error - TS2339: Property 'MiniAudioUI' does not exist on type
+    if (this.store.getState().shell['activePresetName'] !== ReservedPresetNames.MiniAudioUI) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      ariaLabel: (<Text id="download.download">Download</Text>) as never,
-      displayName: 'Download',
-      order: 40,
-      svgIcon: {
-        path: DOWNLOAD
-      },
-      onClick: this._handleClick as any,
-      component: () => {
-        return <DownloadOverlayButton setRef={this._setPluginButtonRef} />;
-      },
-      presets: PRESETS
-    }) as number;
+      this.iconId = this.upperBarManager.add({
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        ariaLabel: (<Text id="download.download">Download</Text>) as never,
+        displayName: 'Download',
+        order: 40,
+        svgIcon: {
+          path: DOWNLOAD
+        },
+        onClick: this._handleClick as any,
+        component: () => {
+          return <DownloadOverlayButton setRef={this._setPluginButtonRef} />;
+        },
+        // @ts-expect-error - TS2339: Property 'MiniAudioUI' does not exist on type
+        presets: PRESETS.filter(presetName => presetName !== ReservedPresetNames.MiniAudioUI)
+      }) as number;
+    }
 
     this.componentDisposers.push(
       this.player.ui.addComponent({

diff --git a/webpack.config.js b/webpack.config.js
@@ -55,7 +55,12 @@ module.exports = {
     ]
   },
   devServer: {
-    static: `${__dirname}/src`
+    static: {
+      directory: path.join(__dirname, 'demo')
+    },
+    client: {
+      progress: true
+    }
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],