fix: added caption for videos

RedTurtle · Aug 23, 2024 · 3d9c140 · 3d9c140
1 parent a304bb4
commit 3d9c140
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 39 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Block/EditBlock.jsx
@@ -32,10 +32,13 @@ class EditBlock extends SubblockEdit {
     if (__SERVER__) {
       return <div />;
     }
-
     return (
       <Subblock subblock={this} className="subblock-edit">
-        <ViewBlock data={this.props.data} isEditMode={true} />
+        <ViewBlock
+          data={this.props.data}
+          showVideoCaption={this.props.showVideoCaption}
+          isEditMode={true}
+        />
         {(!this.props.data?.url || this.props.data?.url.length === 0) && (
           <div>{this.props.intl.formatMessage(messages.noVideoUrl)}</div>
         )}

diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Block/ViewBlock.jsx
@@ -32,7 +32,12 @@ const messages = defineMessages({
  * @class ViewBlock
  * @extends Component
  */
-const ViewBlock = ({ data, index, isEditMode = false }) => {
+const ViewBlock = ({
+  data,
+  showVideoCaption = false,
+  index,
+  isEditMode = false,
+}) => {
   const intl = useIntl();
   let placeholder = data.preview_image
     ? isInternalURL(data.preview_image)
@@ -89,52 +94,67 @@ const ViewBlock = ({ data, index, isEditMode = false }) => {
         {data.url.match('youtu') ? (
           <>
             {data.url.match('list') ? (
-              <Embed
-                url={`https://www.youtube.com/embed/videoseries?list=${
-                  data.url.match(/^.*\?list=(.*)$/)[1]
-                }`}
-                {...embedSettings}
-              />
+              <>
+                <Embed
+                  url={`https://www.youtube.com/embed/videoseries?list=${
+                    data.url.match(/^.*\?list=(.*)$/)[1]
+                  }`}
+                  {...embedSettings}
+                />
+                {showVideoCaption && <p className="px-3">{data.title}</p>}
+              </>
             ) : (
-              <Embed
-                id={
-                  data.url.match(/.be\//)
-                    ? data.url.match(/^.*\.be\/(.*)/)?.[1]
-                    : data.url.match(/^.*\?v=(.*)$/)?.[1]
-                }
-                source="youtube"
-                {...embedSettings}
-              />
+              <>
+                <Embed
+                  id={
+                    data.url.match(/.be\//)
+                      ? data.url.match(/^.*\.be\/(.*)/)?.[1]
+                      : data.url.match(/^.*\?v=(.*)$/)?.[1]
+                  }
+                  source="youtube"
+                  {...embedSettings}
+                />
+                {showVideoCaption && <p className="px-3">{data.title}</p>}
+              </>
             )}
           </>
         ) : (
           <>
             {data.url.match('vimeo') ? (
-              <Embed
-                id={data.url.match(/^.*\.com\/(.*)/)[1]}
-                source="vimeo"
-                {...embedSettings}
-              />
+              <>
+                <Embed
+                  id={data.url.match(/^.*\.com\/(.*)/)[1]}
+                  source="vimeo"
+                  {...embedSettings}
+                />
+                {showVideoCaption && <p className="px-3">{data.title}</p>}
+              </>
             ) : (
               <>
                 {data.url.match('.mp4') ? (
                   // eslint-disable-next-line jsx-a11y/media-has-caption
-                  <video
-                    src={
-                      isInternalURL(
-                        data.url.replace(
-                          getParentUrl(config.settings.apiPath),
-                          '',
-                        ),
-                      )
-                        ? `${data.url}/@@download/file`
-                        : data.url
-                    }
-                    controls
-                    type="video/mp4"
-                  />
+                  <>
+                    <video
+                      src={
+                        isInternalURL(
+                          data.url.replace(
+                            getParentUrl(config.settings.apiPath),
+                            '',
+                          ),
+                        )
+                          ? `${data.url}/@@download/file`
+                          : data.url
+                      }
+                      controls
+                      type="video/mp4"
+                    />
+                    {showVideoCaption && <p className="px-3">{data.title}</p>}
+                  </>
                 ) : data.allowExternals ? (
-                  <Embed url={data.url} {...embedSettings} />
+                  <>
+                    <Embed url={data.url} {...embedSettings} />
+                    {showVideoCaption && <p className="px-3">{data.title}</p>}
+                  </>
                 ) : (
                   <div className="invalidVideoFormat" />
                 )}

diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Edit.jsx
@@ -51,6 +51,7 @@ class Edit extends SubblocksEdit {
             {this.state.subblocks.map((subblock, subindex) => (
               <div className="it-single-slide-wrapper" key={subblock.id}>
                 <EditBlock
+                  showVideoCaption={this.props.data.showVideoCaption}
                   data={subblock}
                   index={subindex}
                   selected={this.isSubblockSelected(subindex)}

diff --git a/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/View.jsx
@@ -19,7 +19,10 @@ const View = ({ data, block }) => {
       <Body data={data} nItems={data.subblocks?.length}>
         {data.subblocks.map((subblock, subindex) => (
           <div className="it-single-slide-wrapper" key={subindex}>
-            <ViewBlock data={subblock} />
+            <ViewBlock
+              data={subblock}
+              showVideoCaption={data.showVideoCaption}
+            />
           </div>
         ))}
       </Body>