Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix picture in picture player #272

Merged
merged 7 commits into from
Jun 28, 2022
Merged

Fix picture in picture player #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2a3478d
Remove default option as only two embeds are available
oscarssanchez May 13, 2022
a243e7e
WIP PIP
oscarssanchez May 17, 2022
c09cbd6
Fixes PIP issues
oscarssanchez Jun 1, 2022
f446cef
Controls and width
oscarssanchez Jun 1, 2022
135892f
Merge branch 'develop' into fix/pip
oscarssanchez Jun 10, 2022
d7680c8
Code feedback
oscarssanchez Jun 28, 2022
4177365
Code feedback
oscarssanchez Jun 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 6 additions & 8 deletions brightcove-video-connect.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,20 +64,18 @@ function brightcove_deactivate() {
require_once BRIGHTCOVE_PATH . 'includes/api/class-bc-oauth.php';
require_once BRIGHTCOVE_PATH . 'includes/api/class-bc-player-management-api.php';

// Wireup actions.
if ( is_admin() ) {
add_action( 'init', array( 'BC_Setup', 'action_init' ) );
add_action( 'init', array( 'BC_Setup', 'bc_check_minimum_wp_version' ) );
} else {

global $bc_accounts;

$bc_accounts = new BC_Accounts();
global $bc_accounts;

add_action( 'admin_notices', array( 'BC_Setup', 'bc_admin_notices' ) );
$bc_accounts = new BC_Accounts();

// Wireup actions.
if ( is_admin() ) {
add_action( 'admin_notices', array( 'BC_Setup', 'bc_admin_notices' ) );
}

add_action( 'init', array( 'BC_Setup', 'action_init' ) );
add_action( 'init', array( 'BC_Video_Shortcode', 'shortcode' ), 11 );
add_action( 'init', array( 'BC_Playlist_Shortcode', 'shortcode' ), 11 );
add_action( 'init', array( 'BC_Experiences_Shortcode', 'shortcode' ), 11 );
Expand Down
10 changes: 6 additions & 4 deletions includes/class-bc-setup.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ class BC_Setup {
* Generic bootstrap function that is hooked into the default `init` method
*/
public static function action_init() {
if ( ! is_admin() ) {
add_action( 'wp_enqueue_scripts', array( 'BC_Setup', 'frontend_enqueue_scripts' ) );
return;
}

global $bc_accounts;

require_once BRIGHTCOVE_PATH . 'includes/class-bc-errors.php';
Expand Down Expand Up @@ -59,14 +64,12 @@ public static function action_init() {
new BC_Admin_Sources();
new BC_Admin_Templates();
new BC_Admin_User_Profile();

}

new BC_Playlists();
new BC_Videos();

add_action( 'admin_enqueue_scripts', array( 'BC_Setup', 'admin_enqueue_scripts' ) );
add_action( 'wp_enqueue_scripts', array( 'BC_Setup', 'frontend_enqueue_scripts' ) );
add_filter( 'upload_mimes', array( 'BC_Setup', 'mime_types' ) );
add_action( 'media_buttons', array( 'BC_Setup', 'add_brightcove_media_button' ) );
add_action( 'admin_footer', array( 'BC_Setup', 'add_brightcove_media_modal_container' ) );
Expand Down Expand Up @@ -387,13 +390,12 @@ 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';

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() );
wp_enqueue_style( 'brightcove-playlist' );

}

public static function mime_types( $mime_types ) {
Expand Down
115 changes: 46 additions & 69 deletions includes/class-bc-utility.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -834,57 +834,62 @@ public static function get_video_player( $atts ) {
ob_start();
?>
<!-- Start of Brightcove Player -->

<?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 ); ?>; ">
<video
data-video-id="<?php echo esc_attr( $id ); ?>" data-account="<?php echo esc_attr( $account_id ); ?>"

<!-- The picture-in-picture container. This is required! -->
<div class="vjs-pip-container">
<!-- The player embed code -->
<video-js 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="video-js"
data-embed="default"
controls <?php echo esc_attr( $playsinline ); ?> <?php echo esc_attr( $autoplay ); ?> <?php echo esc_attr( $mute ); ?>
style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
</video>

data-video-id="<?php echo esc_attr( $id ); ?>"
width="<?php echo esc_attr( $width ); ?>" height="315">
</video-js>
<script src="<?php echo esc_url( $js_src ); ?>"></script>
</div>
</div>

<?php
endif;

elseif ( 'iframe' === $embed ) :
<!-- Script for the picture-in-picture plugin. -->
<script src="//players.brightcove.net/videojs-pip/1/videojs-pip.min.js"></script>
<script>
videojs.getPlayer('<?php echo esc_attr( $id ); ?>').ready(function() {
var myPlayer = this;
myPlayer.pip();
});
</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 ); ?>; ">
<video
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="video-js"
controls <?php echo esc_attr( $playsinline ); ?> <?php echo esc_attr( $autoplay ); ?> <?php echo esc_attr( $mute ); ?>
style="width: <?php echo 'responsive' !== $sizing ? esc_attr( $width ) : '100%'; ?>; height: <?php echo esc_attr( $height ); ?>; position: absolute; top: 0; bottom: 0; right: 0; left: 0;">
</video>

<script src="<?php echo esc_url( $js_src ); ?>"></script>
</div>
</div>
<?php
if ( ! empty( $autoplay ) ) {
$autoplay = '&' . $autoplay;
}
if ( ! empty( $mute ) ) {
$mute = '&' . $mute;
}
$iframe_src = 'https://players.brightcove.net/' . $account_id . '/' . $player_id . '_default/index.html?videoId=' . $id . '&usage=' . self::get_usage_data() . 'iframe' . $autoplay . $mute;
?>
endif;
elseif ( 'iframe' === $embed ) :
if ( ! empty( $autoplay ) ) {
$autoplay = '&' . $autoplay;
}
if ( ! empty( $mute ) ) {
$mute = '&' . $mute;
}
$iframe_src = 'https://players.brightcove.net/' . $account_id . '/' . $player_id . '_default/index.html?videoId=' . $id . '&usage=' . self::get_usage_data() . 'iframe' . $autoplay . $mute;
?>

<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 ); ?>; ">
Expand All @@ -897,34 +902,8 @@ class="vjs-fluid"
</iframe>
</div>
</div>
<?php else : ?>

<?php if ( '0' === $width && '0' === $height ) : ?>
<div style="display: block; position: relative; max-width: 100%;"><div style="padding-top: 56.25%;">
<?php endif; ?>

<?php
printf(
'<iframe src="//players.brightcove.net/%s/%s_default/index.html?%sId=%s&%s" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" style="width: %s; height: %s;%s"></iframe>',
$account_id,
$player_id,
'video',
$id,
esc_attr( self::get_usage_data() ) . 'iframe',
( '0' === $width ) ? '100%' : $width . 'px',
( '0' === $height ) ? '100%' : $height . 'px',
( '0' === $width && '0' === $height ) ? 'position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;' : ''
);
?>

<?php if ( '0' === $width && '0' === $height ) : ?>
</div></div>
<?php endif; ?>

<?php endif; ?>

<!-- End of Brightcove Player -->

<?php
$html = ob_get_clean();

Expand All @@ -939,9 +918,7 @@ class="vjs-fluid"
* @param int $width The Width to display.
* @param int $height The height to display.
*/
$html = apply_filters( 'brightcove_video_html', $html, 'video', $id, $account_id, $player_id, $width, $height );

return $html;
return apply_filters( 'brightcove_video_html', $html, 'video', $id, $account_id, $player_id, $width, $height );
}

/**
Expand Down