Card voice from url (#14)

* Card voice from URL

src/screens/component-catalog/card-preview-story.tsx

@@ -19,6 +19,7 @@ const createCardPreviewForm = (card: {
       example: new TextField<string>(card.example ?? ""),
       answerType: new TextField<CardAnswerType>("remember"),
       answerFormType: "new",
+      options: null,
       answers: new ListField<CardAnswerFormType>([]),
       answerId: "0",
     },

src/screens/deck-form/store/deck-form-store.test.ts

@@ -38,6 +38,7 @@ const mapUpsertDeckRequestToResponse = (
         back: card.back,
         answer_type: "remember",
         answers: null,
+        options: null,
       };
     }),
   },
@@ -75,6 +76,7 @@ vi.mock("./../../../store/deck-list-store.ts", () => {
       back: "Время",
       answer_type: "remember",
       answers: null,
+      options: null,
     },
     {
       id: 4,
@@ -85,6 +87,7 @@ vi.mock("./../../../store/deck-list-store.ts", () => {
       back: "Год",
       answer_type: "remember",
       answers: null,
+      options: null,
     },
     {
       id: 5,
@@ -95,6 +98,7 @@ vi.mock("./../../../store/deck-list-store.ts", () => {
       back: "Дорога",
       answer_type: "remember",
       answers: null,
+      options: null,
     },
   ];
 

src/screens/deck-form/store/deck-form-store.ts

@@ -15,6 +15,7 @@ import { showAlert } from "../../../lib/telegram/show-alert.ts";
 import { fuzzySearch } from "../../../lib/string/fuzzy-search.ts";
 import {
   DeckCardDbType,
+  DeckCardOptionsDbType,
   DeckSpeakFieldEnum,
   DeckWithCardsDbType,
 } from "../../../../functions/db/deck/decks-with-cards-schema.ts";
@@ -45,6 +46,7 @@ export type CardFormType = {
   answerId?: string;
   answerFormType?: "new" | "edit";
   id?: number;
+  options: DeckCardOptionsDbType;
 };
 
 type DeckFormType = {
@@ -122,6 +124,7 @@ const createUpdateForm = (
       back: createCardSideField(card.back),
       example: new TextField(card.example || ""),
       answerType: createAnswerTypeField(card),
+      options: card.options,
       answers: createAnswerListField(
         card.answers
           ? card.answers.map((answer) => ({
@@ -334,6 +337,7 @@ export class DeckFormStore implements CardFormStoreInterface {
       back: createCardSideField(""),
       example: new TextField(""),
       answerType: createAnswerTypeField(),
+      options: null,
       answers: createAnswerListField([], () => this.cardForm),
     });
   }

src/screens/deck-form/store/quick-add-card-form-store.ts

@@ -27,6 +27,7 @@ export class QuickAddCardFormStore implements CardFormStoreInterface {
     front: createCardSideField(""),
     example: new TextField(""),
     answerType: createAnswerTypeField(),
+    options: null,
     answers: createAnswerListField([], () => this.cardForm),
   };
   isSending = false;

src/screens/deck-review/store/card-preview-store.ts

@@ -7,7 +7,11 @@ import { CardAnswerType } from "../../../../functions/db/custom-types.ts";
 import { makeAutoObservable } from "mobx";
 import { userStore } from "../../../store/user-store.ts";
 import { isEnumValid } from "../../../lib/typescript/is-enum-valid.ts";
-import { speak, SpeakLanguageEnum } from "../../../lib/voice-playback/speak.ts";
+import {
+  isSpeechSynthesisSupported,
+  speak,
+  SpeakLanguageEnum,
+} from "../../../lib/voice-playback/speak.ts";
 import { removeAllTags } from "../../../lib/sanitize-html/remove-all-tags.ts";
 import { CardFormStoreInterface } from "../../deck-form/store/card-form-store-interface.ts";
 import { assert } from "../../../lib/typescript/assert.ts";
@@ -22,6 +26,7 @@ export class CardPreviewStore implements LimitedCardUnderReviewStore {
   answers: CardAnswerDbType[] = [];
   answer?: CardAnswerDbType;
 
+  voice?: HTMLAudioElement;
   deckSpeakLocale: string | null = null;
   deckSpeakField: DeckSpeakFieldEnum | null = null;
 
@@ -31,7 +36,14 @@ export class CardPreviewStore implements LimitedCardUnderReviewStore {
   isOverflowing = new BooleanToggle(false);
 
   constructor(cardFormStore: CardFormStoreInterface) {
-    makeAutoObservable(this, {}, { autoBind: true });
+    makeAutoObservable(
+      this,
+      {
+        isCardSpeakerVisible: false,
+      },
+      { autoBind: true },
+    );
+
     const form = cardFormStore.cardForm;
     assert(form, "form is not defined");
     this.id = 9999;
@@ -52,28 +64,13 @@ export class CardPreviewStore implements LimitedCardUnderReviewStore {
 
     this.deckSpeakLocale = deckForm.speakingCardsLocale.value ?? null;
     this.deckSpeakField = deckForm.speakingCardsField.value ?? null;
-  }
-
-  speak() {
-    if (
-      !this.isSpeakingCardsEnabledSettings ||
-      !this.deckSpeakLocale ||
-      !this.deckSpeakField
-    ) {
-      return;
-    }
 
-    if (!isEnumValid(this.deckSpeakLocale, SpeakLanguageEnum)) {
-      return;
+    if (form.options?.voice) {
+      const audio = new Audio(form.options.voice);
+      // Preload audio to avoid slow delay when playing voice
+      audio.load();
+      this.voice = audio;
     }
-
-    const text = this[this.deckSpeakField];
-
-    speak(removeAllTags(text), this.deckSpeakLocale);
-  }
-
-  get isSpeakingCardsEnabledSettings() {
-    return userStore.isSpeakingCardsEnabled;
   }
 
   openWithAnswer(answer: CardAnswerDbType) {
@@ -93,4 +90,40 @@ export class CardPreviewStore implements LimitedCardUnderReviewStore {
       this.speak();
     }
   }
+
+  speak() {
+    if (!userStore.isSpeakingCardsEnabled) {
+      return;
+    }
+
+    if (this.voice) {
+      this.voice.play();
+      return;
+    }
+
+    if (!this.deckSpeakLocale || !this.deckSpeakField) {
+      return;
+    }
+
+    if (!isEnumValid(this.deckSpeakLocale, SpeakLanguageEnum)) {
+      return;
+    }
+
+    const text = this[this.deckSpeakField];
+
+    speak(removeAllTags(text), this.deckSpeakLocale);
+  }
+
+  isCardSpeakerVisible(type: DeckSpeakFieldEnum) {
+    if (this.voice) {
+      return type === "back";
+    }
+
+    return (
+      isSpeechSynthesisSupported &&
+      this.isOpened &&
+      type === this.deckSpeakField &&
+      userStore.isSpeakingCardsEnabled
+    );
+  }
 }

src/screens/deck-review/store/card-under-review-store.ts

@@ -5,7 +5,11 @@ import {
   DeckSpeakFieldEnum,
 } from "../../../../functions/db/deck/decks-with-cards-schema.ts";
 import { DeckWithCardsWithReviewType } from "../../../store/deck-list-store.ts";
-import { speak, SpeakLanguageEnum } from "../../../lib/voice-playback/speak.ts";
+import {
+  isSpeechSynthesisSupported,
+  speak,
+  SpeakLanguageEnum,
+} from "../../../lib/voice-playback/speak.ts";
 import { isEnumValid } from "../../../lib/typescript/is-enum-valid.ts";
 import { CardAnswerType } from "../../../../functions/db/custom-types.ts";
 import { assert } from "../../../lib/typescript/assert.ts";
@@ -25,6 +29,7 @@ export class CardUnderReviewStore {
   back: string;
   example: string | null = null;
   deckName?: string;
+  voice?: HTMLAudioElement;
   deckSpeakLocale: string | null = null;
   deckSpeakField: DeckSpeakFieldEnum | null = null;
   answerType: CardAnswerType;
@@ -51,8 +56,17 @@ export class CardUnderReviewStore {
     this.deckName = deck.name;
     this.deckSpeakLocale = deck.speak_locale;
     this.deckSpeakField = deck.speak_field;
+    if (card.options?.voice) {
+      const audio = new Audio(card.options.voice);
+      audio.load();
+      this.voice = audio;
+    }
 
-    makeAutoObservable(this, {}, { autoBind: true });
+    makeAutoObservable(
+      this,
+      { isCardSpeakerVisible: false },
+      { autoBind: true },
+    );
   }
 
   open() {
@@ -77,11 +91,16 @@ export class CardUnderReviewStore {
   }
 
   speak() {
-    if (
-      !userStore.isSpeakingCardsEnabled ||
-      !this.deckSpeakLocale ||
-      !this.deckSpeakField
-    ) {
+    if (!userStore.isSpeakingCardsEnabled) {
+      return;
+    }
+
+    if (this.voice) {
+      this.voice.play();
+      return;
+    }
+
+    if (!this.deckSpeakLocale || !this.deckSpeakField) {
       return;
     }
 
@@ -93,4 +112,17 @@ export class CardUnderReviewStore {
 
     speak(removeAllTags(text), this.deckSpeakLocale);
   }
+
+  isCardSpeakerVisible(type: "front" | "back") {
+    if (this.voice) {
+      return type === "back";
+    }
+
+    return (
+      isSpeechSynthesisSupported &&
+      this.isOpened &&
+      type === this.deckSpeakField &&
+      userStore.isSpeakingCardsEnabled
+    );
+  }
 }

src/screens/deck-review/store/review-store.test.ts

@@ -43,6 +43,7 @@ const repeatCardsMock: DeckCardDbTypeWithType[] = [
     type: "repeat",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
   {
     id: 4,
@@ -54,6 +55,7 @@ const repeatCardsMock: DeckCardDbTypeWithType[] = [
     type: "repeat",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
   {
     id: 5,
@@ -65,6 +67,7 @@ const repeatCardsMock: DeckCardDbTypeWithType[] = [
     type: "repeat",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
   {
     id: 6,
@@ -76,6 +79,7 @@ const repeatCardsMock: DeckCardDbTypeWithType[] = [
     type: "repeat",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
 ];
 
@@ -90,6 +94,7 @@ const newCardsMock: DeckCardDbTypeWithType[] = [
     type: "new",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
   {
     id: 4,
@@ -101,6 +106,7 @@ const newCardsMock: DeckCardDbTypeWithType[] = [
     type: "new",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
   {
     id: 5,
@@ -112,6 +118,7 @@ const newCardsMock: DeckCardDbTypeWithType[] = [
     type: "new",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
   {
     id: 6,
@@ -123,6 +130,7 @@ const newCardsMock: DeckCardDbTypeWithType[] = [
     type: "new",
     answer_type: "remember",
     answers: null,
+    options: null,
   },
 ];
 

src/screens/shared/card/card-speaker.tsx

@@ -1,11 +1,9 @@
-import { isSpeechSynthesisSupported } from "../../../lib/voice-playback/speak.ts";
 import { throttle } from "../../../lib/throttle/throttle.ts";
 import { css, cx } from "@emotion/css";
 import { theme } from "../../../ui/theme.tsx";
 import React from "react";
 import { observer } from "mobx-react-lite";
 import { LimitedCardUnderReviewStore } from "./card.tsx";
-import { userStore } from "../../../store/user-store.ts";
 
 type Props = {
   card: LimitedCardUnderReviewStore;
@@ -14,12 +12,7 @@ type Props = {
 
 export const CardSpeaker = observer((props: Props) => {
   const { card, type } = props;
-  if (
-    !isSpeechSynthesisSupported ||
-    !card.isOpened ||
-    type !== card.deckSpeakField ||
-    !userStore.isSpeakingCardsEnabled
-  ) {
+  if (!card.isCardSpeakerVisible(type)) {
     return null;
   }
 

src/screens/shared/card/card.tsx

@@ -25,6 +25,7 @@ export type LimitedCardUnderReviewStore = Pick<
   | "openWithAnswer"
   | "open"
   | "isOverflowing"
+  | "isCardSpeakerVisible"
 >;
 
 type Props = {