Revert "feat(kaltura): adding kaltura video player to gatsby (#4191)" (…

…#4210) This reverts commit 2c95b3b.
carbon-design-system · Aug 21, 2024 · 674d0fd · 674d0fd
1 parent 2c95b3b
commit 674d0fd
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 104 deletions.
diff --git 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
diff --git a/src/components/KalturaVideo/index.js b/src/components/KalturaVideo/index.js
diff --git 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
@@ -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,15 +193,15 @@ 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
 
 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
@@ -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
@@ -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
@@ -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,25 +42,25 @@ 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>
 
 <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,15 +102,15 @@ 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>
 
 <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,15 +144,15 @@ 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>
 
 <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>