malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add TTS setting modal + refactoring

Browse Source
This commit is contained in:
Tetrakern 2023-07-09 19:51:54 +02:00
parent 9a508ec1f2
commit c3dd32717f
18 changed files with 181 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CREDITS.md
View File

@ -76,6 +76,11 @@ The following list credits all third-party resources used in the Fictioneer them
License: [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)<br>
Source: https://commons.wikimedia.org/wiki/File:No-Image-Placeholder.svg
* **Bootstrap Icons**<br>
Copyright: The Bootstrap Authors, Twitter, Inc.<br>
License: [MIT](https://github.com/twbs/bootstrap/blob/v4.0.0/LICENSE)<br>
Source: https://icons.getbootstrap.com/
## CSS
* **Reset CSS 2.0**<br>

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/chapter.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

4
img/icon-sprite.svg
View File

@ -1,5 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-soundwave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><!--! Bootstrap Icons: https://icons.getbootstrap.com/icons/soundwave/ --><path fill="currentColor" fill-rule="evenodd" d="M8.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5zm-2 2a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm4 0a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zm-6 1.5A.5.5 0 0 1 5 6v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm8 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm-10 1A.5.5 0 0 1 3 7v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5zm12 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5z"/></symbol>
<symbol id="icon-pulse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><!--! Bootstrap Icons: https://icons.getbootstrap.com/icons/activity/ --><path fill="currentColor" fill-rule="evenodd" stroke-width="0.65" stroke="currentColor" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/></symbol>
<symbol id="icon-grid-2x2" viewBox="-2 -2 24 24" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin"><!--! Jam Interface: https://github.com/michaelampr/jam/blob/master/icons/grid-f.svg --><path fill="currentColor" d='M2 0h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm12 0h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 12h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zM2 12h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2z' /></symbol>
<symbol id="icon-feedly" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><!--! CoreUI Icons: https://github.com/coreui/coreui-icons/blob/master/svg/brand/cib-feedly.svg --><path fill="currentColor" d="M18.479 2.651c-1.364-1.391-3.604-1.391-4.968 0l-12.484 12.719c-1.365 1.412-1.365 3.652 0 5.057l8.911 9.079c0.636 0.573 1.464 0.885 2.317 0.885h7.485c0.943 0 1.839-0.38 2.495-1.052l8.739-8.901c1.371-1.411 1.371-3.651 0-5.063zM18.136 25.88l-1.251 1.265c-0.093 0.1-0.219 0.157-0.355 0.157h-1.067c-0.125-0.005-0.24-0.048-0.328-0.131l-1.276-1.292c-0.193-0.203-0.193-0.52 0-0.724l1.785-1.812c0.193-0.204 0.511-0.204 0.709 0l1.781 1.812c0.197 0.204 0.197 0.527 0 0.724zM18.136 18.265l-4.985 5.079c-0.093 0.093-0.224 0.151-0.359 0.145h-1.063c-0.125 0.005-0.245-0.041-0.333-0.12l-1.271-1.296c-0.193-0.199-0.193-0.521 0-0.724l5.52-5.62c0.193-0.199 0.516-0.199 0.709 0l1.781 1.817c0.197 0.199 0.197 0.521 0 0.719zM18.136 10.656l-8.724 8.88c-0.095 0.1-0.219 0.152-0.355 0.152h-1.068c-0.125 0-0.24-0.043-0.333-0.125l-1.271-1.297c-0.192-0.197-0.192-0.52 0-0.719l9.26-9.427c0.193-0.199 0.511-0.199 0.709 0l1.781 1.812c0.197 0.204 0.197 0.527 0 0.724z"/></symbol>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 15 KiB

3
includes/functions/hooks/_general_hooks.php
View File

@ -83,6 +83,9 @@ if ( ! function_exists( 'fictioneer_output_modals' ) ) {
?><input id="modal-formatting-toggle" data-target="formatting-modal" type="checkbox" tabindex="-1" class="modal-toggle" autocomplete="off" hidden><?php
get_template_part( 'partials/_modal-formatting' );
?><input id="modal-tts-settings-toggle" data-target="tts-settings-modal" type="checkbox" tabindex="-1" class="modal-toggle" autocomplete="off" hidden><?php
get_template_part( 'partials/_modal-tts-settings' );
if (
get_option( 'fictioneer_enable_suggestions' ) &&
! fictioneer_get_field( 'fictioneer_disable_commenting' ) &&

2
js/tts.min.js vendored
View File

File diff suppressed because one or more lines are too long

16
partials/_modal-formatting.php
View File

@ -18,49 +18,49 @@
<div class="modal__row reader-settings__row _vertical-shrink-spacing">
<i class="fa-solid fa-adjust reset setting-darken-reset" title="<?php esc_attr_e( 'Darken Background', 'fictioneer' ); ?>"></i>
<input type="range" value="0" min="-1" max="1" step=".01" class="slider setting-darken-range">
<input type="range" value="0" min="-1" max="1" step=".01" class="setting-darken-range">
<input type="number" value="0" min="-100" max="100" class="setting-darken-text">
</div>
<div class="modal__row reader-settings__row _vertical-shrink-spacing">
<i class="fa-solid fa-droplet reset setting-saturation-resets" title="<?php esc_attr_e( 'Saturate Background', 'fictioneer' ); ?>"></i>
<input type="range" value="0" min="-1" max="1" step=".01" class="slider setting-saturation-range">
<input type="range" value="0" min="-1" max="1" step=".01" class="setting-saturation-range">
<input type="number" value="0" min="-100" max="100" class="setting-saturation-text">
</div>
<div class="modal__row reader-settings__row _vertical-shrink-spacing hide-below-640">
<i class="fa-solid fa-arrows-alt-h reset" title="<?php esc_attr_e( 'Content Width', 'fictioneer' ); ?>" id="reader-settings-site-width-reset"></i>
<input type="range" value="960" min="640" max="1920" step="1" class="slider" id="reader-settings-site-width-range">
<input type="range" value="960" min="640" max="1920" step="1" id="reader-settings-site-width-range">
<input type="number" value="960" min="640" max="1920" step="1" id="reader-settings-site-width-text">
</div>
<div class="modal__row reader-settings__row _vertical-shrink-spacing">
<i class="fa-solid fa-text-height reset" title="<?php esc_attr_e( 'Font Size (Percentage)', 'fictioneer' ); ?>" id="reader-settings-font-size-reset"></i>
<input type="range" value="100" min="50" max="200" step="1" class="slider" id="reader-settings-font-size-range">
<input type="range" value="100" min="50" max="200" step="1" id="reader-settings-font-size-range">
<input type="number" value="100" min="50" max="200" step="1" id="reader-settings-font-size-text">
</div>
<div class="modal__row reader-settings__row _vertical-shrink-spacing">
<i class="fa-solid fa-text-width reset" title="<?php esc_attr_e( 'Letter Spacing', 'fictioneer' ); ?>" id="reader-settings-letter-spacing-reset"></i>
<input type="range" value="0.0" min="-0.1" max="0.2" step=".001" class="slider" id="reader-settings-letter-spacing-range">
<input type="range" value="0.0" min="-0.1" max="0.2" step=".001" id="reader-settings-letter-spacing-range">
<input type="number" value="0.0" min="-0.1" max="0.2" step=".001" id="reader-settings-letter-spacing-text">
</div>
<div class="modal__row reader-settings__row _vertical-shrink-spacing">
<?php fictioneer_icon( 'line-height', 'reset', 'reader-settings-line-height-reset' ); ?>
<input type="range" value="1.7" min="0.8" max="3.0" step=".1" class="slider" id="reader-settings-line-height-range">
<input type="range" value="1.7" min="0.8" max="3.0" step=".1" id="reader-settings-line-height-range">
<input type="number" value="1.7" min="0.8" max="3.0" step=".1" id="reader-settings-line-height-text">
</div>
<div class="modal__row reader-settings__row _vertical-shrink-spacing">
<i class="fa-solid fa-paragraph reset" title="<?php esc_attr_e( 'Paragraph Spacing', 'fictioneer' ); ?>" id="reader-settings-paragraph-spacing-reset"></i>
<input type="range" value="1.5" min="0" max="3.0" step=".05" class="slider" id="reader-settings-paragraph-spacing-range">
<input type="range" value="1.5" min="0" max="3.0" step=".05" id="reader-settings-paragraph-spacing-range">
<input type="number" value="1.5" min="0" max="3.0" step=".05" id="reader-settings-paragraph-spacing-text">
</div>
<div class="modal__row reader-settings__row _vertical-shrink-spacing">
<i class="fa-solid fa-pen-nib reset" title="<?php esc_attr_e( 'Font Saturation', 'fictioneer' ); ?>" id="reader-settings-font-saturation-reset"></i>
<input type="range" value="0" min="-1" max="1" step=".01" class="slider" id="reader-settings-font-saturation-range">
<input type="range" value="0" min="-1" max="1" step=".01" id="reader-settings-font-saturation-range">
<input type="number" value="0" min="-1" max="1" step=".01" id="reader-settings-font-saturation-text">
</div>

38
partials/_modal-site-settings.php
View File

@ -14,42 +14,44 @@
<label class="close" for="modal-site-settings-toggle" tabindex="0" aria-label="<?php esc_attr_e( 'Close modal', 'fictioneer' ); ?>">
<?php fictioneer_icon( 'fa-xmark' ); ?>
</label>
<h4 class="modal__header drag-anchor"><?php echo fcntr( 'site_settings' ) ?></h4>
<h4 class="modal__header drag-anchor"><?php echo fcntr( 'site_settings' ); ?></h4>
<div class="modal__description modal__row site-settings__description site-settings__row">
<p class="border-bottom"><?php _e( 'You can toggle selected features and styles per device/browser to boost performance. Some options may not be available.', 'fictioneer' ) ?></p>
<p><?php _e( 'You can toggle selected features and styles per device/browser to boost performance. Some options may not be available.', 'fictioneer' ) ?></p>
</div>
<div class="modal__row _no-vertical-padding site-settings__row">
<div class="site-settings__sticky-navigation">
<hr>
<div class="modal__row site-settings__row">
<div class="site-settings__sticky-navigation modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-nav-sticky" checked>
<label for="site-setting-nav-sticky" class="modal__setting-toggle"><?php _e( 'Scrolling (sticky) navigation bar', 'fictioneer' ) ?></label>
</div>
<div class="site-settings__background-textures">
<div class="site-settings__background-textures modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-background-textures" checked>
<label for="site-setting-background-textures" class="modal__setting-toggle"><?php _e( 'Background textures', 'fictioneer' ) ?></label>
</div>
<div class="site-settings__polygons">
<div class="site-settings__polygons modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-polygons" checked>
<label for="site-setting-polygons" class="modal__setting-toggle"><?php _e( 'Polygons (irregular borders)', 'fictioneer' ) ?></label>
</div>
<div class="site-settings__progress-bar">
<div class="site-settings__progress-bar modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-chapter-progress-bar" checked>
<label for="site-setting-chapter-progress-bar" class="modal__setting-toggle"><?php _e( 'Chapter progress bar', 'fictioneer' ) ?></label>
</div>
<div class="site-settings__covers">
<div class="site-settings__covers modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-covers" checked>
<label for="site-setting-covers" class="modal__setting-toggle"><?php _e( 'Cover images (chapters and stories)', 'fictioneer' ) ?></label>
</div>
<div class="site-settings__text-shadows">
<div class="site-settings__text-shadows modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-text-shadows">
<label for="site-setting-text-shadows" class="modal__setting-toggle"><?php _e( 'Text shadows', 'fictioneer' ) ?></label>
</div>
<div class="site-settings__minimal">
<div class="site-settings__minimal modal__horizontal-input-group _with-checkbox">
<input type="checkbox" id="site-setting-minimal">
<label for="site-setting-minimal" class="modal__setting-toggle"><?php _e( 'Minimalist mode', 'fictioneer' ) ?></label>
</div>
</div>
<hr>
<div class="modal__row site-settings__row">
<div class="site-settings__theme grouped-inputs border-top">
<div class="site-settings__theme modal__horizontal-input-group">
<i class="fa-solid fa-weight-hanging reset font-weight-reset"></i>
<div class="select-wrapper">
<select name="font-weight" class="site-setting-font-weight">
@ -60,7 +62,7 @@
</div>
</div>
<?php if ( is_child_theme() && FICTIONEER_THEME_SWITCH ) : ?>
<div class="site-settings__theme grouped-inputs">
<div class="site-settings__theme modal__horizontal-input-group">
<i class="fa-solid fa-masks-theater reset" id="site-setting-theme-reset"></i>
<div class="select-wrapper">
<select name="site-theme" class="site-setting-site-theme">
@ -70,19 +72,19 @@
</div>
</div>
<?php endif; ?>
<div class="site-settings__hue-rotate grouped-inputs">
<div class="site-settings__hue-rotate modal__horizontal-input-group">
<i class="fa-solid fa-swatchbook reset" id="site-setting-hue-rotate-reset"></i>
<input type="range" value="0" min="0" max="360" step="1" class="slider" id="site-setting-hue-rotate-range">
<input type="range" value="0" min="0" max="360" step="1" id="site-setting-hue-rotate-range">
<input type="number" value="0" min="0" max="360" id="site-setting-hue-rotate-text">
</div>
<div class="site-settings__darken grouped-inputs">
<div class="site-settings__darken modal__horizontal-input-group">
<i class="fa-solid fa-adjust reset setting-darken-reset" style="transform: scale(-1);"></i>
<input type="range" value="0" min="-1" max="1" step=".01" class="slider setting-darken-range">
<input type="range" value="0" min="-1" max="1" step=".01" class="setting-darken-range">
<input type="number" value="0" min="-100" max="100" class="setting-darken-text">
</div>
<div class="site-settings__saturation grouped-inputs">
<div class="site-settings__saturation modal__horizontal-input-group">
<i class="fa-solid fa-droplet reset setting-saturation-resets"></i>
<input type="range" value="0" min="-1" max="1" step=".01" class="slider setting-saturation-range">
<input type="range" value="0" min="-1" max="1" step=".01" class="setting-saturation-range">
<input type="number" value="0" min="-100" max="100" class="setting-saturation-text">
</div>
</div>

57
partials/_modal-tts-settings.php Normal file
View File

@ -0,0 +1,57 @@
<?php
/**
* Partial: TTS Settings Modal
*
* @package WordPress
* @subpackage Fictioneer
* @since 5.4.6
*/
?>
<div id="tts-settings-modal" class="tts-settings modal">
<label for="modal-tts-settings-toggle" class="background-close"></label>
<div class="modal__wrapper narrow-inputs">
<label
class="close"
for="modal-tts-settings-toggle"
tabindex="0"
aria-label="<?php esc_attr_e( 'Close modal', 'fictioneer' ); ?>"
>
<?php fictioneer_icon( 'fa-xmark' ); ?>
</label>
<h4 class="modal__header drag-anchor"><?php _ex( 'TTS Settings', 'TTS modal heading.', 'fictioneer' ); ?></h4>
<div class="modal__description modal__row">
<p><?php _e( 'The text-to-speech engine is an experimental browser feature. It might not always work as intended. On Android, you need the following app permissions for this to work: ', 'fictioneer' ); ?></p>
<p><?php _e( '<strong>[Microphone]</strong> and <strong>[Music and audio]</strong>', 'fictioneer' ); ?></p>
</div>
<hr>
<div class="modal__row">
<div class="modal__horizontal-input-group">
<?php fictioneer_icon( 'soundwave', 'reset', 'tts-pitch-reset', 'title="' . esc_attr_x( 'Pitch', 'Pitch for text-to-speech voice.', 'fictioneer' ) . '"' ); ?>
<input type="range" data-default="1" value="1" min="0.2" max="1.8" step=".1" id="tts-pitch-range">
<input type="number" data-default="1" value="1" min="0.2" max="1.8" id="tts-pitch-text">
</div>
<div class="modal__horizontal-input-group">
<?php fictioneer_icon( 'pulse', 'reset', 'tts-rate-reset', 'title="' . esc_attr_x( 'Rate', 'Rate for text-to-speech voice.', 'fictioneer' ) . '"' ); ?>
<input type="range" value="1" min="0.2" max="1.8" step=".1" id="tts-rate-range">
<input type="number" value="1" min="0.2" max="1.8" id="tts-rate-text">
</div>
<div class="modal__horizontal-input-group">
<i class="fa-solid fa-volume-high reset" id="tts-volume-reset" title="<?php echo esc_attr_x( 'Volume', 'Volume for text-to-speech voice.', 'fictioneer' ); ?>"></i>
<input type="range" value="100" min="0" max="100" step="1" id="tts-volume-range">
<input type="number" value="100" min="0" max="100" id="tts-volume-text">
</div>
<div class="modal__horizontal-input-group tts-settings__voice-selection">
<i class="fa-solid fa-language"></i>
<div class="select-wrapper">
<select id="tts-voice-select"></select>
</div>
</div>
</div>
</div>
</div>

24
partials/_tts-interface.php
View File

@ -9,7 +9,6 @@
?>
<div id="tts-interface" class="tts-interface hidden" data-show-settings="false" data-regex="<?php echo esc_attr( FICTIONEER_TTS_REGEX ); ?>">
<input id="tts-settings-toggle" type="checkbox" class="hidden">
<div class="tts-interface__wrapper">
<div class="tts-interface__controls">
<button id="button-tts-play" type="button" class="button play">
@ -32,31 +31,10 @@
<i class="fa-solid fa-arrows-alt-v"></i>
<span class="hide-below-375"><?php _e( 'Scroll', 'fictioneer' ) ?></span>
</button>
<label for="tts-settings-toggle" class="button settings" role="button" tabindex="0">
<label for="modal-tts-settings-toggle" class="button settings" role="button" tabindex="0">
<i class="fa-solid fa-cog"></i>
<span class="hide-below-480"><?php _e( 'Settings', 'fictioneer' ) ?></span>
</label>
</div>
<div class="tts-interface__settings">
<div>
<span><?php _ex( 'Pitch', 'Pitch for text-to-speech voice.', 'fictioneer' ) ?></span>
<input type="range" value="1" min="0.2" max="1.8" step=".1" class="tts-interface__range" id="tts-pitch-range">
<input type="number" value="1" min="0.2" max="1.8" class="tts-interface__number" id="tts-pitch-text">
</div>
<div>
<span><?php _ex( 'Rate', 'Rate for text-to-speech voice.', 'fictioneer' ) ?></span>
<input type="range" value="1" min="0.2" max="1.8" step=".1" class="tts-interface__range" id="tts-rate-range">
<input type="number" value="1" min="0.2" max="1.8" class="tts-interface__number" id="tts-rate-text">
</div>
<div>
<span><?php _ex( 'Volume', 'Volume for text-to-speech voice.', 'fictioneer' ) ?></span>
<input type="range" value="100" min="0" max="100" step="1" class="tts-interface__range" id="tts-volume-range">
<input type="number" value="100" min="0" max="100" class="tts-interface__number" id="tts-volume-text">
</div>
<div class="tts-interface__voice-selection">
<select id="tts-voice-select"></select>
<label for="tts-voice-select" id="selected-voice-label" class="button button--escape"><?php _e( 'Selected Voice', 'fictioneer' ) ?></label>
</div>
</div>
</div>
</div>

16
src/js/tts.js
View File

@ -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', () => {

2
src/js/user.js
View File

@ -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) {

34
src/scss/_reader-settings.scss
View File

@ -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;

41
src/scss/_site-settings.scss
View File

@ -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 {}

67
src/scss/_tts.scss
View File

@ -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%;
}
}
}

18
src/scss/common/_icons.scss
View File

@ -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;
}
}
}

69
src/scss/common/_modals.scss
View File

@ -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;