From 081aedb51fc97265e1b0d9d1ca0b0a642c436e5b Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Wed, 28 Feb 2024 11:37:27 +0700
Subject: [PATCH] feat: use global constant for demo mode

---
 ...editController.php => FetchDemoCreditsController.php} | 2 +-
 resources/assets/js/components/auth/LoginForm.vue        | 9 ++++-----
 .../assets/js/components/meta/AboutKoelModal.spec.ts     | 5 +++--
 resources/assets/js/components/meta/AboutKoelModal.vue   | 3 +--
 .../js/components/profile-preferences/ProfileForm.vue    | 8 +++++---
 resources/assets/js/components/screens/AlbumScreen.vue   | 2 +-
 .../assets/js/components/ui/ArtistAlbumScreenTabs.vue    | 4 ++++
 resources/assets/js/env.d.ts                             | 4 ----
 resources/assets/js/types.d.ts                           | 1 +
 resources/assets/js/utils/common.ts                      | 5 -----
 resources/assets/sass/partials/_shared.scss              | 1 +
 resources/views/base.blade.php                           | 1 +
 routes/api.base.php                                      | 4 ++--
 13 files changed, 24 insertions(+), 25 deletions(-)
 rename app/Http/Controllers/API/{FetchDemoCreditController.php => FetchDemoCreditsController.php} (87%)

diff --git a/app/Http/Controllers/API/FetchDemoCreditController.php b/app/Http/Controllers/API/FetchDemoCreditsController.php
similarity index 87%
rename from app/Http/Controllers/API/FetchDemoCreditController.php
rename to app/Http/Controllers/API/FetchDemoCreditsController.php
index 82a462c1..aa0a94da 100644
--- a/app/Http/Controllers/API/FetchDemoCreditController.php
+++ b/app/Http/Controllers/API/FetchDemoCreditsController.php
@@ -6,7 +6,7 @@ use App\Http\Controllers\Controller;
 use Illuminate\Support\Facades\File;
 use Throwable;
 
-class FetchDemoCreditController extends Controller
+class FetchDemoCreditsController extends Controller
 {
     public function __invoke()
     {
diff --git a/resources/assets/js/components/auth/LoginForm.vue b/resources/assets/js/components/auth/LoginForm.vue
index 7a7916a4..465f01e1 100644
--- a/resources/assets/js/components/auth/LoginForm.vue
+++ b/resources/assets/js/components/auth/LoginForm.vue
@@ -29,8 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { isDemo } from '@/utils'
+import { ref } from 'vue'
 import { authService } from '@/services'
 
 import Btn from '@/components/ui/Btn.vue'
@@ -42,10 +41,10 @@ const DEMO_ACCOUNT = {
   password: 'demo'
 }
 
-const canResetPassword = window.MAILER_CONFIGURED && !isDemo()
+const canResetPassword = window.MAILER_CONFIGURED && !window.IS_DEMO
 
-const email = ref(isDemo() ? DEMO_ACCOUNT.email : '')
-const password = ref(isDemo() ? DEMO_ACCOUNT.password : '')
+const email = ref(window.IS_DEMO ? DEMO_ACCOUNT.email : '')
+const password = ref(window.IS_DEMO ? DEMO_ACCOUNT.password : '')
 const failed = ref(false)
 const showingForgotPasswordForm = ref(false)
 
diff --git a/resources/assets/js/components/meta/AboutKoelModal.spec.ts b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
index b5c72aad..878af6da 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.spec.ts
+++ b/resources/assets/js/components/meta/AboutKoelModal.spec.ts
@@ -32,8 +32,7 @@ new class extends UnitTestCase {
 
     it('shows demo notation', async () => {
       const getMock = this.mock(http, 'get').mockResolvedValue([])
-      // @ts-ignore
-      import.meta.env.VITE_KOEL_ENV = 'demo'
+      window.IS_DEMO = true
 
       this.renderComponent()
 
@@ -41,6 +40,8 @@ new class extends UnitTestCase {
         screen.getByTestId('demo-credits')
         expect(getMock).toHaveBeenCalledWith('demo/credits')
       })
+
+      window.IS_DEMO = false
     })
   }
 }
