@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
115 lines • 4.96 kB
JavaScript
import React, { useState } from 'react';
import { THEOplayerView } from 'react-native-theoplayer';
import { SeekBar } from './components/seekbar/SeekBar';
import { AirplayButton } from './components/button/AirplayButton';
import { CenteredControlBar, ControlBar } from './components/controlbar/ControlBar';
import { TimeLabel } from './components/timelabel/TimeLabel';
import { FullscreenButton } from './components/button/FullscreenButton';
import { LanguageMenuButton } from './components/menu/LanguageMenuButton';
import { MuteButton } from './components/button/MuteButton';
import { CastMessage } from './components/message/CastMessage';
import { DEFAULT_THEOPLAYER_THEME } from './THEOplayerTheme';
import { Platform, View } from 'react-native';
import { FULLSCREEN_CENTER_STYLE, UiContainer } from './components/uicontroller/UiContainer';
import { PlayButton } from './components/button/PlayButton';
import { SkipButton } from './components/button/SkipButton';
import { Spacer } from './components/controlbar/Spacer';
import { ChromecastButton } from './components/button/ChromecastButton';
import { CenteredDelayedActivityIndicator } from './components/activityindicator/CenteredDelayedActivityIndicator';
import { AdDisplay } from './components/ads/AdDisplay';
import { AdCountdown } from './components/ads/AdCountdown';
import { AdSkipButton } from './components/ads/AdSkipButton';
import { AdClickThroughButton } from './components/ads/AdClickThroughButton';
import { TestIDs } from './utils/TestIDs';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
* A default UI layout which uses UI components from `react-native-theoplayer` to create a basic playback UI around a THEOplayerView.
*/
export function THEOplayerDefaultUi(props) {
const {
theme,
config,
topSlot,
bottomSlot,
style,
locale
} = props;
const [player, setPlayer] = useState(undefined);
const onPlayerReady = player => {
setPlayer(player);
props.onPlayerReady?.(player);
};
return /*#__PURE__*/_jsxs(View, {
style: style,
children: [/*#__PURE__*/_jsx(View, {
style: [FULLSCREEN_CENTER_STYLE, {
backgroundColor: '#000000'
}]
}), /*#__PURE__*/_jsx(THEOplayerView, {
config: config,
onPlayerReady: onPlayerReady,
children: player !== undefined && /*#__PURE__*/_jsx(UiContainer, {
theme: {
...DEFAULT_THEOPLAYER_THEME,
...theme
},
locale: locale,
player: player,
behind: /*#__PURE__*/_jsx(CenteredDelayedActivityIndicator, {
size: 50
}),
top: /*#__PURE__*/_jsxs(ControlBar, {
children: [topSlot, !Platform.isTV && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(AirplayButton, {}), /*#__PURE__*/_jsx(ChromecastButton, {})]
}), /*#__PURE__*/_jsx(LanguageMenuButton, {})]
}),
center: /*#__PURE__*/_jsx(CenteredControlBar, {
left: /*#__PURE__*/_jsx(SkipButton, {
skip: -10,
testID: TestIDs.SKIP_BWD_BUTTON
}),
middle: /*#__PURE__*/_jsx(PlayButton, {}),
right: /*#__PURE__*/_jsx(SkipButton, {
skip: 30,
testID: TestIDs.SKIP_FWD_BUTTON
})
}),
bottom: /*#__PURE__*/_jsxs(_Fragment, {
children: [!Platform.isTV && /*#__PURE__*/_jsx(ControlBar, {
style: {
justifyContent: 'flex-start'
},
children: /*#__PURE__*/_jsx(CastMessage, {})
}), /*#__PURE__*/_jsx(ControlBar, {
children: /*#__PURE__*/_jsx(SeekBar, {})
}), /*#__PURE__*/_jsxs(ControlBar, {
children: [!Platform.isTV && /*#__PURE__*/_jsx(MuteButton, {}), /*#__PURE__*/_jsx(TimeLabel, {
showDuration: true
}), /*#__PURE__*/_jsx(Spacer, {}), bottomSlot, !Platform.isTV && /*#__PURE__*/_jsx(FullscreenButton, {})]
})]
}),
adTop: /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/_jsx(ControlBar, {
children: /*#__PURE__*/_jsx(AdClickThroughButton, {})
})
}),
adCenter: /*#__PURE__*/_jsx(_Fragment, {
children: /*#__PURE__*/_jsx(CenteredControlBar, {
middle: /*#__PURE__*/_jsx(PlayButton, {})
})
}),
adBottom: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(ControlBar, {
style: {
justifyContent: 'flex-start'
},
children: [/*#__PURE__*/_jsx(AdDisplay, {}), /*#__PURE__*/_jsx(AdCountdown, {}), /*#__PURE__*/_jsx(Spacer, {}), /*#__PURE__*/_jsx(AdSkipButton, {})]
}), /*#__PURE__*/_jsxs(ControlBar, {
children: [!Platform.isTV && /*#__PURE__*/_jsx(MuteButton, {}), /*#__PURE__*/_jsx(SeekBar, {})]
})]
})
})
})]
});
}
//# sourceMappingURL=THEOplayerDefaultUi.js.map