| 1 |
<?php |
| 2 |
|
| 3 |
namespace ULTP\blocks; |
| 4 |
|
| 5 |
defined( 'ABSPATH' ) || exit; |
| 6 |
|
| 7 |
class Youtube_Gallery { |
| 8 |
|
| 9 |
public function __construct() { |
| 10 |
add_action( 'init', array( $this, 'register' ) ); |
| 11 |
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); |
| 12 |
} |
| 13 |
|
| 14 |
public function get_attributes() { |
| 15 |
|
| 16 |
return array( |
| 17 |
'blockId' => '', |
| 18 |
'previewImg' => '', |
| 19 |
'advanceId' => '', |
| 20 |
'className' => '', |
| 21 |
'playlistIdOrUrl' => 'PLPidnGLSR4qcAwVwIjMo1OVaqXqjUp_s4', |
| 22 |
'youTubeApiKey' => '', |
| 23 |
'cacheDuration' => '0', |
| 24 |
'sortBy' => 'date', |
| 25 |
'layout' => 'inline', |
| 26 |
'videosPerPage' => (object) array( 'lg' => 6 ), |
| 27 |
'showVideoTitle' => true, |
| 28 |
'videoTitleLength' => (object) array( 'lg' => 50, 'md' => 50, 'sm' => 50 ), |
| 29 |
'loadMoreEnable' => true, |
| 30 |
'moreButtonLabel' => 'More Videos', |
| 31 |
'autoplay' => true, |
| 32 |
'autoplayPlaylist' => false, |
| 33 |
'loop' => false, |
| 34 |
'mute' => false, |
| 35 |
'showPlayerControl' => true, |
| 36 |
'hideYoutubeLogo' => false, |
| 37 |
'showDescription' => false, |
| 38 |
'videoDescriptionLength' => (object) array( 'lg' => 100, 'md' => 100, 'sm' => 100 ), |
| 39 |
'imageHeightRatio' => 'maxres', |
| 40 |
'galleryColumn' => (object) array( 'lg' => 3, 'md' => 2, 'sm' => 1 ), |
| 41 |
'displayType' => 'grid', |
| 42 |
'enableListView' => false, |
| 43 |
'playIcon' => 'youtube_logo_icon_solid', |
| 44 |
'enableAnimation' => false, |
| 45 |
'defaultYoutubeIcon' => true, |
| 46 |
); |
| 47 |
} |
| 48 |
|
| 49 |
public function register() { |
| 50 |
register_block_type( |
| 51 |
'ultimate-post/youtube-gallery', |
| 52 |
array( |
| 53 |
'editor_script' => 'ultp-blocks-editor-script', |
| 54 |
'editor_style' => 'ultp-blocks-editor-css', |
| 55 |
'render_callback' => array( $this, 'content' ), |
| 56 |
) |
| 57 |
); |
| 58 |
} |
| 59 |
|
| 60 |
public function enqueue_scripts() { |
| 61 |
wp_enqueue_script( |
| 62 |
'ultp-youtube-gallery-block', |
| 63 |
ULTP_URL . 'assets/js/ultp-youtube-gallery-block.js', |
| 64 |
array( 'jquery' ), |
| 65 |
ULTP_VER, |
| 66 |
true |
| 67 |
); |
| 68 |
} |
| 69 |
|
| 70 |
public function content( $attr, $noAjax ) { |
| 71 |
$attr = wp_parse_args( $attr, $this->get_attributes() ); |
| 72 |
$content = ''; |
| 73 |
$attr['className'] = isset( $attr['className'] ) && $attr['className'] ? preg_replace( '/[^A-Za-z0-9_ -]/', '', $attr['className'] ) : ''; |
| 74 |
$attr['align'] = isset( $attr['align'] ) && $attr['align'] ? preg_replace( '/[^A-Za-z0-9_ -]/', '', $attr['align'] ) : ''; |
| 75 |
$attr['advanceId'] = isset( $attr['advanceId'] ) ? sanitize_html_class( $attr['advanceId'] ) : ''; |
| 76 |
$attr['blockId'] = isset( $attr['blockId'] ) ? sanitize_html_class( $attr['blockId'] ) : ''; |
| 77 |
|
| 78 |
$block_class = 'ultp-post-grid-block ultp-block-' . $attr['blockId']; |
| 79 |
if ( $attr['align'] ) { |
| 80 |
$block_class .= ' align' . $attr['align']; |
| 81 |
} |
| 82 |
if ( $attr['className'] ) { |
| 83 |
$block_class .= ' ' . $attr['className']; |
| 84 |
} |
| 85 |
|
| 86 |
$videos_per_page = isset( $attr['videosPerPage'] ) ? $attr['videosPerPage'] : array( 'lg' => 9, 'md' => 6, 'sm' => 3 ); |
| 87 |
$video_title_length = isset( $attr['videoTitleLength'] ) ? $attr['videoTitleLength'] : array( 'lg' => 50, 'md' => 50, 'sm' => 50 ); |
| 88 |
$video_description_length = isset( $attr['videoDescriptionLength'] ) ? $attr['videoDescriptionLength'] : array( 'lg' => 100, 'md' => 100, 'sm' => 100 ); |
| 89 |
$gallery_column = isset( $attr['galleryColumn'] ) ? $attr['galleryColumn'] : array( 'lg' => 3, 'md' => 2, 'sm' => 1 ); |
| 90 |
|
| 91 |
$block_name = 'youtube-gallery'; |
| 92 |
|
| 93 |
$content .= '<div '. ( $attr['advanceId'] ? 'id="' . $attr['advanceId'] . '" ' : '' ) . ' class="wp-block-ultimate-post-' . $block_name . ' ultp-block-' . $attr['blockId'] . '' . ( $attr['align'] ? ' align' . $attr['align'] : '' ) . '' . ( $attr['className'] ? ' ' . $attr['className'] : '' ) . '"'; |
| 94 |
$content .= ' data-playlist="' . esc_attr( $attr['playlistIdOrUrl'] ) . '"'; |
| 95 |
$content .= ' data-api-key="' . esc_attr( $attr['youTubeApiKey'] ) . '"'; |
| 96 |
$content .= ' data-cache-duration="' . esc_attr( $attr['cacheDuration'] ) . '"'; |
| 97 |
$content .= ' data-sort-by="' . esc_attr( $attr['sortBy'] ) . '"'; |
| 98 |
$content .= ' data-gallery-layout="' . esc_attr( $attr['layout'] ) . '"'; |
| 99 |
$content .= ' data-videos-per-page="' . esc_attr( wp_json_encode( $videos_per_page ) ) . '"'; |
| 100 |
$content .= ' data-show-video-title="' . ( $attr['showVideoTitle'] ? '1' : '0' ) . '"'; |
| 101 |
$content .= ' data-video-title-length="' . esc_attr( wp_json_encode( $video_title_length ) ) . '"'; |
| 102 |
$content .= ' data-load-more-enable="' . ( $attr['loadMoreEnable'] ? '1' : '0' ) . '"'; |
| 103 |
$content .= ' data-more-button-label="' . esc_attr( $attr['moreButtonLabel'] ) . '"'; |
| 104 |
$content .= ' data-autoplay="' . ( $attr['layout'] == 'playlist' ? ( $attr['autoplayPlaylist'] ? '1' : '0' ) : ( $attr['autoplay'] ? '1' : '0' ) ) . '"'; |
| 105 |
$content .= ' data-loop="' . ( $attr['loop'] ? '1' : '0' ) . '"'; |
| 106 |
$content .= ' data-mute="' . ( $attr['mute'] ? '1' : '0' ) . '"'; |
| 107 |
$content .= ' data-show-player-control="' . ( $attr['showPlayerControl'] ? '1' : '0' ) . '"'; |
| 108 |
$content .= ' data-hide-youtube-logo="' . ( $attr['hideYoutubeLogo'] ? '1' : '0' ) . '"'; |
| 109 |
$content .= ' data-show-description="' . ( $attr['showDescription'] ? '1' : '0' ) . '"'; |
| 110 |
$content .= ' data-video-description-length="' . esc_attr( wp_json_encode( $video_description_length ) ) . '"'; |
| 111 |
$content .= ' data-image-height-ratio="' . esc_attr( $attr['imageHeightRatio'] ) . '"'; |
| 112 |
$content .= ' data-gallery-column="' . esc_attr( wp_json_encode( $gallery_column ) ) . '"'; |
| 113 |
$content .= ' data-display-type="' . esc_attr( $attr['displayType'] ) . '"'; |
| 114 |
$content .= ' data-enable-list-view="' . ( $attr['enableListView'] ? '1' : '0' ) . '"'; |
| 115 |
$content .= ' data-enable-youtube-icon="' . ( $attr['defaultYoutubeIcon'] ? '1' : '0' ) . '"'; |
| 116 |
$content .= ' data-enable-icon-animation="' . ( $attr['enableAnimation'] ? '1' : '0' ) . '"'; |
| 117 |
$content .= ' data-img-height="' . ( $attr['imageHeightRatio'] ) . '"'; |
| 118 |
$content .= '>'; |
| 119 |
|
| 120 |
$grid_class = 'ultp-ytg-view-grid ultp-layout-' . esc_attr( $attr['layout'] ); |
| 121 |
if ( $attr['enableListView'] ) { |
| 122 |
$grid_class .= ' ultp-ytg-view-list'; |
| 123 |
} |
| 124 |
if ( $attr['imageHeightRatio'] !== 'custom' ) { |
| 125 |
$grid_class .= ' ultp-ratio-height'; |
| 126 |
} |
| 127 |
$grid_class .= ' ultp-ytg-' . esc_attr( $attr['displayType'] ); |
| 128 |
|
| 129 |
$content .= '<div class="ultp-block-wrapper ultp-ytg-block ultp-wrapper-block">'; |
| 130 |
$content .= '<div class="ultp-ytg-container ' . esc_attr( $grid_class ) . '">'; |
| 131 |
$content .= '<div class=""></div>'; |
| 132 |
$content .= '</div>'; |
| 133 |
if ( $attr['loadMoreEnable'] && $attr['layout'] != 'playlist') { |
| 134 |
$content .= '<div class="ultp-ytg-loadmore-btn">'; |
| 135 |
$content .= esc_html( $attr['moreButtonLabel'] ); |
| 136 |
$content .= '</div>'; |
| 137 |
} |
| 138 |
if($attr['playIcon']) { |
| 139 |
$content .= '<div class="ultp-ytg-play__icon" style="display:none;" >'; |
| 140 |
$content .= $attr['defaultYoutubeIcon'] ? '<svg |
| 141 |
xmlns="http://www.w3.org/2000/svg" |
| 142 |
viewBox="0 0 28.57 20" |
| 143 |
preserveAspectRatio="xMidYMid meet" |
| 144 |
> |
| 145 |
<g> |
| 146 |
<path |
| 147 |
d="M27.9727 3.12324C27.6435 1.89323 26.6768 0.926623 25.4468 0.597366C23.2197 2.24288e-07 14.285 0 14.285 0C14.285 0 5.35042 2.24288e-07 3.12323 0.597366C1.89323 0.926623 0.926623 1.89323 0.597366 3.12324C2.24288e-07 5.35042 0 10 0 10C0 10 2.24288e-07 14.6496 0.597366 16.8768C0.926623 18.1068 1.89323 19.0734 3.12323 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6768 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9727 3.12324Z" |
| 148 |
fill="#FF0000" |
| 149 |
/> |
| 150 |
<path |
| 151 |
d="M11.4253 14.2854L18.8477 10.0004L11.4253 5.71533V14.2854Z" |
| 152 |
fill="white" |
| 153 |
/> |
| 154 |
</g> |
| 155 |
</svg>' : ultimate_post()->get_svg_icon( $attr['playIcon']); |
| 156 |
$content .= '</div>'; |
| 157 |
} |
| 158 |
|
| 159 |
$content .= '</div>'; |
| 160 |
$content .= '</div>'; |
| 161 |
return $content; |
| 162 |
} |
| 163 |
} |
| 164 |
|
