conditionnal render player

sherlock-iremus · Jan 16, 2025 · 8adf8da · 8adf8da
1 parent ef1317f
commit 8adf8da
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 32 deletions.
diff --git a/src/features/score/MeiViewer.jsx b/src/features/score/MeiViewer.jsx
@@ -6,10 +6,21 @@ import {
   KeyboardCommandKey,
   KeyboardControlKey,
   KeyboardOptionKey,
+  PlayCircle,
   ZoomIn,
   ZoomOut,
 } from '@mui/icons-material'
-import { Alert, Checkbox, Chip, IconButton, ListItemText, Pagination, Snackbar, Tooltip, Typography } from '@mui/material'
+import {
+  Alert,
+  Checkbox,
+  Chip,
+  IconButton,
+  ListItemText,
+  Pagination,
+  Snackbar,
+  Tooltip,
+  Typography,
+} from '@mui/material'
 import { Stack } from '@mui/system'
 import { useCallback, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
@@ -37,6 +48,7 @@ export const MeiViewer = ({ file }) => {
   const [scoreTitle, setScoreTitle] = useState('')
   const [currentPage, setCurrentPage] = useState(1)
   const [finalNoteId, setFinalNoteId] = useState(null)
+  const [showPlayer, setShowPlayer] = useState(false)
   const { selectedNotes, hoveredAnnotation, selectedAnnotation, isSubSelecting, scoreIri, annotatedNotes } =
     useSelector(state => state.globals)
   const color = theme.palette.primary.light
@@ -183,6 +195,11 @@ export const MeiViewer = ({ file }) => {
               <ZoomIn />
             </IconButton>
           </Tooltip>
+          <Tooltip title="Open player">
+            <IconButton onClick={() => setShowPlayer(!showPlayer)} size="small">
+              <PlayCircle />
+            </IconButton>
+          </Tooltip>
           <Tooltip title="Select whole score">
             <Checkbox
               icon={<InsertDriveFileOutlined />}
@@ -262,7 +279,7 @@ export const MeiViewer = ({ file }) => {
             </Stack>
           </Alert>
         </Snackbar>
-        <Player {...{ pageCount }} />
+        {showPlayer && <Player {...{ pageCount }} />}
       </Stack>
     </Stack>
   )

diff --git a/src/features/score/Player.jsx b/src/features/score/Player.jsx
@@ -1,4 +1,4 @@
-import { Alert, IconButton, Slider, Snackbar, Stack, Typography } from '@mui/material'
+import { Alert, Backdrop, CircularProgress, IconButton, Slider, Snackbar, Stack, Typography } from '@mui/material'
 import { useEffect, useRef, useState } from 'react'
 import { Pause, PlayArrow } from '@mui/icons-material'
 import { SplendidGrandPiano } from 'smplr'
@@ -48,34 +48,39 @@ export const Player = ({ pageCount }) => {
 
   if (midiApi)
     return (
-      <Snackbar open={isOpen} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
-        <Alert
-          sx={{
-            borderRadius: 3,
-            boxShadow: 1,
-            bgcolor: 'secondary.light',
-            '& .MuiAlert-icon': { display: 'none' },
-          }}
-        >
-          <Stack width={300} spacing={2} direction="row" alignItems="center">
-            <IconButton
-              onClick={() => {
-                try {
-                  setIsPlaying(!isPlaying)
-                  context.resume()
-                  midiApi.play()
-                } catch (error) {
-                  midiApi.pause()
-                }
-              }}
-            >
-              {isPlaying ? <Pause /> : <PlayArrow />}
-            </IconButton>
-            <Typography>{formatTime(midiApi.getSongTime() - midiApi.getSongTimeRemaining())}</Typography>
-            <Slider value={time} onChange={setTimePosition} />
-            <Typography>-{formatTime(midiApi.getSongTimeRemaining())}</Typography>
-          </Stack>
-        </Alert>
-      </Snackbar>
+      <>
+        <Backdrop open={!isOpen}>
+          <CircularProgress />
+        </Backdrop>
+        <Snackbar open={isOpen} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
+          <Alert
+            sx={{
+              borderRadius: 3,
+              boxShadow: 1,
+              bgcolor: 'secondary.light',
+              '& .MuiAlert-icon': { display: 'none' },
+            }}
+          >
+            <Stack width={300} spacing={2} direction="row" alignItems="center">
+              <IconButton
+                onClick={() => {
+                  try {
+                    setIsPlaying(!isPlaying)
+                    context.resume()
+                    midiApi.play()
+                  } catch (error) {
+                    midiApi.pause()
+                  }
+                }}
+              >
+                {isPlaying ? <Pause /> : <PlayArrow />}
+              </IconButton>
+              <Typography>{formatTime(midiApi.getSongTime() - midiApi.getSongTimeRemaining())}</Typography>
+              <Slider value={time} onChange={setTimePosition} />
+              <Typography>-{formatTime(midiApi.getSongTimeRemaining())}</Typography>
+            </Stack>
+          </Alert>
+        </Snackbar>
+      </>
     )
 }