Skip to content

Commit

Permalink
Refactor CSS for AMP support and fix Vimeo thumbnail fetching
Browse files Browse the repository at this point in the history 
- Refactored the CSS in youtubefancybox-amp.css to support AMP pages. Made changes to the background color, box shadow, and border radius of the lightbox. Also added a close button with hover effect.

- Updated the Vimeo thumbnail fetching in class-vimeo.php to handle errors. If there is an error in fetching the thumbnail, an error message is displayed instead.

- Updated the version number in youtubefancybox.php to 2.6.3 and added support for PHP 8.1.
  • Loading branch information
@milindmore22
milindmore22 committed Oct 14, 2024
1 parent 1fba327 commit 927eb4d
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 17 deletions.
42 changes: 41 additions & 1 deletion css/youtubefancybox-amp.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* The File contains AMP specific CSS
*/
.youtubefancybox-amp-lightbox {
background: rgba(0,0,0,0.8);
background: #fff;
width: 80%;
height: 80%;
position: fixed;
Expand All @@ -11,4 +11,44 @@
justify-content: center;
left: 10%;
top:10%;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-radius: 2px;
}
.youtubefancybox-amp-lightbox-close{
position: absolute;
bottom: 0;
right: 0;
background: url(images/controls.png) no-repeat -25px 0;
width: 25px;
height: 25px;
text-indent: -9999px;
z-index: 100;
cursor: pointer;
}

.youtubefancybox-amp-lightbox-close:hover{
background-color: #bbb;
}

