audio volume setting

_locales/en/messages.json

@@ -1,6 +1,6 @@
 {
   "name": {
-    "message": "Prayer Times Chrome Extension",
+    "message": "Prayer Times",
     "description": ""
   },
   "short_name": {

_locales/tr/messages.json

@@ -1,6 +1,6 @@
 {
   "name": {
-    "message": "Namaz Vakitleri Chrome Eklentisi",
+    "message": "Namaz Vakitleri",
     "description": ""
   },
   "short_name": {

index.html

@@ -186,12 +186,25 @@
                 </div>
 
                 <div id="adhanOffsetSettings" class="tabDiv text-start h-100 pb-3" style="display:none;">
-                    <div class="d-flex flex-column h-100 justify-content-between">
+                    <div class="d-flex flex-column h-100 justify-content-between" style="overflow: hidden;">
 
                         <div id="adhanOffsetSettingsContent"></div>
+
+                        <div id="audioVolumeDiv" class="bg-darkish rounded px-2 py-1">
+                            <div class="d-flex flex-row align-items-center justify-content-start gap-2">
+                                <div class="flex-shrink-1">
+                                    <img id="audioVolumeIcon" style="width: 30px;" />
+                                </div>
+                                <div class="flex-grow-1">
+                                    <input type="range" class="form-range pt-1 m-0" min="1" max="10" increment="1"
+                                        id="volume">
+                                </div>
+                            </div>
+                        </div>
+
                         <div>
-                            <div class="badge p-0 mt-2" id="hijriDateOffsetTitle"></div>
-                            <div class="bg-darkish px-1 py-2 rounded">
+                            <div class="badge p-0" id="hijriDateOffsetTitle"></div>
+                            <div class="bg-darkish px-1 py-1 rounded">
                                 <div class="d-flex flex-row align-items-end justify-content-between">
                                     <div class="col-7">
                                         <span class="todaysDateArabic badge"></span>
@@ -212,7 +225,7 @@
                             </div>
                         </div>
 
-                        <div class="d-flex flex-row justify-content-between align-items-center mt-2 gap-2">
+                        <div class="d-flex flex-row justify-content-between align-items-center gap-2">
                             <div>
                                 <select class="form-control form-control-sm" id="displayLanguage">
                                 </select>
@@ -221,7 +234,7 @@
                                 <button id="appResetButton" class="btn btn-danger text-light btn-sm col-12"></span>
                             </div>
                             <div>
-                                <a title="Chrome Extension Reviews Page"
+                                <a title="Thank you for review!"
                                     href="https://chromewebstore.google.com/detail/prayer-times-chrome-exten/fbkmgnkliklgbmanjkmiihkdioepnkce/reviews"
                                     target="_blank"><img src="images/review.png" class="img-fluid p-0 m-0" /></a>
                             </div>

js/adhan.js

@@ -1,6 +1,10 @@
 const aap = document.getElementById('adhanAudioPlayer');
 
 chrome.runtime.onMessage.addListener(msg => {
+
+    if ('volume' in msg)
+        aap.volume = msg.volume / 10;
+
     if ('audioID' in msg) {
         if (aap.paused) {
             aap.src = '/adhans/' + msg.audioID + '.mp3';

js/index.js

@@ -82,7 +82,12 @@ const runApp = async () => {
         vd.show();
     }
 
-    setFields(appSettings);
+    for (let i = 0; i < appSettings.allVakits.length; i++) {
+        let vakit = appSettings.allVakits[i].name.toLowerCase();
+        $('#offset-' + vakit).html(appSettings.allVakits[i].displayTime);
+    }
+
+    setFields();
 
 }
 
@@ -334,14 +339,23 @@ document.getElementById('adhanOffsetSettings').addEventListener('change', functi
     }
 });
 
+document.getElementById('volume').addEventListener('change', function (event) {
+    chrome.storage.local.get(['appSettings'], function (result) {
+        appSettings = result.appSettings;
+        appSettings.volume = event.target.value * 1;
+        saveAppSettingsAndRefresh(appSettings);
+        playAudio(102);
+    });
+});
+
 const saveAppSettingsAndRefresh = (appSettings) => {
     chrome.storage.local.set({ 'appSettings': appSettings }, function () {
         goGoRun('appSettings updated');
         $(':focus').blur();
     });
 }
 
-const setFields = async (appSettings) => {
+const setFields = async () => {
 
     $('#stopAdhanDiv').hide();
     if (adhanStatus.isBeingCalled)
@@ -440,12 +454,21 @@ const setFields = async (appSettings) => {
         calculationMethod.appendChild(option);
     });
 
+    $('#audioVolumeIcon').attr('src', 'images/audio-' + appSettings.volume + '.png');
+    $('#audioVolumeDiv').attr('title', 'Audio Volume: ' + appSettings.volume);
+    if (appSettings.areAdhansEnabled)
+        $('#volume').attr('disabled', false);
+    else
+        $('#volume').attr('disabled', true);
     if (!$('#adhanOffsetSettings').is(':visible'))
         displayAdhansAndOffsets();
 
 }
 
 const displayAdhansAndOffsets = () => {
+
+    $('#volume').val(appSettings.volume);
+
     $('.offsetCurrentVakit').removeClass('offsetCurrentVakit');
     let adhanVakits = ['imsak', 'fajr', 'duha', 'duhaend', 'dhuhr', 'asr', 'maghrib', 'isha'];
     let aoContent = `<div class="badge p-0 mt-0">${appSettings.i18n.adhansAndOffsetsTitle}</div>`;
@@ -455,7 +478,6 @@ const displayAdhansAndOffsets = () => {
     let duhaendOffset = duhaendDefaultOffset + (appSettings.vakitOffsets && appSettings.vakitOffsets.duhaend ? appSettings.vakitOffsets.duhaend : 0);
     let currentVakit = appSettings.allVakits.find(f => f.isCurrentVakit).name.toLowerCase();
 
-
     $('.adhan-on').hide();
     $('.adhan-off').hide();
     if (appSettings.areAdhansEnabled)
@@ -471,7 +493,7 @@ const displayAdhansAndOffsets = () => {
         let thisAdhanAudioID = appSettings.adhans[v] ?? 0;
         let thisAudioTitle = adhanAudios.find(a => a.id == thisAdhanAudioID)?.name;
         aoContent += `<div id=settingBox${v} class="bg-darkish px-1
-                    ${v == 'duha' ? 'rounded-top pt-2' : (v == 'duhaend' ? 'rounded-bottom pt-1 pb-2' : 'rounded py-2')}
+                    ${v == 'duha' ? 'rounded-top pt-1' : (v == 'duhaend' ? 'rounded-bottom pb-1' : 'rounded py-2')}
                     ${v != 'duha' ? 'mb-1' : ''}
                     ${thisTime.isCurrentVakit || (v == 'duhaend' && currentVakit == 'duha') ? 'border-start border-3 border-light' : ''}">`;
         aoContent += `<div class="d-flex flex-row justify-content-between">`;
@@ -491,7 +513,7 @@ const displayAdhansAndOffsets = () => {
 
         aoContent += '</div>';
 
-        aoContent += `<div class="col-2"><span class="badge">${timeValue}</span></div>`
+        aoContent += `<div class="col-2"><span id="offset-${v}" class="badge">${timeValue}</span></div>`
 
         /* offsets */
 
@@ -626,6 +648,7 @@ const displayAdhansAndOffsets = () => {
 
 const playAudio = (id) => {
     audioPlayer.src = '/adhans/' + id + '.mp3';
+    audioPlayer.volume = appSettings.volume / 10;
     $('.playAudioButton').attr('src', '/images/stop.png').addClass('bg-danger');
     audioPlayer.play();
     $('#audioPlayerDiv').show();

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_name__",
   "short_name": "__MSG_short_name__",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "default_locale": "en",
   "description": "__MSG_description__",
   "permissions": [

serviceWorker.js

@@ -15,6 +15,20 @@ self.addEventListener('message', async (msg) => {
 let appSettings = {};
 let adhanStatus = {};
 let currentVakit;
+let currentTime;
+let currentTimeString;
+let prayerTimes;
+let hijriCurrentTime;
+let hijriDate;
+let nextVakit;
+let totalMinutesInVakit;
+let remainingMinutesInVakit;
+let aroundTheClock;
+let iconColor;
+let badgeBackgroundColor;
+let iconTextColor;
+let clockFaceVakit;
+
 const r = 160;
 const ir = 12;
 const colors = { black: '#212529', silver: 'whitesmoke', tomato: '#F20031', gray: '#2E3338' };
@@ -93,6 +107,9 @@ async function initUser(i18nValues, appSettings) {
             if (!appSettings.hanafiAsr) {
                 appSettings.hanafiAsr = false;
             }
+            if (!appSettings.volume) {
+                appSettings.volume = 5;
+            }
             await chrome.storage.local.set({ 'appSettings': appSettings });
             await initAlarm();
         }
@@ -115,7 +132,8 @@ async function initUser(i18nValues, appSettings) {
                 showDuha: false,
                 showMidnight: false,
                 adhans: defaultAdhanSettings,
-                areAdhansEnabled: false
+                areAdhansEnabled: false,
+                volume: 5
             };
             await chrome.storage.local.set({ 'appSettings': appSettings });
         }
@@ -143,6 +161,7 @@ async function initDefaultUser(i18nValues) {
     appSettings.showMidnight = false;
     appSettings.adhans = defaultAdhanSettings;
     appSettings.areAdhansEnabled = false;
+    appSettings.volume = 5;
     await chrome.storage.local.set({ 'appSettings': appSettings });
 }
 
@@ -279,7 +298,7 @@ function populateVakitsAndVars() {
             vakits.push(ishaFajrVakit);
     }
 
-    cvi = vakits.findIndex(a => a.isCurrentVakit);
+    let cvi = vakits.findIndex(a => a.isCurrentVakit);
     currentVakit = vakits[cvi];
     nextVakit = vakits[(cvi + 1) % vakits.length];
 
@@ -291,7 +310,6 @@ function populateVakitsAndVars() {
     totalMinutesInVakit = diffMinutesBetweenTimes(currentVakit.time24, nextVakit.time24);
     aroundTheClock = totalMinutesInVakit >= 720;
     remainingMinutesInVakit = diffMinutesBetweenTimes(currentTimeString, nextVakit.time24);
-    passedInVakit = totalMinutesInVakit - remainingMinutesInVakit;
 
     appSettings.isLastHour = false;
 
@@ -728,7 +746,6 @@ function isAdhanAvailable() {
 
 /* - - - - - - - - - - - - - - - - - */
 async function callAdhan() {
-
     if (isAdhanAvailable()) {
         let callString = appSettings.timeNow24 + '-' + currentVakit.name + '-' + appSettings.currentVakitAdhanAudioID;
         if (adhanStatus.lastCall && adhanStatus.lastCall === callString) {
@@ -737,12 +754,9 @@ async function callAdhan() {
         else {
             await chrome.storage.local.set({ 'adhanStatus': { lastCall: callString, isBeingCalled: true } });
             await createOffscreen();
-            await chrome.runtime.sendMessage({ audioID: appSettings.currentVakitAdhanAudioID });
+            await chrome.runtime.sendMessage({ audioID: appSettings.currentVakitAdhanAudioID, volume: appSettings.volume });
         }
     }
-    else {
-        console.log('Not enabled. Current vakit: ' + currentVakit.name);
-    }
 }
 
 async function endAdhanCall() {