feat: 增大进度条拖动操作区域

goblin-laboratory · Jan 4, 2020 · 2047017 · 2047017
1 parent 2359029
commit 2047017
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 15 deletions.
diff --git a/packages/reactjs-player/src/ReactPlayerSkin/index.js b/packages/reactjs-player/src/ReactPlayerSkin/index.js
@@ -50,13 +50,25 @@ const ReactPlayerSkin = React.memo(
     const [hiding, setHiding] = React.useState(false);
 
     const onBodyClick = React.useCallback(() => setVisible(false), []);
+
     const onMenuClick = React.useCallback(
       e => {
         changePlaybackRate(parseFloat(e.key, 10));
         setVisible(false);
       },
       [changePlaybackRate],
     );
+
+    const onMouseEnter = React.useCallback(() => {
+      if (global.matchMedia) {
+        const matched = global.matchMedia('(hover: none), (pointer: coarse)');
+        if (matched && matched.matches) {
+          return;
+        }
+      }
+      setHovering(true);
+    }, []);
+
     React.useEffect(() => {
       document.body.addEventListener('click', onBodyClick);
       return () => document.body.removeEventListener('click', onBodyClick);
@@ -106,12 +118,12 @@ const ReactPlayerSkin = React.memo(
         )}
         <div
           className={hiding ? styles.hiddenControls : styles.controls}
-          onMouseEnter={() => setHovering(true)}
+          onMouseEnter={() => onMouseEnter}
           onMouseLeave={() => setHovering(false)}
         >
           <TimeSlider
             live={live}
-            disabled={hiding}
+            hiding={hiding}
             duration={duration}
             currentTime={currentTime}
             buffered={buffered}

diff --git a/packages/reactjs-player/src/ReactPlayerSkin/index.module.less b/packages/reactjs-player/src/ReactPlayerSkin/index.module.less
@@ -7,6 +7,7 @@
 }
 .reactPlayerSkin {
   .absolute;
+  user-select: none;
   overflow: hidden;
   color: #eee;
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

diff --git a/packages/reactjs-player/src/TimeSlider/index.js b/packages/reactjs-player/src/TimeSlider/index.js
@@ -74,7 +74,7 @@ MouseTooltip.propTypes = {
   tooltip: PropTypes.number.isRequired,
 };
 
-const Slider = React.memo(({ live, disabled, currentTime, duration, buffered, onChange, sliding, setSliding }) => {
+const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onChange, sliding, setSliding }) => {
   const [value, setValue] = React.useState(currentTime);
   const [tooltip, setTooltip] = React.useState(0);
 
@@ -85,13 +85,13 @@ const Slider = React.memo(({ live, disabled, currentTime, duration, buffered, on
   const onClick = React.useCallback(
     e => {
       e.preventDefault();
+      setSliding(false);
       if (live) {
         return;
       }
       const rect = e.currentTarget.getBoundingClientRect();
       const v = getValue(e, rect, duration);
       onChange(v);
-      setSliding(false);
     },
     [onChange, live, duration, setSliding],
   );
@@ -127,13 +127,13 @@ const Slider = React.memo(({ live, disabled, currentTime, duration, buffered, on
   const onMouseUp = React.useCallback(
     e => {
       e.preventDefault();
+      setSliding(false);
       if (reactRef && reactRef.current && updateRef) {
         const v = getValue(e, reactRef.current, duration);
         updateRef.current = { value: v };
         update();
         onChange(v);
       }
-      setSliding(false);
     },
     [onChange, duration, update, setSliding],
   );
@@ -235,18 +235,23 @@ const Slider = React.memo(({ live, disabled, currentTime, duration, buffered, on
       onMouseMove={onSliderMouseMove}
       onFocus={() => {}}
     >
+      {!live && (
+        <button type="button" className={styles.sliderButton} onTouchStart={onMouseDown}>
+          <span className={styles.slidingTip} style={{ opacity: sliding ? 1 : 0 }}>
+            快进到：{numeral(value).format('00:00:00')}
+          </span>
+        </button>
+      )}
       <div className={styles.sliderRail}>
         <div className={styles.sliderBuffered} style={{ transform: `scaleX(${bufferedScaleX})` }} />
         <div className={styles.sliderTrack} style={{ transform: `translateX(${trackTranslateX}%)` }} />
       </div>
       <div className={styles.sliderHandleRail} style={{ transform: `translateX(${trackTranslateX}%)` }}>
         <button
           type="button"
-          className={styles.sliderHandle}
+          className={`${styles.sliderHandle} ${hiding ? styles.hidingsliderHandle : ''}`}
           onMouseDown={onMouseDown}
           onTouchStart={onMouseDown}
-          disabled={disabled}
-          onFocus={() => {}}
         />
       </div>
       {!live && <MouseTooltip duration={duration} tooltip={sliding ? value : tooltip} />}
@@ -256,7 +261,7 @@ const Slider = React.memo(({ live, disabled, currentTime, duration, buffered, on
 
 Slider.propTypes = {
   live: PropTypes.bool.isRequired,
-  disabled: PropTypes.bool.isRequired,
+  hiding: PropTypes.bool.isRequired,
   currentTime: PropTypes.number.isRequired,
   duration: PropTypes.number.isRequired,
   buffered: PropTypes.object,

diff --git a/packages/reactjs-player/src/TimeSlider/index.module.less b/packages/reactjs-player/src/TimeSlider/index.module.less
@@ -1,5 +1,6 @@
 .slider,
 .slidingSlider {
+  user-select: none;
   position: relative;
   height: 16px;
   cursor: pointer;
@@ -8,6 +9,30 @@
   }
 }
 
+.sliderButton {
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  position: absolute;
+  top: -48px;
+  height: 64px;
+  width: 100%;
+  padding: 0;
+  border: 0 transparent none;
+  margin: 0;
+  background: transparent;
+}
+
+.slidingTip {
+  pointer-events: none;
+  user-select: none;
+  display: inline-block;
+  padding: 8px 16px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.3);
+  color: #fff;
+}
+
 .sliderRail {
   position: absolute;
   left: 0;
@@ -90,6 +115,7 @@
   width: 100%;
   opacity: 0;
 }
+
 .tip {
   display: inline-block;
   padding: 0.4em 0.8em;
@@ -122,20 +148,38 @@
 // 手机或者平板不显示 tooltip
 @media (hover: none), (pointer: coarse) {
   .slider:hover,
-  .slider:active {
+  .slider:active,
+  .slidingSlider,
+  .slidingSlider:hover,
+  .slidingSlider:active {
     .tooltip {
       opacity: 0;
     }
   }
 
+  .sliderButton {
+    opacity: 1;
+    pointer-events: auto;
+    position: absolute;
+  }
+
   .sliderHandle {
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.2);
-    &:disabled{
-      opacity: 0;
-      pointer-events: none;
-      box-shadow: none;
-    }
+    // &:disabled {
+    //   opacity: 0;
+    //   pointer-events: none;
+    //   box-shadow: none;
+    // }
+  }
+  .slider:hover .hidingsliderHandle,
+  .hidingsliderHandle,
+  .hidingsliderHandle:hover,
+  .hidingsliderHandle:focus,
+  .hidingsliderHandle:active {
+    opacity: 0;
+    pointer-events: none;
+    box-shadow: none;
   }
 }