+
-
+
-
diff --git a/partials/_modal-tts-settings.php b/partials/_modal-tts-settings.php
new file mode 100644
index 00000000..05248d5a
--- /dev/null
+++ b/partials/_modal-tts-settings.php
@@ -0,0 +1,57 @@
+
+
+
diff --git a/partials/_tts-interface.php b/partials/_tts-interface.php
index 6a0eaf43..f2c27e34 100644
--- a/partials/_tts-interface.php
+++ b/partials/_tts-interface.php
@@ -9,7 +9,6 @@
?>
-
-
-
diff --git a/src/js/tts.js b/src/js/tts.js
index 8541f112..3513dbb3 100644
--- a/src/js/tts.js
+++ b/src/js/tts.js
@@ -151,7 +151,6 @@ function fcn_updateVoice(id) {
fcn_utter.voice = selection;
_$$$('tts-voice-select').value = id;
- _$$$('selected-voice-label').innerHTML = `Selected Voice: ${selection.name} (${selection.lang})`;
fcn_ttsSettings['voice'] = id;
fcn_setTTSsettings(fcn_ttsSettings);
@@ -174,6 +173,7 @@ function fcn_updateVolume(value) {
_$$$('tts-volume-range').value = value;
_$$$('tts-volume-text').value = value;
+ _$$$('tts-volume-reset').classList.toggle('_modified', value != 100);
fcn_ttsSettings['volume'] = value;
fcn_setTTSsettings(fcn_ttsSettings);
@@ -194,6 +194,7 @@ function fcn_updatePitch(value) {
_$$$('tts-pitch-range').value = value;
_$$$('tts-pitch-text').value = value;
+ _$$$('tts-pitch-reset').classList.toggle('_modified', value != 1.0);
fcn_ttsSettings['pitch'] = value;
fcn_setTTSsettings(fcn_ttsSettings);
@@ -214,6 +215,7 @@ function fcn_updateRate(value) {
_$$$('tts-rate-range').value = value;
_$$$('tts-rate-text').value = value;
+ _$$$('tts-rate-reset').classList.toggle('_modified', value != 1.0);
fcn_ttsSettings['rate'] = value;
fcn_setTTSsettings(fcn_ttsSettings);
@@ -390,6 +392,9 @@ if (typeof speechSynthesis !== 'undefined') {
});
});
+ // Volume reset
+ _$$$('tts-volume-reset')?.addEventListener('click', () => { fcn_updateVolume(100) });
+
// Pitch inputs
_$$('#tts-pitch-range, #tts-pitch-text').forEach(element => {
element.addEventListener('input', (e) => {
@@ -397,6 +402,9 @@ if (typeof speechSynthesis !== 'undefined') {
});
});
+ // Pitch reset
+ _$$$('tts-pitch-reset')?.addEventListener('click', () => { fcn_updatePitch(1.0) });
+
// Rate inputs
_$$('#tts-rate-range, #tts-rate-text').forEach(element => {
element.addEventListener('input', (e) => {
@@ -404,10 +412,8 @@ if (typeof speechSynthesis !== 'undefined') {
});
});
- // Settings button
- _$$$('tts-settings-toggle')?.addEventListener('change', event => {
- event.currentTarget.closest('#tts-interface').dataset.showSettings = event.currentTarget.checked;
- });
+ // Pitch reset
+ _$$$('tts-rate-reset')?.addEventListener('click', () => { fcn_updateRate(1.0) });
// Terminate TTS on any chapter page reload (otherwise, it will keep running in the background)
window.addEventListener('beforeunload', () => {
diff --git a/src/js/user.js b/src/js/user.js
index cb10ed9b..d204f164 100644
--- a/src/js/user.js
+++ b/src/js/user.js
@@ -17,7 +17,7 @@ fcn_getProfileImage();
function fcn_replaceProfileImage(target, avatar) {
// Setup
- const old = target.querySelector('.icon._user');
+ const old = target.querySelector('.user-icon');
// Add avatar to view
if (old) {
diff --git a/src/scss/_reader-settings.scss b/src/scss/_reader-settings.scss
index d415f94b..0a647e53 100644
--- a/src/scss/_reader-settings.scss
+++ b/src/scss/_reader-settings.scss
@@ -1,40 +1,6 @@
.reader-settings {
--modal-overlay: transparent;
- :is([type=text], [type=number]) {
- flex-shrink: 0;
- text-align: center;
- border-radius: 0 var(--layout-border-radius-small) var(--layout-border-radius-small) 0;
- padding: 0;
- width: 55px;
- }
-
- input[type=range] {
- flex-grow: 1;
- border-radius: var(--layout-border-radius-small) 0 0 var(--layout-border-radius-small);
- width: 146px;
- }
-
- .reset-button {
- cursor: pointer;
- display: flex;
- flex-shrink: 0;
- color: var(--modal-icon);
- font-size: 24px;
- margin-left: 4px;
- transition: opacity var(--transition-duration),
- color var(--transition-duration);
-
- &:disabled {
- cursor: default;
- opacity: .2;
- }
-
- &:not(:disabled):hover {
- color: var(--modal-icon-hover);
- }
- }
-
&__row {
display: flex;
align-items: center;
diff --git a/src/scss/_site-settings.scss b/src/scss/_site-settings.scss
index 08dc6d75..ecac934b 100644
--- a/src/scss/_site-settings.scss
+++ b/src/scss/_site-settings.scss
@@ -1,40 +1 @@
-.site-settings {
- &__row {
- > div {
- display: flex;
- align-items: center;
- gap: 12px;
- font-size: 13px;
-
- &:not(:first-child) {
- margin-top: 8px;
- }
-
- &.grouped-inputs {
- gap: 3px;
- }
-
- > :is(i, .icon) {
- flex-shrink: 0;
- color: var(--modal-icon);
- font-size: 15px;
- text-align: center;
- margin: 0 3px 0 -4px;
- min-width: 26px;
- }
- }
- }
-
- input[type=range] {
- flex-grow: 1;
- border-radius: var(--layout-border-radius-small) 0 0 var(--layout-border-radius-small);
- }
-
- :is([type=text], [type=number]) {
- flex-shrink: 0;
- text-align: center;
- border-radius: 0 var(--layout-border-radius-small) var(--layout-border-radius-small) 0;
- padding: 0;
- width: 55px;
- }
-}
+.site-settings {}
diff --git a/src/scss/_tts.scss b/src/scss/_tts.scss
index fbce7dec..2d00f325 100644
--- a/src/scss/_tts.scss
+++ b/src/scss/_tts.scss
@@ -8,20 +8,6 @@
background: var(--tts-background);
padding: 16px;
- &[data-show-settings="false"] {
- .tts-interface__settings {
- display: none;
- content-visibility: hidden;
- }
- }
-
- &[data-show-settings="true"] {
- .button.settings {
- background: var(--tts-button-active-background);
- color: var(--tts-button-active-text);
- }
- }
-
&__controls {
display: flex;
justify-content: center;
@@ -40,62 +26,9 @@
}
}
- &__settings {
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin-top: 8px;
- max-width: 98vw;
- min-width: 288px;
-
- > div {
- display: flex;
- align-items: center;
- }
-
- span {
- color: var(--fg-600);
- font-size: 15px;
- text-align: right;
- line-height: 1;
- padding: 0 4px 2px 0;
- margin-right: 4px;
- min-width: 64px;
- }
- }
-
- &__range:is(input) {
- flex-grow: 1;
- margin: 0 4px 0 0;
- }
-
- &__number:is(input) {
- flex: 0 0 48px;
- text-align: center;
- height: 24px;
- width: 48px;
- }
-
&:not(.ended).paused button.pause,
&:not(.ended).playing button.play {
background: var(--tts-button-active-background);
color: var(--tts-button-active-text);
}
-
- &__voice-selection {
- position: relative;
- justify-content: center;
-
- select {
- position: absolute;
- inset: 0;
- z-index: 1;
- opacity: 0;
- }
-
- .button {
- pointer-events: none;
- width: 100%;
- }
- }
}
diff --git a/src/scss/common/_icons.scss b/src/scss/common/_icons.scss
index 8936186f..0a57fade 100644
--- a/src/scss/common/_icons.scss
+++ b/src/scss/common/_icons.scss
@@ -57,6 +57,24 @@
width: .625em;
}
+ &._soundwave {
+ height: 1.25em;
+
+ &._modified {
+ padding: 5px 0;
+ min-height: unset;
+ height: 1.1em;
+ }
+ }
+
+ &._pulse {
+ height: 1.1em;
+
+ &._modified {
+ padding: 5.5px 0;
+ min-height: unset;
+ height: 1em;
+ }
}
}
diff --git a/src/scss/common/_modals.scss b/src/scss/common/_modals.scss
index 8d9bac1d..7e0a0fbf 100644
--- a/src/scss/common/_modals.scss
+++ b/src/scss/common/_modals.scss
@@ -14,6 +14,19 @@
width: 100%;
}
+ :is([type=text], [type=number]) {
+ flex-shrink: 0;
+ text-align: center;
+ border-radius: 0 var(--layout-border-radius-small) var(--layout-border-radius-small) 0;
+ padding: 0;
+ width: 55px;
+ }
+
+ input[type=range] {
+ flex-grow: 1;
+ border-radius: var(--layout-border-radius-small) 0 0 var(--layout-border-radius-small);
+ }
+
.close {
--focus-offset: -2px;
position: absolute;
@@ -41,18 +54,6 @@
height: 100%; // Prevent gaps caused by mobile interface
}
- // Inner utility class
- .border-bottom {
- padding-bottom: 12px;
- border-bottom: 1px solid var(--bg-200);
- }
-
- // Inner utility class
- .border-top {
- padding-top: 12px;
- border-top: 1px solid var(--bg-200);
- }
-
&__wrapper {
position: absolute;
top: 50%;
@@ -81,6 +82,11 @@
background-color: var(--scrollbar-thumb);
border-radius: 1px;
}
+
+ > hr {
+ border-bottom: 1px solid var(--bg-200);
+ margin: 0 12px;
+ }
}
&__header:is(h4) {
@@ -91,6 +97,16 @@
margin: 0;
}
+ &__row,
+ &__horizontal-input-group {
+ > :is(i, .icon) {
+ flex-shrink: 0;
+ color: var(--modal-icon);
+ text-align: center;
+ min-width: 26px;
+ }
+ }
+
&__row {
padding: 12px;
@@ -98,18 +114,9 @@
padding: #{get_clamp(6, 8, 320, 480)} 12px;
}
- &._no-vertical-padding {
- padding-top: 0;
- padding-bottom: 0;
- }
-
> :is(i, .icon) {
- flex-shrink: 0;
- color: var(--modal-icon);
font-size: 18px;
- text-align: center;
margin: 0 3px 0 -3px;
- min-width: 26px;
}
.reset {
@@ -137,6 +144,26 @@
}
}
+ &__horizontal-input-group {
+ display: flex;
+ align-items: center;
+ gap: 3px;
+ font-size: 13px;
+
+ &:not(:first-child) {
+ margin-top: 8px;
+ }
+
+ &._with-checkbox {
+ gap: 12px;
+ }
+
+ :is(i, .icon) {
+ font-size: 15px;
+ margin: 0 3px 0 -4px;
+ }
+ }
+
&__description {
font-size: 13px;
line-height: 1.4;