From 264bb9917cafad0c45ff9f0ff13b06eb37928aae Mon Sep 17 00:00:00 2001 From: Kovid Goyal Date: Tue, 24 Oct 2023 13:03:15 +0530 Subject: [PATCH] Various cleanups Use theme based background colors. Dont use ids for components. Change the tolltip of the play/pause button dynamically --- src/pyj/dom.pyj | 9 +++- src/pyj/read_book/read_audio_ebook.pyj | 68 ++++++++++++++------------ 2 files changed, 45 insertions(+), 32 deletions(-) diff --git a/src/pyj/dom.pyj b/src/pyj/dom.pyj index 536d6532cb..b32ff71759 100644 --- a/src/pyj/dom.pyj +++ b/src/pyj/dom.pyj @@ -104,11 +104,18 @@ def create_keyframes(animation_name, *frames): ans.push('}') return ans.join('\n') + '\n' -def change_icon_image(icon_element, new_name): +def change_icon_image(icon_element, new_name, tooltip): if new_name: icon_element.firstChild.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#icon-' + new_name) else: icon_element.firstChild.removeAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href') + if tooltip?: + x = icon_element.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'title') + if not x.length: + tt = document.createElementNS('http://www.w3.org/2000/svg', 'title') + icon_element.appendChild(tt) + x = v'[tt]' + x[0].textContent = tooltip def svgicon(name, height, width, tooltip): ans = document.createElementNS('http://www.w3.org/2000/svg', 'svg') diff --git a/src/pyj/read_book/read_audio_ebook.pyj b/src/pyj/read_book/read_audio_ebook.pyj index 9ff9a53e7a..a59beb535a 100644 --- a/src/pyj/read_book/read_audio_ebook.pyj +++ b/src/pyj/read_book/read_audio_ebook.pyj @@ -12,7 +12,8 @@ from __python__ import bound_methods, hash_literals from elementmaker import E -from dom import change_icon_image, svgicon, unique_id +from book_list.theme import get_color +from dom import change_icon_image, svgicon from gettext import gettext as _ from modals import error_dialog from read_book.globals import ui_operations @@ -26,6 +27,13 @@ from read_book.smil import ( HIDDEN, PLAYING, PAUSED = 'HIDDEN', 'PLAYING', 'PAUSED' +def seconds_to_ms(seconds): + minutes = Math.floor(seconds / 60) + remaining_seconds = int(seconds % 60) + return str(minutes) + ':' + (str(remaining_seconds).zfill(2)) + + + class ReadAudioEbook: dont_hide_on_content_loaded = True @@ -40,22 +48,21 @@ class ReadAudioEbook: if self.initialized: return self.initialized = True - self.bar_id = unique_id("bar") container = self.container container.style.transition = "height 0.5s ease-in-out" container.style.backgroundColor = "rgba(127, 127, 127, 0.05)" container.setAttribute("tabindex", "0") + bg = get_color("window-background") container.appendChild(E.div( - id=self.bar_id, - style="position: absolute; bottom: 0; width: 90%; height: 2em; border-radius: 1em; padding:0.5em; display: flex; justify-content: center; align-items: center; background-color: rgba(127, 127, 127, 0.3); " + data_component='bar', + style=f'position: absolute; bottom: 0; width: 90%; height: 2em; border-radius: 1em; padding:0.5em; display: flex; justify-content: center; align-items: center; background-color: {bg};' )) + bar_container = container.lastChild container.addEventListener("keydown", self.on_keydown, {"passive": False}) container.addEventListener("click", self.on_container_clicked, {"passive": False}) container.addEventListener("contextmenu", self.toggle, {"passive": False}) - bar_container = self.bar = document.getElementById(self.bar_id) - def create_button(name, icon, text): ans = svgicon(icon, ICON_SIZE, ICON_SIZE, text) if name: @@ -71,37 +78,29 @@ class ReadAudioEbook: for x in [ E.div ( - id="audioButtons", style='height: 3ex; display: flex; align-items: center; justify-content: center', - create_button("toggle", "pause", _("Toggle pause & play")), + create_button("toggle", "pause", _('Pause audio')), ), E.div( - id="timeDisplay", - E.text("") + data_component="time_display", E.text("") ), E.div( - id="progressBar", - style="height:1.5em; display:block; background-color:rgba(255, 255, 255, 0.7); width:70%; margin:1em", - E.div( - style="display:block; background-color:rgba(0, 0, 0, 0.3); height:100%") + data_component="progress_bar", + style=f'height:1.5em; display:block; background-color:{get_color("window-background2")}; width:70%; margin:1em', + E.div(style=f'display:block; background-color:{get_color("window-foreground")}; height:100%'), ), E.div( style='height: 3ex; display: flex; align-items: center; justify-content: center', create_button("slower", "slower", _("Slow down audio")), create_button("faster", "faster", _("Speed up audio")), - create_button("hide", "off", _("Close Read Audio-Ebook")) + create_button("hide", "off", _("Close Read aloud")) ) ]: bar_container.appendChild(x) - self.audio_buttons = document.getElementById("audioButtons") - self.progress_bar = document.getElementById("progressBar") - self.time_display = document.getElementById("timeDisplay") - - self.container.appendChild(E.audio(id=unique_id('audio'), style="display:none")) + self.container.appendChild(E.audio(data_component='audio', style="display:none")) ap = self.container.lastChild - self.audio_player_id = ap.id ap.addEventListener("timeupdate", def(): if self.state is not HIDDEN: @@ -110,7 +109,7 @@ class ReadAudioEbook: audio_current_time = ap.currentTime progress = (audio_current_time / ap.duration) * 100 self.progress_bar.firstChild.style.width = progress + "%" - self.time_display.textContent = f"{self.seconds_to_ms(audio_current_time)}/{self.seconds_to_ms(ap.duration)}" + self.time_display.textContent = f'{seconds_to_ms(audio_current_time)}/{seconds_to_ms(ap.duration)}' self.mark_for_timeupdate(audio_current_time) else: self.time_display.textContent = "00:00" @@ -132,6 +131,18 @@ class ReadAudioEbook: ap.currentTime = skip_time ) + @property + def bar(self): + return self.container.querySelector('[data-component=bar]') + + @property + def time_display(self): + return self.container.querySelector('[data-component=time_display]') + + @property + def progress_bar(self): + return self.container.querySelector('[data-component=progress_bar]') + def mark_for_timeupdate(self, audio_time): sam = self.view.currently_showing.smil_audio_map if sam: @@ -207,7 +218,7 @@ class ReadAudioEbook: @property def audio_player(self): - return document.getElementById(self.audio_player_id) + return self.container.querySelector('[data-component=audio]') @property def is_visible(self): @@ -245,7 +256,7 @@ class ReadAudioEbook: if self.state is HIDDEN: self.initialize() self.state = PLAYING - change_icon_image(self.play_pause_button, "pause") + change_icon_image(self.play_pause_button, "pause", _('Pause audio')) self.start_playback() self.container.style.display = "block" self.focus() @@ -263,14 +274,14 @@ class ReadAudioEbook: def play(self): self.state = PLAYING - change_icon_image(self.play_pause_button, "pause") + change_icon_image(self.play_pause_button, "pause", _('Pause audio')) ap = self.audio_player if ap.getAttribute("src"): ap.play() def pause(self): self.state = PAUSED - change_icon_image(self.play_pause_button, "play") + change_icon_image(self.play_pause_button, "play", _('Play audio')) ap = self.audio_player if ap.getAttribute("src"): ap.pause() @@ -314,11 +325,6 @@ class ReadAudioEbook: elif sc_name in ("up", "down", "pageup", "pagedown", "left", "right"): self.send_message("trigger_shortcut", name=sc_name) - def seconds_to_ms(self, seconds): - minutes = Math.floor(seconds / 60) - remaining_seconds = int(seconds % 60) - return str(minutes) + ':' + (str(remaining_seconds).zfill(2)) - def send_message(self, message_type, **kw): self.view.iframe_wrapper.send_message("audio-ebook", type=message_type, **kw)