Merge pull request #154 from 10up/feature/picture-in-picture

Feature/picture in picture

assets/js/src/block.js

@@ -36,11 +36,16 @@
 			var paddingTop 	 = props.attributes.padding_top || '';
 			var autoplay     = props.attributes.autoplay || '';
 			var playsinline  = props.attributes.playsinline || '';
+			var pictureinpicture  = props.attributes.picture_in_picture || '';
 			var embed        = props.attributes.embed || '';
 
 			// Sanitize the IDs we need
 			var sanitizeIds = function( id ) {
-				return id.replace( /\D/g, '' );
+				if( 0 === id.indexOf( 'ref:' ) ) {
+					return id;
+				} else {
+					return id.replace( /\D/g, '' );
+				}
 			};
 
 			/**
@@ -68,6 +73,7 @@
 					padding_top: '',
 					autoplay: '',
 					playsinline: '',
+                    picture_in_picture: '',
 					embed: attrs.named.embed
 				};
 
@@ -76,6 +82,7 @@
 					setAttrs.video_id = sanitizeIds( attrs.named.video_id );
 					setAttrs.autoplay = attrs.named.autoplay;
 					setAttrs.playsinline = attrs.named.playsinline;
+                    setAttrs.picture_in_picture = attrs.named.picture_in_picture;
 					setAttrs.padding_top = attrs.named.padding_top;
 				} else if ( '[bc_playlist' === attrs.numeric[0] ) {
 					setAttrs.player_id = attrs.named.player_id;

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

@@ -19,8 +19,9 @@ var MediaDetailsView = BrightcoveView.extend(
 			'click .brightcove.back.button' :    'triggerCancelPreviewMedia',
 			'click .playlist-details input[name="embed-style"]' :  'togglePlaylistSizing',
 			'change #aspect-ratio' : 'toggleUnits',
+			'change #pictureinpicture' : 'togglePictureinpicture',
 			'change .experience-details input[name="sizing"],.experience-details input[name="embed-style"]' : 'toggleExperienceUnits',
-			'change #video-player, #autoplay, #playsinline, #mute, input[name="embed-style"], input[name="sizing"], #aspect-ratio, #width, #height' : 'generateShortcode',
+			'change #video-player, #autoplay, #pictureinpicture, #playsinline, #mute, input[name="embed-style"], input[name="sizing"], #aspect-ratio, #width, #height' : 'generateShortcode',
 			'change #generate-shortcode' : 'toggleShortcodeGeneration',
 		},
 
@@ -71,6 +72,18 @@ var MediaDetailsView = BrightcoveView.extend(
 			}
 		},
 
+		togglePictureinpicture: function( event ) {
+			var $iframeRadioButton = $( '#embed-style-iframe' ),
+				$pictureinpicture_checked = $( '#pictureinpicture' ).is( ':checked' );
+
+				if( $pictureinpicture_checked ) {
+					$iframeRadioButton.prop('checked', false);
+					$iframeRadioButton.attr('disabled',true);
+				} else {
+					$iframeRadioButton.attr('disabled',false);
+				}
+		},
+
     toggleExperienceUnits: function( event ) {
       var $sizingField=$( 'input[name="sizing"]:checked' );
       var $sizing = $sizingField.val();
@@ -122,6 +135,7 @@ var MediaDetailsView = BrightcoveView.extend(
 				playerId = $( '#video-player' ).val(),
 				autoplay = ( $( '#autoplay' ).is( ':checked' ) ) ? 'autoplay': '',
 				playsinline = ( $( '#playsinline' ).is( ':checked' ) ) ? 'playsinline': '',
+				pictureinpicture = ( $( '#pictureinpicture' ).is( ':checked' ) ) ? 'pictureinpicture': '',
 				mute = ( $( '#mute' ).is( ':checked' ) ) ? 'muted': '',
 				embedStyle = $( 'input[name="embed-style"]:checked' ).val(),
 				sizing = $( 'input[name="sizing"]:checked' ).val(),
@@ -156,7 +170,7 @@ var MediaDetailsView = BrightcoveView.extend(
 
 			shortcode = '[bc_video video_id="' + videoId + '" account_id="' + accountId + '" player_id="' + playerId + '" ' +
 				'embed="' + embedStyle + '" padding_top="' + paddingTop + '%" autoplay="' + autoplay + '" ' +
-				'min_width="' + minWidth + '" playsinline="' + playsinline + '" max_width="' + maxWidth + '" ' +
+				'min_width="' + minWidth + '" playsinline="' + playsinline + '" picture_in_picture="' + pictureinpicture + '" max_width="' + maxWidth + '" ' +
 				'mute="' + mute + '" width="' + width + '" height="' + height + '"' +
 				' ]';
 

includes/admin/class-bc-templates.php

@@ -628,7 +628,12 @@ public function add_templates() {
 						<div class="right-col">
 							<input type="checkbox" id="playsinline" name="playsinline">
 						</div>
-
+                        <label for="pictureinpicture">
+                            <?php esc_html_e( 'Enable Picture in Picture: ', 'brightcove' ); ?>
+                        </label>
+                        <div class="right-col">
+                            <input type="checkbox" id="pictureinpicture" name="pictureinpicture">
+                        </div>
                         <label for="embed-style-in-page">
                             <?php esc_html_e( 'Embed Style: ', 'brightcove' ); ?>
                         </label>

includes/class-bc-setup.php

@@ -149,6 +149,9 @@ public static function action_init_all() {
 					'playsinline'    => array(
 						'type' => 'string',
 					),
+					'picture_in_picture'    => array(
+						'type' => 'string',
+					),
 					'height'      => array(
 						'type' => 'string',
 					),

includes/class-bc-utility.php

@@ -41,13 +41,20 @@ public static function current_user_can_brightcove() {
 	}
 
 	/**
+	 * Sanitize the ID.
+	 *
+	 * Allow for id's in the format ref: and if not in this format, make sure we don't allow any other than numeric.
+	 *
 	 * @param $numeric_string
 	 *
 	 * @return string containing integers only
 	 */
