Add simple play random button

src/components/player/PlayerBar.tsx

@@ -27,7 +27,7 @@ import placeholderImg from '../../img/placeholder.png';
 import DebugWindow from '../debug/DebugWindow';
 import { getCurrentEntryList, writeOBSFiles } from '../../shared/utils';
 import { SecondaryTextWrapper, StyledButton, StyledRate } from '../shared/styled';
-import { Artist, Server } from '../../types';
+import { Artist, Play, Server, Song } from '../../types';
 import { notifyToast } from '../shared/toast';
 import { InfoModal } from '../modal/Modal';
 import useGetLyrics from '../../hooks/useGetLyrics';
@@ -36,6 +36,8 @@ import { setSidebar } from '../../redux/configSlice';
 import Popup from '../shared/Popup';
 import useFavorite from '../../hooks/useFavorite';
 import { useRating } from '../../hooks/useRating';
+import usePlayQueueHandler from '../../hooks/usePlayQueueHandler';
+import { apiController } from '../../api/controller';
 
 const DiscordRPC = require('discord-rpc');
 
@@ -45,6 +47,7 @@ const PlayerBar = () => {
   const playQueue = useAppSelector((state) => state.playQueue);
   const player = useAppSelector((state) => state.player);
   const config = useAppSelector((state) => state.config);
+  const folder = useAppSelector((state) => state.folder);
   const dispatch = useAppDispatch();
   const [seek, setSeek] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
@@ -56,6 +59,23 @@ const PlayerBar = () => {
   const [discordRpc, setDiscordRpc] = useState<any>();
   const [showCoverArtModal, setShowCoverArtModal] = useState(false);
   const [showLyricsModal, setShowLyricsModal] = useState(false);
+  const [isLoadingRandom, setIsLoadingRandom] = useState(false);
+  const { handlePlayQueueAdd } = usePlayQueueHandler();
+
+  const handlePlayRandom = async () => {
+    setIsLoadingRandom(true);
+    const res: Song[] = await apiController({
+      serverType: config.serverType,
+      endpoint: 'getRandomSongs',
+      args: {
+        size: 200,
+        musicFolderId: folder.musicFolder,
+      },
+    });
+
+    handlePlayQueueAdd({ byData: res, play: Play.Play });
+    setIsLoadingRandom(false);
+  };
 
   const playersRef = useRef<any>();
   const history = useHistory();
@@ -465,7 +485,7 @@ const PlayerBar = () => {
           <FlexboxGrid.Item colspan={12} style={{ textAlign: 'center', verticalAlign: 'middle' }}>
             <PlayerColumn center height="45px">
               {/* Stop Button */}
-              <CustomTooltip text={t('Stop')} delay={1000}>
+              <CustomTooltip text={t('Stop')}>
                 <PlayerControlIcon
                   aria-label={t('Seek forward')}
                   role="button"
@@ -483,7 +503,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Seek Backward Button */}
-              <CustomTooltip text={t('Seek backward')} delay={1000}>
+              <CustomTooltip text={t('Seek backward')}>
                 <PlayerControlIcon
                   aria-label={t('Seek backward')}
                   role="button"
@@ -501,7 +521,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Previous Song Button */}
-              <CustomTooltip text={t('Previous Track')} delay={1000}>
+              <CustomTooltip text={t('Previous Track')}>
                 <PlayerControlIcon
                   aria-label={t('Previous Track')}
                   role="button"
@@ -519,7 +539,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Play/Pause Button */}
-              <CustomTooltip text={t('Play/Pause')} delay={1000}>
+              <CustomTooltip text={t('Play/Pause')}>
                 <PlayerControlIcon
                   aria-label={t('Play')}
                   aria-pressed={player.status === 'PLAYING'}
@@ -537,7 +557,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Next Song Button */}
-              <CustomTooltip text={t('Next Track')} delay={1000}>
+              <CustomTooltip text={t('Next Track')}>
                 <PlayerControlIcon
                   aria-label={t('Next Track')}
                   role="button"
@@ -555,7 +575,7 @@ const PlayerBar = () => {
                 />
               </CustomTooltip>
               {/* Seek Forward Button */}
-              <CustomTooltip text={t('Seek forward')} delay={1000}>
+              <CustomTooltip text={t('Seek forward')}>
                 <PlayerControlIcon
                   aria-label={t('Seek forward')}
                   role="button"
@@ -572,9 +592,19 @@ const PlayerBar = () => {
                   }}
                 />
               </CustomTooltip>
