Add view for video-block in Seven

packages/blocks/.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": ["stylelint-config-idiomatic-order"],
+  "plugins": ["stylelint-prettier"],
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "order/properties-alphabetical-order": null
+  }
+}

packages/blocks/Video/VideoBlockBody.test.tsx

@@ -0,0 +1,128 @@
+import '@testing-library/jest-dom';
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import { VideoBlockBody, getVideoIDAndPlaceholder } from './VideoBlockBody';
+
+describe('getVideoIDAndPlaceholder', () => {
+  test('handles YouTube playlist URLs', () => {
+    const url =
+      'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1';
+    expect(getVideoIDAndPlaceholder(url)).toEqual({
+      videoID: null,
+      listID: 'PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+      thumbnailURL: 'https://img.youtube.com/vi/KwRSRRyuk-Q/sddefault.jpg',
+    });
+  });
+
+  test('extracts video from YouTube live URL', () => {
+    const url = 'https://www.youtube.com/live/ISdHvS6Ck3k?si=COeVakmC1lI6jQy3';
+    expect(getVideoIDAndPlaceholder(url)).toEqual({
+      videoID: 'ISdHvS6Ck3k?si=COeVakmC1lI6jQy3',
+      listID: null,
+      thumbnailURL: 'https://img.youtube.com/vi/ISdHvS6Ck3k/sddefault.jpg',
+    });
+  });
+
+  test('extracts video from shortened YouTube URL', () => {
+    const url = 'https://youtu.be/P9j-xYdWT28?si=zZ2putStJbPBLCdt';
+    expect(getVideoIDAndPlaceholder(url)).toEqual({
+      videoID: 'P9j-xYdWT28?si=zZ2putStJbPBLCdt',
+      listID: null,
+      thumbnailURL: 'https://img.youtube.com/vi/P9j-xYdWT28/sddefault.jpg',
+    });
+  });
+
+  test('extracts video from standard YouTube URL', () => {
+    const url = 'https://www.youtube.com/watch?v=KUd6e105u_I';
+    expect(getVideoIDAndPlaceholder(url)).toEqual({
+      videoID: 'KUd6e105u_I',
+      listID: null,
+      thumbnailURL: 'https://img.youtube.com/vi/KUd6e105u_I/sddefault.jpg',
+    });
+  });
+
+  test('extracts video details from Vimeo URL', () => {
+    const url = 'https://vimeo.com/639449679';
+    expect(getVideoIDAndPlaceholder(url)).toEqual({
+      videoID: '639449679',
+      listID: null,
+      thumbnailURL: 'https://vumbnail.com/639449679.jpg',
+    });
+  });
+});
+
+describe('VideoBlockBody rendering', () => {
+  test('renders a YouTube playlist iframe when list in URL', () => {
+    const { container } = render(
+      <VideoBlockBody
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+        }}
+      />,
+    );
+
+    const iframe = container.querySelector('iframe');
+    expect(iframe).not.toBeNull();
+    expect(iframe?.getAttribute('src')).toContain(
+      'https://www.youtube.com/embed/videoseries?list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL',
+    );
+  });
+
+  test('renders a YouTube iframe for standard video URL', () => {
+    const { container } = render(
+      <VideoBlockBody
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KUd6e105u_I',
+        }}
+      />,
+    );
+
+    const iframe = container.querySelector('iframe');
+    expect(iframe?.getAttribute('src')).toBe(
+      'https://www.youtube.com/embed/KUd6e105u_I',
+    );
+  });
+
+  test('renders Vimeo iframe when URL contains vimeo domain', () => {
+    const { container } = render(
+      <VideoBlockBody
+        data={{ '@type': 'video', url: 'https://vimeo.com/639449679' }}
+      />,
+    );
+
+    const iframe = container.querySelector('iframe');
+    expect(iframe?.getAttribute('src')).toBe(
+      'https://player.vimeo.com/video/639449679',
+    );
+  });
+
+  test('renders HTML5 video element for mp4 URL', () => {
+    const internalUrl = '/videos/example.mp4';
+    const { container } = render(
+      <VideoBlockBody data={{ '@type': 'video', url: internalUrl }} />,
+    );
+
+    const videoElement = container.querySelector('video');
+    expect(videoElement).not.toBeNull();
+    expect(videoElement?.getAttribute('src')).toBe(
+      '/videos/example.mp4/@@download/file',
+    );
+  });
+
+  test('shows warning div for unsupported URL in edit mode', () => {
+    const { getByText } = render(
+      <VideoBlockBody
+        data={{ '@type': 'video', url: 'https://www.example.com' }}
+        isEditMode
+      />,
+    );
+
+    expect(
+      getByText(
+        'Please enter a valid URL by deleting the block and adding a new video block.',
+      ),
+    ).toBeInTheDocument();
+  });
+});

