Redesign Dashboard Widget

src/class-tiny-dashboard.php

@@ -0,0 +1,177 @@
+<?php
+/*
+* Tiny Compress Images - WordPress plugin.
+* Copyright (C) 2015-2023 Tinify B.V.
+*
+* This program is free software; you can redistribute it and/or modify it
+* under the terms of the GNU General Public License as published by the Free
+* Software Foundation; either version 2 of the License, or (at your option)
+* any later version.
+*
+* This program is distributed in the hope that it will be useful, but WITHOUT
+* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+* more details.
+*
+* You should have received a copy of the GNU General Public License along
+* with this program; if not, write to the Free Software Foundation, Inc., 51
+* Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+*/
+class Tiny_Dashboard extends Tiny_WP_Base {
+
+	/**
+	 * @var Tiny_Settings settings
+	 */
+	private $settings;
+
+	/**
+	 * @var Tiny_Background_Optimize
+	 */
+	private $background_optimizer;
+
+	/**
+	 * @param Tiny_Settings            $settings
+	 * @param Tiny_Background_Optimize $background_optimizer
+	 */
+	public function __construct( $settings, $background_optimizer ) {
+		parent::__construct();
+		$this->settings             = $settings;
+		$this->background_optimizer = $background_optimizer;
+	}
+
+	public function ajax_init() {
+		add_action(
+			'wp_ajax_tiny_dashboard_widget',
+			array( $this, 'ajax_dashboard_widget' )
+		);
+	}
+
+	public function admin_init() {
+		if ( current_user_can( 'upload_files' ) ) {
+			add_action(
+				'wp_dashboard_setup',
+				array( $this, 'add_dashboard_widget' )
+			);
+		}
+	}
+
+	public function add_dashboard_widget() {
+		wp_enqueue_style(
+			self::NAME . '_dashboard_widget',
+			plugins_url( '/css/dashboard-widget.css', __FILE__ ),
+			array(),
+			Tiny_Plugin::version()
+		);
+
+		wp_enqueue_script(
+			self::NAME . '_dashboard_widget',
+			plugins_url( '/js/dashboard-widget.js', __FILE__ ),
+			array(),
+			Tiny_Plugin::version(),
+			true
+		);
+
+		wp_add_dashboard_widget(
+			$this->get_prefixed_name( 'dashboard_widget' ),
+			esc_html__( 'TinyPNG - JPEG, PNG & WebP image compression', 'tiny-compress-images' ),
+			array( $this, 'add_widget_view' )
+		);
+	}
+
+	/**
+	 * The statistics scan the whole library, so the dashboard shows a spinner
+	 * and the widget JS fetches the real content from ajax_dashboard_widget().
+	 */
+	public function add_widget_view() {
+		include __DIR__ . '/views/dashboard-widget-loading.php';
+	}
+
+	public function ajax_dashboard_widget() {
+		if ( ! check_ajax_referer( 'tiny-dashboard-widget', '_nonce', false ) ||
+			! current_user_can( 'upload_files' ) ) {
+			status_header( 403 );
+			wp_die( -1, 403 );
+		}
+
+		$stats  = Tiny_Bulk_Optimization::get_optimization_statistics( $this->settings );
+		$widget = $this->get_widget_data( $stats );
+		include __DIR__ . '/views/dashboard-widget.php';
+		wp_die();
+	}
+
+	/**
+	 * Logic for the view
+	 *
+	 * @param array $optimization_stats See Tiny_Bulk_Optimization::get_optimization_statistics().
+	 * @return array
+	 */
+	public function get_widget_data( $optimization_stats ) {
+		$images_total     = max( 0, intval( $optimization_stats['uploaded-images'] ) );
+		$images_remaining = min(
+			$images_total,
+			count( $optimization_stats['available-for-optimization'] )
+		);
+		$images_optimized = $images_total - $images_remaining;
+		$bytes_saved      = $optimization_stats['unoptimized-library-size']
+			- $optimization_stats['optimized-library-size'];
+
+		$percentage = $images_total > 0
+			? intval( floor( $images_optimized / $images_total * 100 ) )
+			: 0;
+
+		$estimated_credit_use = intval( $optimization_stats['estimated_credit_use'] );
+
+		// Only free accounts have a limited number of credits, including
+		// free accounts that bought a credit bundle.
+		$remaining_credits   = $this->settings->get_remaining_credits();
+		$has_limited_credits = $this->settings->is_on_free_plan() &&
+			is_numeric( $remaining_credits );
+		$remaining_credits   = $has_limited_credits ? intval( $remaining_credits ) : null;
+
+		// How many of the remaining images the credits still cover.
+		$images_affordable = 0;
+		if ( $has_limited_credits && $images_remaining > 0 && $estimated_credit_use > 0 ) {
+			$images_affordable = intval(
+				floor( $remaining_credits / ( $estimated_credit_use / $images_remaining ) )
+			);
+		}
+
+		$seconds_left = null;
+		if ( ! $this->settings->has_api_key() ) {
+			$state = 'not_connected';
+		} elseif ( $this->settings->refresh_api_key_pending() ) {
+			$state = 'pending';
+		} elseif ( 0 === $images_total ) {
+			$state = 'empty';
+		} elseif ( $this->background_optimizer->is_running() ) {
+			$state = 'compressing';
+
+			$seconds_left = intval(
+				round( $estimated_credit_use / Tiny_Background_Optimize::WORKERS )
+			);
+		} elseif ( 0 === $images_remaining ) {
+			$state = 'done';
+		} elseif ( 0 === $remaining_credits ) {
+			$state = 'out_of_credits';
+		} elseif ( $has_limited_credits && $estimated_credit_use > $remaining_credits ) {
+			$state = 'credits_short';
+		} else {
+			$state = 'ready';
+		}
+
+		return array(
+			'state'                => $state,
+			'images_optimized'     => $images_optimized,
+			'images_total'         => $images_total,
+			'images_remaining'     => $images_remaining,
+			'images_affordable'    => $images_affordable,
+			'bytes_saved'          => max( 0, intval( $bytes_saved ) ),
+			'percentage'           => $percentage,
+			'estimated_credit_use' => $estimated_credit_use,
+			'remaining_credits'    => $remaining_credits,
+			'seconds_left'         => $seconds_left,
+			'email_address'        => $this->settings->get_email_address(),
+			'auto_compress'        => $this->settings->auto_compress_enabled(),
+		);
+	}
+}

