feat: Get basic everything working well

Automattic · Feb 7, 2020 · b5537c8 · b5537c8
1 parent 72efba4
commit b5537c8
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 8 deletions.
diff --git a/src/blocks/video-playlist/edit.js b/src/blocks/video-playlist/edit.js
@@ -26,15 +26,45 @@ class Edit extends Component {
 	}
 
 	componentDidMount() {
-		this.getSettings();
+		this.refreshSettings();
 	}
 
-	getSettings() {
-		const path = '/newspack-blocks/v1/video-playlist';
+	componentDidUpdate( prevProps ) {
+		console.log( "COMPONENT DID UPDATE");
+		const { attributes } = this.props;
+		const { manual, videos, categories, videosToShow } = attributes;
+		const { attributes: prevAttributes } = prevProps;
+		const { manual: prevManual, videos: prevVideos, categories: prevCategories, videosToShow: prevVideosToShow } = prevAttributes;
+		console.log( prevAttributes );
+		console.log( attributes );
+		if ( manual !== prevManual || videos !== prevVideos || categories !== prevCategories || videosToShow !== prevVideosToShow ) {
+			this.refreshSettings();
+		}
+	}
+
+	refreshSettings() {
+		const { attributes, setAttributes } = this.props;
+		const { manual, videos, categories, videosToShow, autoplay } = attributes;
+
+		const basePath = '/newspack-blocks/v1/video-playlist';
+		let path = '';
+
+		if ( manual ) {
+			path = addQueryArgs( basePath, {
+				videos,
+				manual
+			} );
+		} else {
+			path = addQueryArgs( basePath, {
+				categories,
+				videosToShow
+			} );
+		}
 
 		this.setState( { isLoading: true }, () => {
-			apiFetch( { path } )
-				.then( response => {
+			apiFetch( { 
+				path,
+			} ).then( response => {
 					const { html } = response;
 					this.setState( {
 						embed: html,
@@ -119,7 +149,7 @@ class Edit extends Component {
 
 	render() {
 		const { attributes, setAttributes } = this.props;
-		const { manual, videos, categories, videosToShow } = attributes;
+		const { manual, videos, categories, videosToShow, autoplay } = attributes;
 		const { embed, isLoading, videoToAdd } = this.state;
 
 		return (
@@ -130,6 +160,13 @@ class Edit extends Component {
 				) }
 				<InspectorControls>
 					<PanelBody title={ __( 'Settings', 'newspack-blocks' ) } initialOpen={ true }>
+						<PanelRow>
+							<ToggleControl
+								label={ __( 'Autoplay', 'newspack-blocks' ) }
+								checked={ autoplay }
+								onChange={ () => setAttributes( { autoplay: ! autoplay } ) }
+							/>
+						</PanelRow>
 						<PanelRow>
 							<ToggleControl
 								label={ __( 'Manually select videos', 'newspack-blocks' ) }
@@ -145,6 +182,7 @@ class Edit extends Component {
 								onInputChange={ value => this.setState( { videoToAdd: value } ) }
 								placeholder={ __( 'YouTube video URL', 'newspack-blocks' ) }
 								label={ __( 'YouTube video URLs', 'newspack-blocks' ) }
+								className='youtube-videos-manual-input'
 							/>
 						) }
 						{ ! manual && (

diff --git a/src/blocks/video-playlist/editor.scss b/src/blocks/video-playlist/editor.scss
@@ -9,3 +9,8 @@
 	position: absolute;
 	z-index: 1;
 }
+
+.youtube-videos-manual-input .components-form-token-field__token-text {
+	white-space: normal;
+	text-overflow: inherit;
+}
diff --git a/src/blocks/video-playlist/index.js b/src/blocks/video-playlist/index.js
@@ -55,6 +55,10 @@ export const settings = {
 			type: 'integer',
 			default: 5
 		},
+		autoplay: {
+			type: 'boolean',
+			default: false,
+		},
 	},
 	supports: {
 		html: false,

diff --git a/src/blocks/video-playlist/view.php b/src/blocks/video-playlist/view.php
@@ -36,15 +36,25 @@ function newspack_blocks_register_video_playlist() {
 				'videos'        => [
 					'type'    => 'array',
 					'default' => [],
+					'items'   => [
+						'type' => 'string',
+					],
 				],
 				'categories' => [
 					'type' => 'array',
 					'default' => [],
+					'items'   => [
+						'type' => 'integer',
+					],
 				],
 				'videosToShow'     => [
 					"type" => "integer",
 					"default" => 5,
 				],
+				'autoplay'                  => [
+					'type' => 'boolean',
+					'default' => false,
+				],
 			),
 			'render_callback' => 'newspack_blocks_render_block_video_playlist',
 		)
@@ -58,10 +68,12 @@ function newspack_blocks_get_video_playlist( $args ) {
 		'videos'     => [],
 		'videosToShow'      => 5,
 		'className'  => '',
+		'manual' => false,
+		'autoplay' => false,
 	];
 	$args = wp_parse_args( $args, $defaults );
 
-	if ( $args['videos'] ) {
+	if ( $args['manual'] ) {
 		$videos = array_map( 'esc_url_raw', $args['videos'] );
 	} else {
 		$videos = newspack_blocks_get_video_playlist_videos( $args );
@@ -92,6 +104,10 @@ function newspack_blocks_get_video_playlist_videos( $args ) {
 		'posts_per_page' => $args['videosToShow'],
 	];
 
+	if ( ! empty( $args['categories'] ) ) {
+		$query_args['category__in'] = $args['categories'];
+	}
+
 	$videos = [];
 	$posts  = get_posts( $query_args );
 	foreach ( $posts as $post ) {
@@ -130,6 +146,10 @@ function newspack_blocks_get_video_playlist_html( $videos, $args = [] ) {
 		$url .= '&playlist=' . implode( ',', array_slice( $video_ids, 1 ) );
 	}
 
+	if ( ! empty( $args['autoplay'] ) ) {
+		$url .= '&autoplay=1';
+	}
+
 	$classes = 'wp-block-newspack-blocks-video-playlist wpbnbvp wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio';
 	if ( ! empty( $args['className'] ) ) {
 		$classes .= $args['className'];
@@ -138,7 +158,7 @@ function newspack_blocks_get_video_playlist_html( $videos, $args = [] ) {
 	?>
 	<figure class='<?php echo esc_attr( $classes ); ?>'>
 		<div class='wp-block-embed__wrapper'>
-			<iframe width='960' height='540' src='<?php echo esc_attr( $url ); ?>' frameborder='0' allowfullscreen></iframe>
+			<iframe width='960' height='540' src='<?php echo esc_attr( $url ); ?>' frameborder='0' allowfullscreen allow="autoplay; encrypted-media"></iframe>
 		</div>
 	</figure>
 	<?php