Added subtitle display settings

simjanos-dev · Jun 9, 2024 · 87a3022 · 87a3022
1 parent d2261a8
commit 87a3022
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 3 deletions.
diff --git a/resources/js/components/Home/PatchNotes.vue b/resources/js/components/Home/PatchNotes.vue
@@ -22,6 +22,7 @@
                     <li>Added tabs to the text reader's settings dialog.</li>
                     <li>Added an auto level words option, which automatically levels up words which the user did not click on while reading.</li>
                     <li>Added a hotkey to the text reader to toggle plain text mode.</li>
+                    <li>Added settings to hide the subtitle timestamps and to change the space between subtitles.</li>
                 </ul>
 
                 <b>Bug fixes:</b>

diff --git a/resources/js/components/Text/TextBlockGroup.vue b/resources/js/components/Text/TextBlockGroup.vue
@@ -62,7 +62,11 @@
             >
 
             <template v-for="(word, wordIndex) in words"><!--
-                --><div class="subtitle-timestamp rounded-pill py-1 mt-12 mb-1" v-if="word.subtitleIndex !== -1"><!--
+                --><div 
+                        v-if="word.subtitleIndex !== -1"
+                        :class="['subtitle-timestamp', $props.showSubtitleTimestamps ? '' : 'hidden', 'rounded-pill', 'py-1']" 
+                        :style="{'margin-top': word.subtitleIndex > 0 ? ($props.spaceBetweenSubtitles * 3) + 'px' : '0px'}"
+                    ><!--
                     -->{{ subtitleTimestamps[word.subtitleIndex].start }}<!--
                 --></div><!--
                 --><br v-if="word.word === 'NEWLINE'" /><!--
@@ -417,6 +421,14 @@
             autoHighlightWords: {
                 type: Boolean,
                 default: true
+            },
+            showSubtitleTimestamps: {
+                type: Boolean,
+                default: true
+            },
+            spaceBetweenSubtitles: {
+                type: Number,
+                default: 20
             }
         },
         mounted() {

diff --git a/resources/js/components/TextReader/TextReader.vue b/resources/js/components/TextReader/TextReader.vue
@@ -95,6 +95,8 @@
                         :vocabulary-sidebar="settings.vocabularySidebar"
                         :vocabulary-bottom-sheet="settings.vocabularyBottomSheet"
                         :auto-highlight-words="settings.autoHighlightWords"
+                        :show-subtitle-timestamps="settings.showSubtitleTimestamps"
+                        :space-between-subtitles="settings.spaceBetweenSubtitles"
                         :vocabulary-sidebar-fits="vocabularySidebarFits"
                         :hotkeys-enabled="true"
                         @increase-font-size="increaseFontSize"
@@ -254,7 +256,9 @@
                     vocabularyHoverBoxDelay: 300,
                     vocabularyHoverBoxPreferredPosition: 'bottom',
                     autoHighlightWords: true,
-                    autoLevelUpWords: false
+                    autoLevelUpWords: false,
+                    showSubtitleTimestamps: true,
+                    spaceBetweenSubtitles: 20,
                 },
                 fullscreenMode: false,
                 newlySavedWords: 0,

diff --git a/resources/js/components/TextReader/TextReaderSettings.vue b/resources/js/components/TextReader/TextReaderSettings.vue
@@ -220,6 +220,37 @@
                                 ></v-switch>
                             </v-col>
                         </v-row>
+
+                        <!-- Show subtitle timestamps -->
+                        <v-row>
+                            <v-col cols="8" md="4" class="switch-container d-flex align-center mt-0 mb-md-5">Show subtitle timestamps:</v-col>
+                            <v-col cols="4" md="8" class="switch-container d-flex align-center mt-0 pt-3 justify-end">
+                                <v-switch
+                                    color="primary"
+                                    v-model="settings.showSubtitleTimestamps"
+                                    @change="saveSettings"
+                                ></v-switch>
+                            </v-col>
+                        </v-row>
+
+                        <!-- Space between subtitles -->
+                        <v-row>
+                            <v-col cols="12" sm="3" class="d-flex align-center mt-0 mt-md-0 mb-md-5 pb-0 pb-sm-0 pb-md-3">Space between subtitles:</v-col>
+                            <v-col class="slider-container d-flex pt-xs-0 pt-sm-0 pt-md-3 align-center">
+                                <v-slider
+                                    v-model="settings.spaceBetweenSubtitles"
+                                    :tick-labels="['Small', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Large']"
+                                    :tick-size="0"
+                                    :min="0"
+                                    :max="40"
+                                    step="2"
+                                    thumb-label="always"
+                                    thumb-size="38"
+                                    track-color="#c5c5c5"
+                                    @change="saveSettings"
+                                ></v-slider>
+                            </v-col>
+                        </v-row>
                     </v-tab-item>
 
                     <!-- Vocabulary box section-->
@@ -440,7 +471,9 @@
                     vocabularyHoverBoxDelay: 'vocabulary-hover-delay',
                     vocabularyHoverBoxPreferredPosition: 'vocabulary-hover-box-preferred-position',
                     autoHighlightWords: 'auto-highlight-words',
-                    autoLevelUpWords: 'auto-level-up-words'
+                    autoLevelUpWords: 'auto-level-up-words',
+                    showSubtitleTimestamps: 'show-subtitle-timestamps',
+                    spaceBetweenSubtitles: 'space-between-subtitles'
                 },
                 settings: {},
                 vocabularyHoverBoxPreferredPositionData: [
@@ -494,6 +527,9 @@
             this.loadSetting('vocabularyHoverBoxPreferredPosition', 'string', 'bottom');
             this.loadSetting('autoHighlightWords', 'boolean', true);
             this.loadSetting('autoLevelUpWords', 'boolean', false);
+            this.loadSetting('showSubtitleTimestamps', 'boolean', true);
+            this.loadSetting('spaceBetweenSubtitles', 'integer', 20);
+            
             this.settingsLoaded = true;
             this.saveSettings();
 
@@ -550,6 +586,8 @@
                 this.saveSetting('vocabularyHoverBoxPreferredPosition');
                 this.saveSetting('autoHighlightWords');
                 this.saveSetting('autoLevelUpWords');
+                this.saveSetting('showSubtitleTimestamps');
+                this.saveSetting('spaceBetweenSubtitles');
 
                 // save text to speech
                 if (this.textTospeechSelectedVoice !== null) {

diff --git a/resources/sass/Text/TextBlockGroup.scss b/resources/sass/Text/TextBlockGroup.scss
@@ -34,6 +34,12 @@
         text-align: center;
         font-size: 15px;
         font-weight: bold;
+
+        &.hidden {
+            opacity: 0;
+            height: 0px;
+            padding: 0px !important;
+        }
     }
 
     .text-block {