Merge pull request #19 from mundotv789123/develop

v1.3.5

.babelrc

@@ -1,15 +1,15 @@
 {
-    "presets": [
-      "next/babel"
-    ],
-    "plugins": [
-      [
-        "styled-components",
-        {
-          "ssr": true,
-          "displayName": true,
-          "preprocess": false
-        }
-      ]
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true,
+        "preprocess": false
+      }
     ]
+  ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "raspadmin-files",
-  "version": "1.2.15",
+  "version": "1.3.5",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -34,12 +34,12 @@
     "@types/md5": "^2.3.2",
     "@types/mime-types": "^2.1.1",
     "@types/next": "^9.0.0",
-    "@types/node": "^18.7.13",
-    "@types/react": "^18.0.17",
+    "@types/node": "18.19.28",
+    "@types/react": "18.2.73",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
     "eslint": "8.10.0",
     "eslint-config-next": "^14.0.0",
-    "typescript": "^4.7.4"
+    "typescript": "4.9.5"
   }
 }

src/components/AudioPlayer/PlayList.tsx

@@ -4,82 +4,88 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 
 const PlayListContent = styled.div`
-    backdrop-filter: blur(5px);
-    background-color: rgba(0, 0, 0, 0.7);
-    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
-    display: flex;
-    flex-direction: column;
-    height: 200px;
-    margin-top: 20px;
-    margin-bottom: -10px;
-    padding-bottom: 15px;
-    border-radius: 15px 15px 0 0;
-    overflow-y: hidden;
-    transition: height 500ms;
+  backdrop-filter: blur(5px);
+  background-color: rgba(0, 0, 0, 0.7);
+  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  height: 200px;
+  margin-top: 20px;
+  margin-bottom: -10px;
+  padding-bottom: 15px;
+  border-radius: 15px 15px 0 0;
+  overflow-y: hidden;
+  transition: height 500ms;
 `
 
 const PlaylistHeader = styled.div`
-    padding: 10px;
-    text-align: center;
-    border-radius: 15px 15px 0 0;
-    background-color: rgba(0, 0, 0, 0.2);
-    overflow-y: hidden;
+  padding: 10px;
+  text-align: center;
+  border-radius: 15px 15px 0 0;
+  background-color: rgba(0, 0, 0, 0.2);
+  overflow-y: hidden;
 `
 
 const MusicCol = styled.div`
-    display: flex;
-    flex-direction: column;
-    overflow-y: scroll;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  height: 100%;
 `
 
 const MusicRow = styled.div`
-    display: flex;
-    & p {
-        display: block;
-        background-color: transparent;
-        border: none;
-        color: white;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow-x: hidden;
-        text-overflow: ellipsis;
-        font-size: 11pt;
-        padding: 5px;
-        cursor: pointer;
-        &:hover {
-            text-decoration: underline;
-        }
+  display: flex;
+  & p {
+    display: block;
+    background-color: transparent;
+    border: none;
+    color: white;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    font-size: 11pt;
+    padding: 5px;
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
     }
+  }
 `
+interface PropsInterface {
+  open: boolean, 
+  playlist: Array<string>, 
+  playing?: number
+  onClick?: ((index: number) => void)
+}
 
-export default function PlayList(props: { open: boolean, playlist: Array<string>, onClick?: ((index: number) => void), playing?: number }) {
+export default function PlayList(props: PropsInterface) {
 
-    const [playing, setPlaying] = useState(null);
+  const [playing, setPlaying] = useState(null);
 
-    function playSong(index: number) {
-        if (props.onClick) {
-            props.onClick(index);
-        }
+  function playSong(index: number) {
+    if (props.onClick) {
+      props.onClick(index);
     }
+  }
 
-    useEffect(() => {
-        setPlaying(props.playing);
-    }, [props.playing])
+  useEffect(() => {
+    setPlaying(props.playing);
+  }, [props.playing])
 
-    return (
-        <PlayListContent style={!props.open ? { height: 0, padding: 0 } : {}}>
-            <PlaylistHeader>
-                <h3>Lista de músicas</h3>
-            </PlaylistHeader>
-            <MusicCol>
-                {props.playlist.map((name, index) =>
-                    <MusicRow key={index} onClick={() => playSong(index)}>
-                        <p>{index + 1}. {name}</p> 
-                        {playing != null && index == playing && <FontAwesomeIcon icon={faVolumeUp} style={{ margin: 'auto 5px auto auto' }} />}
-                    </MusicRow>
-                )}
-            </MusicCol>
-        </PlayListContent>
-    );
+  return (
+    <PlayListContent style={!props.open ? { height: 0, padding: 0 } : {}}>
+      <PlaylistHeader>
+        <h3>Lista de músicas</h3>
+      </PlaylistHeader>
+      <MusicCol>
+        {props.playlist.map((name, index) =>
+          <MusicRow key={index} onClick={() => playSong(index)}>
+            <p>{index + 1}. {name}</p>
+            {playing != null && index == playing && <FontAwesomeIcon icon={faVolumeUp} style={{ margin: 'auto 5px auto auto' }} />}
+          </MusicRow>
+        )}
+      </MusicCol>
+    </PlayListContent>
+  );
 }