Merge pull request #16 from mundotv789123/develop

Atualização v1.3

.env.example

@@ -3,10 +3,3 @@ NEXT_PUBLIC_APP_NAME='RaspAdmin'
 NEXT_PUBLIC_API_URL='/api'
 NEXT_PUBLIC_API_QUERY='?path=/{0}'
 NEXT_PUBLIC_SRC_QUERY='?path=/{0}'
-
-# Coloque aqui uma chave aleatória para habilitar autenticação por senha
-API_AUTH_KEY=
-API_USERNAME='admin'
-API_PASSWORD='admin'
-
-API_DIR='./files'

Dockerfile

@@ -1,10 +1,12 @@
-FROM node:18
+FROM node:18 AS build
 
 WORKDIR /app
-RUN apt install -y git
-RUN git clone https://github.com/mundotv789123/raspadmin-files-react.git .
+COPY . .
 RUN cp .env.example .env
 RUN npm install
 RUN npm run build
 
-CMD ["npm", "run", "start"]
+FROM nginx
+RUN mkdir -p /var/www
+COPY --from=build /app/out /var/www/html
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf

docker-compose.yml

@@ -1,14 +1,11 @@
 version: '3.1'
 services:
-  raspadmin:
-    image: 'mundotv789123/raspadmin'
-    container_name: 'raspadmin_files'
+  frontend:
+    image: 'mundotv789123/raspadmin:front'
     ports:
-    - '8080:3000'
+      - '8080:80'
+
+  backend:
+    image: 'mundotv789123/raspadmin:java'
     volumes:
-    - './files:/app/files'
-    environment:
-      NEXT_PUBLIC_APP_NAME: 'RaspAdmin'
-      API_AUTH_KEY: ''
-      API_USERNAME: 'admin'
-      API_PASSWORD: 'admin'
+      - './data:/app/data'

next.config.js

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // output: 'export', // descomente essa linha caso precise compilar o projeto para usar o back-end em java
+  output: 'export',
   reactStrictMode: true,
 }
 

nginx.conf

@@ -0,0 +1,8 @@
+server {
+    listen 80;
+    root /var/www/html;
+
+    location /api {
+        proxy_pass http://backend:8080;
+    }
+}

src/components/AudioPlayer/PlayList.tsx

@@ -4,7 +4,8 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 
 const PlayListContent = styled.div`
-    background-color: #0B4F75;
+    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;

src/components/AudioPlayer/index.tsx

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AudioContent, AudioDurationContent, AudioDurationCount, AudioElement, AudioProgress, AudioTitle, ContentHeader, ControlButton, ControlContent, LoadingSpin, VolumeControl, VolumeProgress } from "./styles";
-import { faAngleDown, faAngleUp, faBackwardStep, faEye, faEyeSlash, faForwardStep, faPause, faPlay, faShuffle, faVolumeMute, faVolumeUp } from "@fortawesome/free-solid-svg-icons";
+import { faAngleUp, faBackwardStep, faEye, faEyeSlash, faForwardStep, faPause, faPlay, faShuffle, faVolumeMute, faVolumeUp } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useRef, useState } from "react";
 import PlayList from "./PlayList";
 import Range from "../../elements/range";

src/components/AudioPlayer/styles.ts

@@ -27,7 +27,9 @@ export const AudioContent = styled.div`
 `
 
 export const AudioElement = styled.div`
-    background: linear-gradient(90deg, #006DAC, #00A2FF);
+    backdrop-filter: blur(5px);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
+    border: solid 1px gray;
     box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.25);
     display: flex;
     flex-direction: column;

src/components/FileBlock.tsx

@@ -47,6 +47,7 @@ const FileCont = styled.a`
     overflow: hidden;
     font-weight: 600;
     word-wrap: break-word;
+    text-shadow: 0 1px 5px black;
     transition: background-color 0.5s;
     border-radius: 5px;
     &:hover {

src/pages/index.tsx

@@ -19,12 +19,14 @@ const Container = styled.div`
     grid-template-areas: "h n" "m a";
     height: 100vh;
     transition: grid-template-columns .2s;
+    background: radial-gradient(transparent, rgba(0, 0, 0, 0.4));
     @media(max-width:950px) {
         grid-template-columns: 0 auto;
     }
 `
 
 const Header = styled.header`
+    backdrop-filter: blur(5px);
     grid-area: h;
     display: flex;
     overflow: hidden;
@@ -56,12 +58,14 @@ const Nav = styled.nav`
     background: rgba(0, 0, 0, 0.5);
     overflow-x: auto;
     white-space: nowrap;
+    backdrop-filter: blur(5px);
 `
 
 const Main = styled.main`
     grid-area: m;
     overflow-y: scroll;
     background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
 `
 
 const Aside = styled.aside`
@@ -73,13 +77,25 @@ const Aside = styled.aside`
 const PathLink = styled.div`
     font-size: 11pt;
     font-weight: bold;
-    margin: auto 25px;
+    margin-left: 25px;
+    margin-right: auto;
     color: white;
+    display: flex;
+    overflow-x: scroll;
+    & p, a {
+        display: block;
+        align-self: center;
+    }
     & a {
         color: white;
         margin: 0 2px;
         padding: 2px;
         border-radius: 5px;
+        max-width: 120px;
+        min-width: 25px;
+        white-space: nowrap;
+        overflow-x: hidden;
+        text-overflow: ellipsis;
         &:hover {
             background-color: rgba(255, 255, 255, 0.3);
         }
@@ -88,12 +104,19 @@ const PathLink = styled.div`
 
 const SearchInput = styled.input`
     background-color: rgba(0, 0, 0, 0.3);
-    margin: auto 25px auto auto;
-    border: none;
+    align-self: center;
+    margin-right: 25px;
     padding: 5px;
     outline: none;
+    border-radius: 7px;
+    border: solid 1px gray;
     color: white;
     font-size: 12pt;
+    width: 150px;
+    transition: width 100ms;
+    &:focus {
+        width: 250px;
+    }
 `
 
 export default function App() {
@@ -253,11 +276,11 @@ export default function App() {
                     <FontAwesomeIcon icon={faBars} />
                 </CollapseButtom>
                 <PathLink>
-                    /<a href="#/">home</a>
+                    <p>/</p><a href="#/">home</a>
                     {path && path.split("/").map((p, i) => {
                         let link = '';
                         path.split('/').forEach((l, li) => { if (li <= i) link += `/${l}` });
-                        return (<>/<a key={i} href={`#${link}`}>{p}</a></>)
+                        return (<><p>/</p><a key={i} href={`#${link}`}>{p}</a></>)
                     })}
                 </PathLink>
                 <SearchInput placeholder="Pesquisar" onChange={(e) => setSearch(e.currentTarget.value)} value={search} />

src/styles/app.css

@@ -9,6 +9,7 @@ html, body {
     color: white;
 }
 body {
+    background-image: url('/img/wallpaper.jpg');
     background-size: cover;
     background-position: center;
 }