Completed
Push — renovate/debug-4.x ( e10916...91e0c8 )
by
unknown
86:28 queued 77:02
created

story.php ➔ render_video()   C

Complexity

Conditions 16
Paths 35

Size

Total Lines 50

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 16
nc 35
nop 1
dl 0
loc 50
rs 5.5666
c 0
b 0
f 0

How to fix   Complexity   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

1
<?php
2
/**
3
 * Story Block.
4
 *
5
 * @since 8.6.1
6
 *
7
 * @package Jetpack
8
 */
9
10
namespace Automattic\Jetpack\Extensions\Story;
11
12
use Automattic\Jetpack\Blocks;
13
use Jetpack_Gutenberg;
14
15
const FEATURE_NAME = 'story';
16
const BLOCK_NAME   = 'jetpack/' . FEATURE_NAME;
17
18
const EMBED_SIZE        = array( 180, 320 );
19
const CROP_UP_TO        = 0.2;
20
const MAX_BULLETS       = 7;
21
const IMAGE_BREAKPOINTS = '(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw'; // 120vw to match the 20% CROP_UP_TO ratio
22
23
/**
24
 * Registers the block for use in Gutenberg
25
 * This is done via an action so that we can disable
26
 * registration if we need to.
27
 */
28
function register_block() {
29
	Blocks::jetpack_register_block(
30
		BLOCK_NAME,
31
		array( 'render_callback' => __NAMESPACE__ . '\render_block' )
32
	);
33
}
34
add_action( 'init', __NAMESPACE__ . '\register_block' );
35
36
/**
37
 * Add missing `width`, `height`, `srcset` and `sizes` properties to images of the mediaFiles block attributes
38
 *
39
 * @param array $media_files  List of media, each as an array containing the media attributes.
40
 *
41
 * @return array $media_files
42
 */
43
function with_width_height_srcset_and_sizes( $media_files ) {
44
	return array_map(
45
		function ( $media_file ) {
46
			if ( ! isset( $media_file['id'] ) || ! empty( $media_file['srcset'] ) ) {
47
				return $media_file;
48
			}
49
			$attachment_id = $media_file['id'];
50
			if ( 'image' === $media_file['type'] ) {
51
				$image = wp_get_attachment_image_src( $attachment_id, EMBED_SIZE, false );
52
				if ( ! $image ) {
53
					return $media_file;
54
				}
55
				list( $src, $width, $height ) = $image;
56
				$image_meta                   = wp_get_attachment_metadata( $attachment_id );
57
				if ( ! is_array( $image_meta ) ) {
58
					return $media_file;
59
				}
60
				$size_array = array( absint( $width ), absint( $height ) );
61
				return array_merge(
62
					$media_file,
63
					array(
64
						'width'   => absint( $width ),
65
						'height'  => absint( $height ),
66
						'srcset'  => wp_calculate_image_srcset( $size_array, $src, $image_meta, $attachment_id ),
67
						'sizes'   => IMAGE_BREAKPOINTS,
68
						'title'   => get_the_title( $attachment_id ),
69
						'alt'     => get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ),
70
						'caption' => wp_get_attachment_caption( $attachment_id ),
71
					)
72
				);
73
			} else {
74
				$video_meta = wp_get_attachment_metadata( $attachment_id );
75
				if ( ! isset( $video_meta['width'] ) || ! isset( $video_meta['width'] ) ) {
76
					return $media_file;
77
				}
78
				$url         = ! empty( $video_meta['original']['url'] ) ? $video_meta['original']['url'] : $media_file['url'];
79
				$description = ! empty( $video_meta['videopress']['description'] ) ? $video_meta['videopress']['description'] : $media_file['alt'];
80
				return array_merge(
81
					$media_file,
82
					array(
83
						'width'   => absint( $video_meta['width'] ),
84
						'height'  => absint( $video_meta['height'] ),
85
						'alt'     => $description,
86
						'url'     => $url,
87
						'title'   => get_the_title( $attachment_id ),
88
						'caption' => wp_get_attachment_caption( $attachment_id ),
89
					)
90
				);
91
			}
92
		},
93
		$media_files
94
	);
