editor-media-view.php — Jetpack – WP Security, Backup, Speed, & Growth 12.8.3

jetpack / modules / videopress / editor-media-view.php

jetpack / modules / videopress Last commit date

editor-media-view.php

232 lines

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