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": {