init
This commit is contained in:
emmymayo
@@ -0,0 +1,294 @@
|
||||
<?php
|
||||
/**
|
||||
* Podcast Player Block.
|
||||
*
|
||||
* @since 8.4.0
|
||||
*
|
||||
* @package automattic/jetpack
|
||||
*/
|
||||
|
||||
namespace Automattic\Jetpack\Extensions\Podcast_Player;
|
||||
|
||||
use Automattic\Jetpack\Blocks;
|
||||
use Jetpack_Gutenberg;
|
||||
use Jetpack_Podcast_Helper;
|
||||
|
||||
if ( ! class_exists( 'Jetpack_Podcast_Helper' ) ) {
|
||||
require_once JETPACK__PLUGIN_DIR . '/_inc/lib/class-jetpack-podcast-helper.php';
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers the block for use in Gutenberg. This is done via an action so that
|
||||
* we can disable registration if we need to.
|
||||
*/
|
||||
function register_block() {
|
||||
Blocks::jetpack_register_block(
|
||||
__DIR__,
|
||||
array(
|
||||
'render_callback' => __NAMESPACE__ . '\render_block',
|
||||
// Since Gutenberg #31873.
|
||||
'style' => 'wp-mediaelement',
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
add_action( 'init', __NAMESPACE__ . '\register_block' );
|
||||
|
||||
/**
|
||||
* Returns the error message wrapped in HTML if current user
|
||||
* has the capability to edit the post. Public visitors will
|
||||
* never see errors.
|
||||
*
|
||||
* @param string $message The error message to display.
|
||||
* @return string
|
||||
*/
|
||||
function render_error( $message ) {
|
||||
// Suppress errors for users unable to address them.
|
||||
if ( ! current_user_can( 'edit_posts' ) ) {
|
||||
return '';
|
||||
}
|
||||
return '<p>' . esc_html( $message ) . '</p>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Podcast Player block registration/dependency declaration.
|
||||
*
|
||||
* @param array $attributes Array containing the Podcast Player block attributes.
|
||||
* @param string $content Fallback content - a direct link to RSS, as rendered by save.js.
|
||||
* @return string
|
||||
*/
|
||||
function render_block( $attributes, $content ) {
|
||||
// Don't render an interactive version of the block outside the frontend context.
|
||||
if ( ! jetpack_is_frontend() ) {
|
||||
return $content;
|
||||
}
|
||||
|
||||
// Test for empty URLS.
|
||||
if ( empty( $attributes['url'] ) ) {
|
||||
return render_error( __( 'No Podcast URL provided. Please enter a valid Podcast RSS feed URL.', 'jetpack' ) );
|
||||
}
|
||||
|
||||
// Test for invalid URLs.
|
||||
if ( ! wp_http_validate_url( $attributes['url'] ) ) {
|
||||
return render_error( __( 'Your podcast URL is invalid and couldn\'t be embedded. Please double check your URL.', 'jetpack' ) );
|
||||
}
|
||||
|
||||
if ( ! empty( $attributes['selectedEpisodes'] ) ) {
|
||||
$guids = array_map(
|
||||
function ( $episode ) {
|
||||
return $episode['guid'];
|
||||
},
|
||||
$attributes['selectedEpisodes']
|
||||
);
|
||||
$player_args = array( 'guids' => $guids );
|
||||
} else {
|
||||
$player_args = array();
|
||||
}
|
||||
|
||||
// Sanitize the URL.
|
||||
$attributes['url'] = esc_url_raw( $attributes['url'] );
|
||||
$player_data = ( new Jetpack_Podcast_Helper( $attributes['url'] ) )->get_player_data( $player_args );
|
||||
|
||||
if ( is_wp_error( $player_data ) ) {
|
||||
return render_error( $player_data->get_error_message() );
|
||||
}
|
||||
|
||||
return render_player( $player_data, $attributes );
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the HTML for the Podcast player and tracklist.
|
||||
*
|
||||
* @param array $player_data The player data details.
|
||||
* @param array $attributes Array containing the Podcast Player block attributes.
|
||||
* @return string The HTML for the podcast player.
|
||||
*/
|
||||
function render_player( $player_data, $attributes ) {
|
||||
// If there are no tracks (it is possible) then display appropriate user facing error message.
|
||||
if ( empty( $player_data['tracks'] ) ) {
|
||||
return render_error( __( 'No tracks available to play.', 'jetpack' ) );
|
||||
}
|
||||
|
||||
if ( is_wp_error( $player_data['tracks'] ) ) {
|
||||
return render_error( $player_data['tracks']->get_error_message() );
|
||||
}
|
||||
|
||||
// Only use the amount of tracks requested.
|
||||
$player_data['tracks'] = array_slice(
|
||||
$player_data['tracks'],
|
||||
0,
|
||||
absint( $attributes['itemsToShow'] )
|
||||
);
|
||||
|
||||
// Generate a unique id for the block instance.
|
||||
$instance_id = wp_unique_id( 'jetpack-podcast-player-block-' . get_the_ID() . '-' );
|
||||
$player_data['playerId'] = $instance_id;
|
||||
|
||||
// Generate object to be used as props for PodcastPlayer.
|
||||
$player_props = array_merge(
|
||||
// Add all attributes.
|
||||
array( 'attributes' => $attributes ),
|
||||
// Add all player data.
|
||||
$player_data
|
||||
);
|
||||
|
||||
$primary_colors = get_colors( 'primary', $attributes, 'color' );
|
||||
$secondary_colors = get_colors( 'secondary', $attributes, 'color' );
|
||||
$background_colors = get_colors( 'background', $attributes, 'background-color' );
|
||||
|
||||
$player_classes_name = trim( "{$secondary_colors['class']} {$background_colors['class']}" );
|
||||
$player_inline_style = trim( "{$secondary_colors['style']} {$background_colors['style']}" );
|
||||
$player_inline_style .= get_css_vars( $attributes );
|
||||
$wrapper_attributes = \WP_Block_Supports::get_instance()->apply_block_supports();
|
||||
$block_classname = Blocks::classes( Blocks::get_block_feature( __DIR__ ), $attributes, array( 'is-default' ) );
|
||||
$is_amp = Blocks::is_amp_request();
|
||||
|
||||
ob_start();
|
||||
?>
|
||||
<div class="<?php echo esc_attr( $block_classname ); ?>"<?php echo ! empty( $wrapper_attributes['style'] ) ? ' style="' . esc_attr( $wrapper_attributes['style'] ) . '"' : ''; ?> id="<?php echo esc_attr( $instance_id ); ?>">
|
||||
<section
|
||||
class="jetpack-podcast-player <?php echo esc_attr( $player_classes_name ); ?>"
|
||||
style="<?php echo esc_attr( $player_inline_style ); ?>"
|
||||
>
|
||||
<?php
|
||||
render(
|
||||
'podcast-header',
|
||||
array_merge(
|
||||
$player_props,
|
||||
array(
|
||||
'primary_colors' => $primary_colors,
|
||||
'player_id' => $player_data['playerId'],
|
||||
)
|
||||
)
|
||||
);
|
||||
?>
|
||||
<?php if ( count( $player_data['tracks'] ) > 1 ) : ?>
|
||||
<ol class="jetpack-podcast-player__tracks">
|
||||
<?php foreach ( $player_data['tracks'] as $track_index => $attachment ) : ?>
|
||||
<?php
|
||||
render(
|
||||
'playlist-track',
|
||||
array(
|
||||
'is_active' => 0 === $track_index,
|
||||
'attachment' => $attachment,
|
||||
'primary_colors' => $primary_colors,
|
||||
'secondary_colors' => $secondary_colors,
|
||||
)
|
||||
);
|
||||
?>
|
||||
<?php endforeach; ?>
|
||||
</ol>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
<?php if ( ! $is_amp ) : ?>
|
||||
<script type="application/json"><?php echo wp_json_encode( $player_props ); ?></script>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php
|
||||
/**
|
||||
* Enqueue necessary scripts and styles.
|
||||
*/
|
||||
if ( ! $is_amp ) {
|
||||
wp_enqueue_style( 'wp-mediaelement' );
|
||||
}
|
||||
Jetpack_Gutenberg::load_assets_as_required( __DIR__, array( 'mediaelement' ) );
|
||||
|
||||
return ob_get_clean();
|
||||
}
|
||||
|
||||
/**
|
||||
* Given the color name, block attributes and the CSS property,
|
||||
* the function will return an array with the `class` and `style`
|
||||
* HTML attributes to be used straight in the markup.
|
||||
*
|
||||
* @example
|
||||
* $color = get_colors( 'secondary', $attributes, 'border-color'
|
||||
* => array( 'class' => 'has-secondary', 'style' => 'border-color: #333' )
|
||||
*
|
||||
* @param string $name Color attribute name, for instance `primary`, `secondary`, ...
|
||||
* @param array $attrs Block attributes.
|
||||
* @param string $property Color CSS property, fo instance `color`, `background-color`, ...
|
||||
* @return array Colors array.
|
||||
*/
|
||||
function get_colors( $name, $attrs, $property ) {
|
||||
$attr_color = "{$name}Color";
|
||||
$attr_custom = 'custom' . ucfirst( $attr_color );
|
||||
|
||||
$color = isset( $attrs[ $attr_color ] ) ? $attrs[ $attr_color ] : null;
|
||||
$custom_color = isset( $attrs[ $attr_custom ] ) ? $attrs[ $attr_custom ] : null;
|
||||
|
||||
$colors = array(
|
||||
'class' => '',
|
||||
'style' => '',
|
||||
);
|
||||
|
||||
if ( $color || $custom_color ) {
|
||||
$colors['class'] .= "has-{$name}";
|
||||
|
||||
if ( $color ) {
|
||||
$colors['class'] .= " has-{$color}-{$property}";
|
||||
} elseif ( $custom_color ) {
|
||||
$colors['style'] .= "{$property}: {$custom_color};";
|
||||
}
|
||||
}
|
||||
|
||||
return $colors;
|
||||
}
|
||||
|
||||
/**
|
||||
* It generates a string with CSS variables according to the
|
||||
* block colors, prefixing each one with `--jetpack-podcast-player'.
|
||||
*
|
||||
* @param array $attrs Podcast Block attributes object.
|
||||
* @return string CSS variables depending on block colors.
|
||||
*/
|
||||
function get_css_vars( $attrs ) {
|
||||
$colors_name = array( 'primary', 'secondary', 'background' );
|
||||
|
||||
$inline_style = '';
|
||||
foreach ( $colors_name as $color ) {
|
||||
$hex_color = 'hex' . ucfirst( $color ) . 'Color';
|
||||
if ( ! empty( $attrs[ $hex_color ] ) ) {
|
||||
$inline_style .= " --jetpack-podcast-player-{$color}: {$attrs[ $hex_color ]};";
|
||||
}
|
||||
}
|
||||
return $inline_style;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the given template in server-side.
|
||||
* Important note:
|
||||
* The $template_props array will be extracted.
|
||||
* This means it will create a var for each array item.
|
||||
* Keep it mind when using this param to pass
|
||||
* properties to the template.
|
||||
*
|
||||
* @html-template-var array $template_props
|
||||
*
|
||||
* @param string $name Template name, available in `./templates` folder.
|
||||
* @param array $template_props Template properties. Optional.
|
||||
* @param bool $print Render template. True as default.
|
||||
* @return string|null HTML markup or null.
|
||||
*/
|
||||
function render( $name, $template_props = array(), $print = true ) {
|
||||
if ( ! strpos( $name, '.php' ) ) {
|
||||
$name = $name . '.php';
|
||||
}
|
||||
|
||||
$template_path = __DIR__ . '/templates/' . $name;
|
||||
|
||||
if ( ! file_exists( $template_path ) ) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ( $print ) {
|
||||
include $template_path;
|
||||
} else {
|
||||
ob_start();
|
||||
include $template_path;
|
||||
$markup = ob_get_contents();
|
||||
ob_end_clean();
|
||||
|
||||
return $markup;
|
||||
}
|
||||
}
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
<?php
|
||||
/**
|
||||
* Podcast Title template.
|
||||
*
|
||||
* @html-template Automattic\Jetpack\Extensions\Podcast_Player\render
|
||||
* @package automattic/jetpack
|
||||
*/
|
||||
|
||||
// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- HTML template, let Phan handle it.
|
||||
|
||||
namespace Automattic\Jetpack\Extensions\Podcast_Player;
|
||||
|
||||
/**
|
||||
* Template variables.
|
||||
*
|
||||
* @var array $template_props
|
||||
*/
|
||||
|
||||
$track_title = $template_props['attachment']['title'];
|
||||
$track_link = empty( $template_props['attachment']['link'] ) ? $template_props['attachment']['src'] : $template_props['attachment']['link'];
|
||||
$track_duration = ! empty( $template_props['attachment']['duration'] ) ? $template_props['attachment']['duration'] : '';
|
||||
|
||||
$class = 'jetpack-podcast-player__track ' . $template_props['secondary_colors']['class'];
|
||||
$style = $template_props['secondary_colors']['style'];
|
||||
if ( $template_props['is_active'] ) {
|
||||
$class = 'jetpack-podcast-player__track is-active ' . $template_props['primary_colors']['class'];
|
||||
$style = $template_props['primary_colors']['style'];
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<li
|
||||
class="<?php echo esc_attr( trim( $class ) ); ?>"
|
||||
style="<?php echo esc_attr( $style ); ?>"
|
||||
>
|
||||
<a
|
||||
class="jetpack-podcast-player__track-link jetpack-podcast-player__link"
|
||||
href="<?php echo esc_url( $track_link ); ?>"
|
||||
role="button"
|
||||
<?php echo $template_props['is_active'] ? 'aria-current="track"' : ''; ?>
|
||||
>
|
||||
<span class="jetpack-podcast-player__track-status-icon"></span>
|
||||
<span class="jetpack-podcast-player__track-title"><?php echo esc_html( $track_title ); ?></span>
|
||||
<time class="jetpack-podcast-player__track-duration"><?php echo esc_html( $track_duration ); ?></time>
|
||||
</a>
|
||||
</li>
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
<?php
|
||||
/**
|
||||
* Podcast Header Title template.
|
||||
*
|
||||
* @html-template Automattic\Jetpack\Extensions\Podcast_Player\render
|
||||
* @package automattic/jetpack
|
||||
*/
|
||||
|
||||
// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- HTML template, let Phan handle it.
|
||||
|
||||
namespace Automattic\Jetpack\Extensions\Podcast_Player;
|
||||
|
||||
/**
|
||||
* Template variables.
|
||||
*
|
||||
* @var string $template_props
|
||||
*/
|
||||
|
||||
if ( ! isset( $template_props['title'] ) && empty( $template_props['track']['title'] ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$track_link = empty( $template_props['track']['link'] ) ? $template_props['track']['src'] : $template_props['track']['link'];
|
||||
?>
|
||||
|
||||
<h2 id="<?php echo esc_attr( $template_props['player_id'] ); ?>__title" class="jetpack-podcast-player__title">
|
||||
<span
|
||||
class="jetpack-podcast-player__current-track-title <?php echo esc_attr( $template_props['primary_colors']['class'] ); ?>"
|
||||
<?php echo isset( $template_props['primary_colors']['style'] ) ? 'style="' . esc_attr( $template_props['primary_colors']['style'] ) . '"' : ''; ?>
|
||||
>
|
||||
<?php
|
||||
echo esc_html( $template_props['track']['title'] );
|
||||
if ( ! empty( $track_link ) ) :
|
||||
// Prevent whitespace between title and link to cause a jump when JS kicks in.
|
||||
// phpcs:disable Squiz.PHP.EmbeddedPhp.ContentAfterEnd
|
||||
?><a
|
||||
class="jetpack-podcast-player__track-title-link"
|
||||
href="<?php echo esc_url( $track_link ); ?>"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path d="M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z" />
|
||||
</svg>
|
||||
</a>
|
||||
<?php endif; // phpcs:enable ?>
|
||||
</span>
|
||||
|
||||
<?php
|
||||
// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- This file expects $template_props set outside the file.
|
||||
|
||||
if ( ! empty( $template_props['title'] ) ) :
|
||||
?>
|
||||
<span class="jetpack-podcast-player--visually-hidden"> - </span>
|
||||
|
||||
<?php
|
||||
render(
|
||||
'podcast-title',
|
||||
array(
|
||||
'title' => $template_props['title'],
|
||||
'link' => $template_props['link'],
|
||||
)
|
||||
);
|
||||
?>
|
||||
<?php endif; ?>
|
||||
</h2>
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
/**
|
||||
* Podcast Header template.
|
||||
*
|
||||
* @html-template Automattic\Jetpack\Extensions\Podcast_Player\render
|
||||
* @package automattic/jetpack
|
||||
*/
|
||||
|
||||
// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- HTML template, let Phan handle it.
|
||||
|
||||
namespace Automattic\Jetpack\Extensions\Podcast_Player;
|
||||
|
||||
/**
|
||||
* Template variables.
|
||||
*
|
||||
* @var array $template_props
|
||||
*/
|
||||
|
||||
/**
|
||||
* Block attributes.
|
||||
*/
|
||||
$attributes = (array) $template_props['attributes']; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
|
||||
$show_cover_art = (bool) $attributes['showCoverArt'];
|
||||
$show_episode_title = (bool) $attributes['showEpisodeTitle'];
|
||||
$show_episode_description = (bool) $attributes['showEpisodeDescription'];
|
||||
|
||||
// Current track.
|
||||
$tracks = $template_props['tracks'];
|
||||
$track = ( is_array( $tracks ) && ! empty( $tracks ) ) ? $tracks[0] : array();
|
||||
?>
|
||||
|
||||
<div class="jetpack-podcast-player__header">
|
||||
<div class="jetpack-podcast-player__current-track-info">
|
||||
<?php if ( $show_cover_art && isset( $template_props['cover'] ) ) : ?>
|
||||
<div class="jetpack-podcast-player__cover">
|
||||
<img class="jetpack-podcast-player__cover-image" src="<?php echo esc_url( $template_props['cover'] ); ?>" alt="" />
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
if ( $show_episode_title ) {
|
||||
render(
|
||||
'podcast-header-title',
|
||||
array(
|
||||
'player_id' => $template_props['player_id'],
|
||||
'title' => $template_props['title'],
|
||||
'link' => $template_props['link'],
|
||||
'track' => $track,
|
||||
'primary_colors' => $template_props['primary_colors'],
|
||||
)
|
||||
);
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ( $show_episode_description && ! empty( $track ) && isset( $track['description'] ) ) :
|
||||
?>
|
||||
<div
|
||||
id="<?php echo esc_attr( $template_props['player_id'] ); ?>__track-description"
|
||||
class="jetpack-podcast-player__track-description"
|
||||
>
|
||||
<?php echo esc_html( $track['description'] ); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="jetpack-podcast-player__audio-player">
|
||||
<div class="jetpack-podcast-player--audio-player-loading"></div>
|
||||
</div>
|
||||
</div>
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
<?php
|
||||
/**
|
||||
* Podcast Title template.
|
||||
*
|
||||
* @html-template Automattic\Jetpack\Extensions\Podcast_Player\render
|
||||
* @package automattic/jetpack
|
||||
*/
|
||||
|
||||
// phpcs:disable VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- HTML template, let Phan handle it.
|
||||
|
||||
namespace Automattic\Jetpack\Extensions\Podcast_Player;
|
||||
|
||||
/**
|
||||
* Template variables.
|
||||
*
|
||||
* @var string $template_props
|
||||
*/
|
||||
|
||||
if ( empty( $template_props['title'] ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<span class="jetpack-podcast-player__podcast-title">
|
||||
<?php if ( ! empty( $template_props['link'] ) ) : ?>
|
||||
<a
|
||||
class="jetpack-podcast-player__link"
|
||||
href="<?php echo esc_url( $template_props['link'] ); ?>"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
>
|
||||
<?php echo esc_html( $template_props['title'] ); ?>
|
||||
</a>
|
||||
<?php
|
||||
else :
|
||||
echo esc_html( $template_props['title'] );
|
||||
endif;
|
||||
?>
|
||||
</span>
|
||||
Reference in New Issue
Block a user