Reading time of a result - Fluid Topics - Latest

It is possible to use the result variable to show the reading time of a document inside the Search results page. This relies on the ft:wordCount metadata key.

To add the same Custom component:

1. In the HTML panel, copy and paste the following:

   <ft-tooltip delay="500" position="bottom">
     <ft-chip><span id="time"></span> read</ft-chip>
   </ft-tooltip>
   

2. In the CSS panel, copy and paste the following:

   ft-tooltip {
     display: none;
   }
   
   #time::before {
     content: "\e97e";
     margin-right: 6px;
     font-family: "ft-icons";
   }
   
   ft-chip {
     --ft-chip-vertical-padding: 3.5px;
     --ft-chip-horizontal-padding: 4px;
   }
   

3. In the JS panel, copy and paste the following:

   class CONFIG {
     static wpm = 225; // The number of words read per minute, used for the calculation of the reading time.
     static enableMaxTime = false; // If true, the chip does not appear when the reading time exceeds the maxMinutes value. If false, the chip always appears.
     static maxMinutes = 120; // A value in minutes when enableMaxTime is true.
   }
   
   const metadata = result.map?.metadata || result.topic?.metadata;
   const wordCountItem = metadata?.find(item => item.key === "ft:wordCount");
   const wordCount = wordCountItem?.values[0] || 0;
   
   if (wordCount > 0) {
     const totalMinutes = Math.ceil(wordCount / CONFIG.wpm);
   
     // Only show if under max time (or if max time is disabled)
     if (!CONFIG.enableMaxTime || totalMinutes <= CONFIG.maxMinutes) {
       const timeElement = document.getElementById("time");
       const tooltipElement = document.querySelector("ft-tooltip");
   
       tooltipElement.style.display = "block";
   
       let timeText;
       if (totalMinutes >= 60) {
         const hours = Math.floor(totalMinutes / 60);
         const minutes = totalMinutes % 60;
   
         if (minutes === 0) {
           timeText = `${hours} hour${hours > 1 ? 's' : ''}`;
         } else {
           timeText = `${hours} hour${hours > 1 ? 's' : ''} ${minutes} min`;
         }
       } else {
         timeText = `${totalMinutes} min`;
       }
   
       timeElement.innerText = timeText;
       tooltipElement.setAttribute("text", `Reading time: ${timeText} read`);
     }
   }
   

4. Adjust the CONFIG values as needed.

5. Save the component.
6. Save and publish the page.