@playkit-js/playkit-js-ui
Version:
[](https://github.com/kaltura/playkit-js-ui/actions/workflows/run_canary_full_flow.yaml) [ • 10.4 kB
text/typescript
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import isEqual from '../utils/is-equal';
import {LayoutStyles, PresetSettings, ShellState} from '../types/reducers/shell';
export const types = {
ADD_PLAYER_CLASS: 'shell/ADD_PLAYER_CLASS',
REMOVE_PLAYER_CLASS: 'shell/REMOVE_PLAYER_CLASS',
UPDATE_IS_MOBILE: 'shell/UPDATE_IS_MOBILE',
UPDATE_PLAYER_SIZE: 'shell/UPDATE_PLAYER_SIZE',
UPDATE_IS_SMALL_SIZE: 'shell/UPDATE_IS_SMALL_SIZE',
UPDATE_GUI_CLIENT_RECT: 'shell/UPDATE_GUI_CLIENT_RECT',
UPDATE_TOP_BAR_CLIENT_RECT: 'shell/UPDATE_TOP_BAR_CLIENT_RECT',
UPDATE_PLAYER_CLIENT_RECT: 'shell/UPDATE_PLAYER_CLIENT_RECT',
UPDATE_VIDEO_CLIENT_RECT: 'shell/UPDATE_VIDEO_CLIENT_RECT',
UPDATE_DOCUMENT_WIDTH: 'shell/UPDATE_DOCUMENT_WIDTH',
UPDATE_PLAYER_HOVER_STATE: 'shell/UPDATE_PLAYER_HOVER_STATE',
UPDATE_PLAYER_NAV_STATE: 'shell/UPDATE_PLAYER_NAV_STATE',
UPDATE_SMART_CONTAINER_OPEN: 'shell/UPDATE_SMART_CONTAINER_OPEN',
UPDATE_ACTIVE_PRESET_NAME: 'shell/UPDATE_ACTIVE_PRESET_NAME',
UPDATE_SIDE_PANEL_MODE: 'shell/UPDATE_SIDE_PANEL_MODE',
UPDATE_SIDE_PANEL_SIZE: 'shell/UPDATE_SIDE_PANEL_SIZE',
UPDATE_PRESET_SETTINGS: 'shell/UPDATE_PRESET_SETTINGS',
UPDATE_LAYOUT_STYLES: 'shell/UPDATE_LAYOUT_STYLES'
};
export const SidePanelOrientation = {
VERTICAL: 'vertical',
HORIZONTAL: 'horizontal'
};
export const SidePanelPositions = {
LEFT: 'left',
TOP: 'top',
BOTTOM: 'bottom',
RIGHT: 'right'
} as const;
export const SidePanelModes = {
ALONGSIDE: 'alongside',
HIDDEN: 'hidden',
OVER: 'over'
};
export const ReservedPresetNames = {
Playback: 'Playback',
Live: 'Live',
Ads: 'Ads',
Error: 'Error',
Idle: 'Idle',
Img: 'Img',
Document: 'Document',
MiniAudioUI: 'MiniAudioUI'
};
export const ReservedPresetAreas = {
PlayerArea: 'PlayerArea',
PresetArea: 'PresetArea',
InteractiveArea: 'InteractiveArea',
VideoArea: 'VideoArea',
GuiArea: 'GuiArea',
TopBar: 'TopBar',
BottomBar: 'BottomBar',
PresetFloating: 'PresetFloating',
TopBarLeftControls: 'TopBarLeftControls',
TopBarRightControls: 'TopBarRightControls',
BottomBarLeftControls: 'BottomBarLeftControls',
BottomBarRightControls: 'BottomBarRightControls',
SidePanelTop: 'SidePanelTop',
SidePanelLeft: 'SidePanelLeft',
SidePanelRight: 'SidePanelRight',
SidePanelBottom: 'SidePanelBottom',
SeekBar: 'SeekBar',
LoadingSpinner: 'LoadingSpinner'
};
/**
* @return {Object} - preset settings
*/
function createDefaultPresetSettings(): PresetSettings {
return {
allowSidePanels: false,
allowPlayerArea: false
};
}
const initialRect = {x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0};
const initialLayoutStyle = {position: 'absolute', left: 0, right: 0, top: 0, bottom: 0};
export const initialState = {
playerClasses: [],
guiClientRect: initialRect,
topBarClientRect: initialRect,
playerClientRect: initialRect,
videoClientRect: initialRect,
layoutStyles: {
video: initialLayoutStyle,
gui: initialLayoutStyle,
sidePanels: {
[SidePanelPositions.LEFT]: {} as any,
[SidePanelPositions.RIGHT]: {} as any,
[SidePanelPositions.TOP]: {} as any,
[SidePanelPositions.BOTTOM]: {} as any
}
},
playerHover: false,
playerNav: false,
smartContainerOpen: false,
activePresetName: '',
sidePanelsModes: {
[SidePanelPositions.LEFT]: SidePanelModes.HIDDEN,
[SidePanelPositions.RIGHT]: SidePanelModes.HIDDEN,
[SidePanelPositions.TOP]: SidePanelModes.HIDDEN,
[SidePanelPositions.BOTTOM]: SidePanelModes.HIDDEN
},
sidePanelsSizes: {
[SidePanelOrientation.VERTICAL]: {min: 240, max: 480, ratio: 0.33},
[SidePanelOrientation.HORIZONTAL]: {min: 144, max: 288, ratio: 0.33}
},
presetSettings: createDefaultPresetSettings()
};
export default (state: ShellState = initialState, action: any) => {
switch (action.type) {
case types.ADD_PLAYER_CLASS:
if (state.playerClasses.includes(action.className)) return state;
return {
...state,
playerClasses: [...state.playerClasses, action.className]
};
case types.REMOVE_PLAYER_CLASS:
return {
...state,
playerClasses: state.playerClasses.filter(c => c !== action.className)
};
case types.UPDATE_IS_MOBILE:
return {
...state,
isMobile: action.isMobile
};
case types.UPDATE_PLAYER_SIZE:
return {
...state,
playerSize: action.playerSize
};
case types.UPDATE_IS_SMALL_SIZE:
return {
...state,
isSmallSize: action.isSmallSize
};
case types.UPDATE_GUI_CLIENT_RECT:
return {
...state,
guiClientRect: action.guiClientRect
};
case types.UPDATE_TOP_BAR_CLIENT_RECT:
return {
...state,
topBarClientRect: action.topBarClientRect
};
case types.UPDATE_PLAYER_CLIENT_RECT:
return {
...state,
playerClientRect: action.playerClientRect
};
case types.UPDATE_LAYOUT_STYLES: {
const {sidePanels: currentSidePanelsStyle, video: currentVideoStyle, gui: currentGuiStyle} = state.layoutStyles;
const {sidePanels: nextSidePanelsStyle, video: nextVideoStyle, gui: nextGuiStyle} = action.layoutStyles;
return {
...state,
layoutStyles: {
sidePanels: {
[SidePanelPositions.LEFT]: isEqual(currentSidePanelsStyle[SidePanelPositions.LEFT], nextSidePanelsStyle[SidePanelPositions.LEFT])
? currentSidePanelsStyle[SidePanelPositions.LEFT]
: nextSidePanelsStyle[SidePanelPositions.LEFT],
[SidePanelPositions.RIGHT]: isEqual(currentSidePanelsStyle[SidePanelPositions.RIGHT], nextSidePanelsStyle[SidePanelPositions.RIGHT])
? currentSidePanelsStyle[SidePanelPositions.RIGHT]
: nextSidePanelsStyle[SidePanelPositions.RIGHT],
[SidePanelPositions.TOP]: isEqual(currentSidePanelsStyle[SidePanelPositions.TOP], nextSidePanelsStyle[SidePanelPositions.TOP])
? currentSidePanelsStyle[SidePanelPositions.TOP]
: nextSidePanelsStyle[SidePanelPositions.TOP],
[SidePanelPositions.BOTTOM]: isEqual(currentSidePanelsStyle[SidePanelPositions.BOTTOM], nextSidePanelsStyle[SidePanelPositions.BOTTOM])
? currentSidePanelsStyle[SidePanelPositions.BOTTOM]
: nextSidePanelsStyle[SidePanelPositions.BOTTOM]
},
video: isEqual(currentVideoStyle, nextVideoStyle) ? currentVideoStyle : nextVideoStyle,
gui: isEqual(currentGuiStyle, nextGuiStyle) ? currentGuiStyle : nextGuiStyle
}
};
}
case types.UPDATE_VIDEO_CLIENT_RECT:
return {
...state,
videoClientRect: action.videoClientRect
};
case types.UPDATE_DOCUMENT_WIDTH:
return {
...state,
documentWidth: action.documentWidth
};
case types.UPDATE_PLAYER_HOVER_STATE:
return {
...state,
playerHover: action.hover
};
case types.UPDATE_PLAYER_NAV_STATE:
return {
...state,
playerNav: action.nav
};
case types.UPDATE_SMART_CONTAINER_OPEN:
return {
...state,
smartContainerOpen: action.open
};
case types.UPDATE_ACTIVE_PRESET_NAME:
return {
...state,
activePresetName: action.activePresetName
};
case types.UPDATE_SIDE_PANEL_MODE:
return {
...state,
sidePanelsModes: {
...state.sidePanelsModes,
[action.position]: action.sidePanelMode
}
};
case types.UPDATE_SIDE_PANEL_SIZE: {
const {ratio, min, max} = action.options;
const prevValues = state.sidePanelsSizes[action.orientation];
const newSizes = {
ratio: typeof ratio === 'number' && ratio <= 1 ? ratio : prevValues.ratio,
min: typeof min === 'number' ? min : prevValues.min,
max: typeof max === 'number' ? max : prevValues.max
};
return {
...state,
sidePanelsSizes: {
...state.sidePanelsSizes,
[action.orientation]: newSizes
}
};
}
case types.UPDATE_PRESET_SETTINGS:
return {
...state,
presetSettings: {
...createDefaultPresetSettings(),
...(action.presetSettings || {})
}
};
default:
return state;
}
};
export const actions = {
addPlayerClass: (className: string) => ({type: types.ADD_PLAYER_CLASS, className}),
removePlayerClass: (className: string) => ({type: types.REMOVE_PLAYER_CLASS, className}),
updateIsMobile: (isMobile: boolean) => ({type: types.UPDATE_IS_MOBILE, isMobile}),
updatePlayerSize: (playerSize: string) => ({type: types.UPDATE_PLAYER_SIZE, playerSize}),
updateIsSmallSize: (isSmallSize: boolean) => ({type: types.UPDATE_IS_SMALL_SIZE, isSmallSize}),
updateGuiClientRect: (guiClientRect: any) => ({type: types.UPDATE_GUI_CLIENT_RECT, guiClientRect}),
updateTopBarClientRect: (topBarClientRect: any) => ({type: types.UPDATE_TOP_BAR_CLIENT_RECT, topBarClientRect}),
updatePlayerClientRect: (playerClientRect: any) => ({type: types.UPDATE_PLAYER_CLIENT_RECT, playerClientRect}),
updateVideoClientRect: (videoClientRect: any) => ({type: types.UPDATE_VIDEO_CLIENT_RECT, videoClientRect}),
updateDocumentWidth: (documentWidth: number) => ({type: types.UPDATE_DOCUMENT_WIDTH, documentWidth}),
updatePlayerHoverState: (hover: boolean) => ({type: types.UPDATE_PLAYER_HOVER_STATE, hover}),
updatePlayerNavState: (nav: boolean) => ({type: types.UPDATE_PLAYER_NAV_STATE, nav}),
updateSmartContainerOpen: (open: boolean) => ({type: types.UPDATE_SMART_CONTAINER_OPEN, open}),
updateActivePresetName: (activePresetName: string) => ({type: types.UPDATE_ACTIVE_PRESET_NAME, activePresetName}),
updateSidePanelMode: (position: string, sidePanelMode: string) => ({
type: types.UPDATE_SIDE_PANEL_MODE,
position,
sidePanelMode
}),
updateSidePanelSize: (orientation: string, options: any) => ({
type: types.UPDATE_SIDE_PANEL_SIZE,
orientation,
options
}),
updatePresetSettings: (presetSettings: PresetSettings) => ({type: types.UPDATE_PRESET_SETTINGS, presetSettings}),
updateLayoutStyles: (layoutStyles: LayoutStyles) => ({
type: types.UPDATE_LAYOUT_STYLES,
layoutStyles
})
} as const;