@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
122 lines (121 loc) • 6.06 kB
JavaScript
import React, { useState } from 'react';
import { THEOplayerView } from 'react-native-theoplayer';
import { DEFAULT_THEOPLAYER_THEME } from './THEOplayerTheme';
import { Platform, View } from 'react-native';
import { TestIDs } from './utils/TestIDs';
import { AirplayButton, AutoFocusGuide, CenteredControlBar, CenteredDelayedActivityIndicator, ChromecastButton, ControlBar, FullscreenButton, FULLSCREEN_CENTER_STYLE, MuteButton, PipButton, PlaybackRateSubMenu, PlayButton, QualitySubMenu, SeekBar, SettingsMenuButton, SkipButton, Spacer, TimeLabel, UiContainer, LanguageMenuButton, CastMessage, AdClickThroughButton, AdDisplay, AdCountdown, AdSkipButton, GoToLiveButton } from '..';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export let UIFeature = /*#__PURE__*/function (UIFeature) {
UIFeature[UIFeature["Chromecast"] = 0] = "Chromecast";
UIFeature[UIFeature["AirPlay"] = 1] = "AirPlay";
UIFeature[UIFeature["Fullscreen"] = 2] = "Fullscreen";
UIFeature[UIFeature["Language"] = 3] = "Language";
UIFeature[UIFeature["Mute"] = 4] = "Mute";
UIFeature[UIFeature["PiP"] = 5] = "PiP";
UIFeature[UIFeature["PlaybackRate"] = 6] = "PlaybackRate";
UIFeature[UIFeature["SeekBar"] = 7] = "SeekBar";
UIFeature[UIFeature["TrickPlay"] = 8] = "TrickPlay";
UIFeature[UIFeature["VideoQuality"] = 9] = "VideoQuality";
return UIFeature;
}({});
// By default, exclude Chromecast, for which an extra dependency is needed.
const defaultExcludedFeatures = [UIFeature.Chromecast];
/**
* 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,
excludedFeatures = defaultExcludedFeatures
} = props;
const [player, setPlayer] = useState(undefined);
const onPlayerReady = player => {
setPlayer(player);
props.onPlayerReady?.(player);
};
return /*#__PURE__*/_jsx(View, {
style: [FULLSCREEN_CENTER_STYLE, {
backgroundColor: '#000000'
}, style],
children: /*#__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__*/_jsx(AutoFocusGuide, {
children: /*#__PURE__*/_jsxs(ControlBar, {
children: [topSlot, /*#__PURE__*/_jsx(Spacer, {}), !Platform.isTV && /*#__PURE__*/_jsxs(_Fragment, {
children: [!excludedFeatures.includes(UIFeature.AirPlay) && /*#__PURE__*/_jsx(AirplayButton, {}), !excludedFeatures.includes(UIFeature.Chromecast) && /*#__PURE__*/_jsx(ChromecastButton, {})]
}), !excludedFeatures.includes(UIFeature.Language) && /*#__PURE__*/_jsx(LanguageMenuButton, {}), /*#__PURE__*/_jsxs(SettingsMenuButton, {
children: [!excludedFeatures.includes(UIFeature.VideoQuality) && /*#__PURE__*/_jsx(QualitySubMenu, {}), !excludedFeatures.includes(UIFeature.PlaybackRate) && /*#__PURE__*/_jsx(PlaybackRateSubMenu, {})]
})]
})
}),
center: /*#__PURE__*/_jsx(AutoFocusGuide, {
children: /*#__PURE__*/_jsx(CenteredControlBar, {
style: {
width: '50%'
},
left: !excludedFeatures.includes(UIFeature.TrickPlay) ? /*#__PURE__*/_jsx(SkipButton, {
skip: -10,
testID: TestIDs.SKIP_BWD_BUTTON
}) : /*#__PURE__*/_jsx(_Fragment, {}),
middle: /*#__PURE__*/_jsx(PlayButton, {}),
right: !excludedFeatures.includes(UIFeature.TrickPlay) ? /*#__PURE__*/_jsx(SkipButton, {
skip: 30,
testID: TestIDs.SKIP_FWD_BUTTON
}) : /*#__PURE__*/_jsx(_Fragment, {})
})
}),
bottom: /*#__PURE__*/_jsxs(AutoFocusGuide, {
children: [!Platform.isTV && !excludedFeatures.includes(UIFeature.Chromecast) && !excludedFeatures.includes(UIFeature.AirPlay) && /*#__PURE__*/_jsx(ControlBar, {
style: {
justifyContent: 'flex-start'
},
children: /*#__PURE__*/_jsx(CastMessage, {})
}), /*#__PURE__*/_jsx(ControlBar, {
children: !excludedFeatures.includes(UIFeature.SeekBar) && /*#__PURE__*/_jsx(SeekBar, {})
}), /*#__PURE__*/_jsxs(ControlBar, {
children: [!excludedFeatures.includes(UIFeature.Mute) && /*#__PURE__*/_jsx(MuteButton, {}), /*#__PURE__*/_jsx(GoToLiveButton, {}), /*#__PURE__*/_jsx(TimeLabel, {
showDuration: true
}), /*#__PURE__*/_jsx(Spacer, {}), bottomSlot, !excludedFeatures.includes(UIFeature.PiP) && /*#__PURE__*/_jsx(PipButton, {}), !excludedFeatures.includes(UIFeature.Fullscreen) && /*#__PURE__*/_jsx(FullscreenButton, {})]
})]
}),
adTop: /*#__PURE__*/_jsx(AutoFocusGuide, {
children: /*#__PURE__*/_jsx(ControlBar, {
children: /*#__PURE__*/_jsx(AdClickThroughButton, {})
})
}),
adCenter: /*#__PURE__*/_jsx(AutoFocusGuide, {
children: /*#__PURE__*/_jsx(CenteredControlBar, {
middle: /*#__PURE__*/_jsx(PlayButton, {})
})
}),
adBottom: /*#__PURE__*/_jsxs(AutoFocusGuide, {
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: [/*#__PURE__*/_jsx(MuteButton, {}), /*#__PURE__*/_jsx(SeekBar, {})]
})]
})
})
})
});
}
//# sourceMappingURL=THEOplayerDefaultUi.js.map