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

* feat(kaltura): adding kaltura video player to gatsby * fix(kaltura): switch to v1 kaltura player for now * chore(kaltura): swapping motion videos * chore(kaltura): adding videos for 2x grid * chore(kaltura): adding color overview * chore(kaltura): adding motion - choreography videos * chore(kaltura): remove excess comments --------- Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
carbon-design-system · Aug 21, 2024 · 2c95b3b · 2c95b3b
1 parent 1649cf9
commit 2c95b3b
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 43 deletions.
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -61,6 +61,10 @@ 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
@@ -0,0 +1,45 @@
+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
@@ -0,0 +1,3 @@
+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
@@ -6,6 +6,8 @@ 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.
@@ -52,7 +54,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.
 
-<Video title="Introduction to Carbon" vimeoId="457802924" />
+<KalturaVideo videoid="1_68e5qyal"></KalturaVideo>
 
 ## How Carbon works
 

diff --git a/src/pages/elements/2x-grid/overview.mdx b/src/pages/elements/2x-grid/overview.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Overview', 'Usage', 'Code']
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <PageDescription>
 
 It’s fundamental to everything we design. The 2x Grid is the geometric
@@ -25,7 +27,7 @@ creative decision-making.
 
 </AnchorLinks>
 
-<Video title="2x Grid Overview" vimeoId="281513522" />
+<KalturaVideo videoid="1_35lz8xds"></KalturaVideo>
 
 ## Mini unit
 
@@ -42,7 +44,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.
 
-<Video title="Mini unit" vimeoId="292608020" />
+<KalturaVideo videoid="1_o9azejx0"></KalturaVideo>
 
 ## 2x Grid fundamentals
 
@@ -158,7 +160,7 @@ for more information.
 
 For best results, test designs and code at each of these standard breakpoints.
 
-<Video title="Breakpoints" vimeoId="292015984" />
+<KalturaVideo videoid="1_6lu45vhf"></KalturaVideo>
 
 ## Grid behaviors
 
@@ -193,15 +195,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.
 
-<Video title="Fluid grid" vimeoId="292024522" />
+<KalturaVideo videoid="1_sy3d48pv"></KalturaVideo>
 
 ### 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.
 
