Merge pull request #8 from kemzops/main

اضافة امكانية التعديل على مستوى الصوت

.gitignore

@@ -1,3 +1,5 @@
 dist
 node_modules
-package-lock.json
+package-lock.json
+screenshots
+.vscode

Window/home.js

@@ -14,7 +14,7 @@ module.exports = async function homeWindow(BrowserWindow, ipcMain, app, Tray, Me
 
     win = new BrowserWindow({
         width: 1000,
-        height: 600,
+        height: 620,
         minWidth: 1000,
         minHeight: 600,
         show: false,

index.js

@@ -32,4 +32,4 @@ app.setLoginItemSettings({
     openAtLogin: true,
     path: path.join(process.resourcesPath, '../Altaqwaa.exe'),
     args: ['--hidden']
-});
+});

pages/settings.html

@@ -135,6 +135,13 @@
                         </label>
                     </td>
                 </tr>
+                <tr>
+                    <td class="name">مستوى الصوت (للإستماع للقرآن)</td>
+                    <td>
+                        <input type="range" value="100" min="1" max="100" id="volume">
+                        <output id="volume_value">100</output>
+                    </td>
+                </tr>
             </table>
             <button id="save">حفظ</button>
         </div>

preload/quran_mp3.js

@@ -7,6 +7,7 @@ module.exports = function quran_mp3(App_Path) {
 
         let Quran_json = fs.readJsonSync(path.join(__dirname, '../data/Quran.json'));
         let mp3quran_json = fs.readJsonSync(path.join(__dirname, '../data/mp3quran.json'));
+        let volume = fs.readJsonSync(path.join(App_Path, './data/settings.json')).volume;
         let ul_group = document.getElementById('ul_group');
         let Sheikh = document.getElementById('Sheikh');
         let li_Sheikh_number = 1
@@ -96,8 +97,7 @@ module.exports = function quran_mp3(App_Path) {
                     audio.src = url
                     audio.preload = 'none'
                     audio.autoplay = false
-
-
+                    audio.volume = volume ? volume : 1
                 }
 
                 let icon_mp3 = document.getElementsByClassName('icon_mp3');

preload/settings.js

@@ -17,19 +17,32 @@ module.exports = function settings(App_Path) {
         let alrt = document.getElementById('alrt');//selected
         let selected = document.getElementById(settings?.Calculation);
 
+        const volumeRange = document.getElementById('volume');
+        const volumeValue = document.getElementById('volume_value');
+        volumeRange.addEventListener('input', handleVolumeRange)
+
+        if(settings.volume && settings.value != 100) {
+            volumeValue.innerHTML = settings.volume * 100;
+            volumeRange.value = settings.volume * 100;
+        }
+
         notifications_adhan.checked = settings?.notifications_adhan
         notifications_adhkar.checked = settings?.notifications_adhkar
         selected.selected = "selected"
 
-
+        function handleVolumeRange(volume) {
+            volumeValue.innerHTML = volumeRange.value;
+        }
 
         save.addEventListener('click', e => {
 
             let opj = {
 
                 Calculation: Calculation.value,
                 notifications_adhan: notifications_adhan.checked,
-                notifications_adhkar: notifications_adhkar.checked
+                notifications_adhkar: notifications_adhkar.checked,
+                volume: volumeRange.value / 100
+
             }
 
             if (latitude.value !== '') {

public/css/settings.css

@@ -117,6 +117,15 @@ input:checked+.slider:before {
     transform: translateX(26px);
 }
 
+/* for the volume value box */
+output {
+    background: #2196F3;
+    font-size: small;
+    padding: 4px 12px;
+    border-radius: 3px;
+    color: #fff;
+}
+
 /* Rounded sliders */
 .slider.round {
     border-radius: 34px;
@@ -147,8 +156,5 @@ input:checked+.slider:before {
 
 #save:hover {
     background-color: #6bc077;
-    width: 220px;
-    padding: 16px;
-    transition: 0.5s ease-in-out;
     box-shadow: 5px 15px 15px 0px #00000048;
 }