@react-av/editor
Version:
Editor Timeline Components built on React AV.
31 lines • 7.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useTimelineSubtitleCueEditor } from "./TimelineSubtitlesTrack";
import { useId } from "react";
export function TimelineSubtitleCueEditor({ styling }) {
var _a, _b, _c, _d, _e;
const cueEditor = useTimelineSubtitleCueEditor();
const labelId = useId();
if (!cueEditor.entry)
return null;
return _jsxs(_Fragment, { children: [_jsx("div", { style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorPanelTitleContainer) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorPanelTitleContainer, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorPanelTitleContainer) === 'string' ? styling.timelineSubtitleCueEditorPanelTitleContainer : undefined, children: (_a = styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorPanelTitleText) !== null && _a !== void 0 ? _a : 'Properties' }), _jsxs("div", { ref: cueEditor.focusRef, style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorContainer) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorContainer, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorContainer) === 'string' ? styling.timelineSubtitleCueEditorContainer : undefined, children: [_jsx("label", { htmlFor: "cue_text" + labelId, style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorCueContentLabel) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorCueContentLabel, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorCueContentLabel) === 'string' ? styling.timelineSubtitleCueEditorCueContentLabel : undefined, children: (_b = styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorCueContentLabelText) !== null && _b !== void 0 ? _b : 'Cue Content' }), _jsx("div", { children: _jsx("textarea", { "aria-multiline": "true", id: "cue_text" + labelId, value: cueEditor.entry.text, onChange: e => {
const value = e.target.value;
cueEditor.entry.text = value;
cueEditor.sync();
}, style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorCueContentField) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorCueContentField, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorCueContentField) === 'string' ? styling.timelineSubtitleCueEditorCueContentField : undefined }) }), _jsxs("div", { style: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorActionsContainer) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorActionsContainer, className: typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorActionsContainer) === 'string' ? styling.timelineSubtitleCueEditorActionsContainer : undefined, children: [_jsxs("button", { className: [
typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton) === 'string' ? styling.timelineSubtitleCueEditorBaseButton : undefined,
typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorFocusTimelineButton) === 'string' ? styling.timelineSubtitleCueEditorFocusTimelineButton : undefined
].join(' '), style: Object.assign(Object.assign({}, (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton)), (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorFocusTimelineButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorFocusTimelineButton)), onClick: () => {
cueEditor.focusTimeline();
}, children: [styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorFocusTimelineIcon, (_c = styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorFocusTimelineButtonText) !== null && _c !== void 0 ? _c : 'Back to Timeline'] }), _jsxs("button", { className: [
typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton) === 'string' ? styling.timelineSubtitleCueEditorBaseButton : undefined,
typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDeleteButton) === 'string' ? styling.timelineSubtitleCueEditorDeleteButton : undefined
].join(' '), style: Object.assign(Object.assign({}, (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton)), (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDeleteButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDeleteButton)), onClick: () => {
cueEditor.delete();
}, children: [styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDeleteIcon, (_d = styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDeleteButtonText) !== null && _d !== void 0 ? _d : 'Delete'] }), _jsxs("button", { className: [
typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton) === 'string' ? styling.timelineSubtitleCueEditorBaseButton : undefined,
typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDoneButton) === 'string' ? styling.timelineSubtitleCueEditorDoneButton : undefined
].join(' '), style: Object.assign(Object.assign({}, (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorBaseButton)), (typeof (styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDoneButton) === 'string' ? {} : styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDoneButton)), onClick: () => {
cueEditor.deselect();
}, children: [styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDoneIcon, (_e = styling === null || styling === void 0 ? void 0 : styling.timelineSubtitleCueEditorDoneButtonText) !== null && _e !== void 0 ? _e : 'Done'] })] })] })] });
}
//# sourceMappingURL=TimelineSubtitleCueEditor.js.map