add debug window

src/components/debug/DebugWindow.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react';
+import { Checkbox, Divider, FlexboxGrid, Panel, Slider } from 'rsuite';
+import { useAppSelector } from '../../redux/hooks';
+import CustomTooltip from '../shared/CustomTooltip';
+
+const DebugWindow = () => {
+  const playQueue = useAppSelector((state) => state.playQueue);
+  const player = useAppSelector((state) => state.player);
+  const multiSelect = useAppSelector((state) => state.multiSelect);
+  const [checked, setChecked] = useState(true);
+  const [opacity, setOpacity] = useState(100);
+  return (
+    <Panel
+      style={{
+        position: 'absolute',
+        zIndex: 2,
+        bottom: '120px',
+        right: '25px',
+        padding: '10px',
+        maxWidth: '250px',
+        background: '#000',
+        pointerEvents: checked ? 'all' : 'none',
+        opacity: opacity / 100,
+      }}
+      bordered
+    >
+      <FlexboxGrid justify="space-between" style={{ alignItems: 'center' }}>
+        <FlexboxGrid.Item>
+          <h6>Player</h6>
+        </FlexboxGrid.Item>
+        <CustomTooltip text="Opacity">
+          <FlexboxGrid.Item>
+            <Slider
+              value={opacity}
+              onChange={(e) => setOpacity(e)}
+              style={{ width: '50px' }}
+              min={10}
+              max={100}
+              tooltip={false}
+            />
+          </FlexboxGrid.Item>
+        </CustomTooltip>
+
+        <CustomTooltip text="Clickable">
+          <FlexboxGrid.Item>
+            <Checkbox
+              style={{
+                pointerEvents: 'all',
+                padding: '0px !important',
+                margin: '0px !important',
+              }}
+              defaultChecked={checked}
+              onChange={() => setChecked(!checked)}
+            />
+          </FlexboxGrid.Item>
+        </CustomTooltip>
+      </FlexboxGrid>
+
+      <ul
+        style={{
+          listStyle: 'none',
+          paddingLeft: '0px',
+          wordWrap: 'break-word',
+        }}
+      >
+        <li>
+          status:{' '}
+          <span
+            style={{
+              color: player.status === 'PLAYING' ? 'lightgreen' : 'orange',
+            }}
+          >
+            {player.status}
+          </span>
+        </li>
+        <li>currentSeek: {player.currentSeek.toFixed(2)}</li>
+        <li>currentSeekable: {player.currentSeekable.toFixed(2)}</li>
+        <li>volume (global): {playQueue.volume.toFixed(2)}</li>
+        <li>repeat: {playQueue.repeat}</li>
+        <li>shuffle: {playQueue.shuffle ? 'true' : 'false'}</li>
+        <li>isFading: {playQueue.isFading ? 'true' : 'false'}</li>
+      </ul>
+
+      <table style={{ tableLayout: 'fixed' }}>
+        <tr style={{ textAlign: 'left' }}>
+          <th>Player</th>
+          <th
+            style={{
+              color: playQueue.currentPlayer === 1 ? 'lightgreen' : undefined,
+            }}
+          >
+            1
+          </th>
+          <th
+            style={{
+              color: playQueue.currentPlayer === 2 ? 'lightgreen' : undefined,
+            }}
+          >
+            2
+          </th>
+        </tr>
+        <tr>
+          <td>index</td>
+          <td>{playQueue.player1.index}</td>
+          <td>{playQueue.player2.index}</td>
+        </tr>
+        <tr>
+          <td style={{ width: '80px' }}>volume</td>
+          <td style={{ width: '65px' }}>
+            {Number(playQueue.player1.volume).toFixed(2)}
+          </td>
+          <td style={{ width: '65px' }}>
+            {Number(playQueue.player2.volume).toFixed(2)}
+          </td>
+        </tr>
+      </table>
+
+      <Divider />
+      <h6>PlayQueue</h6>
+
+      <ul
+        style={{
+          listStyle: 'none',
+          paddingLeft: '0px',
+          wordWrap: 'break-word',
+        }}
+      >
+        <li>currentIndex: {playQueue.currentIndex}</li>
+        <li>currentSongId: {playQueue.currentSongId}</li>
+        <li>entry: {playQueue.entry.length} tracks</li>
+        <li>shuffledEntry: {playQueue.shuffledEntry.length} tracks</li>
+      </ul>
+
+      <Divider />
+      <h6>Multiselect</h6>
+      <ul
+        style={{
+          listStyle: 'none',
+          paddingLeft: '0px',
+          wordWrap: 'break-word',
+        }}
+      >
+        <li>
+          lastSelected: [{multiSelect.lastSelected.rowIndex}]{' '}
+          {multiSelect.lastSelected.title}
+        </li>
+        <li>
+          range (start): [{multiSelect.lastRangeSelected.lastSelected.rowIndex}]{' '}
+          {multiSelect.lastRangeSelected.lastSelected.title}
+        </li>
+        <li>
+          range (end): [
+          {multiSelect.lastRangeSelected.lastRangeSelected.rowIndex}]{' '}
+          {multiSelect.lastRangeSelected.lastRangeSelected.title}
+        </li>
+        <li>selected: {multiSelect.selected.length} rows</li>
+      </ul>
+    </Panel>
+  );
+};
+
+export default DebugWindow;

