Diff: STRATO-apps/wordpress_03/app/wp-admin/js/widgets/media-video-widget.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
/**
2
+
* @output wp-admin/js/widgets/media-video-widget.js
3
+
*/
4
+
5
+
/* eslint consistent-this: [ "error", "control" ] */
6
+
(function( component ) {
7
+
'use strict';
8
+
9
+
var VideoWidgetModel, VideoWidgetControl, VideoDetailsMediaFrame;
10
+
11
+
/**
12
+
* Custom video details frame that removes the replace-video state.
13
+
*
14
+
* @class wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame
15
+
* @augments wp.media.view.MediaFrame.VideoDetails
16
+
*
17
+
* @private
18
+
*/
19
+
VideoDetailsMediaFrame = wp.media.view.MediaFrame.VideoDetails.extend(/** @lends wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame.prototype */{
20
+
21
+
/**
22
+
* Create the default states.
23
+
*
24
+
* @return {void}
25
+
*/
26
+
createStates: function createStates() {
27
+
this.states.add([
28
+
new wp.media.controller.VideoDetails({
29
+
media: this.media
30
+
}),
31
+
32
+
new wp.media.controller.MediaLibrary({
33
+
type: 'video',
34
+
id: 'add-video-source',
35
+
title: wp.media.view.l10n.videoAddSourceTitle,
36
+
toolbar: 'add-video-source',
37
+
media: this.media,
38
+
menu: false
39
+
}),
40
+
41
+
new wp.media.controller.MediaLibrary({
42
+
type: 'text',
43
+
id: 'add-track',
44
+
title: wp.media.view.l10n.videoAddTrackTitle,
45
+
toolbar: 'add-track',
46
+
media: this.media,
47
+
menu: 'video-details'
48
+
})
49
+
]);
50
+
}
51
+
});
52
+
53
+
/**
54
+
* Video widget model.
55
+
*
56
+
* See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports.
57
+
*
58
+
* @class wp.mediaWidgets.modelConstructors.media_video
59
+
* @augments wp.mediaWidgets.MediaWidgetModel
60
+
*/
61
+
VideoWidgetModel = component.MediaWidgetModel.extend({});
62
+
63
+
/**
64
+
* Video widget control.
65
+
*
66
+
* See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports.
67
+
*
68
+
* @class wp.mediaWidgets.controlConstructors.media_video
69
+
* @augments wp.mediaWidgets.MediaWidgetControl
70
+
*/
71
+
VideoWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_video.prototype */{
72
+
73
+
/**
74
+
* Show display settings.
75
+
*
76
+
* @type {boolean}
77
+
*/
78
+
showDisplaySettings: false,
79
+
80
+
/**
81
+
* Cache of oembed responses.
82
+
*
83
+
* @type {Object}
84
+
*/
85
+
oembedResponses: {},
86
+
87
+
/**
88
+
* Map model props to media frame props.
89
+
*
90
+
* @param {Object} modelProps - Model props.
91
+
* @return {Object} Media frame props.
92
+
*/
93
+
mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) {
94
+
var control = this, mediaFrameProps;
95
+
mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call( control, modelProps );
96
+
mediaFrameProps.link = 'embed';
97
+
return mediaFrameProps;
98
+
},
99
+
100
+
/**
101
+
* Fetches embed data for external videos.
102
+
*
103
+
* @return {void}
104
+
*/
105
+
fetchEmbed: function fetchEmbed() {
106
+
var control = this, url;
107
+
url = control.model.get( 'url' );
108
+
109
+
// If we already have a local cache of the embed response, return.
110
+
if ( control.oembedResponses[ url ] ) {
111
+
return;
112
+
}
113
+
114
+
// If there is an in-flight embed request, abort it.
115
+
if ( control.fetchEmbedDfd && 'pending' === control.fetchEmbedDfd.state() ) {
116
+
control.fetchEmbedDfd.abort();
117
+
}
118
+
119
+
control.fetchEmbedDfd = wp.apiRequest({
120
+
url: wp.media.view.settings.oEmbedProxyUrl,
121
+
data: {
122
+
url: control.model.get( 'url' ),
123
+
maxwidth: control.model.get( 'width' ),
124
+
maxheight: control.model.get( 'height' ),
125
+
discover: false
126
+
},
127
+
type: 'GET',
128
+
dataType: 'json',
129
+
context: control
130
+
});
131
+
132
+
control.fetchEmbedDfd.done( function( response ) {
133
+
control.oembedResponses[ url ] = response;
134
+
control.renderPreview();
135
+
});
136
+
137
+
control.fetchEmbedDfd.fail( function() {
138
+
control.oembedResponses[ url ] = null;
139
+
});
140
+
},
141
+
142
+
/**
143
+
* Whether a url is a supported external host.
144
+
*
145
+
* @deprecated since 4.9.
146
+
*
147
+
* @return {boolean} Whether url is a supported video host.
148
+
*/
149
+
isHostedVideo: function isHostedVideo() {
150
+
return true;
151
+
},
152
+
153
+
/**
154
+
* Render preview.
155
+
*
156
+
* @return {void}
157
+
*/
158
+
renderPreview: function renderPreview() {
159
+
var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, html = '', isOEmbed = false, mime, error, urlParser, matches;
160
+
attachmentId = control.model.get( 'attachment_id' );
161
+
attachmentUrl = control.model.get( 'url' );
162
+
error = control.model.get( 'error' );
163
+
164
+
if ( ! attachmentId && ! attachmentUrl ) {
165
+
return;
166
+
}
167
+
168
+
// Verify the selected attachment mime is supported.
169
+
mime = control.selectedAttachment.get( 'mime' );
170
+
if ( mime && attachmentId ) {
171
+
if ( ! _.contains( _.values( wp.media.view.settings.embedMimes ), mime ) ) {
172
+
error = 'unsupported_file_type';
173
+
}
174
+
} else if ( ! attachmentId ) {
175
+
urlParser = document.createElement( 'a' );
176
+
urlParser.href = attachmentUrl;
177
+
matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ );
178
+
if ( matches ) {
179
+
if ( ! _.contains( _.keys( wp.media.view.settings.embedMimes ), matches[1] ) ) {
180
+
error = 'unsupported_file_type';
181
+
}
182
+
} else {
183
+
isOEmbed = true;
184
+
}
185
+
}
186
+
187
+
if ( isOEmbed ) {
188
+
control.fetchEmbed();
189
+
if ( control.oembedResponses[ attachmentUrl ] ) {
190
+
poster = control.oembedResponses[ attachmentUrl ].thumbnail_url;
191
+
html = control.oembedResponses[ attachmentUrl ].html.replace( /\swidth="\d+"/, ' width="100%"' ).replace( /\sheight="\d+"/, '' );
192
+
}
193
+
}
194
+
195
+
previewContainer = control.$el.find( '.media-widget-preview' );
196
+
previewTemplate = wp.template( 'wp-media-widget-video-preview' );
197
+
198
+
previewContainer.html( previewTemplate({
199
+
model: {
200
+
attachment_id: attachmentId,
201
+
html: html,
202
+
src: attachmentUrl,
203
+
poster: poster
204
+
},
205
+
is_oembed: isOEmbed,
206
+
error: error
207
+
}));
208
+
wp.mediaelement.initialize();
209
+
},
210
+
211
+
/**
212
+
* Open the media image-edit frame to modify the selected item.
213
+
*
214
+
* @return {void}
215
+
*/
216
+
editMedia: function editMedia() {
217
+
var control = this, mediaFrame, metadata, updateCallback;
218
+
219
+
metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
220
+
221
+
// Set up the media frame.
222
+
mediaFrame = new VideoDetailsMediaFrame({
223
+
frame: 'video',
224
+
state: 'video-details',
225
+
metadata: metadata
226
+
});
227
+
wp.media.frame = mediaFrame;
228
+
mediaFrame.$el.addClass( 'media-widget' );
229
+
230
+
updateCallback = function( mediaFrameProps ) {
231
+
232
+
// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
233
+
control.selectedAttachment.set( mediaFrameProps );
234
+
235
+
control.model.set( _.extend(
236
+
_.omit( control.model.defaults(), 'title' ),
237
+
control.mapMediaToModelProps( mediaFrameProps ),
238
+
{ error: false }
239
+
) );
240
+
};
241
+
242
+
mediaFrame.state( 'video-details' ).on( 'update', updateCallback );
243
+
mediaFrame.state( 'replace-video' ).on( 'replace', updateCallback );
244
+
mediaFrame.on( 'close', function() {
245
+
mediaFrame.detach();
246
+
});
247
+
248
+
mediaFrame.open();
249
+
}
250
+
});
251
+
252
+
// Exports.
253
+
component.controlConstructors.media_video = VideoWidgetControl;
254
+
component.modelConstructors.media_video = VideoWidgetModel;
255
+
256
+
})( wp.mediaWidgets );
257
+