feat: added positioning prop

gravity-ui · Sep 19, 2023 · 6b9019e · 6b9019e
1 parent 4af8ac8
commit 6b9019e
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 32 deletions.
diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json
@@ -231,7 +231,8 @@
             "ariaLabel": "Video accessible name example",
             "controls": "custom",
             "customControlsOptions": {
-              "type": "with-play-pause-button"
+              "type": "with-play-pause-button",
+              "positioning": "left"
             }
           }
         },
@@ -251,10 +252,9 @@
       }
     },
     "videoWithPreviewAndCustomControlsWithUiKitPlayPauseButton": {
-      "title": "Video with preview image, play button and custom controls with UIKit play/pause and mute button",
+      "title": "Video without preview image, with custom controls with UIKit play/pause button",
       "media": {
         "light": {
-          "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png",
           "video": {
             "type": "player",
             "src": [
@@ -268,8 +268,10 @@
             "customControlsOptions": {
               "type": "with-uikit-play-pause-button",
               "muteButtonHidden": true,
-              "backgroundShadowHidden": true
-            }
+              "backgroundShadowHidden": true,
+              "positioning": "left"
+            },
+            "muted": true
           }
         },
         "dark": {

diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss
@@ -8,21 +8,39 @@ $controlSize: 64px;
     &__wrapper {
         position: absolute;
         bottom: 0;
+        opacity: 0;
+        transition: opacity $animationDuration ease 3s;
+
+        &_shown {
+            opacity: 1;
+            transition: opacity 0s ease 0s;
+        }
 
         &_type {
             &_with-play-pause-button {
-                width: 100%;
                 padding: $indentS;
-                display: flex;
                 gap: $indentS;
             }
             &_with-uikit-play-pause-button {
-                width: 100%;
-                display: flex;
                 gap: $indentXXXS;
                 padding: $indentXXXS;
             }
         }
+
+        &_positioning {
+            &_left,
+            &_right,
+            &_center {
+                display: flex;
+                width: 100%;
+            }
+            &_right {
+                flex-direction: row-reverse;
+            }
+            &_center {
+                justify-content: center;
+            }
+        }
     }
 
     &__button {

diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx
@@ -9,7 +9,7 @@ import {Unmute} from '../../icons/Unmute';
 import {UnmuteSmall} from '../../icons/UnmuteSmall';
 import {VideoControlPause} from '../../icons/VideoControlPause';
 import {VideoControlPlay} from '../../icons/VideoControlPlay';
-import {ClassNameProps, CustomControlsType} from '../../models';
+import {ClassNameProps, CustomControlsOptions, CustomControlsType} from '../../models';
 import {block} from '../../utils';
 
 import CircleProgress from './CircleProgress';
@@ -45,13 +45,15 @@ interface MuteConfigProps {
     changeMute: (event: React.MouseEvent) => void;
 }
 
-export interface CustomBarControlsProps extends ClassNameProps {
+export interface CustomBarControlsProps
+    extends ClassNameProps,
+        Omit<CustomControlsOptions, 'backgroundShadowHidden'> {
     mute?: MuteConfigProps;
     elapsedTimePercent?: number;
     type?: CustomControlsType;
-    isMuteButtonHidden?: boolean;
     isPaused?: boolean;
     onPlayClick?: () => void;
+    shown: boolean;
 }
 
 const CustomBarControls = (props: CustomBarControlsProps) => {
@@ -62,7 +64,9 @@ const CustomBarControls = (props: CustomBarControlsProps) => {
         type = CustomControlsType.WithMuteButton,
         isPaused,
         onPlayClick,
-        isMuteButtonHidden,
+        muteButtonHidden: isMuteButtonHidden,
+        shown,
+        positioning,
     } = props;
 
     const muteIcon = useMemo(() => {
@@ -118,7 +122,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => {
     }, [isPaused, onPlayClick, type, playIcon, pauseIcon]);
 
     return (
-        <div className={b('wrapper', {type}, className)}>
+        <div className={b('wrapper', {type, shown, positioning}, className)}>
             {playPauseButton}
             {muteButton}
         </div>

diff --git a/src/components/ReactPlayer/ReactPlayer.scss b/src/components/ReactPlayer/ReactPlayer.scss
@@ -78,16 +78,6 @@ $block: '.#{$ns}ReactPlayer';
         }
     }
 
-    &__custom-bar-controls {
-        opacity: 0;
-        transition: opacity $animationDuration ease 3s;
-    }
-
-    &__custom-bar-controls_shown {
-        opacity: 1;
-        transition: opacity 0s ease 0s;
-    }
-
     @media only screen and (max-width: map-get($gridBreakpoints, 'sm')) {
         &__button_text {
             font-size: 20px;

diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx
@@ -21,6 +21,7 @@ import {PlayVideo} from '../../icons';
 import {
     AnalyticsEvent,
     ClassNameProps,
+    CustomControlsButtonPositioning,
     CustomControlsType,
     DefaultEventNames,
     MediaVideoControlsType,
@@ -94,6 +95,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
             type: customControlsType = CustomControlsType.WithMuteButton,
             muteButtonHidden,
             backgroundShadowHidden,
+            positioning = CustomControlsButtonPositioning.Center,
         } = customControlsOptions;
 
         const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);
@@ -392,13 +394,7 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                         />
                         {controls === MediaVideoControlsType.Custom && (
                             <CustomBarControls
-                                className={b(
-                                    'custom-bar-controls',
-                                    {
-                                        shown: hovered && ((!started && !previewImgUrl) || started),
-                                    },
-                                    customBarControlsClassName,
-                                )}
+                                className={customBarControlsClassName}
                                 mute={{
                                     isMuted: muted,
                                     changeMute: (event: React.MouseEvent) => {
@@ -410,7 +406,9 @@ export const ReactPlayerBlock = React.forwardRef<ReactPlayerBlockHandler, ReactP
                                 type={customControlsType}
                                 isPaused={!isPlaying}
                                 onPlayClick={onPlayClick}
-                                isMuteButtonHidden={muteButtonHidden}
+                                muteButtonHidden={muteButtonHidden}
+                                shown={hovered && ((!started && !previewImgUrl) || started)}
+                                positioning={positioning}
                             />
                         )}
                     </Fragment>

diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
@@ -40,6 +40,12 @@ export enum CustomControlsType {
     WithUiKitPlayPauseButton = 'with-uikit-play-pause-button',
 }
 
+export enum CustomControlsButtonPositioning {
+    Left = 'left',
+    Right = 'right',
+    Center = 'center',
+}
+
 export enum MediaVideoType {
     Default = 'default',
     Player = 'player',
@@ -213,6 +219,7 @@ export interface CustomControlsOptions {
     type?: CustomControlsType;
     muteButtonHidden?: boolean;
     backgroundShadowHidden?: boolean;
+    positioning?: CustomControlsButtonPositioning;
 }
 
 export interface PlayButtonProps extends ClassNameProps {