diff --git a/resources/assets/js/components/meta/AboutKoelModal.vue b/resources/assets/js/components/meta/AboutKoelModal.vue
index a0245351..5cd810b9 100644
--- a/resources/assets/js/components/meta/AboutKoelModal.vue
+++ b/resources/assets/js/components/meta/AboutKoelModal.vue
@@ -67,7 +67,6 @@
 <script lang="ts" setup>
 import { orderBy } from 'lodash'
 import { onMounted, ref } from 'vue'
-import { isDemo } from '@/utils'
 import { useAuthorization, useKoelPlus, useNewVersionNotification } from '@/composables'
 import { http } from '@/services'
 
@@ -96,7 +95,7 @@ const emit = defineEmits<{ (e: 'close'): void }>()
 const close = () => emit('close')
 
 onMounted(async () => {
-  credits.value = isDemo() ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : null
+  credits.value = window.IS_DEMO ? orderBy(await http.get<DemoCredits[]>('demo/credits'), 'name') : null
 })
 </script>
 
diff --git a/resources/assets/js/components/profile-preferences/ProfileForm.vue b/resources/assets/js/components/profile-preferences/ProfileForm.vue
index 6105f360..63e223ab 100644
--- a/resources/assets/js/components/profile-preferences/ProfileForm.vue
+++ b/resources/assets/js/components/profile-preferences/ProfileForm.vue
@@ -46,7 +46,7 @@
 
     <div class="form-row">
       <Btn class="btn-submit" type="submit">Save</Btn>
-      <span v-if="isDemo()" class="demo-notice">
+      <span v-if="isDemo" class="demo-notice">
         Changes will not be saved in the demo version.
       </span>
     </div>
@@ -57,7 +57,7 @@
 import { onMounted, ref } from 'vue'
 import { userStore } from '@/stores'
 import { authService, UpdateCurrentProfileData } from '@/services'
-import { isDemo, logger, parseValidationError } from '@/utils'
+import { logger, parseValidationError } from '@/utils'
 import { useDialogBox, useMessageToaster } from '@/composables'
 
 import Btn from '@/components/ui/Btn.vue'
@@ -67,6 +67,8 @@ const { toastSuccess } = useMessageToaster()
 const { showErrorDialog } = useDialogBox()
 const profile = ref<UpdateCurrentProfileData>({} as unknown as UpdateCurrentProfileData)
 
