Changeset 27478

Timestamp:

03/09/2014 05:24:10 AM (11 years ago)

Author:

wonderboymusic

Message:

Audio/Video shortcodes in the media modal:

• Make a generic model, wp.media.model.PostMedia, which replaces wp.media.model.PostAudio and wp.media.model.PostVideo
• Make a generic library, wp.media.controller.MediaLibrary, which replaces wp.media.controller.ReplaceVideo and wp.media.controller.ReplaceAudio
• wp.media.controller.MediaLibrary is used to create new states that want to load a library filtered by type, making it incredibly simple to add states to frames. See wp.media.view.MediaFrame.VideoDetails and wp.media.view.MediaFrame.AudioDetails.

UX changes:

• Add the ability to manage HTML5 fallbacks - add additional <source>s or remove specific <source>s
• In the Video Details state, add the ability to select a poster image

See #27016.

Location:

trunk/src/wp-includes

Files:

• js/media-models.js (modified) (1 diff)
• js/media-views.js (modified) (23 diffs)
• js/mediaelement/wp-mediaelement.css (modified) (1 diff)
• js/tinymce/plugins/wpgallery/plugin.js (modified) (2 diffs)
• media-template.php (modified) (8 diffs)
• media.php (modified) (1 diff)

trunk/src/wp-includes/js/media-models.js

@@ -454 +454 @@
 
     /**
-     * wp.media.model.PostAudio
+     * wp.media.model.PostMedia
      *
      * @constructor
      * @augments Backbone.Model
      **/
