Add Subtitle generator feature

app.js

@@ -752,6 +752,10 @@ ipcMain.on('set-user-setting', (event, settingChanger) => {
   mainWindow.webContents.send('set-user-setting', settingChanger);
 });
 
+ipcMain.on('download-subtitle', (event, filename) => {
+  mainWindow.webContents.downloadURL(filename);
+})
+
 module.exports = {
   openSecondaryWindow,
   appVersion,

package.json

@@ -122,6 +122,7 @@
     "scroll": "^3.0.1",
     "sharp": "^0.31.3",
     "socket.io": "^4.5.1",
+    "subtitle-generator": "^0.0.4",
     "tippy.js": "^6.3.7",
     "universal-analytics": "^0.5.3",
     "update": "^0.7.4",

www/configs/navigator-settings.json

@@ -40,5 +40,7 @@
     "copyToClipboard": false
   },
   "minimizedBySingleDisplay": false,
-  "isDontSaveHistory": false
+  "isDontSaveHistory": false,
+  "isSubtitleRecording": false,
+  "subtitleData": []
 }

www/main/navigator/Navigator.jsx

@@ -12,8 +12,8 @@ const remote = require('@electron/remote');
 const analytics = remote.getGlobal('analytics');
 
 const Navigator = () => {
-  const { isSingleDisplayMode, akhandpatt } = useStoreState(state => state.userSettings);
-  const { setAkhandpatt } = useStoreState(state => state.userSettings);
+  const { isSingleDisplayMode, akhandpatt } = useStoreState((state) => state.userSettings);
+  const { setAkhandpatt } = useStoreState((state) => state.userSettings);
   const {
     minimizedBySingleDisplay,
     shortcuts,
@@ -23,7 +23,8 @@ const Navigator = () => {
     isSundarGutkaBani,
     isCeremonyBani,
     ceremonyId,
-  } = useStoreState(state => state.navigator);
+    isSubtitleRecording,
+  } = useStoreState((state) => state.navigator);
   const {
     setShortcuts,
     setIsMiscSlide,
@@ -32,9 +33,9 @@ const Navigator = () => {
     setIsSundarGutkaBani,
     setIsCeremonyBani,
     setCeremonyId,
-  } = useStoreActions(state => state.navigator);
+  } = useStoreActions((state) => state.navigator);
 
-  const addMiscSlide = givenText => {
+  const addMiscSlide = (givenText) => {
     if (isAnnoucement) {
       setIsAnnoucement(false);
     }
@@ -134,6 +135,12 @@ const Navigator = () => {
             <ShabadPane />
           </div>
           <div className="navigator-row">
+            {isSubtitleRecording && (
+              <div className="subtitle-status">
+                <i class="fa fa-circle"></i>
+                <span>Recording</span>
+              </div>
+            )}
             <ViewerPane />
             <MiscPane
               waheguruSlide={openWaheguruSlide}

www/main/navigator/misc/components/MiscContent.jsx

@@ -3,6 +3,7 @@ import { useDataLayerValue } from '../state-manager/DataLayer';
 import { HistoryPane } from './HistoryPane';
 import { InsertPane } from './InsertPane';
 import { OtherPane } from './OtherPane';
+import { RecordPane } from './RecordPane';
 
 export const MiscContent = () => {
   const [{ miscPanel }] = useDataLayerValue();
@@ -12,6 +13,7 @@ export const MiscContent = () => {
       <HistoryPane className={miscPanel === 'History' ? '' : 'd-none'} />
       <InsertPane className={miscPanel === 'Insert' ? '' : 'd-none'} />
       <OtherPane className={miscPanel === 'Others' ? '' : 'd-none'} />
+      <RecordPane className={miscPanel === 'Record' ? '' : 'd-none'} />
     </>
   );
 };

www/main/navigator/misc/components/MiscHeader.jsx

@@ -3,7 +3,7 @@ import { useDataLayerValue } from '../state-manager/DataLayer';
 
 export const MiscHeader = () => {
   const [{ miscPanel }, dispatch] = useDataLayerValue();
-  const SetOpenTab = event => {
+  const SetOpenTab = (event) => {
     dispatch({
       type: 'SET_PANEL',
       miscPanel: event.target.textContent,
@@ -12,11 +12,12 @@ export const MiscHeader = () => {
   const isHistory = miscPanel === 'History';
   const isInsert = miscPanel === 'Insert';
   const isOther = miscPanel === 'Others';
+  const isRecord = miscPanel === 'Record';
   return (
     <div className="misc-header">
       <a
         className={`misc-button ${isHistory ? 'misc-active' : ''}`}
-        onClick={event => SetOpenTab(event)}
+        onClick={(event) => SetOpenTab(event)}
       >
         <i className="fa fa-clock-o">
           <span className="Icon-label" key="History">
@@ -27,17 +28,27 @@ export const MiscHeader = () => {
 
       <a
         className={`misc-button ${isInsert ? 'misc-active' : ''}`}
-        onClick={event => SetOpenTab(event)}
+        onClick={(event) => SetOpenTab(event)}
       >
         <i className="fa fa-desktop">
           <span className="Icon-label" key="Insert">
             Insert
           </span>
         </i>
       </a>
+      <a
+        className={`misc-button ${isRecord ? 'misc-active' : ''}`}
+        onClick={(event) => SetOpenTab(event)}
+      >
+        <i className="fa fa-circle">
+          <span className="Icon-label" key="Record">
+            Record
+          </span>
+        </i>
+      </a>
       <a
         className={`misc-button ${isOther ? 'misc-active' : ''}`}
-        onClick={event => SetOpenTab(event)}
+        onClick={(event) => SetOpenTab(event)}
       >
         <i className="fa fa-ellipsis-h">
           <span className="Icon-label" key="Others">

www/main/navigator/misc/components/RecordPane.jsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useStoreState, useStoreActions } from 'easy-peasy';
+import { ipcRenderer } from 'electron/renderer';
+import anvaad from 'anvaad-js';
+
+import { generateSRT } from 'subtitle-generator';
+
+const path = require('path');
+const remote = require('@electron/remote');
+const { i18n } = remote.require('./app');
+const fs = require('fs');
+
+export const RecordPane = ({ className }) => {
+  const { isSubtitleRecording, subtitleData } = useStoreState((state) => state.navigator);
+  const { setIsSubtitleRecording } = useStoreActions((state) => state.navigator);
+  const [fileList, setFileList] = useState([]);
+
+  const userData = remote.app.getPath('userData');
+  const directory = path.resolve(userData, 'subtitles');
+
+  const startRecording = () => {
+    if (!isSubtitleRecording) {
+      setIsSubtitleRecording(true);
+    }
+  };
+
+  const stopRecording = () => {
+    const parsed = subtitleData.map((data, index) => {
+      return {
+        id: index,
+        seconds: data.seconds,
+        content: anvaad.unicode(data.content),
+      };
+    });
+    const srt = generateSRT(parsed, 'seconds');
+    if (isSubtitleRecording) {
+      setIsSubtitleRecording(false);
+    }
+    if (!fs.existsSync(directory)) {
+      fs.mkdirSync(directory);
+    }
+    const currentDate = new Date();
+    const filename = `${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}-${currentDate.getHours()}${currentDate.getMinutes()}${currentDate.getSeconds()}.srt`;
+    const filePath = path.resolve(directory, filename);
+
+    fs.writeFile(filePath, srt, updateList);
+  };
+
+  const updateList = () => {
+    fs.readdir(directory, (error, files) => {
+      const sortedFiles = files
+        .map((fileName) => ({
+          name: fileName,
+          time: fs.statSync(`${directory}/${fileName}`).mtime.getTime(),
+        }))
+        .sort((a, b) => b.time - a.time)
+        .map((file) => file.name);
+      setFileList(sortedFiles);
+    });
+  };
+
+  useEffect(() => {
+    updateList();
+  });
+
+  const download = (fileName) => {
+    const filePath = path.resolve(directory, fileName);
+    ipcRenderer.send('download-subtitle', filePath);
+  };
+
+  const deleteFile = (filename) => {
+    const filePath = path.resolve(directory, filename);
+    fs.unlink(filePath, (err) => {
+      if (err) throw err;
+    });
+    updateList();
+  };
+
+  return (
+    <div className={`subtitle-pane ${className}`}>
+      <h3>Record Subtitles</h3>
+      <p>To generate subtitles as you go through the shabads, click on the record button below:</p>
+      {isSubtitleRecording ? (
+        <button className="button subtitle-btn" onClick={stopRecording}>
+          Stop Recording
+        </button>
+      ) : (
+        <button className="button subtitle-btn" onClick={startRecording}>
+          Record
+        </button>
+      )}
+      {fileList.length > 0 && <h3>Previous recordings</h3>}
+      {fileList.map((file) => {
+        return (
+          <div class="subtitle-item">
+            <p>{file}</p>
+            <div class="controls">
+              <button
+                className="button"
+                onClick={() => {
+                  download(file);
+                }}
+              >
+                <i class="fa fa-download"></i>
+              </button>
+              <button
+                className="button"
+                onClick={() => {
+                  deleteFile(file);
+                }}
+              >
+                <i class="fa fa-trash"></i>
+              </button>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+RecordPane.propTypes = {
+  className: PropTypes.string,
+};

www/main/navigator/misc/components/index.js

@@ -2,3 +2,4 @@ export { HistoryPane } from './HistoryPane';
 export { InsertPane } from './InsertPane';
 export { OtherPane } from './OtherPane';
 export { MiscPane } from './MiscPane';
+export { RecordPane } from './RecordPane';