Add caching

Extensions/combined/popup.html

@@ -173,6 +173,7 @@ <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
       <option value="always" id="ratio_preview_always">Always</option>
       <option value="hover" id="ratio_preview_hover">On hover</option>
       <option value="never" id="ratio_preview_never">Never</option>
+    </select>
   </div>
 </fieldset>
 </body>

Extensions/combined/src/preview.js

@@ -3,6 +3,10 @@ import { getApiData } from "./state";
 
 let videos = [];
 
+let cache = {};
+let cacheDuration = 60 * 10; // 10 minutes
+
+
 async function showRatioPreviews() {
   // Select all videos
   let currentVideos = [].slice.call(document.getElementsByTagName("ytd-rich-grid-media"));
@@ -13,24 +17,26 @@ async function showRatioPreviews() {
   // Get videos that are not already show the ratio
   currentVideos = currentVideos.filter(element => !videos.includes(element));
   for (let video of currentVideos) {  // Iterate through all videos
-    // Check if video already has ratio preview
+    // Check if video already has expired ratio preview
     if (video.querySelector("#ratio-display")) {
       video.querySelector("#ratio-display").remove();
     }
 
     // Get video data
     let videoLink = video.querySelector("a").href;
     let videoId = getVideoId(videoLink);
-    let apiResponse = await getApiData(videoId);
+    let data = await getData(videoId);
 
-    // Calculate like-dislike ratio
-    let likes = apiResponse["likes"];
-    let dislikes = apiResponse["dislikes"];
-    let ratio = Math.round(likes / (likes + dislikes) * 100);
-    if (likes === undefined || dislikes === undefined) {
+    // Check if data was fetched
+    if (!data) {
       return;
     }
 
+    // Calculate like-dislike ratio
+    let likes = data["likes"];
+    let dislikes = data["dislikes"];
+    let ratio = Math.round(likes / (likes + dislikes) * 100);
+
     // Set color depending on ratio
     let color = (ratio >= 90 ? "#2ab92a" : ratio >= 70 ? "#ffca00" : "#d73131");
 
@@ -42,6 +48,39 @@ async function showRatioPreviews() {
   }
 }
 
+async function getData(videoId) {
+  // Remove expired cache entries
+  const now = new Date().getTime();
+  let removed = 0;
+  for (let key in cache) {
+    if (now - cache[key]["fetchTime"] > cacheDuration) {
+      delete cache[key];
+      removed++;
+    } else {
+      break;
+    }
+  }
+
+  // Check if video is in cache
+  if (videoId in cache) {
+    console.log('USING CACHE!!! for ' + videoId);
+    return cache[videoId];
+  }
+
+  // If not, fetch data from API
+  let apiResponse = await getApiData(videoId);
+
+  // Check if request was successful
+  if (!apiResponse.likes) {
+    return;
+  }
+
+  cache[videoId] = apiResponse;
+  cache[videoId]["fetchTime"] = now;
+
+  return cache[videoId];
+}
+
 function resetVideoList() {
   videos = [];
 }