feat(Images): load images from cloudfront

bleech · Oct 17, 2024 · 854c572 · 854c572
1 parent 8256363
commit 854c572
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 10 deletions.
diff --git a/components/comparisons/index.php b/components/comparisons/index.php
@@ -28,10 +28,10 @@
 		<canvas class="vrts-comparisons__diff-inidicator" data-vrts-comparisons-diff-inidicator></canvas>
 		<div class="vrts-comparisons__slider" style="--vrts-comparisons-slider-aspect-ratio: <?php echo esc_attr( Image_Helpers::alert_image_aspect_ratio( $data['alert'] ) ); ?>">
 			<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="base">
-				<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( $data['alert']->base_screenshot_url ); ?>" alt="<?php esc_attr_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
+				<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_cloudfront_url( $data['alert']->base_screenshot_url ) ); ?>" alt="<?php esc_attr_e( 'Snapshot', 'visual-regression-tests' ); ?>" />
 			</figure>
 			<figure class="vrts-comparisons__figure" data-vrts-comparisons-slot="target">
-				<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( $data['alert']->target_screenshot_url ); ?>" alt="<?php esc_attr_e( 'Screenshot', 'visual-regression-tests' ); ?>" />
+				<img class="vrts-comparisons__figure-image" <?php echo wp_kses_post( Image_Helpers::alert_image_hwstring( $data['alert'] ) ); ?> crossorigin="anonymous" src="<?php echo esc_url( Image_Helpers::get_cloudfront_url( $data['alert']->target_screenshot_url ) ); ?>" alt="<?php esc_attr_e( 'Screenshot', 'visual-regression-tests' ); ?>" />
 			</figure>
 			<span class="vrts-comparisons__slider-divider"></span>
 			<div class="vrts-comparisons__slider-handle">

diff --git a/includes/core/utilities/class-image-helpers.php b/includes/core/utilities/class-image-helpers.php
@@ -46,4 +46,15 @@ public static function get_comparison_thumbnail_url( $alert ) {
 		$preview_url = maybe_unserialize( $alert->meta )['preview_url'] ?? null;
 		return $preview_url ? $preview_url : $alert->comparison_screenshot_url;
 	}
+
+	/**
+	 * Get the cloudfront URL.
+	 *
+	 * @param string $url The URL.
+	 *
+	 * @return string
+	 */
+	public static function get_cloudfront_url( $url ) {
+		return str_replace( 'https://screenshotter-dev.s3.eu-central-1.amazonaws.com/', 'https://images.vrts.app/', $url );
+	}
 }
diff --git a/includes/features/class-alerts-page.php b/includes/features/class-alerts-page.php
@@ -3,6 +3,7 @@
 namespace Vrts\Features;
 
 use Vrts\Core\Utilities\Date_Time_Helpers;
+use Vrts\Core\Utilities\Image_Helpers;
 use Vrts\List_Tables\Alerts_List_Table;
 use Vrts\Models\Alert;
 use Vrts\Models\Test;
