How to hide close player button when controls are not on the screen

mykola_parfenov · April 24, 2024, 10:03pm

I have a problem. Since there is no default close icon inside player controls, I added a custom one. But I need to hide it when Bitmovin controls are hidden. Is there any event like onControlsHide/onControlsShow in other video-player react native libraries? So for now it is always on the screen and it is not looking good.

roland.kakonyi · April 30, 2024, 2:35pm

Hi @mykola_parfenov!

Thank you for your question!

One option is to customize the player UI itself. It is available open-source here: GitHub - bitmovin/bitmovin-player-ui: The Bitmovin Adaptive Streaming Player UI

Apparently we already have an example on how to add a close button to the UI:

github.com

bitmovin/bitmovin-player-ios-samples/blob/2e58bf376fee52613d6dfd5cbbc9745166fc98d6/CustomHtmlUi/Supporting Files/customclosebutton.ts

import { ToggleButton, ToggleButtonConfig } from './togglebutton';
import { PlayerAPI } from 'bitmovin-player';
import { UIInstanceManager } from '../uimanager';

declare const window: any;

interface CallbackInterface {
  (data?: string): void;
}

interface CustomMessageHandlerApi {
  sendSynchronous(name: string, data?: string): string | null;
  sendAsynchronous(name: string, data?: string): void;
  on(methodName: string, callback: CallbackInterface): void;
}

export class CustomCloseButton extends ToggleButton<ToggleButtonConfig> {
  constructor(config: ToggleButtonConfig = {}) {
    super(config);

This file has been truncated. show original

This is showcased with React Native Example application when using the sample “Custom HTML UI”.
You can find the code for it here: bitmovin-player-react-native/example/src/screens/CustomHtmlUi.tsx at development · bitmovin/bitmovin-player-react-native · GitHub

Topic		Replies	Views
Is there a way to create a custom settings toggle button? Support bitmovin-player , bitmovin , web , react	4	67	June 25, 2024
Why is the FullScreenHandler not setting the player over the screen on Android / React Native? Support bitmovin-player , android , bitmovin , react-native , fullscreen	14	965	April 12, 2022
How to hide controls on PREPARED and show on Hover/Tap? Support	4	645	May 24, 2023
Cannot hide iOS home indicator in fullscreen Support bitmovin-player , android , ios , bitmovin , react-native	5	974	December 6, 2023
Can't render custom UI Support bitmovin-player , bitmovin , web , player-ui	8	940	March 6, 2023

How to hide close player button when controls are not on the screen

Related topics