From 674d0fddee8a0f5ba5595a9fb545656950cc71b9 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alison.joseph@us.ibm.com>
Date: Wed, 21 Aug 2024 10:20:09 -0500
Subject: [PATCH] Revert "feat(kaltura): adding kaltura video player to gatsby
 (#4191)" (#4210)

This reverts commit 2c95b3bd163f4e10942c145ea7e5d4e5dc375824.
---
 gatsby-ssr.js                                 |  4 --
 src/components/KalturaVideo/KalturaVideo.js   | 45 -------------------
 src/components/KalturaVideo/index.js          |  3 --
 src/pages/all-about-carbon/what-is-carbon.mdx |  4 +-
 src/pages/elements/2x-grid/overview.mdx       | 26 +++++------
 src/pages/elements/2x-grid/usage.mdx          |  3 +-
 src/pages/elements/color/overview.mdx         |  3 +-
 src/pages/elements/motion/choreography.mdx    | 32 +++++++------
 src/pages/elements/motion/overview.mdx        | 27 ++++++-----
 9 files changed, 43 insertions(+), 104 deletions(-)
 delete mode 100644 src/components/KalturaVideo/KalturaVideo.js
 delete mode 100644 src/components/KalturaVideo/index.js

diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index c598cf832fc..d29d3538de2 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -61,10 +61,6 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
       name="twitter:creator"
       content="@_carbondesign"
     />,
-    <script
-      key="video-player"
-      type="module"
-      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-player.min.js" />,
   ]);
 
   setPostBodyComponents([
diff --git a/src/components/KalturaVideo/KalturaVideo.js b/src/components/KalturaVideo/KalturaVideo.js
deleted file mode 100644
index 7793ca3cebb..00000000000
--- a/src/components/KalturaVideo/KalturaVideo.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from "prop-types";
-
-/**
- * KalturaVideo component: A video player container for Kaltura videos.
- *
- * @param {object} videoProps - KalturaVideo component props
- * @param {string} videoProps.videoid - The ID of the Kaltura video to be played.
- * @param {boolean} videoProps.hideCaption - Determines if caption should be hidden.
- * @returns {JSX.Element} JSX element containing the video player container.
- */
-const KalturaVideo = ({ videoid, hideCaption = false }) => {
-    let videoProps = {
-        'video-id': videoid,
-    }
-
-    if (hideCaption) {
-        videoProps['hide-caption'] = true;
-    }
-
-    return (
-        <div>
-            <dds-video-player-container {...videoProps}></dds-video-player-container>
-        </div>
-    );
-};
-
-/**
- * @typedef {object} KalturaVideoProps
- *
- * @property {string} videoid - The ID of the Kaltura video to be played.
- */
-KalturaVideo.propTypes = {
-    hideCaption: PropTypes.bool,
-    videoid: PropTypes.string.isRequired,
-};
-
-/**
- * @type {{hideCaption: boolean}}
- */
-KalturaVideo.defaultProps = {
-    hideCaption: false,
-}
-
-export default KalturaVideo;
diff --git a/src/components/KalturaVideo/index.js b/src/components/KalturaVideo/index.js
deleted file mode 100644
index 2e0c6962167..00000000000
--- a/src/components/KalturaVideo/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import KalturaVideo from './KalturaVideo';
-
-export default KalturaVideo;
diff --git a/src/pages/all-about-carbon/what-is-carbon.mdx b/src/pages/all-about-carbon/what-is-carbon.mdx
index 00d9ef87cca..248681d729b 100755
--- a/src/pages/all-about-carbon/what-is-carbon.mdx
+++ b/src/pages/all-about-carbon/what-is-carbon.mdx
@@ -6,8 +6,6 @@ description:
   consists of working code, design tools, and more.
 ---
 
-import KalturaVideo from 'components/KalturaVideo';
-
 <PageDescription>
 
 Carbon is IBM's open source design system for products and digital experiences.
@@ -54,7 +52,7 @@ Learn about Carbon and its history. This video covers how the IBM Design
 Language is applied to Carbon, how Carbon interacts with domain level guidance,
 and what it means to be an open source design system.
 
-<KalturaVideo videoid="1_68e5qyal"></KalturaVideo>
+<Video title="Introduction to Carbon" vimeoId="457802924" />
 
 ## How Carbon works
 
diff --git a/src/pages/elements/2x-grid/overview.mdx b/src/pages/elements/2x-grid/overview.mdx
index 9c77fb19fa0..25b0847f15a 100644
--- a/src/pages/elements/2x-grid/overview.mdx
+++ b/src/pages/elements/2x-grid/overview.mdx
@@ -6,8 +6,6 @@ description:
 tabs: ['Overview', 'Usage', 'Code']
 ---
 
-import KalturaVideo from 'components/KalturaVideo';
-
 <PageDescription>
 
 It’s fundamental to everything we design. The 2x Grid is the geometric
@@ -27,7 +25,7 @@ creative decision-making.
 
 </AnchorLinks>
 
-<KalturaVideo videoid="1_35lz8xds"></KalturaVideo>
+<Video title="2x Grid Overview" vimeoId="281513522" />
 
 ## Mini unit
 
@@ -44,7 +42,7 @@ Margin and padding are always applied in fixed mini unit multiples. Boxes are
 sized by applying a sizing scale based on either fixed mini units or fluid
 column widths, along with a core set of aspect ratios.
 
-<KalturaVideo videoid="1_o9azejx0"></KalturaVideo>
+<Video title="Mini unit" vimeoId="292608020" />
 
 ## 2x Grid fundamentals
 
@@ -160,7 +158,7 @@ for more information.
 
 For best results, test designs and code at each of these standard breakpoints.
 
-<KalturaVideo videoid="1_6lu45vhf"></KalturaVideo>
+<Video title="Breakpoints" vimeoId="292015984" />
 
 ## Grid behaviors
 
@@ -195,7 +193,7 @@ ratios. Margin and padding are fixed multiples of mini units. In between
 breakpoints, actual column width is a percentage of the grid area, not a mini
 unit multiple. Content scales fluidly.
 
-<KalturaVideo videoid="1_sy3d48pv"></KalturaVideo>
+<Video title="Fluid grid" vimeoId="292024522" />
 
 ### Fixed boxes
 
@@ -203,7 +201,7 @@ A grid can be formed with fixed boxes by arranging tiles in an inline block,
 icons in toolbars, etc. Column count grows with browser width. Tiles wrap to the
 next line, or are sometimes truncated with an overflow scroll.
 
-<KalturaVideo videoid="1_tzcg1t0h"></KalturaVideo>
+<Video title="Fixed boxes" vimeoId="292024183" />
 
 First choose a base size from the [sizing scale](#sizing-scale), then build up
 each box in multiples of the base size, following recommended
@@ -221,7 +219,7 @@ Use the [sizing scale](#sizing-scale) to size a fixed dimension. Use
 column-width multiples to size a grid-fluid dimension. Aspect ratios do not
 apply.
 
-<KalturaVideo videoid="1_c8za6jzw"></KalturaVideo>
+<Video title="Hybrid boxes" vimeoId="292025098" />
 
 Here are some common UI behaviors:
 
@@ -287,7 +285,7 @@ The collapsed Flexible Panel expands when the user hovers over any portion of
 it. When flexible panels expand, they either condense both the content and the
 grid or they push content beyond the edge of the browser.
 
-<KalturaVideo videoid="1_uto06vm9"></KalturaVideo>
+<Video title="Flexible panels" vimeoId="292975726" />
 
 <br />
 <br />
@@ -297,7 +295,7 @@ grid or they push content beyond the edge of the browser.
 Fixed panels maintain a static width, cannot be collapsed, and also exist
 outside of the responsive grid.
 
-<KalturaVideo videoid="1_zcv32omy"></KalturaVideo>
+<Video title="Fixed panels" vimeoId="292988292" />
 
 <br />
 <br />
@@ -308,7 +306,7 @@ This panel style floats above the primary content area and does not affect the
 responsive grid. Floating panels conceal any UI elements below them and must be
 dismissible by the user. Inline menus, dropdowns and tooltips also float.
 
-<KalturaVideo videoid="1_wjyfir70"></KalturaVideo>
+<Video title="Floating panels" vimeoId="292977039" />
 
 ## Sizing scale
 
@@ -363,7 +361,7 @@ etc. Check out the [breakpoints table](#breakpoints) for pixel sizings.
 After determining your base size, multiply it as needed for each use. For box
 sizing, apply an [aspect ratio](#aspect-ratio) too.
 
-<KalturaVideo videoid="1_1xyynstm"></KalturaVideo>
+<Video title="Scaling multiple" vimeoId="292026497" />
 
 ### Aspect ratio
 
@@ -391,7 +389,7 @@ it by 4 in width and 2 in height, for a fixed box size of 320 by 160.
 Use the fixed sizing scale to set vertical spacing between sections, by adding
 it to the top or bottom margin of a box:
 
-<KalturaVideo videoid="1_kmt1akr3"></KalturaVideo>
+<Video title="Vertical rhythm" vimeoId="292028388" />
 
 <DoDontRow>
   <DoDont
@@ -419,4 +417,4 @@ When multiple components adhere to the same scale, grid relationships naturally
 emerge. For example, vertically aligning form fields such as checkboxes and
 radio buttons produces a grid effect when interior spacing is consistent.
 
-<KalturaVideo videoid="1_anzhsyee"></KalturaVideo>
+<Video title="Components" vimeoId="292028752" />
diff --git a/src/pages/elements/2x-grid/usage.mdx b/src/pages/elements/2x-grid/usage.mdx
index 576e27ae1f3..c06fc467816 100644
--- a/src/pages/elements/2x-grid/usage.mdx
+++ b/src/pages/elements/2x-grid/usage.mdx
@@ -8,7 +8,6 @@ tabs: ['Overview', 'Usage', 'Code']
 
 import { IbmSecurity } from '@carbon/icons-react';
 import { gridTable } from './Grid.module.scss';
-import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -282,7 +281,7 @@ navigation panel the most common example of a grid influencer in our ecosystem.
 When opening and closing the left-hand navigation, the number of columns remains
 the same but responds fluidly to the allotted space.
 
-<KalturaVideo videoid="1_u8h2z1oh"></KalturaVideo>
+<Video title="Usage" vimeoId="363369752" />
 
 #### Slide-in side panels
 
diff --git a/src/pages/elements/color/overview.mdx b/src/pages/elements/color/overview.mdx
index 54e6c70bb6a..78222319ca0 100755
--- a/src/pages/elements/color/overview.mdx
+++ b/src/pages/elements/color/overview.mdx
@@ -8,7 +8,6 @@ tabs: ['Overview', 'Usage', 'Tokens', 'Code']
 
 import ColorBlock from 'components/ColorBlock';
 import ColorGrid from 'components/ColorGrid';
-import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -32,7 +31,7 @@ harmony through our User Interface design.
 
 </AnchorLinks>
 
-<KalturaVideo videoid="1_hmwoybv8"></KalturaVideo>
+<Video title="Color Overview" vimeoId="281513790" />
 
 <br />
 
diff --git a/src/pages/elements/motion/choreography.mdx b/src/pages/elements/motion/choreography.mdx
index 28cfbb99cac..600ef781a3f 100644
--- a/src/pages/elements/motion/choreography.mdx
+++ b/src/pages/elements/motion/choreography.mdx
@@ -7,8 +7,6 @@ description:
 tabs: ['Overview', 'Choreography', 'Code']
 ---
 
-import KalturaVideo from 'components/KalturaVideo';
-
 <AnchorLinks>
 
 <AnchorLink>Paths</AnchorLink>
@@ -24,7 +22,7 @@ which never run diagonally.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="When expanding or moving elements across the screen, stagger the timing of horizontal and vertical animations to create a path with a rounded corner.">
 
-<KalturaVideo videoid="1_jgoaaek6" hideCaption></KalturaVideo>
+<Video title="Paths staggering horizontally" vimeoId="310582887" />
 
 </DoDont>
 </DoDontRow>
@@ -34,7 +32,7 @@ which never run diagonally.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} type="dont" caption="Not staggering horizontal and vertical animations create a straight diagonal path. It breaks the grid and is harsh to the eye.">
 
-<KalturaVideo videoid="1_jg4f1aic" hideCaption></KalturaVideo>
+<Video title="Paths not staggering horizontally" vimeoId="310582699" />
 
 </DoDont>
 </DoDontRow>
@@ -44,12 +42,12 @@ which never run diagonally.
 <DoDontRow>
 <DoDont type="do" aspectRatio="1:1" caption="When removing an item from the grid, thumbnails on the edge existing and re-entering container create a smooth transition.">
 
-<KalturaVideo videoid="1_mn5rj9pw" hideCaption></KalturaVideo>
+<Video title="Thumbnails with smooth transition" vimeoId="310582738" />
 
 </DoDont>
 <DoDont type="dont"  aspectRatio="1:1" caption="Thumbnails moving on diagonal paths feels sporadic and harsh.">
 
-<KalturaVideo videoid="1_u4ryjvr2" hideCaption></KalturaVideo>
+<Video title="Thumbnails with sporadic transition" vimeoId="310582775" />
 
 </DoDont>
 </DoDontRow>
@@ -57,12 +55,12 @@ which never run diagonally.
 <DoDontRow>
 <DoDont type="do" aspectRatio="1:1"  caption="When sorting or shuffling items on the grid, always using rounded corner paths to visually organize the movements.">
 
-<KalturaVideo videoid="1_3en5b830" hideCaption></KalturaVideo>
+<Video title="organized sort and shuffle" vimeoId="310582816" />
 
 </DoDont>
 <DoDont type="dont" aspectRatio="1:1" caption="Criss cross sorting appears disorganized. Avoid this motion path.">
 
-<KalturaVideo videoid="1_9obbx20i" hideCaption></KalturaVideo>
+<Video title="disorganized criss crossing" vimeoId="310582851" />
 
 </DoDont>
 </DoDontRow>
@@ -90,7 +88,7 @@ to their difference in size.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="Comparing data table expansion and dropdown">
 
-<KalturaVideo videoid="1_sagqi4ai" hideCaption></KalturaVideo>
+<Video title="Semantic consistency" vimeoId="310581970" />
 
 </DoDont>
 </DoDontRow>
@@ -104,7 +102,7 @@ to clarify their respective spatial locations.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="When the new content panel is on a higher layer, motion is “sliding”, moving content within with the panel.  Also always dim the content below when new layer is introduced above.">
 
-<KalturaVideo videoid="1_y12c3w2u" hideCaption></KalturaVideo>
+<Video title="Spatial consistency" vimeoId="310581999" />
 
 </DoDont>
 </DoDontRow>
@@ -112,7 +110,7 @@ to clarify their respective spatial locations.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="When the new content panel is on the same layer, motion is “pushing”, revealing content within with a mask.">
 
-<KalturaVideo videoid="1_3neh7v17" hideCaption></KalturaVideo>
+<Video title="new content panel" vimeoId="310582064" />
 
 </DoDont>
 </DoDontRow>
@@ -127,12 +125,12 @@ motion signals cancellation.
 <DoDontRow>
 <DoDont type="do" aspectRatio="1:1" caption="Use motion to reinforce meaning. Affirmative action here triggers a different exit motion for the modal than negation.">
 
-<KalturaVideo videoid="1_nezauvly" hideCaption></KalturaVideo>
+<Video title="Intentional inconsistency" vimeoId="310582134" />
 
 </DoDont>
 <DoDont type="dont" aspectRatio="1:1">
 
-<KalturaVideo videoid="1_q5df3gg6" hideCaption></KalturaVideo>
+<Video title="incorrect intentional inconsistency" vimeoId="310582167" />
 
 </DoDont>
 </DoDontRow>
@@ -146,7 +144,7 @@ buttons, to create a graceful transition.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="Shared elements can effectively guide users through a multi-layered information architecture.">
 
-<KalturaVideo videoid="1_79e8hspk" hideCaption></KalturaVideo>
+<Video title="Continuity" vimeoId="310582206" />
 
 </DoDont>
 </DoDontRow>
@@ -154,7 +152,7 @@ buttons, to create a graceful transition.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} type="dont" caption="Continuous elements are for guidance and should not distract. Always finish a sequence with the important content on page.">
 
-<KalturaVideo videoid="1_3bydz1mz" hideCaption></KalturaVideo>
+<Video title="Continuity should not distract" vimeoId="310582279" />
 
 </DoDont>
 </DoDontRow>
@@ -172,7 +170,7 @@ delay should be adjusted to ensure that total time is still within 500 ms.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="Table with rows loading in at staggered timing.">
 
-<KalturaVideo videoid="1_6aelv7eh" hideCaption></KalturaVideo>
+<Video title="Sequence and stagger" vimeoId="310582972" />
 
 </DoDont>
 </DoDontRow>
@@ -185,7 +183,7 @@ user’s attention on them.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="Sequencing of this interface prioritizes the primary button, and reserves data visualization for later when users begin to scroll, indicating intention to dive deeper.">
 
-<KalturaVideo videoid="1_sx1yy7l2" hideCaption></KalturaVideo>
+<Video title="Sequencing" vimeoId="310582919" />
 
 </DoDont>
 </DoDontRow>
diff --git a/src/pages/elements/motion/overview.mdx b/src/pages/elements/motion/overview.mdx
index 1ad1ede194f..4ec1b6cd4db 100644
--- a/src/pages/elements/motion/overview.mdx
+++ b/src/pages/elements/motion/overview.mdx
@@ -8,7 +8,6 @@ tabs: ['Overview', 'Choreography', 'Code']
 ---
 
 import { Tab } from '@carbon/react';
-import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -29,7 +28,7 @@ make progress.
 
 </AnchorLinks>
 
-<KalturaVideo videoid="1_8k5q64c3"></KalturaVideo>
+<Video title="Motion Overview" vimeoId="281513709" />
 
 ## Carbon in motion
 
@@ -71,13 +70,13 @@ user’s attention and offer a rhythmic break to the productive experience.
 
 <Tab label="Abstract">
 
-<KalturaVideo videoid="1_dxffexqh" hideCaption></KalturaVideo>
+<Video title="Style Abstract" vimeoId="310583009" />
 
 </Tab>
 
 <Tab label="In-situ">
 
-<KalturaVideo videoid="1_3o97rxc1" hideCaption></KalturaVideo>
+<Video title="Style In-situ" vimeoId="310583036" />
 
 </Tab>
 
@@ -103,7 +102,7 @@ for expressive motion.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} fullWidth caption="Productive moments are labeled in blue, and expressive moments are labeled in magenta.">
 
-<KalturaVideo videoid="1_rwyr3h76" hideCaption></KalturaVideo>
+<Video title="Expressive motion" vimeoId="310583077" />
 
 </DoDont>
 </DoDontRow>
@@ -118,7 +117,7 @@ accelerations in motion. We commonly use one of these three types of easing.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} fullWidth caption="Elements on the screen speed up quickly and slow down smoothly, obeying the physics of a light-weight material.">
 
-<KalturaVideo videoid="1_m9uqrae1" hideCaption></KalturaVideo>
+<Video title="Erasing" vimeoId="310582370" />
 
 </DoDont>
 </DoDontRow>
@@ -132,7 +131,7 @@ possible.
 <DoDontRow>
 <DoDont colLg={12} colMd={8} type="dont" fullWidth caption="Do not use easing curves that suggest bounce, stretch, or sudden stops.">
 
-<KalturaVideo videoid="1_futf7n64" hideCaption></KalturaVideo>
+<Video title="avoid easing curves" vimeoId="310582418" />
 
 </DoDont>
 </DoDontRow>
@@ -146,14 +145,14 @@ of a motion. Expanding tiles and the sorting of table rows are good examples.
 <Tab label="Curves">
 <div>
 
-<KalturaVideo videoid="1_5xp6hw4z" hideCaption></KalturaVideo>
+<Video title="Standard easing curves 01" vimeoId="310582611" />
 
 </div>
 </Tab>
 <Tab label="Examples">
 <div>
 
-<KalturaVideo videoid="1_7avpv9lf" hideCaption></KalturaVideo>
+<Video title="Standard easing examples 01" vimeoId="310582667" />
 
 </div>
 </Tab>
@@ -175,14 +174,14 @@ opening or toggle switching should also use this style.
 <Tab label="Curves">
 <div>
 
-<KalturaVideo videoid="1_cky58bmx" hideCaption></KalturaVideo>
+<Video title="Standard easing curves 02" vimeoId="310582467" />
 
 </div>
 </Tab>
 <Tab label="Examples">
 <div>
 
-<KalturaVideo videoid="1_rc683pj2" hideCaption></KalturaVideo>
+<Video title="Standard easing examples 02" vimeoId="310582503" />
 
 </div>
 </Tab>
@@ -208,14 +207,14 @@ that it would come to rest just outside the view, and ready to be recalled.
 <Tab label="Curves">
 <div>
 
-<KalturaVideo videoid="1_nncohnz0" hideCaption></KalturaVideo>
+<Video title="Standard easing curves 03" vimeoId="310582530" />
 
 </div>
 </Tab>
 <Tab label="Examples">
 <div>
 
-<KalturaVideo videoid="1_4a4zfbi2" hideCaption></KalturaVideo>
+<Video title="Standard easing examples 03" vimeoId="310582574" />
 
 </div>
 </Tab>
@@ -259,7 +258,7 @@ longer the animation takes.
 <DoDontRow>
 <DoDont type="do" colLg={8} colMd={8} caption="Duration contrast between a taller and a shorter component.">
 
-<KalturaVideo videoid="1_nmfn625x" hideCaption></KalturaVideo>
+<Video title="Duration" vimeoId="310582312" />
 
 </DoDont>
 </DoDontRow>