From 927eb4d85bc26bd4037ca4f1c4cca1426ce35242 Mon Sep 17 00:00:00 2001
From: Milind More <milindmore22@gmail.com>
Date: Mon, 14 Oct 2024 22:48:01 +0530
Subject: [PATCH 1/2] Refactor CSS for AMP support and fix Vimeo thumbnail
 fetching

- 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.
---
 css/youtubefancybox-amp.css | 42 ++++++++++++++++++++++++++++++++++++-
 lib/class-vimeo.php         | 26 ++++++++++++++++-------
 lib/class-youtube.php       | 12 ++++++-----
 youtubefancybox.php         |  8 +++----
 4 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/css/youtubefancybox-amp.css b/css/youtubefancybox-amp.css
index 6001779..1f22cc1 100644
--- a/css/youtubefancybox-amp.css
+++ b/css/youtubefancybox-amp.css
@@ -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;
@@ -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;
 }
diff --git a/lib/class-vimeo.php b/lib/class-vimeo.php
index 587d002..c630fd1 100644
--- a/lib/class-vimeo.php
+++ b/lib/class-vimeo.php
@@ -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 );
 
@@ -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();
 		}
diff --git a/lib/class-youtube.php b/lib/class-youtube.php
index cd480e2..208f294 100644
--- a/lib/class-youtube.php
+++ b/lib/class-youtube.php
@@ -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();
 
 		}
diff --git a/youtubefancybox.php b/youtubefancybox.php
index 99b582e..66b5e9c 100644
--- a/youtubefancybox.php
+++ b/youtubefancybox.php
@@ -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
@@ -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
@@ -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;
 			}

From 9d749c4a87b8f916ad3840dab1b11ea65827f590 Mon Sep 17 00:00:00 2001
From: Milind More <milindmore22@gmail.com>
Date: Mon, 14 Oct 2024 22:48:48 +0530
Subject: [PATCH 2/2] Update version to 2.7.0

---
 youtubefancybox.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/youtubefancybox.php b/youtubefancybox.php
index 66b5e9c..36368e1 100644
--- a/youtubefancybox.php
+++ b/youtubefancybox.php
@@ -33,7 +33,7 @@ class Youtubefanybox {
 		 */
 		public function __construct() {
 
-			$this->version = '2.6.3';
+			$this->version = '2.7.0';
 
 			/**
 			 * If You are admin you will get admin settings