Merge pull request #322 from 10up/fix/playlist-experience

Bugfix: playlist experience not rendering correctly in frontend
10up · Jun 16, 2023 · e448fb0 · e448fb0
2 parents 55606b1 + 7375228
commit e448fb0
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 69 deletions.
diff --git a/assets/js/src/block.js b/assets/js/src/block.js
@@ -356,24 +356,63 @@
 						},
 					];
 				}, []);
+			const muteField = (autoplay) => {
+				const field = el(components.CheckboxControl, {
+					label: __('Mute', 'brightcove'),
+					checked: mute !== '' || autoplay !== '',
+					onChange: function (value) {
+						props.setAttributes({
+							...props.attributes,
+							mute: value && 'muted',
+						});
+					},
+				});
+
+				if (autoplay === 'autoplay') {
+					return el(components.Disabled, { style: { marginBottom: '24px' } }, field);
+				}
+				return field;
+			};
+
+			const playsinlineField = (autoplay) => {
+				const field = el(components.CheckboxControl, {
+					label: __('Plays in line', 'brightcove'),
+					checked: playsinline !== '' || autoplay !== '',
+					onChange: function (value) {
+						props.setAttributes({
+							...props.attributes,
+							playsinline: value && 'playsinline',
+						});
+					},
+				});
+
+				if (autoplay === 'autoplay') {
+					return el(components.Disabled, { style: { marginBottom: '24px' } }, field);
+				}
+				return field;
+			};
+
+			const isExperience = inPageExperienceId || experienceId;
 
 			let embedStyleOptions = [{ label: __('iFrame', 'brightcove'), value: 'iframe' }];
-			embedStyleOptions = playlistId
-				? [
-						...embedStyleOptions,
-						{
-							label: __('JavaScript Horizontal', 'brightcove'),
-							value: 'in-page-horizontal',
-						},
-						{
-							label: __('JavaScript Vertical', 'brightcove'),
-							value: 'in-page-vertical',
-						},
-				  ]
-				: [
-						{ label: __('JavaScript', 'brightcove'), value: 'in-page' },
-						...embedStyleOptions,
-				  ];
+
+			embedStyleOptions =
+				playlistId && !isExperience
+					? [
+							...embedStyleOptions,
+							{
+								label: __('JavaScript Horizontal', 'brightcove'),
+								value: 'in-page-horizontal',
+							},
+							{
+								label: __('JavaScript Vertical', 'brightcove'),
+								value: 'in-page-vertical',
+							},
+					  ]
+					: [
+							{ label: __('JavaScript', 'brightcove'), value: 'in-page' },
+							...embedStyleOptions,
+					  ];
 
 			const sizingField = el(components.RadioControl, {
 				label: __('Sizing', 'brightcove'),
@@ -393,28 +432,6 @@
 				},
 			});
 
-			const muteField = el(components.CheckboxControl, {
-				label: __('Mute', 'brightcove'),
-				checked: mute !== '' || autoplay !== '',
-				onChange: function (value) {
-					props.setAttributes({
-						...props.attributes,
-						mute: value && 'muted',
-					});
-				},
-			});
-
-			const playsinlineField = el(components.CheckboxControl, {
-				label: __('Plays in line', 'brightcove'),
-				checked: playsinline !== '' || autoplay !== '',
-				onChange: function (value) {
-					props.setAttributes({
-						...props.attributes,
-						playsinline: value && 'playsinline',
-					});
-				},
-			});
-
 			const embedStyleField = el(components.RadioControl, {
 				label: __('Embed Style', 'brightcove'),
 				selected: embed,
@@ -427,8 +444,6 @@
 				},
 			});
 
-			const isExperience = inPageExperienceId || experienceId;
-
 			return [
 				userPermission ? controls : '',
 				el('iframe', {
@@ -489,20 +504,8 @@
 									});
 								},
 							}),
-						!isExperience && autoplay === 'autoplay'
-							? el(
-									components.Disabled,
-									{ style: { marginBottom: '24px' } },
-									muteField,
-							  )
-							: muteField,
-						!isExperience && autoplay === 'autoplay'
-							? el(
-									components.Disabled,
-									{ style: { marginBottom: '24px' } },
-									playsinlineField,
-							  )
-							: playsinlineField,
+						!isExperience && muteField(autoplay),
+						!isExperience && playsinlineField(autoplay),
 						!playlistId &&
 							!isExperience &&
 							el(components.CheckboxControl, {
@@ -515,16 +518,17 @@
 									});
 								},
 							}),
