refactor(Settings): add audio language setting for player

src/routes/Settings/Settings.js

@@ -28,6 +28,7 @@ const Settings = () => {
         subtitlesTextColorInput,
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
+        audioLanguageSelect,
         seekTimeDurationSelect,
         bingeWatchingCheckbox,
         playInBackgroundCheckbox,
@@ -310,6 +311,15 @@ const Settings = () => {
                                 {...subtitlesOutlineColorInput}
                             />
                         </div>
+                        <div className={styles['option-container']}>
+                            <div className={styles['option-name-container']}>
+                                <div className={styles['label']}>Audio Language</div>
+                            </div>
+                            <Multiselect
+                                className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                {...audioLanguageSelect}
+                            />
+                        </div>
                         <div className={styles['option-container']}>
                             <div className={styles['option-name-container']}>
                                 <div className={styles['label']}>Rewind & Fast-forward duration</div>

src/routes/Settings/useProfileSettingsInputs.js

@@ -111,6 +111,25 @@ const useProfileSettingsInputs = (profile) => {
             });
         }
     }), [profile.settings]);
+    const audioLanguageSelect = useDeepEqualMemo(() => ({
+        options: Object.keys(languageNames).map((code) => ({
+            value: code,
+            label: languageNames[code]
+        })),
+        selected: [profile.settings.audioLanguage],
+        onSelect: (event) => {
+            core.transport.dispatch({
+                action: 'Ctx',
+                args: {
+                    action: 'UpdateSettings',
+                    args: {
+                        ...profile.settings,
+                        audioLanguage: event.value
+                    }
+                }
+            });
+        }
+    }), [profile.settings]);
     const seekTimeDurationSelect = useDeepEqualMemo(() => ({
         options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
             value: `${size}`,
@@ -215,6 +234,7 @@ const useProfileSettingsInputs = (profile) => {
         subtitlesTextColorInput,
         subtitlesBackgroundColorInput,
         subtitlesOutlineColorInput,
+        audioLanguageSelect,
         seekTimeDurationSelect,
         bingeWatchingCheckbox,
         playInBackgroundCheckbox,