fix: settings menu simplified (#35)

settings menu simplified, filter out video and audio tracks that doesn’t have all required data. * eslint fix
kaltura · Aug 31, 2017 · 7abb9b0 · 7abb9b0
1 parent 8881c0a
commit 7abb9b0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 94 deletions.
diff --git a/src/components/language/language.js b/src/components/language/language.js
@@ -9,7 +9,6 @@ import SmartContainer from '../smart-container';
 import SmartContainerItem from '../smart-container/smart-container-item';
 import { default as Icon, IconType } from '../icon';
 import CVAAOverlay from '../cvaa-overlay';
-import Menu from '../menu';
 import Portal from 'preact-portal';
 
 /**
@@ -144,63 +143,7 @@ class LanguageControl extends BaseComponent {
   }
 
   /**
-   * render menu with audio settings only
-   *
-   * @param {Array<Object>} audioOptions - audio tracks
-   * @returns {React$Element} component element
-   * @memberof LanguageControl
-   */
-  renderAudioSettingsOnly(audioOptions: Array<Object>): React$Element<any> {
-    return (
-      <div className='control-button-container control-audio'>
-        <button
-          className={this.state.smartContainerOpen ? 'control-button active' : 'control-button'}
-          onClick={() => this.onControlButtonClick()}
-        >
-          <Icon type={IconType.Language} />
-        </button>
-        { !this.state.smartContainerOpen && !this.props.isMobile ? undefined :
-        <Menu
-          hideSelect
-          options={audioOptions}
-          onSelect={(o) => this.onAudioChange(o)}
-          onClose={() => this.setState({smartContainerOpen: false})}
-        />
-        }
-      </div>
-    )
-  }
-
-  /**
-   * render menu with text settings only
-   *
-   * @param {Array<Object>} textOptions - text tracks
-   * @returns {React$Element} - component element
-   * @memberof LanguageControl
-   */
-  renderTextSettingsOnly(textOptions: Array<Object>): React$Element<any> {
-    return (
-      <div className='control-button-container control-audio'>
-        <button
-          className={this.state.smartContainerOpen ? 'control-button active' : 'control-button'}
-          onClick={() => this.onControlButtonClick()}
-        >
-          <Icon type={IconType.Language} />
-        </button>
-        { !this.state.smartContainerOpen && !this.props.isMobile ? undefined :
-        <Menu
-          hideSelect
-          options={textOptions}
-          onSelect={(o) => this.onCaptionsChange(o)}
-          onClose={() => this.setState({smartContainerOpen: false})}
-        />
-        }
-      </div>
-    )
-  }
-
-  /**
-   * render smart container with both audio and text options
+   * render smart container with both audio and text options if exist
    *
    * @param {Array<Object>} audioOptions - audio tracks
    * @param {Array<Object>} textOptions - text tracks
@@ -224,27 +167,33 @@ class LanguageControl extends BaseComponent {
         </Localizer>
         { !this.state.smartContainerOpen || this.state.cvaaOverlay ? undefined :
         <SmartContainer title='Language' onClose={() => this.onControlButtonClick()}>
-          <Localizer>
-            <SmartContainerItem
-              icon='audio'
-              label={<Text id='language.audio' />}
-              options={audioOptions}
-              onSelect={audioTrack => this.onAudioChange(audioTrack)}
-            />
-          </Localizer>
-          <Localizer>
-            <SmartContainerItem
-              icon='captions'
-              label={<Text id='language.captions' />}
-              options={textOptions}
-              onSelect={textTrack => this.onCaptionsChange(textTrack)}
-            />
-          </Localizer>
-          <div className='smart-container-item'>
-            <a onClick={() => this.toggleCVAAOverlay()}>
-              <Text id='language.advanced_captions_settings' />
-            </a>
-          </div>
+          { audioOptions.length === 0 ? undefined :
+            <Localizer>
+              <SmartContainerItem
+                icon='audio'
+                label={<Text id='language.audio' />}
+                options={audioOptions}
+                onSelect={audioTrack => this.onAudioChange(audioTrack)}
+              />
+            </Localizer>
+          }
+          { textOptions.length === 0 ? undefined :
+            <Localizer>
+              <SmartContainerItem
+                icon='captions'
+                label={<Text id='language.captions' />}
+                options={textOptions}
+                onSelect={textTrack => this.onCaptionsChange(textTrack)}
+              />
+            </Localizer>
+          }
+          { textOptions.length === 0 ? undefined :
+            <div className='smart-container-item'>
+              <a onClick={() => this.toggleCVAAOverlay()}>
+                <Text id='language.advanced_captions_settings' />
+              </a>
+            </div>
+          }
         </SmartContainer>
         }
         { this.state.cvaaOverlay ? (
@@ -264,7 +213,9 @@ class LanguageControl extends BaseComponent {
    * @memberof LanguageControl
    */
   render(props: any): React$Element<any> | void {
-    var audioOptions = props.audioTracks.map(t => ({ label: t.label || t.language, active: t.active, value: t }));
+    var audioOptions = props.audioTracks
+      .filter(t => t.label || t.language)
+      .map(t => ({ label: t.label || t.language, active: t.active, value: t }));
     var textOptions = props.textTracks.filter(t => t.kind === 'subtitles').map(t => ({ label: t.label || t.language, active: t.active, value: t }));
 
     if (textOptions.length > 0) {
@@ -275,15 +226,9 @@ class LanguageControl extends BaseComponent {
       })
     }
 
-    if (audioOptions.length > 0 && textOptions.length > 0) {
+    if (audioOptions.length > 0 || textOptions.length > 0) {
       return this.renderAll(audioOptions, textOptions);
     }
-    else if (audioOptions.length > 0 && textOptions.length === 0) {
-      return this.renderAudioSettingsOnly(audioOptions);
-    }
-    else if (audioOptions.length === 0 && textOptions.length > 0) {
-      return this.renderTextSettingsOnly(textOptions);
-    }
     else {
       return undefined;
     }

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
@@ -175,6 +175,9 @@ class SettingsControl extends BaseComponent {
       }, []);
 
     let qualityOptions = props.videoTracks
+      .filter(t => {
+        return t.bandwidth || t.height
+      })
       .sort((a, b) => {
         return a.bandwidth < b.bandwidth
       })
@@ -184,12 +187,14 @@ class SettingsControl extends BaseComponent {
         value: t
       }));
 
-    qualityOptions
-      .unshift({
-        label: 'Auto',
-        active: this.player.isAdaptiveBitrateEnabled(),
-        value: 'auto'
-      });
+    if (qualityOptions.length > 1) {
+      qualityOptions
+        .unshift({
+          label: 'Auto',
+          active: this.player.isAdaptiveBitrateEnabled(),
+          value: 'auto'
+        });
+    }
 
     return (
       <div
@@ -208,7 +213,7 @@ class SettingsControl extends BaseComponent {
         { !this.state.smartContainerOpen ? '' :
         <SmartContainer title='Settings' onClose={() => this.onControlButtonClick()}>
           {
-            props.videoTracks.length <= 0 ? '' :
+            qualityOptions.length === 0 ? '' :
             <Localizer>
               <SmartContainerItem icon='quality' label={<Text id='settings.quality' />} options={qualityOptions} onSelect={(o) => this.onQualityChange(o)} />
             </Localizer>