Beta release v9.0.2

CHANGELOG.md

@@ -1,5 +1,15 @@
 ## New Updates
 
+### 9.0.2 - _May 2, 2022_
+
+Based on user feedback, are happy to announce some updates to SikhiToTheMax Desktop.
+
+- Ability to hide shabad (refer to screenshot below). This feature will hide the currently selected shabad and its panktee from the display, as well as from the video overlay capability.
+  ![](./assets/img/help_images/search-results.png)
+
+- We have made some improvements to shabad rendered to support smaller screen sizes.
+- An icon will now display when Bani Controller (Mobile Device Sync) is live.
+
 ### 9.0.0 - _April 22, 2022_
 
 We are excited to launch the latest version of SikhiToTheMax 9.0, which features several enhancements and performance improvements.

app.js

@@ -644,6 +644,16 @@ ipcMain.on('show-text', (event, arg) => {
   }
 });
 
+ipcMain.on('toggle-viewer-window', (event, arg) => {
+  if (viewerWindow) {
+    if (arg) {
+      viewerWindow.show();
+    } else {
+      viewerWindow.hide();
+    }
+  }
+});
+
 ipcMain.on('presenter-view', (event, arg) => {
   if (viewerWindow) {
     if (!arg) {

package.json

@@ -1,7 +1,7 @@
 {
   "productName": "SikhiToTheMax",
   "name": "sttm-desktop",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "The SikhiToTheMax desktop app",
   "main": "app.js",
   "scripts": {

www/configs/overlay.json

@@ -171,10 +171,12 @@
     "settings": {
       "reset": {
         "icon": "reset.svg",
+        "tooltip": "Reset Defaults",
         "initialValue": false
       },
       "overlayLarivaar": {
         "icon": "link.png",
+        "tooltip": "Toggle Larivaar",
         "initialValue": false
       },
       "larivaarAssist": {
@@ -186,10 +188,12 @@
       },
       "toggle-logo": {
         "icon": "sttm.png",
+        "tooltip": "Toggle Logo",
         "initialValue": false
       },
       "toggle-annoucement": {
         "icon": "megaphone.png",
+        "tooltip": "Toggle Annoucement",
         "initialValue": false
       },
       "toggle-link": {
@@ -198,6 +202,7 @@
       },
       "green-screen-toggle": {
         "type": "icon-toggle",
+        "tooltip": "Toggle Green Screen",
         "icon": "rectangle.svg",
         "initialValue": false
       }

www/locales/en.json

@@ -474,5 +474,9 @@
   },
   "SHORTCUT": {
     "COPY_TO_CLIPBOARD": "Verse copied to clipboard!"
+  },
+  "SHABAD_PANE": {
+    "SHOW_DISPLAY": "SHOW DISPLAY",
+    "HIDE_SCREEN": "HIDE SCREEN"
   }
 }

www/main/navigator/shabad/ShabadContent.jsx

@@ -450,6 +450,9 @@ const ShabadContent = () => {
             );
           }}
         ></Virtuoso>
+        <div className="controller-signal" title="Bani controller in use">
+          <img alt="sync" src="assets/img/icons/sync.svg" />
+        </div>
       </div>
     </div>
   );

www/main/navigator/shabad/ShabadHeader.jsx

@@ -1,7 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useStoreState, useStoreActions } from 'easy-peasy';
 
-function ShabadHeader() {
+const electron = require('electron');
+
+const { ipcRenderer, remote } = electron;
+const { i18n } = remote.require('./app');
+
+const ShabadHeader = () => {
+  const [showViewer, setShowViewer] = useState(true);
   const { activeShabadId, activeVerseId, isDontSaveHistory } = useStoreState(
     state => state.navigator,
   );
@@ -32,12 +38,22 @@ function ShabadHeader() {
     }
   };
 
+  useEffect(() => {
+    ipcRenderer.send('toggle-viewer-window', showViewer);
+  }, [showViewer]);
+
   return (
-    <>
+    <div className="shabad-pane-header">
+      <button
+        className={`button toggle-viewer-btn ${!showViewer ? 'btn-danger' : ''}`.trim()}
+        onClick={() => setShowViewer(!showViewer)}
+      >
+        {showViewer ? i18n.t('SHABAD_PANE.HIDE_SCREEN') : i18n.t('SHABAD_PANE.SHOW_DISPLAY')}
+      </button>
       <i className="fa fa-arrow-circle-o-left" onClick={navigateVerseLeft}></i>
       <i className="fa fa-arrow-circle-o-right" onClick={navigateVerseRight}></i>
-    </>
+    </div>
   );
-}
+};
 
 export default ShabadHeader;

