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

* feat(kaltura): adding kaltura video player to gatsby * feat(kaltura): adding kaltura video player to gatsby * feat: update remaining 3 videos --------- Co-authored-by: Alison Joseph <[email protected]>
carbon-design-system · Sep 26, 2024 · 652640d · 652640d
1 parent 0eb584e
commit 652640d
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 46 deletions.
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -52,6 +52,10 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
       key="fathom"
       defer
     />,
+    <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/case-studies/ibm-commerce-platform.mdx b/src/pages/case-studies/ibm-commerce-platform.mdx
@@ -5,6 +5,8 @@ description:
   of the new self-service purchase experience on IBM.com.
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <PageDescription>
 
 Learn about how the IBM.com team adopted Carbon for the design and development
@@ -192,7 +194,8 @@ passes, users may not have even noticed that the experience had changed and
 returning users did not have to relearn the interface. Also, mixing the
 experiences meant that got the team to their final result faster.
 
-<Video vimeoId="488148768" />
+<KalturaVideo videoid="1_0hebnbgr"></KalturaVideo>
+
 <Caption>New modal sitting on the original page</Caption>
 
 ### Iterating, iterating, iterating

diff --git a/src/pages/designing/tutorials.mdx b/src/pages/designing/tutorials.mdx
@@ -7,6 +7,7 @@ description:
 
 import { Button } from 'carbon-components-react';
 import { ArrowRight16 } from '@carbon/icons-react';
+import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -29,7 +30,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>
 
 For further learning, check out
 [All about Carbon](/all-about-carbon/what-is-carbon),
@@ -42,7 +43,7 @@ This video covers how to design with components and type styles, and where to
 find relevant guidance and resources while designing. It also goes through the
 steps of getting set up with the Carbon Sketch kits and grid template.
 
-<Video title="Designing with Carbon" vimeoId="457803206" />
+<KalturaVideo videoid="1_64lcccoz"></KalturaVideo>
 
 To learn more about our Sketch kits, head over to
 [Design kits](/designing/kits/sketch).
@@ -53,7 +54,7 @@ Learn about the fundamentals of using our 2x Grid. This video gives an overview
 of basic grid terminology, breakpoints, the three grid modes, and some resources
 to get started designing with the 2x Grid.
 
-<Video title="Using the 2x grid" vimeoId="457802917" />
+<KalturaVideo videoid="1_ymqlr2xg"></KalturaVideo>
 
 You can find detailed grid guidance on the
 [2x Grid](/guidelines/2x-grid/overview) page.
diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Overview', 'Implementation']
 ---
 
+import KalturaVideo from 'components/KalturaVideo';
+
 <PageDescription>
 
 The IBM 2x Grid system is a fully responsive, robust, 16 column layout system
@@ -946,7 +948,7 @@ 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="Usage" vimeoId="363369752" />
+<KalturaVideo videoid="1_uto06vm9"></KalturaVideo>
 
 ## Alignments
 

diff --git a/src/pages/guidelines/2x-grid/overview.mdx b/src/pages/guidelines/2x-grid/overview.mdx
@@ -6,6 +6,8 @@ description:
 tabs: ['Overview', 'Implementation']
 ---
 
+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>
 
 ## Resources
 
@@ -79,7 +81,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
 
@@ -194,7 +196,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
 
@@ -229,15 +231,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
@@ -255,7 +257,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:
 
@@ -321,7 +323,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 />
@@ -331,7 +333,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 />
@@ -342,7 +344,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
 
@@ -397,7 +399,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
 
@@ -425,7 +427,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
@@ -451,4 +453,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/guidelines/color/overview.mdx b/src/pages/guidelines/color/overview.mdx
@@ -8,6 +8,7 @@ tabs: ['Overview', 'Usage', 'Code']
 
 import ColorBlock from 'components/ColorBlock';
 import ColorGrid from 'components/ColorGrid';
+import KalturaVideo from 'components/KalturaVideo';
 
 <PageDescription>
 
@@ -28,7 +29,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/guidelines/motion/choreography.mdx b/src/pages/guidelines/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 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 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 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 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 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 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 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 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 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 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>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import KalturaVideo from './KalturaVideo';

		export default KalturaVideo;