@wordpress/block-library
Version:
Block library for the WordPress editor.
302 lines (278 loc) • 9.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = TracksEditor;
var _element = require("@wordpress/element");
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 _url = require("@wordpress/url");
/**
* WordPress dependencies
*/
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 captionIcon = (0, _element.createElement)(_components.SVG, {
width: "18",
height: "14",
viewBox: "0 0 18 14",
role: "img",
fill: "none"
}, (0, _element.createElement)(_components.Rect, {
x: "0.75",
y: "0.75",
width: "16.5",
height: "12.5",
rx: "1.25",
stroke: "black",
strokeWidth: "1.5",
fill: "none"
}), (0, _element.createElement)(_components.Path, {
d: "M3 7H15",
stroke: "black",
strokeWidth: "1.5"
}), (0, _element.createElement)(_components.Path, {
d: "M3 10L15 10",
stroke: "black",
strokeWidth: "1.5"
}));
function TrackList(_ref) {
let {
tracks,
onEditPress
} = _ref;
let content;
if (tracks.length === 0) {
content = (0, _element.createElement)("p", {
className: "block-library-video-tracks-editor__tracks-informative-message"
}, (0, _i18n.__)('Tracks can be subtitles, captions, chapters, or descriptions. They help make your content more accessible to a wider range of users.'));
} else {
content = tracks.map((track, index) => {
return (0, _element.createElement)("div", {
key: index,
className: "block-library-video-tracks-editor__track-list-track"
}, (0, _element.createElement)("span", null, track.label, " "), (0, _element.createElement)(_components.Button, {
variant: "tertiary",
onClick: () => onEditPress(index),
"aria-label": (0, _i18n.sprintf)(
/* translators: %s: Label of the video text track e.g: "French subtitles" */
(0, _i18n.__)('Edit %s'), track.label)
}, (0, _i18n.__)('Edit')));
});
}
return (0, _element.createElement)(_components.MenuGroup, {
label: (0, _i18n.__)('Text tracks'),
className: "block-library-video-tracks-editor__track-list"
}, content);
}
function SingleTrackEditor(_ref2) {
let {
track,
onChange,
onClose,
onRemove
} = _ref2;
const {
src = '',
label = '',
srcLang = '',
kind = DEFAULT_KIND
} = track;
const fileName = src.startsWith('blob:') ? '' : (0, _url.getFilename)(src) || '';
return (0, _element.createElement)(_components.NavigableMenu, null, (0, _element.createElement)("div", {
className: "block-library-video-tracks-editor__single-track-editor"
}, (0, _element.createElement)("span", {
className: "block-library-video-tracks-editor__single-track-editor-edit-track-label"
}, (0, _i18n.__)('Edit track')), (0, _element.createElement)("span", null, (0, _i18n.__)('File'), ": ", (0, _element.createElement)("b", null, fileName)), (0, _element.createElement)("div", {
className: "block-library-video-tracks-editor__single-track-editor-label-language"
}, (0, _element.createElement)(_components.TextControl
/* eslint-disable jsx-a11y/no-autofocus */
, {
autoFocus: true
/* eslint-enable jsx-a11y/no-autofocus */
,
onChange: newLabel => onChange({ ...track,
label: newLabel
}),
label: (0, _i18n.__)('Label'),
value: label,
help: (0, _i18n.__)('Title of track')
}), (0, _element.createElement)(_components.TextControl, {
onChange: newSrcLang => onChange({ ...track,
srcLang: newSrcLang
}),
label: (0, _i18n.__)('Source language'),
value: srcLang,
help: (0, _i18n.__)('Language tag (en, fr, etc.)')
})), (0, _element.createElement)(_components.SelectControl, {
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
});
}
}), (0, _element.createElement)("div", {
className: "block-library-video-tracks-editor__single-track-editor-buttons-container"
}, (0, _element.createElement)(_components.Button, {
variant: "secondary",
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();
}
}, (0, _i18n.__)('Close')), (0, _element.createElement)(_components.Button, {
isDestructive: true,
variant: "link",
onClick: onRemove
}, (0, _i18n.__)('Remove track')))));
}
function TracksEditor(_ref3) {
let {
tracks = [],
onChange
} = _ref3;
const mediaUpload = (0, _data.useSelect)(select => {
return select(_blockEditor.store).getSettings().mediaUpload;
}, []);
const [trackBeingEdited, setTrackBeingEdited] = (0, _element.useState)(null);
if (!mediaUpload) {
return null;
}
return (0, _element.createElement)(_components.Dropdown, {
contentClassName: "block-library-video-tracks-editor",
renderToggle: _ref4 => {
let {
isOpen,
onToggle
} = _ref4;
return (0, _element.createElement)(_components.ToolbarButton, {
label: (0, _i18n.__)('Text tracks'),
showTooltip: true,
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: onToggle,
icon: captionIcon
});
},
renderContent: () => {
if (trackBeingEdited !== null) {
return (0, _element.createElement)(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);
}
});
}
return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.NavigableMenu, null, (0, _element.createElement)(TrackList, {
tracks: tracks,
onEditPress: setTrackBeingEdited
}), (0, _element.createElement)(_components.MenuGroup, {
className: "block-library-video-tracks-editor__add-tracks-container",
label: (0, _i18n.__)('Add tracks')
}, (0, _element.createElement)(_blockEditor.MediaUpload, {
onSelect: _ref5 => {
let {
url
} = _ref5;
const trackIndex = tracks.length;
onChange([...tracks, {
src: url
}]);
setTrackBeingEdited(trackIndex);
},
allowedTypes: ALLOWED_TYPES,
render: _ref6 => {
let {
open
} = _ref6;
return (0, _element.createElement)(_components.MenuItem, {
icon: _icons.media,
onClick: open
}, (0, _i18n.__)('Open Media Library'));
}
}), (0, _element.createElement)(_blockEditor.MediaUploadCheck, null, (0, _element.createElement)(_components.FormFileUpload, {
onChange: event => {
const files = event.target.files;
const trackIndex = tracks.length;
mediaUpload({
allowedTypes: ALLOWED_TYPES,
filesList: files,
onFileChange: _ref7 => {
let [{
url
}] = _ref7;
const newTracks = [...tracks];
if (!newTracks[trackIndex]) {
newTracks[trackIndex] = {};
}
newTracks[trackIndex] = { ...tracks[trackIndex],
src: url
};
onChange(newTracks);
setTrackBeingEdited(trackIndex);
}
});
},
accept: ".vtt,text/vtt",
render: _ref8 => {
let {
openFileDialog
} = _ref8;
return (0, _element.createElement)(_components.MenuItem, {
icon: _icons.upload,
onClick: () => {
openFileDialog();
}
}, (0, _i18n.__)('Upload'));
}
})))));
}
});
}
//# sourceMappingURL=tracks-editor.js.map