10BC0 feat(UI): Increase interactive area of seek bar and volume bar (#9124) · shaka-project/shaka-player@e9afbba · GitHub
[go: up one dir, main page]
Skip to content

Commit e9afbba

Browse files
nureon22nureon22
authored
feat(UI): Increase interactive area of seek bar and volume bar (#9124)
- Set `40px` as the touchable size for range elements (seek-bar and volume-bar). - Decrease `z-index` of `shaka-seek-bar-container` to `-1` to prevent seek-bar from covering the controls button panel - Made `ui-time-container` non-interactive so it can cover the seek-bar without blocking interactions. Closes: #9120
1 parent 98fc330 commit e9afbba

File tree

2 files changed

+19
-7
lines changed

2 files changed

+19
-7
lines changed

‎ui/less/range_elements.less‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
@thumb-size: 12px;
3232
@track-height: 4px;
3333

34+
/* The range element has a larger interactive area than its visible size.
35+
* This value should always be greater than @thumb-size. */
36+
@touchable-size: 40px;
37+
3438
/* The range container is the div that contains a range element.
3539
* This div will act as a virtual track to allow us to style the track space.
3640
* An actual track still exists inside the range element, but is transparent. */
@@ -106,14 +110,14 @@
106110
/* Overlay and fill the container div. */
107111
.overlay-child();
108112

109-
/* The range element should be big enough to contain the thumb without
110-
* clipping it. It is very tricky to make the thumb show outside the track
111-
* on IE 11. */
112-
height: @thumb-size;
113+
/* The range element should have a minimum touchable height for
114+
* accessibility. */
115+
height: @touchable-size;
113116

114117
/* Position the top of the range element so that it is centered on the
115-
* container. Note that the container is actually smaller than the thumb. */
116-
top: calc((@track-height - @thumb-size) / 2);
118+
* container. Note that the container is actually smaller than the
119+
* touchable-size. */
120+
top: calc((@track-height - @touchable-size) / 2);
117121

118122
/* Make sure clicking at the very top of the bar still takes effect and is not
119123
* confused with clicking the video to play/pause it. */
@@ -191,11 +195,18 @@
191195
.show-when-controls-shown();
192196
top: 5px;
193197
height: 5px;
194-
margin-bottom: 0;
198+
199+
/* add spacing between seek-bar-container and controls-button-panel */
200+
margin-bottom: @track-height;
201+
195202
background-clip: padding-box !important;
196203
border-top: 4px solid transparent;
197204
border-bottom: 4px solid transparent;
198205

206+
/* Decrease the z-index of shaka-seek-bar-container to prevent convering the
207+
* controls button panel */
208+
z-index: -1;
209+
199210
.shaka-seek-bar {
200211
transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 250ms;
201212
opacity: 0;

‎ui/less/thumbnails.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
overflow: hidden;
5252
padding: 0 3px;
5353
position: absolute;
54+
pointer-events: none;
5455
visibility: hidden;
5556
z-index: 1;
5657

0 commit comments

Comments
 (0)
0