Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Dec 13, 2022

Conversation

JonathanTGold
Copy link
Collaborator

@JonathanTGold JonathanTGold commented Nov 22, 2022

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

  • 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

@SivanA-Kaltura
Copy link
Collaborator

@JonathanTGold how would a plugin access the new values now ? what refactor should be made if a plugin was accessing the values through the js object ? (KalturaPlayer.ui.style)

src/styles/_variables.scss Outdated Show resolved Hide resolved
@semarche-kaltura
Copy link
Collaborator

semarche-kaltura commented Nov 25, 2022

@JonathanTGold how would a plugin access the new values now ? what refactor should be made if a plugin was accessing the values through the js object ? (KalturaPlayer.ui.style)

@semarche-kaltura the new values accessed as css vars for example: background-color: var(--playkit-primary-color)
Regarding the access of style in JS all the same as before except color variables that was deleted form variables.sass file
(that should be replaced by css var syntax in the css files)

V7 plugins uses new style variables (changes already implemented, waiting till current PR got merged and deployed). No issues found with using new styles variables.

src/components/icon/icon.scss Outdated Show resolved Hide resolved
src/utils/themes-manager.js Show resolved Hide resolved
src/utils/color-format-convertors.js Outdated Show resolved Hide resolved
src/utils/themes-manager.js Show resolved Hide resolved
src/utils/themes-manager.js Outdated Show resolved Hide resolved
src/utils/themes-manager.js Outdated Show resolved Hide resolved
ErezKaltura
ErezKaltura previously approved these changes Dec 11, 2022
@JonathanTGold JonathanTGold merged commit 321f4ae into master Dec 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants