Skip to content

Commit

Permalink
fix(FEC-8717): when player ui is small the captions language options …
Browse files Browse the repository at this point in the history 
…dropdown is cut (#324)

* reposition of the drop down

* mobile menus look and fill when player is loaded in small size.

* listening to resize events

* supporting resize event: fix the target Id

* remove old changes

* remove redundant this.

* added style for the small sized player.

* fix flow

* remove touch class for small view

* reuse touch style.

* pr changes

move all logic to shell
remove unnessery ':not' in the scss

* check for playerSize instead of ifSmallView

* flow fixes , pr fixes

* const naming

* fix if syntax

* remove class
  • Loading branch information
@odedhutzler
odedhutzler committed Jan 23, 2019
1 parent e945563 commit f5ca361
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 48 deletions.
6 changes: 4 additions & 2 deletions src/components/dropdown/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import {connect} from 'preact-redux';
import {Menu} from '../menu';
import {default as Icon, IconType} from '../icon';
import {KeyMap} from '../../utils/key-map';
import {PLAYER_SIZE} from '../shell/shell';

/**
* mapping state to props
* @param {*} state - redux store state
* @returns {Object} - mapped state to this component
*/
const mapStateToProps = state => ({
isMobile: state.shell.isMobile
isMobile: state.shell.isMobile,
playerSize: state.shell.playerSize
});

@connect(mapStateToProps)
Expand Down Expand Up @@ -123,7 +125,7 @@ class DropDown extends Component {
* @memberof DropDown
*/
render(props: any): React$Element<any> {
return props.isMobile ? (
return props.isMobile || props.playerSize === PLAYER_SIZE.SMALL ? (
this.renderNativeSelect()
) : (
<div
Expand Down
7 changes: 5 additions & 2 deletions src/components/language/language.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {default as Icon, IconType} from '../icon';
import {CVAAOverlay} from '../cvaa-overlay';
import Portal from 'preact-portal';
import {KeyMap} from '../../utils/key-map';
import {PLAYER_SIZE} from '../shell/shell';

/**
* mapping state to props
Expand All @@ -22,7 +23,8 @@ const mapStateToProps = state => ({
audioTracks: state.engine.audioTracks,
textTracks: state.engine.textTracks,
overlayOpen: state.cvaa.overlayOpen,
isMobile: state.shell.isMobile
isMobile: state.shell.isMobile,
playerSize: state.shell.playerSize
});

@connect(
Expand Down Expand Up @@ -83,7 +85,8 @@ class LanguageControl extends BaseComponent {
!this.props.isMobile &&
!this._controlLanguageElement.contains(e.target) &&
this.state.smartContainerOpen &&
!this.state.cvaaOverlay
!this.state.cvaaOverlay &&
this.props.playerSize !== PLAYER_SIZE.SMALL
) {
if (e.target.classList.contains('overlay-action')) {
e.stopPropagation();
Expand Down
14 changes: 9 additions & 5 deletions src/components/menu/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {default as Icon, IconType} from '../icon';
import {connect} from 'preact-redux';
import {KeyMap} from '../../utils/key-map';
import {bindMethod} from '../../utils/bind-method';
import {PLAYER_SIZE} from '../shell/shell';

/**
* mapping state to props
Expand All @@ -13,7 +14,8 @@ import {bindMethod} from '../../utils/bind-method';
*/
const mapStateToProps = state => ({
isMobile: state.shell.isMobile,
playerClientRect: state.shell.playerClientRect
playerClientRect: state.shell.playerClientRect,
playerSize: state.shell.playerSize
});

@connect(mapStateToProps)
Expand Down Expand Up @@ -60,7 +62,7 @@ class Menu extends Component {
*/
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
if (!this.props.isMobile) {
if (!this.props.isMobile && this.props.playerSize !== PLAYER_SIZE.SMALL) {
this.setState({position: this.getPosition()});
}
}
Expand Down Expand Up @@ -101,7 +103,7 @@ class Menu extends Component {
* @memberof Menu
*/
handleClickOutside(e: any) {
if (!this.props.isMobile && this._menuElement && !this._menuElement.contains(e.target)) {
if (!this.props.isMobile && this.props.playerSize !== PLAYER_SIZE.SMALL && this._menuElement && !this._menuElement.contains(e.target)) {
e.stopPropagation();
this.props.onClose();
}
Expand Down Expand Up @@ -175,8 +177,10 @@ class Menu extends Component {
* @memberof Menu
*/
renderNativeSelect(): React$Element<any> {
let classes = this.props.hideSelect ? style.mobileHiddenSelect : '';
classes += ` ${style.dropdown}`;
return (
<select className={this.props.hideSelect ? style.mobileHiddenSelect : ''} onChange={e => this.onSelect(this.props.options[e.target.value])}>
<select className={classes} onChange={e => this.onSelect(this.props.options[e.target.value])}>
{this.props.options.map((o, index) => (
<option selected={this.isSelected(o)} value={index} key={index}>
{o.label}
Expand All @@ -195,7 +199,7 @@ class Menu extends Component {
* @memberof Menu
*/
render(props: any): React$Element<any> {
return props.isMobile ? (
return props.isMobile || props.playerSize === PLAYER_SIZE.SMALL ? (
this.renderNativeSelect()
) : (
<div ref={c => (this._menuElement = c)} className={[style.dropdownMenu, ...this.state.position].join(' ')}>
Expand Down
12 changes: 10 additions & 2 deletions src/components/settings/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import BaseComponent from '../base';
import {SmartContainer} from '../smart-container';
import {SmartContainerItem} from '../smart-container/smart-container-item';
import {default as Icon, IconType} from '../icon';
import {PLAYER_SIZE} from '../shell/shell';

/**
* mapping state to props
Expand All @@ -18,7 +19,8 @@ import {default as Icon, IconType} from '../icon';
const mapStateToProps = state => ({
videoTracks: state.engine.videoTracks,
isMobile: state.shell.isMobile,
isLive: state.engine.isLive
isLive: state.engine.isLive,
playerSize: state.shell.playerSize
});

@connect(
Expand Down Expand Up @@ -73,7 +75,13 @@ class SettingsControl extends BaseComponent {
* @memberof SettingsControl
*/
handleClickOutside(e: any) {
if (!this.props.isMobile && !!this._controlSettingsElement && !this._controlSettingsElement.contains(e.target) && this.state.smartContainerOpen) {
if (
!this.props.isMobile &&
this.props.playerSize !== PLAYER_SIZE.SMALL &&
!!this._controlSettingsElement &&
!this._controlSettingsElement.contains(e.target) &&
this.state.smartContainerOpen
) {
if (e.target.classList.contains(style.overlayPlay)) {
e.stopPropagation();
}
Expand Down
33 changes: 28 additions & 5 deletions src/components/shell/shell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const mapStateToProps = state => ({
currentState: state.engine.playerState.currentState,
playerClasses: state.shell.playerClasses,
isMobile: state.shell.isMobile,
playerSize: state.shell.playerSize,
isCasting: state.engine.isCasting,
playerClientRect: state.shell.playerClientRect,
playerHover: state.shell.playerHover,
Expand All @@ -41,7 +42,20 @@ const mapStateToProps = state => ({
* @type {number}
* @const
*/
export const CONTROL_BAR_HOVER_DEFAULT_TIMEOUT: number = 3000;
const CONTROL_BAR_HOVER_DEFAULT_TIMEOUT: number = 3000;

const PLAYER_SIZE: {[size: string]: string} = {
SMALL: 'small',
MEDIUM: 'medium',
LARGE: 'large',
EXTRA_LARGE: 'extralarge'
};

const PLAYER_BREAK_POINTS: {[size: string]: number} = {
SMALL: 480,
MEDIUM: 768,
LARGE: 1024
};

@connect(
mapStateToProps,
Expand Down Expand Up @@ -313,9 +327,18 @@ class Shell extends BaseComponent {
if (this.props.seekbarDraggingActive) playerClasses.push(style.hover);
if (this.props.fullscreen) playerClasses.push(style.fullscreen);
if (this.props.playlist) playerClasses.push(style.playlist);
if (this.props.playerClientRect && this.props.playerClientRect.width <= 480) playerClasses.push(style.sizeSm);
else if (this.props.playerClientRect && this.props.playerClientRect.width <= 768) playerClasses.push(style.sizeMd);
else if (this.props.playerClientRect && this.props.playerClientRect.width <= 1024) playerClasses.push(style.sizeLg);
if (this.props.playerClientRect && this.props.playerClientRect.width <= PLAYER_BREAK_POINTS.SMALL) {
playerClasses.push(style.sizeSm);
this.props.updatePlayerSize(PLAYER_SIZE.SMALL);
} else if (this.props.playerClientRect && this.props.playerClientRect.width <= PLAYER_BREAK_POINTS.MEDIUM) {
playerClasses.push(style.sizeMd);
this.props.updatePlayerSize(PLAYER_SIZE.MEDIUM);
} else if (this.props.playerClientRect && this.props.playerClientRect.width <= PLAYER_BREAK_POINTS.LARGE) {
playerClasses.push(style.sizeLg);
this.props.updatePlayerSize(PLAYER_SIZE.LARGE);
} else {
this.props.updatePlayerSize(PLAYER_SIZE.EXTRA_LARGE);
}

playerClasses = playerClasses.join(' ');

Expand All @@ -335,4 +358,4 @@ class Shell extends BaseComponent {
}
}

export {Shell};
export {Shell, CONTROL_BAR_HOVER_DEFAULT_TIMEOUT, PLAYER_SIZE};
62 changes: 32 additions & 30 deletions src/components/smart-container/_smart-container.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,39 +95,41 @@
}
}

.touch {
.smart-container-item {
width: 300px;
max-width: 100%;
margin: 16px auto;
color: rgba(244, 244, 244, 0.8);
white-space: nowrap;
text-align: left;
display: flex;
justify-content: space-between;
.player {
&.touch, &.size-sm {
.smart-container-item {
width: 300px;
max-width: 100%;
margin: 16px auto;
color: rgba(244, 244, 244, 0.8);
white-space: nowrap;
text-align: left;
display: flex;
justify-content: space-between;

&.select-menu-item {
label {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
margin-right: 20px;
&.select-menu-item {
label {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
margin-right: 20px;

.label-icon {
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
margin-right: 16px;
.label-icon {
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
margin-right: 16px;
}
}
.dropdown,
select {
align-self: flex-end;
}
select {
text-align-last: right;
min-width: 1px;
line-height: 24px;
}
}
.dropdown,
select {
align-self: flex-end;
}
select {
text-align-last: right;
min-width: 1px;
line-height: 24px;
}
}
}
Expand Down
6 changes: 4 additions & 2 deletions src/components/smart-container/smart-container.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ import {actions} from '../../reducers/shell';
import Portal from 'preact-portal';
import {Overlay} from '../overlay';
import {KeyMap} from '../../utils/key-map';
import {PLAYER_SIZE} from '../shell/shell';

/**
* mapping state to props
* @param {*} state - redux store state
* @returns {Object} - mapped state to this component
*/
const mapStateToProps = state => ({
isMobile: state.shell.isMobile
isMobile: state.shell.isMobile,
playerSize: state.shell.playerSize
});

@connect(
Expand Down Expand Up @@ -69,7 +71,7 @@ class SmartContainer extends Component {
*/
render(props: any): React$Element<any> {
const portalSelector = `#${this.props.targetId} .overlay-portal`;
return props.isMobile ? (
return props.isMobile || props.playerSize === PLAYER_SIZE.SMALL ? (
<Portal into={portalSelector}>
<Overlay open onClose={() => props.onClose()}>
<div className={style.title}>{props.title}</div>
Expand Down
8 changes: 8 additions & 0 deletions src/reducers/shell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ 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_PLAYER_CLIENT_RECT: 'shell/UPDATE_PLAYER_CLIENT_RECT',
UPDATE_DOCUMENT_WIDTH: 'shell/UPDATE_DOCUMENT_WIDTH',
UPDATE_PLAYER_HOVER_STATE: 'shell/UPDATE_PLAYER_HOVER_STATE',
Expand Down Expand Up @@ -39,6 +40,12 @@ export default (state: Object = initialState, action: Object) => {
isMobile: action.isMobile
};

case types.UPDATE_PLAYER_SIZE:
return {
...state,
playerSize: action.playerSize
};

case types.UPDATE_PLAYER_CLIENT_RECT:
return {
...state,
Expand Down Expand Up @@ -84,6 +91,7 @@ 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}),
updatePlayerClientRect: (playerClientRect: Object) => ({type: types.UPDATE_PLAYER_CLIENT_RECT, playerClientRect}),
updateDocumentWidth: (documentWidth: number) => ({type: types.UPDATE_DOCUMENT_WIDTH, documentWidth}),
updatePlayerHoverState: (hover: boolean) => ({type: types.UPDATE_PLAYER_HOVER_STATE, hover}),
Expand Down

0 comments on commit f5ca361

Please sign in to comment.