diff --git a/src/components/OutSegTemplateEditor.jsx b/src/components/OutSegTemplateEditor.jsx index 86e278484b5..182a754ed0b 100644 --- a/src/components/OutSegTemplateEditor.jsx +++ b/src/components/OutSegTemplateEditor.jsx @@ -1,4 +1,4 @@ -import React, { memo, useState, useEffect, useCallback } from 'react'; +import React, { memo, useState, useEffect, useCallback, useRef } from 'react'; import { useDebounce } from 'use-debounce'; import i18n from 'i18next'; import { useTranslation } from 'react-i18next'; @@ -26,6 +26,7 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate const [error, setError] = useState(); const [outSegFileNames, setOutSegFileNames] = useState(); const [shown, setShown] = useState(); + const inputRef = useRef(null); const { t } = useTranslation(); @@ -83,6 +84,24 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate const needToShow = shown || error != null; + const onTextClick = useCallback(() => { + inputRef.current.focus(); + }, []); + + const onVariableClick = useCallback((variable) => { + const input = inputRef.current; + const startPos = input.selectionStart; + const endPos = input.selectionEnd; + + const newValue = `${text.slice(0, startPos)}${'${' + variable + '}' + text.slice(endPos)}`; + setText(newValue); + + // Move the cursor to after the inserted variable + const newPos = startPos + variable.length + 2; + input.selectionStart = newPos; + input.selectionEnd = newPos; + }, [text]); + return ( <>
@@ -94,7 +113,7 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate {needToShow && ( <>
- + {outSegFileNames != null && } @@ -106,7 +125,9 @@ const OutSegTemplateEditor = memo(({ outSegTemplate, setOutSegTemplate, generate {isMissingExtension &&
{i18n.t('The file name template is missing {{ext}} and will result in a file without the suggested extension. This may result in an unplayable output file.', { ext: extVar })}
}
{`${i18n.t('Variables')}`}{': '} - {['FILENAME', 'CUT_FROM', 'CUT_TO', 'SEG_NUM', 'SEG_LABEL', 'SEG_SUFFIX', 'EXT', 'SEG_TAGS.XX'].map((variable) => setText((oldText) => `${oldText}\${${variable}}`)}>{variable})} + {['FILENAME', 'TIMESTAMP', 'CUT_FROM', 'CUT_TO', 'SEG_NUM', 'SEG_LABEL', 'SEG_SUFFIX', 'EXT', 'SEG_TAGS.XX'].map((variable) => ( + onVariableClick(variable)}>{variable} + ))}
diff --git a/src/util/outputNameTemplate.js b/src/util/outputNameTemplate.js index acb7224ff7e..295b272a05c 100644 --- a/src/util/outputNameTemplate.js +++ b/src/util/outputNameTemplate.js @@ -74,6 +74,7 @@ function interpolateSegmentFileName({ template, inputFileNameWithoutExt, segSuff EXT: ext, SEG_NUM: segNum, SEG_LABEL: segLabel, + TIMESTAMP: Date.now(), CUT_FROM: cutFrom, CUT_TO: cutTo, SEG_TAGS: {