Update constants from api (#607)

* fix caption ipa display

* fetch gpt/tts providers from API

* fetch remote gpt presets

* update constants

* fix conversavtion save

* refactor ipa convert

* fetch ipa mapping from api

* fix ipa mark

* fix constant

* validate camdict pron audio src

enjoy/src/renderer/context/media-player-provider.tsx

@@ -1,5 +1,5 @@
 import { createContext, useEffect, useState, useContext } from "react";
-import { extractFrequencies } from "@/utils";
+import { convertIpaToNormal, extractFrequencies } from "@/utils";
 import { AppSettingsProviderContext } from "@renderer/context";
 import {
   useTranscriptions,
@@ -13,10 +13,10 @@ import Regions, {
 } from "wavesurfer.js/dist/plugins/regions";
 import Chart from "chart.js/auto";
 import { TimelineEntry } from "echogarden/dist/utilities/Timeline.d.js";
-import { IPA_MAPPING } from "@/constants";
 import { toast } from "@renderer/components/ui";
 import { Tooltip } from "react-tooltip";
 import { debounce } from "lodash";
+import { IPA_MAPPINGS } from "@/constants";
 
 type MediaPlayerContextType = {
   layout: {
@@ -86,6 +86,8 @@ type MediaPlayerContextType = {
   // Segments
   currentSegment: SegmentType;
   createSegment: () => Promise<SegmentType | void>;
+  // remote config
+  ipaMappings: { [key: string]: string };
 };
 
 export const MediaPlayerProviderContext =
@@ -118,7 +120,7 @@ export const MediaPlayerProvider = ({
   children: React.ReactNode;
 }) => {
   const minPxPerSec = 150;
-  const { EnjoyApp } = useContext(AppSettingsProviderContext);
+  const { EnjoyApp, webApi } = useContext(AppSettingsProviderContext);
 
   const [layout, setLayout] = useState<{
     name: string;
@@ -160,6 +162,10 @@ export const MediaPlayerProvider = ({
   const [transcriptionDraft, setTranscriptionDraft] =
     useState<TranscriptionType["result"]>();
 
+  const [ipaMappings, setIpaMappings] = useState<{ [key: string]: string }>(
+    IPA_MAPPINGS
+  );
+
   const {
     transcription,
     generateTranscription,
@@ -331,7 +337,7 @@ export const MediaPlayerProvider = ({
           );
           labels[index] = [
             labels[index] || "",
-            (IPA_MAPPING as any)[phone.text.trim()] || phone.text.trim(),
+            convertIpaToNormal(phone.text.trim()),
           ].join("");
         });
       }
@@ -529,6 +535,10 @@ export const MediaPlayerProvider = ({
   useEffect(() => {
     calculateHeight();
 
+    webApi.config("ipa_mappings").then((mappings) => {
+      if (mappings) setIpaMappings(mappings);
+    });
+
     EnjoyApp.window.onResize(() => {
       deboundeCalculateHeight();
     });
@@ -584,6 +594,7 @@ export const MediaPlayerProvider = ({
           createNote,
           currentSegment: segment,
           createSegment,
+          ipaMappings,
         }}
       >
         {children}