Commit graph

453 commits

Author SHA1 Message Date
c25d3aedcb Remove dead CSS 2023-12-04 07:43:51 -03:00
7421f041e6 Avoid text jump when the stream is paused
When the scrollbar goes from display none to being visible, the
text beside it can jump in-place. This change avoids that by making
the scrollbar invisible.
2023-12-04 07:43:51 -03:00
a3a9f4abb5 Really fix auto-scroll on iOS 2023-12-04 07:43:51 -03:00
cbab7d1795 Reduce right offset on arabic layout 2023-12-04 07:43:15 -03:00
9f787c21bb Remove dead CSS 2023-12-04 07:26:00 -03:00
ac9992ece8 Avoid text jump when the stream is paused
When the scrollbar goes from display none to being visible, the
text beside it can jump in-place. This change avoids that by making
the scrollbar invisible.
2023-12-04 05:27:06 -03:00
446c4ed276 Really fix auto-scroll on iOS 2023-12-04 05:03:35 -03:00
6706f8a4a9 Remove scrollIntoView 2023-12-04 04:03:46 -03:00
74576b05aa Remove scrollIntoView 2023-12-04 03:57:27 -03:00
61c98d072f Remove deadcode 2023-12-04 02:08:30 -03:00
5264b846f6 fixup! Add "OFFSET" to Stream.tsx 2023-12-04 02:08:30 -03:00
01d7e4f6fb Add "OFFSET" to Stream.tsx 2023-12-04 02:08:30 -03:00
3acdaf8a2a Optimize memo of Stream.tsx
The Stream only has to re-render when 'stream.length' changes, but
could be re-rendered by a parent in scenarios where 'stream.length'
has not changed. This change optimizes that scenario by only
re-rendering the stream when 'stream.length' changes.
2023-12-04 02:08:30 -03:00
af92fafeb2 useRef / useMemo in Stream.tsx 2023-12-04 02:08:30 -03:00
e0ed29b812 scrollBy offsetHeight + scrollTop 2023-12-04 02:08:30 -03:00
454faac829 Fix auto-scroll in SurahStream.tsx (mobile / iOS) 2023-12-04 02:08:30 -03:00
9defa1bb47 Add /durations/
This change fixes SurahStream.tsx by hosting the durations for the
timer locally, within the app, rather than depending on
al-quran.reflectslight.io being accessible (eg when offline).
2023-12-04 02:08:30 -03:00
e72db010d7 Remove deadcode 2023-12-04 02:04:54 -03:00
8ae3585cbf Update quran.png 2023-12-04 02:03:29 -03:00
1e3922f140 Update quran.png 2023-12-04 02:03:29 -03:00
1d8f34b587 fixup! Add "OFFSET" to Stream.tsx 2023-12-04 02:03:29 -03:00
270e9a06ff Add "OFFSET" to Stream.tsx 2023-12-04 02:03:29 -03:00
46850a8cfb Optimize memo of Stream.tsx
The Stream only has to re-render when 'stream.length' changes, but
could be re-rendered by a parent in scenarios where 'stream.length'
has not changed. This change optimizes that scenario by only
re-rendering the stream when 'stream.length' changes.
2023-12-04 01:59:13 -03:00
1a7af1be2a useRef / useMemo in Stream.tsx 2023-12-04 01:36:58 -03:00
f2db229dd0 scrollBy offsetHeight + scrollTop 2023-12-04 00:39:20 -03:00
7d2bdf8a6b Fix auto-scroll in SurahStream.tsx (mobile / iOS) 2023-12-04 00:01:08 -03:00
89e4d50460 Add /durations/
This change fixes SurahStream.tsx by hosting the durations for the
timer locally, within the app, rather than depending on
al-quran.reflectslight.io being accessible (eg when offline).
2023-11-28 15:13:32 -03:00
df78d78455 Optimize height 2023-11-26 23:49:15 -03:00
adac9912b0 Misc UI / layout improvements
The Arabic layout is especially improved. The CSS still needs work,
I think the most tech debt is probably within the css.
2023-11-26 23:49:15 -03:00
47738b2937 Bump surah ID width to 45px
On the Surah Index page, in the "en" locale, there was not enough
space between a surah's ID and its name. This change fixes that.
2023-11-26 23:49:15 -03:00
eaa0113ad9 Optimize height 2023-11-26 23:45:12 -03:00
0f0d03fbd4 Misc UI / layout improvements
The Arabic layout is especially improved. The CSS still needs work,
I think the most tech debt is probably within the css.
2023-11-26 22:08:38 -03:00
ea23419aac Bump surah ID width to 45px
On the Surah Index page, in the "en" locale, there was not enough
space between a surah's ID and its name. This change fixes that.
2023-11-20 19:16:41 -03:00
2a1b296a6f Enable hover effect on devices with first-class hover support
On devices such as a phone, the hover effect will not be applied.
2023-11-20 16:20:53 -03:00
3b391131ff Remove height properties 2023-11-20 16:20:53 -03:00
a5ae22e16b Fix /ar/ alignment
align-items: center; appears to not have the desired effect, but
leaving it unset does. The en locale remains with align-items: center;
2023-11-20 16:20:53 -03:00
94619bab19 Enable hover effect on devices with first-class hover support
On devices such as a phone, the hover effect will not be applied.
2023-11-20 12:56:31 -03:00
c3b1d0be45 Remove height properties 2023-11-15 19:27:55 -03:00
1f0127192f Fix /ar/ alignment
align-items: center; appears to not have the desired effect, but
leaving it unset does. The en locale remains with align-items: center;
2023-11-12 19:33:56 -03:00
40746fe224 Update favicon.png 2023-11-12 18:34:48 -03:00
54cb5fbfc3 Update favicon.png 2023-11-12 18:26:32 -03:00
8c07d00930 Update quran.png 2023-11-12 17:51:24 -03:00
d384be27f3 Update quran.png 2023-11-12 17:51:24 -03:00
20683481cd Update quran.png 2023-11-12 17:50:51 -03:00
d0b046431d Add opengraph support to /en/, /ar/ 2023-11-12 17:09:57 -03:00
e358b65736 Add hover effect on SurahIndex.tsx 2023-11-12 12:54:02 -03:00
6c0819bfdd Improve language dropdown (take 2) 2023-10-30 06:55:24 -03:00
770c087868 Improve language dropdown 2023-10-30 06:28:21 -03:00
300188bbc4 Adjust "blue" theme 2023-10-30 06:10:51 -03:00
2496f2c309 Increase overall font-size for Arabic pages 2023-10-30 05:46:24 -03:00
2d24736614 Replace favicon.png 2023-10-30 05:03:30 -03:00
3afb9a0938 Replace favicon.png 2023-10-30 04:53:06 -03:00
5c629463dc Center <h1> content 2023-10-30 03:22:50 -03:00
7a943802ca Set height on ul.stream 2023-10-30 03:18:10 -03:00
864253c4b7 Add space between h1 and the content below it 2023-10-30 02:54:20 -03:00
714d2613d5 Further UI improvements 2023-10-30 02:34:35 -03:00
af0f1dd3fa Adjust header heights 2023-10-30 01:11:24 -03:00
aaea2cc7e6 Add custom scrollbar rules, improve CSS 2023-10-30 01:01:40 -03:00
48eda16678 Move /src/js/pages/* to /src/js/
And move `/src/css/pages/*` to `/src/css/`.
2023-10-29 20:24:26 -03:00
d381ec1522 Wrap theme / language dropdowns in a <nav> element. 2023-10-29 20:10:04 -03:00
43f7fc85c9 Add semantic-HTML improvements, CSS improvements 2023-10-29 20:03:16 -03:00
678aa186ea Increase retry frequency 2023-10-28 12:33:27 -03:00
479106b13a Abide by 80col limit 2023-10-28 12:14:40 -03:00
b1d9be9806 Fix .husky/pre-commit 2023-10-28 11:19:41 -03:00
365c27d273 SurahStream: wrap content in <article> 2023-10-28 10:57:12 -03:00
f5488b578f Add <header> 2023-10-28 10:50:30 -03:00
a534e2eb79 CSS tweaks and fixes 2023-10-28 10:40:48 -03:00
0c51b38079 Run eslint / prettier 2023-10-28 09:51:18 -03:00
3e703b6a3d Improve "Select a random chapter"
Add arrow, add <footer> to `SurahIndex`, and other
mprovements.
2023-10-28 09:50:13 -03:00
c41a5cd2a7 Bug fixes 2023-10-28 07:47:27 -03:00
f720df5cda Localize random and redirect pages 2023-10-28 06:58:44 -03:00
058fabd46b Run prettier / eslint 2023-10-28 06:09:16 -03:00
3682c4a3bd Fix alignment of items in footer 2023-10-28 06:08:37 -03:00
996325a13b Fix for Arabic layout 2023-10-26 09:48:22 -03:00
6f2e33366d Further UI improvements 2023-10-26 09:39:20 -03:00
820b0a4eb5 Tweak h1 2023-10-25 04:25:42 -03:00
0aedf7d359 Set role="banner" on <h1> 2023-10-25 03:55:33 -03:00
19d9dd2e53 Tweaks and fixes 2023-10-25 03:49:11 -03:00
3d69b44c1c Tweaks and fixes 2023-10-25 03:47:20 -03:00
3626eaa6de Run eslint / prettier 2023-10-25 03:14:28 -03:00
a3d9dd1446 Start transition to semantic HTML 2023-10-25 03:11:54 -03:00
b8af887718 opengraph: reduce border to 0.2px 2023-10-24 19:00:32 -03:00
7be7e74ebb Update opengraph images (x2) 2023-10-24 18:38:00 -03:00
cf8620e73b Update opengraph images 2023-10-24 16:31:17 -03:00
b238f361df Remove unneccesary unsets 2023-10-24 04:39:59 -03:00
56fe18ea95 Fix Icon (blue theme) 2023-10-24 04:35:38 -03:00
6768a6650b Fix icon 2023-10-24 04:31:26 -03:00
6179b8928c Replace $gold2 with $gold1 - 10% lighter than a gold-ish color. 2023-10-24 02:27:55 -03:00
e140d38931 Adjust $max-width 2023-10-24 02:19:37 -03:00
cb029d6b8a Increase $max-width 2023-10-24 02:11:24 -03:00
a83e8dd15f Further UI improvements 2023-10-24 02:01:06 -03:00
6515ee579f Blue theme is blended with gold more often (ar locale) 2023-10-24 01:54:44 -03:00
70e2e82753 Show surah name in blue (blue theme, ar locale) 2023-10-23 23:36:07 -03:00
6ac7c6ee04 Fix / improve layout of play / pause icon in footer 2023-10-23 22:35:20 -03:00
98f259fb22 Change language dropdown to be similar to the theme dropdown
Not yet perfect but a step in the right direction.
2023-10-23 22:35:20 -03:00
48329928e3 Update UI for surah's name (ar locale) 2023-10-23 18:58:55 -03:00
70d4bb424e Remove "invisible" class when theme changes 2023-10-23 15:00:43 -03:00
11bd1105fb Avoid re-render glitches
When changing between languages, the transition between pages can
cause UI glitches, where text could change font for a brief second.

The fix makes the main content invisible by default, and applies the
'invisible' class just before switching languages. After the main
content has rendered, the 'invisible' class is removed. These changes
effectively remove the UI glitches that were present when switching
languages.
2023-10-23 14:52:55 -03:00
764cf6709c Set selected language to $blue1 (blue theme) 2023-10-23 14:23:25 -03:00
c944c1afa7 Fix import path 2023-10-23 14:23:25 -03:00
d7cf081028 .stalled.icon is rendered outside .footer 2023-10-23 14:23:25 -03:00
16352bd37c Fix stalled icon within green theme 2023-10-23 14:23:25 -03:00
b1a8c053c5 Fix position of stalled icon 2023-10-23 14:23:25 -03:00
6eb62c7e5a Append / to redirect path 2023-10-23 14:23:25 -03:00
feae0ea6e6 Further UI improvements 2023-10-23 02:08:43 -03:00
75a72397e3 Switch to more straight forward scss $var names 2023-10-23 02:08:43 -03:00
a9315803f0 Fix ThemeSelect, LanguageSelect 2023-10-23 02:08:43 -03:00
9e393fcdf7 Rename themes after colors (leaf = green, moon = blue)
This commit introduces the language and theme dropdowns as being
invisible, and includes work related to improving how the dropdowns
are implemented.
2023-10-23 02:08:43 -03:00
47847b2545 Add new hook: 'useTheme' 2023-10-23 02:08:42 -03:00
c9347a490e Further UI improvements 2023-10-23 02:08:42 -03:00
a56de77773 Further UI improvements 2023-10-23 02:08:42 -03:00
c4e00f2158 Further UI improvements 2023-10-23 02:08:42 -03:00
ae9f98b244 Further UI improvements 2023-10-23 02:08:42 -03:00
a2259df872 Further UI improvements 2023-10-23 02:08:42 -03:00
7542e762fc Further UI improvements 2023-10-23 02:08:42 -03:00
05e519c737 UI changes 2023-10-14 09:21:39 -03:00
e9d35b51f7 Add stall recovery 2023-10-14 09:21:39 -03:00
150b391fdf Add stall recovery 2023-10-14 09:21:39 -03:00
9e35b979db Remove script from DOM after it has been loaded 2023-10-14 09:21:39 -03:00
04fb949a28 Add AudioControl 2023-10-13 00:37:16 -03:00
1d641e7c71 Re-organize project files
Attempt to simplify the layout of project files.
2023-10-08 06:31:29 -03:00
10931146bd Add absolute canonical / alternate links 2023-10-07 19:39:28 -03:00
5e8d099589 Close <meta> 2023-10-07 19:29:52 -03:00
600f5cb799 Add / to end of links on the surah index
There is now a nginx rewrite rule in place that will automatically
redirect to a path with a trailing /.
2023-10-06 00:06:25 -03:00
8715361f17 Fix syntax error in erb 2023-10-06 00:06:25 -03:00
a2fc33bb7c Remove redirect from /en/1/ to /en/al-fatihah/
Rather than redirect /en/1/ to /en/al-fatihah/, render the surah
stream instead. A canonical `link` tag is included for the benefit
of search engines to differentiate between duplicates.

Preference is given to /en/al-fatihah/ over /en/1/.
2023-10-06 00:06:25 -03:00
a6b55b64b7 Add context to surah index (index.html.erb) 2023-10-05 12:25:23 -03:00
251dde6080 Merge various locals into context (stream.html.erb) 2023-10-05 12:25:23 -03:00
dc23ed29bf Add opengraph
Fix #151
2023-10-05 02:36:47 -03:00
84c91974ed Fix 'refresh'
When the 'refresh' icon is clicked, we should reset 'endOfStream'
to false or the stream will stop playing after the first ayah.
2023-10-05 01:11:52 -03:00
461b3a0092 Remove Quran.Slice
Fix #147
2023-10-05 01:11:52 -03:00
226621b979 Swap the footer after the last ayah has finished playing
Rather than swapping the footer when the last ayah starts playing,
swap the footer when the last ayah stops playing.
2023-09-15 09:26:54 -03:00
7ed8d1207c Remove unused font 2023-07-25 14:26:02 -03:00
300b59aa14 Improve layout on stream page (Arabic) 2023-07-25 14:26:02 -03:00
731e951f2e Fix layout on index page (Arabic) 2023-07-25 14:26:02 -03:00
e16f6b261f Ensure the timer never displays a number less than 0
This can sometimes happen on iOS (eg -0, -0.1)
2023-07-23 18:10:54 -03:00
d65e7da5eb Apply ChatGPT suggestion. 2023-07-21 11:55:16 -03:00
51ca9c292c Add meta description for search engines 2023-07-21 10:27:17 -03:00
23d1eeca2b Add robots.txt 2023-07-17 16:48:12 -03:00
d30c9d1c3b v0.5.0 2023-07-17 09:24:27 -03:00
2bb64eb390 Add spinner
When the audio is stalled or "waiting", show an animation
that indicates the loading state.
2023-07-17 09:16:22 -03:00
dd6857af7f Avoid setting the same src 2023-07-17 09:14:10 -03:00
6a14d5f8fd Replace useState (tid, setTid) with a local variable 2023-07-16 06:50:05 -03:00
8026101e07 linter: fix 2023-07-15 06:02:58 -03:00
ea9197ae6e Don't reset timer when sound is turned off
Toggle of the speaker to "off" state should not reset the timer.
That should only happen when the speaker is turned "on".
2023-07-15 06:00:29 -03:00
e3ef370027 Improve iOS support 2023-07-15 00:48:22 -03:00
fdfb75a648 Update useEffect dependencies 2023-07-14 21:07:42 -03:00
5d934918fe Clear all audio listeners 2023-07-14 18:17:14 -03:00
70a33d4bd7 Clear "ended" listener 2023-07-14 17:54:54 -03:00
7a60e36ff1 Don't fetch audio unless sound is on 2023-07-13 20:56:37 -03:00
a98703978f Render <audio> tag conditionally 2023-07-13 18:17:07 -03:00
51cc7484a0 Set $green on refresh button (leaf theme) 2023-07-13 16:23:37 -03:00
adabd152bd prettier: maxwidth = 90 2023-07-13 14:14:22 -03:00
3def4f26e4 Run prettier over src/js/ 2023-07-13 14:11:07 -03:00
dd833a384d Additional changes for iOS
Still not flawless. More work required.
2023-07-13 12:21:55 -03:00
465e3bf224 Try to fix audio stream on iOS 2023-07-12 23:00:46 -03:00
7c8134cd05 Remove remnants of webpackage 2023-07-12 21:31:38 -03:00
5455881498 Add audio support 2023-07-12 17:20:32 -03:00
bd000760ea webpackage.scss -> postman.scss 2023-07-11 20:14:58 -03:00
f5472a3b6c Remove lib/WebPackage.ts 2023-07-11 20:10:27 -03:00
61728e7216 git rm -r src/js/lib/WebPackage 2023-07-11 18:59:58 -03:00
190c3bde1c Set charset as UTF-8 2023-07-09 23:08:36 -03:00
0a25e3aeb1 Remove another unused local 2023-07-01 19:36:17 -03:00
de070a08ad Remove unused local 2023-07-01 19:32:17 -03:00
8e0bde6c44 Fix index, and stream loaders 2023-07-01 19:28:55 -03:00
Robert
5716425bd2
Rename Packet to Postman (#131) 2023-06-23 22:31:25 -03:00
Robert
5f300681d2
Add new packet interface (#130) 2023-06-23 21:58:56 -03:00
6935e67a49 WebPackage -> Packet
Rename WebPackage to Packet.
Move Packet to `/packages/typescript/packet`.
2023-06-21 19:58:31 -03:00
419d4186cb Add src/time_slots/ (replaces src/audio/*/timestamps.json) 2023-03-29 12:20:31 -03:00
a3d6a2cdfd Add src/audio/ 2023-03-27 12:24:46 -03:00
4ac82bab1e Add JS redirect to id_redirect.html.erb
Otherwise we can't forward the query string (eg ?ayah=X). We should
consider handling redirects like this with ".htaccess" in the future.
2023-03-17 00:17:00 -03:00
faa5f25a81 Follow up 7f4c8f723d 2023-03-15 18:48:55 -03:00
7f4c8f723d Display eastern arabic numerals on Iridium / OpenBSD
With Iridium running on OpenBSD, '1.toLocaleString("ar")' does not
return an eastern arabic numeral. The more specific locale, "ar-SA",
works as expected.
2023-03-15 17:21:58 -03:00
41c459e694 Follow up f23756014c 2023-03-15 17:18:59 -03:00
f23756014c Avoid 404 for '/surahs.json'
The '/surahs.json' file is now inlined, and does not require being
fetched over the network.
2023-03-15 17:02:04 -03:00
ae2f4f23c5 Synchronize ?ayah=x parameter on language change
When given - for example, `?ayah=5` and then the language is
changed at ayah 7, the "ayah" parameter should be updated to 7.

