added new features

_locales/en/messages.json

@@ -350,5 +350,29 @@
     },
     "prayer_times_hint": {
         "message": "These might not be accurate. Please check the settings to change the method of calculation for a better result."
+    },
+    "prayer_times_format": {
+        "message": "Prayer Times Format"
+    },
+    "refresh_every_tab": {
+        "message": "Should Refresh on Every New Tab"
+    },
+    "until": {
+        "message": "Until"
+    },
+    "fajr": {
+        "message": "Fajr"
+    },
+    "dhuhr": {
+        "message": "Dhuhr"
+    },
+    "asr": {
+        "message": "Asr"
+    },
+    "maghrib": {
+        "message": "Maghrib"
+    },
+    "isha": {
+        "message": "Isha"
     }
 }

css/styles.css

@@ -1,5 +1,5 @@
 /*
-Copyright (c) 2019 by Shahed Nasser. All Rights Reserved.
+Copyright (c) 2021 by Shahed Nasser. All Rights Reserved.
  */
 
 @font-face {
@@ -35,7 +35,7 @@ body {
   filter: brightness(50%);
 }
 
-.verse, .bismillah, .athkar-container, .prayer-times-container {
+.verse, .bismillah, .athkar-container, .prayer-times-container, .next-prayer {
   font-family: QuranFont, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
@@ -404,6 +404,10 @@ body {
   font-size: 1.9em !important;
 }
 
+.swal2-content {
+  text-align: __MSG_@@bidi_start_edge__ !important
+}
+
 .new-features-list {
   text-align: __MSG_@@bidi_start_edge__ !important;
 }
@@ -434,6 +438,7 @@ body {
   max-width: 200px;
   word-spacing: 4px;
   padding-right: 25px;
+  padding-bottom: 30px;
 }
 
 .prayer-times-icon {
@@ -483,6 +488,15 @@ body {
   background-image: url(../assets/isha.svg);
 }
 
+.next-prayer {
+  margin-top: 10px;
+  font-size: 1.2rem;
+  background-color: rgba(255, 255, 255, .7);
+  color: #333;
+  text-align: center;
+  border-radius: 10px;
+}
+
 @media screen and (min-width: 992px) {
   .calendar {
     width: 70%;

js/background.js

@@ -118,3 +118,20 @@ function isFastingDay (day, dayOfWeek, holidays, dayBeforeHolidays, dayAfterHoli
       holidays.includes("Ashura") || holidays.includes("Arafa") || dayBeforeHolidays.includes("Ashura") || 
       dayAfterHolidays.includes("Ashura");
 }
+
+chrome.runtime.onInstalled.addListener(() => {
+  const manifest = chrome.runtime.getManifest();
+  chrome.storage.sync.get(['last_update'], (result) => {
+    if (!result.hasOwnProperty('last_update') || result.last_update.version != manifest.version) {
+      //send request to server to get message
+      $.get('https://quran-extension-api.alwaysdata.net/updates/' + manifest.version, (data) => {
+        let message;
+        if (data.success) {
+          message = data.message;
+        }
+
+        chrome.storage.sync.set({last_update: {version: manifest.version, message, shown: message.length === 0}});
+      });
+    }
+  })
+})

js/main.js

@@ -1,5 +1,5 @@
 //
-// Copyright (c) 2020 by Shahed Nasser. All Rights Reserved.
+// Copyright (c) 2021 by Shahed Nasser. All Rights Reserved.
 //
 
 $(document).ready(function(){
@@ -9,7 +9,9 @@ $(document).ready(function(){
       weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
       hijriHolidays = [],
       currentHijriMonths = [],
-      extensionURL = encodeURI("https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg");
+      extensionURL = encodeURI("https://chrome.google.com/webstore/detail/quran-in-new-tab/hggkcijghhpkdjeokpfgbhnpecliiijg"),
+      prayerTimeFormat = 24,
+      shouldRefresh = false;
   const messageRegex = /__MSG_(\w+)__/g,
         months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 
           'October', 'November', 'December'],
@@ -109,7 +111,7 @@ $(document).ready(function(){
     $(".calendar-container").removeClass("show");
   });
 
-  function load(reload, withTopSites, isReport = false){
+  function load(reload, withTopSites){
     audio = null;
     $(".reload img").hide();
     $(".reload .loader").show();
@@ -118,21 +120,32 @@ $(document).ready(function(){
     chrome.storage.local.get(['image', 'verse', 'calendar', 'prayerTimesCalendar'], function(result){
       chrome.storage.sync.get(['show_translation', 'translation_language', 'recitation',
                                   'translation_identifier', 'show_top_sites', 'show_athkar', 
-                                  'calendar_start_day', 'removed_top_sites', 'show_prayer_times'], function(syncResult){
+                                  'calendar_start_day', 'removed_top_sites', 'show_prayer_times',
+                                  'prayer_times_format', 'should_refresh', 'last_update'], function(syncResult){
+        if (syncResult.should_refresh) {
+          shouldRefresh = true;
+        }
+        if (syncResult.last_update && !syncResult.last_update.shown) {
+          Swal.fire({
+            html: syncResult.last_update.message
+          });
+          syncResult.last_update.shown = true;
+          chrome.storage.sync.set({last_update: syncResult.last_update});
+        }
         if(navigator.onLine){
           if(!syncResult.hasOwnProperty('show_translation') || !syncResult.hasOwnProperty('translation_language') ||
               !syncResult.show_translation || !syncResult.translation_language || !syncResult.translation_identifier){
                 $(".translation-container").remove();
               }
           let now = (new Date()).getTime();
-          if(result.hasOwnProperty('image') && result.image && now <= result.image.timeout && !reload && !isReport){
+          if(result.hasOwnProperty('image') && result.image && !shouldRefresh && now <= result.image.timeout && !reload){
             setBackgroundImage(result.image.src);
           }
           else {
             setNewImage(reload);
           }
 
-          if(result.hasOwnProperty('verse') && result.verse && now <= result.verse.timeout && !reload){
+          if(result.hasOwnProperty('verse') && result.verse && !shouldRefresh && now <= result.verse.timeout && !reload){
             setVerse(result.verse.data);
             audio = new Audio(result.verse.audio);
             if(syncResult.hasOwnProperty('show_translation') && syncResult.show_translation &&
@@ -204,12 +217,17 @@ $(document).ready(function(){
           }
 
           if (!syncResult.hasOwnProperty('show_prayer_times') || syncResult.show_prayer_times) {
+            if (syncResult.prayer_times_format) {
+              prayerTimeFormat = syncResult.prayer_times_format;
+            }
             if (!result.hasOwnProperty('prayerTimesCalendar') || !result.prayerTimesCalendar || !result.prayerTimesCalendar.hasOwnProperty('month') || 
             !result.prayerTimesCalendar.hasOwnProperty('calendar') || result.prayerTimesCalendar.month != (new Date()).getMonth()) {
               getPrayerTimesCalendar();
             } else {
               getPrayerTimes();
             }
+          } else {
+            $(".next-prayer").remove();
           }
         }
         else{
@@ -644,7 +662,7 @@ $(document).ready(function(){
     `)
 
     var toastElList = [].slice.call(document.querySelectorAll('.toast:not(.hide)'))
-    var toastList = toastElList.map(function (toastEl) {
+    toastElList.map(function (toastEl) {
       return new bootstrap.Toast(toastEl, {
         autohide: false
       }).show()
@@ -669,32 +687,80 @@ $(document).ready(function(){
 
   function getPrayerTimes() {
     chrome.storage.local.get(['prayerTimesCalendar'], function(result) {
-      console.log(result)
       if (result.hasOwnProperty('prayerTimesCalendar') && result.prayerTimesCalendar.hasOwnProperty('calendar')) {
         //get today's prayer times
-        const today = new Date();
+        const today = new Date(),
+          todayMoment = moment();
         const prayerTimesContainer = $(".prayer-times-container"),
               prayerTimesWrapper = prayerTimesContainer.find(".prayer-times-wrapper");
         prayerTimesContainer.addClass('d-none');
         prayerTimesWrapper.empty();
+        let nextPrayerTime = 0, nextPrayerName = "";
         result.prayerTimesCalendar.calendar.some((dateData) => {
           if (parseInt(dateData.date.gregorian.day) == today.getDate()) {
+            const fajr = formatTime(dateData.timings.Fajr),
+              dhuhr = formatTime(dateData.timings.Dhuhr),
+              asr = formatTime(dateData.timings.Asr),
+              maghrib = formatTime(dateData.timings.Maghrib),
+              isha = formatTime(dateData.timings.Isha),
+              momentFajr = moment(fajr, getTimeFormat()).year(todayMoment.year()).month(todayMoment.month()).date(todayMoment.date()),
+              momentDhuhr = moment(dhuhr, getTimeFormat()).year(todayMoment.year()).month(todayMoment.month()).date(todayMoment.date()),
+              momentAsr = moment(asr, getTimeFormat()).year(todayMoment.year()).month(todayMoment.month()).date(todayMoment.date()),
+              momentMaghrib = moment(maghrib, getTimeFormat()).year(todayMoment.year()).month(todayMoment.month()).date(todayMoment.date()),
+              momentIsha = moment(isha, getTimeFormat()).year(todayMoment.year()).month(todayMoment.month()).date(todayMoment.date());
+
+            switch (false) {
+              case todayMoment.isAfter(momentFajr):
+                nextPrayerTime = todayMoment.to(momentFajr);
+                nextPrayerName = chrome.i18n.getMessage('fajr');
+                break;
+              case todayMoment.isAfter(momentDhuhr):
+                nextPrayerTime = todayMoment.to(momentDhuhr);
+                nextPrayerName = chrome.i18n.getMessage('dhuhr');
+                break;
+              case todayMoment.isAfter(momentAsr):
+                nextPrayerTime = todayMoment.to(momentAsr);
+                nextPrayerName = chrome.i18n.getMessage('asr');
+                break;
+              case todayMoment.isAfter(momentMaghrib):
+                nextPrayerTime = todayMoment.to(momentMaghrib);
+                nextPrayerName = chrome.i18n.getMessage('maghrib');
+                break;
+              case todayMoment.isAfter(momentIsha):
+                nextPrayerTime = todayMoment.to(momentIsha);
+                nextPrayerName = chrome.i18n.getMessage('isha');
+                break;
+            }
+
             //show prayer times
-            prayerTimesWrapper.append(`<div class="prayer-time fajr">${formatTime(dateData.timings.Fajr)}</div>`);
-            prayerTimesWrapper.append(`<div class="prayer-time dhuhr">${formatTime(dateData.timings.Dhuhr)}</div>`);
-            prayerTimesWrapper.append(`<div class="prayer-time asr">${formatTime(dateData.timings.Asr)}</div>`);
-            prayerTimesWrapper.append(`<div class="prayer-time maghrib">${formatTime(dateData.timings.Maghrib)}</div>`);
-            prayerTimesWrapper.append(`<div class="prayer-time isha">${formatTime(dateData.timings.Isha)}</div>`);
+            prayerTimesWrapper.append(`<div class="prayer-time fajr">${fajr}</div>`);
+            prayerTimesWrapper.append(`<div class="prayer-time dhuhr">${dhuhr}</div>`);
+            prayerTimesWrapper.append(`<div class="prayer-time asr">${asr}</div>`);
+            prayerTimesWrapper.append(`<div class="prayer-time maghrib">${maghrib}</div>`);
+            prayerTimesWrapper.append(`<div class="prayer-time isha">${isha}</div>`);
             prayerTimesContainer.removeClass('d-none');
             return true; //break the loop
           }
           return false;
         });
+
+        console.log(nextPrayerTime, nextPrayerName);
+        if (nextPrayerTime) {
+          $(".next-prayer").text(nextPrayerName + " " + nextPrayerTime);
+        }
       }
     })
   }
 
   function formatTime (time) {
-    return time.split(" ")[0];
+    let formattedTime = time.split(" ")[0];
+    const momentTime = moment(formattedTime, 'HH:mm');
+    formattedTime = momentTime.format(getTimeFormat())
+
+    return formattedTime;
+  }
+
+  function getTimeFormat () {
+    return prayerTimeFormat == 12 ? "hh:mm A" : 'HH:mm';
   }
 });

js/options.js

@@ -14,7 +14,9 @@ $(document).ready(function(){
       calendarStartDayElement = $("select[name=calendar_start_day]"),
       sendFastingNotificationElement = $("input[name=send_fasting_notification]"),
       showPrayerTimesElement = $("#show_prayer_times"),
-      prayerTimesMethodElement = $("#prayer_times_method");
+      prayerTimesMethodElement = $("#prayer_times_method"),
+      prayerTimesFormatElement = $("#prayer_times_format"),
+      shouldRefreshElement = $("#should_refresh");
   chrome.storage.sync.get([
     "translation_language", 
     "show_translation", 
@@ -25,7 +27,9 @@ $(document).ready(function(){
     "calendar_start_day",
     "send_fasting_notification",
     "show_prayer_times",
-    "prayer_times_method"], function(result){
+    "prayer_times_method",
+    "prayer_times_format",
+    "should_refresh"], function(result){
     if(result.hasOwnProperty('show_translation') && result.show_translation){
       showTranslationElement.prop('checked', true);
       translationLanguagesElement.prop('disabled', false);
@@ -53,11 +57,18 @@ $(document).ready(function(){
     if (!result.hasOwnProperty('show_prayer_times') || result.show_prayer_times) {
       showPrayerTimesElement.prop('checked', true);
       prayerTimesMethodElement.prop('disabled', false);
+      prayerTimesFormatElement.prop('disabled', false);
     }
 
     if (result.hasOwnProperty('prayer_times_method')) {
       prayerTimesMethodElement.val(result.prayer_times_method)
     }
+
+    if (result.hasOwnProperty('prayer_times_format')) {
+      prayerTimesFormatElement.val(result.prayer_times_format)
+    }
+
+    shouldRefreshElement.prop('checked', !result.hasOwnProperty('should_refresh') || result.should_refresh);
   });
 
   $("#save").click(function(){
@@ -72,15 +83,19 @@ $(document).ready(function(){
         calendar_start_day = calendarStartDayElement.val(),
         send_fasting_notification = sendFastingNotificationElement.is(":checked"),
         show_prayer_times = showPrayerTimesElement.is(":checked"),
-        prayer_times_method = prayerTimesMethodElement.val();
+        prayer_times_method = prayerTimesMethodElement.val(),
+        prayer_times_format = prayerTimesFormatElement.val(),
+        should_refresh = shouldRefreshElement.is(":checked");
+
     if(translation_identifier === null){
       $(".alerts").html('<div class="alert alert-danger">' + chrome.i18n.getMessage('error') + '</div>')
     }
     chrome.storage.sync.set({translation_language: translation_language, show_translation: show_translation,
                               recitation: recitation, translation_identifier: translation_identifier,
                               show_top_sites: show_top_sites, show_athkar: show_athkar, show_date: show_date,
                               calendar_start_day: calendar_start_day, send_fasting_notification: send_fasting_notification,
-                              show_prayer_times: show_prayer_times, prayer_times_method: prayer_times_method}, function(){
+                              show_prayer_times: show_prayer_times, prayer_times_method: prayer_times_method,
+                              prayer_times_format: prayer_times_format, should_refresh: should_refresh}, function(){
                                 chrome.storage.local.set({image: null, verse: null, prayerTimesCalendar: null}, function(){
                                   $(".alerts").html('<div class="alert alert-success mt-3">' + chrome.i18n.getMessage('saved') + '</div>');
 
@@ -113,6 +128,7 @@ $(document).ready(function(){
 
   showPrayerTimesElement.change(function () {
     prayerTimesMethodElement.prop('disabled', !$(this).is(":checked"));
+    prayerTimesFormatElement.prop('disabled', !$(this).is(":checked"));
   })
 
   function getTranslationLanguageIdentifier(code){

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Quran In New Tab",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "View Quran verses on the new tab page.",
   "permissions": [
           "storage",

newtab.html

@@ -32,6 +32,7 @@ <h6 class="text-center mb-3">
       </div>
       <div class="hijri-date">
       </div>
+      <div class="next-prayer"></div>
       <div class="holidays">
       </div>
     </div>

options.html

@@ -28,6 +28,12 @@ <h2 class="mb-4">__MSG_general__</h2>
           </div>
           <small class="text-secondary">__MSG_show_hijri_date_description__</small>
         </div>
+        <div class="form-group mb-4">
+          <div class="form-check form-switch">
+            <input type="checkbox" class="form-check-input" id="should_refresh" name="should_refresh">
+            <label class="form-check-label" for="should_refresh">__MSG_refresh_every_tab__</label>
+          </div>
+        </div>
         <hr />
         <h2 class="mb-4">__MSG_quran__</h2>
         <div class="form-group mb-4">
@@ -237,6 +243,13 @@ <h2 class="mb-4">__MSG_prayer_times__</h2>
           </div>
           <small class="text-secondary">__MSG_show_prayer_times_description__</small>
         </div>
+        <div class="form-group mb-4">
+          <label class="mb-2">__MSG_prayer_times_format__</label>
+          <select class="form-control" id="prayer_times_format" name="prayer_times_format" disabled>
+            <option value="24">24h Format</option>
+            <option value="12">12h Format</option>
+          </select>
+        </div>
         <div class="form-group mb-4">
           <label class="mb-2">__MSG_prayer_times_method__</label>
           <select class="form-control" id="prayer_times_method" name="prayer_times_method" disabled>