-              <PlayerControlIcon size="lg" fixedWidth>
-                {' '}
-              </PlayerControlIcon>
+              <CustomTooltip text={t('Play Random')}>
+                <PlayerControlIcon
+                  aria-label={t('Play Random')}
+                  role="button"
+                  tabIndex={0}
+                  icon={isLoadingRandom ? 'spinner' : 'plus-square'}
+                  size="lg"
+                  fixedWidth
+                  onClick={handlePlayRandom}
+                  disabled={isLoadingRandom}
+                  spin={isLoadingRandom}
+                />
+              </CustomTooltip>
             </PlayerColumn>
             <PlayerColumn center height="35px">
               <FlexboxGrid

src/components/shared/ToolbarButtons.tsx

@@ -169,10 +169,10 @@ export const FilterButton = ({ ...rest }) => {
 
 export const AutoPlaylistButton = ({ noText, ...rest }: any) => {
   return (
-    <CustomTooltip text={i18n.t('Auto playlist')}>
-      <StyledButton aria-label={i18n.t('Auto playlist')} tabIndex={0} {...rest}>
+    <CustomTooltip text={i18n.t('Play Random')}>
+      <StyledButton aria-label={i18n.t('Play Random')} tabIndex={0} {...rest}>
         <Icon icon="plus-square" style={{ marginRight: noText ? '0px' : '10px' }} />
-        {!noText && i18n.t('Auto playlist')}
+        {!noText && i18n.t('Play Random')}
       </StyledButton>
     </CustomTooltip>
   );

src/i18n/locales/de.json

@@ -42,7 +42,7 @@
   "Artists": "Künstler",
   "ASC": "AUFSTEIGEND",
   "Audio Device": "Audio Gerät",
-  "Auto playlist": "Auto Playlist",
+  "Play Random": "Play Random",
   "Auto scroll": "Auto scroll",
   "Automatic Updates": "Automatische Updates",
   "Bitrate": "Bitrate",

src/i18n/locales/en.json

@@ -42,7 +42,7 @@
   "Artists": "Artists",
   "ASC": "ASC",
   "Audio Device": "Audio Device",
-  "Auto playlist": "Auto playlist",
+  "Play Random": "Play Random",
   "Auto scroll": "Auto scroll",
   "Automatic Updates": "Automatic Updates",
   "Bitrate": "Bitrate",

src/i18n/locales/es.json

@@ -42,7 +42,7 @@
   "Artists": "Artistas",
   "ASC": "ASC",
   "Audio Device": "Dispositivo de Audio",
-  "Auto playlist": "Lista de Reproducción Automática",
+  "Shufle All": "Lista de Reproducción Automática",
   "Auto scroll": "Desplazamiento Automático",
   "Automatic Updates": "Actualizaciones Automáticas",
   "Bitrate": "Tasa de Bits",

src/i18n/locales/si.json

@@ -42,7 +42,7 @@
   "Artists": "ගායකයන්",
   "ASC": "ASC",
   "Audio Device": "ශ්රව්ය උපකරණය",
-  "Auto playlist": "ස්වයංක්‍රීය ගීත ලැයිස්තුව",
+  "Play Random": "ස්වයංක්‍රීය ගීත ලැයිස්තුව",
   "Auto scroll": "ස්වයංක්‍රීය අනුචලනය",
   "Automatic Updates": "ස්වයංක්‍රීය යාවත්කාලීන කිරීම්",
   "Bitrate": "බිට්රේට්",
@@ -349,4 +349,4 @@
   "Year": "අවුරුද්ද",
   "Years": "අවුරුද්දු ",
   "Yes": "ඔව්"
-}
+}

src/i18n/locales/zhcn.json

@@ -42,7 +42,7 @@
   "Artists": "歌手",
   "ASC": "升高",
   "Audio Device": "音频设备",
-  "Auto playlist": "智能播放列表",
+  "Play Random": "智能播放列表",
   "Auto scroll": "自动滚动",
   "Automatic Updates": "自动更新",
   "Bitrate": "比特率",