@@ -133,8 +134,8 @@ public function render_page() {
 				'alert_id' => $alert_id,
 				'alert' => $alert,
 				'permalink' => $permalink,
-				'base_screenshot_url' => $alert->base_screenshot_url,
-				'target_screenshot_url' => $alert->target_screenshot_url,
+				'base_screenshot_url' => Image_Helpers::get_cloudfront_url( $alert->base_screenshot_url ),
+				'target_screenshot_url' => Image_Helpers::get_cloudfront_url( $alert->target_screenshot_url ),
 				'target_screenshot_finish_date' => Date_Time_Helpers::get_formatted_date_time( $alert->target_screenshot_finish_date ),
 				'comparison_screenshot_url' => $alert->comparison_screenshot_url,
 				'comparison_id' => $alert->comparison_id,

diff --git a/includes/features/class-enqueue-scripts.php b/includes/features/class-enqueue-scripts.php
@@ -3,6 +3,7 @@
 namespace Vrts\Features;
 
 use Vrts\Core\Utilities\Date_Time_Helpers;
+use Vrts\Core\Utilities\Image_Helpers;
 use Vrts\Models\Test;
 use Vrts\Features\Metaboxes;
 use Vrts\Features\Subscription;
@@ -108,7 +109,7 @@ public function enqueue_block_editor_assets() {
 					'plugin_name' => vrts()->get_plugin_info( 'name' ),
 					'rest_url' => esc_url_raw( rest_url() ),
 					'has_post_alert' => Test::has_post_alert( $post->ID ),
-					'base_screenshot_url' => Test::get_base_screenshot_url( $post->ID ),
+					'base_screenshot_url' => Image_Helpers::get_cloudfront_url( Test::get_base_screenshot_url( $post->ID ) ),
 					'base_screenshot_date' => Date_Time_Helpers::get_formatted_date_time( Test::get_base_screenshot_date( $post->ID ) ),
 					'remaining_tests' => Subscription::get_remaining_tests(),
 					'total_tests' => Subscription::get_total_tests(),

diff --git a/includes/features/class-metaboxes.php b/includes/features/class-metaboxes.php
@@ -3,6 +3,7 @@
 namespace Vrts\Features;
 
 use Vrts\Core\Utilities\Date_Time_Helpers;
+use Vrts\Core\Utilities\Image_Helpers;
 use Vrts\Core\Utilities\Url_Helpers;
 use Vrts\Models\Alert;
 use Vrts\Models\Test;
@@ -139,7 +140,7 @@ public function render_metabox() {
 			'run_tests_checked' => $run_tests_checked,
 			'field_test_status_key' => self::$field_test_status_key,
 			'has_post_alert' => Test::has_post_alert( $post_id ),
-			'base_screenshot_url' => Test::get_base_screenshot_url( $post_id ),
+			'base_screenshot_url' => Image_Helpers::get_cloudfront_url( Test::get_base_screenshot_url( $post_id ) ),
 			'base_screenshot_date' => $base_screenshot_date,
 			'testing_status_instructions' => $testing_status_instructions,
 			'is_new_test' => self::is_new_test( $post_id ),

diff --git a/includes/models/class-test.php b/includes/models/class-test.php
@@ -3,6 +3,7 @@
 namespace Vrts\Models;
 
 use Vrts\Core\Utilities\Date_Time_Helpers;
+use Vrts\Core\Utilities\Image_Helpers;
 use Vrts\Core\Utilities\Url_Helpers;
 use Vrts\Features\Service;
 use Vrts\Features\Subscription;
@@ -1030,18 +1031,18 @@ public static function get_screenshot_data( $test ) {
 			default:
 				$text = sprintf(
 					'<a href="%s" target="_blank" data-id="%d" title="%s">%s</a>',
-					self::get_base_screenshot_url( $test->post_id ),
-					$test->id,
+					esc_url( Image_Helpers::get_cloudfront_url( self::get_base_screenshot_url( $test->post_id ) ) ),
+					esc_attr( $test->id ),
 					esc_html__( 'View this snapshot', 'visual-regression-tests' ),
 					esc_html__( 'View Snapshot', 'visual-regression-tests' )
 				);
 				$instructions = Date_Time_Helpers::get_formatted_relative_date_time( $test->base_screenshot_date );
 				$screenshot = sprintf(
 					'<a href="%s" target="_blank" data-id="%d" title="%s"><img class="figure-image" src="%s" alt="%s"></a>',
-					esc_url( self::get_base_screenshot_url( $test->post_id ) ),
+					esc_url( Image_Helpers::get_cloudfront_url( self::get_base_screenshot_url( $test->post_id ) ) ),
 					esc_attr( $test->id ),
 					esc_html__( 'View this snapshot', 'visual-regression-tests' ),
-					esc_url( self::get_base_screenshot_url( $test->post_id ) ),
+					esc_url( Image_Helpers::get_cloudfront_url( self::get_base_screenshot_url( $test->post_id ) ) ),
 					esc_html__( 'View Snapshot', 'visual-regression-tests' )
 				);
 				break;