Make sound disclaimer texts configurable

REDMINE-20897
codevise · Jan 22, 2025 · 25bd216 · 25bd216
1 parent f8c02da
commit 25bd216
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/entry_types/scrolled/package/src/contentElements/soundDisclaimer/SoundDisclaimer.js b/entry_types/scrolled/package/src/contentElements/soundDisclaimer/SoundDisclaimer.js
@@ -7,7 +7,7 @@ import styles from './SoundDisclaimer.module.css';
 import MutedIcon from './muted.svg';
 import UnmutedIcon from './unmuted.svg';
 
-export function SoundDisclaimer() {
+export function SoundDisclaimer({configuration}) {
   const {isEditable, isSelected} = useContentElementEditorState();
   const {t} = useI18n();
   const muted = useMediaMuted();
@@ -18,11 +18,17 @@ export function SoundDisclaimer() {
       <button className={classNames(styles.unmute, {[styles.active]: muted})}
               onClick={() => media.mute(false)}>
         <MutedIcon />
-        <p dangerouslySetInnerHTML={{__html: t('pageflow_scrolled.public.sound_disclaimer.help_muted')}} />
+        <p>
+          {configuration.mutedText ||
+           t('pageflow_scrolled.public.sound_disclaimer.help_muted')}
+        </p>
       </button>
       <div className={classNames(styles.unmuted, {[styles.active]: !muted})}>
         <UnmutedIcon />
-        <p dangerouslySetInnerHTML={{__html: t('pageflow_scrolled.public.sound_disclaimer.help_unmuted')}} />
+        <p>
+          {configuration.unmutedText ||
+           t('pageflow_scrolled.public.sound_disclaimer.help_unmuted')}
+        </p>
       </div>
     </div>
   );

diff --git a/entry_types/scrolled/package/src/contentElements/soundDisclaimer/editor.js b/entry_types/scrolled/package/src/contentElements/soundDisclaimer/editor.js
@@ -1,4 +1,7 @@
-import {editor, NoOptionsHintView} from 'pageflow-scrolled/editor';
+import I18n from 'i18n-js';
+
+import {editor} from 'pageflow-scrolled/editor';
+import {TextInputView} from 'pageflow/ui';
 
 import pictogram from './pictogram.svg';
 
@@ -7,9 +10,19 @@ editor.contentElementTypes.register('soundDisclaimer', {
   category: 'media',
   supportedPositions: ['inline'],
 
-  configurationEditor() {
+  configurationEditor({entry}) {
     this.tab('general', function() {
-      this.view(NoOptionsHintView);
+      this.input('mutedText', TextInputView, {
+        placeholder: I18n.t('pageflow_scrolled.public.sound_disclaimer.help_muted', {
+          locale: entry.metadata.get('locale')
+        })
+      });
+
+      this.input('unmutedText', TextInputView, {
+        placeholder: I18n.t('pageflow_scrolled.public.sound_disclaimer.help_unmuted', {
+          locale: entry.metadata.get('locale')
+        })
+      });
     });
   }
 });
diff --git a/entry_types/scrolled/package/src/contentElements/soundDisclaimer/stories.js b/entry_types/scrolled/package/src/contentElements/soundDisclaimer/stories.js
@@ -3,5 +3,14 @@ import {storiesOfContentElement} from 'pageflow-scrolled/spec/support/stories';
 
 storiesOfContentElement(module, {
   typeName: 'soundDisclaimer',
-  baseConfiguration: {}
+  baseConfiguration: {},
+  variants: [
+    {
+      name: 'With custom texts',
+      configuration: {
+        mutedText: 'Unmute now for the best experience.',
+        unmutedText: 'Unmuted! Have fun!',
+      }
+    }
+  ]
 });