WIP Dashboard Widget

src/class-tiny-dashboard.php

@@ -0,0 +1,155 @@
+<?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 {
+
+	const LOW_CREDITS_THRESHOLD = 100;
+
+	/**
+	 * @var Tiny_Settings settings
+	 */
+	private $settings;
+
+	/**
+	 * @param Tiny_Settings $settings
+	 */
+	public function __construct( $settings ) {
+		parent::__construct();
+		$this->settings = $settings;
+	}
+
+	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_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' )
+		);
+	}
+
+	public function add_widget_view() {
+		$stats         = Tiny_Bulk_Optimization::get_optimization_statistics( $this->settings );
+		$widget        = $this->get_widget_data( $stats );
+		$email_address = $this->settings->get_email_address();
+		include __DIR__ . '/views/dashboard-widget.php';
+	}
+
+	/**
+	 * 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;
+
+		$label = self::get_label_text( $percentage );
+
+		if ( 0 === $images_total ) {
+			$status = 'empty';
+			$panda  = 'panda-waiting.png';
+		} elseif ( 0 === $images_remaining ) {
+			$status = 'done';
+			$panda  = 'panda-laying.png';
+		} else {
+			$status = 'in_progress';
+			$panda  = 'panda-waiting.png';
+		}
+
+		// 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;
+
+		if ( ! $this->settings->has_api_key() ) {
+			$notice = 'no_api_key';
+		} elseif ( null !== $remaining_credits &&
+			$remaining_credits < self::LOW_CREDITS_THRESHOLD ) {
+			$notice = 'low_credits';
+		} else {
+			$notice = null;
+		}
+
+		return array(
+			'status'            => $status,
+			'images_optimized'  => $images_optimized,
+			'images_total'      => $images_total,
+			'images_remaining'  => $images_remaining,
+			'bytes_saved'       => max( 0, intval( $bytes_saved ) ),
+			'percentage'        => $percentage,
+			'label'             => $label,
+			'panda'             => $panda,
+			'remaining_credits' => $remaining_credits,
+			'notice'            => $notice,
+		);
+	}
+
+	/**
+	 * Returns a description based on the percentage of optimized library
+	 *
+	 * @param int $percentage 
+	 * @return string label
+	 */
+	private static function get_label_text( $percentage ) {
+		if ( $percentage > 99 ) {
+			return __( 'optimized', 'tiny-compress-images' );
+		}
+		if ( $percentage > 75 ) {
+			return __( 'almost there', 'tiny-compress-images' );
+		}
+
+		if ( $percentage > 50 ) {
+			return __( 'halfway there', 'tiny-compress-images' );
+		}
+
+		if ( 0 === $percentage ) {
+			return '';
+		}
+
+		return __( 'getting started', 'tiny-compress-images' );
+	}
+}

src/class-tiny-plugin.php

@@ -42,6 +42,7 @@ public function __construct() {
 		parent::__construct();
 		$this->settings = new Tiny_Settings();
 		new Tiny_Conversion( $this->settings );
+		new Tiny_Dashboard( $this->settings );
 	}
 
 	public function set_compressor( $compressor ) {
@@ -104,11 +105,6 @@ public function ajax_init() {
 			$this->get_method( 'compress_image_for_bulk' )
 		);
 
-		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' )
@@ -157,11 +153,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' )
@@ -668,15 +659,6 @@ public function compress_image_for_bulk() {
 		exit();
 	}
 
-	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();
 
@@ -819,60 +801,6 @@ public function render_bulk_optimization_page() {
 		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
-		);
-
-		/*
-		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';
-	}
-
 	private static function retrieve_admin_colors() {
 		global $_wp_admin_css_colors;
 		$admin_colour_scheme = get_user_option( 'admin_color', get_current_user_id() );

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;

src/css/admin.css

@@ -1,3 +1,7 @@
+:root {
+	--tiny-color-text-muted: #6a7282
+}
+
 div.misc-pub-section.tiny-compress-images {
 	border-top: 1px solid #e1e1e1;
 	padding-bottom: 16px;