Add a few tooltips

Starting to use audiobookshelf, the function of some buttons weren't very clear to me and while some buttons have tooltips, others have not. This patch adds some additional tooltips to the user interface, further explaining some of the functionality.
2024-11-08 00:54:33 +01:00 · 2022-11-20 18:50:34 +01:00 · 2022-11-20 18:50:34 +01:00 · fdfb07ff2c
commit fdfb07ff2c
parent b648155170
5 changed files with 55 additions and 26 deletions
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@ -24,7 +24,9 @@
        </div>
      </div>
      <div class="flex-grow" />
+      <ui-tooltip direction="top" :text="$strings.LabelClosePlayer">
        <span class="material-icons sm:px-2 py-1 md:p-4 cursor-pointer text-xl sm:text-2xl" @click="closePlayer">close</span>
+      </ui-tooltip>
    </div>
    <player-ui
      ref="audioPlayer"
--- a/client/components/modals/item/tabs/Cover.vue
+++ b/client/components/modals/item/tabs/Cover.vue
@ -7,7 +7,9 @@
        <div v-if="media.coverPath" class="absolute top-0 left-0 w-full h-full z-10 opacity-0 hover:opacity-100 transition-opacity duration-100">
          <div class="absolute top-0 left-0 w-full h-16 bg-gradient-to-b from-black-600 to-transparent" />
          <div class="p-1 absolute top-1 right-1 text-red-500 rounded-full w-8 h-8 cursor-pointer hover:text-red-400 shadow-sm" @click="removeCover">
+            <ui-tooltip direction="top" :text="$strings.LabelRemoveCover">
              <span class="material-icons">delete</span>
+            </ui-tooltip>
          </div>
        </div>
      </div>
--- a/client/components/player/PlayerUi.vue
+++ b/client/components/player/PlayerUi.vue
@ -4,8 +4,11 @@
      <div class="absolute -top-10 md:top-0 right-0 lg:right-2 flex items-center h-full">
        <!-- <span class="material-icons text-2xl cursor-pointer" @click="toggleFullscreen(true)">expand_less</span> -->

+        <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelVolume">
          <controls-volume-control ref="volumeControl" v-model="volume" @input="setVolume" class="mx-2 hidden md:block" />
+        </ui-tooltip>

+        <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelSleepTimer">
          <div class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showSleepTimer')">
            <span v-if="!sleepTimerSet" class="material-icons text-2xl">snooze</span>
            <div v-else class="flex items-center">
@ -13,18 +16,25 @@
              <p class="text-xl text-warning font-mono font-semibold text-center px-0.5 pb-0.5" style="min-width: 30px">{{ sleepTimerRemainingString }}</p>
            </div>
          </div>
+        </ui-tooltip>

+        <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelViewBookmarks">
          <div v-if="!isPodcast" class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showBookmarks')">
            <span class="material-icons text-2xl">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
          </div>
+        </ui-tooltip>

+        <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelViewChapters">
          <div v-if="chapters.length" class="cursor-pointer text-gray-300 hover:text-white mx-1 lg:mx-2" @mousedown.prevent @mouseup.prevent @click.stop="showChapters">
            <span class="material-icons text-2xl">format_list_bulleted</span>
          </div>
+        </ui-tooltip>

+        <ui-tooltip v-if="chapters.length" direction="top" :text="$strings.LabelViewQueue">
          <button v-if="playerQueueItems.length" class="outline-none text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="$emit('showPlayerQueueItems')">
            <span class="material-icons text-2.5xl sm:text-3xl">queue_music</span>
          </button>
+        </ui-tooltip>

        <ui-tooltip v-if="chapters.length" direction="top" :text="useChapterTrack ? $strings.LabelUseFullTrack : $strings.LabelUseChapterTrack">
          <div class="cursor-pointer text-gray-300 mx-1 lg:mx-2 hover:text-white" @mousedown.prevent @mouseup.prevent @click.stop="setUseChapterTrack">
--- a/client/pages/audiobook/_id/chapters.vue
+++ b/client/pages/audiobook/_id/chapters.vue
@ -65,9 +65,11 @@
            </div>
            <div class="w-40 px-2 py-1">
              <div class="flex items-center">
+                <ui-tooltip :text="$strings.MessageRemoveChapter" direction="bottom">
                  <button v-if="newChapters.length > 1" class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-error transform hover:scale-110 duration-150" @click="removeChapter(chapter)">
                    <span class="material-icons-outlined text-base">remove</span>
                  </button>