src/components/player/PlayerBar.tsx

@@ -29,6 +29,7 @@ import Player from './Player';
 import CustomTooltip from '../shared/CustomTooltip';
 import { star, unstar } from '../../api/api';
 import placeholderImg from '../../img/placeholder.jpg';
+import DebugWindow from '../debug/DebugWindow';
 
 const keyCodes = {
   SPACEBAR: 32,
@@ -118,7 +119,11 @@ const PlayerBar = () => {
   };
 
   const handleClickPlayPause = () => {
-    dispatch(setStatus(player.status === 'PLAYING' ? 'PAUSED' : 'PLAYING'));
+    if (player.status === 'PAUSED') {
+      dispatch(setStatus('PLAYING'));
+    } else {
+      dispatch(setStatus('PAUSED'));
+    }
   };
 
   const handleVolumeSlider = (e: number) => {
@@ -292,6 +297,7 @@ const PlayerBar = () => {
 
   return (
     <Player ref={playersRef}>
+      {settings.getSync('showDebugWindow') && <DebugWindow />}
       <PlayerContainer>
         <FlexboxGrid align="middle" style={{ height: '100%' }}>
           <FlexboxGrid.Item
@@ -515,6 +521,7 @@ const PlayerBar = () => {
                 </FlexboxGrid.Item>
                 <FlexboxGrid.Item colspan={16}>
                   {/* Seek Slider */}
+
                   <CustomSlider
                     progress
                     defaultValue={0}

src/components/settings/Config.tsx

@@ -169,11 +169,9 @@ const Config = () => {
 
         <p>
           If the crossfade duration is set to less than or equal to{' '}
-          <code>1.5</code>, volume fading will not occur for either track, but
+          <code>0.5</code>, volume fading will not occur for either track, but
           rather start the fading-in track at full volume. This is to
-          tentatively support
+          tentatively support <strong> gapless playback</strong> without fade.
-          <strong> gapless playback</strong> without fade. Experiment with this
-          knowledge to find your comfort zone.
         </p>
 
         <div style={{ width: '300px', paddingTop: '20px' }}>
@@ -354,6 +352,21 @@ const Config = () => {
           </Button>
         </div>
       </ConfigPanel>
+      <ConfigPanel header="Advanced" bordered>
+        <Checkbox
+          defaultChecked={Boolean(settings.getSync('showDebugWindow'))}
+          onChange={() => {
+            settings.setSync(
+              'showDebugWindow',
+              !settings.getSync('showDebugWindow')
+            );
+          }}
+        >
+          Show debug window (requires reload)
+        </Checkbox>
+        <br />
+        <Button onClick={() => window.location.reload()}>Reload window</Button>
+      </ConfigPanel>
     </GenericPage>
   );
 };

src/components/shared/setDefaultSettings.ts

@@ -4,6 +4,10 @@ import fs from 'fs';
 import { getSongCachePath, getImageCachePath } from '../../shared/utils';
 // Set setting defaults on first login
 const setDefaultSettings = (force: boolean) => {
+  if (force || !settings.hasSync('showDebugWindow')) {
+    settings.setSync('showDebugWindow', false);
+  }
+
   if (force || !settings.hasSync('cachePath')) {
     settings.setSync('cachePath', path.join(path.dirname(settings.file())));
   }