add deprecation notice

Reviewed-on: #10

-ignore .gitea/workflows/publish.yaml

@@ -1,15 +0,0 @@
-name: Gitea Actions Demo
-run-name: ${{ github.actor }} is testing out Gitea Actions
-on: [push]
-jobs:
-  Explore-Gitea-Actions:
-    runs-on: ubuntu-20.04
-    steps:
-      - run: echo "The job was automatically triggered by a ${{ github.event_name }} event."
-      - run: echo "This job is now running on a ${{ runner.os }} server hosted by Gitea!"
-      - run: echo "The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
-      - name: Check out repository code
-        uses: actions/checkout@v3
-      - run: echo "The ${{ github.repository }} repository has been cloned to the runner."
-      - run: echo "The workflow is now ready to test your code on the runner."
-      - run: echo "This job's status is ${{ job.status }}."

.drone.yml

@@ -1,71 +0,0 @@
-kind: pipeline
-type: docker
-name: default
-
-steps:
-  - name: restore-cache
-    image: drillster/drone-volume-cache
-    volumes:
-      - name: cache
-        path: /cache
-    settings:
-      restore: true
-      mount:
-        - ./node_modules
-
-  - name: install depends
-    image: node:18
-    commands:
-      - npm install
-
-  - name: rebuild-cache
-    image: drillster/drone-volume-cache
-    volumes:
-      - name: cache
-        path: /cache
-    settings:
-      rebuild: true
-      mount:
-        - ./node_modules
-
-  # Other branches
-  - name: test
-    image: node:18
-    when:
-      branch:
-        exclude:
-          - main
-    commands:
-      - npm run lint
-
-  # Main branches
-  - name: docker
-    image: plugins/docker
-    when:
-      branch:
-        - main
-    settings:
-      username:
-        from_secret: dockerhub_username
-      password:
-        from_secret: dockerhub_password
-      repo: fascinated/beatsaber-overlay
-      tags: latest
-
-volumes:
-  - name: cache
-    host:
-      path: /tmp/cache
-# deploy:
-#   image: alpine:latest
-#   stage: deploy
-#   tags:
-#   script:
-#     - chmod og= $ID_RSA
-#     - apk update && apk add openssh-client
-#     - ssh -i $ID_RSA -o StrictHostKeyChecking=no $SERVER_USER@$SERVER_IP "cd /home/overlay && docker compose pull && docker compose up -d && docker image prune -f"
-#   environment:
-#     name: production
-#     url: https://bs-overlay.fascinated.cc
-#   only:
-#     - main

.env-example

@@ -1,10 +1,10 @@
-REACT_APP_HTTP_PROXY=https://proxy.fascinated.cc
+REACT_APP_HTTP_PROXY=<https://proxy.fascinated.cc>
 
 REACT_APP_SITE_NAME=BeatSaber Overlay
 REACT_APP_SITE_TITLE=BeatSaber Overlay - Simple and easy to use BeatSaber overlay
 REACT_APP_SITE_DESCRIPTION=ScoreSaber and BeatLeader overlay for Twitch streamers - Elevate your Beat Saber streams with our professional, customizable overlay that displays your real-time scores, rankings, and leaderboard information for your viewers.
 REACT_APP_SITE_COLOR=0EBFE9
-REACT_APP_SITE_URL=http://localhost:3000
+REACT_APP_SITE_URL=<http://localhost:3000>
 
 REDIS_PORT=6379
 REDIS_HOST=localhost

.eslintrc.json

@@ -1,3 +1,4 @@
 {
+  "parser": "@babel/eslint-parser",
   "extends": "next/core-web-vitals"
 }

.gitea/workflows/publish.yaml

@@ -1,15 +1,58 @@
-name: Gitea Actions Demo
-run-name: ${{ github.actor }} is testing out Gitea Actions
-on: [push]
+name: Publish
+
+on:
+  push:
+    branches:
+      - "main"
+      - "development"
+
 jobs:
-  Explore-Gitea-Actions:
-    runs-on: ubuntu-20.04
+  docker:
+    runs-on: ubuntu-22.04
+    container: fascinated/docker-images:node-latest
     steps:
