[Summary view] [Print] [Text view]

   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 );