Skip to content

Commit

Permalink
feat: media custom consol with play/pause button changed (#566)
Browse files Browse the repository at this point in the history 
* feat: changed `with-play-pause-button` custom control buttons
* feat: added `positioning`, `ratio` and `muteButtonShown` props for video
* fix: some simplifications for ReactPlayer, bug fixes
  • Loading branch information
@Kyzyl-ool
Kyzyl-ool authored Sep 29, 2023
1 parent c5c7893 commit 8b7ca7d
Show file tree
Hide file tree
Showing 13 changed files with 191 additions and 299 deletions.
12 changes: 6 additions & 6 deletions src/blocks/Media/__stories__/Media.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,12 @@ const VideoTemplate: StoryFn<MediaBlockModel> = (args) => (
title: data.video.staticWithAutoPlay.title,
media: data.video.staticWithAutoPlay.media,
},
{
...args,
title: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton.title,
media: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton
.media as MediaProps,
},
{
...args,
title: data.video.staticWithControls.title,
Expand All @@ -84,12 +90,6 @@ const VideoTemplate: StoryFn<MediaBlockModel> = (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.youtube.title,
Expand Down
68 changes: 42 additions & 26 deletions src/blocks/Media/__stories__/data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@
}
}
},
"staticWithControls": {
"title": "Video with controls and without autoplay",
"videoWithAutoPlayCustomControlsWithPlayPauseButton": {
"title": "Video with autoplay and custom controls with play/pause button",
"media": {
"light": {
"video": {
Expand All @@ -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-play-pause-button",
"muteButtonShown": false,
"backgroundShadowHidden": true,
"positioning": "left"
},
"muted": true,
"loop": {
"start": 0
}
}
},
"dark": {
Expand All @@ -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-play-pause-button",
"muteButtonShown": false,
"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": [
Expand All @@ -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": [
Expand All @@ -180,8 +194,14 @@
}
}
},
"videoWithPreviewAndCustomControlsWithMuteButton": {
"title": "Video with preview image, play button and custom controls with mute button",
"youtube": {
"title": "Video from video-hosting",
"media": {
"youtube": "https://youtu.be/0Qd3T6skprA"
}
},
"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",
Expand All @@ -193,11 +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-mute-button"
}
"ariaLabel": "Video accessible name example"
}
},
"dark": {
Expand All @@ -215,8 +231,8 @@
}
}
},
"videoWithPreviewAndCustomControlsWithPlayPauseButton": {
"title": "Video with preview image, play button and custom controls with play/pause and mute 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",
Expand All @@ -231,7 +247,7 @@
"ariaLabel": "Video accessible name example",
"controls": "custom",
"customControlsOptions": {
"type": "with-play-pause-button"
"type": "with-mute-button"
}
}
},
Expand Down
3 changes: 3 additions & 0 deletions src/components/Media/Media.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export const Media = (props: MediaAllProps) => {
playButton,
customBarControlsClassName,
qa,
ratio,
} = props;

const [hasVideoFallback, setHasVideoFallback] = useState(false);
Expand Down Expand Up @@ -80,6 +81,7 @@ export const Media = (props: MediaAllProps) => {
customBarControlsClassName,
hasVideoFallback,
setHasVideoFallback,
ratio,
};

if (fullscreen) {
Expand Down Expand Up @@ -128,6 +130,7 @@ export const Media = (props: MediaAllProps) => {
previewImg,
playButton,
customBarControlsClassName,
ratio,
youtubeClassName,
]);

Expand Down
3 changes: 3 additions & 0 deletions src/components/Media/Video/Video.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const Video = (props: VideoAllProps) => {
setHasVideoFallback,
hasVideoFallback,
qa,
ratio,
} = props;

const qaAttributes = getQaAttrubutes(qa, 'source');
Expand Down Expand Up @@ -105,6 +106,7 @@ const Video = (props: VideoAllProps) => {
height={height}
ariaLabel={ariaLabel}
customControlsOptions={customControlsOptions}
ratio={ratio}
/>
);
}, [
Expand All @@ -117,6 +119,7 @@ const Video = (props: VideoAllProps) => {
customBarControlsClassName,
metrika,
analyticsEvents,
ratio,
]);

const defaultVideoBlock = useMemo(() => {
Expand Down
86 changes: 57 additions & 29 deletions src/components/ReactPlayer/CustomBarControls.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,44 @@

$block: '.#{$ns}CustomBarControls';
$controlSize: 64px;
// custom controls sizes
$withPlayPauseControlSize: 42px;
$withPlayPauseControlIconSize: 16px;
$withMuteControlHeight: 22px;
$withMuteControlWidth: 32px;
// ---

#{$block} {
&__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;
gap: $indentXXXS;
padding: $indentXXXS;
}
}

&_positioning {
&_left,
&_right,
&_center {
display: flex;
gap: $indentS;
width: 100%;
}
&_right {
flex-direction: row-reverse;
}
&_center {
justify-content: center;
}
}
}
Expand All @@ -25,25 +51,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;
Expand All @@ -55,7 +62,7 @@ $controlSize: 64px;
height: $controlSize;
background: var(--g-color-base-background);
transition: background-color $animationDuration;
margin: 12px;
margin: $indentXXS;

&:hover,
&:focus {
Expand All @@ -69,23 +76,44 @@ $controlSize: 64px;
outline: none;
}
}

&_with-play-pause-button {
width: $withPlayPauseControlSize;
height: $withPlayPauseControlSize;
border-radius: 50%;
background: var(--g-color-base-background);
@include shadow();

&:focus {
outline: 2px solid var(--g-color-line-misc);
}
&:focus:not(:focus-visible) {
outline: none;
}
}
}
}

&__play-icon {
height: 24px;
width: 24px;
&_type {
&_with-play-pause-button {
height: $withPlayPauseControlIconSize;
width: $withPlayPauseControlIconSize;
color: var(--g-color-base-neutral-heavy);
}
}
}

&__mute-icon {
&_type {
&_with-mute-button {
height: 22px;
width: 32px;
height: $withMuteControlHeight;
width: $withMuteControlWidth;
}
&_with-play-pause-button {
height: 24px;
width: 24px;
height: $withPlayPauseControlIconSize;
width: $withPlayPauseControlIconSize;
color: var(--g-color-base-neutral-heavy);
}
}
}
Expand Down
Loading

0 comments on commit 8b7ca7d

Please sign in to comment.