fix: remove first version of custom controls, use autoplayed version …

…for the second one
gravity-ui · Sep 27, 2023 · b515987 · b515987
1 parent 9a2d873
commit b515987
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 77 deletions.
diff --git a/src/blocks/Media/__stories__/Media.stories.tsx b/src/blocks/Media/__stories__/Media.stories.tsx
@@ -68,6 +68,12 @@ const VideoTemplate: StoryFn<MediaBlockModel> = (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<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.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
@@ -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": {