-<Video title="Fixed boxes" vimeoId="292024183" />
+<KalturaVideo videoid="1_tzcg1t0h"></KalturaVideo>
 
 First choose a base size from the [sizing scale](#sizing-scale), then build up
 each box in multiples of the base size, following recommended
@@ -219,7 +221,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.
 
-<Video title="Hybrid boxes" vimeoId="292025098" />
+<KalturaVideo videoid="1_c8za6jzw"></KalturaVideo>
 
 Here are some common UI behaviors:
 
@@ -285,7 +287,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.
 
-<Video title="Flexible panels" vimeoId="292975726" />
+<KalturaVideo videoid="1_uto06vm9"></KalturaVideo>
 
 <br />
 <br />
@@ -295,7 +297,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.
 
-<Video title="Fixed panels" vimeoId="292988292" />
+<KalturaVideo videoid="1_zcv32omy"></KalturaVideo>
 
 <br />
 <br />
@@ -306,7 +308,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.
 
-<Video title="Floating panels" vimeoId="292977039" />
+<KalturaVideo videoid="1_wjyfir70"></KalturaVideo>
 
 ## Sizing scale
 
@@ -361,7 +363,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.
 
-<Video title="Scaling multiple" vimeoId="292026497" />
+<KalturaVideo videoid="1_1xyynstm"></KalturaVideo>
 
 ### Aspect ratio
 
@@ -389,7 +391,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:
 
-<Video title="Vertical rhythm" vimeoId="292028388" />
+<KalturaVideo videoid="1_kmt1akr3"></KalturaVideo>
 
 <DoDontRow>
   <DoDont
@@ -417,4 +419,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.
 
-<Video title="Components" vimeoId="292028752" />
+<KalturaVideo videoid="1_anzhsyee"></KalturaVideo>
diff --git a/src/pages/elements/2x-grid/usage.mdx b/src/pages/elements/2x-grid/usage.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Usage', 'Code']
 
 import { IbmSecurity } from '@carbon/icons-react';
 import { gridTable } from './Grid.module.scss';
+import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -281,7 +282,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.
 
-<Video title="Usage" vimeoId="363369752" />
+<KalturaVideo videoid="1_u8h2z1oh"></KalturaVideo>
 
 #### Slide-in side panels
 

diff --git a/src/pages/elements/color/overview.mdx b/src/pages/elements/color/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Usage', 'Tokens', 'Code']
 
 import ColorBlock from 'components/ColorBlock';
 import ColorGrid from 'components/ColorGrid';
+import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -31,7 +32,7 @@ harmony through our User Interface design.
 
 </AnchorLinks>
 
-<Video title="Color Overview" vimeoId="281513790" />
+<KalturaVideo videoid="1_hmwoybv8"></KalturaVideo>
 
 <br />
 

diff --git a/src/pages/elements/motion/choreography.mdx b/src/pages/elements/motion/choreography.mdx
@@ -7,6 +7,8 @@ description:
 tabs: ['Overview', 'Choreography', 'Code']
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <AnchorLinks>
 
 <AnchorLink>Paths</AnchorLink>
@@ -22,7 +24,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.">
 
-<Video title="Paths staggering horizontally" vimeoId="310582887" />
+<KalturaVideo videoid="1_jgoaaek6" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -32,7 +34,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.">
 
-<Video title="Paths not staggering horizontally" vimeoId="310582699" />
+<KalturaVideo videoid="1_jg4f1aic" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -42,25 +44,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.">
 
-<Video title="Thumbnails with smooth transition" vimeoId="310582738" />
+<KalturaVideo videoid="1_mn5rj9pw" hideCaption></KalturaVideo>
 
 </DoDont>
 <DoDont type="dont"  aspectRatio="1:1" caption="Thumbnails moving on diagonal paths feels sporadic and harsh.">
 
-<Video title="Thumbnails with sporadic transition" vimeoId="310582775" />
+<KalturaVideo videoid="1_u4ryjvr2" hideCaption></KalturaVideo>
 
 </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.">
 
-<Video title="organized sort and shuffle" vimeoId="310582816" />
+<KalturaVideo videoid="1_3en5b830" hideCaption></KalturaVideo>
 
 </DoDont>
 <DoDont type="dont" aspectRatio="1:1" caption="Criss cross sorting appears disorganized. Avoid this motion path.">
 
-<Video title="disorganized criss crossing" vimeoId="310582851" />
+<KalturaVideo videoid="1_9obbx20i" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -88,7 +90,7 @@ to their difference in size.
 <DoDontRow>
 <DoDont type="do" colLg={12} colMd={8} caption="Comparing data table expansion and dropdown">
 
-<Video title="Semantic consistency" vimeoId="310581970" />
+<KalturaVideo videoid="1_sagqi4ai" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -102,15 +104,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.">
 
-<Video title="Spatial consistency" vimeoId="310581999" />
+<KalturaVideo videoid="1_y12c3w2u" hideCaption></KalturaVideo>
 
 </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.">
 
-<Video title="new content panel" vimeoId="310582064" />
+<KalturaVideo videoid="1_3neh7v17" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -125,12 +127,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.">
 
-<Video title="Intentional inconsistency" vimeoId="310582134" />
+<KalturaVideo videoid="1_nezauvly" hideCaption></KalturaVideo>
 
 </DoDont>
 <DoDont type="dont" aspectRatio="1:1">
 
-<Video title="incorrect intentional inconsistency" vimeoId="310582167" />
+<KalturaVideo videoid="1_q5df3gg6" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -144,15 +146,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.">
 
-<Video title="Continuity" vimeoId="310582206" />
+<KalturaVideo videoid="1_79e8hspk" hideCaption></KalturaVideo>
 
 </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.">
 
-<Video title="Continuity should not distract" vimeoId="310582279" />
+<KalturaVideo videoid="1_3bydz1mz" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -170,7 +172,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.">
 
-<Video title="Sequence and stagger" vimeoId="310582972" />
+<KalturaVideo videoid="1_6aelv7eh" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>
@@ -183,7 +185,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.">
 
-<Video title="Sequencing" vimeoId="310582919" />
+<KalturaVideo videoid="1_sx1yy7l2" hideCaption></KalturaVideo>
 
 </DoDont>
 </DoDontRow>