added tafsir 🔥

package.json

@@ -1,6 +1,7 @@
 {
-  "name": "Quran",
-  "version": "0.1.2",
+  "name": "Al-Quran",
+  "productName": "Al Quran",
+  "version": "0.1.3",
   "description": "Al Quran Desktop App",
   "author": {
     "name": "Hasib Molla",
@@ -32,6 +33,7 @@
     "electron-is-dev": "^1.2.0",
     "electron-log": "^4.3.1",
     "electron-updater": "^4.3.5",
+    "is-electron": "^2.2.0",
     "lodash.startcase": "^4.4.0",
     "node-sass": "4.14.1",
     "postcss": "^7.0.35",
@@ -44,6 +46,7 @@
     "redux-thunk": "^2.3.0",
     "styled-components": "^5.2.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
+    "typescript": "^4.1.3",
     "wait-on": "^5.2.0",
     "web-vitals": "^0.2.4"
   },
@@ -53,7 +56,7 @@
     "react-build": "craco build",
     "react-test": "craco test",
     "react-eject": "react-scripts eject",
-    "electron-build": "electron-builder -p always",
+    "electron-build": "electron-builder -wm -p always",
     "build": "npm run react-build && npm run electron-build",
     "start": "concurrently \"BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && electron . \""
   },

public/electron.js

@@ -1,9 +1,14 @@
-const { app, BrowserWindow, shell, dialog } = require('electron');
+const { app, BrowserWindow, shell, dialog, ipcMain } = require('electron');
 const { autoUpdater } = require('electron-updater');
 const isDev = require('electron-is-dev');
 const path = require('path');
+const fs = require('fs');
 
 let mainWindow;
