When BAM (Bitmovin Advertising Module) is used on touch devices, two touch interactions are necessary to skip an ad or open the ad click-through URL.
On touch input devices, the first touch is expected to display the UI controls and not be propagated to other components. When buttons are always visible, such as the AdSkipButton, the first touch seems as if it's not 'recognized'.
Possible approaches which we elaborated
#### Always show the Ads UI
#622
Was not considered as the solution as other elements which should not be there are also always visible.
#### Global setting to allow default touch on first touch
#624
Was not considered as the solution as non visible elements, e.g. the fullscreen button, would receive the click and perform their actions.
#### Using `display: none`
Most likely the cleanest solution would be to switch from `opacity: 0;` to `display: none` which would prevent any click listners completely. However, `display: none` is not animatable. Technically there are still ways to achieve a `display: none` approach but we did not want to do such a 'core' change for this.
#### Respecting the visibility of elements
In a POC I implemented an approach to traverse the view hierarchy and detect the visibility of the target element of the touch event. However, this yield other problems. Mainly with the `PlaybackToggleOverlay` which is strictly speaking not visible but technically still there in the DOM tree (there are other elements too). Those would need changes in their visibility handling which was considered out of scope for this fix.
Changes
626 acts as pre-work for this PR.
A new attribute was added to the ButtonConfig (acceptsTouchWithUiHidden) which indicates if a button wants to receive the first touch input even if the UI is currently not visible. This follows the idea from @hawk23 as outlined in #624 (section 1)) but with an inverted dependency.
The idea is that every Button component can decide if it wants to receive the click (touchend) even if the UI is hidden.
Ths setting is then respected in the UIContainer on the first touch input if the touchend event should be stop bubbling or not.
The AdSkipButton and the AdClickOverlay set this new property to true
Manual Testing
Include the BAM module and configure the Player to use BAM.
+ <script src="https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js"></script>
// Before instantiating a Player instance register the BAM module
+ bitmovin.player.Player.addModule(window.bitmovin.player['advertising-bitmovin'].default);
Enable ads:
var adsEnabled = false;
var adsEnabled = true;
Run the playground on a touch device (or a browser with touch input simulated)
Description
Problem
When BAM (Bitmovin Advertising Module) is used on touch devices, two touch interactions are necessary to skip an ad or open the ad click-through URL.
On touch input devices, the first touch is expected to display the UI controls and not be propagated to other components. When buttons are always visible, such as the
AdSkipButton, the first touch seems as if it's not 'recognized'.Possible approaches which we elaborated
#### Always show the Ads UI #622 Was not considered as the solution as other elements which should not be there are also always visible. #### Global setting to allow default touch on first touch #624 Was not considered as the solution as non visible elements, e.g. the fullscreen button, would receive the click and perform their actions. #### Using `display: none` Most likely the cleanest solution would be to switch from `opacity: 0;` to `display: none` which would prevent any click listners completely. However, `display: none` is not animatable. Technically there are still ways to achieve a `display: none` approach but we did not want to do such a 'core' change for this. #### Respecting the visibility of elements In a POC I implemented an approach to traverse the view hierarchy and detect the visibility of the target element of the touch event. However, this yield other problems. Mainly with the `PlaybackToggleOverlay` which is strictly speaking not visible but technically still there in the DOM tree (there are other elements too). Those would need changes in their visibility handling which was considered out of scope for this fix.Changes
626 acts as pre-work for this PR.
A new attribute was added to the
ButtonConfig(acceptsTouchWithUiHidden) which indicates if a button wants to receive the first touch input even if the UI is currently not visible. This follows the idea from @hawk23 as outlined in #624 (section1)) but with an inverted dependency. The idea is that everyButtoncomponent can decide if it wants to receive theclick(touchend) even if the UI is hidden. Ths setting is then respected in theUIContaineron the first touch input if thetouchendevent should be stop bubbling or not.The
AdSkipButtonand theAdClickOverlayset this new property totrueManual Testing
Enable ads:
var adsEnabled = false;
var adsEnabled = true;
Run the playground on a touch device (or a browser with touch input simulated)
Make sure you are testing the
SmallScreenUITry to skip the Ad before and after the changes
Checklist (for PR submitter and reviewers)
CHANGELOGentry