Skip to content

Commit

Permalink
feat(FEC-12612): Image Playback Options - Fake Video or Single Image …
Browse files Browse the repository at this point in the history
  • Loading branch information
JonathanTGold committed Jan 19, 2023
1 parent 2bbd07b commit cbdb875
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 1 deletion.
1 change: 1 addition & 0 deletions src/components/active-preset/active-preset.js
Expand Up @@ -20,6 +20,7 @@ const mapStateToProps = state => ({
hasError: state.engine.hasError,
isIdle: state.engine.isIdle,
isVr: state.engine.isVr,
isImg: state.engine.isImg,
playlist: state.engine.playlist
}
},
Expand Down
8 changes: 7 additions & 1 deletion src/components/engine-connector/engine-connector.js
Expand Up @@ -5,10 +5,14 @@ import {bindActions} from '../../utils/bind-actions';
import {default as reduce, actions} from '../../reducers/engine';
import {actions as loadingActions} from '../../reducers/loading';
import {actions as shellActions} from '../../reducers/shell';
import {actions as seekbarActions} from '../../reducers/seekbar';
import {withPlayer} from '../player';
import {withEventManager} from 'event/with-event-manager';
import {withLogger} from 'components/logger';

// Rename so it doesn't clash with the equivalent action in engine state
const seekbarUpdateCurrentTime = seekbarActions.updateCurrentTime;

const COMPONENT_NAME = 'EngineConnector';

