Fix Story Duration Default (#12645)

* Fix revert and manual setting after reload * Duration helper text, remove isFloat * Fix for singular/plural seconds
GoogleForCreators · Nov 8, 2022 · 52495b7 · 52495b7
1 parent 4bd009f
commit 52495b7
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 35 deletions.
diff --git a/packages/story-editor/src/app/story/effects/useLoadStory.js b/packages/story-editor/src/app/story/effects/useLoadStory.js
@@ -121,12 +121,14 @@ function loadStory(storyId, post, restore, clearHistory, globalConfig) {
         : [],
     },
     globalStoryStyles: newGlobalStoryStyles,
-    autoAdvance: storyData?.autoAdvance
-      ? storyData.autoAdvance
-      : globalConfig.globalAutoAdvance,
-    defaultPageDuration: storyData?.defaultPageDuration
-      ? storyData?.defaultPageDuration
-      : globalConfig.globalPageDuration,
+    autoAdvance:
+      storyData?.autoAdvance === undefined
+        ? globalConfig.globalAutoAdvance
+        : storyData?.autoAdvance,
+    defaultPageDuration:
+      storyData?.defaultPageDuration === undefined
+        ? globalConfig.globalPageDuration
+        : storyData?.defaultPageDuration,
     backgroundAudio: storyData?.backgroundAudio,
     taxonomies,
     terms,

diff --git a/packages/story-editor/src/components/panels/document/pageAdvancement/pageAdvancement.js b/packages/story-editor/src/components/panels/document/pageAdvancement/pageAdvancement.js
@@ -25,16 +25,22 @@ import { __ } from '@googleforcreators/i18n';
  * Internal dependencies
  */
 import { useStory } from '../../../../app/story';
+import { useConfig } from '../../../../app/config';
 import GeneralPageAdvancementPanel from '../../shared/generalPageAdvancement';
 
 function PageAdvancementPanel({ nameOverride }) {
+  const { globalPageDuration } = useConfig();
   const { autoAdvance, defaultPageDuration, updateStory } = useStory(
     ({
       state: {
         story: { autoAdvance, defaultPageDuration },
       },
       actions: { updateStory },
-    }) => ({ autoAdvance, defaultPageDuration, updateStory })
+    }) => ({
+      autoAdvance,
+      defaultPageDuration: defaultPageDuration || globalPageDuration,
+      updateStory,
+    })
   );
 
   const onUpdate = useCallback(

diff --git a/packages/story-editor/src/components/panels/shared/generalPageAdvancement.js b/packages/story-editor/src/components/panels/shared/generalPageAdvancement.js
@@ -26,7 +26,7 @@ import {
   useMemo,
   useDebouncedCallback,
 } from '@googleforcreators/react';
-import { __ } from '@googleforcreators/i18n';
+import { __, _n, sprintf } from '@googleforcreators/i18n';
 import { v4 as uuidv4 } from 'uuid';
 import { trackEvent } from '@googleforcreators/tracking';
 import {
@@ -164,20 +164,34 @@ function GeneralPageAdvancementPanel({
         />
       </SwitchRow>
       {autoAdvance && (
-        <Row>
-          <NumericInput
-            unit={` ${__('seconds', 'web-stories')}`}
-            suffix={__('Duration', 'web-stories')}
-            value={duration}
-            onChange={onDurationChange}
-            aria-label={__('Default page duration in seconds', 'web-stories')}
-            min={MIN_MAX.PAGE_DURATION.MIN}
-            max={MIN_MAX.PAGE_DURATION.MAX}
-            isFloat
-            disabled={customAdvancementDisabled}
-            containerStyleOverride={inputContainerStyleOverride}
-          />
-        </Row>
+        <>
+          <Row>
+            <NumericInput
+              unit={` ${__('seconds', 'web-stories')}`}
+              suffix={__('Duration', 'web-stories')}
+              value={duration}
+              onChange={onDurationChange}
+              aria-label={__('Default page duration in seconds', 'web-stories')}
+              min={MIN_MAX.PAGE_DURATION.MIN}
+              max={MIN_MAX.PAGE_DURATION.MAX}
+              disabled={customAdvancementDisabled}
+              containerStyleOverride={inputContainerStyleOverride}
+            />
+          </Row>
+          <Text size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}>
+            {sprintf(
+              /* translators: 1: minimum duration. 2: maximum duration. */
+              _n(
+                'Duration between %1$d and %2$d second.',
+                'Duration between %1$d and %2$d seconds.',
+                MIN_MAX.PAGE_DURATION.MAX,
+                'web-stories'
+              ),
+              MIN_MAX.PAGE_DURATION.MIN,
+              MIN_MAX.PAGE_DURATION.MAX
+            )}
+          </Text>
+        </>
       )}
     </SimplePanel>
   );

diff --git a/packages/wp-dashboard/src/components/editorSettings/pageAdvancement/index.js b/packages/wp-dashboard/src/components/editorSettings/pageAdvancement/index.js
@@ -18,7 +18,7 @@
  * External dependencies
  */
 import { useCallback, useEffect, useState } from '@googleforcreators/react';
-import { __ } from '@googleforcreators/i18n';
+import { __, _n, sprintf } from '@googleforcreators/i18n';
 import {
   THEME_CONSTANTS,
   NumericInput,
@@ -37,6 +37,7 @@ import {
   MultilineForm,
   SettingHeading,
   SettingSubheading,
+  TextInputHelperText,
 } from '../components';
 
 const MIN_MAX = {
@@ -57,6 +58,17 @@ export const TEXT = {
   SWITCH_LABEL: __('Page Advancement', 'web-stories'),
   INPUT_LABEL: __('Default page duration in seconds', 'web-stories'),
   INPUT_SUFFIX: __('Duration', 'web-stories'),
+  INPUT_HELPER: sprintf(
+    /* translators: 1: minimum duration. 2: maximum duration. */
+    _n(
+      'Duration between %1$d and %2$d second.',
+      'Duration between %1$d and %2$d seconds.',
+      MIN_MAX.PAGE_DURATION.MAX,
+      'web-stories'
+    ),
+    MIN_MAX.PAGE_DURATION.MIN,
+    MIN_MAX.PAGE_DURATION.MAX
+  ),
 };
 
 const InputsWrapper = styled.div`
@@ -118,18 +130,24 @@ function PageAdvancementSettings({
           />
         </InlineForm>
         {_autoAdvance && (
-          <InlineForm>
-            <NumericInput
-              unit={` ${__('seconds', 'web-stories')}`}
-              suffix={TEXT.INPUT_SUFFIX}
-              value={defaultPageDuration}
-              onChange={onDurationChange}
-              aria-label={TEXT.INPUT_SUFFIX}
-              min={MIN_MAX.PAGE_DURATION.MIN}
-              max={MIN_MAX.PAGE_DURATION.MAX}
-              isFloat
-            />
-          </InlineForm>
+          <>
+            <InlineForm>
+              <NumericInput
+                unit={` ${__('seconds', 'web-stories')}`}
+                suffix={TEXT.INPUT_SUFFIX}
+                value={defaultPageDuration}
+                onChange={onDurationChange}
+                aria-label={TEXT.INPUT_SUFFIX}
+                min={MIN_MAX.PAGE_DURATION.MIN}
+                max={MIN_MAX.PAGE_DURATION.MAX}
+              />
+            </InlineForm>
+            <TextInputHelperText
+              size={THEME_CONSTANTS.TYPOGRAPHY.PRESET_SIZES.SMALL}
+            >
+              {TEXT.INPUT_HELPER}
+            </TextInputHelperText>
+          </>
         )}
       </InputsWrapper>
     </MultilineForm>