: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
* @output wp-admin/js/widgets/media-video-widget.js
/* eslint consistent-this: [ "error", "control" ] */
var VideoWidgetModel, VideoWidgetControl, VideoDetailsMediaFrame;
* Custom video details frame that removes the replace-video state.
* @class wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame
* @augments wp.media.view.MediaFrame.VideoDetails
VideoDetailsMediaFrame = wp.media.view.MediaFrame.VideoDetails.extend(/** @lends wp.mediaWidgets.controlConstructors~VideoDetailsMediaFrame.prototype */{
* Create the default states.
createStates: function createStates() {
new wp.media.controller.VideoDetails({
new wp.media.controller.MediaLibrary({
title: wp.media.view.l10n.videoAddSourceTitle,
toolbar: 'add-video-source',
new wp.media.controller.MediaLibrary({
title: wp.media.view.l10n.videoAddTrackTitle,
* See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports.
* @class wp.mediaWidgets.modelConstructors.media_video
* @augments wp.mediaWidgets.MediaWidgetModel
VideoWidgetModel = component.MediaWidgetModel.extend({});
* See WP_Widget_Video::enqueue_admin_scripts() for amending prototype from PHP exports.
* @class wp.mediaWidgets.controlConstructors.media_video
* @augments wp.mediaWidgets.MediaWidgetControl
VideoWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_video.prototype */{
showDisplaySettings: false,
* Cache of oembed responses.
* Map model props to media frame props.
* @param {Object} modelProps - Model props.
* @return {Object} Media frame props.
mapModelToMediaFrameProps: function mapModelToMediaFrameProps( modelProps ) {
var control = this, mediaFrameProps;
mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToMediaFrameProps.call( control, modelProps );
mediaFrameProps.link = 'embed';
* Fetches embed data for external videos.
fetchEmbed: function fetchEmbed() {
url = control.model.get( 'url' );
// If we already have a local cache of the embed response, return.
if ( control.oembedResponses[ url ] ) {
// If there is an in-flight embed request, abort it.
if ( control.fetchEmbedDfd && 'pending' === control.fetchEmbedDfd.state() ) {
control.fetchEmbedDfd.abort();
control.fetchEmbedDfd = wp.apiRequest({
url: wp.media.view.settings.oEmbedProxyUrl,
url: control.model.get( 'url' ),
maxwidth: control.model.get( 'width' ),
maxheight: control.model.get( 'height' ),
control.fetchEmbedDfd.done( function( response ) {
control.oembedResponses[ url ] = response;
control.fetchEmbedDfd.fail( function() {
control.oembedResponses[ url ] = null;
* Whether a url is a supported external host.
* @return {boolean} Whether url is a supported video host.
isHostedVideo: function isHostedVideo() {
renderPreview: function renderPreview() {
var control = this, previewContainer, previewTemplate, attachmentId, attachmentUrl, poster, html = '', isOEmbed = false, mime, error, urlParser, matches;
attachmentId = control.model.get( 'attachment_id' );
attachmentUrl = control.model.get( 'url' );
error = control.model.get( 'error' );
if ( ! attachmentId && ! attachmentUrl ) {
// Verify the selected attachment mime is supported.
mime = control.selectedAttachment.get( 'mime' );
if ( mime && attachmentId ) {
if ( ! _.contains( _.values( wp.media.view.settings.embedMimes ), mime ) ) {
error = 'unsupported_file_type';
} else if ( ! attachmentId ) {
urlParser = document.createElement( 'a' );
urlParser.href = attachmentUrl;
matches = urlParser.pathname.toLowerCase().match( /\.(\w+)$/ );
if ( ! _.contains( _.keys( wp.media.view.settings.embedMimes ), matches[1] ) ) {
error = 'unsupported_file_type';
if ( control.oembedResponses[ attachmentUrl ] ) {
poster = control.oembedResponses[ attachmentUrl ].thumbnail_url;
html = control.oembedResponses[ attachmentUrl ].html.replace( /\swidth="\d+"/, ' width="100%"' ).replace( /\sheight="\d+"/, '' );
previewContainer = control.$el.find( '.media-widget-preview' );
previewTemplate = wp.template( 'wp-media-widget-video-preview' );
previewContainer.html( previewTemplate({
attachment_id: attachmentId,
wp.mediaelement.initialize();
* Open the media image-edit frame to modify the selected item.
editMedia: function editMedia() {
var control = this, mediaFrame, metadata, updateCallback;
metadata = control.mapModelToMediaFrameProps( control.model.toJSON() );
// Set up the media frame.
mediaFrame = new VideoDetailsMediaFrame({
wp.media.frame = mediaFrame;
mediaFrame.$el.addClass( 'media-widget' );
updateCallback = function( mediaFrameProps ) {
// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
control.selectedAttachment.set( mediaFrameProps );
control.model.set( _.extend(
_.omit( control.model.defaults(), 'title' ),
control.mapMediaToModelProps( mediaFrameProps ),
mediaFrame.state( 'video-details' ).on( 'update', updateCallback );
mediaFrame.state( 'replace-video' ).on( 'replace', updateCallback );
mediaFrame.on( 'close', function() {
component.controlConstructors.media_video = VideoWidgetControl;
component.modelConstructors.media_video = VideoWidgetModel;