@wordpress/block-library/build-module/video/tracks-editor.js

Block library for the WordPress editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { NavigableMenu, MenuItem, FormFileUpload, MenuGroup, ToolbarButton, Dropdown, SVG, Rect, Path, Button, TextControl, SelectControl } from '@wordpress/components';
import { MediaUpload, MediaUploadCheck, store as blockEditorStore } from '@wordpress/block-editor';
import { upload, media } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { getFilename } from '@wordpress/url';
const ALLOWED_TYPES = ['text/vtt'];
const DEFAULT_KIND = 'subtitles';
const KIND_OPTIONS = [{
  label: __('Subtitles'),
  value: 'subtitles'
}, {
  label: __('Captions'),
  value: 'captions'
}, {
  label: __('Descriptions'),
  value: 'descriptions'
}, {
  label: __('Chapters'),
  value: 'chapters'
}, {
  label: __('Metadata'),
  value: 'metadata'
}];
const captionIcon = createElement(SVG, {
  width: "18",
  height: "14",
  viewBox: "0 0 18 14",
  role: "img",
  fill: "none"
}, createElement(Rect, {
  x: "0.75",
  y: "0.75",
  width: "16.5",
  height: "12.5",
  rx: "1.25",
  stroke: "black",
  strokeWidth: "1.5",
  fill: "none"
}), createElement(Path, {
  d: "M3 7H15",
  stroke: "black",
  strokeWidth: "1.5"
}), createElement(Path, {
  d: "M3 10L15 10",
  stroke: "black",
  strokeWidth: "1.5"
}));

function TrackList(_ref) {
  let {
    tracks,
    onEditPress
  } = _ref;
  let content;

  if (tracks.length === 0) {
    content = createElement("p", {
      className: "block-library-video-tracks-editor__tracks-informative-message"
    }, __('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 createElement("div", {
        key: index,
        className: "block-library-video-tracks-editor__track-list-track"
      }, createElement("span", null, track.label, " "), createElement(Button, {
        variant: "tertiary",
        onClick: () => onEditPress(index),
        "aria-label": sprintf(
        /* translators: %s: Label of the video text track e.g: "French subtitles" */
        __('Edit %s'), track.label)
      }, __('Edit')));
    });
  }

  return createElement(MenuGroup, {
    label: __('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:') ? '' : getFilename(src) || '';
  return createElement(NavigableMenu, null, createElement("div", {
    className: "block-library-video-tracks-editor__single-track-editor"
  }, createElement("span", {
    className: "block-library-video-tracks-editor__single-track-editor-edit-track-label"
  }, __('Edit track')), createElement("span", null, __('File'), ": ", createElement("b", null, fileName)), createElement("div", {
    className: "block-library-video-tracks-editor__single-track-editor-label-language"
  }, createElement(TextControl
  /* eslint-disable jsx-a11y/no-autofocus */
  , {
    autoFocus: true
    /* eslint-enable jsx-a11y/no-autofocus */
    ,
    onChange: newLabel => onChange({ ...track,
      label: newLabel
    }),
    label: __('Label'),
    value: label,
    help: __('Title of track')
  }), createElement(TextControl, {
    onChange: newSrcLang => onChange({ ...track,
      srcLang: newSrcLang
    }),
    label: __('Source language'),
    value: srcLang,
    help: __('Language tag (en, fr, etc.)')
  })), createElement(SelectControl, {
    className: "block-library-video-tracks-editor__single-track-editor-kind-select",
    options: KIND_OPTIONS,
    value: kind,
    label: __('Kind'),
    onChange: newKind => {
      onChange({ ...track,
        kind: newKind
      });
    }
  }), createElement("div", {
    className: "block-library-video-tracks-editor__single-track-editor-buttons-container"
  }, createElement(Button, {
    variant: "secondary",
    onClick: () => {
      const changes = {};
      let hasChanges = false;

      if (label === '') {
        changes.label = __('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();
    }
  }, __('Close')), createElement(Button, {
    isDestructive: true,
    variant: "link",
    onClick: onRemove
  }, __('Remove track')))));
}

export default function TracksEditor(_ref3) {
  let {
    tracks = [],
    onChange
  } = _ref3;
  const mediaUpload = useSelect(select => {
    return select(blockEditorStore).getSettings().mediaUpload;
  }, []);
  const [trackBeingEdited, setTrackBeingEdited] = useState(null);

  if (!mediaUpload) {
    return null;
  }

  return createElement(Dropdown, {
    contentClassName: "block-library-video-tracks-editor",
    renderToggle: _ref4 => {
      let {
        isOpen,
        onToggle
      } = _ref4;
      return createElement(ToolbarButton, {
        label: __('Text tracks'),
        showTooltip: true,
        "aria-expanded": isOpen,
        "aria-haspopup": "true",
        onClick: onToggle,
        icon: captionIcon
      });
    },
    renderContent: () => {
      if (trackBeingEdited !== null) {
        return 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 createElement(Fragment, null, createElement(NavigableMenu, null, createElement(TrackList, {
        tracks: tracks,
        onEditPress: setTrackBeingEdited
      }), createElement(MenuGroup, {
        className: "block-library-video-tracks-editor__add-tracks-container",
        label: __('Add tracks')
      }, createElement(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 createElement(MenuItem, {
            icon: media,
            onClick: open
          }, __('Open Media Library'));
        }
      }), createElement(MediaUploadCheck, null, createElement(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 createElement(MenuItem, {
            icon: upload,
            onClick: () => {
              openFileDialog();
            }
          }, __('Upload'));
        }
      })))));
    }
  });
}
//# sourceMappingURL=tracks-editor.js.map