From 4d44e729544f59d51f373778a635d3cc692d0e10 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Mon, 30 Sep 2024 15:50:08 -0300
Subject: [PATCH] Load fonts on-demand

The same set of fonts are not used across RTL and LTR languages. This
change only loads fonts that are being used
---
 src/js/loaders/SurahIndexLoader.ts  | 20 +++++++++++---------
 src/js/loaders/SurahStreamLoader.ts | 25 ++++++++++++-------------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/js/loaders/SurahIndexLoader.ts b/src/js/loaders/SurahIndexLoader.ts
index a27c9a9..867709d 100644
--- a/src/js/loaders/SurahIndexLoader.ts
+++ b/src/js/loaders/SurahIndexLoader.ts
@@ -17,18 +17,20 @@ import { formatNumber } from "~/lib/t";
   const style: HTMLStyleElement = doc.querySelector(".css.postman")!;
   const progressBar: HTMLProgressElement = loader.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
+  const fonts = (() => {
+    if (doc.dir === "rtl") {
+      return [
+        item.font("Cairo Regular", "url(/fonts/cairo-regular.ttf)"),
+        item.font("Cairo Bold", "url(/fonts/cairo-bold.ttf)"),
+      ];
+    } else {
+      return [item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)")];
+    }
+  })();
   postman(
     item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
     item.script(`/js/main/surah-index.js?v=${rev}`, { id: "1" }),
-    item.font(
-      "Cairo Regular",
-      "url(/fonts/cairo-regular.ttf) format('truetype')",
-    ),
-    item.font("Cairo Bold", "url(/fonts/cairo-bold.ttf) format('truetype')"),
-    item.font(
-      "Kanit Regular",
-      "url(/fonts/kanit-regular.ttf) format('truetype')",
-    ),
+    ...fonts,
     item.progress((percent: number) => {
       progressBar.value = percent;
       progressNumber.innerText = formatNumber(
diff --git a/src/js/loaders/SurahStreamLoader.ts b/src/js/loaders/SurahStreamLoader.ts
index addea59..57b200e 100644
--- a/src/js/loaders/SurahStreamLoader.ts
+++ b/src/js/loaders/SurahStreamLoader.ts
@@ -18,22 +18,21 @@ import { formatNumber } from "~/lib/t";
   const style = doc.querySelector(".css.postman")!;
   const progressBar = loader.querySelector("progress")!;
   const progressNumber: HTMLSpanElement = loader.querySelector(".percentage")!;
+  const fonts = (() => {
+    if (doc.dir === "rtl") {
+      return [
+        item.font("Cairo Regular", "url(/fonts/cairo-regular.ttf)"),
+        item.font("Cairo Bold", "url(/fonts/cairo-bold.ttf)"),
+        item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf)"),
+      ];
+    } else {
+      return [item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)")];
+    }
+  })();
   postman(
     item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
     item.script(`/js/main/surah-stream.js?v=${rev}`, { id: "1" }),
-    item.font(
-      "Cairo Regular",
-      "url(/fonts/cairo-regular.ttf) format('truetype')",
-    ),
-    item.font("Cairo Bold", "url(/fonts/cairo-bold.ttf) format('truetype')"),
-    item.font(
-      "Amiri Quran Regular",
-      "url(/fonts/amiri-quran-regular.ttf) format('truetype')",
-    ),
-    item.font(
-      "Kanit Regular",
-      "url(/fonts/kanit-regular.ttf) format('truetype')",
-    ),
+    ...fonts,
     /* eslint-disable */
     item.json(`/json/${doc.lang}/${surahId}/info.json?v=${rev}`, { className: "json surahinfo" }),
     item.json(`/json/${doc.lang}/${surahId}/surah.json?v=${rev}`, { className: "json surah" }),