Add button to slim player controls to toggle info box

app/assets/stylesheets/pageflow/themes/default/player_controls/classic/control_bar.scss

@@ -220,7 +220,7 @@ $classic-player-controls-timestamp-position: "left" !default;
     }
   }
 
-  &-page_with_progress_bar {
+  &-page-with_progress_bar {
     %player_controls-control_bar_text {
       display: none;
     }

app/assets/stylesheets/pageflow/themes/default/player_controls/classic/menu_bar.scss

@@ -2,4 +2,8 @@
   &-menu_bar {
     right: 10px;
   }
+
+  &-toggle_info_box_menu_button {
+    display: none;
+  }
 }

app/assets/stylesheets/pageflow/themes/default/player_controls/slim/menu_bar.scss

@@ -11,3 +11,13 @@
     right: 20px;
   }
 }
+
+%player_controls-page-audio .player_controls-toggle_info_box_menu_button {
+  display: none;
+}
+
+@include phone {
+  .player_controls-toggle_info_box_menu_button {
+    display: none;
+  }
+}

app/assets/stylesheets/pageflow/themes/default/player_controls/vjs_mapping.scss

@@ -1,7 +1,8 @@
 // Map placeholder names to concrete vjs css class names.
 
 $vjs-selector-mapping: (
-  page_with_progress_bar: ".audioPage, .videoPage",
+  page-with_progress_bar: ".audioPage, .videoPage",
+  page-audio: ".audioPage",
 
   background: ".page_background-for_page_with_player_controls",
 

config/locales/new/toggle_info_box.de.yml

@@ -0,0 +1,4 @@
+de:
+  pageflow:
+    public:
+      toggle_info_box: "Info Box ein-/ausblenden"

config/locales/new/toggle_info_box.en.yml

@@ -0,0 +1,4 @@
+en:
+  pageflow:
+    public:
+      toggle_info_box: "Toggle info box"

node_package/src/media/components/PlayerControls.jsx

@@ -1,5 +1,5 @@
 import playerStateClassNames from './playerStateClassNames';
-import PlayerControls from 'components/PlayerControls';
+import PlayerControls, {isInfoBoxEmpty} from 'components/PlayerControls';
 import {combineSelectors} from 'utils';
 
 import {videoQualitySetting} from 'media/selectors';
@@ -50,7 +50,11 @@ export function MediaPlayerControls(props) {
                     watchVisibility={playerState.isPlaying}
                     onHidden={actions.controlsHidden}
 
+                    additionalMenuBarButtons={additionalMenuBarButtons(props)}
                     infoBoxHiddenDuringPlayback={infoBoxHiddenDuringPlayback(props)}
+                    onAdditionalButtonMouseEnter={actions.showInfoBoxDuringPlayback}
+                    onAdditionalButtonMouseLeave={actions.hideInfoBoxDuringPlayback}
+                    onAdditionalButtonClick={actions.toggleInfoBoxDuringPlayback}
 
                     qualityMenuItems={qualityMenuItems(props.qualities,
                                                        props.file,
@@ -92,6 +96,23 @@ function className(playerState) {
   return classNames(playerStateClassNames(playerState));
 }
 
+function additionalMenuBarButtons(props) {
+  const t = props.t;
+
+  if (isInfoBoxEmpty(props.infoBox)) {
+    return [];
+  }
+
+  return [
+    {
+      name: 'toggleInfoBox',
+      className: 'player_controls-toggle_info_box_menu_button',
+      label: t('pageflow.public.toggle_info_box'),
+      iconName: 'toggleInfoBox'
+    }
+  ];
+}
+
 function infoBoxHiddenDuringPlayback(props) {
   const playerState = props.playerState;
 

node_package/src/media/components/__spec__/PlayerControls-spec.jsx

@@ -8,6 +8,7 @@ describe('PlayerControls', () => {
   const requiredProps = {
     playerState: {},
     playerActions: {},
+    infoBox: {},
     t: () => {}
   };