feat: use global constant for demo mode

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()
     {

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)
 

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
     })
   }
 }

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>
 

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
   }

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">

resources/assets/js/components/ui/ArtistAlbumScreenTabs.vue

@@ -74,6 +74,10 @@
     padding: 1.8rem;
     overflow: auto;
   }
+
+  .none {
+    padding: 1rem 1.8rem;
+  }
 }
 
 :deep(.info-pane) {

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
 }

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

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'
-}

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);

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'));

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);
 });