add play all button

src/components/AccessibilityPanel/index.tsx

@@ -1,8 +1,14 @@
+import play from "@/play"
+import { state as playState, setVoice } from "@/store/play"
 import { decreaseFontSize, hideImages, increaseFontSize, reset, setBlackOnWhite, setBlueOnBlue, setBrownOnYellow, setDefaultTheme, setGreenOnBrown, setLetterSpacingOne, setLetterSpacingTwo, setLetterSpacingFour, setLineHeightOneAndHalf, setLineHeightTwo, setLineHeightTwoAndHalf, setSerifFont, setSansSerifFont, setWhiteOnBlack, showImages } from "@/store/theme"
-import { HiCog, HiOutlineEyeOff } from "react-icons/hi"
+import { HiCog, HiOutlineEyeOff, HiPlay } from "react-icons/hi"
+import { useSnapshot } from "valtio"
 import s from "./panel.module.css"
+import VoiceSelect from "./voice"
 
 function AccessibilityPanel() {
+    const p = useSnapshot(playState)
+
     return ( <div className={s.viewsettings}>
         <div className={s.row}>
             <div className={s.block}>
@@ -58,7 +64,13 @@ function AccessibilityPanel() {
                 <HiOutlineEyeOff />
                 Обычная версия
             </button>
-            {/*<a id="_playlist" href="javascript:void(0)" onClick="playSound('all', this);"><i className="fa fa-play fa-fw"></i>Прослушать всё</a>*/}
+            <button onClick={play}>
+                <HiPlay />
+                Прослушать всё
+            </button>
+            <VoiceSelect value={p.voice} onChange={(event) => {
+                setVoice(event.target.value)
+            }} />
         </div>
     </div>
     )

src/components/AccessibilityPanel/voice.tsx

@@ -0,0 +1,27 @@
+function useVoices() {
+    return window.speechSynthesis
+        .getVoices()
+        .map(v => {
+            return {
+                name: `${v.name} (${v.lang})`,
+                value: v.name,
+            }
+        })
+}
+
+export type VoiceSelectProps = React.SelectHTMLAttributes<HTMLSelectElement>
+
+function VoiceSelect(props: VoiceSelectProps) {
+    const voices = useVoices()
+    return (
+        <select {...props}>
+            {voices.map(voice => (
+                <option key={voice.value} value={voice.value}>
+                    {voice.name}
+                </option>
+            ))}
+        </select>
+    )
+}
+
+export default VoiceSelect

src/play.ts

@@ -0,0 +1,20 @@
+import { state } from "./store/play";
+
+
+function play() {
+    const synth = window.speechSynthesis;
+
+    const a = document.querySelector("article")
+    if (!a || !a.textContent) {
+        return
+    }
+
+    const u = new SpeechSynthesisUtterance(a.textContent)
+    const voice = synth.getVoices().find((v) => v.name === state.voice);
+    if (voice) {
+        u.voice = voice
+    }
+    synth.speak(u)
+}
+
+export default play

src/store/play.ts

@@ -0,0 +1,13 @@
+import { proxy } from "valtio"
+
+type State = {
+    voice: string
+}
+
+export const state = proxy<State>({
+    voice: "Milena",
+})
+
+export function setVoice(value: string) {
+    state.voice = value
+}