diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 5aed74601..6ada9b88c 100644 --- 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 index 3dc2bf843..8857f5751 100644 --- 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 index cd3a72ac9..b4fc6c874 100644 --- 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 { 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 ( -
+
{playPauseButton} {muteButton}
diff --git a/src/components/ReactPlayer/ReactPlayer.scss b/src/components/ReactPlayer/ReactPlayer.scss index b04330758..70e5a569c 100644 --- 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 index 830fcf02e..05c56ce85 100644 --- 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 {controls === MediaVideoControlsType.Custom && ( { @@ -410,7 +406,9 @@ export const ReactPlayerBlock = React.forwardRef )} diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 404e6728c..73e0a5cca 100644 --- 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 {