From 102a9140a7202f420b04a1fba7b09025ca2e379a Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Tue, 15 Oct 2024 12:55:38 -0400 Subject: [PATCH 01/12] try fix in portal --- packages/gamut/src/Markdown/index.tsx | 3 +- .../Markdown/libs/overrides/Video/index.tsx | 1 + .../src/Markdown/libs/overrides/index.tsx | 37 +++++++++++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/gamut/src/Markdown/index.tsx b/packages/gamut/src/Markdown/index.tsx index e0dac07469..60d56e8648 100644 --- a/packages/gamut/src/Markdown/index.tsx +++ b/packages/gamut/src/Markdown/index.tsx @@ -10,6 +10,7 @@ import { createCodeBlockOverride, createInputOverride, createTagOverride, + createVideoOverride, MarkdownOverrideSettings, standardOverrides, } from './libs/overrides'; @@ -117,7 +118,7 @@ export class Markdown extends PureComponent { allowedAttributes: ['style'], }), !skipDefaultOverrides.video && - createTagOverride('video', { + createVideoOverride('video', { component: MarkdownVideo, }), !skipDefaultOverrides.details && diff --git a/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx b/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx index 95ca49f80b..63a5cdf6dc 100644 --- a/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx +++ b/packages/gamut/src/Markdown/libs/overrides/Video/index.tsx @@ -20,6 +20,7 @@ export const MarkdownVideo: React.FC = (props) => { muted: props?.muted, videoTitle: props?.title, videoUrl: props?.src, + style: props?.style, width: Number(props?.width), }; diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx index 2344557697..3ecb44fb5a 100644 --- a/packages/gamut/src/Markdown/libs/overrides/index.tsx +++ b/packages/gamut/src/Markdown/libs/overrides/index.tsx @@ -114,6 +114,43 @@ export const createTagOverride = ( }, }); +// generic video tag override +export const createVideoOverride = ( + tagName: string, + Override: MarkdownOverrideSetting +) => ({ + shouldProcessNode(node: HTMLToReactNode) { + if (!Override || node?.attribs?.src) return false; + + if (Override.shouldProcessNode) { + return Override.shouldProcessNode(node); + } + + return node.name === tagName.toLowerCase(); + }, + processNode( + node: HTMLToReactNode, + children: HTMLToReactNode[], + key: React.Key + ) { + if (!Override) return null; + + const props = { + ...processAttributes(node.attribs), + children, + key, + }; + + if (Override.processNode) { + return Override.processNode(node, props); + } + + if (!Override.component) return null; + + return ; + }, +}); + // Allows override and overrides of standard fenced codeblocks export const createCodeBlockOverride = ( tagName: string, From 19bde6b6365676d9c5cc96e63e7ff58bdea20e80 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Tue, 15 Oct 2024 13:31:19 -0400 Subject: [PATCH 02/12] revert captions, but enable sourced videos --- .../src/Markdown/__tests__/Markdown.test.tsx | 6 +- packages/gamut/src/Markdown/index.tsx | 3 +- .../src/Markdown/libs/overrides/index.tsx | 55 +++++++++++++++++++ packages/gamut/src/Video/index.tsx | 13 +++++ .../Molecules/Video/Video.examples.tsx | 9 +++ .../stories/Molecules/Video/index.stories.mdx | 4 +- .../Organisms/Markdown/markdown-example.md | 5 +- 7 files changed, 88 insertions(+), 7 deletions(-) diff --git a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx index 074bf1e26d..12e7035ede 100644 --- a/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx +++ b/packages/gamut/src/Markdown/__tests__/Markdown.test.tsx @@ -121,11 +121,11 @@ describe('', () => { renderView({ text: videoMarkdown }); screen.getByTitle(mockTitle); }); - it('Renders video tags using the Video component if they have an src', () => { + + it('Renders video tags using the Video component if they have a source', () => { renderView({ text: videoSourceMarkdown }); - expect(screen.queryByTitle(mockTitle)).toBeNull(); + screen.getByTitle(mockTitle); }); - it('Renders YouTube iframes using the Video component', () => { renderView({ text: youtubeMarkdown }); screen.getByTitle(mockTitle); diff --git a/packages/gamut/src/Markdown/index.tsx b/packages/gamut/src/Markdown/index.tsx index 60d56e8648..2b229ffa67 100644 --- a/packages/gamut/src/Markdown/index.tsx +++ b/packages/gamut/src/Markdown/index.tsx @@ -7,6 +7,7 @@ import sanitizeMarkdown from 'sanitize-markdown'; import { omitProps } from '../utils/omitProps'; import { + createALTVideoOverride, createCodeBlockOverride, createInputOverride, createTagOverride, @@ -118,7 +119,7 @@ export class Markdown extends PureComponent { allowedAttributes: ['style'], }), !skipDefaultOverrides.video && - createVideoOverride('video', { + createALTVideoOverride('video', { component: MarkdownVideo, }), !skipDefaultOverrides.details && diff --git a/packages/gamut/src/Markdown/libs/overrides/index.tsx b/packages/gamut/src/Markdown/libs/overrides/index.tsx index 3ecb44fb5a..6f594d889a 100644 --- a/packages/gamut/src/Markdown/libs/overrides/index.tsx +++ b/packages/gamut/src/Markdown/libs/overrides/index.tsx @@ -151,6 +151,61 @@ export const createVideoOverride = ( }, }); +export const createALTVideoOverride = ( + tagName: string, + Override: MarkdownOverrideSetting +) => ({ + shouldProcessNode(node: HTMLToReactNode) { + if (!Override) return false; + + if (Override.shouldProcessNode) { + return Override.shouldProcessNode(node); + } + return node.name === tagName.toLowerCase(); + }, + processNode( + node: HTMLToReactNode, + children: HTMLToReactNode[], + key: React.Key + ) { + if (!Override) return null; + + const { src, ...processedAttributes } = processAttributes( + node.attribs + ) as any; + + const altVideoSrc = [] as any; + + if (children) { + children.forEach((element: any) => { + if (element.type === 'source' && element?.props?.src) { + if (element.props?.type.includes('video')) { + altVideoSrc.push({ + src: element?.props.src, + type: element?.props.type, + }); + } + } // Once we enable captions in the Video component, we can add an additional check here - GM-909 + }); + } + + const props = { + src: src || altVideoSrc, + ...processedAttributes, + children, + key, + }; + + if (Override.processNode) { + return Override.processNode(node, props); + } + + if (!Override.component) return null; + + return ; + }, +}); + // Allows override and overrides of standard fenced codeblocks export const createCodeBlockOverride = ( tagName: string, diff --git a/packages/gamut/src/Video/index.tsx b/packages/gamut/src/Video/index.tsx index 519f06c361..6e5e44bb25 100644 --- a/packages/gamut/src/Video/index.tsx +++ b/packages/gamut/src/Video/index.tsx @@ -3,6 +3,7 @@ import cx from 'classnames'; import { useState } from 'react'; import * as React from 'react'; import ReactPlayer from 'react-player'; +import { BaseReactPlayerProps } from 'react-player/base'; import { useIsMounted } from '../utils'; // eslint-disable-next-line gamut/no-css-standalone @@ -25,9 +26,17 @@ const OverlayPlayButton = ({ videoTitle }: { videoTitle?: string }) => { */ export type ReactPlayerWithWrapper = ReactPlayer & { wrapper: HTMLElement }; +type Captions = { + label: string; + kind: string; + src: string; + srcLang: string; + default: boolean; +}; export type VideoProps = { autoplay?: boolean; + captions?: Captions[]; className?: string; controls?: boolean; height?: number; @@ -43,6 +52,7 @@ export type VideoProps = { export const Video: React.FC = ({ autoplay, + captions, className, controls, height, @@ -65,6 +75,9 @@ export const Video: React.FC = ({ vimeo: { title: videoTitle, }, + file: { + tracks: captions || [], + }, }; return ( diff --git a/packages/styleguide/stories/Molecules/Video/Video.examples.tsx b/packages/styleguide/stories/Molecules/Video/Video.examples.tsx index ba4d4d5dbf..da3b40c93f 100644 --- a/packages/styleguide/stories/Molecules/Video/Video.examples.tsx +++ b/packages/styleguide/stories/Molecules/Video/Video.examples.tsx @@ -19,3 +19,12 @@ export const VimeoVideo = () => { /> ); }; + +export const VideoWithCaptions = () => { + return ( +