chore: fix hidration failing video block

RedTurtle · Nov 28, 2024 · 588ee09 · 588ee09
1 parent 3242721
commit 588ee09
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -103,7 +103,7 @@
     "volto-feedback-italia": "1.0.4",
     "volto-form-block": "3.10.0",
     "volto-form-block-italia": "1.0.3",
-    "volto-gdpr-privacy": "2.2.8",
+    "volto-gdpr-privacy": "2.2.10",
     "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.1.1",

diff --git a/src/customizations/volto/components/manage/Blocks/Video/Body.jsx b/src/customizations/volto/components/manage/Blocks/Video/Body.jsx
@@ -9,7 +9,7 @@
  * - overhauled url checking, it would break on correct links and allow incorrect ones
  */
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Embed, Message } from 'semantic-ui-react';
@@ -26,6 +26,10 @@ import config from '@plone/volto/registry';
  * @extends Component
  */
 const Body = ({ data, isEditMode }) => {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
   const allowsExternals =
     data.allowExternals !== undefined
       ? !!data.allowExternals
@@ -34,7 +38,6 @@ const Body = ({ data, isEditMode }) => {
   let placeholder = null;
   let videoID = null;
   let listID = null;
-
   if (data.url) {
     const [computedID, computedPlaceholder] = videoUrlHelper(
       data.url,
@@ -74,19 +77,25 @@ const Body = ({ data, isEditMode }) => {
     ref: ref,
   };
 
-  return (
+  let apiPath = config.settings.apiPath;
+  if (!apiPath.endsWith('/')) {
+    apiPath += '/';
+  }
+
+  return isClient ? (
     <>
       {data.url && (
         <div
           className={cx('video-inner', {
             'full-width': data.align === 'full',
           })}
         >
-          <ConditionalEmbed url={data.url}>
+          <ConditionalEmbed url={data.url} suppressHydrationWarning>
             {data.url.match('youtu') ? (
               <>
                 {data.url.match('list') ? (
                   <Embed
+                    suppressHydrationWarning
                     url={`https://www.youtube.com/embed/videoseries?list=${listID}`}
                     {...embedSettings}
                   />
@@ -105,10 +114,7 @@ const Body = ({ data, isEditMode }) => {
                       <video
                         src={
                           isInternalURL(
-                            data.url.replace(
-                              getParentUrl(config.settings.apiPath),
-                              '',
-                            ),
+                            data.url.replace(getParentUrl(apiPath), ''),
                           )
                             ? `${data.url}${
                                 data.url.indexOf('@@download/file') < 0
@@ -151,7 +157,7 @@ const Body = ({ data, isEditMode }) => {
         </div>
       )}
     </>
-  );
+  ) : null;
 };
 
 /**

diff --git a/yarn.lock b/yarn.lock
@@ -8794,7 +8794,7 @@ __metadata:
     volto-feedback-italia: 1.0.4
     volto-form-block: 3.10.0
     volto-form-block-italia: 1.0.3
-    volto-gdpr-privacy: 2.2.8
+    volto-gdpr-privacy: 2.2.10
     volto-querywidget-with-browser: 0.4.2
     volto-rss-block: 3.0.0
     volto-secondarymenu: 4.1.1
@@ -13731,15 +13731,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-gdpr-privacy@npm:2.2.8":
-  version: 2.2.8
-  resolution: "volto-gdpr-privacy@npm:2.2.8"
+"volto-gdpr-privacy@npm:2.2.10":
+  version: 2.2.10
+  resolution: "volto-gdpr-privacy@npm:2.2.10"
   dependencies:
     react-focus-lock: 2.9.4
     volto-multilingual-widget: 3.2.1
   peerDependencies:
     "@plone/volto": ">=16.0.0-alpha.38"
-  checksum: c46d8b35aeb1780d933cb0a629459e9f2d502af6b910a70939ba960f40ebda985a3932aa6b7466edbd974b7681533b7f96b72d97736f92b0cf8077117d955365
+  checksum: d255e9cc8de6919d49e092c62e2b4b56139ce1eb3bfa07871c24fbfa08297f149e9ad8ce3be18c57fea437c5d850068103835c58eb8e5362bca3b9231f287c26
   languageName: node
   linkType: hard