-    media.model.PostAudio = Backbone.Model.extend({
+    media.model.PostMedia = Backbone.Model.extend({
         initialize: function() {
             this.attachment = false;
         },
 
+        setSource: function ( attachment ) {
+            this.attachment = attachment;
+            this.extension = attachment.get('filename' ).split('.').pop();
+
+            if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
+                this.set( this.extension, this.attachment.get( 'url' ) );
+            } else {
+                this.unset( this.extension );
+            }
+        },
+
         changeAttachment: function( attachment ) {
             var self = this;
 
-            this.attachment = attachment;
-            this.extension = attachment.get('filename' ).split('.').pop();
-
-            if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
-                this.set( this.extension, attachment.get( 'url' ) );
-            } else {
-                this.unset( this.extension );
-            }
-
-            _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) {
-                self.unset( ext );
-            } );
-        }
-    });
-
-    /**
-     * wp.media.model.PostVideo
-     *
-     * @constructor
-     * @augments Backbone.Model
-     **/
-    media.model.PostVideo = Backbone.Model.extend({
-        initialize: function() {
-            this.attachment = false;
-        },
-
-        changeAttachment: function( attachment ) {
-            var self = this;
-
-            this.attachment = attachment;
-            this.extension = attachment.get('filename' ).split('.').pop();
-
-            if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
-                this.set( this.extension, attachment.get( 'url' ) );
-            } else {
-                this.unset( this.extension );
-            }
+            this.setSource( attachment );
 
             _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function (ext) {

trunk/src/wp-includes/js/media-views.js

@@ -787 +787 @@
 
         initialize: function( options ) {
-            this.audio = options.audio;
+            this.media = options.media;
             media.controller.State.prototype.initialize.apply( this, arguments );
         }
@@ -813 +813 @@
 
         initialize: function( options ) {
-            this.video = options.video;
+            this.media = options.media;
             media.controller.State.prototype.initialize.apply( this, arguments );
         }
@@ -1184 +1184 @@
 
     /**
-     * wp.media.controller.ReplaceVideo
-     *
-     * Replace a selected single video
+     * wp.media.controller.MediaLibrary
      *
      * @constructor
@@ -1193 +1191 @@
      * @augments Backbone.Model
      */
-    media.controller.ReplaceVideo = media.controller.Library.extend({
+    media.controller.MediaLibrary = media.controller.Library.extend({
         defaults: _.defaults({
-            id:         'replace-video',
             filterable: 'uploaded',
             multiple:   false,
-            toolbar:    'replace',
-            title:      l10n.replaceVideoTitle,
-            priority:   60,
-            syncSelection: false
+            priority:   80,
+            syncSelection: false,
+            displaySettings: true
         }, media.controller.Library.prototype.defaults ),
 
@@ -1207 +1203 @@
             var library, comparator;
 
-            this.video = options.video;
-            // If we haven't been provided a `library`, create a `Selection`.
-            if ( ! this.get('library') ) {
-                this.set( 'library', media.query({ type: 'video' }) );
-            }
+            this.media = options.media;
+            this.set( 'library', media.query({ type: options.type }) );
 
             media.controller.Library.prototype.initialize.apply( this, arguments );
@@ -1245 +1238 @@
         updateSelection: function() {
             var selection = this.get('selection'),
-                attachment = this.video.attachment;
-
-            selection.reset( attachment ? [ attachment ] : [] );
-        }
-    });
-
-    /**
-     * wp.media.controller.ReplaceAudio
-     *
-     * Replace a selected single audio file
-     *
-     * @constructor
-     * @augments wp.media.controller.Library
-     * @augments wp.media.controller.State
-     * @augments Backbone.Model
-     */
-    media.controller.ReplaceAudio = media.controller.Library.extend({
-        defaults: _.defaults({
-            id:         'replace-audio',
-            filterable: 'uploaded',
-            multiple:   false,
-            toolbar:    'replace',
-            title:      l10n.replaceAudioTitle,
-            priority:   60,
-            syncSelection: false
-        }, media.controller.Library.prototype.defaults ),
-
-        initialize: function( options ) {
-            var library, comparator;
-
-            this.audio = options.audio;
-            // If we haven't been provided a `library`, create a `Selection`.
-            if ( ! this.get('library') ) {
-                this.set( 'library', media.query({ type: 'audio' }) );
-            }
-
-            media.controller.Library.prototype.initialize.apply( this, arguments );
-
-            library    = this.get('library');
-            comparator = library.comparator;
-
-            // Overload the library's comparator to push items that are not in
-            // the mirrored query to the front of the aggregate collection.
-            library.comparator = function( a, b ) {
-                var aInQuery = !! this.mirroring.get( a.cid ),
-                    bInQuery = !! this.mirroring.get( b.cid );
-
-                if ( ! aInQuery && bInQuery ) {
-                    return -1;
-                } else if ( aInQuery && ! bInQuery ) {
-                    return 1;
-                } else {
-                    return comparator.apply( this, arguments );
-                }
-            };
-
-            // Add all items in the selection to the library, so any featured
-            // images that are not initially loaded still appear.
-            library.observe( this.get('selection') );
-        },
-
-        activate: function() {
-            this.updateSelection();
-            media.controller.Library.prototype.activate.apply( this, arguments );
-        },
-
-        updateSelection: function() {
-            var selection = this.get('selection'),
-                attachment = this.audio.attachment;
+                attachment;
+
+            attachment = this.media.attachment;
 
             selection.reset( attachment ? [ attachment ] : [] );
@@ -2795 +2722 @@
 
         initialize: function( options ) {
-            this.audio = new media.model.PostAudio( options.metadata );
-            this.options.selection = new media.model.Selection( this.audio.attachment, { multiple: false } );
+            this.media = new media.model.PostMedia( options.metadata );
+            this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
             media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
         },
@@ -2807 +2734 @@
             this.on( 'toolbar:render:audio-details', this.renderAudioDetailsToolbar, this );
             // override the select toolbar
-            this.on( 'toolbar:render:replace', this.renderReplaceAudioToolbar, this );
+            this.on( 'toolbar:render:replace-audio', this.renderReplaceAudioToolbar, this );
+            this.on( 'toolbar:render:add-audio-source', this.renderAddAudioSourceToolbar, this );
         },
 
         createStates: function() {
             this.states.add([
-                new media.controller.AudioDetails({
-                    audio: this.audio,
+                new media.controller.AudioDetails( {
+                    media: this.media,
                     editable: false,
                     menu: 'audio-details'
-                }),
-                new media.controller.ReplaceAudio({
+                } ),
+
+                new media.controller.MediaLibrary( {
+                    type: 'audio',
                     id: 'replace-audio',
-                    library:   media.query( { type: 'audio' } ),
-                    audio: this.audio,
-                    multiple:  false,
-                    title:     l10n.audioReplaceTitle,
-                    menu: 'audio-details',
-                    toolbar: 'replace',
-                    priority:  80,
-                    displaySettings: true
-                })
+                    title: l10n.audioReplaceTitle,
+                    toolbar: 'replace-audio',
+                    media: this.media,
+                    menu: 'audio-details'
+                } ),
+
+
+                new media.controller.MediaLibrary( {
+                    type: 'audio',
+                    id: 'add-audio-source',
+                    title: l10n.audioAddSourceTitle,
+                    toolbar: 'add-audio-source',
+                    media: this.media,
+                    menu: 'audio-details'
+                } )
             ]);
         },
@@ -2834 +2770 @@
             var view = new media.view.AudioDetails({
                 controller: this,
-                model: this.state().audio,
-                attachment: this.state().audio.attachment
+                model: this.state().media,
+                attachment: this.state().media.attachment
             }).render();
 
@@ -2881 +2817 @@
                             controller.close();
 
-                            // not sure if we want to use wp.media.string.image which will create a shortcode or
-                            // perhaps wp.html.string to at least to build the <img />
-                            state.trigger( 'update', controller.audio.toJSON() );
+                            state.trigger( 'update', controller.media.toJSON() );
 
                             // Restore and reset the default state.
@@ -2909 +2843 @@
                                 attachment = selection.single();
 
-                            controller.audio.changeAttachment( attachment, state.display( attachment ) );
+                            controller.media.changeAttachment( attachment, state.display( attachment ) );
 
                             // not sure if we want to use wp.media.string.image which will create a shortcode or
                             // perhaps wp.html.string to at least to build the <img />
-                            state.trigger( 'replace', controller.audio.toJSON() );
+                            state.trigger( 'replace', controller.media.toJSON() );
+
+                            // Restore and reset the default state.
+                            controller.setState( controller.options.state );
+                            controller.reset();
+                        }
+                    }
+                }
+            }) );
+        },
+
+        renderAddAudioSourceToolbar: function() {
+            this.toolbar.set( new media.view.Toolbar({
+                controller: this,
+                items: {
+                    replace: {
+                        style:    'primary',
+                        text:     l10n.audioAddSourceTitle,
+                        priority: 80,
+
+                        click: function() {
+                            var controller = this.controller,
+                                state = controller.state(),
+                                selection = state.get( 'selection' ),
+                                attachment = selection.single();
+
+                            controller.media.setSource( attachment, state.display( attachment ) );
+
+                            state.trigger( 'add-source', controller.media.toJSON() );
 
                             // Restore and reset the default state.
@@ -2950 +2912 @@
 
         initialize: function( options ) {
-            this.video = new media.model.PostVideo( options.metadata );
-            this.options.selection = new media.model.Selection( this.video.attachment, { multiple: false } );
+            this.media = new media.model.PostMedia( options.metadata );
+            this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
             media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
         },
@@ -2962 +2924 @@
             this.on( 'toolbar:render:video-details', this.renderVideoDetailsToolbar, this );
             // override the select toolbar
-            this.on( 'toolbar:render:replace', this.renderReplaceVideoToolbar, this );
+            this.on( 'toolbar:render:replace-video', this.renderReplaceVideoToolbar, this );
+            this.on( 'toolbar:render:add-video-source', this.renderAddVideoSourceToolbar, this );
+            this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
         },
 
@@ -2968 +2932 @@
             this.states.add([
                 new media.controller.VideoDetails({
-                    video: this.video,
+                    media: this.media,
                     editable: false,
                     menu: 'video-details'
                 }),
-                new media.controller.ReplaceVideo({
+
+                new media.controller.MediaLibrary( {
+                    type: 'video',
                     id: 'replace-video',
-                    library:   media.query( { type: 'video' } ),
-                    video: this.video,
-                    multiple:  false,
-                    title:     l10n.videoReplaceTitle,
-                    menu: 'video-details',
-                    toolbar: 'replace',
-                    priority:  80,
-                    displaySettings: true
-                })
+                    title: l10n.videoReplaceTitle,
+                    toolbar: 'replace-video',
+                    media: this.media,
+                    menu: 'video-details'
+                } ),
+
+                new media.controller.MediaLibrary( {
+                    type: 'video',
+                    id: 'add-video-source',
+                    title: l10n.videoAddSourceTitle,
+                    toolbar: 'add-video-source',
+                    media: this.media,
+                    menu: 'video-details'
+                } ),
+
+                new media.controller.MediaLibrary( {
+                    type: 'image',
+                    id: 'select-poster-image',
+                    title: l10n.videoSelectPosterImageTitle,
+                    toolbar: 'select-poster-image',
+                    media: this.media,
+                    menu: 'video-details'
+                } )
             ]);
         },
@@ -2989 +2969 @@
             var view = new media.view.VideoDetails({
                 controller: this,
-                model: this.state().video,
-                attachment: this.state().video.attachment
+                model: this.state().media,
+                attachment: this.state().media.attachment
             }).render();
 
@@ -3038 +3018 @@
                             // not sure if we want to use wp.media.string.image which will create a shortcode or
                             // perhaps wp.html.string to at least to build the <img />
-                            state.trigger( 'update', controller.video.toJSON() );
+                            state.trigger( 'update', controller.media.toJSON() );
 
                             // Restore and reset the default state.
@@ -3064 +3044 @@
                                 attachment = selection.single();
 
-                            controller.video.changeAttachment( attachment, state.display( attachment ) );
-
-                            state.trigger( 'replace', controller.video.toJSON() );
+                            controller.media.changeAttachment( attachment, state.display( attachment ) );
+
+                            state.trigger( 'replace', controller.media.toJSON() );
+
+                            // Restore and reset the default state.
+                            controller.setState( controller.options.state );
+                            controller.reset();
+                        }
+                    }
+                }
+            }) );
+        },
+
+        renderAddVideoSourceToolbar: function() {
+            this.toolbar.set( new media.view.Toolbar({
+                controller: this,
+                items: {
+                    replace: {
+                        style:    'primary',
+                        text:     l10n.videoAddSourceTitle,
+                        priority: 80,
+
+                        click: function() {
+                            var controller = this.controller,
+                                state = controller.state(),
+                                selection = state.get( 'selection' ),
+                                attachment = selection.single();
+
+                            controller.media.setSource( attachment, state.display( attachment ) );
+
+                            state.trigger( 'add-source', controller.media.toJSON() );
+
+                            // Restore and reset the default state.
+                            controller.setState( controller.options.state );
+                            controller.reset();
+                        }
+                    }
+                }
+            }) );
+        },
+
+        renderSelectPosterImageToolbar: function() {
+            this.toolbar.set( new media.view.Toolbar({
+                controller: this,
+                items: {
+                    replace: {
+                        style:    'primary',
+                        text:     l10n.videoSelectPosterImageTitle,
+                        priority: 80,
+
+                        click: function() {
+                            var controller = this.controller,
+                                state = controller.state(),
+                                selection = state.get( 'selection' ),
+                                attachment = selection.single();
+
+                            controller.media.set( 'poster', attachment.get( 'url' ) );
+
+                            state.trigger( 'set-poster-image', controller.media.toJSON() );
 
                             // Restore and reset the default state.
@@ -6416 +6452 @@
     media.view.MediaDetails = media.view.Settings.AttachmentDisplay.extend({
         initialize: function() {
-            _.bindAll(this, 'success', 'close');
-
-            this.listenTo( this.controller, 'close', this.close );
+            _.bindAll(this, 'success', 'unsetPlayer');
+
+            this.listenTo( this.controller, 'close', this.unsetPlayer );
             this.on( 'ready', this.setPlayer );
+            this.on( 'media:setting:remove', this.unsetPlayer );
+            this.on( 'media:setting:remove', this.render );
+            this.on( 'media:setting:remove', this.setPlayer );
+            this.events = _.extend( this.events, {
+                'click .remove-setting' : 'removeSetting'
+            } );
 
             media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
@@ -6455 +6497 @@
         },
 
+        removeSetting : function (e) {
+            var setting = $( e.currentTarget ).parent();
+
+            this.model.unset( setting.find( 'input' ).data( 'setting' ) );
+
+            setting.remove();
+
+            this.trigger( 'media:setting:remove', this );
+        },
+
         setPlayer : function () {
             if ( ! this.player && this.media ) {
@@ -6473 +6525 @@
          *  its container and re-add it to the DOM.
          */
-        remove: function() {
+        removePlayer: function() {
             var t = this.player, featureIndex, feature;
 
@@ -6501 +6553 @@
         },
 
-        close : function() {
+        unsetPlayer : function() {
             if ( this.player ) {
                 if ( _.isUndefined( this.mejs.pluginType ) ) {
                     this.mejs.pause();
                 }
-                this.remove();
+                this.removePlayer();
                 this.player = false;
             }
@@ -6561 +6613 @@
 
         setMedia: function() {
-            var audio = this.$('.wp-audio-shortcode').get(0);
-
-            this.media = this.prepareSrc( audio );
+            var audio = this.$('.wp-audio-shortcode');
+
+            if ( audio.find( 'source' ).length ) {
+                if ( audio.is(':hidden') ) {
+                    audio.show();
+                }
+                this.media = this.prepareSrc( audio.get(0) );
+            } else {
+                audio.hide();
+                this.media = false;
+            }
 
             return this;
@@ -6587 +6647 @@
             var video = this.$('.wp-video-shortcode');
 
-            if ( ! video.hasClass('youtube-video') ) {
-                video = this.prepareSrc( video.get(0) );
+            if ( video.find( 'source' ).length ) {
+                if ( video.is(':hidden') ) {
+                    video.show();
+                }
+
+                if ( ! video.hasClass('youtube-video') ) {
+                    this.media = this.prepareSrc( video.get(0) );
+                } else {
+                    this.media = video.get(0);
+                }
             } else {
-                video = video.get(0);
-            }
-
-            this.media = video;
+                video.hide();
+                this.media = false;
+            }
 
             return this;

trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

@@ -15 +15 @@
 }
 
-.audio-details .wp-audio-shortcode {
+.media-embed-details .wp-audio-shortcode {
     display: inline-block;
     max-width: 400px;
 }
 
-.video-details .embed-video-settings,
-.audio-details .embed-audio-settings {
-    top: 10px;
+.media-embed-details .embed-media-settings {
+    padding-top: 0;
 }
 
-.video-details .embed-video-settings .checkbox-setting,
-.audio-details .embed-audio-settings .checkbox-setting {
+.media-embed-details .instructions {
+    padding: 16px;
+    max-width: 600px;
+}
+
+.media-embed-details .setting a {
+    color: #a00;
+}
+
+.media-embed-details .setting a:hover {
+    color: #f00;
+}
+
+.media-embed-details .embed-media-settings {
+    top: 70px;
+}
+
+.media-embed-details .embed-media-settings .checkbox-setting {
     width: 100px;
     clear: none;

trunk/src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

@@ -98 +98 @@
                 frame.detach();
             } );
-            frame.state( 'video-details' ).on( 'update replace', function ( selection ) {
+            frame.state( 'video-details' ).on( 'update replace add-source select-poster-image', function ( selection ) {
                 var shortcode = wp.media.video.shortcode( selection );
                 editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
@@ -109 +109 @@
                 frame.detach();
             } );
-            frame.state( 'audio-details' ).on( 'update replace', function ( selection ) {
+            frame.state( 'audio-details' ).on( 'update replace add-source', function ( selection ) {
                 var shortcode = wp.media.audio.shortcode( selection );
                 editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );

trunk/src/wp-includes/media-template.php

@@ -664 +664 @@
     <script type="text/html" id="tmpl-audio-details">
         <?php $audio_types = wp_get_audio_extensions(); ?>
-        <div class="media-embed">
+        <div class="media-embed media-embed-details">
+            <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
             <div class="embed-media-settings embed-audio-settings">
                 <audio controls
@@ -690 +691 @@
                     <span>SRC</span>
                     <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
+                    <a class="remove-setting">{{{ wp.media.view.l10n.audioRemoveSource }}}</a>
                 </label>
                 <# } #>
@@ -699 +701 @@
                     <span><?php echo strtoupper( $type ) ?></span>
                     <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
+                    <a class="remove-setting">{{{ wp.media.view.l10n.audioRemoveSource }}}</a>
                 </label>
                 <# } #>
@@ -728 +731 @@
     <script type="text/html" id="tmpl-video-details">
         <?php $video_types = wp_get_video_extensions(); ?>
-        <div class="media-embed">
+        <div class="media-embed media-embed-details">
+            <div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
             <div class="embed-media-settings embed-video-settings">
                 <div class="wp-video-holder">
                 <#
-                var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
+                var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
+                    w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
                     h = ! data.model.height ? 360 : data.model.height;
 
@@ -738 +743 @@
                     h = Math.ceil( ( h * w ) / data.model.width );
                 }
+
                 #>
                 <video controls
-                    class="wp-video-shortcode youtube-video"
+                    class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
                     width="{{ w }}"
                     height="{{ h }}"
@@ -763 +769 @@
                 >
                     <# if ( ! _.isEmpty( data.model.src ) ) {
-                        if ( data.model.src.match(/youtube|youtu\.be/) ) { #>
+                        if ( isYouTube ) { #>
                         <source src="{{ data.model.src }}" type="video/youtube" />
                         <# } else { #>
@@ -780 +786 @@
                     <span>SRC</span>
                     <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
+                    <a class="remove-setting">{{{ wp.media.view.l10n.videoRemoveSource }}}</a>
                 </label>
                 <# } #>
@@ -787 +794 @@
                     <span><?php echo strtoupper( $type ) ?></span>
                     <input type="text" disabled="disabled" data-setting="<?php echo $type ?>" value="{{ data.model.<?php echo $type ?> }}" />
+                    <a class="remove-setting">{{{ wp.media.view.l10n.videoRemoveSource }}}</a>
                 </label>
                 <# } #>
                 <?php endforeach ?>
                 </div>
+                <# if ( ! _.isEmpty( data.model.poster ) ) { #>
                 <label class="setting">
                     <span><?php _e( 'Poster Image' ); ?></span>
-                    <input type="text" data-setting="poster" value="{{ data.model.poster }}" />
-                </label>
+                    <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
+                    <a class="remove-setting">{{{ wp.media.view.l10n.videoRemovePoster }}}</a>
+                </label>
+                <# } #>
                 <div class="setting preload">
                     <span><?php _e( 'Preload' ); ?></span>

trunk/src/wp-includes/media.php

@@ -2444 +2444 @@
         'editImage'             => __( 'Edit Image' ),
 
-        // Edit Image
+        // Edit Audio
         'audioDetailsTitle'     => __( 'Audio Details' ),
         'audioReplaceTitle'     => __( 'Replace Audio' ),
+        'audioAddSourceTitle'   => __( 'Add Audio Source' ),
         'audioDetailsCancel'    => __( 'Cancel Edit' ),
-
-        // Edit Image
+        'audioDetailsText'      => __( '"Replace Audio" will remove all associated source files when you update. ' .
+            '"Add Audio Source" allows you to specify alternate sources for maximum native HTML5 audio playback.' ),
+        'audioRemoveSource'     => __( 'Remove Audio Source' ),
+
+        // Edit Video
         'videoDetailsTitle'     => __( 'Video Details' ),
         'videoReplaceTitle'     => __( 'Replace Video' ),
+        'videoAddSourceTitle'   => __( 'Add Video Source' ),
         'videoDetailsCancel'    => __( 'Cancel Edit' ),
+        'videoDetailsText'      => __( '"Replace Video" will remove all associated source files when you update. ' .
+            '"Add Video Source" allows you to specify alternate sources for maximum native HTML5 video playback.' ),
+        'videoRemoveSource'     => __( 'Remove Video Source' ),
+        'videoSelectPosterImageTitle' => _( 'Select Poster Image' ),
+        'videoRemovePoster'     => __( 'Remove Poster Image' ),
 
         // Playlist