feat: display the screenshot of the webpage that has been analyzed (#313

)

* feat: display the screenshot of the webpage that has been analyzed

* refactor: simplify the way the screenshot is displayed

* feat: make the screenshot visible with the other way to display results

assets/js/components/SiteAnalysisResult.js

@@ -39,6 +39,7 @@ class SiteAnalysisResult {
 	async _init() {
 		const urlParams = new URLSearchParams(window.location.search);
 		const langSwitchersElements = document.querySelectorAll(".language-switcher a.lang")
+		const screenshotImgElement = document.querySelector(".result-screenshot")
 
 		let pageResultData = {};
 
@@ -47,6 +48,11 @@ class SiteAnalysisResult {
 		if (urlParams.has("url") && urlParams.has("size") && urlParams.has("ges")) {
 			for (const [key, value] of urlParams.entries()) {
 				pageResultData[key] = value;
+
+				if (key === "id") {
+					const screenshotUrl = AnalysisService.fetchAnalysisScreenshotUrlById(urlParams.get("id"))
+					screenshotImgElement.setAttribute("src", screenshotUrl)
+				}
 			}
 
 			// update the link URL of every lang switcher
@@ -58,13 +64,17 @@ class SiteAnalysisResult {
 			// else fetch analysis result from id
 			// NOTE : url params example to test : "?id=ec839aca-7c12-42e8-8541-5f7f94c36b7f
 		} else if (urlParams.has("id")) {
-			const id = urlParams.get("id");
+			const analysisId = urlParams.get("id");
+
 			// window.location.pathname is something like /resultat (in french) or /en/result (in english)
-			pageResultData = await AnalysisService.fetchAnalysisById(id, window.location.pathname);
+			pageResultData = await AnalysisService.fetchAnalysisById(analysisId, window.location.pathname)
+
+			const screenshotUrl = AnalysisService.fetchAnalysisScreenshotUrlById(analysisId)
+			screenshotImgElement.setAttribute("src", screenshotUrl)
 
 			// update the link URL of every lang switcher
 			langSwitchersElements.forEach((a) => {
-				const href = a.getAttribute("href") + "?id=" + id
+				const href = a.getAttribute("href") + "?id=" + analysisId
 				a.setAttribute("href", href)
 			})
 		} else {

assets/js/services/AnalysisService.js

@@ -56,6 +56,14 @@ class AnalysisService {
 		}
 	}
 
+	/**
+	 * @param {string} id 
+	 * @returns {string}
+	 */
+	fetchAnalysisScreenshotUrlById(id) {
+		return ApiService.fetchAnalysisScreenshotUrlById(id)
+	}
+
 	/**
 	 * 
 	 * @param {string} id

assets/js/services/ApiService.js

@@ -1,34 +1,36 @@
 import ky from "ky";
 
+const BASE_URL = "https://api.ecoindex.fr/v1/"
+const BROWSER_WIDTH = 1920
+const BROWSER_HEIGHT = 1080;
+
 class ApiService {
 	#controller = null;
-	#baseURL = "https://api.ecoindex.fr/v1/";
-	#browserWidth = 1920;
-	#browserHeight = 1080;
 
 	/**
 	 * Create a new analysis task by URL
 	 *
 	 * @param {string} url URL
-	 * @returns {Response} response object
+	 * @returns {Promise<import("ky").KyResponse>}
 	 */
 	async newAnalysisTaskByURL(url) {
 		const options = {
 			method: "post",
 			json: {
-				width: this.#browserWidth,
-				height: this.#browserHeight,
+				width: BROWSER_WIDTH,
+				height: BROWSER_HEIGHT,
 				url,
 			},
 		};
+
 		return this.#fetchApi("tasks/ecoindexes", options);
 	}
 
 	/**
 	 * Request a task analysis by its id
 	 *
-	 * @param {string} id Id
-	 * @returns {Response} response object
+	 * @param {string} id Analysis Id
+	 * @returns {Promise<import("ky").KyResponse>}
 	 */
 	async fetchAnalysisTaskById(id) {
 		const options = {
@@ -43,16 +45,26 @@ class ApiService {
 		return this.#fetchApi("tasks/ecoindexes/" + id, options);
 	}
 
+	/**
+	 * Get the URL that generates the screenshot of the analyzed page
+	 * @param {string} id Analysis Id
+	 * @returns {string} API URL
+	 */
+	fetchAnalysisScreenshotUrlById(id) {
+		return `${BASE_URL}ecoindexes/${id}/screenshot`;
+	}
+
 	/**
 	 * Request an analysis by its id
 	 *
 	 * @param {string} id Id
-	 * @returns {Response} response object
+	 * @returns {Promise<import("ky").KyResponse>}
 	 */
 	async fetchAnalysisById(id) {
 		const options = {
 			method: "get",
 		};
+
 		return this.#fetchApi("ecoindexes/" + id, options);
 	}
 
@@ -75,27 +87,25 @@ class ApiService {
 	 * @param {Object} options object (with url or id)
 	 * @param {string} [options.method] Method: 'post' or 'get'
 	 * @param {Object} [options.json] Object of properties to post in body (relevant for post method)
-	 * @param {Object} [Options.retry] Retry object to override default Ky retry request property
-	 * @returns {Response} response object
+	 * @param {Object} [options.retry] Retry object to override default Ky retry request property
+	 * @returns {Promise<import("ky").KyResponse>} response object
 	 */
 	async #fetchApi(slug, options) {
 		this.abortAnalysis();
 		const controller = (this.#controller = new AbortController());
 
 		const { signal } = controller;
 
-		const response = await ky(slug, {
+		return ky(slug, {
 			...options,
-			prefixUrl: this.#baseURL,
+			prefixUrl: BASE_URL,
 			timeout: 60000, // 60s instead of 10s default
 			signal,
 			headers: {
 				"content-type": "application/json",
 			},
 			redirect: "follow",
-		}).json();
-
-		return response;
+		}).json()
 	}
 }
 

layouts/partials/widgets/result-appreciation.html

@@ -10,6 +10,7 @@ <h2 data-int="grade_title"></h2>
 					{{ i18n "ResultScore" | safeHTML }} <span><span data-int="score">0</span> / 100</span>
 				</p>
 				<hr class="small" />
+				<img alt="" class="result-screenshot" height="800" loading="lazy" src="" width="1422">
 				<div class="info-collapse">
 					{{ $label := i18n "ResultScoreExplainationLabel" }}
 					{{ $content := i18n "ResultScoreExplainationContent" }}