Merge pull request #339 from 10up/develop

Release 2.8.3

.github/workflows/cypress.yml

@@ -1,7 +1,7 @@
 name: E2E test
 
 env:
-  NODE_VERSION: "12"
+  NODE_VERSION: "16"
 
 on:
   push:

.github/workflows/lint.yml

@@ -15,10 +15,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v2
-    - name: install node v12
+    - name: install node v16
       uses: actions/setup-node@v2
       with:
-        node-version: 12
+        node-version: 16
     - name: npm install
       run: npm install
     - name: eslint

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file, per [the Ke
 
 ## [Unreleased] - TBD
 
+## [2.8.3] - 2022-08-03
+
+### Fixed
+- Playlist experience not rendering correctly in frontend
+- Prevent API calls when Brightcove has not been configured yet
+- Customization options hidden when switching embed type in in-page experiences
+
 ## [2.8.2] - 2022-03-16
 
 ### Fixed
@@ -411,6 +418,7 @@ All notable changes to this project will be documented in this file, per [the Ke
 - First release
 
 [Unreleased]: https://github.com/10up/brightcove-video-connect/compare/master...develop
+[2.8.3]: https://github.com/10up/brightcove-video-connect/compare/2.8.2...2.8.3
 [2.8.2]: https://github.com/10up/brightcove-video-connect/compare/2.8.1...2.8.2
 [2.8.1]: https://github.com/10up/brightcove-video-connect/compare/2.8.0...2.8.1
 [2.8.0]: https://github.com/10up/brightcove-video-connect/compare/2.7.0...2.8.0

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(

assets/js/src/models/upload.js

@@ -13,6 +13,6 @@ var UploadModel = Backbone.Model.extend({
 		var k = 1000;
 		var sizes = ['Bytes', 'KB', 'MB', 'GB'];
 		var i = Math.floor(Math.log(bytes) / Math.log(k));
-		return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
+		return (bytes / k ** i).toPrecision(3) + ' ' + sizes[i];
 	},
 });

assets/js/src/views/media-details.js

@@ -119,9 +119,9 @@ var MediaDetailsView = BrightcoveView.extend({
 		$sizingField.show();
 		$sizingDiv.show();
 
-		if ($sizing === 'responsive' && $embedStyle === 'javascript') {
+		if ($sizing === 'responsive' && $embedStyle === 'in-page') {
 			$height.attr('readonly', true);
-		} else if ($sizing === 'fixed' && $embedStyle === 'javascript') {
+		} else if ($sizing === 'fixed' && $embedStyle === 'in-page') {
 			$height.removeAttr('readonly');
 			$width.removeAttr('readonly');
 		} else {

brightcove-video-connect.php

@@ -3,7 +3,7 @@
  * Plugin Name: Brightcove Video Connect
  * Plugin URI: https://wordpress.org/plugins/brightcove-video-connect/
  * Description: A Brightcove™ Connector for WordPress that leverages enhanced APIs and Brightcove™ Capabilities
- * Version: 2.8.2
+ * Version: 2.8.3
  * Author: 10up
  * Author URI: http://10up.com
  * License: GPLv2+
@@ -31,7 +31,7 @@
  * Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  021.0.2301  USA
  */
 
-define( 'BRIGHTCOVE_VERSION', '2.8.2' );
+define( 'BRIGHTCOVE_VERSION', '2.8.3' );
 define( 'BRIGHTCOVE_URL', plugin_dir_url( __FILE__ ) );
 define( 'BRIGHTCOVE_PATH', dirname( __FILE__ ) . '/' );
 define( 'BRIGHTCOVE_BASENAME', plugin_basename( __FILE__ ) );
@@ -52,7 +52,6 @@ function brightcove_activate() {
  * Uninstall routines should be in uninstall.php
  */
 function brightcove_deactivate() {
-
 	BC_Utility::deactivate();
 }
 

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>
 

includes/class-bc-setup.php

@@ -52,25 +52,28 @@ public static function action_init() {
 
 		// Load Administrative Resources.
 		if ( BC_Utility::current_user_can_brightcove() ) {
-
-			require_once BRIGHTCOVE_PATH . 'includes/admin/api/class-bc-admin-media-api.php';
 			require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-settings-page.php';
-			require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-labels-page.php';
-			require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-playlists-page.php';
-			require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-videos-page.php';
 			require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-sources.php';
-			require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-user-profile.php';
-			require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-templates.php';
-
-			// Load Brightcove API resources.
-			new BC_Admin_Media_API();
 			new BC_Admin_Settings_Page();
-			new BC_Admin_Labels_Page();
-			new BC_Admin_Playlists_Page();
-			new BC_Admin_Videos_Page();
 			new BC_Admin_Sources();
-			new BC_Admin_Templates();
-			new BC_Admin_User_Profile();
+
+			if ( get_option( '_brightcove_accounts' ) ) {
+				require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-labels-page.php';
+				require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-playlists-page.php';
+				require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-videos-page.php';
+
+				require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-admin-user-profile.php';
+				require_once BRIGHTCOVE_PATH . 'includes/admin/class-bc-templates.php';
+				require_once BRIGHTCOVE_PATH . 'includes/admin/api/class-bc-admin-media-api.php';
+				add_action( 'admin_enqueue_scripts', array( 'BC_Setup', 'brightcove_enqueue_assets' ) );
+				// Load Brightcove API resources.
+				new BC_Admin_Media_API();
+				new BC_Admin_Labels_Page();
+				new BC_Admin_Playlists_Page();
+				new BC_Admin_Videos_Page();
+				new BC_Admin_Templates();
+				new BC_Admin_User_Profile();
+			}
 		}
 
 		new BC_Playlists();
@@ -334,22 +337,22 @@ public static function preload_params() {
 		$params['mimeTypes'] = BC_Utility::get_all_brightcove_mimetypes();
 
 		$default_account            = $bc_accounts->get_account_details_for_user();
-		$params['defaultAccount']   = $default_account['hash'];
-		$params['defaultAccountId'] = $default_account['account_id'];
+		$params['defaultAccount']   = ! empty( $default_account['hash'] ) ? $default_account['hash'] : '';
+		$params['defaultAccountId'] = ! empty( $default_account['account_id'] ) ? $default_account['account_id'] : '';
 
 		return $params;
 
 	}
 
 	/**
-	 * Enqueue the admin scripts and styles.
+	 * Enqueue brightcove functionality dependent assets.
+	 *
+	 * @return void
 	 */
-	public static function admin_enqueue_scripts() {
-
+	public static function brightcove_enqueue_assets() {
 		global $wp_version;
 
-		// Use minified libraries if SCRIPT_DEBUG is turned off.
-		$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
+		$suffix = BC_Utility::get_suffix();
 
 		$player_api = new BC_Player_Management_API2();
 		$players    = $player_api->get_all_players();
@@ -412,6 +415,14 @@ public static function admin_enqueue_scripts() {
 		} else {
 			wp_enqueue_media();
 		}
+	}
+
+	/**
+	 * Enqueue the admin scripts and styles.
+	 */
+	public static function admin_enqueue_scripts() {
+		// Use minified libraries if SCRIPT_DEBUG is turned off.
+		$suffix = BC_Utility::get_suffix();
 
 		wp_register_style( 'brightcove-video-connect', esc_url( BRIGHTCOVE_URL . 'assets/css/brightcove_video_connect' . $suffix . '.css' ), array(), BRIGHTCOVE_VERSION );
 		wp_enqueue_style( 'brightcove-video-connect' );
@@ -424,7 +435,7 @@ public static function admin_enqueue_scripts() {
 	 */
 	public static function frontend_enqueue_scripts() {
 		// Use minified libraries if SCRIPT_DEBUG is turned off.
-		$suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min';
+		$suffix = BC_Utility::get_suffix();
 
 		wp_enqueue_style( 'brightcove-pip-css', 'https://players.brightcove.net/videojs-pip/1/videojs-pip.css', [], BRIGHTCOVE_VERSION );
 		wp_register_style( 'brightcove-playlist', BRIGHTCOVE_URL . 'assets/css/brightcove_playlist' . $suffix . '.css', array(), BRIGHTCOVE_VERSION );