Update Dependencies, Use slim alpine inginx

.docker/DockerfileLocal

@@ -1,9 +1,8 @@
 FROM node:18-alpine
-
 WORKDIR /app
 
 COPY package*.json .
 
 RUN npm install
 
-CMD npm start
+CMD ["npm", "start"]

.docker/DockerfileSnapcastClient

@@ -1,5 +1,4 @@
-FROM debian:bullseye
-
+FROM debian:bullseye-slim
 WORKDIR /app
 
 RUN dpkg --add-architecture armhf

.docker/DockerfileSnapcastServer

@@ -1,6 +1,4 @@
-FROM debian:bullseye
-
-
+FROM debian:bullseye-slim
 WORKDIR /app
 
 RUN apt update && apt upgrade -y
@@ -21,4 +19,4 @@ RUN rm -rf /var/lib/apt/lists/*
 
 COPY .docker/snapserver.conf /etc/snapserver.conf
 
-ENTRYPOINT /usr/bin/snapserver --logging.sink=stdout
+ENTRYPOINT ["/usr/bin/snapserver", "--logging.sink=stdout"]

Dockerfile

@@ -14,8 +14,7 @@ COPY ./public ./public
 
 RUN npm run build
 
-FROM nginx:alpine
-
+FROM nginx:alpine-slim
 WORKDIR /app
 
 COPY --from=build /app/build ./build

README.md

@@ -20,6 +20,9 @@ A UI built on [Snapcast](https://github.com/badaix/snapcast). I wasn't satisfied
 ### Framework
 Built with [Reactjs](https://reactjs.org/). Static files served with nginx in container.
 
+### Backend
+Reaches out to the [Snapcast JSON RPC Api](https://github.com/badaix/snapcast/blob/master/doc/json_rpc_api/control.md) using a WebSocket. See `src/utils/WebSocket.js`. Events are handled via `src/utils/Reducer.js`.
+
 ### Testing Locally
 Develop locally with Docker compose with snapcast client server built in.
 
@@ -53,8 +56,6 @@ ARG REACT_APP_THEME
 
 ## Useful Links
 
-[Snapcast JSON RPC Api](https://github.com/badaix/snapcast/blob/master/doc/json_rpc_api/control.md)
-
 [Component Library MatUI](https://mui.com/material-ui/react-button/)
 
 [Loading Animations](https://cssloaders.github.io/)

package.json

@@ -8,22 +8,18 @@
     "@canvas-fonts/comic-sans-ms": "^1.0.4",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@fontsource/changa": "^4.5.10",
+    "@fontsource/changa": "^4.5.11",
     "@fontsource/comic-neue": "^4.5.10",
     "@fontsource/sansita": "^4.5.9",
-    "@fontsource/space-grotesk": "^4.5.10",
-    "@mui/material": "^5.11.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "base-64": "^1.0.0",
+    "@fontsource/space-grotesk": "^4.5.13",
+    "@mui/material": "^5.11.8",
     "date-fns": "^2.29.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
     "react-scripts": "^5.0.1",
-    "sass": "^1.57.1",
-    "web-vitals": "^3.1.0"
+    "sass": "^1.58.0",
+    "web-vitals": "^3.1.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -48,5 +44,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3"
   }
 }

src/components/Stream/Stream.js

@@ -2,11 +2,11 @@ import { useContext } from 'react';
 import { AppContext } from '../../utils/AppContext';
 import PlayingLoader from '../PlayingLoader/PlayingLoader';
 import './Stream.scss';
-import base64 from 'base-64';
 
 const SteamIcon = ({ artData }) => {
     if (artData.extension === 'svg') {
-        const image = base64.decode(artData.data);
+
+        const image = atob(artData.data);
         return <img
             className='streamIcon'
             alt='Steam Icon'