marwan / quranwbw-v4

QuranWBW.com Version 4.
https://v4.quranwbw.com
9 stars 3 forks source link

Advanced Floating Panel with many features #65

Open Ayman24x7 opened 2 months ago

Ayman24x7 commented 2 months ago

Intro: The current floating nav panel at the bottom is static, having just (next surah, layout, play, settings, and next surah), however we can utilize this floating nav panel area with an advance swipable controls panel, having scenario based options as explained below.

Enhancements : The floating panel will have dots under it, showing how many scenario panels are available. The active one will be written in text. (as mentioned below in the list.)

On desktop, there can be a dropdown (opening up) menu, which can navigate the floating panel to the different scenario options in addition to swiping controls. (swiping will be available irrespective of device so that the floating panel is touch screen PCs compatible.) However, laptops and tablets will have dropdown menu in addition which opens reverse/up.

Scenario 1 = Slide 1: Audio When audio recitation is playing, change the layout button and setting buttons to plus and minus and use them to increase and decrease play speed. Change next and previous page buttons and make them next and previous Ayah {forward and backward icons}

(go to previous ayah ¦ slow down play speed ¦;play/pause/stop ¦ increase play speed ¦ go to next ayah)

Scenario 2 = Slide 2: Scroll Often when reading Surah, we constantly need to scroll, and it tires fingers. So, adding a auto scroll function is really necessary. (prevous ayah ¦ slow speed ¦ scroll down ¦ faster speed ¦ next ayah)

Scenario 3 = Slide 3: Layout (previous surah ¦ layout change ¦ theme change ¦ font change ¦ next surah )

Scenario 4 = Slide 4: Hifz (previous surah ¦ reveal next one word ¦ hide/unhide remaining text ¦ reveal rest of the ayah ¦ next surah)

Scenario 5 = Slide 5: Settings (previous surah ¦ reciter selection ¦ settings ¦ translation selection ¦ next surah )

...

Note : On Mushaf pages

In Scenario/Slides 3, 4 and 5 = the previous and next surah buttons will change to next and previous pages respectively.