From e3b0d9cbb565def4a5c395f69cf323f555be71bc Mon Sep 17 00:00:00 2001 From: kkmch Date: Wed, 13 Sep 2023 23:23:40 +0300 Subject: [PATCH 01/17] feat: new play pause button type --- .../Media/__stories__/Media.stories.tsx | 7 +++ src/blocks/Media/__stories__/data.json | 35 +++++++++++++++ .../ReactPlayer/CustomBarControls.scss | 33 +++++++++++++- .../ReactPlayer/CustomBarControls.tsx | 43 +++++++++++++++---- src/components/ReactPlayer/ReactPlayer.tsx | 4 +- src/models/constructor-items/common.ts | 1 + 6 files changed, 111 insertions(+), 12 deletions(-) diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx index 2c2802444..51927f041 100644 --- a/src/blocks/Media/__stories__/Media.stories.tsx +++ b/src/blocks/Media/__stories__/Media.stories.tsx @@ -90,6 +90,13 @@ const VideoTemplate: StoryFn = (args) => ( media: data.video.videoWithPreviewAndCustomControlsWithPlayPauseButton .media as MediaProps, }, + { + ...args, + title: data.video.videoWithPreviewAndCustomControlsWithUiKitPlayPauseButton + .title, + media: data.video.videoWithPreviewAndCustomControlsWithUiKitPlayPauseButton + .media as MediaProps, + }, { ...args, title: data.video.youtube.title, diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index c61fafccd..232f5441b 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -249,6 +249,41 @@ } } } + }, + "videoWithPreviewAndCustomControlsWithUiKitPlayPauseButton": { + "title": "Video with preview image, play button and custom controls with UIKit play/pause and mute button", + "media": { + "light": { + "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png", + "video": { + "type": "player", + "src": [ + "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.webm", + "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.mp4", + "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png" + ], + "autoplay": false, + "ariaLabel": "Video accessible name example", + "controls": "custom", + "customControlsOptions": { + "type": "with-uikit-play-pause-button" + } + } + }, + "dark": { + "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png", + "video": { + "type": "player", + "src": [ + "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.webm", + "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.mp4", + "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png" + ], + "autoplay": false, + "ariaLabel": "Video accessible name example" + } + } + } } }, "dataLens": { diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index 368a67676..5cfa9fb7c 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -16,6 +16,12 @@ $controlSize: 64px; display: flex; gap: $indentS; } + &_with-uikit-play-pause-button { + width: 100%; + display: flex; + gap: $indentXXXS; + padding: $indentXXXS; + } } } @@ -69,12 +75,30 @@ $controlSize: 64px; outline: none; } } + + &_with-uikit-play-pause-button { + width: 42px; + height: 42px; + border-radius: 50%; + background: var(--g-color-base-background); + box-shadow: 0px 4px 24px 0px var(--g-color-sfx-shadow-light), + 0px 2px 8px 0px var(--g-color-sfx-shadow-light); + } } } &__play-icon { - height: 24px; - width: 24px; + &_type { + &_with-play-pause-button { + height: 24px; + width: 24px; + } + &_with-uikit-play-pause-button { + height: 16px; + width: 16px; + color: var(--g-color-base-neutral-heavy); + } + } } &__mute-icon { @@ -87,6 +111,11 @@ $controlSize: 64px; height: 24px; width: 24px; } + &_with-uikit-play-pause-button { + height: 16px; + width: 16px; + color: var(--g-color-base-neutral-heavy); + } } } } diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx index b48a4e004..1e9154aec 100644 --- a/src/components/ReactPlayer/CustomBarControls.tsx +++ b/src/components/ReactPlayer/CustomBarControls.tsx @@ -1,5 +1,6 @@ import React, {useMemo} from 'react'; +import {Pause, Play, VolumeLow, VolumeXmark} from '@gravity-ui/icons'; import {Icon} from '@gravity-ui/uikit'; import {Mute} from '../../icons/Mute'; @@ -18,6 +19,27 @@ import './CustomBarControls.scss'; const b = block('CustomBarControls'); +const playIconsMap = { + [CustomControlsType.WithMuteButton]: null, + [CustomControlsType.WithPlayPauseButton]: VideoControlPlay, + [CustomControlsType.WithUiKitPlayPauseButton]: Play, +}; +const pauseIconsMap = { + [CustomControlsType.WithMuteButton]: null, + [CustomControlsType.WithPlayPauseButton]: VideoControlPause, + [CustomControlsType.WithUiKitPlayPauseButton]: Pause, +}; +const muteIconsMap = { + [CustomControlsType.WithMuteButton]: Mute, + [CustomControlsType.WithPlayPauseButton]: MuteSmall, + [CustomControlsType.WithUiKitPlayPauseButton]: VolumeLow, +}; +const unmuteIconsMap = { + [CustomControlsType.WithMuteButton]: Unmute, + [CustomControlsType.WithPlayPauseButton]: UnmuteSmall, + [CustomControlsType.WithUiKitPlayPauseButton]: VolumeXmark, +}; + interface MuteConfigProps { isMuted: boolean; changeMute: (event: React.MouseEvent) => void; @@ -42,10 +64,16 @@ const CustomBarControls = (props: CustomBarControlsProps) => { } = props; const muteIcon = useMemo(() => { - return type === CustomControlsType.WithMuteButton ? Mute : MuteSmall; + return muteIconsMap[type]; }, [type]); const unmuteIcon = useMemo(() => { - return type === CustomControlsType.WithMuteButton ? Unmute : UnmuteSmall; + return unmuteIconsMap[type]; + }, [type]); + const playIcon = useMemo(() => { + return playIconsMap[type]; + }, [type]); + const pauseIcon = useMemo(() => { + return pauseIconsMap[type]; }, [type]); const muteButton = useMemo(() => { @@ -70,7 +98,9 @@ const CustomBarControls = (props: CustomBarControlsProps) => { }, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]); const playPauseButton = useMemo(() => { - if (type !== CustomControlsType.WithPlayPauseButton) { + const icon = isPaused ? playIcon : pauseIcon; + + if (type === CustomControlsType.WithMuteButton || !icon) { return null; } @@ -80,13 +110,10 @@ const CustomBarControls = (props: CustomBarControlsProps) => { className={b('button', {type})} aria-label={i18n(isPaused ? 'play' : 'pause')} > - + ); - }, [isPaused, onPlayClick, type]); + }, [isPaused, onPlayClick, type, playIcon, pauseIcon]); return (
diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index eb9d9bb47..7ee564d14 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -220,7 +220,7 @@ export const ReactPlayerBlock = React.forwardRef Date: Wed, 13 Sep 2023 23:26:57 +0300 Subject: [PATCH 02/17] feat: able to hide mute button --- src/blocks/Media/__stories__/data.json | 3 ++- src/components/ReactPlayer/CustomBarControls.tsx | 4 +++- src/components/ReactPlayer/ReactPlayer.tsx | 3 ++- src/models/constructor-items/common.ts | 1 + 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 232f5441b..85ee823ec 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -266,7 +266,8 @@ "ariaLabel": "Video accessible name example", "controls": "custom", "customControlsOptions": { - "type": "with-uikit-play-pause-button" + "type": "with-uikit-play-pause-button", + "muteButtonHidden": true } } }, diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx index 1e9154aec..cd3a72ac9 100644 --- a/src/components/ReactPlayer/CustomBarControls.tsx +++ b/src/components/ReactPlayer/CustomBarControls.tsx @@ -49,6 +49,7 @@ export interface CustomBarControlsProps extends ClassNameProps { mute?: MuteConfigProps; elapsedTimePercent?: number; type?: CustomControlsType; + isMuteButtonHidden?: boolean; isPaused?: boolean; onPlayClick?: () => void; } @@ -61,6 +62,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => { type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, + isMuteButtonHidden, } = props; const muteIcon = useMemo(() => { @@ -77,7 +79,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => { }, [type]); const muteButton = useMemo(() => { - if (!mute) { + if (!mute || isMuteButtonHidden) { return null; } diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 7ee564d14..8fb742ed6 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -90,7 +90,7 @@ export const ReactPlayerBlock = React.forwardRef )} diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index b63f83015..042b9d82d 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -213,6 +213,7 @@ export interface ButtonImageProps { export interface CustomControlsOptions { type?: CustomControlsType; + muteButtonHidden?: boolean; } export interface PlayButtonProps extends ClassNameProps { From df829992126778c13b851bfed2a683d07dd8259a Mon Sep 17 00:00:00 2001 From: kkmch Date: Wed, 13 Sep 2023 23:35:00 +0300 Subject: [PATCH 03/17] feat: add focus styles --- src/components/ReactPlayer/CustomBarControls.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index 5cfa9fb7c..e454b6b2c 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -83,6 +83,13 @@ $controlSize: 64px; background: var(--g-color-base-background); box-shadow: 0px 4px 24px 0px var(--g-color-sfx-shadow-light), 0px 2px 8px 0px var(--g-color-sfx-shadow-light); + + &:focus { + outline: 2px solid var(--g-color-line-misc); + } + &:focus:not(:focus-visible) { + outline: none; + } } } } From 58458c0c01e49982cd9e377f6cdb96b301fb646d Mon Sep 17 00:00:00 2001 From: kkmch Date: Thu, 14 Sep 2023 11:22:45 +0300 Subject: [PATCH 04/17] fix: remove redundant px --- src/components/ReactPlayer/CustomBarControls.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index e454b6b2c..3dc2bf843 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -81,8 +81,8 @@ $controlSize: 64px; height: 42px; border-radius: 50%; background: var(--g-color-base-background); - box-shadow: 0px 4px 24px 0px var(--g-color-sfx-shadow-light), - 0px 2px 8px 0px var(--g-color-sfx-shadow-light); + box-shadow: 0 4px 24px 0 var(--g-color-sfx-shadow-light), + 0 2px 8px 0 var(--g-color-sfx-shadow-light); &:focus { outline: 2px solid var(--g-color-line-misc); From ba4c8d65fb9af60b47fd410db9d35fb14101d594 Mon Sep 17 00:00:00 2001 From: kkmch Date: Thu, 14 Sep 2023 11:33:14 +0300 Subject: [PATCH 05/17] feat: backgroundShadowHidden prop --- src/blocks/Media/__stories__/data.json | 3 ++- src/components/ReactPlayer/ReactPlayer.scss | 6 ++++++ src/components/ReactPlayer/ReactPlayer.tsx | 18 +++++++++++++++--- src/models/constructor-items/common.ts | 1 + 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 85ee823ec..5aed74601 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -267,7 +267,8 @@ "controls": "custom", "customControlsOptions": { "type": "with-uikit-play-pause-button", - "muteButtonHidden": true + "muteButtonHidden": true, + "backgroundShadowHidden": true } } }, diff --git a/src/components/ReactPlayer/ReactPlayer.scss b/src/components/ReactPlayer/ReactPlayer.scss index 2b1fe3007..0dfa9d334 100644 --- a/src/components/ReactPlayer/ReactPlayer.scss +++ b/src/components/ReactPlayer/ReactPlayer.scss @@ -75,6 +75,12 @@ $block: '.#{$ns}ReactPlayer'; } } + &_background-shadow-hidden { + &::before { + display: none; + } + } + &__custom-bar-controls { opacity: 0; transition: opacity $animationDuration ease 3s; diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 8fb742ed6..9126719fc 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -90,8 +90,11 @@ export const ReactPlayerBlock = React.forwardRef Date: Thu, 14 Sep 2023 15:57:40 +0300 Subject: [PATCH 06/17] fix: simplify --- src/components/ReactPlayer/ReactPlayer.scss | 25 +++++++++------------ src/components/ReactPlayer/ReactPlayer.tsx | 18 +++++++++------ 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/ReactPlayer/ReactPlayer.scss b/src/components/ReactPlayer/ReactPlayer.scss index 0dfa9d334..b04330758 100644 --- a/src/components/ReactPlayer/ReactPlayer.scss +++ b/src/components/ReactPlayer/ReactPlayer.scss @@ -53,18 +53,9 @@ $block: '.#{$ns}ReactPlayer'; margin-left: 6px; } - &:hover { - & #{$block}__custom-bar-controls { - opacity: 1; - transition: opacity $animationDuration ease 0s; - } - } - &_started#{$block}_controls_custom#{$block}_hovered::before { - opacity: 1; - } - - &_started#{$block}_controls_custom { + &_controls_custom { &::before { + display: none; position: absolute; width: 100%; height: 100%; @@ -75,9 +66,15 @@ $block: '.#{$ns}ReactPlayer'; } } - &_background-shadow-hidden { + &_background-shadow-rendered { &::before { - display: none; + display: block; + } + } + + &_background-shadow-shown { + &::before { + opacity: 1; } } @@ -86,7 +83,7 @@ $block: '.#{$ns}ReactPlayer'; transition: opacity $animationDuration ease 3s; } - &__custom-bar-controls_muted { + &__custom-bar-controls_shown { opacity: 1; transition: opacity 0s ease 0s; } diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 9126719fc..bc9f0a4a0 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -144,10 +144,10 @@ export const ReactPlayerBlock = React.forwardRef { - if (playerRef) { + if (playerRef && !started) { setIsPlaying(autoPlay); } - }, [autoPlay, playerRef]); + }, [autoPlay, playerRef, started]); useEffect(() => setMuted(mute), [mute]); @@ -353,9 +353,11 @@ export const ReactPlayerBlock = React.forwardRef - {controls === MediaVideoControlsType.Custom && started && ( + {controls === MediaVideoControlsType.Custom && ( Date: Thu, 14 Sep 2023 16:22:19 +0300 Subject: [PATCH 07/17] feat: added positioning prop --- src/blocks/Media/__stories__/data.json | 12 +++++---- .../ReactPlayer/CustomBarControls.scss | 26 ++++++++++++++++--- .../ReactPlayer/CustomBarControls.tsx | 14 ++++++---- src/components/ReactPlayer/ReactPlayer.scss | 10 ------- src/components/ReactPlayer/ReactPlayer.tsx | 14 +++++----- src/models/constructor-items/common.ts | 7 +++++ 6 files changed, 51 insertions(+), 32 deletions(-) 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 bc9f0a4a0..383093e5b 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 f57278890..ffda12e77 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', @@ -215,6 +221,7 @@ export interface CustomControlsOptions { type?: CustomControlsType; muteButtonHidden?: boolean; backgroundShadowHidden?: boolean; + positioning?: CustomControlsButtonPositioning; } export interface PlayButtonProps extends ClassNameProps { From a16873e5c31643b19267b0d5b8093cfb6b92d379 Mon Sep 17 00:00:00 2001 From: kkmch Date: Fri, 15 Sep 2023 10:26:42 +0300 Subject: [PATCH 08/17] feat: added ratio prop --- src/components/Media/Media.tsx | 2 ++ src/components/Media/Video/Video.tsx | 3 +++ src/components/ReactPlayer/CustomBarControls.tsx | 2 +- src/components/ReactPlayer/ReactPlayer.tsx | 8 +++++--- src/models/constructor-items/common.ts | 1 + 5 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx index d065a77d6..06a417ae9 100644 --- a/src/components/Media/Media.tsx +++ b/src/components/Media/Media.tsx @@ -40,6 +40,7 @@ export const Media = (props: MediaAllProps) => { playButton, customBarControlsClassName, qa, + ratio, } = props; const [hasVideoFallback, setHasVideoFallback] = useState(false); @@ -80,6 +81,7 @@ export const Media = (props: MediaAllProps) => { customBarControlsClassName, hasVideoFallback, setHasVideoFallback, + ratio, }; if (fullscreen) { diff --git a/src/components/Media/Video/Video.tsx b/src/components/Media/Video/Video.tsx index 8d82e00d6..1f4ab5b81 100644 --- a/src/components/Media/Video/Video.tsx +++ b/src/components/Media/Video/Video.tsx @@ -41,6 +41,7 @@ const Video = (props: VideoAllProps) => { setHasVideoFallback, hasVideoFallback, qa, + ratio, } = props; const qaAttributes = getQaAttrubutes(qa, 'source'); @@ -105,6 +106,7 @@ const Video = (props: VideoAllProps) => { height={height} ariaLabel={ariaLabel} customControlsOptions={customControlsOptions} + ratio={ratio} /> ); }, [ @@ -117,6 +119,7 @@ const Video = (props: VideoAllProps) => { customBarControlsClassName, metrika, analyticsEvents, + ratio, ]); const defaultVideoBlock = useMemo(() => { diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx index b4fc6c874..c5b7fa1ec 100644 --- a/src/components/ReactPlayer/CustomBarControls.tsx +++ b/src/components/ReactPlayer/CustomBarControls.tsx @@ -101,7 +101,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => { )} ); - }, [elapsedTimePercent, mute, muteIcon, type, unmuteIcon]); + }, [elapsedTimePercent, isMuteButtonHidden, mute, muteIcon, type, unmuteIcon]); const playPauseButton = useMemo(() => { const icon = isPaused ? playIcon : pauseIcon; diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 383093e5b..cf6ff79c2 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -54,6 +54,7 @@ export interface ReactPlayerBlockProps showPreview?: boolean; onClickPreview?: () => void; height?: number; + ratio?: number; children?: React.ReactNode; } @@ -83,6 +84,7 @@ export const ReactPlayerBlock = React.forwardRef; export interface MediaComponentVideoProps extends AnalyticsEventsBase { video: MediaVideoProps; height?: number; + ratio?: number; metrika?: MetrikaVideo; previewImg?: string; } From 52ea4cf25e95d58e5cb6ecbd5931e7d815c666b0 Mon Sep 17 00:00:00 2001 From: kkmch Date: Tue, 19 Sep 2023 12:31:26 +0300 Subject: [PATCH 09/17] feat: add ratio to deps --- src/components/Media/Media.tsx | 1 + src/components/ReactPlayer/ReactPlayer.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx index 06a417ae9..ce71fe055 100644 --- a/src/components/Media/Media.tsx +++ b/src/components/Media/Media.tsx @@ -130,6 +130,7 @@ export const Media = (props: MediaAllProps) => { previewImg, playButton, customBarControlsClassName, + ratio, youtubeClassName, ]); diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index cf6ff79c2..12f280cf9 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -188,7 +188,7 @@ export const ReactPlayerBlock = React.forwardRef { window.removeEventListener('resize', updateSize); }; - }, []); + }, [ratio]); const playEvents = useMemo( () => eventsArray?.filter((e: AnalyticsEvent) => e.type === PredefinedEventTypes.Play), From 88be3678b306938733ec0269be2979662a8b1627 Mon Sep 17 00:00:00 2001 From: kkmch Date: Tue, 26 Sep 2023 12:47:24 +0200 Subject: [PATCH 10/17] fix: remove first version of custom controls, use autoplayed version for the second one --- .../Media/__stories__/Media.stories.tsx | 19 +--- src/blocks/Media/__stories__/data.json | 105 +++++++----------- 2 files changed, 47 insertions(+), 77 deletions(-) diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx index 51927f041..a71dec47b 100644 --- a/src/blocks/Media/__stories__/Media.stories.tsx +++ b/src/blocks/Media/__stories__/Media.stories.tsx @@ -68,6 +68,12 @@ const VideoTemplate: StoryFn = (args) => ( title: data.video.staticWithAutoPlay.title, media: data.video.staticWithAutoPlay.media, }, + { + ...args, + title: data.video.videoWithAutoPlayCustomControlsWithUiKitPlayPauseButton.title, + media: data.video.videoWithAutoPlayCustomControlsWithUiKitPlayPauseButton + .media as MediaProps, + }, { ...args, title: data.video.staticWithControls.title, @@ -84,19 +90,6 @@ const VideoTemplate: StoryFn = (args) => ( media: data.video.videoWithPreviewAndCustomControlsWithMuteButton .media as MediaProps, }, - { - ...args, - title: data.video.videoWithPreviewAndCustomControlsWithPlayPauseButton.title, - media: data.video.videoWithPreviewAndCustomControlsWithPlayPauseButton - .media as MediaProps, - }, - { - ...args, - title: data.video.videoWithPreviewAndCustomControlsWithUiKitPlayPauseButton - .title, - media: data.video.videoWithPreviewAndCustomControlsWithUiKitPlayPauseButton - .media as MediaProps, - }, { ...args, title: data.video.youtube.title, diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 6ada9b88c..04c5d2eb1 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -114,8 +114,8 @@ } } }, - "staticWithControls": { - "title": "Video with controls and without autoplay", + "videoWithAutoPlayCustomControlsWithUiKitPlayPauseButton": { + "title": "Video with autoplay and custom controls with UIKit play/pause button", "media": { "light": { "video": { @@ -125,8 +125,19 @@ "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.mp4", "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png" ], - "autoplay": false, - "ariaLabel": "Video accessible name example" + "autoplay": true, + "ariaLabel": "Video accessible name example", + "controls": "custom", + "customControlsOptions": { + "type": "with-uikit-play-pause-button", + "muteButtonHidden": true, + "backgroundShadowHidden": true, + "positioning": "left" + }, + "muted": true, + "loop": { + "start": 0 + } } }, "dark": { @@ -137,23 +148,27 @@ "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.mp4", "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png" ], - "autoplay": false, - "ariaLabel": "Video accessible name example" + "autoplay": true, + "ariaLabel": "Video accessible name example", + "controls": "custom", + "customControlsOptions": { + "type": "with-uikit-play-pause-button", + "muteButtonHidden": true, + "backgroundShadowHidden": true, + "positioning": "left" + }, + "muted": true, + "loop": { + "start": 0 + } } } } }, - "youtube": { - "title": "Video from video-hosting", - "media": { - "youtube": "https://youtu.be/0Qd3T6skprA" - } - }, - "videoWithPreview": { - "title": "Video with preview image and play button", + "staticWithControls": { + "title": "Video with controls and without autoplay", "media": { "light": { - "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png", "video": { "type": "player", "src": [ @@ -166,7 +181,6 @@ } }, "dark": { - "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png", "video": { "type": "player", "src": [ @@ -180,43 +194,14 @@ } } }, - "videoWithPreviewAndCustomControlsWithMuteButton": { - "title": "Video with preview image, play button and custom controls with mute button", + "youtube": { + "title": "Video from video-hosting", "media": { - "light": { - "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png", - "video": { - "type": "player", - "src": [ - "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.webm", - "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.mp4", - "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png" - ], - "autoplay": false, - "ariaLabel": "Video accessible name example", - "controls": "custom", - "customControlsOptions": { - "type": "with-mute-button" - } - } - }, - "dark": { - "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png", - "video": { - "type": "player", - "src": [ - "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.webm", - "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.mp4", - "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png" - ], - "autoplay": false, - "ariaLabel": "Video accessible name example" - } - } + "youtube": "https://youtu.be/0Qd3T6skprA" } }, - "videoWithPreviewAndCustomControlsWithPlayPauseButton": { - "title": "Video with preview image, play button and custom controls with play/pause and mute button", + "videoWithPreview": { + "title": "Video with preview image and play button", "media": { "light": { "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png", @@ -228,12 +213,7 @@ "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png" ], "autoplay": false, - "ariaLabel": "Video accessible name example", - "controls": "custom", - "customControlsOptions": { - "type": "with-play-pause-button", - "positioning": "left" - } + "ariaLabel": "Video accessible name example" } }, "dark": { @@ -251,10 +231,11 @@ } } }, - "videoWithPreviewAndCustomControlsWithUiKitPlayPauseButton": { - "title": "Video without preview image, with custom controls with UIKit play/pause button", + "videoWithPreviewAndCustomControlsWithMuteButton": { + "title": "Video with preview image, play button and custom controls with mute button", "media": { "light": { + "previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png", "video": { "type": "player", "src": [ @@ -266,12 +247,8 @@ "ariaLabel": "Video accessible name example", "controls": "custom", "customControlsOptions": { - "type": "with-uikit-play-pause-button", - "muteButtonHidden": true, - "backgroundShadowHidden": true, - "positioning": "left" - }, - "muted": true + "type": "with-mute-button" + } } }, "dark": { From a10097497ba3ff6ded7e558f612c9eb738db8420 Mon Sep 17 00:00:00 2001 From: kkmch Date: Tue, 26 Sep 2023 14:59:42 +0200 Subject: [PATCH 11/17] fix: remove onPause handler for autoplayed videos with pause icons --- src/components/ReactPlayer/ReactPlayer.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 12f280cf9..190211dc6 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -389,7 +389,11 @@ export const ReactPlayerBlock = React.forwardRef Date: Fri, 29 Sep 2023 11:55:34 +0200 Subject: [PATCH 12/17] feat: removing with-play-pause variant --- .../ReactPlayer/CustomBarControls.scss | 31 ---------- .../ReactPlayer/CustomBarControls.tsx | 28 ++------- src/components/ReactPlayer/ReactPlayer.scss | 12 ---- src/components/ReactPlayer/ReactPlayer.tsx | 6 -- src/icons/MuteSmall.tsx | 46 --------------- src/icons/UnmuteSmall.tsx | 57 ------------------- src/icons/VideoControlPause.tsx | 48 ---------------- src/icons/VideoControlPlay.tsx | 27 --------- src/models/constructor-items/common.ts | 2 - 9 files changed, 5 insertions(+), 252 deletions(-) delete mode 100644 src/icons/MuteSmall.tsx delete mode 100644 src/icons/UnmuteSmall.tsx delete mode 100644 src/icons/VideoControlPause.tsx delete mode 100644 src/icons/VideoControlPlay.tsx diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index 8857f5751..d91d952e4 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -17,10 +17,6 @@ $controlSize: 64px; } &_type { - &_with-play-pause-button { - padding: $indentS; - gap: $indentS; - } &_with-uikit-play-pause-button { gap: $indentXXXS; padding: $indentXXXS; @@ -49,25 +45,6 @@ $controlSize: 64px; cursor: pointer; &_type { - &_with-play-pause-button { - opacity: 0.9; - background-color: transparent; - transition: opacity $animationDuration ease 3s; - - &:hover, - &:focus { - opacity: 1; - } - &:focus { - outline: 1px solid var(--g-color-line-light); - outline-offset: 2px; - border-radius: 4px; - } - &:focus:not(:focus-visible) { - outline: none; - } - } - &_with-mute-button { border-radius: 50%; display: flex; @@ -114,10 +91,6 @@ $controlSize: 64px; &__play-icon { &_type { - &_with-play-pause-button { - height: 24px; - width: 24px; - } &_with-uikit-play-pause-button { height: 16px; width: 16px; @@ -132,10 +105,6 @@ $controlSize: 64px; height: 22px; width: 32px; } - &_with-play-pause-button { - height: 24px; - width: 24px; - } &_with-uikit-play-pause-button { height: 16px; width: 16px; diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx index c5b7fa1ec..b8c7ff721 100644 --- a/src/components/ReactPlayer/CustomBarControls.tsx +++ b/src/components/ReactPlayer/CustomBarControls.tsx @@ -4,11 +4,7 @@ import {Pause, Play, VolumeLow, VolumeXmark} from '@gravity-ui/icons'; import {Icon} from '@gravity-ui/uikit'; import {Mute} from '../../icons/Mute'; -import {MuteSmall} from '../../icons/MuteSmall'; import {Unmute} from '../../icons/Unmute'; -import {UnmuteSmall} from '../../icons/UnmuteSmall'; -import {VideoControlPause} from '../../icons/VideoControlPause'; -import {VideoControlPlay} from '../../icons/VideoControlPlay'; import {ClassNameProps, CustomControlsOptions, CustomControlsType} from '../../models'; import {block} from '../../utils'; @@ -21,22 +17,18 @@ const b = block('CustomBarControls'); const playIconsMap = { [CustomControlsType.WithMuteButton]: null, - [CustomControlsType.WithPlayPauseButton]: VideoControlPlay, [CustomControlsType.WithUiKitPlayPauseButton]: Play, }; const pauseIconsMap = { [CustomControlsType.WithMuteButton]: null, - [CustomControlsType.WithPlayPauseButton]: VideoControlPause, [CustomControlsType.WithUiKitPlayPauseButton]: Pause, }; const muteIconsMap = { [CustomControlsType.WithMuteButton]: Mute, - [CustomControlsType.WithPlayPauseButton]: MuteSmall, [CustomControlsType.WithUiKitPlayPauseButton]: VolumeLow, }; const unmuteIconsMap = { [CustomControlsType.WithMuteButton]: Unmute, - [CustomControlsType.WithPlayPauseButton]: UnmuteSmall, [CustomControlsType.WithUiKitPlayPauseButton]: VolumeXmark, }; @@ -45,9 +37,7 @@ interface MuteConfigProps { changeMute: (event: React.MouseEvent) => void; } -export interface CustomBarControlsProps - extends ClassNameProps, - Omit { +export interface CustomBarControlsProps extends ClassNameProps, CustomControlsOptions { mute?: MuteConfigProps; elapsedTimePercent?: number; type?: CustomControlsType; @@ -69,18 +59,10 @@ const CustomBarControls = (props: CustomBarControlsProps) => { positioning, } = props; - const muteIcon = useMemo(() => { - return muteIconsMap[type]; - }, [type]); - const unmuteIcon = useMemo(() => { - return unmuteIconsMap[type]; - }, [type]); - const playIcon = useMemo(() => { - return playIconsMap[type]; - }, [type]); - const pauseIcon = useMemo(() => { - return pauseIconsMap[type]; - }, [type]); + const muteIcon = muteIconsMap[type]; + const unmuteIcon = unmuteIconsMap[type]; + const playIcon = playIconsMap[type]; + const pauseIcon = pauseIconsMap[type]; const muteButton = useMemo(() => { if (!mute || isMuteButtonHidden) { diff --git a/src/components/ReactPlayer/ReactPlayer.scss b/src/components/ReactPlayer/ReactPlayer.scss index 70e5a569c..5dae4b38a 100644 --- a/src/components/ReactPlayer/ReactPlayer.scss +++ b/src/components/ReactPlayer/ReactPlayer.scss @@ -66,18 +66,6 @@ $block: '.#{$ns}ReactPlayer'; } } - &_background-shadow-rendered { - &::before { - display: block; - } - } - - &_background-shadow-shown { - &::before { - opacity: 1; - } - } - @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 190211dc6..1b66003b5 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -96,7 +96,6 @@ export const ReactPlayerBlock = React.forwardRef> = (props) => { - return ( - - - - - - - - - ); -}; diff --git a/src/icons/UnmuteSmall.tsx b/src/icons/UnmuteSmall.tsx deleted file mode 100644 index 2a224558e..000000000 --- a/src/icons/UnmuteSmall.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../utils/svg'; - -export const UnmuteSmall: React.FC> = (props) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/icons/VideoControlPause.tsx b/src/icons/VideoControlPause.tsx deleted file mode 100644 index 65418bfb0..000000000 --- a/src/icons/VideoControlPause.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../utils/svg'; - -export const VideoControlPause: React.FC> = (props) => { - return ( - - - - - - - - - - - ); -}; diff --git a/src/icons/VideoControlPlay.tsx b/src/icons/VideoControlPlay.tsx deleted file mode 100644 index 755989fa4..000000000 --- a/src/icons/VideoControlPlay.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../utils/svg'; - -export const VideoControlPlay: React.FC> = (props) => { - return ( - - - - - ); -}; diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 550ce71ab..6bd3e7aa7 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -36,7 +36,6 @@ export enum PlayButtonThemes { export enum CustomControlsType { WithMuteButton = 'with-mute-button', - WithPlayPauseButton = 'with-play-pause-button', WithUiKitPlayPauseButton = 'with-uikit-play-pause-button', } @@ -220,7 +219,6 @@ export interface ButtonImageProps { export interface CustomControlsOptions { type?: CustomControlsType; muteButtonHidden?: boolean; - backgroundShadowHidden?: boolean; positioning?: CustomControlsButtonPositioning; } From d70064139cf6538ff2f89a6e3e3b7712b23e796c Mon Sep 17 00:00:00 2001 From: kkmch Date: Fri, 29 Sep 2023 12:01:55 +0200 Subject: [PATCH 13/17] feat: using variables --- .../ReactPlayer/CustomBarControls.scss | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index d91d952e4..0a54f16eb 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -3,6 +3,12 @@ $block: '.#{$ns}CustomBarControls'; $controlSize: 64px; +// custom controls sizes +$with-uikit-play-pause-control-size: 42px; +$with-uikit-play-pause-control-icon-size: 16px; +$with-mute-control-height: 22px; +$with-mute-control-width: 32px; +// --- #{$block} { &__wrapper { @@ -56,7 +62,7 @@ $controlSize: 64px; height: $controlSize; background: var(--g-color-base-background); transition: background-color $animationDuration; - margin: 12px; + margin: $indentXXS; &:hover, &:focus { @@ -72,12 +78,11 @@ $controlSize: 64px; } &_with-uikit-play-pause-button { - width: 42px; - height: 42px; + width: $with-uikit-play-pause-control-size; + height: $with-uikit-play-pause-control-size; border-radius: 50%; background: var(--g-color-base-background); - box-shadow: 0 4px 24px 0 var(--g-color-sfx-shadow-light), - 0 2px 8px 0 var(--g-color-sfx-shadow-light); + @include shadow(); &:focus { outline: 2px solid var(--g-color-line-misc); @@ -92,8 +97,8 @@ $controlSize: 64px; &__play-icon { &_type { &_with-uikit-play-pause-button { - height: 16px; - width: 16px; + height: $with-uikit-play-pause-control-icon-size; + width: $with-uikit-play-pause-control-icon-size; color: var(--g-color-base-neutral-heavy); } } @@ -102,12 +107,12 @@ $controlSize: 64px; &__mute-icon { &_type { &_with-mute-button { - height: 22px; - width: 32px; + height: $with-mute-control-height; + width: $with-mute-control-width; } &_with-uikit-play-pause-button { - height: 16px; - width: 16px; + height: $with-uikit-play-pause-control-icon-size; + width: $with-uikit-play-pause-control-icon-size; color: var(--g-color-base-neutral-heavy); } } From 77cecfb374038ad832d58d41e634770182fe1fcb Mon Sep 17 00:00:00 2001 From: kkmch Date: Fri, 29 Sep 2023 12:04:32 +0200 Subject: [PATCH 14/17] feat: muteButtonShown --- src/blocks/Media/__stories__/data.json | 6 +++--- src/components/ReactPlayer/CustomBarControls.tsx | 8 ++++---- src/components/ReactPlayer/ReactPlayer.tsx | 4 ++-- src/models/constructor-items/common.ts | 2 +- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 04c5d2eb1..b83ef9c02 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -115,7 +115,7 @@ } }, "videoWithAutoPlayCustomControlsWithUiKitPlayPauseButton": { - "title": "Video with autoplay and custom controls with UIKit play/pause button", + "title": "Video with autoplay and custom controls with UIKit icon controls", "media": { "light": { "video": { @@ -130,7 +130,7 @@ "controls": "custom", "customControlsOptions": { "type": "with-uikit-play-pause-button", - "muteButtonHidden": true, + "muteButtonShown": false, "backgroundShadowHidden": true, "positioning": "left" }, @@ -153,7 +153,7 @@ "controls": "custom", "customControlsOptions": { "type": "with-uikit-play-pause-button", - "muteButtonHidden": true, + "muteButtonShown": false, "backgroundShadowHidden": true, "positioning": "left" }, diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx index b8c7ff721..38cfe902c 100644 --- a/src/components/ReactPlayer/CustomBarControls.tsx +++ b/src/components/ReactPlayer/CustomBarControls.tsx @@ -43,7 +43,7 @@ export interface CustomBarControlsProps extends ClassNameProps, CustomControlsOp type?: CustomControlsType; isPaused?: boolean; onPlayClick?: () => void; - shown: boolean; + shown?: boolean; } const CustomBarControls = (props: CustomBarControlsProps) => { @@ -54,7 +54,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => { type = CustomControlsType.WithMuteButton, isPaused, onPlayClick, - muteButtonHidden: isMuteButtonHidden, + muteButtonShown: isMuteButtonShown = true, shown, positioning, } = props; @@ -65,7 +65,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => { const pauseIcon = pauseIconsMap[type]; const muteButton = useMemo(() => { - if (!mute || isMuteButtonHidden) { + if (!mute || !isMuteButtonShown) { return null; } @@ -83,7 +83,7 @@ const CustomBarControls = (props: CustomBarControlsProps) => { )} ); - }, [elapsedTimePercent, isMuteButtonHidden, mute, muteIcon, type, unmuteIcon]); + }, [elapsedTimePercent, isMuteButtonShown, mute, muteIcon, type, unmuteIcon]); const playPauseButton = useMemo(() => { const icon = isPaused ? playIcon : pauseIcon; diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 1b66003b5..5014b8abc 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -95,7 +95,7 @@ export const ReactPlayerBlock = React.forwardRef diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 6bd3e7aa7..eec10f08e 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -218,7 +218,7 @@ export interface ButtonImageProps { export interface CustomControlsOptions { type?: CustomControlsType; - muteButtonHidden?: boolean; + muteButtonShown?: boolean; positioning?: CustomControlsButtonPositioning; } From bf2b932b849753037dd84e13dde57c577c98ef42 Mon Sep 17 00:00:00 2001 From: kkmch Date: Fri, 29 Sep 2023 15:34:44 +0200 Subject: [PATCH 15/17] fix: use camelCase --- .../ReactPlayer/CustomBarControls.scss | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index 0a54f16eb..cdf464b68 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -4,10 +4,10 @@ $block: '.#{$ns}CustomBarControls'; $controlSize: 64px; // custom controls sizes -$with-uikit-play-pause-control-size: 42px; -$with-uikit-play-pause-control-icon-size: 16px; -$with-mute-control-height: 22px; -$with-mute-control-width: 32px; +$withUikitPlayPauseControlSize: 42px; +$withUikitPlayPauseControlIconSize: 16px; +$withMuteControlHeight: 22px; +$withMuteControlWidth: 32px; // --- #{$block} { @@ -78,8 +78,8 @@ $with-mute-control-width: 32px; } &_with-uikit-play-pause-button { - width: $with-uikit-play-pause-control-size; - height: $with-uikit-play-pause-control-size; + width: $withUikitPlayPauseControlSize; + height: $withUikitPlayPauseControlSize; border-radius: 50%; background: var(--g-color-base-background); @include shadow(); @@ -97,8 +97,8 @@ $with-mute-control-width: 32px; &__play-icon { &_type { &_with-uikit-play-pause-button { - height: $with-uikit-play-pause-control-icon-size; - width: $with-uikit-play-pause-control-icon-size; + height: $withUikitPlayPauseControlIconSize; + width: $withUikitPlayPauseControlIconSize; color: var(--g-color-base-neutral-heavy); } } @@ -107,12 +107,12 @@ $with-mute-control-width: 32px; &__mute-icon { &_type { &_with-mute-button { - height: $with-mute-control-height; - width: $with-mute-control-width; + height: $withMuteControlHeight; + width: $withMuteControlWidth; } &_with-uikit-play-pause-button { - height: $with-uikit-play-pause-control-icon-size; - width: $with-uikit-play-pause-control-icon-size; + height: $withUikitPlayPauseControlIconSize; + width: $withUikitPlayPauseControlIconSize; color: var(--g-color-base-neutral-heavy); } } From 02fdeb37501657de59fb233f9757596e39f9e180 Mon Sep 17 00:00:00 2001 From: kkmch Date: Fri, 29 Sep 2023 15:36:23 +0200 Subject: [PATCH 16/17] fix: rename with-uikit-play-pause-button to with-play-pause-button --- src/blocks/Media/__stories__/data.json | 4 ++-- src/components/ReactPlayer/CustomBarControls.scss | 8 ++++---- src/components/ReactPlayer/CustomBarControls.tsx | 8 ++++---- src/models/constructor-items/common.ts | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index b83ef9c02..142a1f4bb 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -129,7 +129,7 @@ "ariaLabel": "Video accessible name example", "controls": "custom", "customControlsOptions": { - "type": "with-uikit-play-pause-button", + "type": "with-play-pause-button", "muteButtonShown": false, "backgroundShadowHidden": true, "positioning": "left" @@ -152,7 +152,7 @@ "ariaLabel": "Video accessible name example", "controls": "custom", "customControlsOptions": { - "type": "with-uikit-play-pause-button", + "type": "with-play-pause-button", "muteButtonShown": false, "backgroundShadowHidden": true, "positioning": "left" diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index cdf464b68..db89424c9 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -23,7 +23,7 @@ $withMuteControlWidth: 32px; } &_type { - &_with-uikit-play-pause-button { + &_with-play-pause-button { gap: $indentXXXS; padding: $indentXXXS; } @@ -77,7 +77,7 @@ $withMuteControlWidth: 32px; } } - &_with-uikit-play-pause-button { + &_with-play-pause-button { width: $withUikitPlayPauseControlSize; height: $withUikitPlayPauseControlSize; border-radius: 50%; @@ -96,7 +96,7 @@ $withMuteControlWidth: 32px; &__play-icon { &_type { - &_with-uikit-play-pause-button { + &_with-play-pause-button { height: $withUikitPlayPauseControlIconSize; width: $withUikitPlayPauseControlIconSize; color: var(--g-color-base-neutral-heavy); @@ -110,7 +110,7 @@ $withMuteControlWidth: 32px; height: $withMuteControlHeight; width: $withMuteControlWidth; } - &_with-uikit-play-pause-button { + &_with-play-pause-button { height: $withUikitPlayPauseControlIconSize; width: $withUikitPlayPauseControlIconSize; color: var(--g-color-base-neutral-heavy); diff --git a/src/components/ReactPlayer/CustomBarControls.tsx b/src/components/ReactPlayer/CustomBarControls.tsx index 38cfe902c..1e2f51c03 100644 --- a/src/components/ReactPlayer/CustomBarControls.tsx +++ b/src/components/ReactPlayer/CustomBarControls.tsx @@ -17,19 +17,19 @@ const b = block('CustomBarControls'); const playIconsMap = { [CustomControlsType.WithMuteButton]: null, - [CustomControlsType.WithUiKitPlayPauseButton]: Play, + [CustomControlsType.WithPlayPauseButton]: Play, }; const pauseIconsMap = { [CustomControlsType.WithMuteButton]: null, - [CustomControlsType.WithUiKitPlayPauseButton]: Pause, + [CustomControlsType.WithPlayPauseButton]: Pause, }; const muteIconsMap = { [CustomControlsType.WithMuteButton]: Mute, - [CustomControlsType.WithUiKitPlayPauseButton]: VolumeLow, + [CustomControlsType.WithPlayPauseButton]: VolumeLow, }; const unmuteIconsMap = { [CustomControlsType.WithMuteButton]: Unmute, - [CustomControlsType.WithUiKitPlayPauseButton]: VolumeXmark, + [CustomControlsType.WithPlayPauseButton]: VolumeXmark, }; interface MuteConfigProps { diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index eec10f08e..e75d39592 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -36,7 +36,7 @@ export enum PlayButtonThemes { export enum CustomControlsType { WithMuteButton = 'with-mute-button', - WithUiKitPlayPauseButton = 'with-uikit-play-pause-button', + WithPlayPauseButton = 'with-play-pause-button', } export enum CustomControlsButtonPositioning { From 83c61e010ad70bc8a144077c3adde036750bc350 Mon Sep 17 00:00:00 2001 From: kkmch Date: Fri, 29 Sep 2023 15:45:20 +0200 Subject: [PATCH 17/17] fix: shorter names --- src/blocks/Media/__stories__/Media.stories.tsx | 4 ++-- src/blocks/Media/__stories__/data.json | 4 ++-- .../ReactPlayer/CustomBarControls.scss | 16 ++++++++-------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx index a71dec47b..37642eadb 100644 --- a/src/blocks/Media/__stories__/Media.stories.tsx +++ b/src/blocks/Media/__stories__/Media.stories.tsx @@ -70,8 +70,8 @@ const VideoTemplate: StoryFn = (args) => ( }, { ...args, - title: data.video.videoWithAutoPlayCustomControlsWithUiKitPlayPauseButton.title, - media: data.video.videoWithAutoPlayCustomControlsWithUiKitPlayPauseButton + title: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton.title, + media: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton .media as MediaProps, }, { diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 142a1f4bb..09a99f5d0 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -114,8 +114,8 @@ } } }, - "videoWithAutoPlayCustomControlsWithUiKitPlayPauseButton": { - "title": "Video with autoplay and custom controls with UIKit icon controls", + "videoWithAutoPlayCustomControlsWithPlayPauseButton": { + "title": "Video with autoplay and custom controls with play/pause button", "media": { "light": { "video": { diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index db89424c9..5393c3f4b 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -4,8 +4,8 @@ $block: '.#{$ns}CustomBarControls'; $controlSize: 64px; // custom controls sizes -$withUikitPlayPauseControlSize: 42px; -$withUikitPlayPauseControlIconSize: 16px; +$withPlayPauseControlSize: 42px; +$withPlayPauseControlIconSize: 16px; $withMuteControlHeight: 22px; $withMuteControlWidth: 32px; // --- @@ -78,8 +78,8 @@ $withMuteControlWidth: 32px; } &_with-play-pause-button { - width: $withUikitPlayPauseControlSize; - height: $withUikitPlayPauseControlSize; + width: $withPlayPauseControlSize; + height: $withPlayPauseControlSize; border-radius: 50%; background: var(--g-color-base-background); @include shadow(); @@ -97,8 +97,8 @@ $withMuteControlWidth: 32px; &__play-icon { &_type { &_with-play-pause-button { - height: $withUikitPlayPauseControlIconSize; - width: $withUikitPlayPauseControlIconSize; + height: $withPlayPauseControlIconSize; + width: $withPlayPauseControlIconSize; color: var(--g-color-base-neutral-heavy); } } @@ -111,8 +111,8 @@ $withMuteControlWidth: 32px; width: $withMuteControlWidth; } &_with-play-pause-button { - height: $withUikitPlayPauseControlIconSize; - width: $withUikitPlayPauseControlIconSize; + height: $withPlayPauseControlIconSize; + width: $withPlayPauseControlIconSize; color: var(--g-color-base-neutral-heavy); } }