fix: closable record list

README.md

@@ -4,23 +4,23 @@ This project provides a mobile app to shazam songs with [Lidarr](https://github.
 <img src="https://github.com/cstaelen/docker-shazarr/blob/1fd8ad85b17ada9726f6119dd1791ed7faef4f56/.github/screenshot.png" width="300"/>
 
 ## Features
-- 5 sec audio capture and song recognition using python [ShazamIO](https://github.com/dotX12/ShazamIO).
+- Audio microphone capture and song recognition using python [ShazamIO](https://github.com/dotX12/ShazamIO).
 - Download queried album to [Lidarr](https://github.com/linuxserver/docker-lidarr)
 - Download queried song/album with [Tidarr](https://github.com/cstaelen/tidarr)
-- Listen on streaming app like Spotify
+- Listen on streaming app Spotify, Apple Music and Deezer
 - Show lyrics
-- Record and recognize later if API is not accessible
-- Record ghistory
+- Offline song record and recognize later (if API is not accessible)
+- Record history
 
 ## Get started
 
 In order to use it you will have to install :
-- Docker image to query Shazam services
-- Android mobile app APK
+- API: Docker image to query Shazam services
+- Client : Android mobile app APK (iOS coming soon)
 
 Proceed:
 1. Pull and up docker image `cstaelen/shazarr-api`
-2. Go to url on `http://<docker-host>:12358`
+2. Go to url on `http://<docker-host>:12358` to see qrcode
 3. Download APK by scanning qrcode
 4. Fill Shazarr API URL in app
 
@@ -67,8 +67,10 @@ APK available [here](https://github.com/cstaelen/docker-shazarr/raw/main/outputs
 #### iOS (coming soon)
 
 ## Roadmap
-- [x] API usgin docker image
+- [x] API using docker image
 - [x] Android app
+- [x] Record history: access last shazamed songs
+- [x] Offline record: record without API access, recognize song later 
 - [ ] iOS app
 
 ## Development

app/src/App.tsx

@@ -51,7 +51,7 @@ function App() {
                   <StatusChip />
                 </Box>
                 <Box
-                  marginY={3}
+                  marginTop={3}
                   flex="1 1 0"
                   display="flex"
                   alignItems="center"
@@ -59,7 +59,7 @@ function App() {
                 >
                   <ShazarrButton />
                 </Box>
-                <Box marginY={3}>
+                <Box>
                   <FormApi />
                   <HistoryList />
                 </Box>
@@ -84,11 +84,5 @@ const Main = styled.main`
   background-image: linear-gradient(180deg, #153b50 0%, #0a1d28 100%);
   margin: 0;
   text-align: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 100vh;
-  overflow: auto;
+  min-height: 100vh;
 `;

app/src/components/FormApi/Form.tsx

@@ -89,7 +89,10 @@ export default function FormApi() {
         </DialogContent>
       </Dialog>
       <ButtonConfig>
-        <Button onClick={() => setShowApiForm(!showApiForm)}>
+        <Button
+          onClick={() => setShowApiForm(!showApiForm)}
+          disabled={recordingStatus !== "inactive"}
+        >
           Server configuration
         </Button>
       </ButtonConfig>

app/src/components/History/List.tsx

@@ -1,13 +1,8 @@
-import {
-  Box,
-  Button,
-  Container,
-  Drawer,
-} from "@mui/material";
+import { Box, Button, Container, Drawer } from "@mui/material";
 import HistoryCard from "./Card";
 import { useHistoryProvider } from "./Provider";
 import { useState } from "react";
-import { List } from "@mui/icons-material";
+import { Close, List } from "@mui/icons-material";
 import styled from "@emotion/styled";
 import { useShazarrProvider } from "../Shazarr/Provider";
 
@@ -16,8 +11,7 @@ export default function HistoryList() {
   const { history } = useHistoryProvider();
   const [listOpen, setListOpen] = useState<boolean>();
 
-  if (!history || history?.length === 0 || recordingStatus !== "inactive")
-    return null;
+  if (!history || history?.length === 0) return null;
 
   return (
     <Box marginBottom={2}>
@@ -26,8 +20,9 @@ export default function HistoryList() {
         variant="outlined"
         fullWidth
         onClick={() => setListOpen(true)}
+        disabled={recordingStatus !== "inactive"}
       >
-        Last records ({history?.length})
+        Show records ({history?.length})
       </Button>
       <Drawer
         anchor="bottom"
@@ -46,6 +41,15 @@ export default function HistoryList() {
                 onClose={() => setListOpen(false)}
               />
             ))}
+            <Button
+              startIcon={<Close />}
+              variant="outlined"
+              fullWidth
+              onClick={() => setListOpen(false)}
+              sx={{ marginBottom: 1 }}
+            >
+              Close records
+            </Button>
           </Container>
         </StyledBox>
       </Drawer>

app/src/components/NotesAnimate/NotesAnimate.tsx

@@ -91,7 +91,7 @@ const Wrapper = styled.div`
   bottom: 0;
   height: 100vh;
   overflow: hidden;
-  z-index: -1;
+  z-index: 0;
 
   @keyframes noteAnimation {
     0% {

app/src/components/Shazarr/Button.tsx

@@ -47,7 +47,7 @@ export default function ShazarrButton() {
                       src={skullImage}
                       alt=""
                       width="35"
-                      style={{ transform: "scale(1.8)" }}
+                      style={{ transform: "scale(1.6)" }}
                     />
                   )}
                 </Round>
@@ -86,7 +86,7 @@ const Round = styled.div<{ isAnimate: boolean }>`
     top: 50%;
     margin-left: -3.5rem;
     margin-top: -3.5rem;
-    z-index: -1;
+    z-index: 0;
     animation: ${({ isAnimate }) =>
       isAnimate ? "button-animate 2s infinite linear" : "none"};
     transition: transform 300ms ease;

app/src/components/Shazarr/ui/StatusChip.tsx

@@ -1,3 +1,4 @@
+
 import { Check, MicOutlined, NetworkPing } from "@mui/icons-material";
 import { Chip, CircularProgress } from "@mui/material";
 import { useShazarrProvider } from "../Provider";
@@ -36,7 +37,7 @@ export default function StatusChip() {
           : shazarrResponse?.track
           ? "Found !"
           : shazarrResponse && !shazarrResponse?.track
-          ? "Not found. Retry closer."
+          ? "Not found. Get closer."
           : apiError
           ? "Offline mode"
           : "Ready"