95
}
96
97
/**
98
 * Render an image inside a slide
99
 *
100
 * @param array $media  Image information.
101
 *
102
 * @return string
103
 */
104
function render_image( $media ) {
105
	if ( empty( $media['id'] ) || empty( $media['url'] ) ) {
106
		return __( 'Error retrieving media', 'jetpack' );
107
	}
108
	$image      = wp_get_attachment_image_src( $media['id'], 'full', false );
109
	$crop_class = '';
110
	if ( $image ) {
111
		list( , $width, $height ) = $image;
112
		$crop_class               = get_image_crop_class( $width, $height );
113
	}
114
	// need to specify the size of the embed so it picks an image that is large enough for the `src` attribute
115
	// `sizes` is optimized for 1080x1920 (9:16) images
116
	// Note that the Story block does not have thumbnail support, it will load the right
117
	// image based on the viewport size only.
118
	return wp_get_attachment_image(
119
		$media['id'],
120
		EMBED_SIZE,
121
		false,
122
		array(
123
			'class' => sprintf( 'wp-story-image wp-image-%d %s', $media['id'], $crop_class ),
124
			'sizes' => IMAGE_BREAKPOINTS,
125
			'title' => get_the_title( $media['id'] ),
126
		)
127
	);
128
}
129
130
/**
131
 * Return the css crop class if image width and height requires it
132
 *
133
 * @param array $width  Image width.
134
 * @param array $height  Image height.
135
 *
136
 * @return string The CSS class which will display a cropped image
137
 */
138
function get_image_crop_class( $width, $height ) {
139
	$crop_class          = '';
140
	$media_aspect_ratio  = $width / $height;
141
	$target_aspect_ratio = EMBED_SIZE[0] / EMBED_SIZE[1];
142
	if ( $media_aspect_ratio >= $target_aspect_ratio ) {
143
		// image wider than canvas.
144
		$media_too_wide_to_crop = $media_aspect_ratio > $target_aspect_ratio / ( 1 - CROP_UP_TO );
145
		if ( ! $media_too_wide_to_crop ) {
146
			$crop_class = 'wp-story-crop-wide';
147
		}
148
	} else {
149
		// image narrower than canvas.
150
		$media_too_narrow_to_crop = $media_aspect_ratio < $target_aspect_ratio * ( 1 - CROP_UP_TO );
151
		if ( ! $media_too_narrow_to_crop ) {
152
			$crop_class = 'wp-story-crop-narrow';
153
		}
154
	}
155
	return $crop_class;
156
}
157
158
/**
159
 * Render a video inside a slide
160
 *
161
 * @param array $media  Video information.
162
 *
163
 * @return string
164
 */
