Skip to content

Commit 8b7ca7d

Browse files
Kyzyl-oolKyzyl-ool
authored
feat: media custom consol with play/pause button changed (#566)
* 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
1 parent c5c7893 commit 8b7ca7d

File tree

13 files changed

+191
-299
lines changed

13 files changed

+191
-299
lines changed

‎src/blocks/Media/__stories__/Media.stories.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,12 @@ const VideoTemplate: StoryFn<MediaBlockModel> = (args) => (
6868
title: data.video.staticWithAutoPlay.title,
6969
media: data.video.staticWithAutoPlay.media,
7070
},
71+
{
72+
...args,
73+
title: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton.title,
74+
media: data.video.videoWithAutoPlayCustomControlsWithPlayPauseButton
75+
.media as MediaProps,
76+
},
7177
{
7278
...args,
7379
title: data.video.staticWithControls.title,
@@ -84,12 +90,6 @@ const VideoTemplate: StoryFn<MediaBlockModel> = (args) => (
8490
media: data.video.videoWithPreviewAndCustomControlsWithMuteButton
8591
.media as MediaProps,
8692
},
87-
{
88-
...args,
89-
title: data.video.videoWithPreviewAndCustomControlsWithPlayPauseButton.title,
90-
media: data.video.videoWithPreviewAndCustomControlsWithPlayPauseButton
91-
.media as MediaProps,
92-
},
9393
{
9494
...args,
9595
title: data.video.youtube.title,

‎src/blocks/Media/__stories__/data.json‎

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@
114114
}
115115
}
116116
},
117-
"staticWithControls": {
118-
"title": "Video with controls and without autoplay",
117+
"videoWithAutoPlayCustomControlsWithPlayPauseButton": {
118+
"title": "Video with autoplay and custom controls with play/pause button",
119119
"media": {
120120
"light": {
121121
"video": {
@@ -125,8 +125,19 @@
125125
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.mp4",
126126
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png"
127127
],
128-
"autoplay": false,
129-
"ariaLabel": "Video accessible name example"
128+
"autoplay": true,
129+
"ariaLabel": "Video accessible name example",
130+
"controls": "custom",
131+
"customControlsOptions": {
132+
"type": "with-play-pause-button",
133+
"muteButtonShown": false,
134+
"backgroundShadowHidden": true,
135+
"positioning": "left"
136+
},
137+
"muted": true,
138+
"loop": {
139+
"start": 0
140+
}
130141
}
131142
},
132143
"dark": {
@@ -137,23 +148,27 @@
137148
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.mp4",
138149
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png"
139150
],
140-
"autoplay": false,
141-
"ariaLabel": "Video accessible name example"
151+
"autoplay": true,
152+
"ariaLabel": "Video accessible name example",
153+
"controls": "custom",
154+
"customControlsOptions": {
155+
"type": "with-play-pause-button",
156+
"muteButtonShown": false,
157+
"backgroundShadowHidden": true,
158+
"positioning": "left"
159+
},
160+
"muted": true,
161+
"loop": {
162+
"start": 0
163+
}
142164
}
143165
}
144166
}
145167
},
146-
"youtube": {
147-
"title": "Video from video-hosting",
148-
"media": {
149-
"youtube": "https://youtu.be/0Qd3T6skprA"
150-
}
151-
},
152-
"videoWithPreview": {
153-
"title": "Video with preview image and play button",
168+
"staticWithControls": {
169+
"title": "Video with controls and without autoplay",
154170
"media": {
155171
"light": {
156-
"previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png",
157172
"video": {
158173
"type": "player",
159174
"src": [
@@ -166,7 +181,6 @@
166181
}
167182
},
168183
"dark": {
169-
"previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_dark.png",
170184
"video": {
171185
"type": "player",
172186
"src": [
@@ -180,8 +194,14 @@
180194
}
181195
}
182196
},
183-
"videoWithPreviewAndCustomControlsWithMuteButton": {
184-
"title": "Video with preview image, play button and custom controls with mute button",
197+
"youtube": {
198+
"title": "Video from video-hosting",
199+
"media": {
200+
"youtube": "https://youtu.be/0Qd3T6skprA"
201+
}
202+
},
203+
"videoWithPreview": {
204+
"title": "Video with preview image and play button",
185205
"media": {
186206
"light": {
187207
"previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png",
@@ -193,11 +213,7 @@
193213
"https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png"
194214
],
195215
"autoplay": false,
196-
"ariaLabel": "Video accessible name example",
197-
"controls": "custom",
198-
"customControlsOptions": {
199-
"type": "with-mute-button"
200-
}
216+
"ariaLabel": "Video accessible name example"
201217
}
202218
},
203219
"dark": {
@@ -215,8 +231,8 @@
215231
}
216232
}
217233
},
218-
"videoWithPreviewAndCustomControlsWithPlayPauseButton": {
219-
"title": "Video with preview image, play button and custom controls with play/pause and mute button",
234+
"videoWithPreviewAndCustomControlsWithMuteButton": {
235+
"title": "Video with preview image, play button and custom controls with mute button",
220236
"media": {
221237
"light": {
222238
"previewImg": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/video_8-12_white.png",
@@ -231,7 +247,7 @@
231247
"ariaLabel": "Video accessible name example",
232248
"controls": "custom",
233249
"customControlsOptions": {
234-
"type": "with-play-pause-button"
250+
"type": "with-mute-button"
235251
}
236252
}
237253
},

‎src/components/Media/Media.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const Media = (props: MediaAllProps) => {
4040
playButton,
4141
customBarControlsClassName,
4242
qa,
43+
ratio,
4344
} = props;
4445

4546
const [hasVideoFallback, setHasVideoFallback] = useState(false);
@@ -80,6 +81,7 @@ export const Media = (props: MediaAllProps) => {
8081
customBarControlsClassName,
8182
hasVideoFallback,
8283
setHasVideoFallback,
84+
ratio,
8385
};
8486

8587
if (fullscreen) {
@@ -128,6 +130,7 @@ export const Media = (props: MediaAllProps) => {
128130
previewImg,
129131
playButton,
130132
customBarControlsClassName,
133+
ratio,
131134
youtubeClassName,
132135
]);
133136

‎src/components/Media/Video/Video.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const Video = (props: VideoAllProps) => {
4141
setHasVideoFallback,
4242
hasVideoFallback,
4343
qa,
44+
ratio,
4445
} = props;
4546

4647
const qaAttributes = getQaAttrubutes(qa, 'source');
@@ -105,6 +106,7 @@ const Video = (props: VideoAllProps) => {
105106
height={height}
106107
ariaLabel={ariaLabel}
107108
customControlsOptions={customControlsOptions}
109+
ratio={ratio}
108110
/>
109111
);
110112
}, [
@@ -117,6 +119,7 @@ const Video = (props: VideoAllProps) => {
117119
customBarControlsClassName,
118120
metrika,
119121
analyticsEvents,
122+
ratio,
120123
]);
121124

122125
const defaultVideoBlock = useMemo(() => {

‎src/components/ReactPlayer/CustomBarControls.scss‎

Lines changed: 57 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,44 @@
33

44
$block: '.#{$ns}CustomBarControls';
55
$controlSize: 64px;
6+
// custom controls sizes
7+
$withPlayPauseControlSize: 42px;
8+
$withPlayPauseControlIconSize: 16px;
9+
$withMuteControlHeight: 22px;
10+
$withMuteControlWidth: 32px;
11+
// ---
612

713
#{$block} {
814
&__wrapper {
915
position: absolute;
1016
bottom: 0;
17+
opacity: 0;
18+
transition: opacity $animationDuration ease 3s;
19+
20+
&_shown {
21+
opacity: 1;
22+
transition: opacity 0s ease 0s;
23+
}
1124

1225
&_type {
1326
&_with-play-pause-button {
14-
width: 100%;
15-
padding: $indentS;
27+
gap: $indentXXXS;
28+
padding: $indentXXXS;
29+
}
30+
}
31+
32+
&_positioning {
33+
&_left,
34+
&_right,
35+
&_center {
1636
display: flex;
17-
gap: $indentS;
37+
width: 100%;
38+
}
39+
&_right {
40+
flex-direction: row-reverse;
41+
}
42+
&_center {
43+
justify-content: center;
1844
}
1945
}
2046
}
@@ -25,25 +51,6 @@ $controlSize: 64px;
2551
cursor: pointer;
2652

2753
&_type {
28-
&_with-play-pause-button {
29-
opacity: 0.9;
30-
background-color: transparent;
31-
transition: opacity $animationDuration ease 3s;
32-
33-
&:hover,
34-
&:focus {
35-
opacity: 1;
36-
}
37-
&:focus {
38-
outline: 1px solid var(--g-color-line-light);
39-
outline-offset: 2px;
40-
border-radius: 4px;
41-
}
42-
&:focus:not(:focus-visible) {
43-
outline: none;
44-
}
45-
}
46-
4754
&_with-mute-button {
4855
border-radius: 50%;
4956
display: flex;
@@ -55,7 +62,7 @@ $controlSize: 64px;
5562
height: $controlSize;
5663
background: var(--g-color-base-background);
5764
transition: background-color $animationDuration;
58-
margin: 12px;
65+
margin: $indentXXS;
5966

6067
&:hover,
6168
&:focus {
@@ -69,23 +76,44 @@ $controlSize: 64px;
6976
outline: none;
7077
}
7178
}
79+
80+
&_with-play-pause-button {
81+
width: $withPlayPauseControlSize;
82+
height: $withPlayPauseControlSize;
83+
border-radius: 50%;
84+
background: var(--g-color-base-background);
85+
@include shadow();
86+
87+
&:focus {
88+
outline: 2px solid var(--g-color-line-misc);
89+
}
90+
&:focus:not(:focus-visible) {
91+
outline: none;
92+
}
93+
}
7294
}
7395
}
7496

7597
&__play-icon {
76-
height: 24px;
77-
width: 24px;
98+
&_type {
99+
&_with-play-pause-button {
100+
height: $withPlayPauseControlIconSize;
101+
width: $withPlayPauseControlIconSize;
102+
color: var(--g-color-base-neutral-heavy);
103+
}
104+
}
78105
}
79106

80107
&__mute-icon {
81108
&_type {
82109
&_with-mute-button {
83-
height: 22px;
84-
width: 32px;
110+
height: $withMuteControlHeight;
111+
width: $withMuteControlWidth;
85112
}
86113
&_with-play-pause-button {
87-
height: 24px;
88-
width: 24px;
114+
height: $withPlayPauseControlIconSize;
115+
width: $withPlayPauseControlIconSize;
116+
color: var(--g-color-base-neutral-heavy);
89117
}
90118
}
91119
}

0 commit comments

Comments
 (0)