835 extend caption editing area UI#837
Conversation
angrave
left a comment
angrave
left a comment
There was a problem hiding this comment.
Changing the DOM is strangel.
(From Chatgpt): Directly manipulating ref.current.innerText might conflict with React's reconciliation process. This could cause React to lose sync with the DOM.
Improvement: If possible, manage text updates via state or props rather than directly mutating the DOM:
const [innerText, setInnerText] = useState(originalValue);
useEffect(() => {
if (ref.current) ref.current.innerText = innerText;
}, [innerText]);
| if (ref.current) { | ||
| const elementId = ref.current?.id || ""; | ||
| const currentValue = ref.current.innerText; | ||
| if (elementId.includes("time")) { |
There was a problem hiding this comment.
This string check seems fragile and prone to break in the future - is the best way to decide what this element is?
| } else if (elementId.includes("textarea")) { | ||
| // text | ||
| // eslint-disable-next-line no-console | ||
| console.log("handling blur for text"); |
There was a problem hiding this comment.
Once this code is ready for the PR the console log should be removed or commented out.
| if (!Array.isArray(trans)) { | ||
| trans = [trans]; | ||
| } | ||
| console.log("Normalized trans array:", trans); |
|
|
||
| // Inplace add a reference to the transcription object for all captions | ||
| allTranscriptionData.forEach((captionList, listIndex) =>{ | ||
| console.log("Fetched allTranscriptionData:", allTranscriptionData); |
| *saveCaption({ payload: { caption, text, begin, end } }, { call, put, select }) { | ||
| const { watch } = yield select(); | ||
|
|
||
| console.log("Entering saveCaption with payload:", { caption, text, begin, end }); |
| } catch (error) { | ||
| // eslint-disable-next-line no-console | ||
| console.error("Error during save:", error.message); | ||
| alert('Please enter a valid time format (HH:MM:SS, MM:SS, or HH:MM:SS.SSS)'); // eslint-disable-line no-alert |
There was a problem hiding this comment.
Please use a better alert library (ClassTranscribe already has a couple included) than the js builtin 'alert'
|
Is this is ready for merging in staging?e.g. Has it been sufficiently tested? Can you show me a demo? (Does it need other merges or backend changes first?) |
3 participants
Allows editing of starting and ending timestamps for captions and descriptions.