-      - run: echo "The job was automatically triggered by a ${{ github.event_name }} event."
-      - run: echo "This job is now running on a ${{ runner.os }} server hosted by Gitea!"
-      - run: echo "The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
-      - name: Check out repository code
-        uses: actions/checkout@v3
-      - run: echo "The ${{ github.repository }} repository has been cloned to the runner."
-      - run: echo "The workflow is now ready to test your code on the runner."
-      - run: echo "This job's status is ${{ job.status }}."
+      - name: Get branch name
+        id: branch-name
+        uses: tj-actions/branch-names@v7
+
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Login to Repo
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.REPO_USERNAME }}
+          password: ${{ secrets.REPO_TOKEN }}
+
+      - name: Restore Docker Build Cache
+        uses: actions/cache@v3
+        id: build-cache
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx
+
+      - name: Build and Push (Latest)
+        uses: docker/build-push-action@v5
+        if: steps.branch-name.outputs.current_branch == 'main'
+        with:
+          push: true
+          context: .
+          tags: fascinated/beatsaber-overlay:latest
+
+      - name: Build and Push (Other Branches)
+        uses: docker/build-push-action@v5
+        if: steps.branch-name.outputs.current_branch != 'main'
+        with:
+          push: true
+          context: .
+          tags: fascinated/beatsaber-overlay:${{ steps.branch-name.outputs.current_branch }}
+
+      - name: Save Docker Build Cache
+        id: build-cache
+        uses: actions/cache/save@v3
+        with:
+          path: /tmp/.buildx-caches
+          key: ${{ runner.os }}-buildx

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage
@@ -38,3 +39,6 @@ yarn-error.log*
 
 # IntelliJ
 .idea
+
+# Ignore Yarn
+yarn.lock

Dockerfile

@@ -1,62 +1,39 @@
-# Install dependencies only when needed
-FROM node:19 AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-#RUN apk add libc6-compat
+FROM fascinated/docker-images:node-pnpm-latest AS base
+
+# Install depends
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
 WORKDIR /app
+COPY package.json* pnpm-lock.yaml* ./
+RUN pnpm install --production --frozen-lockfile --quiet
 
-# Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-
-# Copy cached files
-#COPY node_modules ./
-
-#RUN npm i
-
-RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
-
-# Rebuild the source code only when needed
-FROM node:19 AS builder
+# Build from source
+FROM base AS builder
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-
 ENV NEXT_TELEMETRY_DISABLED 1
+RUN pnpm build
 
-# Build the project
-RUN yarn build 
-
-# Production image, copy all the files and run next
-FROM node:19-alpine AS runner
+# Run the app
+FROM base AS runner
 WORKDIR /app
 
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 
-RUN addgroup -g 1001 -S nodejs
-RUN adduser -S nextjs -u 1001
-
 COPY --from=builder /app/public ./public
 
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/next.config.js ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-COPY --from=builder --chown=nextjs:nodejs /app/public ./.next/static
+COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+COPY --from=builder /app/public ./.next/static
 
 RUN npm i -g @beam-australia/react-env
 
-RUN chown -R nextjs:nodejs /app
-
-USER nextjs
-
 EXPOSE 3000
-
+ENV HOSTNAME "0.0.0.0"
 ENV PORT 3000
-
-CMD npx react-env --env APP_ENV && yarn start
+CMD npx react-env --env APP_ENV && pnpm start

README.md

@@ -1,10 +1,8 @@
 # BeatSaber Overlay with real-time data from HttpSiraStatus
 