165
function render_video( $media ) {
166
	if ( empty( $media['id'] ) || empty( $media['mime'] ) || empty( $media['url'] ) ) {
167
		return __( 'Error retrieving media', 'jetpack' );
168
	}
169
170
	$metadata = wp_get_attachment_metadata( $media['id'] );
171
172
	if ( ! empty( $metadata ) && ! empty( $metadata['videopress'] ) ) {
173
		// Use poster image for VideoPress videos.
174
		$poster_url  = $metadata['videopress']['poster'];
175
		$description = ! empty( $metadata['videopress']['description'] ) ? $metadata['videopress']['description'] : '';
176
		$meta_width  = ! empty( $metadata['videopress']['width'] ) ? $metadata['videopress']['width'] : '';
177
		$meta_height = ! empty( $metadata['videopress']['height'] ) ? $metadata['videopress']['height'] : '';
178
	} elseif ( ! empty( $metadata['thumb'] ) ) {
179
		// On WordPress.com, VideoPress videos have a 'thumb' property with the
180
		// poster image filename instead.
181
		$video_url   = wp_get_attachment_url( $media['id'] );
182
		$poster_url  = str_replace( wp_basename( $video_url ), $metadata['thumb'], $video_url );
183
		$description = ! empty( $media['alt'] ) ? $media['alt'] : '';
184
		$meta_width  = ! empty( $metadata['width'] ) ? $metadata['width'] : '';
185
		$meta_height = ! empty( $metadata['height'] ) ? $metadata['height'] : '';
186
	}
187
188
	if ( ! empty( $poster_url ) ) {
189
		return sprintf(
190
			'<img title="%1$s" alt="%2$s" class="%3$s" src="%4$s"%5$s%6$s>',
191
			esc_attr( get_the_title( $media['id'] ) ),
192
			esc_attr( $description ),
0 ignored issues
show
Bug introduced by
The variable $description does not seem to be defined for all execution paths leading up to this point.

If you define a variable conditionally, it can happen that it is not defined for all execution paths.

Let’s take a look at an example:

function myFunction($a) {
    switch ($a) {
        case 'foo':
            $x = 1;
            break;

        case 'bar':
            $x = 2;
            break;
    }

    // $x is potentially undefined here.
    echo $x;
}

In the above example, the variable $x is defined if you pass “foo” or “bar” as argument for $a. However, since the switch statement has no default case statement, if you pass any other value, the variable $x would be undefined.

Available Fixes

  1. Check for existence of the variable explicitly:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        if (isset($x)) { // Make sure it's always set.
            echo $x;
        }
    }
    
  2. Define a default value for the variable:

    function myFunction($a) {
        $x = ''; // Set a default which gets overridden for certain paths.
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        echo $x;
    }
    
  3. Add a value for the missing path:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
    
            // We add support for the missing case.
            default:
                $x = '';
                break;
        }
    
        echo $x;
    }
    
Loading history...
193
			'wp-block-jetpack-story_image wp-story-image ' .
194
			get_image_crop_class( $meta_width, $meta_height ),
0 ignored issues
show
Bug introduced by
The variable $meta_width does not seem to be defined for all execution paths leading up to this point.

If you define a variable conditionally, it can happen that it is not defined for all execution paths.

Let’s take a look at an example:

function myFunction($a) {
    switch ($a) {
        case 'foo':
            $x = 1;
            break;

        case 'bar':
            $x = 2;
            break;
    }

    // $x is potentially undefined here.
    echo $x;
}

In the above example, the variable $x is defined if you pass “foo” or “bar” as argument for $a. However, since the switch statement has no default case statement, if you pass any other value, the variable $x would be undefined.

Available Fixes

  1. Check for existence of the variable explicitly:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        if (isset($x)) { // Make sure it's always set.
            echo $x;
        }
    }
    
  2. Define a default value for the variable:

    function myFunction($a) {
        $x = ''; // Set a default which gets overridden for certain paths.
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        echo $x;
    }
    
  3. Add a value for the missing path:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
    
            // We add support for the missing case.
            default:
                $x = '';
                break;
        }
    
        echo $x;
    }
    
Loading history...
Bug introduced by
The variable $meta_height does not seem to be defined for all execution paths leading up to this point.

If you define a variable conditionally, it can happen that it is not defined for all execution paths.

Let’s take a look at an example:

function myFunction($a) {
    switch ($a) {
        case 'foo':
            $x = 1;
            break;

        case 'bar':
            $x = 2;
            break;
    }

    // $x is potentially undefined here.
    echo $x;
}

In the above example, the variable $x is defined if you pass “foo” or “bar” as argument for $a. However, since the switch statement has no default case statement, if you pass any other value, the variable $x would be undefined.

Available Fixes

  1. Check for existence of the variable explicitly:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        if (isset($x)) { // Make sure it's always set.
            echo $x;
        }
    }
    
  2. Define a default value for the variable:

    function myFunction($a) {
        $x = ''; // Set a default which gets overridden for certain paths.
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
        }
    
        echo $x;
    }
    
  3. Add a value for the missing path:

    function myFunction($a) {
        switch ($a) {
            case 'foo':
                $x = 1;
                break;
    
            case 'bar':
                $x = 2;
                break;
    
            // We add support for the missing case.
            default:
                $x = '';
                break;
        }
    
        echo $x;
    }
    
