vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-06 15:47:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Video editing in the media modal:

Browse Source 
* Add a state: `Add Subititles`
* Add `text/vtt` to the list of allowed mime-types, files end in `.vtt`. `.srt` files are served as `text/plain`.
* The content body of a video shortcode should be used for adding `<track>` elements only. This happens dynamically in the modal. If added by hand, they can still be parsed and managed.

See #27016.



git-svn-id: https://develop.svn.wordpress.org/trunk@27481 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor
2014-03-09 10:31:36 +00:00
parent 29e2d9f66a
commit d39e5ecafd
7 changed files with 133 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/js/media-editor.js
+17 -9
View File
@@ -609,26 +609,33 @@
poster : '',
loop : false,
autoplay : false,
preload : 'metadata'
preload : 'metadata',
content : ''
},
edit : function (data) {
var frame, shortcode = wp.shortcode.next( 'video', data ).shortcode;
var frame,
defaults = this.defaults,
shortcode = wp.shortcode.next( 'video', data ).shortcode,
attrs;
attrs = shortcode.attrs.named;
attrs.content = shortcode.content;
frame = wp.media({
frame: 'video',
state: 'video-details',
metadata: _.defaults(
shortcode.attrs.named,
wp.media.video.defaults
)
metadata: _.defaults( attrs, defaults )
});
return frame;
},
shortcode : function (shortcode) {
var self = this;
_.each( wp.media.video.defaults, function( value, key ) {
var self = this, content = shortcode.content;
delete shortcode.content;
_.each( this.defaults, function( value, key ) {
shortcode[ key ] = self.coerce( shortcode, key );
if ( value === shortcode[ key ] ) {
@@ -638,7 +645,8 @@
return wp.shortcode.string({
tag: 'video',
attrs: shortcode
attrs: shortcode,
content: content
});
}
}, wp.media.mixin);
src/wp-includes/js/media-views.js
+69 -37
View File
@@ -1193,41 +1193,16 @@
media.controller.MediaLibrary = media.controller.Library.extend({
defaults: _.defaults({
filterable: 'uploaded',
multiple: false,
priority: 80,
syncSelection: false,
displaySettings: true
displaySettings: false
}, media.controller.Library.prototype.defaults ),
initialize: function( options ) {
var library, comparator;
this.media = options.media;
this.set( 'library', media.query({ type: options.type }) );
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') );
}
});
@@ -2952,6 +2927,7 @@
this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this );
this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this );
this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
this.on( 'toolbar:render:add-track', this.renderAddTrackToolbar, this );
},
createStates: function() {
@@ -2987,6 +2963,15 @@
toolbar: 'select-poster-image',
media: this.media,
menu: 'video-details'
} ),
new media.controller.MediaLibrary( {
type: 'text',
id: 'add-track',
title: l10n.videoAddTrackTitle,
toolbar: 'add-track',
media: this.media,
menu: 'video-details'
} )
]);
},
@@ -3010,6 +2995,43 @@
state.trigger( 'set-poster-image', controller.media.toJSON() );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
}
}
}
}) );
},
renderAddTrackToolbar: function() {
this.toolbar.set( new media.view.Toolbar({
controller: this,
items: {
replace: {
style: 'primary',
text: l10n.videoAddTrackTitle,
priority: 80,
click: function() {
var controller = this.controller,
state = controller.state(),
selection = state.get( 'selection' ),
attachment = selection.single(),
content = controller.media.get( 'content' );
if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
content += [
'<track srclang="en" label="English"kind="subtitles" src="',
attachment.get( 'url' ),
'" />'
].join('');
controller.media.set( 'content', content );
}
state.trigger( 'add-track', controller.media.toJSON() );
// Restore and reset the default state.
controller.setState( controller.options.state );
controller.reset();
@@ -6366,21 +6388,17 @@
this.on( 'media:setting:remove', this.render );
this.on( 'media:setting:remove', this.setPlayer );
this.events = _.extend( this.events, {
'click .remove-setting' : 'removeSetting'
'click .remove-setting' : 'removeSetting',
'change .content-track' : 'setTracks',
'click .remove-track' : 'setTracks'
} );
media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
},
prepare: function() {
var attachment = false;
if ( this.model.attachment ) {
attachment = this.model.attachment.toJSON();
}
return _.defaults({
model: this.model.toJSON(),
attachment: attachment
model: this.model.toJSON()
}, this.options );
},
@@ -6404,12 +6422,26 @@
},
removeSetting : function (e) {
var setting = $( e.currentTarget ).parent();
var wrap = $( e.currentTarget ).parent(), setting;
this.model.unset( setting.find( 'input' ).data( 'setting' ) );
setting = wrap.find( 'input' ).data( 'setting' );
setting.remove();
if ( setting ) {
this.model.unset( setting );
this.trigger( 'media:setting:remove', this );
}
wrap.remove();
},
setTracks : function () {
var tracks = '';
_.each( this.$('.content-track'), function (track) {
tracks += $( track ).val();
} );
this.model.set( 'content', tracks );
this.trigger( 'media:setting:remove', this );
},
src/wp-includes/js/mediaelement/wp-mediaelement.css
+8
View File
@@ -19,6 +19,11 @@
max-width: 400px;
}
.media-embed-details .embed-media-settings .setting span {
max-width: 400px;
width: auto;
}
.media-embed-details .embed-media-settings {
padding-top: 0;
}
@@ -28,8 +33,11 @@
max-width: 600px;
}
.media-embed-details .setting p,
.media-embed-details .setting a {
color: #a00;
font-size: 10px;
text-transform: uppercase;
}
.media-embed-details .setting a:hover {
src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js
+8 -5
View File
@@ -97,11 +97,14 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
frame.on( 'close', function () {
frame.detach();
} );
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 ) );
frame.detach();
} );
frame.state( 'video-details' ).on(
'update replace add-source select-poster-image add-track',
function ( selection ) {
var shortcode = wp.media.video.shortcode( selection );
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
frame.detach();
}
);
frame.open();
} else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
frame = wp.media.audio.edit( data );