1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = void 0;
|
9 |
|
10 | var _element = require("@wordpress/element");
|
11 |
|
12 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
13 |
|
14 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15 |
|
16 | var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
17 |
|
18 | var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
19 |
|
20 | var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
21 |
|
22 | var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
23 |
|
24 | var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
25 |
|
26 | var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
27 |
|
28 | var _blob = require("@wordpress/blob");
|
29 |
|
30 | var _components = require("@wordpress/components");
|
31 |
|
32 | var _blockEditor = require("@wordpress/block-editor");
|
33 |
|
34 | var _editor = require("@wordpress/editor");
|
35 |
|
36 | var _i18n = require("@wordpress/i18n");
|
37 |
|
38 | var _util = require("../embed/util");
|
39 |
|
40 | var _icon = _interopRequireDefault(require("./icon"));
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | var ALLOWED_MEDIA_TYPES = ['video'];
|
50 | var VIDEO_POSTER_ALLOWED_MEDIA_TYPES = ['image'];
|
51 |
|
52 | var VideoEdit =
|
53 |
|
54 | function (_Component) {
|
55 | (0, _inherits2.default)(VideoEdit, _Component);
|
56 |
|
57 | function VideoEdit() {
|
58 | var _this;
|
59 |
|
60 | (0, _classCallCheck2.default)(this, VideoEdit);
|
61 | _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(VideoEdit).apply(this, arguments));
|
62 |
|
63 |
|
64 | _this.state = {
|
65 | editing: !_this.props.attributes.src
|
66 | };
|
67 | _this.videoPlayer = (0, _element.createRef)();
|
68 | _this.posterImageButton = (0, _element.createRef)();
|
69 | _this.toggleAttribute = _this.toggleAttribute.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
70 | _this.onSelectURL = _this.onSelectURL.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
71 | _this.onSelectPoster = _this.onSelectPoster.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
72 | _this.onRemovePoster = _this.onRemovePoster.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
|
73 | return _this;
|
74 | }
|
75 |
|
76 | (0, _createClass2.default)(VideoEdit, [{
|
77 | key: "componentDidMount",
|
78 | value: function componentDidMount() {
|
79 | var _this2 = this;
|
80 |
|
81 | var _this$props = this.props,
|
82 | attributes = _this$props.attributes,
|
83 | noticeOperations = _this$props.noticeOperations,
|
84 | setAttributes = _this$props.setAttributes;
|
85 | var id = attributes.id,
|
86 | _attributes$src = attributes.src,
|
87 | src = _attributes$src === void 0 ? '' : _attributes$src;
|
88 |
|
89 | if (!id && (0, _blob.isBlobURL)(src)) {
|
90 | var file = (0, _blob.getBlobByURL)(src);
|
91 |
|
92 | if (file) {
|
93 | (0, _editor.mediaUpload)({
|
94 | filesList: [file],
|
95 | onFileChange: function onFileChange(_ref) {
|
96 | var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
|
97 | url = _ref2[0].url;
|
98 |
|
99 | setAttributes({
|
100 | src: url
|
101 | });
|
102 | },
|
103 | onError: function onError(message) {
|
104 | _this2.setState({
|
105 | editing: true
|
106 | });
|
107 |
|
108 | noticeOperations.createErrorNotice(message);
|
109 | },
|
110 | allowedTypes: ALLOWED_MEDIA_TYPES
|
111 | });
|
112 | }
|
113 | }
|
114 | }
|
115 | }, {
|
116 | key: "componentDidUpdate",
|
117 | value: function componentDidUpdate(prevProps) {
|
118 | if (this.props.attributes.poster !== prevProps.attributes.poster) {
|
119 | this.videoPlayer.current.load();
|
120 | }
|
121 | }
|
122 | }, {
|
123 | key: "toggleAttribute",
|
124 | value: function toggleAttribute(attribute) {
|
125 | var _this3 = this;
|
126 |
|
127 | return function (newValue) {
|
128 | _this3.props.setAttributes((0, _defineProperty2.default)({}, attribute, newValue));
|
129 | };
|
130 | }
|
131 | }, {
|
132 | key: "onSelectURL",
|
133 | value: function onSelectURL(newSrc) {
|
134 | var _this$props2 = this.props,
|
135 | attributes = _this$props2.attributes,
|
136 | setAttributes = _this$props2.setAttributes;
|
137 | var src = attributes.src;
|
138 |
|
139 |
|
140 | if (newSrc !== src) {
|
141 |
|
142 | var embedBlock = (0, _util.createUpgradedEmbedBlock)({
|
143 | attributes: {
|
144 | url: newSrc
|
145 | }
|
146 | });
|
147 |
|
148 | if (undefined !== embedBlock) {
|
149 | this.props.onReplace(embedBlock);
|
150 | return;
|
151 | }
|
152 |
|
153 | setAttributes({
|
154 | src: newSrc,
|
155 | id: undefined
|
156 | });
|
157 | }
|
158 |
|
159 | this.setState({
|
160 | editing: false
|
161 | });
|
162 | }
|
163 | }, {
|
164 | key: "onSelectPoster",
|
165 | value: function onSelectPoster(image) {
|
166 | var setAttributes = this.props.setAttributes;
|
167 | setAttributes({
|
168 | poster: image.url
|
169 | });
|
170 | }
|
171 | }, {
|
172 | key: "onRemovePoster",
|
173 | value: function onRemovePoster() {
|
174 | var setAttributes = this.props.setAttributes;
|
175 | setAttributes({
|
176 | poster: ''
|
177 | });
|
178 |
|
179 | this.posterImageButton.current.focus();
|
180 | }
|
181 | }, {
|
182 | key: "render",
|
183 | value: function render() {
|
184 | var _this4 = this;
|
185 |
|
186 | var _this$props$attribute = this.props.attributes,
|
187 | autoplay = _this$props$attribute.autoplay,
|
188 | caption = _this$props$attribute.caption,
|
189 | controls = _this$props$attribute.controls,
|
190 | loop = _this$props$attribute.loop,
|
191 | muted = _this$props$attribute.muted,
|
192 | poster = _this$props$attribute.poster,
|
193 | preload = _this$props$attribute.preload,
|
194 | src = _this$props$attribute.src;
|
195 | var _this$props3 = this.props,
|
196 | setAttributes = _this$props3.setAttributes,
|
197 | isSelected = _this$props3.isSelected,
|
198 | className = _this$props3.className,
|
199 | noticeOperations = _this$props3.noticeOperations,
|
200 | noticeUI = _this$props3.noticeUI;
|
201 | var editing = this.state.editing;
|
202 |
|
203 | var switchToEditing = function switchToEditing() {
|
204 | _this4.setState({
|
205 | editing: true
|
206 | });
|
207 | };
|
208 |
|
209 | var onSelectVideo = function onSelectVideo(media) {
|
210 | if (!media || !media.url) {
|
211 |
|
212 |
|
213 | setAttributes({
|
214 | src: undefined,
|
215 | id: undefined
|
216 | });
|
217 | switchToEditing();
|
218 | return;
|
219 | }
|
220 |
|
221 |
|
222 |
|
223 | setAttributes({
|
224 | src: media.url,
|
225 | id: media.id
|
226 | });
|
227 |
|
228 | _this4.setState({
|
229 | src: media.url,
|
230 | editing: false
|
231 | });
|
232 | };
|
233 |
|
234 | if (editing) {
|
235 | return (0, _element.createElement)(_blockEditor.MediaPlaceholder, {
|
236 | icon: (0, _element.createElement)(_blockEditor.BlockIcon, {
|
237 | icon: _icon.default
|
238 | }),
|
239 | className: className,
|
240 | onSelect: onSelectVideo,
|
241 | onSelectURL: this.onSelectURL,
|
242 | accept: "video/*",
|
243 | allowedTypes: ALLOWED_MEDIA_TYPES,
|
244 | value: this.props.attributes,
|
245 | notices: noticeUI,
|
246 | onError: noticeOperations.createErrorNotice
|
247 | });
|
248 | }
|
249 |
|
250 |
|
251 |
|
252 | return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.Toolbar, null, (0, _element.createElement)(_components.IconButton, {
|
253 | className: "components-icon-button components-toolbar__control",
|
254 | label: (0, _i18n.__)('Edit video'),
|
255 | onClick: switchToEditing,
|
256 | icon: "edit"
|
257 | }))), (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
|
258 | title: (0, _i18n.__)('Video Settings')
|
259 | }, (0, _element.createElement)(_components.ToggleControl, {
|
260 | label: (0, _i18n.__)('Autoplay'),
|
261 | onChange: this.toggleAttribute('autoplay'),
|
262 | checked: autoplay
|
263 | }), (0, _element.createElement)(_components.ToggleControl, {
|
264 | label: (0, _i18n.__)('Loop'),
|
265 | onChange: this.toggleAttribute('loop'),
|
266 | checked: loop
|
267 | }), (0, _element.createElement)(_components.ToggleControl, {
|
268 | label: (0, _i18n.__)('Muted'),
|
269 | onChange: this.toggleAttribute('muted'),
|
270 | checked: muted
|
271 | }), (0, _element.createElement)(_components.ToggleControl, {
|
272 | label: (0, _i18n.__)('Playback Controls'),
|
273 | onChange: this.toggleAttribute('controls'),
|
274 | checked: controls
|
275 | }), (0, _element.createElement)(_components.SelectControl, {
|
276 | label: (0, _i18n.__)('Preload'),
|
277 | value: preload,
|
278 | onChange: function onChange(value) {
|
279 | return setAttributes({
|
280 | preload: value
|
281 | });
|
282 | },
|
283 | options: [{
|
284 | value: 'auto',
|
285 | label: (0, _i18n.__)('Auto')
|
286 | }, {
|
287 | value: 'metadata',
|
288 | label: (0, _i18n.__)('Metadata')
|
289 | }, {
|
290 | value: 'none',
|
291 | label: (0, _i18n.__)('None')
|
292 | }]
|
293 | }), (0, _element.createElement)(_blockEditor.MediaUploadCheck, null, (0, _element.createElement)(_components.BaseControl, {
|
294 | className: "editor-video-poster-control",
|
295 | label: (0, _i18n.__)('Poster Image')
|
296 | }, (0, _element.createElement)(_blockEditor.MediaUpload, {
|
297 | title: (0, _i18n.__)('Select Poster Image'),
|
298 | onSelect: this.onSelectPoster,
|
299 | allowedTypes: VIDEO_POSTER_ALLOWED_MEDIA_TYPES,
|
300 | render: function render(_ref3) {
|
301 | var open = _ref3.open;
|
302 | return (0, _element.createElement)(_components.Button, {
|
303 | isDefault: true,
|
304 | onClick: open,
|
305 | ref: _this4.posterImageButton
|
306 | }, !_this4.props.attributes.poster ? (0, _i18n.__)('Select Poster Image') : (0, _i18n.__)('Replace image'));
|
307 | }
|
308 | }), !!this.props.attributes.poster && (0, _element.createElement)(_components.Button, {
|
309 | onClick: this.onRemovePoster,
|
310 | isLink: true,
|
311 | isDestructive: true
|
312 | }, (0, _i18n.__)('Remove Poster Image')))))), (0, _element.createElement)("figure", {
|
313 | className: className
|
314 | }, (0, _element.createElement)(_components.Disabled, null, (0, _element.createElement)("video", {
|
315 | controls: controls,
|
316 | poster: poster,
|
317 | src: src,
|
318 | ref: this.videoPlayer
|
319 | })), (!_blockEditor.RichText.isEmpty(caption) || isSelected) && (0, _element.createElement)(_blockEditor.RichText, {
|
320 | tagName: "figcaption",
|
321 | placeholder: (0, _i18n.__)('Write caption…'),
|
322 | value: caption,
|
323 | onChange: function onChange(value) {
|
324 | return setAttributes({
|
325 | caption: value
|
326 | });
|
327 | },
|
328 | inlineToolbar: true
|
329 | })));
|
330 |
|
331 | }
|
332 | }]);
|
333 | return VideoEdit;
|
334 | }(_element.Component);
|
335 |
|
336 | var _default = (0, _components.withNotices)(VideoEdit);
|
337 |
|
338 | exports.default = _default;
|
339 |
|
\ | No newline at end of file |