VidoePlayer 컨트롤러 포커스 안가게 수정

com.twin.app.shoptime/src/components/MediaPlayer/MediaSlider.js

@@ -1,12 +1,13 @@
-import kind from '@enact/core/kind';
-import PropTypes from 'prop-types';
 import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import kind from '@enact/core/kind';
 import Slider from '@enact/sandstone/Slider';
 
 import MediaKnob from './MediaKnob';
-import MediaSliderDecorator from './MediaSliderDecorator';
-
 import css from './MediaSlider.module.less';
+import MediaSliderDecorator from './MediaSliderDecorator';
 
 /**
  * The base component to render a customized [Slider]{@link sandstone/Slider.Slider} for use in
@@ -18,86 +19,96 @@ import css from './MediaSlider.module.less';
  * @private
  */
 const MediaSliderBase = kind({
-	name: 'MediaSlider',
+  name: "MediaSlider",
 
-	propTypes: /** @lends sandstone/MediaPlayer.MediaSlider.prototype */ {
+  propTypes: /** @lends sandstone/MediaPlayer.MediaSlider.prototype */ {
+    /**
+     * When `true`, the knob will expand. Note that Slider is a controlled
+     * component. Changing the value would only affect pressed visual and
+     * not the state.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    forcePressed: PropTypes.bool,
 
-		/**
-		 * When `true`, the knob will expand. Note that Slider is a controlled
-		 * component. Changing the value would only affect pressed visual and
-		 * not the state.
-		 *
-		 * @type {Boolean}
-		 * @public
-		 */
-		forcePressed: PropTypes.bool,
+    /**
+     * Allow moving the knob via pointer or 5-way without emitting `onChange` events
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    preview: PropTypes.bool,
 
-		/**
-		 * Allow moving the knob via pointer or 5-way without emitting `onChange` events
-		 *
-		 * @type {Boolean}
-		 * @default false
-		 * @public
-		 */
-		preview: PropTypes.bool,
+    /**
+     * The position of the knob when in `preview` mode
+     *
+     * @type {Number}
+     * @public
+     */
+    previewProportion: PropTypes.number,
 
-		/**
-		 * The position of the knob when in `preview` mode
-		 *
-		 * @type {Number}
-		 * @public
-		 */
-		previewProportion: PropTypes.number,
+    /**
+     * The visibility of the component. When `false`, the component will be hidden.
+     *
+     * @type {Boolean}
+     * @default true
+     * @public
+     */
+    visible: PropTypes.bool,
+  },
 
-		/**
-		 * The visibility of the component. When `false`, the component will be hidden.
-		 *
-		 * @type {Boolean}
-		 * @default true
-		 * @public
-		 */
-		visible: PropTypes.bool
-	},
+  defaultProps: {
+    preview: false,
+    visible: true,
+  },
 
-	defaultProps: {
-		preview: false,
-		visible: true
-	},
+  styles: {
+    css,
+    className: "sliderFrame",
+  },
 
-	styles: {
-		css,
-		className: 'sliderFrame'
-	},
+  computed: {
+    className: ({ styler, visible }) => styler.append({ hidden: !visible }),
+    sliderClassName: ({ styler, forcePressed }) =>
+      styler.join({
+        pressed: forcePressed,
+        mediaSlider: true,
+      }),
+  },
 
-	computed: {
-		className: ({styler, visible}) => styler.append({hidden: !visible}),
-		sliderClassName: ({styler, forcePressed}) => styler.join({
-			pressed: forcePressed,
-			mediaSlider: true
-		})
-	},
+  render: ({
+    className,
+    preview,
+    previewProportion,
+    sliderClassName,
+    ...rest
+  }) => {
+    delete rest.forcePressed;
+    delete rest.visible;
 
-	render: ({className, preview, previewProportion, sliderClassName, ...rest}) => {
-		delete rest.forcePressed;
-		delete rest.visible;
-
-		return (
-			<div className={className}>
-				<Slider
-					{...rest}
-					aria-hidden="true"
-					className={sliderClassName}
-					css={css}
-					knobComponent={
-						<MediaKnob preview={preview} previewProportion={previewProportion} />
-					}
-					max={1}
-					min={0}
-					step={0.00001}
-				/>
-			</div>
-		);
-	}
+    return (
+      <div className={className}>
+        <Slider
+          {...rest}
+          aria-hidden="true"
+          className={sliderClassName}
+          css={css}
+          knobComponent={
+            <MediaKnob
+              preview={preview}
+              previewProportion={previewProportion}
+            />
+          }
+          max={1}
+          min={0}
+          step={0.00001}
+          spotlightDisabled
+        />
+      </div>
+    );
+  },
 });
 
 /**
@@ -113,7 +124,4 @@ const MediaSliderBase = kind({
 const MediaSlider = MediaSliderDecorator(MediaSliderBase);
 
 export default MediaSlider;
-export {
-	MediaSlider,
-	MediaSliderBase
-};
+export { MediaSlider, MediaSliderBase };