Skip to content

Commit

Permalink
Podcast Player: Load data from embedded JSON (#15014)
Browse files Browse the repository at this point in the history
  • Loading branch information
marekhrabe authored Mar 17, 2020
1 parent c5a7812 commit 893b7c4
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 10 deletions.
9 changes: 2 additions & 7 deletions extensions/blocks/podcast-player/podcast-player.php
Original file line number Diff line number Diff line change
Expand Up @@ -92,13 +92,8 @@ function render_player( $track_list, $attributes ) {
$instance_id = wp_unique_id( 'podcast-player-block-' );

$player_data = array(
'type' => 'audio',
// Don't pass strings to JSON, will be truthy in JS.
'tracklist' => true,
'tracknumbers' => true,
'images' => true,
'artists' => true,
'tracks' => $track_list,
'tracks' => $track_list,
'attributes' => $attributes,
);

$block_classname = Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attributes );
Expand Down
23 changes: 20 additions & 3 deletions extensions/blocks/podcast-player/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,29 @@ const initializeBlock = function( id ) {
id,
block,
currentTrack: 0,
tracks: [],
attributes: {},
};

// Load data from the embedded JSON.
const dataContainer = block.querySelector( 'script[type="application/json"]' );
if ( dataContainer ) {
try {
const data = JSON.parse( dataContainer.text );
player.tracks = data.tracks;
player.attributes = data.attributes;
} catch ( e ) {
return;
}
}

if ( ! player.tracks.length ) {
return;
}

// Initialize player UI.
player.audio = document.createElement( 'audio' );
player.audio.src = block
.querySelector( '[data-jetpack-podcast-audio]' )
.getAttribute( 'data-jetpack-podcast-audio' );
player.audio.src = player.tracks[ 0 ].src;
block.insertBefore( player.audio, block.firstChild );
player.mediaElement = new MediaElementPlayer( player.audio, meJsSettings );

Expand All @@ -42,6 +58,7 @@ if ( window.jetpackPodcastPlayers !== undefined ) {
// Replace the queue with an immediate initialization for async loaded players.
window.jetpackPodcastPlayers = {
push: initializeBlock,
playerInstances,
};

// Add global handler for clicks.
Expand Down

0 comments on commit 893b7c4

Please sign in to comment.