feat(FEC-12700): Make the player colors configurable from studio (#703)

### Description of the Changes 1. Organizing the player's palette (and add some new colors) 2. Moved all configurable colors from a static (sass) variable to dynamic (css) variable 3. Added logic to calculate the secondary colors from the primary color (so that a user can only choose the primary color in the studio and the secondary ones will be derived from the primary one) 4. move the date-url of dynamic SVG icons (Those whose color changes in active mode to the color of the main color) to a variable so they can be changed at runtime (our current icons infrastructures uses sass functions to generate the data-url which are not useful at runtime but only at compile time) 5. add theme manager service that get the user configured style and apply the style related pr: kaltura/playkit-js-ui-managers#18 solves: FEC-12700 ### CheckLists - [x] changes have been done against master branch, and PR does not conflict - [ ] new unit / functional tests have been added (whenever applicable) - [ ] test are passing in local environment - [ ] Travis tests are passing (or test results are not worse than on master branch :)) - [ ] Docs have been updated Co-authored-by: JonathanTGold <jonathan.gold@86@gmail.com>
kaltura · Dec 13, 2022 · 321f4ae · 321f4ae
1 parent bb24f99
commit 321f4ae
Show file tree

Hide file tree

Showing 35 changed files with 446 additions and 121 deletions.
diff --git a/docs/colors-override.md b/docs/colors-override.md
@@ -0,0 +1,31 @@
+
+# Customize the player colors
+
+in order to override the player default colors you can pass your own color (in HEX color format!) in the `ui` section in player config
+
+> This guide assumes you are using the [Kaltura Player]
+
+[kaltura player]: https://github.com/kaltura/kaltura-player-js/
+
+### Example
+```js
+const config = {
+  targetId: 'player-placeholder',
+  provider: {
+    partnerId: 1234567,
+  },
+  ui: {
+    userTheme: {
+      colors: {
+        primary: '#da3633',
+        secondary: '#c4da33'
+      }
+    }
+  }
+}
+
+const player = KalturaPlayer.setup(config);
+```
+> Note: only HEX color format is excepted
+
+[See here for full configuration options](https://github.com/kaltura/playkit-js-ui/tree/master/flow-typed/types/user-theme.js)
diff --git a/docs/ui-customization.md b/docs/ui-customization.md
@@ -28,3 +28,7 @@ More information on how to build UI components and injecting them to UI see:
 The captions customizing level can be modified by removing settings from the captions setting menu.
 
 More information on removing settings from the menu can be found [here](cvaa-override.md).
+
+## Override Player Theme (Main colors)
+
+Some style (currently - mainly the player primary colors) can be configured
diff --git a/flow-typed/types/ui-options.js b/flow-typed/types/ui-options.js
@@ -11,5 +11,6 @@ declare type UIOptionsObject = {
   components?: ComponentsConfig,
   uiComponents?: Array<KPUIComponent>,
   translations?: {[langKey: string]: Object},
-  locale?: string
+  locale?: string;
+  userTheme?: UserTheme
 };
diff --git a/flow-typed/types/user-theme.js b/flow-typed/types/user-theme.js
@@ -0,0 +1,15 @@
+// @flow
+declare type ColorType = {
+  primary: string,
+  secondary: string,
+  success: string,
+  danger: string,
+  warning: string,
+  live: string,
+  playerBackground: string
+};
+
+
+declare type UserTheme = {
+  colors: ColorType
+};
diff --git a/src/components/ad-learn-more/_ad-learn-more.scss b/src/components/ad-learn-more/_ad-learn-more.scss
@@ -1,6 +1,3 @@
-@import '~styles/variables';
-@import '~styles/buttons';
-
 .player {
   .learn-more {
     font-weight: lighter;

diff --git a/src/components/bottom-bar/_bottom-bar.scss b/src/components/bottom-bar/_bottom-bar.scss
@@ -1,5 +1,3 @@
-@import '~styles/variables';
-
 .player .bottom-bar {
   background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
   color: #fff;

diff --git a/src/components/cast/_cast.scss b/src/components/cast/_cast.scss
@@ -1,5 +1,3 @@
-@import '~styles/variables';
-
 .player {
   .cast-button {
     display: block;
@@ -8,19 +6,19 @@
     background-color: rgba(255, 255, 255, 0);
     border: none;
     cursor: pointer;
-    --connected-color: #{$grayscale4};
-    --disconnected-color: #{$grayscale4};
+    --connected-color: $tone-2-color;
+    --disconnected-color: $tone-2-color;
 
     &:hover {
-      --connected-color: #{$white};
-      --disconnected-color: #{$white};
+      --connected-color: #FFFFFFFF;
+      --disconnected-color: #FFFFFFFF;
     }
 
     &.cast-button-active {
       --connected-color: rgba(1, 172, 205, 0.8);
-  
+
       &:hover {
-        --connected-color: #{$brand-color};  
+        --connected-color: $primary-color;
       }
     }
   }

diff --git a/src/components/cvaa-overlay/_cvaa-overlay.scss b/src/components/cvaa-overlay/_cvaa-overlay.scss
@@ -1,5 +1,3 @@
-@import '~styles/variables';
-
 .overlay.cvaa-overlay {
   .sample {
     border: 2px solid rgba(255, 255, 255, 0.2);
@@ -27,7 +25,7 @@
       height: 16px;
       width: 16px;
       border-radius: 8px;
-      background-color: $brand-color;
+      background-color: $primary-color;
       position: absolute;
       top: -5px;
       right: -5px;
@@ -61,7 +59,7 @@
   .custom-captions-applied {
     margin-top: 50px;
     a {
-      color: $brand-color-light;
+      color: $primary-brighter-color;
     }
   }
 

diff --git a/src/components/error-overlay/_error-overlay.scss b/src/components/error-overlay/_error-overlay.scss
@@ -1,7 +1,5 @@
-@import '~styles/variables';
-
 .overlay.error-overlay {
-  background-color: $grayscale1;
+  background-color: $tone-7-color;
   font-size: 0em;
 }
 
@@ -30,15 +28,15 @@
   }
 
   .headline {
-    color: $white;
+    color: $tone-1-color;
     font-size: $headline-font-size;
     margin: 10px 0 14px 0;
     flex: 1;
   }
 
   .error-session {
     font-size: $subheadline-font-size;
-    color: $grayscale4;
+    color: $tone-2-color;
     margin: auto;
     user-select: text;
     -webkit-user-select: text;
@@ -60,10 +58,10 @@
     width: auto;
     min-width: 120px;
     padding: 0 8px;
-    border: 2px solid $grayscale1;
+    border: 2px solid $tone-7-color;
     border-radius: 18px;
     background-color: black;
-    color: $white;
+    color: $tone-1-color;
     font-size: 15px;
     font-weight: bold;
     line-height: 32px;

diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
@@ -15,6 +15,7 @@ const IconType = {
   Close: 'close',
   Settings: 'settings',
   Check: 'check',
+  CheckActive: 'check-active',
   Language: 'language',
   Quality: 'quality',
   Captions: 'captions',
@@ -233,6 +234,9 @@ class Icon extends Component {
         case IconType.Check:
           return <i className={[style.icon, style.iconCheck].join(' ')} />;
 
+        case IconType.CheckActive:
+          return <i className={[style.icon, style.iconCheckActive].join(' ')} />;
+
         case IconType.Language:
           return <i className={[style.icon, style.iconLanguage].join(' ')} />;
 

diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
@@ -1,5 +1,3 @@
-@import '~styles/variables';
-
 @function svg-url($svg, $size, $viewBox) {
   $svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="#{$viewBox}" width="#{$size}" height="#{$size}">#{$svg}</svg>';
 
@@ -144,6 +142,16 @@
   background-position: 50% 50%;
 }
 
+// Dynamic Colored Icons
+.player {
+  --playkit-icon-check-active-url: #{icon(check, $brand-color)};
+  --playkit-icon-vr-stereo-full-url: #{icon(vrStereoFull, $brand-color)};
+  --playkit-icon-chromecast-url: #{icon(chromecast, $brand-color)};
+  --playkit-icon-quality-HD-active-url: #{icon(qualityHdActive, $brand-color, '16', '0 0 16 16')};
+  --playkit-icon-quality-4K-active-url: #{icon(quality4kActive, $brand-color, '16', '0 0 16 16')};
+  --playkit-icon-quality-8K-active-url: #{icon(quality8kActive, $brand-color, '16', '0 0 16 16')};
+}
+
 .icon-maximize {
   background-image: icon(maximize, '#fff');
 }
@@ -188,6 +196,10 @@
   background-image: icon(check, '#fff');
 }
 
+.icon-check-active {
+  background-image: var(--playkit-icon-check-active-url);
+}
+
 .icon-language {
   background-image: icon(language, '#fff');
 }
@@ -249,15 +261,15 @@
 }
 
 .icon-vr-stereo-full {
-  background-image: icon(vrStereoFull, $brand-color);
+  background-image: var(--playkit-icon-vr-stereo-full-url);
 }
 
 .icon-chromecast {
   background-image: icon(chromecast, '#fff');
 }
 
 .icon-chromecast-brand {
-  background-image: icon(chromecast, $brand-color);
+  background-image: var(--playkit-icon-chromecast-url);
 }
 
 .icon-next {
@@ -284,7 +296,7 @@
 
 .icon-quality-hd-active {
   &:after {
-    background-image: icon(qualityHdActive, $brand-color, '16', '0 0 16 16');
+    background-image: var(--playkit-icon-quality-HD-active-url);
   }
 }
 
@@ -296,7 +308,7 @@
 
 .icon-quality-4k-active {
   &:after {
-    background-image: icon(quality4kActive, $brand-color, '16', '0 0 16 16');
+    background-image: var(--playkit-icon-quality-4K-active-url);
   }
 }
 
@@ -308,7 +320,7 @@
 
 .icon-quality-8k-active {
   &:after {
-    background-image: icon(quality8kActive, $brand-color, '16', '0 0 16 16');
+    background-image: var(--playkit-icon-quality-8K-active-url);
   }
 }
 

diff --git a/src/components/interactive-area/_interactive-area.scss b/src/components/interactive-area/_interactive-area.scss
@@ -1,4 +1,3 @@
-@import '~styles/variables';
 .player.overlay-active .interactive-area {
   filter: blur($blur);
 }

diff --git a/src/components/language/_language.scss b/src/components/language/_language.scss
@@ -1,7 +1,7 @@
 .player {
   a:not([href]) {
     &.advanced-captions-menu-link {
-      color: $brand-color-light;
+      color: $primary-brighter-color;
       text-decoration: underline;
     }
   }

diff --git a/src/components/live-tag/_live-tag.scss b/src/components/live-tag/_live-tag.scss
@@ -1,8 +1,6 @@
-@import '~styles/variables';
-
 .live-tag {
   display: inline-block;
-  background-color: $new-live-color;
+  background-color: $live-color;
   color: #FFFFFF;
   border-radius: 4px;
   padding: 3px 4px;

diff --git a/src/components/loading/_loading.scss b/src/components/loading/_loading.scss
@@ -1,5 +1,3 @@
-@import '~styles/variables';
-
 @keyframes kaltura-spinner {
   0% {
     transform: rotate(0deg) scale(0.7);

diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js
@@ -267,7 +267,7 @@ class MenuItem extends Component {
         onKeyDown={this.onKeyDown}>
         <span className={badgeType ? [style.labelBadge, badgeType].join(' ') : ''}>{props.data.label}</span>
         <span className={[style.menuIconContainer, style.active].join(' ')}>
-          <Icon type={IconType.Check} />
+          <Icon type={IconType.CheckActive} />
         </span>
       </div>
     );

diff --git a/src/components/picture-in-picture-overlay/_picture-in-picture-overlay.scss b/src/components/picture-in-picture-overlay/_picture-in-picture-overlay.scss
@@ -1,5 +1,3 @@
-@import '~styles/variables';
-
 .picture-in-picture-overlay {
   position: absolute;
   top: 0;
@@ -46,7 +44,7 @@
   }
 
   .picture-in-picture-text {
-    color: $white;
+    color: $tone-1-color;
     font-size: $headline-font-size;
     white-space: nowrap;
     overflow: hidden;
@@ -55,18 +53,18 @@
   .picture-in-picture-button {
     height: 36px;
     width: 120px;
-    border: 2px solid $grayscale2;
+    border: 2px solid $tone-6-color;
     border-radius: 18px;
-    background-color: $grayscale1;
-    color: $white;
+    background-color: $tone-7-color;
+    color: $tone-1-color;
     font-size: 15px;
     font-weight: bold;
     line-height: 30px;
     cursor: pointer;
     margin-top: 20px;
     align-self: center;
     &:hover {
-      background-color: $grayscale2;
+      background-color: $tone-6-color;
     }
   }
 }
diff --git a/src/components/seekbar/_seekbar.scss b/src/components/seekbar/_seekbar.scss
@@ -1,5 +1,3 @@
-@import '~styles/variables';
-
 .player .seek-bar {
   padding: 12px 0 12px 0;
   cursor: pointer;
@@ -31,7 +29,7 @@
 
   &.live {
     .progress-bar .progress {
-      background-color: $new-live-color;
+      background-color: $live-color;
     }
   }
 
@@ -49,7 +47,7 @@
       left: 0;
       height: 100%;
       border-radius: inherit;
-      background-color: $brand-color;
+      background-color: $primary-color;
     }
     .virtual-progress {
       display: none;
@@ -70,7 +68,7 @@
     .virtual-progress-indicator {
       width: 1px;
       height: 100%;
-      background-color: $white;
+      background-color: $tone-1-color;
       float: right;
     }
 
@@ -83,7 +81,7 @@
       border-radius: 8px;
       height: 16px;
       width: 16px;
-      background-color: $white;
+      background-color: $tone-1-color;
       box-shadow: 0 0 31px 0 rgba(0, 0, 0, 0.3);
       transform: scale(0);
       transition: 100ms transform;