From 5915f469bd00c94de9fa14bfb2ddf4fc4e0b4b31 Mon Sep 17 00:00:00 2001 From: ismena Date: Thu, 9 Jul 2020 11:08:39 -0700 Subject: [PATCH] docs: Update the way to change seek bar colors in the tutorial. Issue #2708 Change-Id: I66982bc04c8e9358782e9a13b361b7803fe766dd --- docs/tutorials/ui-customization.md | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/docs/tutorials/ui-customization.md b/docs/tutorials/ui-customization.md index da276ccd0..cc1a244e9 100644 --- a/docs/tutorials/ui-customization.md +++ b/docs/tutorials/ui-customization.md @@ -96,11 +96,30 @@ UI layout can be reconfigured at any point after it's been created. Please note that custom layouts might need CSS adjustments to look good. #### Changing seek bar progress colors - The seek bar consists of three segments: past (already played part of the presentation), -future-buffered and future-unbuffered. The segments colors are set when the seek bar is created. -To customize the colors, change the values of `shaka.ui.Constants.SEEK_BAR_BASE_COLOR` , -`shaka.ui.Constants.SEEK_BAR_PLAYED_COLOR`, and `shaka.ui.Constants.SEEK_BAR_BUFFERED_COLOR` in ui/controls.js +future-buffered and future-unbuffered. +To customize the colors, add your values to the config object under `seekBarColors`: + ```js +const config = { + 'seekBarColors': { + base: 'rgba(255, 255, 255, 0.3)', + buffered: 'rgba(255, 255, 255, 0.54)', + played: 'rgb(255, 255, 255)', + } +} +ui.configure(config); +``` + +If you're using our ad API, you can also specify the color for the ad break markers on +the timeline: + ```js +const config = { + 'seekBarColors': { + adBreaks: 'rgb(255, 204, 0)', + } +} +ui.configure(config); +``` #### Creating custom elements and adding them to the UI