Geen omschrijving

editor-media-view.php 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <?php
  2. use Automattic\Jetpack\Assets;
  3. /**
  4. * WordPress Shortcode Editor View JS Code
  5. */
  6. function videopress_handle_editor_view_js() {
  7. global $content_width;
  8. $current_screen = get_current_screen();
  9. if ( ! isset( $current_screen->id ) || $current_screen->base !== 'post' ) {
  10. return;
  11. }
  12. add_action( 'admin_print_footer_scripts', 'videopress_editor_view_js_templates' );
  13. wp_enqueue_style( 'videopress-editor-ui', plugins_url( 'css/editor.css', __FILE__ ) );
  14. wp_enqueue_script(
  15. 'videopress-editor-view',
  16. Assets::get_file_url_for_environment(
  17. '_inc/build/videopress/js/editor-view.min.js',
  18. 'modules/videopress/js/editor-view.js'
  19. ),
  20. array( 'wp-util', 'jquery' ),
  21. false,
  22. true
  23. );
  24. wp_localize_script(
  25. 'videopress-editor-view',
  26. 'vpEditorView',
  27. array(
  28. 'home_url_host' => wp_parse_url( home_url(), PHP_URL_HOST ),
  29. 'min_content_width' => VIDEOPRESS_MIN_WIDTH,
  30. 'content_width' => $content_width,
  31. 'modal_labels' => array(
  32. 'title' => esc_html__( 'VideoPress Shortcode', 'jetpack' ),
  33. 'guid' => esc_html__( 'Video ID', 'jetpack' ),
  34. 'w' => esc_html__( 'Video Width', 'jetpack' ),
  35. 'w_unit' => esc_html__( 'pixels', 'jetpack' ),
  36. /* Translators: example of usage of this is "Start Video After 10 seconds" */
  37. 'at' => esc_html__( 'Start Video After', 'jetpack' ),
  38. 'at_unit' => esc_html__( 'seconds', 'jetpack' ),
  39. 'hd' => esc_html__( 'High definition on by default', 'jetpack' ),
  40. 'permalink' => esc_html__( 'Link the video title to its URL on VideoPress.com', 'jetpack' ),
  41. 'autoplay' => esc_html__( 'Autoplay video on page load', 'jetpack' ),
  42. 'loop' => esc_html__( 'Loop video playback', 'jetpack' ),
  43. 'freedom' => esc_html__( 'Use only Open Source codecs (may degrade performance)', 'jetpack' ),
  44. 'flashonly' => esc_html__( 'Use legacy Flash Player (not recommended)', 'jetpack' ),
  45. ),
  46. )
  47. );
  48. add_editor_style( plugins_url( 'css/videopress-editor-style.css', __FILE__ ) );
  49. }
  50. add_action( 'admin_notices', 'videopress_handle_editor_view_js' );
  51. /**
  52. * WordPress Editor Views
  53. */
  54. function videopress_editor_view_js_templates() {
  55. /**
  56. * This template uses the following parameters, and displays the video as an iframe:
  57. * - data.guid // The guid of the video.
  58. * - data.width // The width of the iframe.
  59. * - data.height // The height of the iframe.
  60. * - data.urlargs // Arguments serialized into a get string.
  61. *
  62. * In addition, the calling script will need to ensure that the following
  63. * JS file is added to the header of the editor iframe:
  64. * - https://s0.wp.com/wp-content/plugins/video/assets/js/next/videopress-iframe.js
  65. */
  66. ?>
  67. <script type="text/html" id="tmpl-videopress_iframe_vnext">
  68. <div class="tmpl-videopress_iframe_next" style="max-height:{{ data.height }}px;">
  69. <div class="videopress-editor-wrapper" style="padding-top:{{ data.ratio }}%;">
  70. <iframe style="display: block; max-width: 100%; max-height: 100%;" width="{{ data.width }}" height="{{ data.height }}" src="https://videopress.com/embed/{{ data.guid }}?{{ data.urlargs }}" frameborder='0' allowfullscreen></iframe>
  71. </div>
  72. </div>
  73. </script>
  74. <?php
  75. }
  76. /*************************************************\
  77. | This is the chunk that handles overriding core |
  78. | media stuff so VideoPress can display natively. |
  79. \*/
  80. /**
  81. * Media Grid:
  82. * Filter out any videopress video posters that we've downloaded,
  83. * so that they don't seem to display twice.
  84. */
  85. add_filter( 'ajax_query_attachments_args', 'videopress_ajax_query_attachments_args' );
  86. function videopress_ajax_query_attachments_args( $args ) {
  87. $meta_query = array(
  88. array(
  89. 'key' => 'videopress_poster_image',
  90. 'compare' => 'NOT EXISTS',
  91. ),
  92. );
  93. // If there was already a meta query, let's AND it via
  94. // nesting it with our new one. No need to specify the
  95. // relation, as it defaults to AND.
  96. if ( ! empty( $args['meta_query'] ) ) {
  97. $meta_query[] = $args['meta_query'];
  98. }
  99. $args['meta_query'] = $meta_query;
  100. return $args;
  101. }
  102. /**
  103. * Media List:
  104. * Do the same as ^^ but for the list view.
  105. */
  106. add_action( 'pre_get_posts', 'videopress_media_list_table_query' );
  107. function videopress_media_list_table_query( $query ) {
  108. if (
  109. ! function_exists( 'get_current_screen' )
  110. || is_null( get_current_screen() )
  111. ) {
  112. return;
  113. }
  114. if ( is_admin() && $query->is_main_query() && ( 'upload' === get_current_screen()->id ) ) {
  115. $meta_query = array(
  116. array(
  117. 'key' => 'videopress_poster_image',
  118. 'compare' => 'NOT EXISTS',
  119. ),
  120. );
  121. if ( $old_meta_query = $query->get( 'meta_query' ) ) {
  122. $meta_query[] = $old_meta_query;
  123. }
  124. $query->set( 'meta_query', $meta_query );
  125. }
  126. }
  127. /**
  128. * Make sure that any Video that has a VideoPress GUID passes that data back.
  129. */
  130. add_filter( 'wp_prepare_attachment_for_js', 'videopress_prepare_attachment_for_js' );
  131. function videopress_prepare_attachment_for_js( $post ) {
  132. if ( 'video' === $post['type'] ) {
  133. $guid = get_post_meta( $post['id'], 'videopress_guid' );
  134. if ( $guid ) {
  135. $post['videopress_guid'] = $guid;
  136. }
  137. }
  138. return $post;
  139. }
  140. /**
  141. * Wherever the Media Modal is deployed, also deploy our overrides.
  142. */
  143. add_action( 'wp_enqueue_media', 'add_videopress_media_overrides' );
  144. function add_videopress_media_overrides() {
  145. add_action( 'admin_print_footer_scripts', 'videopress_override_media_templates', 11 );
  146. }
  147. /**
  148. * Our video overrides!
  149. *
  150. * We have a template for the iframe to get injected.
  151. */
  152. function videopress_override_media_templates() {
  153. ?>
  154. <script type="text/html" id="tmpl-videopress_iframe_vnext">
  155. <iframe style="display: block; max-width: 100%; max-height: 100%;" width="{{ data.width }}" height="{{ data.height }}" src="https://videopress.com/embed/{{ data.guid }}?{{ data.urlargs }}" frameborder='0' allowfullscreen></iframe>
  156. </script>
  157. <script>
  158. (function( media ){
  159. // This handles the media library modal attachment details display.
  160. if ( 'undefined' !== typeof media.view.Attachment.Details.TwoColumn ) {
  161. var TwoColumn = media.view.Attachment.Details.TwoColumn,
  162. old_render = TwoColumn.prototype.render,
  163. vp_template = wp.template('videopress_iframe_vnext');
  164. TwoColumn.prototype.render = function() {
  165. // Have the original renderer run first.
  166. old_render.apply( this, arguments );
  167. // Now our stuff!
  168. if ( 'video' === this.model.get('type') ) {
  169. if ( this.model.get('videopress_guid') ) {
  170. this.$('.attachment-media-view .thumbnail-video').html( vp_template( {
  171. guid : this.model.get('videopress_guid'),
  172. width : this.model.get('width') > 0 ? this.model.get('width') : '100%',
  173. height : this.model.get('height') > 0 ? this.model.get('height') : '100%'
  174. }));
  175. }
  176. }
  177. };
  178. } else { /* console.log( 'media.view.Attachment.Details.TwoColumn undefined' ); */ }
  179. // This handles the recreating of the core video shortcode when editing the mce embed.
  180. if ( 'undefined' !== typeof media.video ) {
  181. media.video.defaults.videopress_guid = '';
  182. // For some reason, even though we're not currently changing anything, the following proxy
  183. // function is necessary to include the above default `videopress_guid` param. ¯\_(ツ)_/¯
  184. var old_video_shortcode = media.video.shortcode;
  185. media.video.shortcode = function( model ) {
  186. // model.videopress_guid = 'FOOBAR';
  187. return old_video_shortcode( model );
  188. };
  189. } else { /* console.log( 'media.video undefined' ); */ }
  190. })( wp.media );
  191. </script>
  192. <?php
  193. }
  194. /**
  195. * Properly inject VideoPress data into Core shortcodes, and
  196. * generate videopress shortcodes for purely remote videos.
  197. */
  198. add_filter( 'media_send_to_editor', 'videopress_media_send_to_editor', 10, 3 );
  199. function videopress_media_send_to_editor( $html, $id, $attachment ) {
  200. $videopress_guid = get_post_meta( $id, 'videopress_guid', true );
  201. if ( $videopress_guid && videopress_is_valid_guid( $videopress_guid ) ) {
  202. if ( '[video ' === substr( $html, 0, 7 ) ) {
  203. $html = sprintf( '[videopress %1$s]', esc_attr( $videopress_guid ) );
  204. } elseif ( '<a href=' === substr( $html, 0, 8 ) ) {
  205. // We got here because `wp_attachment_is()` returned false for
  206. // video, because there isn't a local copy of the file.
  207. $html = sprintf( '[videopress %1$s]', esc_attr( $videopress_guid ) );
  208. }
  209. } elseif ( videopress_is_attachment_without_guid( $id ) ) {
  210. $html = sprintf( '[videopress postid=%d]', $id );
  211. }
  212. return $html;
  213. }