@react-av/editor
Version:
Editor Timeline Components built on React AV.
34 lines • 7.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineSubtitleCueEditor = TimelineSubtitleCueEditor;
const jsx_runtime_1 = require("react/jsx-runtime");
const TimelineSubtitlesTrack_1 = require("./TimelineSubtitlesTrack");
const react_1 = require("react");
function TimelineSubtitleCueEditor({ styling }) {
var _a, _b, _c, _d, _e;
const cueEditor = (0, TimelineSubtitlesTrack_1.useTimelineSubtitleCueEditor)();
const labelId = (0, react_1.useId)();
if (!cueEditor.entry)
return null;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.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' }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.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' }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.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 }) }), (0, jsx_runtime_1.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: [(0, jsx_runtime_1.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'] }), (0, jsx_runtime_1.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'] }), (0, jsx_runtime_1.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