packages/blocks/Video/VideoBlockBody.tsx

@@ -0,0 +1,157 @@
+import type { BlockViewProps } from '@plone/types';
+import type { ReactNode } from 'react';
+import clsx from 'clsx';
+import { flattenToAppURL, isInternalURL } from '@plone/helpers';
+
+type VideoData = NonNullable<BlockViewProps['data']>;
+
+export const getVideoIDAndPlaceholder = (url: string) => {
+  let videoID: string | null = null;
+  let listID: string | null = null;
+  let thumbnailURL: string | null = null;
+
+  if (url.includes('youtu')) {
+    if (url.includes('list')) {
+      const matches = url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
+      listID = matches?.[1] || matches?.[2] || null;
+
+      let thumbnailID: string | null = null;
+      if (url.match(/\?v=(.*)&list/)) {
+        thumbnailID = url.match(/^.*\?v=(.*)&list(.*)/)?.[1] ?? null;
+      }
+      if (url.match(/\?v=(.*)\?list/)) {
+        thumbnailID = url.match(/^.*\?v=(.*)\?list(.*)/)?.[1] ?? null;
+      }
+      if (thumbnailID) {
+        thumbnailURL = `https://img.youtube.com/vi/${thumbnailID}/sddefault.jpg`;
+      }
+    } else if (url.match('live')) {
+      videoID = url.match(/^.*\/live\/(.*)/)?.[1] ?? null;
+    } else if (url.match(/\.be\//)) {
+      videoID = url.match(/^.*\.be\/(.*)/)?.[1] ?? null;
+    } else if (url.match(/\?v=/)) {
+      videoID = url.match(/^.*\?v=([^&]*)/)?.[1] ?? null;
+    }
+
+    if (videoID) {
+      let thumbnailID = videoID;
+      if (videoID.match(/\?si=/)) {
+        thumbnailID = videoID.match(/(.*)\?si=(.*)/)?.[1] ?? thumbnailID;
+      }
+      thumbnailURL = `https://img.youtube.com/vi/${thumbnailID}/sddefault.jpg`;
+    }
+  } else if (url.includes('vimeo')) {
+    videoID = url.match(/^.*\.com\/(.*)/)?.[1] ?? null;
+    if (videoID) {
+      let thumbnailID = videoID;
+      if (videoID.match(/\?si=/)) {
+        thumbnailID = videoID.match(/(.*)\?si=(.*)/)?.[1] ?? thumbnailID;
+      }
+      thumbnailURL = `https://vumbnail.com/${thumbnailID}.jpg`;
+    }
+  }
+
+  return { videoID, listID, thumbnailURL };
+};
+
+const getVideoSrc = (url: string) => {
+  if (isInternalURL(url)) {
+    const flattened = flattenToAppURL(url);
+    return url.includes('@@download')
+      ? flattened
+      : `${flattened}/@@download/file`;
+  }
+
+  return url;
+};
+
+export const VideoBlockBody = ({
+  data,
+  isEditMode,
+}: {
+  data: VideoData;
+  isEditMode?: boolean;
+}) => {
+  if (!data.url) return null;
+
+  let placeholder: string | null =
+    typeof data.preview_image === 'string'
+      ? isInternalURL(data.preview_image)
+        ? `${flattenToAppURL(data.preview_image)}/@@images/image`
+        : data.preview_image
+      : null;
+
+  const { videoID, listID, thumbnailURL } = getVideoIDAndPlaceholder(data.url);
+  placeholder = placeholder || thumbnailURL;
+
+  const iframeProps = {
+    allow:
+      'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
+    allowFullScreen: true,
+    loading: 'lazy' as const,
+  };
+
+  let content: ReactNode = null;
+
+  if (data.url.includes('youtu')) {
+    if (data.url.includes('list') && listID) {
+      content = (
+        <iframe
+          src={`https://www.youtube.com/embed/videoseries?list=${listID}`}
+          title={data.title || 'YouTube playlist'}
+          {...iframeProps}
+        />
+      );
+    } else if (videoID) {
+      content = (
+        <iframe
+          src={`https://www.youtube.com/embed/${videoID}`}
+          title={data.title || 'YouTube video'}
+          {...iframeProps}
+        />
+      );
+    }
+  } else if (data.url.includes('vimeo') && videoID) {
+    content = (
+      <iframe
+        src={`https://player.vimeo.com/video/${videoID}`}
+        title={data.title || 'Vimeo video'}
+        {...iframeProps}
+      />
+    );
+  } else if (data.url.match(/\.mp4($|[?&#])/i)) {
+    content = (
+      // eslint-disable-next-line jsx-a11y/media-has-caption
+      <video
+        src={getVideoSrc(data.url)}
+        controls
+        poster={placeholder || undefined}
+        preload="metadata"
+      />
+    );
+  }
+
+  if (!content) {
+    if (!isEditMode) {
+      return null;
+    }
+
+    return (
+      <div className="invalid-video-format" aria-live="polite">
+        Please enter a valid URL.
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx('video-inner', {
+        'full-width': data.align === 'full',
+      })}
+    >
+      {content}
+    </div>
+  );
+};
+
+export type { VideoData };

packages/blocks/Video/VideoBlockView.css

@@ -0,0 +1,22 @@
+.video-block {
+  width: 100%;
+  margin: 0;
+}
+
+.block.video.align,
+.block.video.align .video-block,
+.block.video.align .video-inner {
+  width: 100%;
+}
+
+.video-block video,
+.video-block iframe {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.video-block iframe {
+  border: 0;
+  aspect-ratio: 16 / 9;
+}

packages/blocks/Video/VideoBlockView.test.tsx

@@ -0,0 +1,29 @@
+import '@testing-library/jest-dom';
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import VideoBlockView from './VideoBlockView';
+
+describe('VideoBlockView', () => {
+  test('renders view video component', () => {
+    const { asFragment } = render(
+      <VideoBlockView
+        data={{ '@type': 'video', url: 'https://youtu.be/KqjeO_ekW3g' }}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('renders view video component with placeholder image', () => {
+    const { asFragment } = render(
+      <VideoBlockView
+        data={{
+          '@type': 'video',
+          url: 'https://youtu.be/KqjeO_ekW3g',
+          preview_image:
+            'https://github.com/plone/volto/raw/main/logos/volto-colorful.png',
+        }}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

packages/blocks/Video/VideoBlockView.tsx

@@ -0,0 +1,29 @@
+import type { BlockViewProps } from '@plone/types';
+import clsx from 'clsx';
+import { VideoBlockBody, type VideoData } from './VideoBlockBody';
+import './VideoBlockView.css';
+
+const VideoBlockView = (props: BlockViewProps) => {
+  const { data, className, isEditMode } = props;
+
+  if (!data?.url) return null;
+
+  return (
+    <div
+      className={clsx(
+        'video align block',
+        {
+          center: !Boolean(data.align),
+        },
+        data.align,
+        className,
+      )}
+    >
+      <figure className="video-block">
+        <VideoBlockBody data={data as VideoData} isEditMode={isEditMode} />
+      </figure>
+    </div>
+  );
+};
+
+export default VideoBlockView;

packages/blocks/Video/index.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const VideoBlockInfo = {
+  id: 'video',
+  title: 'Video',
+  view: React.lazy(
+    () => import(/* webpackChunkName: "plone-blocks" */ './VideoBlockView'),
+  ),
+  category: 'media',
+};
+
+export default VideoBlockInfo;