| 1 |
<?php |
| 2 |
/** |
| 3 |
* Server-side customizations for the `core/video` block. |
| 4 |
* |
| 5 |
* @package twentig |
| 6 |
*/ |
| 7 |
|
| 8 |
defined( 'ABSPATH' ) || exit; |
| 9 |
|
| 10 |
/** |
| 11 |
* Filters the video block output. |
| 12 |
* |
| 13 |
* @param string $block_content Rendered block content. |
| 14 |
* @param array $block Block object. |
| 15 |
* @return string Filtered block content. |
| 16 |
*/ |
| 17 |
function twentig_filter_video_block( $block_content, $block ) { |
| 18 |
|
| 19 |
$tw_controls = $block['attrs']['twMinimalControls']['enable'] ?? false; |
| 20 |
$play_in_view = $block['attrs']['twAutoplayInView'] ?? false; |
| 21 |
|
| 22 |
if ( ! $tw_controls && ! $play_in_view ) { |
| 23 |
return $block_content; |
| 24 |
} |
| 25 |
|
| 26 |
wp_enqueue_script_module( |
| 27 |
'tw-block-video', |
| 28 |
TWENTIG_ASSETS_URI . '/blocks/video/view.js', |
| 29 |
array( '@wordpress/interactivity' ), |
| 30 |
TWENTIG_VERSION |
| 31 |
); |
| 32 |
|
| 33 |
$tag_processor = new WP_HTML_Tag_Processor( $block_content ); |
| 34 |
$tag_processor->next_tag(); |
| 35 |
|
| 36 |
$tag_processor->set_attribute( 'data-wp-interactive', 'twentig/video-play-pause' ); |
| 37 |
$tag_processor->set_attribute( |
| 38 |
'data-wp-context', |
| 39 |
wp_json_encode( |
| 40 |
array( |
| 41 |
'isVideoStarted' => false, |
| 42 |
'isVideoPaused' => true, |
| 43 |
'isVideoPlaying' => false, |
| 44 |
'isVideoEnded' => false, |
| 45 |
'ariaLabelPause' => esc_html_x( 'Pause video', 'video control', 'twentig' ), |
| 46 |
'ariaLabelPlay' => esc_html_x( 'Play video', 'video control', 'twentig' ), |
| 47 |
'ariaLabelReplay' => esc_html_x( 'Replay video', 'video control', 'twentig' ), |
| 48 |
), |
| 49 |
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP |
| 50 |
) |
| 51 |
); |
| 52 |
|
| 53 |
if ( $tw_controls ) { |
| 54 |
$tag_processor->add_class( 'minimal-controls' ); |
| 55 |
} |
| 56 |
|
| 57 |
$tag_processor->next_tag( 'video' ); |
| 58 |
|
| 59 |
if ( $play_in_view ) { |
| 60 |
$tag_processor->set_attribute( 'data-wp-run', 'callbacks.checkVisibility' ); |
| 61 |
$tag_processor->set_attribute( 'muted', true ); |
| 62 |
$tag_processor->set_attribute( 'playsinline', true ); |
| 63 |
} |
| 64 |
|
| 65 |
if ( $tw_controls ) { |
| 66 |
$loop = $tag_processor->get_attribute( 'loop' ); |
| 67 |
$controls = $tag_processor->get_attribute( 'controls' ); |
| 68 |
$style = $block['attrs']['twMinimalControls']['style'] ?? 'light'; |
| 69 |
$position = $block['attrs']['twMinimalControls']['position'] ?? 'center'; |
| 70 |
|
| 71 |
$tag_processor->set_attribute( 'data-wp-on--playing', 'actions.handleVideoEvent' ); |
| 72 |
$tag_processor->set_attribute( 'data-wp-on--pause', 'actions.handleVideoEvent' ); |
| 73 |
$tag_processor->set_attribute( 'data-wp-on--ended', 'actions.handleVideoEvent' ); |
| 74 |
|
| 75 |
$button_classes = 'play-button is-' . sanitize_html_class( $style ); |
| 76 |
|
| 77 |
if ( $controls ) { |
| 78 |
$tag_processor->set_attribute( 'controls', false ); |
| 79 |
$tag_processor->set_attribute( 'data-wp-bind--controls', 'context.isVideoStarted' ); |
| 80 |
|
| 81 |
$button_html = '<button class="'. $button_classes . '" data-wp-on--click="actions.playVideo" aria-label="'. esc_html_x( 'Play video', 'video control', 'twentig' ) .'" data-wp-bind--hidden="context.isVideoStarted"> |
| 82 |
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> |
| 83 |
<path d="M8 19V5l11 7z" class="control-visible"/> |
| 84 |
</svg></button>'; |
| 85 |
} else { |
| 86 |
$button_html = '<button class="'. $button_classes . '" data-wp-on--click="actions.playPauseVideo" data-wp-bind--aria-label="state.ariaLabel" data-wp-class--playing="context.isVideoPlaying"> |
| 87 |
<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"> |
| 88 |
<path data-wp-class--control-visible="context.isVideoPaused" d="M8 19V5l11 7z"/> |
| 89 |
<path data-wp-class--control-visible="context.isVideoPlaying" d="M10.5 18H7V6h3.5zm6.5 0h-3.5V6H17z"/> |
| 90 |
'; |
| 91 |
|
| 92 |
if ( $loop === null ) { |
| 93 |
$button_html .= '<path data-wp-class--control-visible="context.isVideoEnded" d="M12 5.333c-.175 0-.35.017-.517.034l1.525-1.525-1.175-1.175-3.508 3.5 3.508 3.508L13.008 8.5 11.55 7.042C11.7 7.025 11.842 7 12 7a5.84 5.84 0 0 1 5.833 5.833A5.84 5.84 0 0 1 12 18.667a5.84 5.84 0 0 1-5.833-5.834H4.5a7.5 7.5 0 1 0 7.5-7.5" />'; |
| 94 |
} |
| 95 |
$button_html .= '</svg></button>'; |
| 96 |
} |
| 97 |
|
| 98 |
$custom_controls_html = sprintf( |
| 99 |
'<div class="custom-controls is-%s">%s</div>', |
| 100 |
sanitize_html_class( $position ), |
| 101 |
$button_html |
| 102 |
); |
| 103 |
} |
| 104 |
|
| 105 |
$block_content = $tag_processor->get_updated_html(); |
| 106 |
|
| 107 |
if ( $tw_controls ) { |
| 108 |
$block_content = str_replace( '</video>', '</video>' . $custom_controls_html, $block_content ); |
| 109 |
} |
| 110 |
|
| 111 |
return $block_content; |
| 112 |
} |
| 113 |
add_filter( 'render_block_core/video', 'twentig_filter_video_block', 10, 2 ); |
| 114 |
|
