@wordpress/block-library
Version:
Block library for the WordPress editor.
343 lines (340 loc) • 12.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = TracksEditor;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _notices = require("@wordpress/notices");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _url = require("@wordpress/url");
var _lockUnlock = require("../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Badge
} = (0, _lockUnlock.unlock)(_components.privateApis);
const ALLOWED_TYPES = ['text/vtt'];
const DEFAULT_KIND = 'subtitles';
const KIND_OPTIONS = [{
label: (0, _i18n.__)('Subtitles'),
value: 'subtitles'
}, {
label: (0, _i18n.__)('Captions'),
value: 'captions'
}, {
label: (0, _i18n.__)('Descriptions'),
value: 'descriptions'
}, {
label: (0, _i18n.__)('Chapters'),
value: 'chapters'
}, {
label: (0, _i18n.__)('Metadata'),
value: 'metadata'
}];
function TrackList({
tracks,
onEditPress
}) {
const content = tracks.map((track, index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
className: "block-library-video-tracks-editor__track-list-track",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: track.label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
justify: "flex-end",
children: [track.default && /*#__PURE__*/(0, _jsxRuntime.jsx)(Badge, {
children: (0, _i18n.__)('Default')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "tertiary",
onClick: () => onEditPress(index),
"aria-label": (0, _i18n.sprintf)(/* translators: %s: Label of the video text track e.g: "French subtitles". */
(0, _i18n._x)('Edit %s', 'text tracks'), track.label),
children: (0, _i18n.__)('Edit')
})]
})]
}, track.src);
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
label: (0, _i18n.__)('Text tracks'),
className: "block-library-video-tracks-editor__track-list",
children: content
});
}
function SingleTrackEditor({
track,
onChange,
onClose,
onRemove,
allowSettingDefault
}) {
const {
src = '',
label = '',
srcLang = '',
kind = DEFAULT_KIND,
default: isDefaultTrack = false
} = track;
const fileName = src.startsWith('blob:') ? '' : (0, _url.getFilename)(src) || '';
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
className: "block-library-video-tracks-editor__single-track-editor",
spacing: "4",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "block-library-video-tracks-editor__single-track-editor-edit-track-label",
children: (0, _i18n.__)('Edit track')
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
children: [(0, _i18n.__)('File'), ": ", /*#__PURE__*/(0, _jsxRuntime.jsx)("b", {
children: fileName
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalGrid, {
columns: 2,
gap: 4,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
onChange: newLabel => onChange({
...track,
label: newLabel
}),
label: (0, _i18n.__)('Label'),
value: label,
help: (0, _i18n.__)('Title of track')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
onChange: newSrcLang => onChange({
...track,
srcLang: newSrcLang
}),
label: (0, _i18n.__)('Source language'),
value: srcLang,
help: (0, _i18n.__)('Language tag (en, fr, etc.)')
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
spacing: "4",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
className: "block-library-video-tracks-editor__single-track-editor-kind-select",
options: KIND_OPTIONS,
value: kind,
label: (0, _i18n.__)('Kind'),
onChange: newKind => {
onChange({
...track,
kind: newKind
});
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__next40pxDefaultSize: true,
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Set as default track'),
checked: isDefaultTrack,
disabled: !allowSettingDefault,
onChange: defaultTrack => {
onChange({
...track,
default: defaultTrack
});
}
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
className: "block-library-video-tracks-editor__single-track-editor-buttons-container",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
isDestructive: true,
variant: "link",
onClick: onRemove,
children: (0, _i18n.__)('Remove track')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
variant: "primary",
onClick: () => {
const changes = {};
let hasChanges = false;
if (label === '') {
changes.label = (0, _i18n.__)('English');
hasChanges = true;
}
if (srcLang === '') {
changes.srcLang = 'en';
hasChanges = true;
}
if (track.kind === undefined) {
changes.kind = DEFAULT_KIND;
hasChanges = true;
}
if (hasChanges) {
onChange({
...track,
...changes
});
}
onClose();
},
children: (0, _i18n.__)('Apply')
})]
})]
})]
});
}
function TracksEditor({
tracks = [],
onChange
}) {
const {
createNotice
} = (0, _data.useDispatch)(_notices.store);
const mediaUpload = (0, _data.useSelect)(select => {
return select(_blockEditor.store).getSettings().mediaUpload;
}, []);
const [trackBeingEdited, setTrackBeingEdited] = (0, _element.useState)(null);
const dropdownPopoverRef = (0, _element.useRef)();
const handleTrackSelect = ({
title,
url
}) => {
if (tracks.some(track => track.src === url)) {
createNotice('error', (0, _i18n.__)('This track already exists.'), {
isDismissible: true,
type: 'snackbar'
});
return;
}
const trackIndex = tracks.length;
onChange([...tracks, {
label: title || '',
src: url
}]);
setTrackBeingEdited(trackIndex);
};
(0, _element.useEffect)(() => {
dropdownPopoverRef.current?.focus();
}, [trackBeingEdited]);
if (!mediaUpload) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
contentClassName: "block-library-video-tracks-editor",
focusOnMount: true,
popoverProps: {
ref: dropdownPopoverRef
},
renderToggle: ({
isOpen,
onToggle
}) => {
const handleOnToggle = () => {
if (!isOpen) {
// When the Popover opens make sure the initial view is
// always the track list rather than the edit track UI.
setTrackBeingEdited(null);
}
onToggle();
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: handleOnToggle,
children: (0, _i18n.__)('Text tracks')
})
});
},
renderContent: () => {
if (trackBeingEdited !== null) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SingleTrackEditor, {
track: tracks[trackBeingEdited],
onChange: newTrack => {
const newTracks = [...tracks];
newTracks[trackBeingEdited] = newTrack;
onChange(newTracks);
},
onClose: () => setTrackBeingEdited(null),
onRemove: () => {
onChange(tracks.filter((_track, index) => index !== trackBeingEdited));
setTrackBeingEdited(null);
},
allowSettingDefault: !tracks.some(track => track.default) || tracks[trackBeingEdited].default
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [tracks.length === 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "block-library-video-tracks-editor__tracks-informative-message",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
className: "block-library-video-tracks-editor__tracks-informative-message-title",
children: (0, _i18n.__)('Text tracks')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
className: "block-library-video-tracks-editor__tracks-informative-message-description",
children: (0, _i18n.__)('Tracks can be subtitles, captions, chapters, or descriptions. They help make your content more accessible to a wider range of users.')
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.NavigableMenu, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TrackList, {
tracks: tracks,
onEditPress: setTrackBeingEdited
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
className: "block-library-video-tracks-editor__add-tracks-container",
label: (0, _i18n.__)('Add tracks'),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
onSelect: handleTrackSelect,
allowedTypes: ALLOWED_TYPES,
render: ({
open
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
icon: _icons.media,
onClick: open,
children: (0, _i18n.__)('Open Media Library')
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadCheck, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormFileUpload, {
onChange: event => {
const files = event.target.files;
const trackIndex = tracks.length;
mediaUpload({
allowedTypes: ALLOWED_TYPES,
filesList: files,
onFileChange: ([{
url
}]) => {
const newTracks = [...tracks];
if (!newTracks[trackIndex]) {
newTracks[trackIndex] = {};
}
newTracks[trackIndex] = {
...tracks[trackIndex],
src: url
};
onChange(newTracks);
setTrackBeingEdited(trackIndex);
}
});
},
accept: ".vtt,text/vtt",
render: ({
openFileDialog
}) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
icon: _icons.upload,
onClick: () => {
openFileDialog();
},
children: (0, _i18n._x)('Upload', 'verb')
});
}
})
})]
})]
})]
});
}
});
}
//# sourceMappingURL=tracks-editor.js.map