-[![Build Status](https://drone.fascinated.cc/api/badges/Fascinated/beatsaber-overlay/status.svg)](https://drone.fascinated.cc/Fascinated/beatsaber-overlay)
-
-The project is on my [Gitea](https://git.fascinated.cc/Fascinated/beatsaber-overlay) now, but the repo will be kept in sync here. <br />
+The project is on my [Gitea](https://git.fascinated.cc/Fascinated/beatsaber-overlay) now, but the repo will be kept in sync on GitHub. <br />
 The public url to view/use: <https://bs-overlay.fascinated.cc> <br />
-Need help? Feel free to message me at: Fascinated#7668
+Need help? Feel free to message me on Discord: Fascinated#7668 or Matrix: @fascinated:matrix.fascinated.cc
 
 ## Usage
 
@@ -15,13 +13,6 @@ Go to the [Wiki](https://git.fascinated.cc/Fascinated/beatsaber-overlay/wiki/Usa
 ![Overlay](./assets/overlay.png)
 ![Builder Menu](./assets/builder.png)
 
-## Todo
-
-- Add toggle for showing pp
-- Change the song time to a circular style in the song art
-- Add overall stream stats (avg acc, misses, highest combo)
-- Add option to scale the ui using css scale
-
 ## Getting started with developent
 
 - Clone the repo

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   beatsaber-overlay:
-    image: fascinated/beatsaber-overlay:latest
+    image: git.fascinated.cc/fascinated/beatsaber-overlay:latest
     restart: always
     env_file:
       - .env.production

package.json

@@ -9,32 +9,36 @@
     "update-depends": "npm-check -u"
   },
   "dependencies": {
+    "@babel/eslint-parser": "^7.22.15",
     "@beam-australia/react-env": "^3.1.1",
-		"@emotion/cache": "^11.10.5",
-		"@emotion/server": "^11.10.0",
-		"@nextui-org/react": "^1.0.0-beta.12",
-		"axios": "^1.3.4",
-		"core-js-pure": "^3.29.1",
-		"critters": "^0.0.16",
-		"ioredis": "^5.3.1",
-		"next": "^13.2.4",
-		"next-seo": "^5.15.0",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/server": "^11.11.0",
+    "@nextui-org/react": "1.0.0-beta.10",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
+    "axios": "^1.5.1",
+    "core-js-pure": "^3.33.0",
+    "critters": "^0.0.20",
+    "ioredis": "^5.3.2",
+    "next": "^13.5.4",
+    "next-seo": "^6.1.0",
     "next-themes": "^0.2.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-		"react-country-flag": "^3.0.2",
+    "react-country-flag": "^3.1.0",
     "react-dom": "^18.2.0",
-		"react-toastify": "^9.1.2",
-		"sharp": "^0.32.0",
+    "react-toastify": "^9.1.3",
+    "sharp": "^0.32.6",
     "websocket": "^1.0.34",
-		"zustand": "^4.3.6"
+    "zustand": "^4.4.3"
   },
   "devDependencies": {
-		"@types/node": "^18.15.10",
-		"@types/react": "^18.0.29",
-		"@types/websocket": "^1.0.5",
-		"eslint": "^8.36.0",
-		"eslint-config-next": "^13.2.4",
-		"typescript": "^5.0.2"
+    "@types/node": "^20.8.4",
+    "@types/react": "^18.2.28",
+    "@types/websocket": "^1.0.7",
+    "eslint": "^8.51.0",
+    "eslint-config-next": "^13.5.4",
+    "npm-check": "^6.0.1",
+    "typescript": "^5.2.2"
   }
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "local>Fascinated/renovate-config"
+  ]
+}

src/components/ScoreStats.js

@@ -61,13 +61,15 @@ export default function ScoreStats() {
 								width={30}
 								height={30}
 								src="https://cdn.fascinated.cc/Hc1eD7QY.png"
+								unoptimized
+								alt="BeatLeader logo"
 							></Image>
 							<p
 								style={{
 									marginLeft: "5px",
 								}}
 							>
-								{scoreSaberPP.toFixed(0)}pp
+								{scoreSaberPP.pp.toFixed(0)}pp
 							</p>
 						</div>
 					) : null}
@@ -82,6 +84,8 @@ export default function ScoreStats() {
 								width={30}
 								height={30}
 								src="https://cdn.fascinated.cc/Wo9JRAfD.png"
+								unoptimized
+								alt="BeatLeader logo"
 							></Image>
 							<div>
 								{Object.entries(beatLeaderPP).map((value, i) => {

src/components/Settings.js

@@ -1,8 +1,8 @@
 import {
-	Avatar as NextAvatar,
-	changeTheme,
 	Dropdown,
+	Avatar as NextAvatar,
 	Text,
+	changeTheme,
 	useTheme,
 } from "@nextui-org/react";
 
@@ -27,6 +27,7 @@ const Avatar = (props) => {
 						as="button"
 						color="primary"
 						src={avatarUrl}
+						alt="Account avatar"
 					/>
 				</Dropdown.Trigger>
 				<Dropdown.Menu aria-label="Static Actions">

src/helpers/beatSaverHelpers.ts

@@ -35,11 +35,7 @@ export async function getMapData(hash: string): Promise<MapData | undefined> {
   }
 
   const before = Date.now();
-	const response = await axios.get(BEATSAVER_MAP_API.replace("%s", mapHash), {
-		headers: {
-			"X-Requested-With": "BeatSaber Overlay",
-		},
-	});
+  const response = await axios.get(BEATSAVER_MAP_API.replace("%s", mapHash));
   if (response.status === 404) {
     return undefined;
   }

src/helpers/web/getPlayerData.js

@@ -3,12 +3,7 @@ import LeaderboardType from "../../consts/LeaderboardType";
 
 export async function getPlayerData(leaderboardType, playerId) {
   const data = await axios.get(
-		LeaderboardType[leaderboardType].ApiUrl.PlayerData.replace("%s", playerId),
-		{
-			headers: {
-				"x-requested-with": "BeatSaber Overlay",
-			},
-		}
+    LeaderboardType[leaderboardType].ApiUrl.PlayerData.replace("%s", playerId)
   );
   return data;
 }

src/pages/_app.js

@@ -40,7 +40,6 @@ function MyApp({ Component, pageProps }) {
         }}
         twitter={{
           cardType: "summary_large_image",
-					// site: "@BeatSaber Overlay",
         }}
       />
       <NextThemesProvider

src/pages/api/beatleader/data.js

@@ -41,12 +41,7 @@ export default async function handler(req, res) {
 
   const before = Date.now();
   const reesponse = await axios.get(
-		WebsiteTypes.BeatLeader.ApiUrl.MapData.replace("%h", mapHash),
-		{
-			headers: {
-				"X-Requested-With": "BeatSaber Overlay",
-			},
-		}
+    WebsiteTypes.BeatLeader.ApiUrl.MapData.replace("%h", mapHash)
   );
   if (reesponse.status === 404) {
     return res.status(404).json({

src/pages/api/scoresaber/data.js

@@ -40,12 +40,7 @@ export default async function handler(req, res) {
     WebsiteTypes.ScoreSaber.ApiUrl.MapData.replace("%h", mapHash).replace(
       "%d",
       diffToScoreSaberDiff(difficulty)
-		),
-		{
-			headers: {
-				"X-Requested-With": "BeatSaber Overlay",
-			},
-		}
+    )
   );
   if (response.status === 404) {
     return res.status(404).json({

src/pages/index.js

@@ -190,7 +190,6 @@ export default class Home extends Component {
 						<Grid xs={12} lg={9}>
 							<Card>
 								<Card.Body>
-									<Spacer y={1.2} />
 									<Text>
 										How to use{" "}
 										<span>
@@ -360,9 +359,9 @@ export default class Home extends Component {
 										}}
 									>
 										<Link href="https://git.fascinated.cc/Fascinated/beatsaber-overlay">
-											<a>
-												If you like this project and want to support it. Come
-												check out the project on Gitea!
+											<a href="https://git.fascinated.cc/Fascinated/beatsaber-overlay">
+												If you like this project and want to help me make it
+												better, come check out the project on Gitea!
 											</a>
 										</Link>
 									</Text>

src/pages/overlay.js

@@ -63,6 +63,21 @@ export default function Overlay(props) {
       <SongInfo />
       <ScoreStats />
       <CutStats />
+
+      <p
+        style={{
+          fontSize: 50,
+          position: "absolute",
+          top: 0,
+          right: 0,
+          paddingRight: "10px",
+        }}
+      >
+        This overlay is deprecated use:{" "}
+        <a href="https://ssr.fascinated.cc/overlay/builder">
+          https://ssr.fascinated.cc/overlay/builder
+        </a>
+      </p>
     </div>
   );
 }

src/store/playerDataStore.ts

@@ -30,11 +30,7 @@ export const usePlayerDataStore = create<PlayerDataState>()((set) => ({
     const apiUrl = Utils.getWebsiteApi(
       leaderboardType
     ).ApiUrl.PlayerData.replace("%s", playerId);
-		const response = await axios.get(apiUrl, {
-			headers: {
-				"x-requested-with": "BeatSaber Overlay",
-			},
-		});
+    const response = await axios.get(apiUrl);
     if (response.status !== 200) {
       return;
     }

src/store/songDataStore.ts

@@ -154,6 +154,8 @@ export const useSongDataStore = create<SongDataState>()((set) => ({
 		}
 		const { bsr, mapArt } = mapDataresponse.data.data;
 
+		console.log(scoreSaberLeaderboardData);
+
 		set({
 			isLoading: false,
 			hasError: hasError,

src/utils/utils.js

@@ -20,11 +20,7 @@ export default class Utils {
   }
 
   static async isLeaderboardValid(url, steamId) {
-		const response = await axios.get(url.replace("%s", steamId), {
-			headers: {
-				"X-Requested-With": "BeatSaber Overlay",
-			},
-		});
+    const response = await axios.get(url.replace("%s", steamId));
     if (response.status === 429) {
       return true; // Just assume it's true is we are rate limited
     }