@byomakase/omakase-react-components 1.3.0 → 1.4.0

package/README.md

@@ -124,6 +124,7 @@ The following properties are present:
 - `segmentationLanes`: A reference to the state holding a list of [MarkerLanes](https://api.player.byomakase.org/classes/MarkerLane.html) used for media segmentation.
 - `source`: A reference to one of the segmentation lanes that is currently considered active. ControlsToolbar will only interact with markers in the source.
 - `setSegmentationLanes`: A react state setter for segmentation lanes
+- `setSelectedMarker`: A react state setter for selected marker
 - `setSource`: A react state setter for source
 - `enableHotKeys`: A boolean used to enable hot keys. Defaults to true.
 - `constants`: An object containing styles for Omakase timeline elements that ControlsToolbar can create.
@@ -224,13 +225,13 @@ The following properties are present:
 
 The hot keys are the same as OmakasePlayerComponent
 
-## OmakaseTimeRangePicker
+## OmakaseTimeRangeSelectorComponent
 
 A wrapper around HTML component used to navigate infinite timelines modified for TAMS.
 
 ```js
 return (
-  <OmakaseTimeRangePicker
+  <OmakaseTimeRangeSelectorComponent
     numberOfSegments={6}
     maxSliderRange={1800}
     segmentSize={600}
@@ -252,6 +253,40 @@ The following properties are present:
 - `maxTimeRange`: A timerange string representing the range slider can navigate in
 - `onCheckmarkClickCallback`: A function called when new timerange is selected by moving and/or stretching the slider
 
+## CSS Custom Properties
+
+### OmakasePlayerTimelineControlsToolbar
+
+All visual aspects can be customized by overriding these CSS custom properties on `:root` or any ancestor element:
+
+| Property                                           | Default   | Description                      |
+| -------------------------------------------------- | --------- | -------------------------------- |
+| `--omakase-toolbar-control-panel-background-color` | `#3a3d4b` | Toolbar control panel background |
+| `--omakase-toolbar-icon-color`                     | `#cacfea` | Toolbar icon color               |
+
+### OmakaseTimeRangeSelectorComponent
+
+`OmakaseTimeRangeSelectorComponent` renders an `OmakaseTimeRangeSelector` internally. All of its visual aspects can be customized via the following CSS custom properties:
+
+| Property                                                               | Default   | Description                                           |
+| ---------------------------------------------------------------------- | --------- | ----------------------------------------------------- |
+| `--omakase-time-range-selector-width`                                  | `700px`   | Width of the component                                |
+| `--omakase-time-range-selector-height`                                 | `32px`    | Base height — all other heights are derived from this |
+| `--omakase-time-range-selector-font-size`                              | `13px`    | Font size for labels and duration display             |
+| `--omakase-time-range-selector-segment-marker-background-color`        | `#2E313D` | Segment marker bar background                         |
+| `--omakase-time-range-selector-segment-marker-border-color`            | `#655372` | Segment marker bar border                             |
+| `--omakase-time-range-selector-segment-tick-border-color`              | `#655372` | Segment tick mark border                              |
+| `--omakase-time-range-selector-segment-label-font-color`               | `inherit` | Segment timeline label color                          |
+| `--omakase-time-range-selector-range-selector-background-color`        | `#662D91` | Draggable range selector background                   |
+| `--omakase-time-range-selector-range-selector-handle-background-color` | `#662D91` | Resize handle background                              |
+| `--omakase-time-range-selector-range-selector-duration-font-color`     | `#ffffff` | Duration label text color                             |
+| `--omakase-time-range-selector-confirm-button-background-color`        | `#424850` | Confirm (checkmark) button circle background          |
+| `--omakase-time-range-selector-confirm-button-color`                   | `#00E9A3` | Confirm (checkmark) icon color                        |
+| `--omakase-time-range-selector-cancel-button-background-color`         | `#424850` | Cancel (×) button circle background                   |
+| `--omakase-time-range-selector-cancel-button-color`                    | `#F03838` | Cancel (×) icon color                                 |
+
+The marker bar height is `(height - 2px) × 2/3`, the tick height is `(height - 2px) / 3`, and the handle height equals `height` — so changing `--omakase-time-range-selector-height` scales all three proportionally.
+
 ## Tips
 
 - Be mindful about props changes to Omakase components as every rerender will force either a timeline rerender (potentially expensive if timeline is rich) or a player reload (playback will stop and commence from the start)