Fix #85
2023-03-13 20:21:57 -03:00
c8174f881e Follow up 3c6b2f6bf4 2023-03-12 19:54:30 -03:00
3c6b2f6bf4 Fix scroll jump
When the 'pause' button was clicked, the text could jump and become
realigned according to the space taken by the now visible scrollbar.

This change fixes that issue by leaving a gap for the scrollbar whether
it is visible or hidden.
2023-03-12 19:33:36 -03:00
0a3f8eac31 Follow up to 468613e193 2023-03-12 16:58:58 -03:00
5f957af84c Set document title at compile time
This change will hopefully make it easier for search engines to
pick up a page's title.
2023-03-12 11:23:48 -03:00
e4af56c162 Add Quran.Ayah 2023-03-12 11:20:10 -03:00
ad84105776 Add Quran.Surah.mapFromJSON 2023-03-11 18:52:47 -03:00
a22be0413e Add /favicon.png
Enhances SEO and provides a familiar icon when used with bookmarks.
2023-03-11 18:03:38 -03:00
c1d23f27c7 Re-implement id_redirect.ts without a JS redirect 2023-03-11 16:04:21 -03:00
3f3032dfcb Add canonical link tag to id_redirect.html.erb 2023-03-11 16:04:21 -03:00
1ab56c61bf Add src/sitemap.xml.erb 2023-03-11 16:04:21 -03:00
f691875012 Replace "File.read" with inline_json 2023-03-11 14:20:28 -03:00
d547c5420a Add '.css.webpackage' class to inline style 2023-03-11 14:20:18 -03:00
07812ffdaa Add "inline_css" helper method 2023-03-11 10:45:12 -03:00
3bbe8cf165 Inline surahs.json, slugs.json, and i18n.json 2023-03-11 09:27:31 -03:00
4e383ec107 numberToDecimal -> formatNumber 2023-03-11 08:35:50 -03:00
914c918eaa Add a simpler, more organized i18n.ts implementation 2023-03-11 08:35:49 -03:00
e96795f077 await in async function 2023-03-11 08:11:52 -03:00
4d8a19cd95 React: add strict mode support 2023-03-11 08:04:06 -03:00
f1e1f69d56 WebPackage: add strict mode support 2023-03-11 08:03:02 -03:00
667f63fa06 Add link to /<locale>/random
Fix #87
2023-03-10 13:13:21 -03:00
1a55879015 Hide surah.name.transliterated on iPhone
Fix #89
2023-03-10 12:04:33 -03:00
b8ab4d2559 Remove src/css/fonts.scss
No need to declare the fonts in CSS.
Handled by loader.ts
2023-03-10 09:23:14 -03:00
ce44f2e4d3 Open surah stream in the same tab 2023-03-10 08:52:53 -03:00
9fef5122eb Add surah/id_redirect 2023-03-10 07:48:47 -03:00