fix(EC-13880): Add support for Light Theme (#52)

### Description of the Changes Add support for Light Theme #### Resolves: FEC-13880 Related Prs: kaltura/playkit-js-ui#884 kaltura/playkit-js-share#44 --------- Co-authored-by: JonathanTGold <jonathan.gold@[email protected]>
kaltura · May 21, 2024 · 4480c1a · 4480c1a
1 parent 3b78f3c
commit 4480c1a
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 141 deletions.
diff --git a/package.json b/package.json
@@ -27,7 +27,7 @@
   },
   "devDependencies": {
     "@playkit-js/common": "1.5.2-canary.0-f23d183",
-    "@playkit-js/kaltura-player-js": "3.17.0-canary.0-634f42e",
+    "@playkit-js/kaltura-player-js": "3.17.16-canary.0-db12b53",
     "@playkit-js/ui-managers": "1.4.3-canary.0-b33eab0",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
@@ -49,8 +49,7 @@
     "typescript": "^4.9.5",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1",
-    "@playkit-js/playkit-js-ui": "^0.77.8"
+    "webpack-dev-server": "^4.11.1"
   },
   "peerDependencies": {
     "@playkit-js/kaltura-player-js": "3.14.4"

diff --git a/src/components/attachments-list/attachments-list.scss b/src/components/attachments-list/attachments-list.scss
@@ -1,3 +1,5 @@
+@import '~@playkit-js/playkit-js-ui';
+
 .attachments-container {
   width: 100%;
   overflow: hidden;
@@ -6,7 +8,7 @@
   .attachments-label {
     display: inline-block;
     font-size: 16px;
-    color: white;
+    color: $tone-1-color;
     font-weight: 700;
     line-height: 21px;
     width: fit-content;

diff --git a/src/components/download-item/download-item.scss b/src/components/download-item/download-item.scss
@@ -1,7 +1,8 @@
+@import '~@playkit-js/playkit-js-ui';
 @import '../../theme.scss';
 
 .file-info {
-  background-color: rgba(255, 255, 255, 0.12);
+  background-color: rgba(#{$tone-1-color-rgb}, 0.1);
   border-radius: $roundness-1;
   display: flex;
   font-size: 14px;
@@ -17,7 +18,7 @@
     justify-content: center;
 
     &.file-icon {
-      background-color: #444;
+      background-color: rgba(#{$tone-1-color-rgb}, 0.2);
       border-radius: 4px 0 0 4px;
       padding: 12px;
 

diff --git a/src/components/download-overlay/download-overlay.scss b/src/components/download-overlay/download-overlay.scss
@@ -1,10 +1,11 @@
+@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: #fff;
+    color: $tone-1-color;
     height: 100%;
     position: absolute;
     width: 100%;
@@ -13,12 +14,13 @@
     flex-direction: column;
 
     .header {
-        font-size: 32px;
+        font-size: 25px;
         font-weight: 700;
         margin-top: 48px;
         text-align: center;
 
-        &.small {
+        &.small,
+        &.medium {
             font-size: 18px;
         }
     }

diff --git a/src/components/download-overlay/download-overlay.tsx b/src/components/download-overlay/download-overlay.tsx
@@ -5,9 +5,8 @@ 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;
@@ -125,6 +124,27 @@ const DownloadOverlay = withText({
 
         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.showOverlay = 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 ? (
@@ -135,29 +155,6 @@ const DownloadOverlay = withText({
               ) : undefined}
               {shouldRenderAttachments && renderAttachments()}
             </div>
-            <div>
-              <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();
-                    }
-                  }}>
-                  <Button
-                    type={ButtonType.borderless}
-                    size={ButtonSize.medium}
-                    tooltip={{label: closeLabel!}}
-                    ariaLabel={closeLabel}
-                    icon={'close'}
-                    setRef={ref => {
-                      closeButtonRef.current = ref;
-                    }}
-                  />
-                </A11yWrapper>
-              </div>
-            </div>
           </div>
         ) : (
           <div />

diff --git a/src/components/expandable-container/expandable-container.scss b/src/components/expandable-container/expandable-container.scss
@@ -1,7 +1,9 @@
+@import '~@playkit-js/playkit-js-ui';
+
 .expandable-label {
   display: inline-block;
   font-size: 14px;
-  color: white;
+  color: $tone-1-color;
   font-weight: 700;
   cursor: pointer;
   width: fit-content;

diff --git a/src/download.tsx b/src/download.tsx
@@ -12,7 +12,7 @@ import {DownloadEvent} from './event';
 
 const {ReservedPresetNames} = ui;
 const {Text} = ui.preacti18n;
-// @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 {
@@ -48,7 +48,7 @@ class Download extends KalturaPlayer.core.BasePlugin {
   }
 
   private get upperBarManager(): UpperBarManager {
-    return (this.player.getService('upperBarManager') as UpperBarManager) || {};
+    return this.player.getService('upperBarManager') as UpperBarManager;
   }
 
   private get toastManager(): ToastManager {
@@ -89,7 +89,7 @@ class Download extends KalturaPlayer.core.BasePlugin {
     if (this.iconId > 0) {
       return;
     }
-    // @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
@@ -106,7 +106,7 @@ class Download extends KalturaPlayer.core.BasePlugin {
         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;
     }