From 7e60288f293a796ef7c59584d889b73f6db74a55 Mon Sep 17 00:00:00 2001
From: arthur-lemeur <113124595+arthur-lemeur@users.noreply.github.com>
Date: Thu, 25 Apr 2024 11:40:35 +0200
Subject: [PATCH] fix(GUI): footer logo, OPDS login styles, TTS settings and
 voice selection, misc. CSS fixes (PR #2105)

* fix responsive in opds login page

* add logo in footer + app name in header in library

* move tts options in relevant popover

* fix allpublications height with new footer + hide menu icon in opds publicationCards
---
 src/main/redux/sagas/auth.ts                  |  10 +
 src/renderer/assets/icons/logo_edrlab.svg     |   9 +
 .../assets/styles/components/aboutFooter.scss |  10 +-
 .../components/allPublicationsPage.scss       |   2 +-
 .../styles/components/readerHeader.scss       |  35 ++-
 src/renderer/assets/styles/global.scss        |   4 +-
 src/renderer/assets/styles/header.scss        |   2 +-
 .../components/catalog/AboutThoriumButton.tsx |  19 +-
 .../components/layout/LibraryHeader.tsx       |   6 +-
 .../publication/PublicationCard.tsx           |   4 +-
 .../reader/components/ReaderHeader.tsx        | 234 +++++++-----------
 .../reader/components/ReaderSettings.tsx      |  52 ++--
 12 files changed, 186 insertions(+), 201 deletions(-)
 create mode 100644 src/renderer/assets/icons/logo_edrlab.svg

diff --git a/src/main/redux/sagas/auth.ts b/src/main/redux/sagas/auth.ts
index 4917d64a1..3db40dc0d 100644
--- a/src/main/redux/sagas/auth.ts
+++ b/src/main/redux/sagas/auth.ts
@@ -934,6 +934,10 @@ const htmlLoginTemplate = (
                     max-height: 75px;
                     max-width: 150px;
                 }
+
+                @media only screen and (max-width: 600px) {
+                    display: none;
+                }
             }
     
             .login form {
@@ -1006,6 +1010,12 @@ const htmlLoginTemplate = (
                 display: flex;
                 align-items: center;
                 gap: 10px;
+
+                @media only screen and (max-width: 1000px) {
+                    position: unset;
+                    width: 100%;
+                    justify-content: end;
+                }
             }
 
             .submit_button {
diff --git a/src/renderer/assets/icons/logo_edrlab.svg b/src/renderer/assets/icons/logo_edrlab.svg
new file mode 100644
index 000000000..efdec27b4
--- /dev/null
+++ b/src/renderer/assets/icons/logo_edrlab.svg
@@ -0,0 +1,9 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44 22C44 34.1486 34.1519 44 22.0032 44C9.8546 44 0 34.1486 0 22C0 9.85137 9.85138 0 22 0C34.1486 0 43.9968 9.84814 43.9968 22H44Z" fill="#243E91"/>
+<path d="M8.40039 24.0125V9.25H18.1258V11.8219H11.2825V15.2855H17.1112V17.8574H11.2825V21.4439H18.1258V24.0158H8.40039V24.0125Z" fill="white"/>
+<path d="M27.1438 22.6038C26.168 23.5796 24.7787 24.0158 23.2472 24.0158H17.916V9.25H23.2472C24.7787 9.25 26.1713 9.68619 27.1438 10.6587C28.8045 12.3162 28.6365 14.3485 28.6365 16.5683C28.6365 18.788 28.8013 20.9431 27.1438 22.6006V22.6038ZM25.1309 12.733C24.6333 12.1321 23.9709 11.8219 22.9758 11.8219H20.7981V21.4439H22.9758C23.9709 21.4439 24.6333 21.1337 25.1309 20.5327C25.6705 19.8704 25.7512 18.8106 25.7512 16.5715C25.7512 14.3324 25.6705 13.3986 25.1309 12.7363V12.733Z" fill="white"/>
+<path d="M33.9976 27.1629L31.1156 21.2728H29.0412V27.1629H26.1592V12.4004H31.9427C34.9508 12.4004 36.7311 14.4521 36.7311 16.9206C36.7311 18.9949 35.4677 20.2808 34.0364 20.7978L37.332 27.1629H33.9944H33.9976ZM31.7585 14.9691H29.0412V18.8657H31.7585C33.0219 18.8657 33.8522 18.0579 33.8522 16.9174C33.8522 15.7768 33.0219 14.9691 31.7585 14.9691Z" fill="white"/>
+<path d="M8.39355 35.1137V21.7373H11.0042V32.7842H17.0721V35.1137H8.39355Z" fill="white"/>
+<path d="M23.1096 34.9949V34.1483C22.4505 34.8075 21.8301 35.0886 20.7057 35.0886C19.5813 35.0886 18.7897 34.8075 18.2081 34.2227C17.6815 33.6766 17.4004 32.8882 17.4004 32.0256C17.4004 30.4682 18.4699 29.1887 20.7445 29.1887H23.0579V28.7008C23.0579 27.6281 22.5312 27.1596 21.2356 27.1596C20.2954 27.1596 19.8657 27.3858 19.3584 27.9674L17.7978 26.4456C18.7542 25.3923 19.6944 25.0918 21.3293 25.0918C24.0724 25.0918 25.5006 26.2582 25.5006 28.549V34.9916H23.1161L23.1096 34.9949ZM23.0547 30.8624H21.1193C20.2372 30.8624 19.7461 31.276 19.7461 31.9706C19.7461 32.6653 20.1985 33.0983 21.1581 33.0983C21.8333 33.0983 22.2663 33.0401 22.6993 32.6298C22.961 32.3842 23.0579 31.99 23.0579 31.3891V30.8624H23.0547Z" fill="white"/>
+<path d="M33.3556 34.1699C32.8096 34.716 31.9275 35.052 30.9711 35.052C29.9372 35.052 29.2038 34.7709 28.5285 34.0181V34.9389H26.1602V18.4316H28.6028V26.0148C29.2425 25.3008 29.976 25.0391 30.9711 25.0391C31.9663 25.0391 32.8128 25.3783 33.3556 25.9211C34.3314 26.8969 34.3508 28.5706 34.3508 30.0342C34.3508 31.4979 34.3314 33.1909 33.3556 34.1667V34.1699ZM30.2571 27.2394C28.7902 27.2394 28.6028 28.4413 28.6028 30.0375C28.6028 31.6336 28.7902 32.8549 30.2571 32.8549C31.724 32.8549 31.9114 31.6336 31.9114 30.0375C31.9114 28.4413 31.724 27.2394 30.2571 27.2394Z" fill="white"/>
+</svg>
diff --git a/src/renderer/assets/styles/components/aboutFooter.scss b/src/renderer/assets/styles/components/aboutFooter.scss
index 7cd88d305..a65b44d83 100644
--- a/src/renderer/assets/styles/components/aboutFooter.scss
+++ b/src/renderer/assets/styles/components/aboutFooter.scss
@@ -28,10 +28,18 @@
     align-items: center;
     justify-content: end;
     gap: 10px;
-    height: 30px;
+    height: 75px;
     width: calc(100% - 247px);
     background-color: var(--color-secondary);
 
+    svg {
+        width: 45px;
+    }
+
+    p {
+        margin: 0;
+    }
+
     @media screen and (width <= 800px) {
         width: calc(100% - 112px);
     }
diff --git a/src/renderer/assets/styles/components/allPublicationsPage.scss b/src/renderer/assets/styles/components/allPublicationsPage.scss
index 4ed36a284..476c34557 100644
--- a/src/renderer/assets/styles/components/allPublicationsPage.scss
+++ b/src/renderer/assets/styles/components/allPublicationsPage.scss
@@ -305,7 +305,7 @@
 .allBook_table {
     &_wrapper {
         overflow: auto;
-        inset: 280px 20px 30px 26px;
+        inset: 280px 20px 75px 26px;
         padding: 0;
         margin-top: 0;
         margin-bottom: 0.4em;
diff --git a/src/renderer/assets/styles/components/readerHeader.scss b/src/renderer/assets/styles/components/readerHeader.scss
index 9c02f917f..4a7de0a09 100644
--- a/src/renderer/assets/styles/components/readerHeader.scss
+++ b/src/renderer/assets/styles/components/readerHeader.scss
@@ -200,24 +200,18 @@
 .Tts_popover_container {
     display: flex;
     align-items: center;
-    height: 75px;
+    height: fit-content;
     background-color: var(--color-extralight-grey);
     box-shadow: 0 6px 10px 0 var(--color-medium-grey);
     border-radius: 6px;
     list-style-type: none;
     margin: 0;
-    padding: 0;
+    padding: 10px;
     border: 1px solid var(--color-medium-grey);
+    gap: 20px;
 
-    li {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: start;
-        border-right: 1px solid var(--color-medium-grey);
-        height: 50px;
-        padding: 0 20px;
 
+    .react_aria_ComboBox{
         .react_aria_Input {
             background-color: var(--color-secondary)!important;
             color: var(--color-primary)!important;
@@ -231,6 +225,27 @@
             background-color: var(--color-secondary);
             color: var(--color-primary);
         }
+
+        .react_aria_ComboBox {
+            margin: 0;
+        }
+    }
+
+    .ttsSelectRate {
+        .react_aria_ComboBox {
+            margin-bottom: 5px;
+            padding: 0;
+        }
+    }
+
+    .ttsSelectRate, .ttsSelectVoice {
+        input {
+            padding-left: 10px;
+        }
+
+        .my_combobox_container {
+            width: 280px;
+        }
     }
 }
 
diff --git a/src/renderer/assets/styles/global.scss b/src/renderer/assets/styles/global.scss
index 792348633..11652c12c 100644
--- a/src/renderer/assets/styles/global.scss
+++ b/src/renderer/assets/styles/global.scss
@@ -84,7 +84,7 @@ section {
   color: var(--color-primary);
 
   &:has(.footer_wrapper) {
-    padding-bottom: 40px;
+    padding-bottom: 100px;
   }
 
   &::-webkit-scrollbar {
@@ -297,7 +297,7 @@ nav + nav + .breadcrumb + .main {
   color: var(--color-primary);
   font-size: 14px;
   position: fixed;
-  bottom: 50px;
+  bottom: 100px;
   right: 55px;
   width: calc(100% - 320px);
   display: flex;
diff --git a/src/renderer/assets/styles/header.scss b/src/renderer/assets/styles/header.scss
index d9227631d..7bb3dff6b 100644
--- a/src/renderer/assets/styles/header.scss
+++ b/src/renderer/assets/styles/header.scss
@@ -41,7 +41,7 @@
     flex-direction: column;
     justify-content: space-between;
     padding: 30px 20px;
-    height: calc(100% - 60px);
+    height: calc(100% - 100px);
 
     & button {
       font-family: Nunito, sans-serif;
diff --git a/src/renderer/library/components/catalog/AboutThoriumButton.tsx b/src/renderer/library/components/catalog/AboutThoriumButton.tsx
index 9d770da9d..09f607bad 100644
--- a/src/renderer/library/components/catalog/AboutThoriumButton.tsx
+++ b/src/renderer/library/components/catalog/AboutThoriumButton.tsx
@@ -27,6 +27,8 @@ import { Link } from "@r2-shared-js/models/publication-link";
 
 import { apiAction } from "../../apiAction";
 import { ILibraryRootState } from "readium-desktop/common/redux/states/renderer/libraryRootState";
+import * as EdrlabLogo from "readium-desktop/renderer/assets/icons/logo_edrlab.svg";
+import SVG from "readium-desktop/renderer/common/components/SVG";
 
 const capitalizedAppName = _APP_NAME.charAt(0).toUpperCase() + _APP_NAME.substring(1);
 
@@ -53,13 +55,16 @@ class AboutThoriumButton extends React.Component<IProps, undefined> {
         const { __ } = this.props;
         return (
             <section className={stylesFooter.footer_wrapper}>
-                <a onClick={this.about} onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                        this.about();
-                    }
-                }}
-                tabIndex={0}>{__("catalog.about.title", { appName: capitalizedAppName })}</a>
-                <p>- {`v${_APP_VERSION}`}</p>
+ <div>
+                   <p>{`v${_APP_VERSION}`}</p>
+                   <a onClick={this.about} onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                            this.about();
+                        }
+                    }}
+                    tabIndex={0}>{__("catalog.about.title", { appName: capitalizedAppName })}</a>
+                </div>
+                <SVG ariaHidden svg={EdrlabLogo} />
             </section>
         );
     }
diff --git a/src/renderer/library/components/layout/LibraryHeader.tsx b/src/renderer/library/components/layout/LibraryHeader.tsx
index 7c3e01dee..ca76c9971 100644
--- a/src/renderer/library/components/layout/LibraryHeader.tsx
+++ b/src/renderer/library/components/layout/LibraryHeader.tsx
@@ -23,6 +23,7 @@ import * as CatalogsIcon from "readium-desktop/renderer/assets/icons/catalogs-ic
 import * as ShelfIcon from "readium-desktop/renderer/assets/icons/shelf-icon.svg";
 import SVG from "readium-desktop/renderer/common/components/SVG";
 import { Settings } from "../settings/Settings";
+import { _APP_NAME } from "readium-desktop/preprocessor-directives";
 
 interface NavigationHeader {
     route: string;
@@ -85,6 +86,8 @@ class Header extends React.Component<IProps, undefined> {
     public render(): React.ReactElement<{}> {
         const { __ } = this.props;
 
+        const capitalizedAppName = _APP_NAME.charAt(0).toUpperCase() + _APP_NAME.substring(1);
+
         return (<>
             <SkipLink
                 className={stylesHeader.skip_link}
@@ -92,7 +95,8 @@ class Header extends React.Component<IProps, undefined> {
                 label={__("accessibility.skipLink")}
             />
             <nav className={stylesHeader.main_navigation_library} role="navigation" aria-label={__("header.home")}>
-                <ul>
+                <h1 style={{textAlign: "center", color: "#AFB1B6", fontSize: "30px", marginBottom: "10px"}}>{capitalizedAppName}</h1>
+                <ul style={{paddingTop: "10px"}}>
                     <div>
                     {
                         headerNav.map(
diff --git a/src/renderer/library/components/publication/PublicationCard.tsx b/src/renderer/library/components/publication/PublicationCard.tsx
index 95226ec37..bf6d11825 100644
--- a/src/renderer/library/components/publication/PublicationCard.tsx
+++ b/src/renderer/library/components/publication/PublicationCard.tsx
@@ -193,6 +193,8 @@ class PublicationCard extends React.Component<IProps> {
                         <div style={{ display: "flex", alignItems: "end", height: "50px", width: "100%", justifyContent: isOpds ? "flex-end" : "space-between" }}>
                             {isOpds ? <></>
                                 : <span className={stylesButtons.button_secondary_blue}>{pubFormat}</span>}
+                                {isOpds ? <></>
+                            :
                             <Menu
                                 button={(
                                     <SVG title={`${__("accessibility.bookMenu")} (${publicationViewMaybeOpds.documentTitle})`} svg={MenuIcon} />
@@ -205,7 +207,7 @@ class PublicationCard extends React.Component<IProps> {
                                     <CatalogMenu
                                         publicationView={publicationViewMaybeOpds as PublicationView}
                                     />}
-                            </Menu>
+                            </Menu>}
                         </div>
                     </div>
                 </div>
diff --git a/src/renderer/reader/components/ReaderHeader.tsx b/src/renderer/reader/components/ReaderHeader.tsx
index 5975bc9c6..1aaff395f 100644
--- a/src/renderer/reader/components/ReaderHeader.tsx
+++ b/src/renderer/reader/components/ReaderHeader.tsx
@@ -12,7 +12,7 @@ import * as Popover from "@radix-ui/react-popover";
 import * as Dialog from "@radix-ui/react-dialog";
 import * as stylesPopoverDialog from "readium-desktop/renderer/assets/styles/components/popoverDialog.scss";
 // import * as ReactDOM from "react-dom";
-import { ReaderMode } from "readium-desktop/common/models/reader";
+import { ReaderConfig, ReaderMode } from "readium-desktop/common/models/reader";
 import * as BackIcon from "readium-desktop/renderer/assets/icons/shelf-icon.svg";
 import * as viewMode from "readium-desktop/renderer/assets/icons/fullscreen-corners-icon.svg";
 import * as MuteIcon from "readium-desktop/renderer/assets/icons/baseline-mute-24px.svg";
@@ -60,7 +60,7 @@ import { connect } from "react-redux";
 import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState";
 import { TDispatch } from "readium-desktop/typings/redux";
 import { PublicationInfoReaderWithRadix, PublicationInfoReaderWithRadixContent, PublicationInfoReaderWithRadixTrigger } from "./dialog/publicationInfos/PublicationInfo";
-import { ReaderSettings } from "./ReaderSettings";
+import { ReaderSettings, ReadingAudio } from "./ReaderSettings";
 import { createOrGetPdfEventBus } from "readium-desktop/renderer/reader/pdf/driver";
 import { MySelectProps, Select } from "readium-desktop/renderer/common/components/Select";
 import { ComboBox, ComboBoxItem } from "readium-desktop/renderer/common/components/ComboBox";
@@ -397,6 +397,20 @@ export class ReaderHeader extends React.Component<IProps, IState> {
             children: groupedVoices[lang].map((voice, i) => ({ id: i, name: voice.name, default: voice.default, lang: voice.lang, localService: voice.localService, voiceURI: voice.voiceURI })),
         }));
 
+        const playbackRate = [
+            { id: 0, value: 0.5, name: "0.5x" },
+            { id: 1, value: 0.75, name: "0.75x" },
+            { id: 2, value: 1, name: "1x" },
+            { id: 3, value: 1.25, name: "1.25x" },
+            { id: 4, value: 1.5, name: "1.5x" },
+            { id: 5, value: 1.75, name: "1.75x" },
+            { id: 6, value: 2, name: "2x" },
+            { id: 7, value: 2.25, name: "2.25x" },
+            { id: 8, value: 2.5, name: "2.5x" },
+            { id: 9, value: 2.75, name: "2.75x" },
+            { id: 10, value: 3, name: "3x" },
+        ];
+
         const isRTL = this.props.isRTLFlip();
 
         const showAudioTTSToolbar = (this.props.currentLocation && !this.props.currentLocation.audioPlaybackInfo) &&
@@ -694,155 +708,73 @@ export class ReaderHeader extends React.Component<IProps, IState> {
                                                 </Popover.Trigger>
                                                 <Popover.Portal>
                                                     <Popover.Content>
-                                                        <ul className={stylesReaderHeader.Tts_popover_container}>
-                                                            <li className={stylesReader.ttsSelectRate}>
-                                                                <label>
-                                                                    {
-                                                                        this.props.publicationHasMediaOverlays ?
-                                                                            __("reader.media-overlays.speed") :
-                                                                            __("reader.tts.speed")
-                                                                    }
-                                                                </label>
-                                                                <select title={
-                                                                    this.props.publicationHasMediaOverlays ?
-                                                                        __("reader.media-overlays.speed") :
-                                                                        __("reader.tts.speed")
-                                                                }
-                                                                    onChange={(ev) => {
-                                                                        if (this.props.publicationHasMediaOverlays) {
-                                                                            this.props.handleMediaOverlaysPlaybackRate(
-                                                                                ev.target.value.toString(),
-                                                                            );
-                                                                        } else {
-                                                                            this.props.handleTTSPlaybackRate(
-                                                                                ev.target.value.toString(),
-                                                                            );
-                                                                        }
-                                                                    }}
-                                                                    value={
-                                                                        this.props.publicationHasMediaOverlays ?
-                                                                            this.props.mediaOverlaysPlaybackRate :
-                                                                            this.props.ttsPlaybackRate
-                                                                    }
-                                                                >
-                                                                    <option value="3">3x</option>
-                                                                    <option value="2.75">2.75x</option>
-                                                                    <option value="2.5">2.5x</option>
-                                                                    <option value="2.25">2.25x</option>
-                                                                    <option value="2">2x</option>
-                                                                    <option value="1.75">1.75x</option>
-                                                                    <option value="1.5">1.5x</option>
-                                                                    <option value="1.25">1.25x</option>
-                                                                    <option value="1">1x</option>
-                                                                    <option value="0.75">0.75x</option>
-                                                                    <option value="0.5">0.5x</option>
-                                                                </select>
-                                                            </li>
-                                                            {!useMO && (
-                                                                <li className={stylesReader.ttsSelectVoice}>
-                                                                    {/* <label>{__("reader.tts.voice")}</label> */}
-                                                                    {/* <select title={__("reader.tts.voice")}
-                                                                        onChange={(ev) => {
-                                                                            const i = parseInt(ev.target.value.toString(), 10);
-                                                                            let voice = i === 0 ? null : _orderedVoices[i - 1];
-                                                                            // alert(`${i} ${voice.name} ${voice.lang} ${voice.default} ${voice.voiceURI} ${voice.localService}`);
-                                                                            if (voice && voice.name === LANG_DIVIDER_PREFIX) {
-                                                                                // voice = null;
-                                                                                voice = _orderedVoices[i];
-                                                                            }
-                                                                            this.props.handleTTSVoice(voice ? voice : null);
-                                                                            console.log(i)
-                                                                        }}
-                                                                        value={
-                                                                            this.props.ttsVoice ?
-                                                                                _orderedVoices.findIndex((voice) => {
-                                                                                    // exact match
-                                                                                    return voice.name === this.props.ttsVoice.name && voice.lang === this.props.ttsVoice.lang && voice.voiceURI === this.props.ttsVoice.voiceURI && voice.default === this.props.ttsVoice.default && voice.localService === this.props.ttsVoice.localService;
-                                                                                }) + 1 : 0
-                                                                        }
-                                                                    >
-                                                                        {
-                                                                            [].concat((<option key={"tts0"} value="{i}">{`${__("reader.tts.default")}`}</option>),
-                                                                                _orderedVoices.map((voice, i) => {
-                                                                                    // SpeechSynthesisVoice
-                                                                                    return (<option key={`tts${i + 1}`} value={i + 1}>{`${voice.name}${voice.name === LANG_DIVIDER_PREFIX ? ` [${voice.lang}]` : ""}${voice.default ? " *" : ""}`}</option>);
-                                                                                }))
-                                                                        }
-                                                                    </select> */}
-
-                                                                    {/* <SelectTts
-                                                                items={_orderedVoices}
-                                                                selectedKey={
-                                                                    this.props.ttsVoice ?
-                                                                        _orderedVoices.findIndex((voice) => {
-                                                                            // exact match
-                                                                            return voice.name === this.props.ttsVoice.name &&
-                                                                                voice.lang === this.props.ttsVoice.lang &&
-                                                                                voice.voiceURI === this.props.ttsVoice.voiceURI &&
-                                                                                voice.default === this.props.ttsVoice.default &&
-                                                                                voice.localService === this.props.ttsVoice.localService;
-                                                                        }) + 1 : 0
-                                                                }
-                                                                onSelectionChange={(ev) => {
-                                                                    const i = parseInt(ev.toString(), 10);
-                                                                    let voice = i === 0 ? null : _orderedVoices[i - 1];
-                                                                    if (voice && voice.name === LANG_DIVIDER_PREFIX) {
-                                                                        voice = _orderedVoices[i];
-                                                                    }
-                                                                    this.props.handleTTSVoice(voice ? voice : null);
-                                                                }}
-                                                                style={{ paddingBottom: "0", margin: "0" }}
-                                                            >
-                                                                {
-                                                            [].concat((<ComboBoxItem key={"tts0"} value="{i}">{`${__("reader.tts.default")}`}</ComboBoxItem>),
-                                                                _orderedVoices.map((voice, i) => {
-                                                                    // SpeechSynthesisVoice
-                                                                    return (
-                                                                        voice.name === LANG_DIVIDER_PREFIX ?
-                                                                            <ReactAriaHeader>{voice.lang}</ReactAriaHeader> :
-                                                                            <ComboBoxItem key={`tts${i + 1}`} value={i + 1}>{`${voice.name}${voice.name === LANG_DIVIDER_PREFIX ? ` [${voice.lang}]` : ""}${voice.default ? " *" : ""}`}</ComboBoxItem>
-
-                                                                    );
-                                                                }))
-                                                                        }
-                                                                    </SelectTts> */}
-
-                                                                    <ComboBox
-                                                                        label={__("reader.tts.voice")}
-                                                                        defaultItems={options}
-                                                                        defaultInputValue={
-                                                                            this.props.ttsVoice ?
-                                                                            this.props.ttsVoice.name : voicesMapping[0].name}
-                                                                        selectedKey={
-                                                                            this.props.ttsVoice ?
-                                                                                voicesMapping.find((voice) => voice.name === this.props.ttsVoice.name).id :
-                                                                                -1
-                                                                        }
-                                                                        onSelectionChange={(ev) => {
-                                                                            console.log(ev);
-                                                                            const i = _orderedVoices.find((voice) => voice.name === ev || null);
-                                                                            this.props.handleTTSVoice(i);
-                                                                        }}
-                                                                        style={{ paddingBottom: "0", margin: "0" }}
-                                                                    >
-                                                                        {section => (
-                                                                            <Section id={section.name} key={`section-${section.name}`}>
-                                                                                <ReactAriaHeader style={{ paddingLeft: "5px", fontSize: "16px", color: "var(--color-blue)", borderBottom: "1px solid var(--color-light-blue)"}}>
-                                                                                        {section.name}
-                                                                                    </ReactAriaHeader>
-                                                                                <Collection items={section.children} key={`collection-${section.name}`}>
-                                                                                    {item => <ComboBoxItem id={item.name} key={`tts${item.id + 1}`} value={item.id + 1}>{item.name}</ComboBoxItem>}
-                                                                                </Collection>
-                                                                            </Section>)}
-                                                                    </ComboBox>
-                                                                </li>
-                                                            )}
-                                                        </ul>
-                                                        <Popover.Arrow className={stylesReaderHeader.popover_arrow} />
-                                                    </Popover.Content>
-                                                </Popover.Portal>
-                                            </Popover.Root>
-                                        </li>
+                                                        <div className={stylesReaderHeader.Tts_popover_container}>
+                                                            <div style={{paddingRight: "25px", borderRight: "1px solid var(--color-medium-grey)"}}>
+                                                            <div className={stylesReader.ttsSelectRate}>
+                                                                            <ComboBox label={this.props.publicationHasMediaOverlays ?
+                                                                                __("reader.media-overlays.speed")
+                                                                                : __("reader.tts.speed")}
+                                                                                defaultItems={playbackRate}
+                                                                                // defaultSelectedKey={2}
+                                                                                selectedKey={
+                                                                                    this.props.ttsPlaybackRate ?
+                                                                                    playbackRate.find((rate) => rate.value.toString() === this.props.ttsPlaybackRate).id :
+                                                                                        2
+                                                                                }
+                                                                                onSelectionChange={(ev) => {
+                                                                                    const v = playbackRate.find((option) => option.id === ev).value;
+                                                                                    if (this.props.publicationHasMediaOverlays) {
+                                                                                        this.props.handleMediaOverlaysPlaybackRate(
+                                                                                            v.toString(),
+                                                                                        );
+                                                                                    } else {
+                                                                                        this.props.handleTTSPlaybackRate(
+                                                                                            v.toString(),
+                                                                                        );
+                                                                                    }
+                                                                                }}>
+                                                                                {item => <ComboBoxItem>{item.name}</ComboBoxItem>}
+                                                                            </ComboBox>
+                                                                        </div>
+                                                                        {!useMO && (
+                                                                            <div className={stylesReader.ttsSelectVoice}>
+                                                                                <ComboBox
+                                                                                    label={__("reader.tts.voice")}
+                                                                                    defaultItems={options}
+                                                                                    defaultInputValue={
+                                                                                        this.props.ttsVoice ?
+                                                                                            this.props.ttsVoice.name : voicesMapping[0].name}
+                                                                                    selectedKey={
+                                                                                        this.props.ttsVoice ?
+                                                                                            voicesMapping.find((voice) => voice.name === this.props.ttsVoice.name).id :
+                                                                                            -1
+                                                                                    }
+                                                                                    onSelectionChange={(ev) => {
+                                                                                        const i = _orderedVoices.find((voice) => voice.name === ev || null);
+                                                                                        this.props.handleTTSVoice(i);
+                                                                                    }}
+                                                                                    style={{ paddingBottom: "0", margin: "0" }}
+                                                                                >
+                                                                                    {section => (
+                                                                                        <Section id={section.name} key={`section-${section.name}`}>
+                                                                                            <ReactAriaHeader style={{ paddingLeft: "5px", fontSize: "16px", color: "var(--color-blue)", borderBottom: "1px solid var(--color-light-blue)" }}>
+                                                                                                {section.name}
+                                                                                            </ReactAriaHeader>
+                                                                                            <Collection items={section.children} key={`collection-${section.name}`}>
+                                                                                                {item => <ComboBoxItem id={item.name} key={`tts${item.id + 1}`} value={item.id + 1}>{item.name}</ComboBoxItem>}
+                                                                                            </Collection>
+                                                                                        </Section>)}
+                                                                                </ComboBox>
+                                                                            </div>
+                                                                        )}
+                                                                    </div>
+                                                                    <ReadingAudio config={this.props.ReaderSettingsProps.readerConfig} set={(config: Partial<ReaderConfig>) => { this.props.ReaderSettingsProps.setSettings({ ...this.props.ReaderSettingsProps.readerConfig, ...config }); }} />
+                                                                </div>
+                                                                <Popover.Arrow className={stylesReaderHeader.popover_arrow} />
+                                                            </Popover.Content>
+                                                        </Popover.Portal>
+                                                    </Popover.Root>
+                                                </li>
                                     </>
                         }
                     </ul>
diff --git a/src/renderer/reader/components/ReaderSettings.tsx b/src/renderer/reader/components/ReaderSettings.tsx
index 409985e37..63ddc3bc8 100644
--- a/src/renderer/reader/components/ReaderSettings.tsx
+++ b/src/renderer/reader/components/ReaderSettings.tsx
@@ -195,12 +195,14 @@ export const FontSize = ({config: {fontSize}, set}: {config: Pick<ReaderConfig,
         <section>
             <h4>{__("reader.settings.fontSize")} ({fontSize})</h4>
             <div className={stylesSettings.size_range}>
-            <button onClick={() => {
+                <button onClick={() => {
                     const newValue = "100%";
                     setCurrentSliderValue(newValue.replace(/%/g, ""));
                     set({ fontSize: newValue });
                 }
-                } className={stylesSettings.reset_button} title="default value"><SVG ariaHidden svg={ResetIcon} /></button>
+                } className={stylesSettings.reset_button} title="default value">
+                    <SVG ariaHidden svg={ResetIcon} />
+                </button>
                 <button onClick={() => click("out")} className={stylesSettings.scale_button}><SVG ariaHidden svg={MinusIcon} /></button>
                 <input
                     type="range"
@@ -557,7 +559,7 @@ const ReadingDisplayAlign = ({ config: { align }, set }: { config: Pick<ReaderCo
     );
 };
 
-const ReadingAudio = ({ config: { mediaOverlaysEnableCaptionsMode: captions, mediaOverlaysEnableSkippability: skippability, ttsEnableSentenceDetection: splitTTStext }, set }:
+export const ReadingAudio = ({ config: { mediaOverlaysEnableCaptionsMode: captions, mediaOverlaysEnableSkippability: skippability, ttsEnableSentenceDetection: splitTTStext }, set }:
     { config: Pick<ReaderConfig, "mediaOverlaysEnableCaptionsMode" | "mediaOverlaysEnableSkippability" | "ttsEnableSentenceDetection">,
     set: (a: Partial<Pick<ReaderConfig, "mediaOverlaysEnableCaptionsMode" | "mediaOverlaysEnableSkippability" | "ttsEnableSentenceDetection">>) => void }) => {
     const [__] = useTranslator();
@@ -598,19 +600,17 @@ const ReadingAudio = ({ config: { mediaOverlaysEnableCaptionsMode: captions, med
     return (
         <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px,1fr)"}}>
             {options.map((option) => (
-                <section className={stylesSettings.section} key={option.id}>
-                    <div>
-                        <input
-                            id={option.id}
-                            type="checkbox"
-                            name={option.name}
-                            onChange={option.onChange}
-                            defaultChecked={option.checked}
-                        />
-                        <label htmlFor={option.id}>{option.label}</label>
-                        <p className={stylesSettings.session_text}>{option.description}</p>
-                    </div>
-                </section>
+                <div style={{padding: "10px 0"}} key={option.id}>
+                    <input
+                        id={option.id}
+                        type="checkbox"
+                        name={option.name}
+                        onChange={option.onChange}
+                        defaultChecked={option.checked}
+                    />
+                    <label htmlFor={option.id}>{option.label}</label>
+                    {/* <p className={stylesSettings.session_text}>{option.description}</p> */}
+                </div>
 
             ))}
         </div>
@@ -1032,12 +1032,12 @@ export const ReaderSettings: React.FC<IBaseProps> = (props) => {
         </Tabs.Trigger>;
     const optionDisplayItem = { id: 3, value: "tab-display", name: __("reader.settings.display"), disabled: false, svg: AlignLeftIcon };
 
-    const AudioTrigger =
-        <Tabs.Trigger value="tab-audio" key={"tab-audio"} title={__("reader.media-overlays.title")}>
-            <SVG ariaHidden svg={VolumeUpIcon} />
-            <h3>{__("reader.media-overlays.title")}</h3>
-        </Tabs.Trigger>;
-    const optionAudioItem = { id: 4, value: "tab-audio", name: __("reader.media-overlays.title"), disabled: false, svg: VolumeUpIcon };
+    // const AudioTrigger =
+    //     <Tabs.Trigger value="tab-audio" key={"tab-audio"} title={__("reader.media-overlays.title")}>
+    //         <SVG ariaHidden svg={VolumeUpIcon} />
+    //         <h3>{__("reader.media-overlays.title")}</h3>
+    //     </Tabs.Trigger>;
+    // const optionAudioItem = { id: 4, value: "tab-audio", name: __("reader.media-overlays.title"), disabled: false, svg: VolumeUpIcon };
 
     const PdfZoomTrigger =
         <Tabs.Trigger value="tab-pdfzoom" key={"tab-pdfzoom"} title={__("reader.settings.pdfZoom.title")}>
@@ -1065,8 +1065,8 @@ export const ReaderSettings: React.FC<IBaseProps> = (props) => {
         options.push(optionDisplayItem);
     }
     if (isEpub) {
-        sections.push(AudioTrigger);
-        options.push(optionAudioItem);
+        // sections.push(AudioTrigger);
+        // options.push(optionAudioItem);
         sections.push(AllowCustomContainer());
         sections.push(TextTrigger);
         options.push(optionTextItem);
@@ -1215,12 +1215,12 @@ export const ReaderSettings: React.FC<IBaseProps> = (props) => {
                             {isPdf ? <></> : <ReadingDisplayMathJax config={readerConfig} set={setPartialSettingsDebounced} disableRTLFlip={props.disableRTLFlip} setDisableRTLFlip={props.setDisableRTLFlip} />}
                         </section>
                     </Tabs.Content>
-                    <Tabs.Content value="tab-audio" tabIndex={-1}>
+                    {/* <Tabs.Content value="tab-audio" tabIndex={-1}>
                     <TabHeader />
                         <section className={stylesSettings.settings_tab}>
                             <ReadingAudio config={readerConfig} set={setPartialSettingsDebounced}/>
                         </section>
-                    </Tabs.Content>
+                    </Tabs.Content> */}
                 </div>
             </Tabs.Root>
         </div>