From f604b8c49cfe59ff7cff3edfb078a3b663d4ba70 Mon Sep 17 00:00:00 2001
From: kennylam <909118+kennylam@users.noreply.github.com>
Date: Tue, 23 Jan 2024 15:32:03 -0500
Subject: [PATCH] chore(percy): skip components with autoplay video (#11441)

### Description

When capturing visual snapshots, Percy can (will) be inconsistent if the component contains auto-playing videos. This is because it is impossible for Percy to take the snapshot at the exact same frame every time, resulting in frequent visual diffs. This PR skips components with auto-playing videos.

### Changelog

**New**

- {{new thing}}

**Changed**

- skip components with auto-play videos

**Removed**

- {{removed thing}}

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../__stories__/background-media.stories.ts   | 11 +++++++-
 .../__stories__/leadspace.stories.ts          | 27 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts b/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
index 51cdf365555..09f7f7bdc8e 100644
--- a/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
+++ b/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,6 +62,15 @@ export const WithVideo = (args) => {
   `;
 };
 
+WithVideo.story = {
+  name: 'with video',
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+};
+
 export const WithDefaultSource = (args) => {
   const { alt, gradientDirection, backgroundOpacity } =
     args?.['c4d-background-media'] ?? {};
diff --git a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
index 2cae0ea41d9..f9347d3a038 100644
--- a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
+++ b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -192,6 +192,11 @@ export const SuperWithVideo = (args) => {
 
 SuperWithVideo.story = {
   name: 'Super with video',
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
 };
 
 export const Tall = (args) => {
@@ -327,6 +332,11 @@ export const TallWithVideo = (args) => {
 
 TallWithVideo.story = {
   name: 'Tall with video',
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
 };
 
 export const Medium = (args) => {
@@ -462,6 +472,11 @@ export const MediumWithVideo = (args) => {
 
 MediumWithVideo.story = {
   name: 'Medium with video',
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
 };
 
 export const Short = (args) => {
@@ -606,6 +621,11 @@ export const ShortWithVideo = (args) => {
 
 ShortWithVideo.story = {
   name: 'Short with video',
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
 };
 
 export const Centered = (args) => {
@@ -715,6 +735,11 @@ export const CenteredWithVideo = (args) => {
 
 CenteredWithVideo.story = {
   name: 'Centered with video',
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
 };
 
 const getAriaLabel = (type) => {