html[amp] amp-lightbox.ytfancybox-lightbox{
max-width: 100%;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
width: 100%;
background-color: #070707;
opacity: 1;
background: repeating-linear-gradient( -45deg, #161616, #161616 2px, #070707 2px, #070707 10px );
}

@media (min-width: 700px) {
.entry-content > amp-lightbox.alignfull:not(.wp-block-group.has-background) {
margin: 0;
}
}

amp-youtube, amp-vimeo{
margin: 25px 10px;
background: #fff;
}
26 changes: 19 additions & 7 deletions lib/class-vimeo.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,16 @@ public function vimeofancybox_url( $attr ) {
/**
* Get thumbnail for vimeo video.
*/
$response = wp_remote_get( $embed_image_url );
$response = wp_remote_get( $embed_image_url );

if ( \is_wp_error( $response ) ) {
// Return error messages.
if ( ! empty( $response ) ) {
return '<br /><span style="clear:both;color:red">' . $response->get_error_message() . '</span>';
}
return '<br /><span style="clear:both;color:red">' . esc_html__( 'Error in fetching Vimeo Video Thumbnail', 'ytubebox' ) . '</span>';
}

$response_body = wp_remote_retrieve_body( $response );
$obj = json_decode( $response_body );

Expand All @@ -163,25 +172,28 @@ public function vimeofancybox_url( $attr ) {
}

ob_start();
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {

$light_box_id = wp_unique_id( 'youtubefancybox-vimeo-lightbox-' );
?>
<amp-lightbox id="<?php echo esc_attr( $light_box_id ); ?>" layout="nodisplay">
<amp-lightbox class="ytfancybox-lightbox alignfull" id="<?php echo esc_attr( $light_box_id ); ?>" layout="nodisplay">
<div class="youtubefancybox-amp-lightbox" role="button" tabindex="0">
<span role="button" tabindex="0" on="tap:<?php echo esc_attr( $light_box_id ); ?>.close" class="youtubefancybox-amp-lightbox-close">X</span>
<amp-vimeo width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="fill" data-videoid="<?php echo esc_attr( $attr['videoid'] ); ?>" <?php echo ( ! empty( $autoplay_option ) && 'yes' === $autoplay_option ) ? 'autoplay' : ''; ?>>
</amp-vimeo>
</div>
</amp-lightbox>
<amp-img on="tap:<?php echo esc_attr( $light_box_id ); ?>" src="<?php echo esc_url( $thumbnail_url ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="responsive">
<amp-img class="aligncenter" on="tap:<?php echo esc_attr( $light_box_id ); ?>" src="<?php echo esc_url( $thumbnail_url ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="intrinsic">
</amp-img>
<?php
return ob_get_clean();
}
?>
<a class="vimeo" href="<?php echo esc_url( $embed_url ); ?>">
<img src="<?php echo esc_url( $thumbnail_url ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>"/>
</a>
<div class="youtubefancybox-lightbox-container aligncenter">
<a class="vimeo" href="<?php echo esc_url( $embed_url ); ?>">
<img src="<?php echo esc_url( $thumbnail_url ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>"/>
</a>
</div>
<?php
return ob_get_clean();
}
Expand Down
12 changes: 7 additions & 5 deletions lib/class-youtube.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,26 +95,28 @@ public function youtubefancybox_url( $attr ) {

ob_start();

if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
$light_box_id = wp_unique_id( 'youtubefancybox-youtube-lightbox-' );
?>
<amp-lightbox id="<?php echo esc_attr( $light_box_id ); ?>" layout="nodisplay">
<amp-lightbox class="ytfancybox-lightbox alignfull" id="<?php echo esc_attr( $light_box_id ); ?>" layout="nodisplay">
<div class="youtubefancybox-amp-lightbox" role="button" tabindex="0">
<span role="button" tabindex="0" on="tap:<?php echo esc_attr( $light_box_id ); ?>.close" class="youtubefancybox-amp-lightbox-close">X</span>
<amp-youtube width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="fill" data-videoid="<?php echo esc_attr( $attr['videoid'] ); ?>" <?php echo ( ! empty( $autoplay_option ) && 'yes' === $autoplay_option ) ? 'autoplay' : ''; ?>>
</amp-youtube>
</div>
</amp-lightbox>
<amp-img on="tap:<?php echo esc_attr( $light_box_id ); ?>" src="<?php echo esc_url( $embed_image ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="responsive">
<amp-img class="aligncenter" on="tap:<?php echo esc_attr( $light_box_id ); ?>" src="<?php echo esc_url( $embed_image ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" layout="intrinsic">
</amp-img>
<?php
return ob_get_clean();
}
?>
<div class="youtubefancybox-lightbox-container aligncenter">
<a class="youtube" href="<?php echo esc_url( $embed_url ); ?>">
<img src="<?php echo esc_url( $embed_image ); ?>" width="<?php echo esc_attr( $attr['width'] ); ?>" height="<?php echo esc_attr( $attr['height'] ); ?>" />
</a>
<?php

</div>
<?php
return ob_get_clean();

}
Expand Down
8 changes: 4 additions & 4 deletions youtubefancybox.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
* Description: Display thumbnail of Youtube and Vimeo videos and on clicking on thumbnail it will open in popupbox and play video.
* Author: Milind More
* Author URI: https://milindmore.wordpress.com/
* Version: 2.6.2
* Version: 2.7.0
* Text Domain: ytubebox
* Domain Path: /languages/
* Requires PHP: 5.6
* Requires PHP: 8.1
*
* @author milind
* @package ytubefancybox
Expand All @@ -33,7 +33,7 @@ class Youtubefanybox {
*/
public function __construct() {

$this->version = '2.6.2';
$this->version = '2.6.3';

/**
* If You are admin you will get admin settings
Expand Down Expand Up @@ -102,7 +102,7 @@ public function youtubefancybox_adminjs_file( $hook ) {
public function youtubefancybox_js_file() {

// Iif it's AMP page then We will be using AMP components instead.
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
if ( function_exists( 'amp_is_request' ) && amp_is_request() ) {
wp_enqueue_style( 'youtubefancybox-amp', plugins_url( 'css/youtubefancybox-amp.css', __FILE__ ), '', $this->version );
return;
}
Expand Down

0 comments on commit 927eb4d

Please sign in to comment.