poc: custom fonts

app/server/api/app.js

@@ -1,5 +1,20 @@
+const { filesPath } = require("../../utils");
+const fs = require("fs");
+
+const allowedExts = ["ttf", "otf"];
+
+function getFonts() {
+  return fs.readdirSync(filesPath).filter((filename) => {
+    const ext = filename.split(".").pop();
+    return allowedExts.includes(ext);
+  });
+}
+
 module.exports = {
   getOS: () => {
     return process.platform;
   },
+  getFonts: () => {
+    return getFonts();
+  },
 };

app/server/libs/files.js

@@ -6,7 +6,7 @@ const stores = require("../../stores");
 const { filesPath } = require("../../utils");
 
 const language = stores.app.get("language", "en");
-const allowedMimeTypes = ["text", "image", "audio", "video"];
+const allowedMimeTypes = ["text", "image", "audio", "video", "font"];
 
 fs.ensureDirSync(filesPath);
 

client-src/api/app.js

@@ -2,5 +2,6 @@ import { emit } from "@/libs/socket.io";
 
 export default {
   getOS: () => emit("app.getOS"),
+  getFonts: () => emit("app.getFonts"),
   set: (key, val) => emit("stores.app", "set", key, val),
 };

client-src/components/Anime/Timeline/Editor/Settings/Input.svelte

@@ -1,6 +1,7 @@
 <script>
   import Icon from "@/components/UI/Icon.svelte";
   import Select from "@/components/UI/Select.svelte";
+  import Fontpicker from "@/components/UI/Fontpicker.svelte";
   import ColorPicker from "@/components/UI/ColorPicker.svelte";
   import MdDeleteForever from "svelte-icons/md/MdDeleteForever.svelte";
 
@@ -41,6 +42,8 @@
       on:color="{onChange}"
       previewClass="w-10"
     />
+  {:else if type === 'fontpicker'}
+    <Fontpicker font="{value}" on:font="{onChange}" />
   {:else if type === 'select'}
     <Select
       pad="px-2"

client-src/components/Anime/Timeline/Editor/Timeline.svelte

@@ -19,6 +19,8 @@
   let fileManager = false;
   let splitter = { x: 200, width: 4, min: 100, max: 500 };
 
+  const accept = ["image", "audio", "text", "video", "font"];
+
   $: tippyProps = {
     content: _("sentences.add-file-to-timeline"),
     showOnCreate: !$items.length,
@@ -69,7 +71,7 @@
   <div class="absolute inset-0 z-50">
     <div class="relative h-full">
       <FileManager
-        accept="{['image', 'audio', 'text', 'video']}"
+        accept="{accept}"
         on:close="{closeFileManager}"
         on:select="{onFileSelect}"
       />

client-src/components/Anime/Timeline/libs/settings.js

@@ -73,7 +73,7 @@ export const styleDefs = {
   },
   "font-family": {
     default: "monospace",
-    input: { type: "text" },
+    input: { type: "fontpicker" },
   },
   "text-align": {
     default: "center",

client-src/components/FileManager/Main.svelte

@@ -7,14 +7,20 @@
   import FilterButtons from "./FilterButtons.svelte";
   import FileInput from "@/components/UI/FileInput.svelte";
 
-  export let accept = ["text", "image", "audio", "video"];
+  export let accept = ["text", "image", "audio", "video", "font"];
 
   let inputAccept = accept.map((type) => `${type}/*`);
+
+  if (accept.includes("font")) {
+    inputAccept.push(".ttf", ".otf", ".woff", ".woff2");
+  }
+
   let acceptTypes = {
     text: true,
     image: true,
     audio: true,
     video: true,
+    font: true,
   };
 
   let message = null;

client-src/components/UI/FileIcon.svelte

@@ -2,10 +2,11 @@
   import Icon from "./Icon.svelte";
 
   import MdImage from "svelte-icons/md/MdImage.svelte";
+  import MdBugReport from "svelte-icons/md/MdBugReport.svelte";
   import MdMusicVideo from "svelte-icons/md/MdMusicVideo.svelte";
   import MdDescription from "svelte-icons/md/MdDescription.svelte";
+  import MdFontDownload from "svelte-icons/md/MdFontDownload.svelte";
   import MdOndemandVideo from "svelte-icons/md/MdOndemandVideo.svelte";
-  import MdBugReport from "svelte-icons/md/MdBugReport.svelte";
 
   export let type;
   export let defaultIcon = MdBugReport;
@@ -15,6 +16,7 @@
     image: MdImage,
     video: MdOndemandVideo,
     text: MdDescription,
+    font: MdFontDownload,
   };
 
   let icon = icons[type] || defaultIcon;

client-src/components/UI/Fontpicker.svelte

@@ -0,0 +1,29 @@
+<script>
+  import Select from "@/components/UI/Select.svelte";
+  import { createEventDispatcher } from "svelte";
+  import loadFonts from "./loadFonts";
+
+  const dispatch = createEventDispatcher();
+
+  export let font;
+
+  function onChange({ detail: font }) {
+    console.log({ font });
+    dispatch("font", font);
+  }
+</script>
+
+<div class="p-2">
+  {#await loadFonts()}
+    Loading fonts list...
+  {:then fonts}
+    <Select
+      value="{font}"
+      items="{fonts}"
+      class="flex-auto"
+      on:change="{onChange}"
+    />
+  {:catch error}
+    <div class="bg-red-600 text-light">{error.message}</div>
+  {/await}
+</div>

client-src/components/UI/loadFonts.js

@@ -0,0 +1,22 @@
+import api from "@/api/app";
+
+async function loadFont(name, url) {
+  const fontFace = new FontFace(name, `url(${url})`);
+  await fontFace.load();
+  document.fonts.add(fontFace);
+  return fontFace;
+}
+
+export default async function loadFonts() {
+  const fonts = await api.getFonts();
+  const fontNames = [];
+
+  for (let i = 0, l = fonts.length; i < l; i++) {
+    const filename = fonts[i];
+    const [name] = filename.split(".");
+    const fontFace = await loadFont(name, `files/${filename}`);
+    fontNames.push(fontFace.family);
+  }
+
+  return fontNames;
+}