@wordpress/block-library
Version:
Block library for the WordPress editor.
334 lines (330 loc) • 11.8 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 _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'
}];
const DEFAULT_TRACK = {
src: '',
label: '',
srcLang: 'en',
kind: DEFAULT_KIND,
default: false
};
function TrackList({
tracks,
onEditPress
}) {
const content = tracks.map((track, index) => {
var _track$id;
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$id = track.id) !== null && _track$id !== void 0 ? _track$id : 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 [trackState, setTrackState] = (0, _element.useState)({
...DEFAULT_TRACK,
...track
});
const {
src,
label,
srcLang,
kind,
default: isDefaultTrack
} = trackState;
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 => setTrackState(prevTrackState => ({
...prevTrackState,
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 => setTrackState(prevTrackState => ({
...prevTrackState,
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 => setTrackState(prevTrackState => ({
...prevTrackState,
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 => setTrackState(prevTrackState => ({
...prevTrackState,
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: () => {
onChange(trackState);
onClose();
},
children: (0, _i18n.__)('Apply')
})]
})]
})]
});
}
function TracksEditor({
tracks = [],
onChange
}) {
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 = (selectedTracks = [], appendTracks = false) => {
const existingTracksMap = new Map(tracks.map(track => [track.id, track]));
const tracksToAdd = selectedTracks.map(({
id,
title,
url
}) => {
// Reuse existing tracks to preserve user-configured metadata.
if (existingTracksMap.has(id)) {
return existingTracksMap.get(id);
}
return {
...DEFAULT_TRACK,
id,
label: title || '',
src: url
};
});
if (tracksToAdd.length === 0) {
return;
}
onChange([...(appendTracks ? tracks : []), ...tracksToAdd]);
};
function uploadFiles(event) {
const files = event.target.files;
mediaUpload({
allowedTypes: ALLOWED_TYPES,
filesList: files,
onFileChange: selectedTracks => {
if (!Array.isArray(selectedTracks)) {
return;
}
// Wait until the track has been uploaded.
const uploadedTracks = selectedTracks.filter(track => !!track?.id);
if (!uploadedTracks.length) {
return;
}
handleTrackSelect(uploadedTracks, true);
}
});
}
(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.jsx)(_components.MenuGroup, {
className: "block-library-video-tracks-editor__add-tracks-container",
label: (0, _i18n.__)('Add tracks'),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.MediaUploadCheck, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
onSelect: handleTrackSelect,
allowedTypes: ALLOWED_TYPES,
value: tracks.map(({
id
}) => id),
multiple: true,
render: ({
open
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
icon: _icons.media,
onClick: open,
children: (0, _i18n.__)('Open Media Library')
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FormFileUpload, {
onChange: uploadFiles,
accept: ".vtt,text/vtt",
multiple: true,
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