fix: Some Media where displaying incorectly

src/components/Discover/DiscoverMusics/index.tsx

@@ -10,7 +10,7 @@ import {
 import FilterSlideover from '@app/components/Discover/FilterSlideover';
 import useDiscover from '@app/hooks/useDiscover';
 import Error from '@app/pages/_error';
-import { BarsArrowDownIcon, FunnelIcon } from '@heroicons/react/24/solid';
+import { FunnelIcon } from '@heroicons/react/24/solid';
 import type { MusicResult } from '@server/models/Search';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
@@ -55,11 +55,6 @@ const DiscoverMusics = () => {
       <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-end">
         <Header>{title}</Header>
         <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
-          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
-            <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-gray-100 sm:text-sm">
-              <BarsArrowDownIcon className="h-6 w-6" />
-            </span>
-          </div>
           <FilterSlideover
             type="music"
             currentFilters={preparedFilters}

src/components/Discover/FilterSlideover/index.tsx

@@ -74,7 +74,8 @@ const FilterSlideover = ({
       onClose={() => onClose()}
     >
       <div className="flex flex-col space-y-4">
-        <div>
+        { type !== 'music' &&
+        (<div>
             <div className="mb-2 text-lg font-semibold">
               {intl.formatMessage(
                 type === 'movie' ? messages.releaseDate : messages.firstAirDate
@@ -124,7 +125,8 @@ const FilterSlideover = ({
               />
             </div>
           </div>
-        </div>
+        </div>)
+          }
         {type === 'movie' && (
           <>
             <span className="text-lg font-semibold">
@@ -138,6 +140,8 @@ const FilterSlideover = ({
             />
           </>
         )}
+        { type !== 'music' && (
+        <>
           <span className="text-lg font-semibold">
             {intl.formatMessage(messages.genres)}
           </span>
@@ -149,6 +153,7 @@ const FilterSlideover = ({
               updateQueryParams('genre', value?.map((v) => v.value).join(','));
             }}
           />
+        </>)}
         <span className="text-lg font-semibold">
           {intl.formatMessage(messages.keywords)}
         </span>
@@ -156,9 +161,11 @@ const FilterSlideover = ({
           defaultValue={currentFilters.keywords}
           isMulti
           onChange={(value) => {
-            updateQueryParams('keywords', value?.map((v) => v.value).join(','));
+            updateQueryParams('keywords', type === 'music' ? value?.map((v) => v.label).join(' ') : value?.map((v) => v.value).join(','));
           }}
         />
+        { type !== 'music' && (
+        <>
         <span className="text-lg font-semibold">
           {intl.formatMessage(messages.originalLanguage)}
         </span>
@@ -313,6 +320,8 @@ const FilterSlideover = ({
               }}
             />)
           : null}
+        </>)
+        }
         <div className="pt-4">
           <Button
             className="w-full"

src/components/Layout/SearchInput/index.tsx

@@ -4,7 +4,7 @@ import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
-  searchPlaceholder: 'Search Movies & TV',
+  searchPlaceholder: 'Search Musics, Movies & TV',
 });
 
 const SearchInput = () => {

src/components/TitleCard/index.tsx

@@ -135,7 +135,9 @@ const TitleCard = ({
               className={`pointer-events-none z-40 rounded-full border bg-opacity-80 shadow-md ${
                 mediaType === 'movie' || mediaType === 'collection'
                   ? 'border-blue-500 bg-blue-600'
-                  : 'border-purple-600 bg-purple-600'
+                  : mediaType === 'tv'
+                  ? 'border-purple-600 bg-purple-600'
+                  : 'border-green-600 bg-green-600'
               }`}
             >
               <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
@@ -143,7 +145,10 @@ const TitleCard = ({
                   ? intl.formatMessage(globalMessages.movie)
                   : mediaType === 'collection'
                   ? intl.formatMessage(globalMessages.collection)
-                  : intl.formatMessage(globalMessages.tvshow)}
+                  : mediaType === 'tv'
+                  ? intl.formatMessage(globalMessages.tvshow)
+                  : intl.formatMessage(globalMessages.music)
+                  }
               </div>
             </div>
             {currentStatus && currentStatus !== MediaStatus.UNKNOWN && (

src/i18n/globalMessages.ts

@@ -19,6 +19,8 @@ const globalMessages = defineMessages({
   collection: 'Collection',
   tvshow: 'Series',
   tvshows: 'Series',
+  music: 'Music',
+  musics: 'Musics',
   cancel: 'Cancel',
   canceling: 'Canceling…',
   approve: 'Approve',

src/i18n/locale/en.json

@@ -198,7 +198,7 @@
   "components.LanguageSelector.languageServerDefault": "Default ({language})",
   "components.LanguageSelector.originalLanguageDefault": "All Languages",
   "components.Layout.LanguagePicker.displaylanguage": "Display Language",
-  "components.Layout.SearchInput.searchPlaceholder": "Search Movies & TV",
+  "components.Layout.SearchInput.searchPlaceholder": "Search Musics, Movies & TV",
   "components.Layout.Sidebar.browsemovies": "Movies",
   "components.Layout.Sidebar.browsetv": "Series",
   "components.Layout.Sidebar.dashboard": "Discover",