marwan / quranwbw-v4

QuranWBW.com Version 4.

About

QuranWBW.com helps you read, listen and learn the Holy Quran word by word with the help of word audios, Tajweed colors and transliteration. You can also research using multi-language translations, tafsir, and dive deep with word morphology.

Stack

This version of QuranWBW is built with SvelteKit.

Contribution

You are free to add/suggest features, report bugs, or just use the website in general.

quranwbw-v4's Issues

Stop Swipe to change pages (when returning from Mushaf Pages layout to homescreen)

Stop "Swipe to change pages" (when returning from Mushaf Pages layout to homescreen)

add playback speed feature

Add another Urdu Translation

TranslationData.zip

I suggest adding this translation data to your website as well. It is ayat by ayat Urdu translation by Dr Israr Ahmed from Quran.com

make the update settings functions use a single prop object as parameter

updateSettings({props});

Hide all tooltips for small screens and make them white for dark themes

Task list for V4 release

Following is the task list/todo for the next major release. No new features are planned apart from the ones already added. Main priority will be to implement features from the current live website.

• work on verses range repeat
• #57
• update credits and add new ones
• enable service worker
• update the Tajweed font end icons color for other themes and add black version
• #58
• add meta data to pages, robot.txt, PWA, favicon
• add bottom nav/audio bar
• implement a feature to auto-import bookmarks from the existing site to this new version
• update all division points (#25)
• add all the available WBW languages in meta
• add relevant fonts for translations (Urdu, Bangla, etc...)
• implement Tailwind CSS via NPM rather than CDN
• migrate from Flowbite to Flowbite-Svelte

Try moving the bookmarks function into updateSettings.js

add support for other display modes in supplications page

opening audio modal should default audio type back to verse

settings don't open when switching back from changelogs page

make the key in verses buttons link to the actual chapter and verse

useful in supplications and bookmarks page

chapters for which the Arabic and English names are same, the navbar should only show one

eg: For chapter 47: as the Arabic name is the same and English name, you do not need to have the chapter appear as Muhammad (Muhammad). It could say just 'Muhammad'.

Page 27 is not loading

End icon for last verse on page is NULL, need to find all in DB.

https://api.quranwbw.com/v1/page?page=27&word_type=2&word_translation=1

next verses are not loading on scroll after the latest update where the setup modal was added

have already identified the bug, will push the fix soon

after first time verse change, the whole chapter is being loaded during next time selection

to reproduce, go to chapter 1, select verse 1, then select verse 2

Make supplications highlighting better

better to add start and end word highlighting ONLY.

load only verse data on page load, then load the complete data

will result in faster loading times

unchecking all the verse translations makes the page stuck on "loading..."

because an empty verse_translation parameter is passed to API, so either fix it on front-end or at API level.

see if words loop can be made into its own component or not

right now there are 2 WBW and 3 Normal display types, it would be better to have 2 words components: WBW and Normal or maybe 1 with both.

Smart Continue where you left feature

Suppose user is reading surah baqarah ayah 170. And he press back to go to homepage. And he visits surah yaseen or 2-3 other surahs, etc.. And then again returns to surah baqarah, then there should be a reminder pop up that (Do you want to continue where u left?)

If user taps, yes continue. Then surah baqarah ayah 170 should be brought.

This is very advanced but intelligent and useful feature. (we can keep last read data upto 5 historical records inside user data for this and recollect from that).. Also if user had completely read the Surah, then delete that record from the last read history records and don't ask the user if he wants to continue.

Toggle to disable back-button (or ask via pop-up do you want to go back to homepage?) on mobile devices in settings

Toggle to disable back-button (or ask via pop-up do you want to go back to homepage?) on mobile devices in settings, so user doesn't get lost when accidentally pressing back. However, he can always press the Home button on top.

make a separate JS file for mini functions

variables being repeated so far:

• chapterTotalVerses
• wordTimestamp
• quranMetaData

for homepage chapters list, load only a couple first, then load all 114 when user scrolls down

Some goes for the chapters/verses list in the navbar dropdown, this can help reduce initial page load times...

Maybe something similar could be done when fetching the chapter data from api.

Update v4 layout, Fix v4 Surah layout on pages 528 602 603 604, Update and Fix Mushaf Surah headers

• Update v4 layout,
• Fix v4 Surah layout on pages 528 602 603 604,
• Update to new Mushaf Surah headers
• Fix Mushaf Surah headers size
• Fix Mushaf Page layout == justification=center

Add "text-xs" as an option for font sizes

Medium still looks big on phones.

add credits for Tajweed fonts

Tajweed fonts were created using Easy Quran - Dar Al Marifa Tajweed Mushaf and King Fahad Glorious Quran Printing Complex (KFGQPC) - Uthmanic Hafs V4 Fonts after receiving permission from both by our brothers at Quran.com.

Fix Page 254 Mushaf Layout fix for word [Ba'da Ma] being on two lines

Fix Page 254 Mushaf Layout fix for word [Ba'da Ma] being on two lines

add option to auto-play translation after Arabic audio

Stop audio and auto-scroll when back button is pressed or navigating to home-page or settings.

I was reading Quran and found that when the audio scroll is turned on. And u press back button as u finish surah (to go to homepage and u forgot to stop auto scroll) and as it didn't stop automatically, it auto scrolls homepage 😂.

The auto scroll and audio should stop in case user pressed back button or goes to homepage or settings.

Intelligent auto-scroll function.

Another important change with regard to auto scroll function is, instead of scrolling at a constant speed, make this intelligent auto scroll function.

Is it possible to calculate the words on screen and scroll at a rate of words.

This can be achieved by reciter audio time stamp data.

Currently we have audio play only till 2x.

Utilize this same data and make it 3x 4x 5x but assign it to auto scroll.

Now, when the auto scroll is scrolling it scrolls according to the length of the ayah.

Example... Surah Waqiyah few ayah are very small but few ayah are medium. So small ayah portion scrolls fast compared to average ayah portion. This will increase user experience very nicely.

Even we can have options in 3 dots menu. (auto scroll from here, just like advance Play)

update userSettings to just include single JSON object

const settings = {
	displaySettings: {
		websiteTheme: 1,
		displayType: 1,
		wordType: 1,
		wordTranslationEnabled: true,
		wordTransliterationEnabled: true,
		fontSizes: {
			arabicText: 'text-4xl',
			wordTranslationText: 'text-sm',
			verseTranslationText: 'text-sm'
		}
	},
	translations: {
		word: 1,
		verse: [1, 15]
	},
	audioSettings: {
		reciter: 10,
		playbackSpeed: 3
	},
	lastRead: '1:1',
	userBookmarks: [],
	initialSetupCompleted: false
};

show bookmark count on homepage

example: "Bookmarks (4)"

Bookmarks notification

Suppose, user has marked a bookmark or bookmarks on a surah.

This can be one or more than one.

So, when the user visits that surah, then recommend him/her (with an 5secs auto disappearing notification at the top) , You have saved bookmarks on this Surah, do you want to navigate? = so if user taps yes, then display the bookmarks or navigate to the last bookmark in that surah.

This is notification like we get for sms. Fly-in from top for 5 secs and it can be slide to left to ignore.

Rename urlParse to parseURL

update all division points as per the new data

juz, manzil, ruku, etc...

add support for site.com/{chapter}:{verse} URL type (eg: site.com/2:255)

Add option to disable screen lock

https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API

Turkish word translation have some "NULL"s, need to replace with with "*"

add languages to verses translation dropdown list

Migrate to Sveltekit

benefits:

• much better performance as compared to just Svelte
• server-side rendering
• custom error pages
• built-in routing / file-based routing
• built-in service worker
  ...and more!

store the words.split data in a single variable rather than splitting it in the loop

Not sure why I did this but it needs to get fixed immediately.

add option to toggle word translation and transliteration

Provide option to download all the Quran fonts in one go

Rather than loading the fonts on demand, give an option to the user to pre-download all the 604 font files.

This can be done only after the service worker has been implemented and the font files are ready for public use.

disable all layouts except 1 and 2 for non chapter pages because it creates display issues

Rename the font styles names

see if individual stores can be merged into a single array/object

fetch static chapter data if all options are default

if the word type, word/verse translations are default (or user's first visit for example), load static chapter data from https://static-chapters.quranwbw.com so the Vercel cold start times can be avoided for the API.

add Infinite scroll / or auto load to next surah when the user has completely scrolled to end

Turkish word translation have some "NULL"s, need to replace with with

organize the translations in selector in alphabetical order