Loading history...
195
			esc_attr( $poster_url ),
196
			! empty( $meta_width ) ? ' width="' . esc_attr( $meta_width ) . '"' : '',
197
			! empty( $meta_height ) ? ' height="' . esc_attr( $meta_height ) . '"' : ''
198
		);
199
	}
200
201
	return sprintf(
202
		'<video
203
			title="%1$s"
204
			type="%2$s"
205
			class="wp-story-video intrinsic-ignore wp-video-%3$s"
206
			data-id="%3$s"
207
			src="%4$s">
208
		</video>',
209
		esc_attr( get_the_title( $media['id'] ) ),
210
		esc_attr( $media['mime'] ),
211
		$media['id'],
212
		esc_attr( $media['url'] )
213
	);
214
}
215
216
/**
217
 * Render a slide
218
 *
219
 * @param array $media  Media information.
220
 * @param array $index  Index of the slide, first slide will be displayed by default, others hidden.
221
 *
222
 * @return string
223
 */
224
function render_slide( $media, $index = 0 ) {
225
	$media_template = '';
226
	$media_type     = ! empty( $media['type'] ) ? $media['type'] : null;
227
	if ( ! $media_type ) {
228
		return '';
229
	}
230
	switch ( $media_type ) {
231
		case 'image':
232
			$media_template = render_image( $media, $index );
233
			break;
234
		case 'video':
235
			$media_template = render_video( $media, $index );
236
			break;
237
		case 'file':
238
			// VideoPress videos can sometimes have type 'file', and mime 'video/videopress' or 'video/mp4'.
239
			if ( 'video' === substr( $media['mime'], 0, 5 ) ) {
240
				$media_template = render_video( $media, $index );
241
			}
242
			break;
243
	}
244
	return sprintf(
245
		'<div class="wp-story-slide" style="display: %s;">
246
			<figure>%s</figure>
247
		</div>',
248
		0 === $index ? 'block' : 'none',
249
		$media_template
250
	);
251
}
252
253
/**
254
 * Render the top right icon on top of the story embed
255
 *
256
 * @param array $settings The block settings.
257
 *
258
 * @return string
259
 */
260
function render_top_right_icon( $settings ) {
261
	$show_slide_count = isset( $settings['showSlideCount'] ) ? $settings['showSlideCount'] : false;
262
	$slide_count      = isset( $settings['slides'] ) ? count( $settings['slides'] ) : 0;
263
	if ( $show_slide_count ) {
264
		// Render the story block icon along with the slide count.
265
		return sprintf(
266
			'<div class="wp-story-embed-icon">
267
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false">
268
					<path d="M0 0h24v24H0z" fill="none"></path>
269
					<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3H14V17H6L6 3ZM4 3C4 1.89543 4.89543 1 6 1H14C15.1046 1 16 1.89543 16 3V17C16 18.1046 15.1046 19 14 19H6C4.89543 19 4 18.1046 4 17V3ZM18 5C19.1046 5 20 5.89543 20 7V21C20 22.1046 19.1046 23 18 23H10C8.89543 23 8 22.1046 8 21H18V5Z"></path>
270
				</svg>
271
				<span>%d</span>
272
			</div>',
273
			$slide_count
274
		);
275
	} else {
276
		// Render the Fullscreen Gridicon.
277
		return (
278
			'<div class="wp-story-embed-icon-expand">
279
				<svg class="gridicon gridicons-fullscreen" role="img" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
280
					<g>
281
						<path d="M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z"></path>
282
					</g>
283
				</svg>
284
			</div>'
285
		);
286
	}
287
}
288
289
/**
290
 * Render a pagination bullet
291
 *
292
 * @param array $slide_index The slide index it corresponds to.
293
 * @param array $class_name Optional css class name(s) to customize the bullet element.
294
 *
295
 * @return string
296
 */
