@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.3

package/src/components/manage/Blocks/Video/Body.jsx

@@ -5,39 +5,68 @@ import { Embed, Message } from 'semantic-ui-react';
 import cx from 'classnames';
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 
-const Body = ({ data, isEditMode }) => {
-  let placeholder = data.preview_image
-    ? isInternalURL(data.preview_image)
-      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
-      : data.preview_image
-    : null;
-
+//Extracting videoID, listID and thumbnailURL from the video URL
+const getVideoIDAndPlaceholder = (url) => {
   let videoID = null;
   let listID = null;
+  let thumbnailURL = null;
 
-  if (data.url) {
-    if (data.url.match('youtu')) {
-      if (data.url.match('list')) {
-        const matches = data.url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
+  if (url) {
+    if (url.match('youtu')) {
+      if (url.match('list')) {
+        const matches = url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
         listID = matches[1] || matches[2];
-      } else {
-        videoID = data.url.match(/.be\//)
-          ? data.url.match(/^.*\.be\/(.*)/)[1]
-          : data.url.match(/^.*\?v=(.*)$/)[1];
+
+        let thumbnailID = null;
+        if (url.match(/\?v=(.*)&list/)) {
+          thumbnailID = url.match(/^.*\?v=(.*)&list(.*)/)[1];
+        }
+        if (url.match(/\?v=(.*)\?list/)) {
+          thumbnailID = url.match(/^.*\?v=(.*)\?list(.*)/)[1];
+        }
+        thumbnailURL =
+          'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.jpg';
+      } else if (url.match('live')) {
+        videoID = url.match(/^.*\/live\/(.*)/)[1];
+      } else if (url.match(/\.be\//)) {
+        videoID = url.match(/^.*\.be\/(.*)/)[1];
+      } else if (url.match(/\?v=/)) {
+        videoID = url.match(/^.*\?v=(.*)$/)[1];
       }
 
-      if (!placeholder) {
+      if (videoID) {
+        let thumbnailID = videoID;
+        if (videoID.match(/\?si=/)) {
+          thumbnailID = videoID.match(/(.*)\?si=(.*)/)[1];
+        }
         //load video preview image from youtube
-        placeholder =
-          'https://img.youtube.com/vi/' + videoID + '/sddefault.jpg';
+        thumbnailURL =
+          'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.jpg';
       }
-    } else if (data.url.match('vimeo')) {
-      videoID = data.url.match(/^.*\.com\/(.*)/)[1];
-      if (!placeholder) {
-        placeholder = 'https://vumbnail.com/' + videoID + '.jpg';
+    } else if (url.match('vimeo')) {
+      videoID = url.match(/^.*\.com\/(.*)/)[1];
+      if (videoID) {
+        let thumbnailID = videoID;
+        if (videoID.match(/\?si=/)) {
+          thumbnailID = videoID.match(/(.*)\?si=(.*)/)[1];
+        }
+        thumbnailURL = 'https://vumbnail.com/' + thumbnailID + '.jpg';
       }
     }
   }
+  return { videoID, listID, thumbnailURL };
+};
+
+const Body = ({ data, isEditMode }) => {
+  let placeholder = data.preview_image
+    ? isInternalURL(data.preview_image)
+      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
+      : data.preview_image
+    : null;
+
+  const { videoID, listID, thumbnailURL } = getVideoIDAndPlaceholder(data.url);
+
+  placeholder = !placeholder ? thumbnailURL : placeholder;
 
   const ref = React.createRef();
   const onKeyDown = (e) => {
@@ -130,3 +159,4 @@ Body.propTypes = {
 };
 
 export default Body;
+export { getVideoIDAndPlaceholder };

package/src/components/manage/Blocks/Video/Body.test.jsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import Body from './Body';
+import { getVideoIDAndPlaceholder } from './Body';
+import config from '@plone/volto/registry';
+
+config.blocks.blocksConfig = {
+  video: {
+    id: 'video',
+    title: 'Video',
+    group: 'media',
+    extensions: {},
+    variations: [],
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  },
+};
+
+const mockStore = configureStore();
+
+test('renders a youtube video component with "list" in its url', () => {
+  const url =
+    'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: null,
+    listID: 'PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+    thumbnailURL: 'https://img.youtube.com/vi/KwRSRRyuk-Q/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with "/live/" in its url', () => {
+  const url = 'https://www.youtube.com/live/ISdHvS6Ck3k?si=COeVakmC1lI6jQy3';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'ISdHvS6Ck3k?si=COeVakmC1lI6jQy3',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/ISdHvS6Ck3k/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with ".be/" in its url', () => {
+  const url = 'https://youtu.be/P9j-xYdWT28?si=zZ2putStJbPBLCdt';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'P9j-xYdWT28?si=zZ2putStJbPBLCdt',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/P9j-xYdWT28/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a youtube video with "?v=" in its url', () => {
+  const url = 'https://www.youtube.com/watch?v=KUd6e105u_I';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: 'KUd6e105u_I',
+    listID: null,
+    thumbnailURL: 'https://img.youtube.com/vi/KUd6e105u_I/sddefault.jpg',
+  });
+});
+
+test('extracts video details from a vimeo video url', () => {
+  const url = 'https://vimeo.com/639449679';
+  const videoDetails = getVideoIDAndPlaceholder(url);
+  expect(videoDetails).toEqual({
+    videoID: '639449679',
+    listID: null,
+    thumbnailURL: 'https://vumbnail.com/639449679.jpg',
+  });
+});
+
+test('renders a youtube video body component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a youtube video body component in edit mode', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.youtube.com/watch?v=KwRSRRyuk-Q&list=PLGN9BI-OAQkQmEqf6O8jeyoFY1b2hD1uL&index=1',
+        }}
+        isEditMode={true}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders invalid video body component with invalid URL', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.google.com',
+        }}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders a error message for invalid video URL in edit mode', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <Body
+        data={{
+          '@type': 'video',
+          url: 'https://www.google.com',
+        }}
+        isEditMode={true}
+      />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -19,13 +19,30 @@ const messages = defineMessages({
     id: 'Breadcrumbs',
     defaultMessage: 'Breadcrumbs',
   },
+  controlpanel: {
+    id: 'Site Setup',
+    defaultMessage: 'Site Setup',
+  },
 });
 
 const BreadcrumbsComponent = ({ pathname }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
+  const { pathname: realPath } = useLocation();
+  const controlpanelItems = [
+    {
+      url: '/controlpanel',
+      title: intl.formatMessage(messages.controlpanel),
+    },
+  ];
 
-  const items = useSelector((state) => state.breadcrumbs.items, shallowEqual);
+  const items = useSelector(
+    (state) =>
+      realPath.startsWith('/controlpanel')
+        ? controlpanelItems
+        : state.breadcrumbs.items,
+    shallowEqual,
+  );
   const root = useSelector((state) => state.breadcrumbs.root);
 
   useEffect(() => {

package/src/components/theme/ContentMetadataTags/ContentMetadataTags.jsx

@@ -1,5 +1,13 @@
-import { toPublicURL, Helmet } from '@plone/volto/helpers';
+import React, { useEffect } from 'react';
+import {
+  toPublicURL,
+  Helmet,
+  hasApiExpander,
+  getBaseUrl,
+} from '@plone/volto/helpers';
+import { getNavroot } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
+import { useDispatch, useSelector } from 'react-redux';
 
 const ContentMetadataTags = (props) => {
   const {
@@ -13,23 +21,21 @@ const ContentMetadataTags = (props) => {
     description,
   } = props.content;
 
+  const dispatch = useDispatch();
+  const pathname = useSelector((state) => state.router.location.pathname);
+  const navroot = useSelector((state) => state.navroot?.data?.navroot);
+  const site = useSelector((state) => state.site?.data);
+
+  useEffect(() => {
+    if (pathname && !hasApiExpander('navroot', getBaseUrl(pathname))) {
+      dispatch(getNavroot(getBaseUrl(pathname)));
+    }
+  }, [dispatch, pathname]);
+
   const getContentImageInfo = () => {
     const { contentMetadataTagsImageField } = config.settings;
-    const image_field = props.content[contentMetadataTagsImageField];
-    const preview_image = props.content.preview_image;
-    const preview_image_link = props.content.preview_image_link;
+    const image = props.content[contentMetadataTagsImageField];
     const { opengraph_image } = props.content;
-    let image = undefined;
-
-    if (opengraph_image !== undefined && opengraph_image) {
-      image = opengraph_image;
-    } else if (preview_image_link !== undefined && preview_image_link) {
-      image = preview_image_link[contentMetadataTagsImageField];
-    } else if (preview_image !== undefined && preview_image) {
-      image = preview_image;
-    } else if (image_field !== undefined && image_field) {
-      image = image_field;
-    }
 
     const contentImageInfo = {
       contentHasImage: false,
@@ -37,7 +43,10 @@ const ContentMetadataTags = (props) => {
       height: null,
       width: null,
     };
-    contentImageInfo.contentHasImage = image?.scales?.large?.download || false;
+    contentImageInfo.contentHasImage =
+      opengraph_image?.scales?.large?.download ||
+      image?.scales?.large?.download ||
+      false;
 
     if (contentImageInfo.contentHasImage && opengraph_image?.scales?.large) {
       contentImageInfo.url = opengraph_image.scales.large.download;
@@ -54,16 +63,35 @@ const ContentMetadataTags = (props) => {
 
   const contentImageInfo = getContentImageInfo();
 
+  const getTitle = () => {
+    const includeSiteTitle =
+      config?.settings?.siteTitleFormat?.includeSiteTitle || false;
+    const titleAndSiteTitleSeparator =
+      config?.settings?.titleAndSiteTitleSeparator || '-';
+    const navRootTitle = navroot?.title;
+    const siteRootTitle = site?.['plone.site_title'];
+    const titlePart = navRootTitle || siteRootTitle;
+
+    if (includeSiteTitle && titlePart && titlePart !== title) {
+      return seo_title || `${title} ${titleAndSiteTitleSeparator} ${titlePart}`;
+    } else {
+      return seo_title || title;
+    }
+  };
+
   return (
     <>
       <Helmet>
-        <title>{(seo_title || title)?.replace(/\u00AD/g, '')}</title>
+        <title>{getTitle()?.replace(/\u00AD/g, '')}</title>
+        <link
+          rel="canonical"
+          href={seo_canonical_url || toPublicURL(props.content['@id'])}
+        />
         <meta name="description" content={seo_description || description} />
         <meta
           property="og:title"
           content={opengraph_title || seo_title || title}
         />
-        <meta property="og:type" content={'website'} />
         <meta
           property="og:url"
           content={seo_canonical_url || toPublicURL(props.content['@id'])}
@@ -75,12 +103,6 @@ const ContentMetadataTags = (props) => {
             content={toPublicURL(contentImageInfo.url)}
           />
         )}
-        {contentImageInfo.contentHasImage && (
-          <meta
-            property="twitter:image"
-            content={toPublicURL(contentImageInfo.url)}
-          />
-        )}
         {contentImageInfo.contentHasImage && (
           <meta property="og:image:width" content={contentImageInfo.width} />
         )}
@@ -94,21 +116,6 @@ const ContentMetadataTags = (props) => {
           />
         )}
         <meta name="twitter:card" content="summary_large_image" />
-        <meta
-          property="twitter:url"
-          content={seo_canonical_url || toPublicURL(props.content['@id'])}
-        />
-        {/* TODO: Improve SEO backend metadata providers by adding the twitter handler */}
-        {/* <meta property="twitter:site" content={'@my_twitter_handler'} /> */}
-        <meta
-          property="twitter:title"
-          content={opengraph_title || seo_title || title}
-        />
-        <meta
-          property="twitter:description"
-          content={seo_description || description}
-        />
-        <meta property="twitter:domain" content={config.settings.publicURL} />
       </Helmet>
     </>
   );

package/types/components/manage/Blocks/Video/Body.d.ts

@@ -8,3 +8,8 @@ declare namespace Body {
         let data: any;
     }
 }
+export function getVideoIDAndPlaceholder(url: any): {
+    videoID: any;
+    listID: any;
+    thumbnailURL: string;
+};

package/types/components/manage/Blocks/Video/Body.test.d.ts

@@ -0,0 +1 @@
+export {};