src/class-tiny-plugin.php

@@ -48,6 +48,7 @@ public function __construct() {
 		$this->settings = new Tiny_Settings();
 		new Tiny_Conversion( $this->settings );
 		$this->background_optimizer = new Tiny_Background_Optimize( $this->settings );
+		new Tiny_Dashboard( $this->settings, $this->background_optimizer );
 	}
 
 	public function set_compressor( $compressor ) {
@@ -125,11 +126,6 @@ public function ajax_init() {
 			$this->get_method( 'ajax_bulk_queue_optimize_next' )
 		);
 
-		add_action(
-			'wp_ajax_tiny_get_optimization_statistics',
-			$this->get_method( 'ajax_optimization_statistics' )
-		);
-
 		add_action(
 			'wp_ajax_tiny_get_compression_status',
 			$this->get_method( 'ajax_compression_status' )
@@ -178,11 +174,6 @@ public function ajax_init() {
 	}
 
 	public function admin_init() {
-		add_action(
-			'wp_dashboard_setup',
-			$this->get_method( 'add_dashboard_widget' )
-		);
-
 		add_action(
 			'admin_enqueue_scripts',
 			$this->get_method( 'enqueue_scripts' )
@@ -803,15 +794,6 @@ public function ajax_bulk_queue_cancel() {
 		wp_send_json_success();
 	}
 
-	public function ajax_optimization_statistics() {
-		if ( check_ajax_referer( 'tiny-compress', '_nonce', false ) &&
-			current_user_can( 'upload_files' ) ) {
-			$stats = Tiny_Bulk_Optimization::get_optimization_statistics( $this->settings );
-			echo json_encode( $stats );
-		}
-		exit();
-	}
-
 	public function ajax_compression_status() {
 		$response = $this->validate_ajax_attachment_request();
 
@@ -952,61 +934,13 @@ public function render_bulk_optimization_page() {
 		$email_address       = $this->settings->get_email_address();
 		$bulk_running        = $this->background_optimizer->is_running();
 
-		include __DIR__ . '/views/bulk-optimization.php';
-	}
-
-	public function add_dashboard_widget() {
-		wp_enqueue_style(
-			self::NAME . '_chart',
-			plugins_url( '/css/optimization-chart.css', __FILE__ ),
-			array(),
-			self::version()
-		);
-
-		wp_enqueue_style(
-			self::NAME . '_dashboard_widget',
-			plugins_url( '/css/dashboard-widget.css', __FILE__ ),
-			array(),
-			self::version()
-		);
-
-		wp_register_script(
-			self::NAME . '_dashboard_widget',
-			plugins_url( '/js/dashboard-widget.js', __FILE__ ),
-			array(),
-			self::version(),
-			true
+		/* The dashboard widget links here with a nonce to start right away. */
+		$start_on_load = isset( $_GET['start'], $_GET['_wpnonce'] ) && wp_verify_nonce(
+			sanitize_text_field( wp_unslash( $_GET['_wpnonce'] ) ),
+			'tiny-bulk-start'
 		);
 
-		/*
-		This might be deduplicated with the admin script localization, but
-			the order of including scripts is sometimes different. So in that
-			case we need to make sure that the order of inclusion is correct. */
-		wp_localize_script(
-			self::NAME . '_dashboard_widget',
-			'tinyCompressDashboard',
-			array(
-				'nonce' => wp_create_nonce( 'tiny-compress' ),
-			)
-		);
-
-		wp_enqueue_script( self::NAME . '_dashboard_widget' );
-
-		$widget_title = esc_html__(
-			'TinyPNG Image Optimization – Image Compression JPEG & PNG | Convert to WebP & AVIF',
-			'tiny-compress-images'
-		);
-
-		wp_add_dashboard_widget(
-			$this->get_prefixed_name( 'dashboard_widget' ),
-			$widget_title,
-			$this->get_method( 'add_widget_view' )
-		);
-	}
-
-	public function add_widget_view() {
-		$admin_colors = self::retrieve_admin_colors();
-		include __DIR__ . '/views/dashboard-widget.php';
+		include __DIR__ . '/views/bulk-optimization.php';
 	}
 
 	private static function retrieve_admin_colors() {

src/class-tiny-settings.php

@@ -224,6 +224,10 @@ protected function get_api_key() {
 		}
 	}
 
+	public function has_api_key() {
+		return (bool) $this->get_api_key();
+	}
+
 	protected function get_api_key_pending() {
 		if ( defined( 'TINY_API_KEY' ) ) {
 			return false;
@@ -236,6 +240,24 @@ protected function clear_api_key_pending() {
 		delete_option( self::get_prefixed_name( 'api_key_pending' ) );
 	}
 
+	/**
+	 * Whether the API key still waits for its activation link to be opened.
+	 * Asks the API only while the key is pending, and clears the flag once
+	 * the key works.
+	 *
+	 * @return bool
+	 */
+	public function refresh_api_key_pending() {
+		if ( ! $this->get_api_key_pending() ) {
+			return false;
+		}
+		if ( $this->compressor->get_status()->ok ) {
+			$this->clear_api_key_pending();
+			return false;
+		}
+		return true;
+	}
+
 	protected static function get_intermediate_size( $size ) {
 		/*
 		Inspired by
@@ -846,18 +868,18 @@ public function render_account_status() {
 				include __DIR__ . '/views/account-status-create-simple.php';
 			}
 		} else {
-			$status          = $this->compressor->get_status();
-			$status->pending = false;
-			if ( $status->ok ) {
-				if ( $this->get_api_key_pending() ) {
-					$this->clear_api_key_pending();
-				}
-			} elseif ( $this->get_api_key_pending() ) {
-					$status->ok      = true;
-					$status->pending = true;
-					$status->message = (
-						'An email has been sent to activate your account'
-					);
+			if ( $this->refresh_api_key_pending() ) {
+				$status = (object) array(
+					'ok'      => true,
+					'pending' => true,
+					'message' => __(
+						'An email has been sent to activate your account',
+						'tiny-compress-images'
+					),
+				);
+			} else {
+				$status          = $this->compressor->get_status();
+				$status->pending = false;
 			}
 			include __DIR__ . '/views/account-status-connected.php';
 		}