refactor(media): Renaming MediaSetting to Settings (#1371)

* refactor(media): Renaming MediaSetting to Settings

* chore: pr comments

* chore: pr comments

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

src/lib/viewers/controls/media/MediaSettings/MediaSettingsAutoplay.tsx → src/lib/viewers/controls/media/MediaSettingsMenuAutoplay.tsx

@@ -1,34 +1,34 @@
 import React from 'react';
-import MediaSettings, { Menu } from '.';
+import Settings, { Menu } from '../settings';
 
 export type Props = {
     autoplay: boolean;
     onAutoplayChange: (autoplay: boolean) => void;
 };
 
 export default function MediaSettingsMenuAutoplay({ autoplay, onAutoplayChange }: Props): JSX.Element {
-    const { setActiveMenu } = React.useContext(MediaSettings.Context);
+    const { setActiveMenu } = React.useContext(Settings.Context);
 
     const handleChange = (value: boolean): void => {
         setActiveMenu(Menu.MAIN);
         onAutoplayChange(value);
     };
 
     return (
-        <MediaSettings.Menu name={Menu.AUTOPLAY}>
-            <MediaSettings.MenuBack label={__('media_autoplay')} />
-            <MediaSettings.RadioItem
+        <Settings.Menu name={Menu.AUTOPLAY}>
+            <Settings.MenuBack label={__('media_autoplay')} />
+            <Settings.RadioItem
                 isSelected={!autoplay}
                 label={__('media_autoplay_disabled')}
                 onChange={handleChange}
                 value={false}
             />
-            <MediaSettings.RadioItem
+            <Settings.RadioItem
                 isSelected={autoplay}
                 label={__('media_autoplay_enabled')}
                 onChange={handleChange}
                 value
             />
-        </MediaSettings.Menu>
+        </Settings.Menu>
     );
 }

src/lib/viewers/controls/media/MediaSettingsMenuRate.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Settings, { Menu } from '../settings';
+
+export type Props = {
+    onRateChange: (rate: string) => void;
+    rate: string;
+};
+
+export default function MediaSettingsMenuRate({ rate, onRateChange }: Props): JSX.Element {
+    const { setActiveMenu } = React.useContext(Settings.Context);
+
+    const handleChange = (value: string): void => {
+        setActiveMenu(Menu.MAIN);
+        onRateChange(value);
+    };
+
+    return (
+        <Settings.Menu name={Menu.RATE}>
+            <Settings.MenuBack label={__('media_speed')} />
+            <Settings.RadioItem isSelected={rate === '0.5'} onChange={handleChange} value="0.5" />
+            <Settings.RadioItem
+                isSelected={rate === '1.0'}
+                label={__('media_speed_normal')}
+                onChange={handleChange}
+                value="1.0"
+            />
+            <Settings.RadioItem isSelected={rate === '1.25'} onChange={handleChange} value="1.25" />
+            <Settings.RadioItem isSelected={rate === '1.5'} onChange={handleChange} value="1.5" />
+            <Settings.RadioItem isSelected={rate === '2.0'} onChange={handleChange} value="2.0" />
+        </Settings.Menu>
+    );
+}

src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsAutoplay-test.tsx → src/lib/viewers/controls/media/__tests__/MediaSettingsMenuAutoplay-test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
-import MediaSettings, { Context, Menu } from '..';
-import MediaSettingsAutoplay from '../MediaSettingsAutoplay';
+import MediaSettingsMenu from '../MediaSettingsMenuAutoplay';
+import Settings, { Context, Menu } from '../../settings';
 
-describe('MediaSettingsAutoplay', () => {
+describe('MediaSettingsMenuAutoplay', () => {
     const getContext = (): Partial<Context> => ({ setActiveMenu: jest.fn() });
     const getWrapper = (props = {}, context = getContext()): ReactWrapper =>
-        mount(<MediaSettingsAutoplay autoplay onAutoplayChange={jest.fn()} {...props} />, {
-            wrappingComponent: MediaSettings.Context.Provider,
+        mount(<MediaSettingsMenu autoplay onAutoplayChange={jest.fn()} {...props} />, {
+            wrappingComponent: Settings.Context.Provider,
             wrappingComponentProps: { value: context },
         });
 
@@ -35,8 +35,8 @@ describe('MediaSettingsAutoplay', () => {
         test('should return a valid wrapper', () => {
             const wrapper = getWrapper();
 
-            expect(wrapper.exists(MediaSettings.MenuBack)).toBe(true);
-            expect(wrapper.exists(MediaSettings.RadioItem)).toBe(true);
+            expect(wrapper.exists(Settings.MenuBack)).toBe(true);
+            expect(wrapper.exists(Settings.RadioItem)).toBe(true);
         });
     });
 });

src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRate-test.tsx → src/lib/viewers/controls/media/__tests__/MediaSettingsMenuRate-test.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
-import MediaSettings, { Context, Menu } from '..';
-import MediaSettingsRate from '../MediaSettingsRate';
+import MediaSettingsMenuRate from '../MediaSettingsMenuRate';
+import Settings, { Context, Menu } from '../../settings';
 
-describe('MediaSettingsRate', () => {
+describe('SettingsRate', () => {
     const getContext = (): Partial<Context> => ({ setActiveMenu: jest.fn() });
     const getWrapper = (props = {}, context = getContext()): ReactWrapper =>
-        mount(<MediaSettingsRate onRateChange={jest.fn()} rate="1.0" {...props} />, {
-            wrappingComponent: MediaSettings.Context.Provider,
+        mount(<MediaSettingsMenuRate onRateChange={jest.fn()} rate="1.0" {...props} />, {
+            wrappingComponent: Settings.Context.Provider,
             wrappingComponentProps: { value: context },
         });
 
@@ -35,8 +35,8 @@ describe('MediaSettingsRate', () => {
         test('should return a valid wrapper', () => {
             const wrapper = getWrapper();
 
-            expect(wrapper.exists(MediaSettings.MenuBack)).toBe(true);
-            expect(wrapper.exists(MediaSettings.RadioItem)).toBe(true);
+            expect(wrapper.exists(Settings.MenuBack)).toBe(true);
+            expect(wrapper.exists(Settings.RadioItem)).toBe(true);
         });
     });
 });

src/lib/viewers/controls/media/MediaSettings/MediaSettings.tsx → src/lib/viewers/controls/settings/Settings.tsx

@@ -1,24 +1,24 @@
 import React from 'react';
 import classNames from 'classnames';
-import MediaSettingsContext, { Menu, Rect } from './MediaSettingsContext';
-import MediaSettingsFlyout from './MediaSettingsFlyout';
-import MediaSettingsMenu from './MediaSettingsMenu';
-import MediaSettingsMenuBack from './MediaSettingsMenuBack';
-import MediaSettingsMenuItem from './MediaSettingsMenuItem';
-import MediaSettingsRadioItem from './MediaSettingsRadioItem';
-import MediaSettingsToggle, { Ref as MediaSettingsToggleRef } from './MediaSettingsToggle';
-import { decodeKeydown } from '../../../../util';
+import SettingsContext, { Menu, Rect } from './SettingsContext';
+import SettingsFlyout from './SettingsFlyout';
+import SettingsMenu from './SettingsMenu';
+import SettingsMenuBack from './SettingsMenuBack';
+import SettingsMenuItem from './SettingsMenuItem';
+import SettingsRadioItem from './SettingsRadioItem';
+import SettingsToggle, { Ref as SettingsToggleRef } from './SettingsToggle';
+import { decodeKeydown } from '../../../util';
 
 export type Props = React.PropsWithChildren<{
     className?: string;
 }>;
 
-export default function MediaSettings({ children, className, ...rest }: Props): JSX.Element | null {
+export default function Settings({ children, className, ...rest }: Props): JSX.Element | null {
     const [activeMenu, setActiveMenu] = React.useState(Menu.MAIN);
     const [activeRect, setActiveRect] = React.useState<Rect>();
     const [isFocused, setIsFocused] = React.useState(false);
     const [isOpen, setIsOpen] = React.useState(false);
-    const buttonElRef = React.useRef<MediaSettingsToggleRef>(null);
+    const buttonElRef = React.useRef<SettingsToggleRef>(null);
     const controlsElRef = React.useRef<HTMLDivElement>(null);
     const resetControls = React.useCallback(() => {
         setActiveMenu(Menu.MAIN);
@@ -73,21 +73,21 @@ export default function MediaSettings({ children, className, ...rest }: Props):
     return (
         <div
             ref={controlsElRef}
-            className={classNames('bp-MediaSettings', className, { 'bp-is-focused': isFocused })}
+            className={classNames('bp-Settings', className, { 'bp-is-focused': isFocused })}
             onKeyDown={handleKeyDown}
             role="presentation"
             {...rest}
         >
-            <MediaSettingsContext.Provider value={{ activeMenu, activeRect, setActiveMenu, setActiveRect }}>
-                <MediaSettingsToggle ref={buttonElRef} isOpen={isOpen} onClick={handleClick} />
-                <MediaSettingsFlyout isOpen={isOpen}>{children}</MediaSettingsFlyout>
-            </MediaSettingsContext.Provider>
+            <SettingsContext.Provider value={{ activeMenu, activeRect, setActiveMenu, setActiveRect }}>
+                <SettingsToggle ref={buttonElRef} isOpen={isOpen} onClick={handleClick} />
+                <SettingsFlyout isOpen={isOpen}>{children}</SettingsFlyout>
+            </SettingsContext.Provider>
         </div>
     );
 }
 
-MediaSettings.Context = MediaSettingsContext;
-MediaSettings.Menu = MediaSettingsMenu;
-MediaSettings.MenuBack = MediaSettingsMenuBack;
-MediaSettings.MenuItem = MediaSettingsMenuItem;
-MediaSettings.RadioItem = MediaSettingsRadioItem;
+Settings.Context = SettingsContext;
+Settings.Menu = SettingsMenu;
+Settings.MenuBack = SettingsMenuBack;
+Settings.MenuItem = SettingsMenuItem;
+Settings.RadioItem = SettingsRadioItem;