-						el(components.CheckboxControl, {
-							label: __('Enable Language Detection', 'brightcove'),
-							checked: languageDetection,
-							onChange: function (value) {
-								props.setAttributes({
-									...props.attributes,
-									language_detection: value && 'languagedetection',
-								});
-							},
-						}),
+						!isExperience &&
+							el(components.CheckboxControl, {
+								label: __('Enable Language Detection', 'brightcove'),
+								checked: languageDetection,
+								onChange: function (value) {
+									props.setAttributes({
+										...props.attributes,
+										language_detection: value && 'languagedetection',
+									});
+								},
+							}),
 						languageDetection === 'languagedetection' ||
 							pictureinpicture === 'pictureinpicture'
 							? el(

diff --git a/includes/admin/class-bc-templates.php b/includes/admin/class-bc-templates.php
@@ -908,7 +908,7 @@ class="brightcove-datetime brightcove-end-date"
 							<?php esc_html_e( 'Embed Style: ', 'brightcove' ); ?>
 						</label>
 						<div class="right-col">
-							<input type="radio" value="javascript" id="embed-style-in-page" checked name="embed-style"><?php esc_html_e( 'JavaScript', 'brightcove' ); ?>
+							<input type="radio" value="in-page" id="embed-style-in-page" checked name="embed-style"><?php esc_html_e( 'JavaScript', 'brightcove' ); ?>
 							<input type="radio" value="iframe" id="embed-style-iframe" name="embed-style"><?php esc_html_e( 'iFrame', 'brightcove' ); ?>
 						</div>
 
@@ -986,7 +986,7 @@ class="brightcove-datetime brightcove-end-date"
 							<?php esc_html_e( 'Embed Style: ', 'brightcove' ); ?>
 						</label>
 						<div class="right-col">
-							<input type="radio" value="javascript" id="embed-style-in-page" checked name="embed-style"><?php esc_html_e( 'JavaScript', 'brightcove' ); ?>
+							<input type="radio" value="in-page" id="embed-style-in-page" checked name="embed-style"><?php esc_html_e( 'JavaScript', 'brightcove' ); ?>
 							<input type="radio" value="iframe" id="embed-style-iframe" name="embed-style"><?php esc_html_e( 'iFrame', 'brightcove' ); ?>
 						</div>
 

diff --git a/includes/class-bc-utility.php b/includes/class-bc-utility.php
@@ -860,12 +860,12 @@ public static function get_experience_player( $atts ) {
 
 		$video_ids   = '';
 		$playlist_id = '';
-		if ( isset( $atts['video_ids'] ) ) {
+		if ( ! empty( $atts['video_ids'] ) ) {
 			$video_ids = sanitize_text_field( $atts['video_ids'] );
 			$js_attr   = 'data-video-ids="' . esc_attr( $video_ids ) . '"';
 			$url_attr  = 'videoIds=' . esc_attr( $video_ids );
 		} else {
-			$atts['playlist_id'] = isset( $atts['playlist_id'] ) ? $atts['playlist_id'] : '';
+			$atts['playlist_id'] = ! empty( $atts['playlist_id'] ) ? $atts['playlist_id'] : '';
 			$playlist_id         = sanitize_text_field( $atts['playlist_id'] );
 			$js_attr             = 'data-playlist-id="' . esc_attr( $playlist_id ) . '"';
 			$url_attr            = 'playlistId=' . esc_attr( $playlist_id );
@@ -876,7 +876,7 @@ public static function get_experience_player( $atts ) {
 		<!-- Start of Brightcove Experience Player -->
 
 		<?php
-		if ( 'javascript' === $embed ) :
+		if ( 'in-page' === $embed ) :
 			$js_src = self::build_brightcove_src( $account_id, 'experience_' . $experience_id . '/live.js' );
 			?>
 			<div data-experience="<?php echo esc_attr( $experience_id ); ?>"