feat: added option to display caption in VideoGallery block (#747)

* fix: sidebar changed to add the video caption * fix: added caption for videos * fix: added class figure-caption to the video caption * chore: release log * chore: release.md * fix: removed unnecessary code * fix: removed more unnecessary code * fix: removed unnecessary code Co-authored-by: Giulia Ghisini <[email protected]> --------- Co-authored-by: Giulia Ghisini <[email protected]>
RedTurtle · Sep 4, 2024 · b2ceb27 · b2ceb27
1 parent bcaa25f
commit b2ceb27
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 52 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -30,11 +30,14 @@
 - ...
 -->
 
-## Versione 7.30.5 (02/09/2024)
+## Versione 7.30.5 (27/08/2024)
 
 ### Migliorie
 
+- Aggiunta una opzione scegliere se mostrare la didascalia nel blocco Video Gallery
 - Aggiunto la data di modifica nei documenti allegati del CT Bando
+odifica nei documenti allegati del CT Bando
+
 
 ## Versione 7.30.4 (26/08/2024)
 

diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -2051,15 +2051,10 @@ msgid "gallery_close_preview"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Titolo del video
+# defaultMessage: Didascalia del video
 msgid "gallery_video_title"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery.
-msgid "gallery_video_title_description"
-msgstr ""
-
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Video URL
 msgid "gallery_video_url"
@@ -3277,6 +3272,11 @@ msgstr ""
 msgid "share"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
+# defaultMessage: Mostra didascalie
+msgid "showVideoCaption"
+msgstr ""
+
 #: config/Blocks/ListingOptions/bandiInEvidenceTemplate
 # defaultMessage: Mostra la data di ultima modifica
 msgid "show_data_ultima_modifica"

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -2036,15 +2036,10 @@ msgid "gallery_close_preview"
 msgstr "Close preview"
 
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Titolo del video
+# defaultMessage: Didascalia del video
 msgid "gallery_video_title"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery.
-msgid "gallery_video_title_description"
-msgstr ""
-
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Video URL
 msgid "gallery_video_url"
@@ -3262,6 +3257,11 @@ msgstr "Arrange on 4 columns"
 msgid "share"
 msgstr "Share"
 
+#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
+# defaultMessage: Mostra didascalie
+msgid "showVideoCaption"
+msgstr ""
+
 #: config/Blocks/ListingOptions/bandiInEvidenceTemplate
 # defaultMessage: Mostra la data di ultima modifica
 msgid "show_data_ultima_modifica"

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -2045,15 +2045,10 @@ msgid "gallery_close_preview"
 msgstr "Cerrar vista previa"
 
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Titolo del video
+# defaultMessage: Didascalia del video
 msgid "gallery_video_title"
 msgstr "Título del vídeo"
 
-#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery.
-msgid "gallery_video_title_description"
-msgstr "No se muestra. El editor lo utiliza para identificar mejor el vídeo dentro de la galería."
-
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Video URL
 msgid "gallery_video_url"
@@ -3271,6 +3266,11 @@ msgstr "Organizar en 4 columnas"
 msgid "share"
 msgstr "Compartir"
 
+#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
+# defaultMessage: Mostra didascalie
+msgid "showVideoCaption"
+msgstr ""
+
 #: config/Blocks/ListingOptions/bandiInEvidenceTemplate
 # defaultMessage: Mostra la data di ultima modifica
 msgid "show_data_ultima_modifica"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -2053,15 +2053,10 @@ msgid "gallery_close_preview"
 msgstr "Fermer l'aperçu de l'image"
 
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Titolo del video
+# defaultMessage: Didascalia del video
 msgid "gallery_video_title"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery.
-msgid "gallery_video_title_description"
-msgstr ""
-
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Video URL
 msgid "gallery_video_url"
@@ -3279,6 +3274,11 @@ msgstr "Disposer sur 4 colonnes"
 msgid "share"
 msgstr "Partager"
 
+#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
+# defaultMessage: Mostra didascalie
+msgid "showVideoCaption"
+msgstr ""
+
 #: config/Blocks/ListingOptions/bandiInEvidenceTemplate
 # defaultMessage: Mostra la data di ultima modifica
 msgid "show_data_ultima_modifica"

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -2036,14 +2036,9 @@ msgid "gallery_close_preview"
 msgstr "Chiudi l'anteprima"
 
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Titolo del video
+# defaultMessage: Didascalia del video
 msgid "gallery_video_title"
-msgstr "Titolo del video"
-
-#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery.
-msgid "gallery_video_title_description"
-msgstr "Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery."
+msgstr "Didascalia del video"
 
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Video URL
@@ -3262,6 +3257,11 @@ msgstr "Disponi su 4 colonne"
 msgid "share"
 msgstr "Condividi"
 
+#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
+# defaultMessage: Mostra didascalie
+msgid "showVideoCaption"
+msgstr ""
+
 #: config/Blocks/ListingOptions/bandiInEvidenceTemplate
 # defaultMessage: Mostra la data di ultima modifica
 msgid "show_data_ultima_modifica"

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,6 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
+
 "POT-Creation-Date: 2024-08-28T08:55:19.173Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
@@ -2038,15 +2039,10 @@ msgid "gallery_close_preview"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Titolo del video
+# defaultMessage: Didascalia del video
 msgid "gallery_video_title"
 msgstr ""
 
-#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
-# defaultMessage: Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery.
-msgid "gallery_video_title_description"
-msgstr ""
-
 #: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
 # defaultMessage: Video URL
 msgid "gallery_video_url"
@@ -3264,6 +3260,11 @@ msgstr ""
 msgid "share"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/VideoGallery/Sidebar
+# defaultMessage: Mostra didascalie
+msgid "showVideoCaption"
+msgstr ""
+
 #: config/Blocks/ListingOptions/bandiInEvidenceTemplate
 # defaultMessage: Mostra la data di ultima modifica
 msgid "show_data_ultima_modifica"

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)
@@ -134,10 +139,13 @@ const ViewBlock = ({ data, index, isEditMode = false }) => {
                     type="video/mp4"
                   />
                 ) : data.allowExternals ? (
-                  <Embed url={data.url} {...embedSettings} />
+                    <Embed url={data.url} {...embedSettings} />                    
                 ) : (
                   <div className="invalidVideoFormat" />
                 )}