-	public static function sanitize_id( $numeric_string ) {
-
-		return is_string( $numeric_string ) ? sanitize_text_field( preg_replace( '/\D/', '', $numeric_string ) ) : "";
+	public static function sanitize_id( $id ) {
+		if ( 0 === strpos( $id, 'ref:' ) ) {
+			return $id;
+		} else {
+			return is_string( $id ) ? sanitize_text_field( preg_replace( '/\D/', '', $id ) ) : "";
+		}
 	}
 
 	/**
@@ -905,6 +912,23 @@ public static function get_video_player( $atts ) {
 		<?php
 		if ( 'in-page' === $embed ) :
 			$js_src = 'https://players.brightcove.net/' . $account_id . '/' . $player_id . '_default/index.min.js';
+			if( 'pictureinpicture' === $atts['picture_in_picture'] ) :
+				?>
+				<div style="max-width: <?php echo esc_attr( $width ); ?>;">
+					<div class="vjs-pip-container">
+						<video-js
+								data-video-id="<?php echo esc_attr( $id ); ?>" data-account="<?php echo esc_attr( $account_id ); ?>"
+								data-player="<?php echo esc_attr( $player_id ); ?>"
+								data-usage="<?php echo esc_attr( self::get_usage_data() ); ?>javascript"
+								data-embed="default"
+								class="vjs-fluid"
+								controls <?php echo esc_attr( $playsinline ); ?> <?php echo esc_attr( $autoplay ); ?> <?php echo esc_attr( $mute ); ?>>
+						</video-js>
+					</div>
+				</div>
+				<script src="<?php echo esc_url( $js_src ); ?>"></script>
+			<?php
+			else :
 			?>
 			<div style="display: block; position: relative; min-width: <?php echo esc_attr( $min_width ); ?>; max-width: <?php echo esc_attr( $max_width ); ?>;">
 				<div style="padding-top: <?php echo esc_attr( $padding_top ); ?>; ">
@@ -921,7 +945,9 @@ public static function get_video_player( $atts ) {
 				</div>
 			</div>
 
-		<?php elseif ( 'iframe' === $embed ) : ?>
+		<?php endif;
+
+            elseif ( 'iframe' === $embed ) : ?>
 			<?php
 			if ( ! empty( $autoplay ) ) {
 				$autoplay = '&' . $autoplay;

includes/class-bc-video-shortcode.php

@@ -36,6 +36,7 @@ public static function bc_video( $atts ) {
 			'height'      => 0,
 			'width'       => 0,
 			'playsinline' => '',
+            'picture_in_picture' => '',
 		);
 
 		$atts = shortcode_atts( $defaults, $atts, 'bc_video' );