feat: alwayShowVolumeButton

fix: rm Controller prop
zhihu · Aug 11, 2021 · 320d273 · 320d273
1 parent 7b2f25f
commit 320d273
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/packages/griffith/src/components/Controller/Controller.js b/packages/griffith/src/components/Controller/Controller.js
@@ -332,6 +332,13 @@ class Controller extends Component {
           />
         )}
         {!hiddenQualityMenu && <QualityMenuItem />}
+        {showPip && <PipButtonItem isPip={isPip} onClick={onTogglePip} />}
+        {!hiddenFullScreenButton && (
+          <FullScreenButtonItem
+            isFullScreen={isFullScreen}
+            onClick={onToggleFullScreen}
+          />
+        )}
         {!hiddenVolumeItem && (
           <VolumeItem
             volume={volume}
@@ -344,13 +351,6 @@ class Controller extends Component {
             onChange={this.handleVolumeChange}
           />
         )}
-        {showPip && <PipButtonItem isPip={isPip} onClick={onTogglePip} />}
-        {!hiddenFullScreenButton && (
-          <FullScreenButtonItem
-            isFullScreen={isFullScreen}
-            onClick={onToggleFullScreen}
-          />
-        )}
       </div>
     )
   }

diff --git a/packages/griffith/src/components/Player/Player.js b/packages/griffith/src/components/Player/Player.js
@@ -11,6 +11,7 @@ import * as icons from '../Icon/icons/display'
 import Loader from '../Loader'
 import Video from '../Video'
 import Controller from '../Controller'
+import VolumeItem from '../Controller/items/VolumeItem'
 import {MinimalTimeline} from '../Timeline'
 import getBufferedTime from '../../utils/getBufferedTime'
 import storage from '../../utils/storage'
@@ -444,6 +445,7 @@ class Player extends Component {
       onEvent,
       useMSE,
       useAutoQuality,
+      alwaysShowVolumeButton,
       disablePictureInPicture,
       progressDots,
       hiddenPlayButton,
@@ -474,6 +476,8 @@ class Player extends Component {
     const isFullScreen = Boolean(BigScreen.element) && !isPip
     const showController = this.getShowController(this.state)
     const bufferedTime = getBufferedTime(currentTime, buffered)
+    const videoDataLoaded = !isLoading || currentTime !== 0
+    const renderController = videoDataLoaded && isPlaybackStarted
 
     return (
       <div
@@ -602,7 +606,7 @@ class Player extends Component {
               </div>
             )}
             {/*首帧已加载完成时展示 MinimalTimeline 组件*/}
-            {!hiddenTimeline && isPlaying && (!isLoading || currentTime !== 0) && (
+            {!hiddenTimeline && isPlaying && videoDataLoaded && (
               <div
                 className={css(
                   hiddenOrShownStyle.base,
@@ -620,8 +624,22 @@ class Player extends Component {
                 />
               </div>
             )}
+            {/* 右下角外显常驻音量按钮控件，与 Controller 互斥展示 */}
+            {alwaysShowVolumeButton && renderController && (
+              <div
+                className={css(
+                  styles.volumeButton,
+                  hiddenOrShownStyle.base,
+                  showController
+                    ? hiddenOrShownStyle.hidden
+                    : hiddenOrShownStyle.shown
+                )}
+              >
+                <VolumeItem volume={volume} />
+              </div>
+            )}
             {/*首帧已加载完成时展示 Controller 组件*/}
-            {isPlaybackStarted && (!isLoading || currentTime !== 0) && (
+            {renderController && (
               <div
                 className={css(
                   styles.controller,

diff --git a/packages/griffith/src/components/Player/styles.js b/packages/griffith/src/components/Player/styles.js
@@ -144,6 +144,12 @@ export default StyleSheet.create({
       'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3))',
   },
 
+  volumeButton: {
+    position: 'absolute',
+    bottom: 0,
+    right: 8,
+  },
+
   cover: {
     position: 'absolute',
     left: 0,

diff --git a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js b/packages/griffith/src/components/PlayerContainer/PlayerContainer.js
@@ -39,6 +39,7 @@ const PlayerContainer = ({
   defaultQuality,
   useAutoQuality = false,
   progressDots = [],
+  alwaysShowVolumeButton,
 }) => (
   <ObjectFitProvider initialObjectFit={initialObjectFit}>
     <PositionProvider shouldObserveResize={shouldObserveResize}>
@@ -73,6 +74,7 @@ const PlayerContainer = ({
                       hiddenQualityMenu={hiddenQualityMenu}
                       hiddenVolumeItem={hiddenVolume}
                       hiddenFullScreenButton={hiddenFullScreenButton}
+                      alwaysShowVolumeButton={alwaysShowVolumeButton}
                       progressDots={progressDots}
                       standalone={standalone}
                       cover={cover}