www/main/overlay/components/OverlaySetting.jsx

@@ -101,6 +101,7 @@ const OverlaySetting = ({ settingObj, stateVar, stateFunction }) => {
         <div className="size-icon-container" onClick={handleToggleChange}>
           <span
             className="icon-toggle"
+            title={settingObj.tooltip}
             style={{
               backgroundImage: `url('assets/img/icons/${settingObj.icon}')`,
             }}

www/main/viewer/Slide/Slide.jsx

@@ -65,7 +65,7 @@ const Slide = ({ verseObj, nextLineObj, isMiscSlide }) => {
         {verseObj && !isMiscSlide && (
           <>
             {verseObj.Gurmukhi && (
-              <div
+              <h1
                 className={`slide-gurbani ${getLarivaarAssistClass()} ${getVishraamType()} ${
                   activeVerseId === verseObj.ID ? 'active-viewer-verse' : ''
                 }`}
@@ -78,7 +78,7 @@ const Slide = ({ verseObj, nextLineObj, isMiscSlide }) => {
                   vishraamPlacement={verseObj.Visraam ? JSON.parse(verseObj.Visraam) : {}}
                   vishraamSource={vishraamSource}
                 />
-              </div>
+              </h1>
             )}
 
             {translationVisibility && verseObj.Translations && (

www/src/scss/navigator/shabad/_shabad.scss

@@ -6,9 +6,6 @@
 
   &:hover {
     outline: 0;
-    .pane-header {
-      border-bottom: 1px solid #01579b;
-    }
   }
   .shabad-list {
     height: calc(100% - 40px);
@@ -17,4 +14,27 @@
   .fa-check {
     color: $grey;
   }
+
+  &-header {
+    @include flex($ai-value: center, $jc-value: flex-end);
+
+    :nth-child(n) {
+      margin-left: 10px;
+    }
+
+    .toggle-viewer-btn {
+      height: 30px;
+      padding: 0 0.9em;
+      margin: unset;
+      background: $dark-grey;
+
+      &.btn-danger {
+        background: $bright-red;
+      }
+    }
+
+    i {
+      font-size: 16px;
+    }
+  }
 }

www/src/scss/styles.scss

@@ -781,22 +781,21 @@ body.show-overlay {
   }
 }
 
-.controller-on #shabad-page .controller-signal {
+.controller-on .shabad-pane .controller-signal {
   display: block;
 }
 
-#shabad-page {
+.shabad-pane {
   .controller-signal {
     bottom: 10px;
     display: none;
     height: 20px;
     position: absolute;
     right: 10px;
     width: 20px;
-  }
-
-  img {
-    width: 20px;
+    img {
+      width: 100%;
+    }
   }
 }
 

www/src/scss/themes/helpers/_variables.scss

@@ -28,6 +28,7 @@ $not-so-white: #e0e0e0;
 
 $transparent-blue: #cfd8dc;
 $red: #de636f;
+$bright-red: #ff0000;
 $cadmium-orange: #e18030;
 
 $light-green: #27ae60;

www/src/scss/viewer/verse-slide/_verse-slide.scss

@@ -24,6 +24,8 @@
 .slide-gurbani {
   @extend .gurmukhi-vaak-thick;
   font-size: 45px;
+  font-weight: normal;
+  line-height: 1.15;
 }
 
 .slide-announcement {
@@ -39,7 +41,9 @@
 }
 
 .padchhed span {
-  margin: 0 5px;
+  display: inline-block;
+  margin: 0 0.15em;
+  white-space: nowrap;
 }
 
 .slide-translation {