+const isDemo = window.IS_DEMO
+
 onMounted(() => {
   profile.value = {
     name: userStore.current.name,
@@ -80,7 +82,7 @@ const update = async () => {
     throw Error()
   }
 
-  if (isDemo()) {
+  if (isDemo) {
     toastSuccess('Profile updated.')
     return
   }
diff --git a/resources/assets/js/components/screens/AlbumScreen.vue b/resources/assets/js/components/screens/AlbumScreen.vue
index a6e79a94..44e350c1 100644
--- a/resources/assets/js/components/screens/AlbumScreen.vue
+++ b/resources/assets/js/components/screens/AlbumScreen.vue
@@ -72,7 +72,7 @@
               <AlbumCard :album="a" layout="compact" />
             </li>
           </ul>
-          <p v-else class="text-secondary">No other albums by {{ album.artist_name }} found in the library.</p>
+          <p v-else class="none text-secondary">No other albums by {{ album.artist_name }} found in the library.</p>
         </template>
         <ul v-else class="as-list">
           <li v-for="i in 12" :key="i">
diff --git a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
index e57bf038..7035016e 100644
--- a/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
+++ b/resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue
@@ -74,6 +74,10 @@
     padding: 1.8rem;
     overflow: auto;
   }
+
+  .none {
+    padding: 1rem 1.8rem;
+  }
 }
 
 :deep(.info-pane) {
diff --git a/resources/assets/js/env.d.ts b/resources/assets/js/env.d.ts
index 13f15417..e97f35dd 100644
--- a/resources/assets/js/env.d.ts
+++ b/resources/assets/js/env.d.ts
@@ -1,9 +1,5 @@
 /// <reference types="vite/client" />
 
-interface ImportMetaEnv {
-  readonly VITE_KOEL_ENV: 'demo' | undefined
-}
-
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
diff --git a/resources/assets/js/types.d.ts b/resources/assets/js/types.d.ts
index e17b9659..604e388a 100644
--- a/resources/assets/js/types.d.ts
+++ b/resources/assets/js/types.d.ts
@@ -58,6 +58,7 @@ interface Constructable<T> {
 interface Window {
   BASE_URL: string
   MAILER_CONFIGURED: boolean
+  IS_DEMO: boolean
 
   readonly PUSHER_APP_KEY: string
   readonly PUSHER_APP_CLUSTER: string
diff --git a/resources/assets/js/utils/common.ts b/resources/assets/js/utils/common.ts
index 012ba77e..2e8beca1 100644
--- a/resources/assets/js/utils/common.ts
+++ b/resources/assets/js/utils/common.ts
@@ -35,8 +35,3 @@ export const copyText = async (text: string) => {
     document.execCommand('copy')
   }
 }
-
-export const isDemo = () => {
-  // can't use one-liner as it would break production build with an "Unexpected token" error
-  return import.meta.env.VITE_KOEL_ENV === 'demo'
-}
diff --git a/resources/assets/sass/partials/_shared.scss b/resources/assets/sass/partials/_shared.scss
index 9ea81dbb..0b7bf55e 100644
--- a/resources/assets/sass/partials/_shared.scss
+++ b/resources/assets/sass/partials/_shared.scss
@@ -176,6 +176,7 @@ label {
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  position: relative;
 
   [role=tablist] {
     border-bottom: 2px solid rgba(255, 255, 255, .1);
diff --git a/resources/views/base.blade.php b/resources/views/base.blade.php
index 075f97aa..1e48a095 100644
--- a/resources/views/base.blade.php
+++ b/resources/views/base.blade.php
@@ -34,6 +34,7 @@
 <script>
     window.BASE_URL = @json(asset(''));
     window.MAILER_CONFIGURED = @json(mailer_configured());
+    window.IS_DEMO = @json(config('koel.misc.demo'));
 
     window.PUSHER_APP_KEY = @json(config('broadcasting.connections.pusher.key'));
     window.PUSHER_APP_CLUSTER = @json(config('broadcasting.connections.pusher.options.cluster'));
diff --git a/routes/api.base.php b/routes/api.base.php
index ece62d10..2a2b89f4 100644
--- a/routes/api.base.php
+++ b/routes/api.base.php
@@ -13,7 +13,7 @@ use App\Http\Controllers\API\ExcerptSearchController;
 use App\Http\Controllers\API\FetchAlbumInformationController;
 use App\Http\Controllers\API\FetchAlbumThumbnailController;
 use App\Http\Controllers\API\FetchArtistInformationController;
-use App\Http\Controllers\API\FetchDemoCreditController;
+use App\Http\Controllers\API\FetchDemoCreditsController;
 use App\Http\Controllers\API\FetchFavoriteSongsController;
 use App\Http\Controllers\API\FetchInitialDataController;
 use App\Http\Controllers\API\FetchOverviewController;
@@ -197,5 +197,5 @@ Route::prefix('api')->middleware('api')->group(static function (): void {
         Route::delete('song', [S3SongController::class, 'remove'])->name('s3.song.remove'); // and here.
     });
 
-    Route::get('demo/credits', FetchDemoCreditController::class);
+    Route::get('demo/credits', FetchDemoCreditsController::class);
 });