+                </ui-tooltip>

                <ui-tooltip :text="$strings.MessageInsertChapterBelow" direction="bottom">
                  <button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-success transform hover:scale-110 duration-150" @click="addChapter(chapter)">
@ -75,11 +77,13 @@
                  </button>
                </ui-tooltip>

+                <ui-tooltip :text="selectedChapterId === chapter.id && isPlayingChapter ? $strings.MessagePauseChapter : $strings.MessagePlayChapter" direction="bottom">
                  <button class="w-7 h-7 rounded-full flex items-center justify-center text-gray-300 hover:text-white transform hover:scale-110 duration-150" @click="playChapter(chapter)">
                    <widgets-loading-spinner v-if="selectedChapterId === chapter.id && isLoadingChapter" />
                    <span v-else-if="selectedChapterId === chapter.id && isPlayingChapter" class="material-icons-outlined text-base">pause</span>
                    <span v-else class="material-icons-outlined text-base">play_arrow</span>
                  </button>
+                </ui-tooltip>

                <ui-tooltip v-if="chapter.error" :text="chapter.error" direction="left">
                  <button class="w-7 h-7 rounded-full flex items-center justify-center text-error">
--- a/client/strings/en-us.json
+++ b/client/strings/en-us.json
@ -39,6 +39,7 @@
  "ButtonOk": "Ok",
  "ButtonOpenFeed": "Open Feed",
  "ButtonOpenManager": "Open Manager",
+  "ButtonPause": "Pause",
  "ButtonPlay": "Play",
  "ButtonPlaying": "Playing",
  "ButtonPurgeAllCache": "Purge All Cache",
@ -165,6 +166,7 @@
  "LabelChangePassword": "Change Password",
  "LabelChaptersFound": "chapters found",
  "LabelChapterTitle": "Chapter Title",
+  "LabelClosePlayer": "Close player",
  "LabelCollapseSeries": "Collapse Series",
  "LabelCollections": "Collections",
  "LabelComplete": "Complete",
@ -282,6 +284,7 @@
  "LabelRecentSeries": "Recent Series",
  "LabelRegion": "Region",
  "LabelReleaseDate": "Release Date",
+  "LabelRemoveCover": "Remove book cover",
  "LabelRSSFeedOpen": "RSS Feed Open",
  "LabelRSSFeedSlug": "RSS Feed Slug",
  "LabelRSSFeedURL": "RSS Feed URL",
@ -329,6 +332,7 @@
  "LabelSettingsStoreMetadataWithItemHelp": "By default metadata files are stored in /metadata/items, enabling this setting will store metadata files in your library item folders. Uses .abs file extension",
  "LabelShowAll": "Show All",
  "LabelSize": "Size",
+  "LabelSleepTimer": "Sleep timer",
  "LabelStart": "Start",
  "LabelStarted": "Started",
  "LabelStartedAt": "Started At",
@ -382,6 +386,10 @@
  "LabelUsername": "Username",
  "LabelValue": "Value",
  "LabelVersion": "Version",
+  "LabelViewBookmarks": "View bookmarks",
+  "LabelViewChapters": "View chapters",
+  "LabelViewQueue": "View player queue",
+  "LabelVolume": "Volume",
  "LabelWeekdaysToRun": "Weekdays to run",
  "LabelYourAudiobookDuration": "Your audiobook duration",
  "LabelYourBookmarks": "Your Bookmarks",
@ -450,9 +458,12 @@
  "MessageNoUpdateNecessary": "No update necessary",
  "MessageNoUpdatesWereNecessary": "No updates were necessary",
  "MessageOr": "or",
+  "MessagePauseChapter": "Pause chapter playback",
+  "MessagePlayChapter": "Listen to beginning of chapter",
  "MessagePodcastHasNoRSSFeedForMatching": "Podcast has no RSS feed url to use for matching",
  "MessageQuickMatchDescription": "Populate empty item details & cover with first match result from '{0}'. Does not overwrite details unless 'Prefer matched metadata' server setting is enabled.",
  "MessageRemoveAllItemsWarning": "WARNING! This action will remove all library items from the database including any updates or matches you have made. This does not do anything to your actual files. Are you sure?",
+  "MessageRemoveChapter": "Remove chapter",
  "MessageRemoveEpisodes": "Remove {0} episode(s)",
  "MessageRemoveUserWarning": "Are you sure you want to permanently delete user \"{0}\"?",
  "MessageReportBugsAndContribute": "Report bugs, request features, and contribute on",