From a524136071b9e99ad6265bd8512c9435023841f5 Mon Sep 17 00:00:00 2001
From: Alok Kumar <ialokkumarsingh0@gmail.com>
Date: Thu, 11 Jan 2024 17:36:34 +0530
Subject: [PATCH] Update the video block customization to latest volto. (#28)

---
 news/26.bugfix                                |   1 +
 .../components/manage/Blocks/Video/Body.jsx   | 175 +++++++++++++++++
 .../components/manage/Blocks/Video/View.jsx   | 183 ------------------
 3 files changed, 176 insertions(+), 183 deletions(-)
 create mode 100644 news/26.bugfix
 create mode 100644 src/customizations/components/manage/Blocks/Video/Body.jsx
 delete mode 100644 src/customizations/components/manage/Blocks/Video/View.jsx

diff --git a/news/26.bugfix b/news/26.bugfix
new file mode 100644
index 0000000..1eabbc3
--- /dev/null
+++ b/news/26.bugfix
@@ -0,0 +1 @@
+Update the video block customization to latest volto. @iFlameing
\ No newline at end of file
diff --git a/src/customizations/components/manage/Blocks/Video/Body.jsx b/src/customizations/components/manage/Blocks/Video/Body.jsx
new file mode 100644
index 0000000..785fa8a
--- /dev/null
+++ b/src/customizations/components/manage/Blocks/Video/Body.jsx
@@ -0,0 +1,175 @@
+/**
+ * OVERRIDE Body.jsx
+ * REASON: Added Ifconfirm wrapper component to youtube and vimeo video for DSGVO.
+ * FILE: https://github.com/plone/volto/blob/17.x.x/src/components/manage/Blocks/Video/Body.jsx
+ * DATE: 2024-01-05
+ * DEVELOPER: @iFlameing
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Embed, Message } from 'semantic-ui-react';
+import cx from 'classnames';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import { IfConfirm } from '../../../../../components';
+
+//Extracting videoID, listID and thumbnailURL from the video URL
+const getVideoIDAndPlaceholder = (url) => {
+  let videoID = null;
+  let listID = null;
+  let thumbnailURL = null;
+
+  if (url) {
+    if (url.match('youtu')) {
+      if (url.match('list')) {
+        const matches = url.match(/^.*\?list=(.*)|^.*&list=(.*)$/);
+        listID = matches[1] || matches[2];
+
+        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 (videoID) {
+        let thumbnailID = videoID;
+        if (videoID.match(/\?si=/)) {
+          thumbnailID = videoID.match(/(.*)\?si=(.*)/)[1];
+        }
+        //load video preview image from youtube
+        thumbnailURL =
+          'https://img.youtube.com/vi/' + thumbnailID + '/sddefault.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) => {
+    if (e.nativeEvent.keyCode === 13) {
+      ref.current.handleClick();
+    }
+  };
+
+  const embedSettings = {
+    placeholder: placeholder,
+    icon: 'play',
+    defaultActive: false,
+    autoplay: false,
+    aspectRatio: '16:9',
+    tabIndex: 0,
+    onKeyPress: onKeyDown,
+    ref: ref,
+  };
+
+  return (
+    <>
+      {data.url && (
+        <div
+          className={cx('video-inner', {
+            'full-width': data.align === 'full',
+          })}
+        >
+          {data.url.match('youtu') ? (
+            <>
+              <IfConfirm module="youtube">
+                {data.url.match('list') ? (
+                  <Embed
+                    url={`https://www.youtube.com/embed/videoseries?list=${listID}`}
+                    {...embedSettings}
+                  />
+                ) : (
+                  <Embed id={videoID} source="youtube" {...embedSettings} />
+                )}
+              </IfConfirm>
+            </>
+          ) : (
+            <>
+              {data.url.match('vimeo') ? (
+                <IfConfirm module="vimeo">
+                  <Embed id={videoID} source="vimeo" {...embedSettings} />
+                </IfConfirm>
+              ) : (
+                <>
+                  {data.url.match('.mp4') ? (
+                    // eslint-disable-next-line jsx-a11y/media-has-caption
+                    <video
+                      src={
+                        isInternalURL(data.url)
+                          ? data.url.includes('@@download')
+                            ? data.url
+                            : `${flattenToAppURL(data.url)}/@@download/file`
+                          : data.url
+                      }
+                      controls
+                      poster={placeholder}
+                      type="video/mp4"
+                    />
+                  ) : isEditMode ? (
+                    <div>
+                      <Message>
+                        <center>
+                          <FormattedMessage
+                            id="Please enter a valid URL by deleting the block and adding a new video block."
+                            defaultMessage="Please enter a valid URL by deleting the block and adding a new video block."
+                          />
+                        </center>
+                      </Message>
+                    </div>
+                  ) : (
+                    <div className="invalidVideoFormat" />
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Body.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default Body;
+export { getVideoIDAndPlaceholder };
diff --git a/src/customizations/components/manage/Blocks/Video/View.jsx b/src/customizations/components/manage/Blocks/Video/View.jsx
deleted file mode 100644
index e0bf1d4..0000000
--- a/src/customizations/components/manage/Blocks/Video/View.jsx
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * View video block.
- * @module components/manage/Blocks/Video/View
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Embed } from 'semantic-ui-react';
-import cx from 'classnames';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-
-import { IfConfirm } from '../../../../../components';
-
-/**
- * View video block class.
- * @class View
- * @extends Component
- */
-const View = ({ data }) => (
-  <>
-    {data.url.match('youtu') ? (
-      <>
-        <IfConfirm module="youtube">
-          <div
-            className={cx(
-              'block video align',
-              {
-                center: !Boolean(data.align),
-              },
-              data.align,
-            )}
-          >
-            {data.url && (
-              <div
-                className={cx('video-inner', {
-                  'full-width': data.align === 'full',
-                })}
-              >
-                {data.url.match('youtu') && (
-                  <>
-                    {data.url.match('list') ? (
-                      data.preview_image ? (
-                        <Embed
-                          url={`https://www.youtube.com/embed/videoseries?list=${
-                            data.url.match(/^.*\?list=(.*)$/)[1]
-                          }`}
-                          placeholder={
-                            isInternalURL(data.preview_image)
-                              ? `${flattenToAppURL(
-                                  data.preview_image,
-                                )}/@@images/image`
-                              : data.preview_image
-                          }
-                          defaultActive
-                          autoplay={false}
-                        />
-                      ) : (
-                        <Embed
-                          url={`https://www.youtube.com/embed/videoseries?list=${
-                            data.url.match(/^.*\?list=(.*)$/)[1]
-                          }`}
-                          icon="play"
-                          defaultActive
-                          autoplay={false}
-                        />
-                      )
-                    ) : data.preview_image ? (
-                      <Embed
-                        id={
-                          data.url.match(/.be\//)
-                            ? data.url.match(/^.*\.be\/(.*)/)[1]
-                            : data.url.match(/^.*\?v=(.*)$/)[1]
-                        }
-                        source="youtube"
-                        placeholder={
-                          isInternalURL(data.preview_image)
-                            ? `${flattenToAppURL(
-                                data.preview_image,
-                              )}/@@images/image`
-                            : data.preview_image
-                        }
-                        icon="play"
-                        autoplay={false}
-                      />
-                    ) : (
-                      <Embed
-                        id={
-                          data.url.match(/.be\//)
-                            ? data.url.match(/^.*\.be\/(.*)/)[1]
-                            : data.url.match(/^.*\?v=(.*)$/)[1]
-                        }
-                        source="youtube"
-                        icon="play"
-                        defaultActive
-                        autoplay={false}
-                      />
-                    )}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        </IfConfirm>
-      </>
-    ) : (
-      <IfConfirm module="vimeo">
-        <div
-          className={cx(
-            'block video align',
-            {
-              center: !Boolean(data.align),
-            },
-            data.align,
-          )}
-        />
-        {data.url && (
-          <>
-            {data.url.match('vimeo') ? (
-              data.preview_image ? (
-                <Embed
-                  id={data.url.match(/^.*\.com\/(.*)/)[1]}
-                  source="vimeo"
-                  placeholder={
-                    isInternalURL(data.preview_image)
-                      ? `${flattenToAppURL(data.preview_image)}/@@images/image`
-                      : data.preview_image
-                  }
-                  icon="play"
-                  autoplay={false}
-                />
-              ) : (
-                <Embed
-                  id={data.url.match(/^.*\.com\/(.*)/)[1]}
-                  source="vimeo"
-                  icon="play"
-                  defaultActive
-                  autoplay={false}
-                />
-              )
-            ) : (
-              <>
-                {data.url.match('.mp4') ? (
-                  // eslint-disable-next-line jsx-a11y/media-has-caption
-                  <video
-                    src={
-                      isInternalURL(data.url)
-                        ? `${flattenToAppURL(data.url)}/@@download/file`
-                        : data.url
-                    }
-                    controls
-                    poster={
-                      data.preview_image
-                        ? isInternalURL(data.preview_image)
-                          ? `${flattenToAppURL(
-                              data.preview_image,
-                            )}/@@images/image`
-                          : data.preview_image
-                        : ''
-                    }
-                    type="video/mp4"
-                  />
-                ) : (
-                  <div className="invalidVideoFormat" />
-                )}
-              </>
-            )}
-          </>
-        )}
-      </IfConfirm>
-    )}
-  </>
-);
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-View.propTypes = {
-  data: PropTypes.objectOf(PropTypes.any).isRequired,
-};
-
-export default View;