+let updater;
+let appUpdater = {
+  enabled: false,
+};
 function createWindow() {
   mainWindow = new BrowserWindow({
     width: 1276,
@@ -12,8 +17,11 @@ function createWindow() {
     // titleBarStyle: 'hidden',
     backgroundColor: '#F8F9FA',
     webPreferences: {
-      nodeIntegration: true,
-      webSecurity: true,
+      // nodeIntegration: false,
+      // contextIsolation: true,
+      // preload: path.join(__dirname, 'preload.js'), // use a preload script
+      preload: path.resolve(__dirname, './preload.js'),
+      nodeIntegration: false,
     },
   });
   mainWindow.setMenuBarVisibility(false);
@@ -22,10 +30,21 @@ function createWindow() {
       ? 'http://localhost:3000'
       : `file://${path.join(__dirname, '../build/index.html')}`
   );
+  mainWindow.webContents.send('hi', 'ok');
 }
 
 app.whenReady().then(createWindow);
 
+// mainWindow.webContents.send('pong', 'Hello!');
+// ipcMain.on('toMain', (event, args) => {
+//   fs.readFile('path/to/file', (error, data) => {
+//     // Do something with file contents
+
+//     // Send result back to renderer process
+//     mainWindow.webContents.send('fromMain', 'hi');
+//   });
+// });
+
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
     app.quit();
@@ -72,6 +91,7 @@ app.on('ready', () => {
   if (!isDev) {
     autoUpdater.checkForUpdates();
   }
+  sendStatusToWindow('Hello');
 });
 
 //-------------------------------------------------------------------
@@ -99,6 +119,27 @@ autoUpdater.on('update-available', info => {
   sendStatusToWindow(
     `Update available. Version: ${info.version} Release Date: ${info.releaseDate}`
   );
+  dialog.showMessageBox(
+    {
+      type: 'info',
+      title: `Update available. Version: ${info.version}`,
+      message: `New Update Found. You can manaullay download it
+        Release Date: ${info.releaseDate}
+        Changelog:
+        ${info.releaseNotes}
+        `,
+      buttons: ['Download Now', 'No'],
+    },
+    buttonIndex => {
+      if (buttonIndex === 0) {
+        shell.openExternalSync(
+          'https://github.com/MuttakinHasib/Al-Quran/releases'
+        );
+      } else {
+        appUpdater.enabled = true;
+      }
+    }
+  );
 });
 autoUpdater.on('update-not-available', info => {
   sendStatusToWindow('Update not available.');
@@ -108,8 +149,19 @@ autoUpdater.on('error', err => {
 });
 autoUpdater.on('download-progress', progressObj => {
   sendStatusToWindow(
-    `Download speed: ${progressObj.bytesPerSecond} - Downloaded ${progressObj.percent}% (${progressObj.transferred} + '/' + ${progressObj.total} + )`
+    `Download speed: ${progressObj.bytesPerSecond} - Downloaded ${Math.floor(
+      progressObj.percent
+    )}% (${progressObj.transferred} + '/' + ${progressObj.total} + )`
   );
+  dialog.showMessageBox({
+    type: 'info',
+    title: 'Downloading new version',
+    message: `Download speed: ${
+      progressObj.bytesPerSecond / 1024
+    }KB/s - Downloaded ${Math.floor(progressObj.percent)}% (${
+      progressObj.transferred
+    } / ${progressObj.total})`,
+  });
 });
 autoUpdater.on('update-downloaded', info => {
   sendStatusToWindow('Update downloaded; will install now');

public/index.html

@@ -4,13 +4,12 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
     <meta name="author" content="Hasib Molla" />
     <meta
       name="description"
       content="This Application is created by using Electron + React js"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -40,10 +39,10 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>
-  <script>
+  <!-- <script>
     const { ipcRenderer } = require('electron');
     ipcRenderer.on('message', function (event, text) {
       console.log('Message from updater:', text);
     });
-  </script>
+  </script> -->
 </html>

public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "short_name": "Quran",
+  "short_name": "Al Quran",
   "name": "Al Quran",
   "icons": [
     {

public/preload.js

@@ -0,0 +1,2 @@
+const { ipcRenderer } = require('electron');
+global.ipcRenderer = ipcRenderer;

src/App.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
+import isElectron from 'is-electron';
 import Navbar from './components/Header/Navbar';
 import Home from './pages/Home';
 import Verse from './pages/Verse';
 import AutoScrollTop from './AutoScrollTop';
 import ScrollToTop from './components/ScrollToTop';
 
+// const {  } = window.require('electron').remote;
+
 const App = () => {
+
+
   return (
     <Router>
       <AutoScrollTop />

src/Redux/reducers/settingsReducer.js

@@ -14,7 +14,7 @@ const englishFont = getLocalStorage('englishFont');
 const initial = {
   isTransition: transitionMode ? transitionMode : true,
   arabicFontSize: arabicFont ? arabicFont : 48,
-  banglaFontSize: banglaFont ? banglaFont : 25,
+  banglaFontSize: banglaFont ? banglaFont : 22,
   englishFontSize: englishFont ? englishFont : 48,
 };
 

src/appRuntime.ts

@@ -0,0 +1,14 @@
+// type Unsubscribe = () => void
+// type Listener = (...args: any[]) => void
+
+// interface AppRuntime {
+//     send: (channel: string, data: any) => void
+//     subscribe: (channel: string, listener: Listener) => Unsubscribe
+// }
+
+// const appRuntime = (window as any).appRuntime as AppRuntime
+// const appRuntime = window.appRuntime;
+// export default appRuntime;
+
+import { IpcRenderer } from 'electron'; // this is just an interface
+export const ipcRenderer: IpcRenderer = (window as any).ipcRenderer;

src/components/Cards/AyahCard.js

@@ -10,9 +10,11 @@ import icon from '../../assets/images/star.svg';
 import Tafsir from '../Tafsir';
 import ButtonWithIcon from '../Buttons/ButtonWithIcon';
 
-const AyahCard = ({ ayah, tafsir, id }) => {
+const AyahCard = ({ ayah, transition, tafsir, id }) => {
   const isDarkTheme = useSelector(({ theme }) => theme.dark);
-  const { arabicFontSize } = useSelector(state => state.settings);
+  const { arabicFontSize, banglaFontSize } = useSelector(
+    state => state.settings
+  );
   const [ayahNumber, setAyahNumber] = useState(null);
   const [showTafsir, setShowTafsir] = useState(false);
 
@@ -66,6 +68,12 @@ const AyahCard = ({ ayah, tafsir, id }) => {
       >
         {ayah?.text}
       </h1>
+      <h3
+        className='font-solaimanLipi text-gray-800 dark:text-gray-400'
+        style={{ fontSize: banglaFontSize + 'px' }}
+      >
+        {transition?.text}
+      </h3>
       <Collapse isOpen={ayahNumber === id && showTafsir}>
         <Tafsir {...tafsir} />
       </Collapse>

src/components/Settings/Settings.js

@@ -4,8 +4,7 @@ import React from 'react';
 
 import { Transition } from '@headlessui/react';
 import SettingsContainer from './SettingsContainer';
-// import { getVersion } from '../../utils';
-// console.log(electron.app.getVersion());
+
 const Settings = props => {
   return (
     <Transition show={props?.isOpen || false}>
@@ -48,7 +47,7 @@ const Settings = props => {
                       >
                         <SettingsContainer />
                         <div className='pb-5'>
-                          <div className='uppercase font-semibold flex items-center justify-center text-center text-sm text-gray-600 dark:text-gray-200'>
+                          <div className='uppercase font-semibold flex items-center justify-center text-center text-sm text-gray-600 dark:text-gray-200 transition-colors duration-500'>
                             Designed & Developed with &nbsp;
                             <svg
                               xmlns='http://www.w3.org/2000/svg'
@@ -67,11 +66,14 @@ const Settings = props => {
                               href='http://facebook.com/hasibmolla28/'
                               target='_blank'
                               rel='noopener noreferrer'
+                              className='text-blue-500 hover:text-blue-700'
                             >
                               Hasib
                             </a>
                           </div>
-                          <h1 className='text-lg font-semibold'>Al Quran</h1>
+                          <h1 className='font-headTitle text-lg text-center font-bold mt-3 text-gray-600 dark:text-gray-200 transition-colors duration-500'>
+                            Al Quran
+                          </h1>
                           {/* <span className='font-light'>{getVersion()}</span> */}
                         </div>
                       </div>

src/components/Tafsir.js

@@ -5,11 +5,19 @@ const Tafsir = props => {
   const { banglaFontSize } = useSelector(state => state.settings);
 
   return (
-    <div
-      className='font-solaimanLipi py-3'
-      style={{ fontSize: banglaFontSize + 'px' }}
-    >
-      <h3 className='text-gray-800 dark:text-gray-400'>{props?._text}</h3>
+    <div className='mt-3 pt-3 border-t-2 border-gray-100'>
+      <h4 className='text-lg font-semibold font-signika text-blue-800 dark:text-blue-400'>
+        Tafsir of This Ayah:
+      </h4>
+      <div
+        className='font-solaimanLipi py-3 '
+        style={{ fontSize: banglaFontSize + 'px' }}
+      >
+        <h3
+          className='text-gray-800 word-spacing-bn dark:text-gray-400'
+          dangerouslySetInnerHTML={{ __html: props?.text }}
+        />
+      </div>
     </div>
   );
 };