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