fix: 🚑 Fix proxies on production (#38)

* fix: 🚑 Fix proxies on production

apps/spotify/src/app/app.module.ts

@@ -6,8 +6,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { MatButtonModule } from '@angular/material/button';
 import { NgxGoogleAnalyticsModule } from 'ngx-google-analytics';
 
+import {
+  SpotifyTokenInterceptor,
+  ProxyInterceptor,
+} from '@artur-ba/shared/interceptors';
 import { SharedViewModule } from '@artur-ba/shared/view';
-import { SpotifyTokenInterceptor } from '@artur-ba/shared/interceptors';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -31,6 +34,11 @@ import { LoginComponent } from './login/login.component';
       useClass: SpotifyTokenInterceptor,
       multi: true,
     },
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: ProxyInterceptor,
+      multi: true,
+    },
   ],
   bootstrap: [AppComponent],
   exports: [],

apps/spotify/src/styles/_variables.scss

@@ -18,6 +18,7 @@ $transition-animation: cubic-bezier(0.075, 0.82, 0.165, 1);
 
 $logo1x2-light: 'logo_1x2.png';
 $logo1x2-dark: 'logo_1x2_dark.png';
+$menu-height: 60px;
 
 :root {
   --bg-l5: #{lighten($light-background, 5%)};

libs/shared/interceptors/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/shared-interceptors.module';
 export * from './lib/spotify-token.interceptor';
+export * from './lib/proxy.interceptor';

libs/shared/interceptors/src/lib/proxy.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ProxyInterceptor } from './proxy.interceptor';
+
+describe('ProxyInterceptor', () => {
+  beforeEach(() =>
+    TestBed.configureTestingModule({
+      providers: [ProxyInterceptor],
+    })
+  );
+
+  it('should be created', () => {
+    const interceptor: ProxyInterceptor = TestBed.inject(ProxyInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

libs/shared/interceptors/src/lib/proxy.interceptor.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor,
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class ProxyInterceptor implements HttpInterceptor {
+  readonly proxies = ['minilyrics', 'minilyrics-proxy'];
+  readonly proxiesRegex = this.proxies.map(
+    (proxy) => new RegExp('.{2}/' + proxy)
+  );
+
+  intercept(
+    request: HttpRequest<unknown>,
+    next: HttpHandler
+  ): Observable<HttpEvent<unknown>> {
+    if (this.proxiesRegex.some((proxyRegex) => proxyRegex.test(request.url))) {
+      const dupReq = request.clone({ url: request.url.slice(3) });
+      return next.handle(dupReq);
+    }
+    return next.handle(request);
+  }
+}

libs/web/spotify/homepage/view/src/lib/homepage/homepage.component.scss

@@ -12,13 +12,17 @@
   min-height: 0;
   @include flex-1;
 }
+
 .content {
   width: 100%;
+  artur-ba-user-menu {
+    height: $menu-height;
+  }
 }
 
 .routing {
   overflow-y: auto;
-  height: 100%;
+  height: calc(100% - #{$menu-height});
   width: 100%;
   @include flex-1;
   &::ng-deep > *:not(router-outlet) {

libs/web/spotify/shared/view/src/lib/user-menu/user-menu.component.html

@@ -10,8 +10,12 @@
 <div class="user">
   <button mat-stroked-button [matMenuTriggerFor]="menu">
     <span i18n="user-menu.hi">Hi</span>
-    {{ user?.display_name }}
-    <span i18n="user-menu.user-name" *ngIf="!user?.display_name">there</span>
+    <span i18n="user-menu.user-name" *ngIf="user?.display_name">
+      {{ user?.display_name }}
+    </span>
+    <span i18n="user-menu.user-name" *ngIf="!user?.display_name"
+      >&nbsp;there</span
+    >
     <mat-icon
       aria-hidden="false"
       i18n-aria-label="user-menu.open-menu"

libs/web/spotify/shared/view/src/lib/user-menu/user-menu.component.scss

@@ -6,7 +6,9 @@
   flex-direction: row;
   justify-content: space-between;
   background-color: var(--bg);
-  padding: $padding-s $padding-m;
+  padding-top: $padding-s;
+  padding-right: $padding-m;
+  padding-left: $padding-m;
 }
 
 .navigation {

libs/web/spotify/shared/view/src/styles/shared-track-list.scss

@@ -9,6 +9,8 @@
 
 .count {
   @include shared-style;
+  width: 2ch;
+  justify-content: flex-end;
 }
 
 $image-size: 50px;
@@ -38,5 +40,5 @@ $image-size: 50px;
 
 .time {
   @include shared-style;
-  width: 40px;
+  min-width: 4ch;
 }