297
function render_pagination_bullet( $slide_index, $class_name = '' ) {
298
	return sprintf(
299
		'<a href="#" class="wp-story-pagination-bullet %s" aria-label="%s">
300
			<div class="wp-story-pagination-bullet-bar"></div>
301
		</a>',
302
		esc_attr( $class_name ),
303
		/* translators: %d is the slide number (1, 2, 3...) */
304
		sprintf( __( 'Go to slide %d', 'jetpack' ), $slide_index )
305
	);
306
}
307
308
/**
309
 * Render pagination on top of the story embed
310
 *
311
 * @param array $settings The block settings.
312
 *
313
 * @return string
314
 */
315
function render_pagination( $settings ) {
316
	$show_slide_count = isset( $settings['showSlideCount'] ) ? $settings['showSlideCount'] : false;
317
	if ( $show_slide_count ) {
318
		return '';
319
	}
320
	$slide_count     = isset( $settings['slides'] ) ? count( $settings['slides'] ) : 0;
321
	$bullet_count    = min( $slide_count, MAX_BULLETS );
322
	$bullet_ellipsis = $slide_count > $bullet_count
323
		? render_pagination_bullet( $bullet_count + 1, 'wp-story-pagination-ellipsis' )
324
		: '';
325
	return sprintf(
326
		'<div class="wp-story-pagination wp-story-pagination-bullets">
327
			%s
328
		</div>',
329
		join( "\n", array_map( __NAMESPACE__ . '\render_pagination_bullet', range( 1, $bullet_count ) ) ) . $bullet_ellipsis
330
	);
331
}
332
333
/**
334
 * Render story block
335
 *
336
 * @param array $attributes  Block attributes.
337
 *
338
 * @return string
339
 */
340
function render_block( $attributes ) {
341
	Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME );
342
343
	$media_files              = isset( $attributes['mediaFiles'] ) ? $attributes['mediaFiles'] : array();
344
	$settings_from_attributes = isset( $attributes['settings'] ) ? $attributes['settings'] : array();
345
346
	$settings = array_merge(
347
		$settings_from_attributes,
348
		array(
349
			'slides' => with_width_height_srcset_and_sizes( $media_files ),
350
		)
351
	);
352
353
	return sprintf(
354
		'<div class="%1$s" aria-labelledby="%2$s" data-settings="%3$s">
355
			<div style="display: contents;">
356
				<div class="wp-story-container">
357
					<div class="wp-story-meta">
358
						<div class="wp-story-icon">
359
							<img alt="%4$s" src="%5$s" width="32" height=32>
360
						</div>
361
						<div>
362
							<div class="wp-story-title">
363
								%6$s
364
							</div>
365
						</div>
366
						<a class="wp-story-exit-fullscreen jetpack-mdc-icon-button">
367
							<i class="jetpack-material-icons close md-24"></i>
368
						</a>
369
					</div>
370
					<div class="wp-story-wrapper">
371
						%7$s
372
					</div>
373
					<a class="wp-story-overlay" href="%8$s" title="%9$s">
374
						%10$s
375
					</a>
376
					%11$s
377
				</div>
378
			</div>
379
		</div>',
380
		esc_attr( Blocks::classes( FEATURE_NAME, $attributes, array( 'wp-story', 'aligncenter' ) ) ),
381
		esc_attr( 'wp-story-' . get_the_ID() ),
382
		filter_var( wp_json_encode( $settings ), FILTER_SANITIZE_SPECIAL_CHARS ),
383
		__( 'Site icon', 'jetpack' ),
384
		esc_attr( get_site_icon_url( 40, includes_url( 'images/w-logo-blue.png' ) ) ),
385
		esc_html( get_the_title() ),
386
		! empty( $media_files[0] ) ? render_slide( $media_files[0] ) : '',
387
		get_permalink() . '?wp-story-load-in-fullscreen=true&amp;wp-story-play-on-load=true',
388
		__( 'Play story in new tab', 'jetpack' ),
389
		render_top_right_icon( $settings ),
390
		render_pagination( $settings )
391
	);
392
}
393