Merge branch 'main' into job-style-tweaks

src/main/factories/ipcs/pipeline.ts

@@ -1,5 +1,5 @@
 import { app, ipcMain, dialog } from 'electron'
-import { resolve, delimiter, relative } from 'path'
+import path, { resolve, delimiter, relative } from 'path'
 import {
     Webservice,
     PipelineStatus,
@@ -26,6 +26,7 @@ import {
     setStatus,
     useWebservice,
 } from 'shared/data/slices/pipeline'
+import fs from 'fs-extra'
 
 /**
  * Local DAISY Pipeline 2 management class
@@ -365,7 +366,6 @@ Then close the program using the port and restart this application.`,
                     '-Dorg.daisy.pipeline.ws.port=' + this.props.webservice.port
                 )
             }
-
             if (
                 !existsSync(this.props.appDataFolder) &&
                 mkdirSync(this.props.appDataFolder, { recursive: true })
@@ -387,6 +387,33 @@ Then close the program using the port and restart this application.`,
                     `Using existing ${this.props.logsFolder} for pipeline logs`
                 )
             }
+            // this file would contain TTS settings to pass to the pipeline on startup
+            // e.g. it could contain credentials for cloud-based TTS engines, without which the voices
+            // for that engine wouldn't be listed as available to the user
+            // additional TTS settings are passed in with jobs (e.g. voice selection but currently not engine properties)
+            let ttsEnginePropertiesFilepath = path.join(
+                this.props.appDataFolder,
+                'tts-engine-properties.json'
+            )
+            // if this TTS config file exists, then add its properties to SystemProps
+            if (existsSync(ttsEnginePropertiesFilepath)) {
+                try {
+                    let f = fs.readFileSync(ttsEnginePropertiesFilepath)
+                    let ttsEngineProperties = JSON.parse(f.toString())
+                    // @ts-ignore
+                    ttsEngineProperties.map((property) =>
+                        SystemProps.push(`-D${property.key}=${property.value}`)
+                    )
+                } catch (err) {
+                    this.pushMessage(
+                        `Could not set TTS engine properties on startup from file ${ttsEnginePropertiesFilepath}`
+                    )
+                }
+            } else {
+                this.pushMessage(
+                    `File not found for additional TTS engine properties (checking default location: ${ttsEnginePropertiesFilepath})`
+                )
+            }
             // avoid using bat to control the runner ?
             // Spawn pipeline process
             let command = resolve(this.props.jrePath, 'bin', 'java')

src/renderer/components/JobDetailsPane/Results.tsx

@@ -1,5 +1,8 @@
 import { Job } from 'shared/types'
 import { FileLink } from '../FileLink'
+import remarkGfm from 'remark-gfm'
+import { externalLinkClick } from 'renderer/utils'
+import Markdown from 'react-markdown'
 
 export function Results({ job }: { job: Job }) {
     return (
@@ -9,7 +12,28 @@ export function Results({ job }: { job: Job }) {
                     <FileLink fileHref={item.href}>
                         <span className="nicename">{item.nicename}</span>
                     </FileLink>
-                    <span className="description">{item.desc}</span>
+                    <div className="description">
+                        <Markdown
+                            remarkPlugins={[remarkGfm]}
+                            components={{
+                                // override the rendering of link elements with a link element that opens in an external browser
+                                a: (props) => {
+                                    return (
+                                        <a
+                                            href={props.href}
+                                            onClick={(e) =>
+                                                externalLinkClick(e, App)
+                                            }
+                                        >
+                                            {props.children}
+                                        </a>
+                                    )
+                                },
+                            }}
+                        >
+                            {item.desc}
+                        </Markdown>
+                    </div>
                 </li>
             ))}
         </ul>

src/renderer/components/TtsConfig/index.tsx

@@ -18,6 +18,9 @@ export function TtsConfigPane({
     const [preferredVoices, setPreferredVoices] = useState([
         ...userPreferredVoices,
     ])
+    const [engines, setEngines] = useState([])
+    const [langs, setLangs] = useState([])
+    const [enginesChecked, setEnginesChecked] = useState([])
 
     // table filter search
     const [searchString, setSearchString] = useState('')
@@ -83,12 +86,28 @@ export function TtsConfigPane({
     }, [searchString])
 
     useEffect(() => {
+        let tmpVoices = [...voiceList]
+        for (let v of tmpVoices) {
+            v.show = enginesChecked.includes(v.engine)
+        }
+        setVoiceList(tmpVoices)
+    }, [enginesChecked])
+
+    useEffect(() => {
+        let langs_ = Array.from(new Set(voiceList.map((v) => v.lang)))
+        let engines_ = Array.from(new Set(voiceList.map((v) => v.engine)))
         // sort on startup
         sortVoices(sortSettings.selected)
+        // see what engines and languages are included in this voices array
+        setLangs(langs_)
+        setEngines(engines_)
+        // start with all engines selected
+        setEnginesChecked(engines_)
     }, [])
 
     let clearSearch = () => {
         setSearchString('')
+        setEnginesChecked([...engines])
     }
     // let moveVoice = (currPos, newPos) => {
     //     console.log('Move', currPos, newPos)
@@ -98,6 +117,18 @@ export function TtsConfigPane({
     //     setVoiceList(tmpVoices)
     // }
 
+    let changeEngineFilter = (e, engine) => {
+        let tmpEngines
+        if (e.target.checked) {
+            tmpEngines = [...enginesChecked, engine]
+            setEnginesChecked(tmpEngines)
+        } else {
+            tmpEngines = [...enginesChecked]
+            let idx = tmpEngines.findIndex((eng) => eng == engine)
+            tmpEngines.splice(idx, 1)
+            setEnginesChecked(tmpEngines)
+        }
+    }
     let getAriaSortValue = (colName) => {
         return sortSettings.selected == colName
             ? sortSettings[colName] == 1
@@ -115,26 +146,54 @@ export function TtsConfigPane({
                 configuration.
             </p>
             <div id="voice-table-controls">
-                <label htmlFor="voicesearch">Search</label>
-                <input
-                    id="voicesearch"
-                    type="text"
-                    value={searchString}
-                    onChange={(e) => {
-                        setSearchString(e.target.value)
-                    }}
-                    onKeyDown={(e) => {
-                        e.key === 'Enter' && e.preventDefault()
-                    }}
-                />
+                <div className="search">
+                    <label htmlFor="voicesearch">Search</label>
+                    <input
+                        id="voicesearch"
+                        type="text"
+                        value={searchString}
+                        onChange={(e) => {
+                            setSearchString(e.target.value)
+                        }}
+                        onKeyDown={(e) => {
+                            e.key === 'Enter' && e.preventDefault()
+                        }}
+                    />
+                </div>
+                <div className="includeEngines">
+                    <span>Show engines: </span>
+                    <ul>
+                        {engines.map((engine, idx) => (
+                            <li key={idx}>
+                                <input
+                                    type="checkbox"
+                                    id={`filter-engine-${engine}`}
+                                    checked={enginesChecked.includes(engine)}
+                                    onClick={(e) =>
+                                        changeEngineFilter(e, engine)
+                                    }
+                                    onChange={(e) =>
+                                        changeEngineFilter(e, engine)
+                                    }
+                                />
+                                <label htmlFor={`filter-engine-${engine}`}>
+                                    {engine}
+                                </label>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
             </div>
             {voiceList.filter((v) => v.show).length > 0 ? (
                 <div
                     role="region"
                     aria-labelledby="available-voices-label"
                     tabIndex={0}
                 >
-                    <table aria-labelledby="available-voices-label">
+                    <table
+                        aria-labelledby="available-voices-label"
+                        aria-live="polite"
+                    >
                         <thead>
                             <tr>
                                 <th
@@ -252,7 +311,7 @@ export function TtsConfigPane({
                 <>
                     <p>
                         No voices found{' '}
-                        {searchString != '' ? (
+                        {searchString != '' || enginesChecked.length == 0 ? (
                             <button
                                 className="inline-button"
                                 onClick={(e) => clearSearch()}
@@ -265,6 +324,10 @@ export function TtsConfigPane({
                     </p>
                 </>
             )}
+            <p className="selection-summary" aria-live="polite">
+                {preferredVoices.length} selected:{' '}
+                {preferredVoices.map((v) => v.name).join(', ')}
+            </p>
         </>
     )
 }

src/renderer/style/settings.scss

@@ -79,6 +79,9 @@ $engineColWidth: 8rem;
     justify-self: flex-end;
 }
 
+.fields:has(.tts-config) {
+    gap: 0;
+}
 .tts-config {
     display: flex;
     flex-direction: column;
@@ -115,19 +118,32 @@ $engineColWidth: 8rem;
         border-radius: 10px;
     }
     #voice-table-controls {
-        display: flex;
-        flex-direction: row;
+        // display: flex;
+        // flex-direction: row;
         gap: var(--pad);
         align-items: center;
 
         input {
             width: 80%;
         }
+
+        .includeEngines, .includeEngines ul, .includeEngines li {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            border: none;
+
+            label {
+                font-weight: normal;
+                width: min-content;
+                white-space: nowrap;
+            }
+        }
     }
     /* the table scrolling container */
     div[role="region"][aria-labelledby][tabindex] {
         overflow: auto;
-        max-height: $fieldHeight - 15vh;
+        max-height: $fieldHeight - 28vh;
     }
 
     table {
@@ -172,6 +188,11 @@ $engineColWidth: 8rem;
             content: '▼';
         }
     }
+
+    .selection-summary {
+        font-size: smaller;
+        font-style: italic;
+    }
 }
 
 pre {

src/renderer/style/style.scss

@@ -70,6 +70,11 @@ select {
 .description {
     font-style: italic;
     font-size: smaller;
+
+    // the markdown descriptions coming from the scripts can use paragraph tags, this lines them up at the top
+    p:first-child {
+        margin-top: 0 !important;
+    }
 }
 .filelink {
     color: var(--fg);

src/shared/data/slices/pipeline.ts

@@ -14,6 +14,7 @@ import {
     Datatype,
     JobStatus,
     Alive,
+    Voice,
 } from 'shared/types'
 
 import { RootState } from 'shared/types/store'