added docker files for deployment

README.md

@@ -1,20 +1,20 @@
-# osu! PWA player
+# osu! PWA player
-
+
-Website to listen to ur beatmaps and Collections
+Website to listen to ur beatmaps and Collections
-[https://music.illegalesachen.download/](https://music.illegalesachen.download/)
+[https://music.illegalesachen.download/](https://music.illegalesachen.download/)
-
+
-## Requirements
+## Requirements
-- [cloudflared](https://github.com/cloudflare/cloudflared/releases/)
+- [cloudflared](https://github.com/cloudflare/cloudflared/releases/)
-- [.net 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0)
+- [.net 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0)
-
+
-## Tutorial
+## Tutorial
-1. Install the Requirements
+1. Install the Requirements
-2. Download the backend, run it and follow the instruction presentend to u in the terminal
+2. Download the backend, run it and follow the instruction presentend to u in the terminal
-3. Login with ur osu account on the Website
+3. Login with ur osu account on the Website
-4. Add the Website to ur Homescreen
+4. Add the Website to ur Homescreen
-5. Enjoy
+5. Enjoy
-
+
-### FAQ
+### FAQ
-- Yes, ur pc needs to run while u want to listen
+- Yes, ur pc needs to run while u want to listen
-- How does it work -> [How it works](docs/README.md)
+- How does it work -> [How it works](docs/README.md)
 - I dont want to use the website but my own -> hit me up ill help u set it up

docs/README.md

@@ -1,13 +1,13 @@
-# How it works
+# How it works
-To ensure users have secure access to their beatmaps through a shared website and prevent unauthorized users from accessing the Beatmaps. The following steps are taken. 
+To ensure users have secure access to their beatmaps through a shared website and prevent unauthorized users from accessing the Beatmaps. The following steps are taken. 
-
+
-![Step 1](image3.png) <div align="center"> Arcitectur Diagramm</div>
+![Step 1](image3.png) <div align="center"> Arcitectur Diagramm</div>
-
+
-The process begins by authenticating both the locally running web server (which exposes the beatmaps and collections) and the frontend interface with a proxy server. This ensures that only authorized users can access the beatmaps.
+The process begins by authenticating both the locally running web server (which exposes the beatmaps and collections) and the frontend interface with a proxy server. This ensures that only authorized users can access the beatmaps.
-After authentication, the backend (the local web server) sends its quicktunnel base address to the proxy, which assosiates the endpoint with the logged in user.
+After authentication, the backend (the local web server) sends its quicktunnel base address to the proxy, which assosiates the endpoint with the logged in user.
-![Step 2](image2.png) <div align="center"> Authentication Process</div>
+![Step 2](image2.png) <div align="center"> Authentication Process</div>
-
+
-Now the Frontend can receive the quicktunnel base address and start requesting beatmaps, collection and audio.
+Now the Frontend can receive the quicktunnel base address and start requesting beatmaps, collection and audio.
-![Step 3](image.png) <div align="center"> Autorized Usage</div>
+![Step 3](image.png) <div align="center"> Autorized Usage</div>
-
+
-This system is architected to provide convenient and consistent access to beatmaps by eliminating the need to worry about the changing domain names of Cloudflare quicktunnels. Aswell as the possiblity to share ur beatmaps with friends.
+This system is architected to provide convenient and consistent access to beatmaps by eliminating the need to worry about the changing domain names of Cloudflare quicktunnels. Aswell as the possiblity to share ur beatmaps with friends.

frontend/Dockerfile

@@ -0,0 +1,20 @@
+FROM node:18 AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+# Copy the rest of the source code
+COPY . .
+
+RUN npm run build-only
+
+FROM nginx:alpine
+
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+EXPOSE 5001
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/src/stores/audioStore.ts

@@ -20,7 +20,7 @@ export const useAudioStore = defineStore('audioStore', () => {
   const repeat = ref(false);
 
   const activeCollection = ref<Song[]>([]);
-  const currentSong = ref<Song>(null);
+  const currentSong = ref<Song | null>(null);
 
   function saveSongToLocalStorage(song: Song) {
     localStorage.setItem('lastPlayedSong', JSON.stringify(song));

frontend/src/stores/userStore.ts

@@ -7,9 +7,9 @@ export const useUserStore = defineStore('userStore', () => {
   const baseUrl = ref('https://service.illegalesachen.download/')
   const proxyUrl = ref('https://proxy.illegalesachen.download/')
 
-  const User = ref<Me>(null)
+  const User = ref<Me | null>(null)
 
-  function saveUser(user: Me) {
+  function saveUser(user: Me | null) {
     localStorage.setItem('activeUser', JSON.stringify(user));
   }
 
@@ -18,7 +18,7 @@ export const useUserStore = defineStore('userStore', () => {
     return user ? JSON.parse(user) : null;
   }
 
-  function setUser(user: Me) {
+  function setUser(user: Me | null) {
     User.value = user;
     saveUser(user)
   }

frontend/src/views/MeView.vue

@@ -15,8 +15,7 @@ const borderColor = ref('');
 const loginStatus = ref('Login');
 
 function update() {
-  var input = document.getElementById("url-input") as HTMLAudioElement;
+  var input = document.getElementById("url-input") as HTMLInputElement;
-  console.log(input.value)
   userStore.baseUrl = input.value;
 
 }

proxy/Dockerfile

@@ -0,0 +1,20 @@
+FROM golang:1.23 AS builder
+
+WORKDIR /app
+
+COPY go.mod go.sum ./
+RUN go mod download
+
+COPY . .
+
+RUN CGO_ENABLED=0 GOOS=linux go build -o main .
+
+FROM gcr.io/distroless/base-debian11
+
+WORKDIR /app
+
+COPY --from=builder /app/main .
+
+EXPOSE 80
+
+CMD ["./main"]