feat/epubPreviewBasic: added font-size changing, theming

frontend/src/css/epubReader.css

@@ -1,16 +1,78 @@
 .epub-reader {
-    display: flex;
+  display: flex;
-    align-items: flex-end;
+  align-items: flex-end;
-    height: 100%;
+  height: 100%;
 }
 
 .epub-reader .container {
-    width: 100%;
+  width: 100%;
-    max-width: 100%;
+  max-width: 100%;
-    height: calc(100% - 56px);
+  height: calc(100% - 64px);
-    margin: 0;
+  margin: 0;
 }
 
 .epub-reader .arrow.pre {
-    left: 0
+  left: 0;
-}
+}
+
+.epub-reader .readerArea {
+  background-color: var(--background) !important;
+}
+
+.epub-reader .titleArea {
+  color: var(--text);
+}
+
+.epub-reader .tocButtonBar {
+  background: var(--divider);
+}
+
+.epub-reader .tocButton {
+  color: var(--text);
+}
+
+.epub-reader .tocButton.tocButtonExpanded {
+  background-color: var(--background);
+}
+
+.epub-reader .tocAreaButton.active {
+  color: var(--blue);
+  border-color: var(--dark-blue);
+}
+
+.epub-reader .tocArea {
+  background-color: var(--background);
+}
+
+.epub-reader .readerArea .arrow {
+  color: var(--text);
+}
+
+.epub-reader .readerArea .arrow:hover {
+  color: var(--hover);
+}
+
+.epub-reader .size {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  z-index: 111;
+  right: 25px;
+  outline: none;
+  position: absolute;
+  top: 78px;
+}
+
+.epub-reader .size span {
+  color: var(--textSecondary);
+}
+
+.epub-reader .size button {
+  background: none;
+  outline: none;
+  border: none;
+  width: 25px;
+  height: 25px;
+  color: var(--textPrimary);
+  padding: 0;
+}

frontend/src/views/files/Preview.vue

@@ -61,6 +61,7 @@
           <vue-reader
             :location="location"
             :url="raw"
+            :get-rendition="getRendition"
             :epubInitOptions="{
               requestCredentials: true,
             }"
@@ -70,6 +71,21 @@
             }"
             @update:location="locationChange"
           />
+          <div class="size">
+            <button
+              @click="changeSize(Math.max(100, size - 10))"
+              class="reader-button"
+            >
+              <i class="material-icons">remove</i>
+            </button>
+            <button
+              @click="changeSize(Math.min(150, size + 10))"
+              class="reader-button"
+            >
+              <i class="material-icons">add</i>
+            </button>
+            <span>{{ size }}%</span>
+          </div>
         </div>
         <ExtendedImage v-else-if="fileStore.req?.type == 'image'" :src="raw" />
         <audio
@@ -156,9 +172,12 @@ import throttle from "lodash/throttle";
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
 import ExtendedImage from "@/components/files/ExtendedImage.vue";
+import VideoPlayer from "@/components/files/VideoPlayer.vue";
 import { VueReader } from "vue-reader";
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import type { Rendition } from "epubjs";
+import { getTheme } from "@/utils/theme";
 
 const location = useStorage("book-progress", 0, undefined, {
   serializer: {
@@ -166,10 +185,43 @@ const location = useStorage("book-progress", 0, undefined, {
     write: (v) => JSON.stringify(v),
   },
 });
+const size = useStorage("book-size", 120, undefined, {
+  serializer: {
+    read: (v) => JSON.parse(v),
+    write: (v) => JSON.stringify(v),
+  },
+});
 
 const locationChange = (epubcifi: number) => {
   location.value = epubcifi;
 };
+let rendition: Rendition | null = null;
+const changeSize = (val: number) => {
+  size.value = val;
+  rendition?.themes.fontSize(`${val}%`);
+};
+
+const getRendition = (_rendition: Rendition) => {
+  rendition = _rendition;
+  switch (getTheme()) {
+    case "dark": {
+      rendition.themes.override("color", "rgba(255, 255, 255, 0.6)");
+      break;
+    }
+    case "light": {
+      rendition.themes.override("color", "rgb(111, 111, 111)");
+      break;
+    }
+  }
+  rendition.themes.registerRules("h2Transparent", {
+    "h1,h2,h3,h4": {
+      "background-color": "transparent !important",
+    },
+  });
+  rendition?.themes.fontSize(`${size.value}%`);
+  rendition.themes.select("h2Transparent");
+  rendition.themes.override("background-color", "transparent", true);
+};
 
 const mediaTypes: ResourceType[] = ["image", "video", "audio", "blob"];