fix(FEC-7922): dropdown in CVAA menu is cut and isn't displayed corre…

…ctly (#177)

src/components/dropdown/dropdown.js

@@ -25,6 +25,7 @@ const mapStateToProps = state => ({
    */
 class DropDown extends Component {
   state: Object;
+  _el: HTMLDivElement;
 
   /**
    * before component mounted, set initial internal state
@@ -130,7 +131,8 @@ class DropDown extends Component {
   render(props: any): React$Element<any> {
     return props.isMobile ? this.renderNativeSelect() :
       (
-        <div className={this.state.dropMenuActive ? [style.dropdown, style.active].join(' ') : style.dropdown}>
+        <div className={this.state.dropMenuActive ? [style.dropdown, style.active].join(' ') : style.dropdown}
+             ref={el => this._el = el}>
           <div
             tabIndex="0"
             className={style.dropdownButton}
@@ -142,6 +144,7 @@ class DropDown extends Component {
           {
             !this.state.dropMenuActive ? undefined :
               <Menu
+                parentEl={this._el}
                 options={props.options}
                 onSelect={(o) => this.onSelect(o)}
                 onClose={() => this.onClose()}/>

src/components/menu/menu.js

@@ -11,7 +11,8 @@ import {KeyMap} from "../../utils/key-map";
  * @returns {Object} - mapped state to this component
  */
 const mapStateToProps = state => ({
-  isMobile: state.shell.isMobile
+  isMobile: state.shell.isMobile,
+  playerHeight: state.shell.playerHeight
 });
 
 @connect(mapStateToProps)
@@ -27,7 +28,6 @@ const mapStateToProps = state => ({
    * @extends {Component}
    */
 class Menu extends Component {
-
   _menuElement: any;
   state: Object;
 
@@ -69,11 +69,13 @@ class Menu extends Component {
    * @memberof Menu
    */
   getPosition(): Array<string> {
-    let box = this._menuElement.getBoundingClientRect();
-    if (box.top < 0) {
+    const playerHeight = this.props.playerHeight;
+    const parentOffsetTop = this.props.parentEl.offsetTop;
+    const offsetBottom = playerHeight - parentOffsetTop;
+    const box = this._menuElement.getBoundingClientRect();
+    if (offsetBottom + box.height > playerHeight) {
       return [style.bottom, style.left];
-    }
-    else {
+    } else {
       return [style.top, style.left];
     }
   }

src/components/shell/shell.js

@@ -140,9 +140,11 @@ class Shell extends BaseComponent {
     }
     this.player.addEventListener(this.player.Event.LOADED_METADATA, () => {
       this.props.updatePlayerWidth(this.player.getView().parentElement.clientWidth);
+      this.props.updatePlayerHeight(this.player.getView().parentElement.offsetHeight);
     });
     window.addEventListener('resize', () => {
       this.props.updatePlayerWidth(this.player.getView().parentElement.clientWidth);
+      this.props.updatePlayerHeight(this.player.getView().parentElement.offsetHeight);
 
       if (document.body) {
         this.props.updateDocumentWidth(document.body.clientWidth);

src/reducers/shell.js

@@ -5,6 +5,7 @@ export const types = {
   UPDATE_IS_MOBILE: 'shell/UPDATE_IS_MOBILE',
   UPDATE_PRE_PLAYBACK: 'shell/UPDATE_PRE_PLAYBACK',
   UPDATE_PLAYER_WIDTH: 'shell/UPDATE_PLAYER_WIDTH',
+  UPDATE_PLAYER_HEIGHT: 'shell/UPDATE_PLAYER_HEIGHT',
   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'
@@ -45,6 +46,12 @@ export default (state: Object = initialState, action: Object) => {
         prePlayback: action.prePlayback
       };
 
+    case types.UPDATE_PLAYER_HEIGHT:
+      return {
+        ...state,
+        playerHeight: action.playerHeight
+      };
+
     case types.UPDATE_PLAYER_WIDTH:
       return {
         ...state,
@@ -80,6 +87,7 @@ export const actions = {
   updateIsMobile: (isMobile: boolean) => ({type: types.UPDATE_IS_MOBILE, isMobile}),
   updatePrePlayback: (prePlayback: boolean) => ({type: types.UPDATE_PRE_PLAYBACK, prePlayback}),
   updatePlayerWidth: (playerWidth: number) => ({type: types.UPDATE_PLAYER_WIDTH, playerWidth}),
+  updatePlayerHeight: (playerHeight: number) => ({type: types.UPDATE_PLAYER_HEIGHT, playerHeight}),
   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})

src/styles/_dropdown.scss

@@ -54,7 +54,7 @@
   padding: 6px 0;
   z-index: 5;
   animation: openDropmenu 100ms ease-out forwards;
-  max-height: 173px;
+  max-height: 220px;
   overflow-y: auto;
   font-size: 15px;
   text-align: left;