Merge branch 'develop'

Author: Bentroen

server/src/auth/auth.module.ts

@@ -96,12 +96,6 @@ export class AuthModule {
           useFactory: (configService: ConfigService) =>
             configService.getOrThrow<string>('JWT_REFRESH_EXPIRES_IN'),
         },
-        {
-          inject: [ConfigService],
-          provide: 'WHITELISTED_USERS',
-          useFactory: (configService: ConfigService) =>
-            configService.getOrThrow<string>('WHITELISTED_USERS'),
-        },
         {
           inject: [ConfigService],
           provide: 'MAGIC_LINK_SECRET',

server/src/auth/auth.service.ts

@@ -34,8 +34,6 @@ export class AuthService {
     private readonly JWT_REFRESH_SECRET: string,
     @Inject('JWT_REFRESH_EXPIRES_IN')
     private readonly JWT_REFRESH_EXPIRES_IN: string,
-    @Inject('WHITELISTED_USERS')
-    private readonly WHITELISTED_USERS: string,
     @Inject('APP_DOMAIN')
     private readonly APP_DOMAIN?: string,
   ) {}
@@ -83,10 +81,6 @@ export class AuthService {
       profileImage: user.photos[0].value,
     };
 
-    if (!(await this.verifyWhitelist(profile.username))) {
-      return res.redirect(this.FRONTEND_URL + '/login');
-    }
-
     // verify if user exists
     const user_registered = await this.verifyAndGetUser(profile);
 
@@ -123,23 +117,6 @@ export class AuthService {
     return user_registered;
   }
 
-  private async verifyWhitelist(username: string) {
-    const whitelist = this.WHITELISTED_USERS;
-
-    if (whitelist.length === 0) {
-      return true;
-    }
-
-    if (whitelist.includes(username.toLowerCase())) {
-      this.logger.log(`User ${username} is whitelisted; approving login`);
-      return true;
-    }
-
-    this.logger.log(`User ${username} is not whitelisted; rejecting login`);
-
-    return false;
-  }
-
   public async githubLogin(req: Request, res: Response) {
     const user = req.user as GithubAccessToken;
     const { profile } = user;
@@ -156,10 +133,6 @@ export class AuthService {
 
     const email = response.data.filter((email) => email.primary)[0].email;
 
-    if (!(await this.verifyWhitelist(profile.username))) {
-      return res.redirect(this.FRONTEND_URL + '/login');
-    }
-
     const user_registered = await this.verifyAndGetUser({
       username: profile.username,
       email: email,
@@ -180,10 +153,6 @@ export class AuthService {
       profileImage: profilePictureUrl,
     };
 
-    if (!(await this.verifyWhitelist(profile.username))) {
-      return res.redirect(this.FRONTEND_URL + '/login');
-    }
-
     // verify if user exists
     const user_registered = await this.verifyAndGetUser(profile);
 

shared/features/thumbnail/canvasFactory.ts

@@ -3,24 +3,7 @@ import type Path from 'path';
 
 import type NapiRs from '@napi-rs/canvas';
 
-/*
-import type {
-  Canvas as NapiCanvas,
-  Image as NapiImage,
-  GlobalFonts as NapiGlobalFonts,
-} from '@napi-rs/canvas';
-*/
-
-export interface CanvasUtils {
-  createCanvas(width: number, height: number): any;
-  loadImage(src: string): Promise<any>;
-  getPath(filename: string): string | URL;
-  useFont(): void;
-  saveToImage(canvas: HTMLCanvasElement | NapiRs.Canvas): Promise<Uint8Array>;
-  noteBlockImage: Promise<any> | any;
-  DrawingCanvas: any;
-  RenderedImage: any;
-}
+import { CanvasUtils } from './types';
 
 let canvasUtils: CanvasUtils;
 
@@ -39,24 +22,24 @@ if (typeof document === 'undefined') {
     const workingDir = process.cwd();
     const fullPath = path.join(workingDir, filename.split('/').join(path.sep));
 
-    return 'file://' + fullPath;
+    return fullPath;
   };
 
   const saveToImage = (canvas: NapiRs.Canvas) => canvas.encode('png');
 
   const useFont = () => {
-    GlobalFonts.registerFromPath(
-      getPath('assets/fonts/Lato-Regular.ttf').toString(),
-      'Lato',
-    );
+    const path = getPath('assets/fonts/Lato-Regular.ttf').toString();
+    console.log('Font path: ', path);
+
+    GlobalFonts.registerFromPath(path, 'Lato');
   };
 
   let noteBlockImage: Promise<any>;
 
   try {
-    noteBlockImage = nodeLoadImage(
-      new URL(getPath('assets/img/note-block-grayscale.png')),
-    );
+    const path = getPath('assets/img/note-block-grayscale.png');
+
+    noteBlockImage = nodeLoadImage(path);
   } catch (error) {
     console.error('Error loading image: ', error);
     noteBlockImage = Promise.reject(error);
@@ -102,7 +85,9 @@ if (typeof document === 'undefined') {
     });
   };
 
-  const noteBlockImage = loadImage(getPath('/img/note-block-grayscale.png'));
+  const noteBlockImagePath = getPath('/img/note-block-grayscale.png');
+
+  const noteBlockImage = loadImage(noteBlockImagePath);
 
   canvasUtils = {
     createCanvas,

shared/features/thumbnail/index.ts

@@ -1,124 +1,16 @@
 import {
-  DrawingCanvas,
-  RenderedImage,
   createCanvas,
   noteBlockImage,
   saveToImage,
+  useFont,
 } from './canvasFactory';
-import { NoteQuadTree } from '../song/notes';
+import { Canvas, DrawParams } from './types';
+import { getKeyText, instrumentColors, isDarkColor, tintImage } from './utils';
 
 export { bgColorsArray } from './colors';
+useFont();
 
-interface DrawParams {
-  notes: NoteQuadTree;
-  startTick: number;
-  startLayer: number;
-  zoomLevel: number;
-  backgroundColor: string;
-  canvasWidth?: number;
-  canvasHeight?: number;
-  imgWidth: number;
-  imgHeight: number;
-}
-
-type Canvas = typeof DrawingCanvas;
-type Image = typeof RenderedImage;
-
-const instrumentColors = [
-  '#1964ac',
-  '#3c8e48',
-  '#be6b6b',
-  '#bebe19',
-  '#9d5a98',
-  '#572b21',
-  '#bec65c',
-  '#be19be',
-  '#52908d',
-  '#bebebe',
-  '#1991be',
-  '#be2328',
-  '#be5728',
-  '#19be19',
-  '#be1957',
-  '#575757',
-];
-
-const tintedImages: Record<string, Canvas> = {};
-
-// Function to apply tint to an image
-function tintImage(image: Image, color: string): Canvas {
-  if (tintedImages[color]) {
-    return tintedImages[color];
-  }
-
-  const canvas = createCanvas(image.width, image.height);
-  const ctx = canvas.getContext('2d');
-
-  if (!ctx) {
-    throw new Error('Could not get canvas context');
-  }
-
-  // Fill background with the color
-  ctx.fillStyle = color;
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-  // Apply the note block texture to the color
-  ctx.globalCompositeOperation = 'hard-light';
-  ctx.globalAlpha = 0.67;
-  ctx.drawImage(image, 0, 0);
-
-  // Reset canvas settings
-  ctx.globalCompositeOperation = 'source-over';
-  ctx.globalAlpha = 1;
-
-  tintedImages[color] = canvas;
-
-  return canvas;
-}
-
-// Function to convert key number to key text
-function getKeyText(key: number): string {
-  const octaves = Math.floor((key + 9) / 12);
-
-  const notes = [
-    'C',
-    'C#',
-    'D',
-    'D#',
-    'E',
-    'F',
-    'F#',
-    'G',
-    'G#',
-    'A',
-    'A#',
-    'B',
-  ];
-
-  const note = notes[(key + 9) % 12];
-
-  return `${note}${octaves}`;
-}
-
-function getLuma(color: string): number {
-  // source: https://stackoverflow.com/a/12043228/9045426
-
-  const c = color?.substring(1) || ''; // strip #
-  const rgb = parseInt(c, 16); // convert rrggbb to decimal
-  const r = (rgb >> 16) & 0xff; // extract red
-  const g = (rgb >> 8) & 0xff; // extract green
-  const b = (rgb >> 0) & 0xff; // extract blue
-
-  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
-
-  return luma;
-}
-
-function isDarkColor(color: string, threshold = 40): boolean {
-  return getLuma(color) < threshold;
-}
-
-export async function swap(src: Canvas, dst: Canvas) {
+export const swap = async (src: Canvas, dst: Canvas) => {
   /**
    * Run a `drawFunction` that returns a canvas and draw it to the passed `canvas`.
    *
@@ -127,7 +19,6 @@ export async function swap(src: Canvas, dst: Canvas) {
    *
    * @returns Nothing
    */
-
   // Get canvas context
   const ctx = dst.getContext('2d');
 
@@ -137,9 +28,9 @@ export async function swap(src: Canvas, dst: Canvas) {
 
   // Swap the canvas
   ctx.drawImage(src, 0, 0);
-}
+};
 
-export async function drawNotesOffscreen({
+export const drawNotesOffscreen = async ({
   notes,
   startTick,
   startLayer,
@@ -149,7 +40,7 @@ export async function drawNotesOffscreen({
   //canvasHeight,
   imgWidth = 1280,
   imgHeight = 768,
-}: DrawParams) {
+}: DrawParams) => {
   // Create new offscreen canvas
   const canvas = createCanvas(imgWidth, imgHeight);
   const ctx = canvas.getContext('2d');
@@ -235,9 +126,9 @@ export async function drawNotesOffscreen({
   });
 
   return canvas;
-}
+};
 
-export async function drawToImage(params: DrawParams): Promise<Buffer> {
+export const drawToImage = async (params: DrawParams): Promise<Buffer> => {
   let canvas;
   const { imgWidth, imgHeight } = params;
 
@@ -251,4 +142,4 @@ export async function drawToImage(params: DrawParams): Promise<Buffer> {
   // Convert to Buffer
   const buffer = Buffer.from(byteArray);
   return buffer;
-}
+};

shared/features/thumbnail/types.ts

@@ -0,0 +1,37 @@
+import type NapiRs from '@napi-rs/canvas';
+
+import { DrawingCanvas, RenderedImage } from './canvasFactory';
+import { NoteQuadTree } from '../song/notes';
+
+export interface DrawParams {
+  notes: NoteQuadTree;
+  startTick: number;
+  startLayer: number;
+  zoomLevel: number;
+  backgroundColor: string;
+  canvasWidth?: number;
+  canvasHeight?: number;
+  imgWidth: number;
+  imgHeight: number;
+}
+
+export type Canvas = typeof DrawingCanvas;
+
+export type Image = typeof RenderedImage; /*
+import type {
+  Canvas as NapiCanvas,
+  Image as NapiImage,
+  GlobalFonts as NapiGlobalFonts,
+} from '@napi-rs/canvas';
+*/
+
+export interface CanvasUtils {
+  createCanvas(width: number, height: number): any;
+  loadImage(src: string): Promise<any>;
+  getPath(filename: string): string | URL;
+  useFont(): void;
+  saveToImage(canvas: HTMLCanvasElement | NapiRs.Canvas): Promise<Uint8Array>;
+  noteBlockImage: Promise<any> | any;
+  DrawingCanvas: any;
+  RenderedImage: any;
+}