/**
Expand All @@ -18,7 +22,7 @@ const COMPONENT_NAME = 'EngineConnector';
* @example <EngineConnector />
* @extends {Component}
*/
@connect(reduce, bindActions({...actions, ...loadingActions, ...shellActions}))
@connect(reduce, bindActions({...actions, ...loadingActions, ...shellActions, seekbarUpdateCurrentTime}))
@withPlayer
@withEventManager
@withLogger(COMPONENT_NAME)
Expand All @@ -36,6 +40,7 @@ class EngineConnector extends Component {

eventManager.listen(player, player.Event.PLAYER_RESET, event => {
this.props.updateCurrentTime(0);
this.props.seekbarUpdateCurrentTime(0);
if (!event.payload.isChangeMedia) {
this.props.updateIsIdle(true);
}
Expand All @@ -47,6 +52,7 @@ class EngineConnector extends Component {
this.props.updateIsCastAvailable(player.isCastAvailable());
this.props.updateIsLive(player.isLive());
this.props.updateIsVr(player.isVr());
this.props.updateIsImg(player.isUntimedImg());
this.props.updateIsInPictureInPicture(player.isInPictureInPicture());
if (player.config.playback.autoplay) {
this.props.updateLoadingSpinnerState(true);
Expand Down
9 changes: 9 additions & 0 deletions src/reducers/engine.js
Expand Up @@ -37,6 +37,7 @@ export const types = {
UPDATE_PLAYER_POSTER: `${component}/UPDATE_PLAYER_POSTER`,
UPDATE_IS_LIVE: `${component}/UPDATE_IS_LIVE`,
UPDATE_IS_DVR: `${component}/UPDATE_IS_DVR`,
UPDATE_IS_IMG: `${component}/UPDATE_IS_IMG`,
UPDATE_ERROR: `${component}/ERROR`,
UPDATE_IS_IDLE: `${component}/UPDATE_IS_IDLE`,
UPDATE_FALLBACK_TO_MUTED_AUTOPLAY: `${component}/UPDATE_FALLBACK_TO_MUTED_AUTOPLAY`,
Expand Down Expand Up @@ -86,6 +87,7 @@ export const initialState = {
adContentType: null,
isLive: false,
isDvr: false,
isImg: false,
adProgress: {
currentTime: 0,
duration: 0
Expand Down Expand Up @@ -306,6 +308,12 @@ export default (state: Object = initialState, action: Object) => {
isDvr: action.isDvr
};

case types.UPDATE_IS_IMG:
return {
...state,
isImg: action.isImg
};

case types.UPDATE_IS_IDLE:
return {
...state,
Expand Down Expand Up @@ -428,6 +436,7 @@ export const actions = {
updatePlayerPoster: (poster: string) => ({type: types.UPDATE_PLAYER_POSTER, poster}),
updateIsLive: (isLive: boolean) => ({type: types.UPDATE_IS_LIVE, isLive}),
updateIsDvr: (isDvr: boolean) => ({type: types.UPDATE_IS_DVR, isDvr}),
updateIsImg: (isImg: boolean) => ({type: types.UPDATE_IS_IMG, isImg}),
updateIsIdle: (IsIdle: boolean) => ({type: types.UPDATE_IS_IDLE, IsIdle: IsIdle}),
updateFallbackToMutedAutoPlay: (fallback: boolean) => ({type: types.UPDATE_FALLBACK_TO_MUTED_AUTOPLAY, fallback}),
updateIsVr: (isVr: boolean) => ({type: types.UPDATE_IS_VR, isVr}),
Expand Down
1 change: 1 addition & 0 deletions src/ui-manager.js
Expand Up @@ -112,6 +112,7 @@ class UIManager {
{template: props => presets.errorUI(props), condition: state => state.engine.hasError},
{template: props => presets.adsUI(props), condition: state => state.engine.adBreak},
{template: props => presets.liveUI(props), condition: state => state.engine.isLive},
{template: props => presets.imgUI(props), condition: state => state.engine.isImg},
{template: props => presets.playbackUI(props)}
];
this._buildUI(uis);
Expand Down
114 changes: 114 additions & 0 deletions src/ui-presets/img.js
@@ -0,0 +1,114 @@
//@flow
import style from '../styles/style.scss';
import {Fragment, h, Component} from 'preact';
import {PlayerArea, withPlayerPreset} from '../components/player-area';
import {OverlayAction} from '../components/overlay-action';
import {PrePlaybackPlayOverlay} from '../components/pre-playback-play-overlay';
import {Loading} from '../components/loading';
import {Fullscreen} from '../components/fullscreen';
import {VrStereo} from '../components/vr-stereo';
import {BottomBar} from '../components/bottom-bar';
import {OverlayPortal} from '../components/overlay-portal';
import {UnmuteIndication} from '../components/unmute-indication';
import {Watermark} from '../components/watermark/watermark';
import {Cast} from '../components/cast';
import {CastBeforePlay} from '../components/cast-on-tv/cast-before-play';
import {PlaybackControls} from '../components/playback-controls';
import {PlaylistCountdown} from '../components/playlist-countdown';
import {PlaylistNextScreen} from '../components/playlist-next-screen';
import {PictureInPicture} from '../components/picture-in-picture';
import {PictureInPictureOverlay} from '../components/picture-in-picture-overlay';
import {TopBar} from '../components/top-bar';
import {Logo} from '../components/logo/logo';
import {InteractiveArea} from '../components/interactive-area';
import {withKeyboardEvent} from 'components/keyboard';
import {VideoArea} from '../components/video-area';
import {GuiArea} from '../components/gui-area';

const PRESET_NAME = 'Img';

/**
* Playback ui interface component
*
* @export
* @param {*} props component props
* @returns {React$Element} player ui tree
*/
@withPlayerPreset({
allowSidePanels: true,
allowPlayerArea: true
})
@withKeyboardEvent(PRESET_NAME)
class ImgUI extends Component {
/**
* @returns {void}
*/
componentDidMount(): void {
const props = this.props;
props.updateIsKeyboardEnabled(true);
}

/**
* render component
*
* @returns {React$Element} - component element
* @memberof PlaybackUI
*/
render() {
return (
<div className={style.playbackGuiWrapper}>
<PlayerArea name={'PresetArea'}>
<div className={style.playerGui} id="player-gui">
<OverlayAction />
<VideoArea />
<GuiArea>
<Fragment>
<UnmuteIndication />
<Loading />
<OverlayPortal />
<PictureInPictureOverlay />
<PlaybackControls name={'OverlayPlaybackControls'} className={style.centerPlaybackControls} />
<PlaylistNextScreen />
<PrePlaybackPlayOverlay />
<CastBeforePlay />
</Fragment>
{() => (
<Fragment>
<TopBar />
<InteractiveArea>
<Watermark />
<PlaylistCountdown />
</InteractiveArea>
<BottomBar
rightControls={
<Fragment>
<VrStereo />
<Cast />
<PictureInPicture />
<Fullscreen />
<Logo />
</Fragment>
}
/>
</Fragment>
)}
</GuiArea>
</div>
</PlayerArea>
</div>
);
}
}

ImgUI.displayName = PRESET_NAME;

/**
* Playback ui interface
*
* @export
* @param {*} props component props
* @returns {React$Element} player ui tree
*/
export function imgUI(props: any): React$Element<any> {
return <ImgUI {...props} />;
}
1 change: 1 addition & 0 deletions src/ui-presets/index.js
Expand Up @@ -3,3 +3,4 @@ export {playbackUI} from './playback';
export {adsUI} from './ads';
export {errorUI} from './error';
export {liveUI} from './live';
export {imgUI} from './img';

0 comments on commit cbdb875

Please sign in to comment.