+                {showVideoCaption && (
+                  <p className="px-3 mt-2 figure-caption">{data.title}</p>
+                )}
               </>
             )}
           </>

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/Sidebar.jsx b/src/components/ItaliaTheme/Blocks/VideoGallery/Sidebar.jsx
@@ -23,17 +23,16 @@ const messages = defineMessages({
   video_url: { id: 'gallery_video_url', defaultMessage: 'Video URL' },
   video_title: {
     id: 'gallery_video_title',
-    defaultMessage: 'Titolo del video',
-  },
-  video_title_description: {
-    id: 'gallery_video_title_description',
-    defaultMessage:
-      "Non viene mostrato. Serve al redattore per identificare meglio il video all'interno della gallery.",
+    defaultMessage: 'Didascalia del video',
   },
   allowExternals: {
     id: 'Allow Externals',
     defaultMessage: 'Allow Externals',
   },
+  showVideoCaption: {
+    id: 'showVideoCaption',
+    defaultMessage: 'Mostra didascalie',
+  },
 });
 
 const Sidebar = ({
@@ -103,6 +102,17 @@ const Sidebar = ({
               });
             }}
           />
+          <CheckboxWidget
+            id="showVideoCaption"
+            title={intl.formatMessage(messages.showVideoCaption)}
+            value={data.showVideoCaption ? data.showVideoCaption : false}
+            onChange={(name, value) => {
+              onChangeBlock(block, {
+                ...data,
+                showVideoCaption: value,
+              });
+            }}
+          />
         </Segment>
         <Accordion fluid styled className="form">
           {data.subblocks &&
@@ -139,9 +149,6 @@ const Sidebar = ({
                     <TextWidget
                       id="title"
                       title={intl.formatMessage(messages.video_title)}
-                      description={intl.formatMessage(
-                        messages.video_title_description,
-                      )}
                       value={subblock.title}
                       onChange={(name, value) => {
                         onChangeSubBlock(index, {

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>