Merge pull request #11142 from nanaya/artist-originals

Add original tracks filter option on featured artists track search

Author: notbakaneko

app/Libraries/Search/ArtistTrackSearch.php

@@ -33,10 +33,18 @@ public function getQuery()
         $this->addQueryStringFilter($query);
         $this->addSimpleFilters($query);
         $this->addTextFilters($query);
+        $this->addExclusiveOnlyFilter($query);
 
         return $query;
     }
 
+    private function addExclusiveOnlyFilter(BoolQuery $query): void
+    {
+        if ($this->params->exclusiveOnly) {
+            $query->filter(['term' => ['exclusive' => true]]);
+        }
+    }
+
     private function addQueryStringFilter($query): void
     {
         $value = $this->params->queryString;

app/Libraries/Search/ArtistTrackSearchParams.php

@@ -27,6 +27,7 @@ class ArtistTrackSearchParams extends SearchParams
     public ?string $album;
     public ?string $artist;
     public ?array $bpm;
+    public bool $exclusiveOnly = false;
     public ?string $genre;
     public bool $isDefaultSort = false;
     public ?array $length;

app/Libraries/Search/ArtistTrackSearchParamsFromRequest.php

@@ -18,6 +18,7 @@ public static function fromArray(array $rawParams)
             'album',
             'artist',
             'bpm:array',
+            'exclusive_only:bool',
             'genre',
             'is_default_sort:bool',
             'length:array',
@@ -37,6 +38,10 @@ public static function fromArray(array $rawParams)
         $params->parseSort($paramsArray['sort'], $paramsArray['is_default_sort']);
         $params->searchAfter = SearchAfterParam::make($params, cursor_from_params($rawParams)); // TODO: enforce value types
 
+        if (isset($paramsArray['exclusive_only'])) {
+            $params->exclusiveOnly = $paramsArray['exclusive_only'];
+        }
+
         return $params;
     }
 
@@ -46,6 +51,7 @@ public static function toArray(ArtistTrackSearchParams $params)
             'album' => $params->album,
             'artist' => $params->artist,
             'bpm' => $params->bpmInput,
+            'exclusive_only' => $params->exclusiveOnly,
             'genre' => $params->genre,
             'is_default_sort' => $params->isDefaultSort,
             'length' => $params->lengthInput,

resources/css/bem-index.less

@@ -16,6 +16,7 @@
 @import "bem/artist-sidebar-album";
 @import "bem/artist-track";
 @import "bem/artist-track-search-form";
+@import "bem/artist-track-search-form-switches";
 @import "bem/artist-track-search-sort";
 @import "bem/audio-player";
 @import "bem/audio-player-floating";

resources/css/bem/artist-track-search-form-switches.less

@@ -0,0 +1,34 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.artist-track-search-form-switches {
+  display: grid;
+  gap: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
+
+  &__link {
+    .link-plain();
+    font-size: @font-size--normal;
+    font-weight: bold;
+    background: hsl(var(--hsl-b3));
+    color: hsl(var(--hsl-c1));
+    padding: 2px 15px 3px; // slightly more on the bottom to compensate font vertical alignment
+    border-radius: 10000px;
+    transition: none;
+    text-align: center;
+    white-space: nowrap;
+
+    &:focus, &:active {
+      color: hsl(var(--hsl-c1));
+    }
+
+    &:hover {
+      background: hsl(var(--hsl-l1));
+      color: hsl(var(--hsl-b6));
+    }
+
+    &--active {
+      background: hsl(var(--hsl-b1));
+    }
+  }
+}

resources/js/artist-tracks-index/make-link.ts

@@ -5,5 +5,16 @@ import { route } from 'laroute';
 import { ArtistTrackSearch } from './search-form';
 
 export default function makeLink(params: ArtistTrackSearch) {
-  return `${route('artists.tracks.index')}?${$.param(params)}`;
+  const urlParams: Partial<ArtistTrackSearch> = { ...params };
+  if (!urlParams.exclusive_only) {
+    delete urlParams.exclusive_only;
+  }
+  if (urlParams.is_default_sort) {
+    // no need to set sort params if default
+    delete urlParams.sort;
+  }
+  // backend automatically determines this
+  delete urlParams.is_default_sort;
+
+  return route('artists.tracks.index', urlParams);
 }

resources/js/artist-tracks-index/search-form.tsx

@@ -43,6 +43,7 @@ const artistTrackSearchNumberRangeParams = ['bpm', 'length'] as const;
 type ArtistTrackSearchNumberRangeParam = typeof artistTrackSearchNumberRangeParams[number];
 
 export type ArtistTrackSearch = {
+  exclusive_only: boolean;
   genre?: Nullable<string>;
   is_default_sort: boolean;
   sort: ArtistTrackSort;
@@ -63,12 +64,13 @@ export default class SearchForm extends React.Component<Props> {
 
   @computed
   private get url() {
-    return this.makeLink();
+    return makeLink(this.params);
   }
 
   @computed
   private get emptySearch() {
     return {
+      exclusive_only: false,
       is_default_sort: this.params.is_default_sort,
       sort: this.params.sort,
     };
@@ -172,17 +174,35 @@ export default class SearchForm extends React.Component<Props> {
             </InputContainer>
 
             <InputContainer labelKey='artist.tracks.index.form.genre' modifiers={['4', 'genre']}>
-              <div className='artist-track-search-form__genres'>
+              <div className='artist-track-search-form-switches'>
                 {this.renderGenreLink(trans('artist.tracks.index.form.genre_all'), null)}
                 {this.props.availableGenres.map((genre) => this.renderGenreLink(genre, genre))}
               </div>
             </InputContainer>
+
+            <InputContainer labelKey='artist.tracks.index.form.exclusive_only' modifiers={['4', 'genre']}>
+              <div className='artist-track-search-form-switches'>
+                {([['all', false], ['exclusive_only', true]] as const).map(([label, value]) => (
+                  <a
+                    key={label}
+                    className={classWithModifiers('artist-track-search-form-switches__link', {
+                      active: this.params.exclusive_only === value,
+                    })}
+                    data-value={value}
+                    href={makeLink({ ...this.params, exclusive_only: value })}
+                    onClick={this.handleExclusiveOnlyLinkClick}
+                  >
+                    {trans(`artist.tracks.index.exclusive_only.${label}`)}
+                  </a>
+                ))}
+              </div>
+            </InputContainer>
           </div>
         </div>
         <div className='artist-track-search-form__content artist-track-search-form__content--buttons'>
           <BigButton
             disabled={this.isEmptySearch}
-            href={this.makeLink(this.emptySearch)}
+            href={makeLink(this.emptySearch)}
             modifiers={['artist-track-search', 'rounded-thin']}
             props={{ onClick: this.handleReset }}
             text={trans('common.buttons.reset')}
@@ -247,6 +267,13 @@ export default class SearchForm extends React.Component<Props> {
     }
   };
 
+  @action
+  private readonly handleExclusiveOnlyLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault();
+    this.params.exclusive_only = e.currentTarget.dataset.value === '1';
+    this.props.onNewSearch(e.currentTarget.href);
+  };
+
   @action
   private readonly handleGenreLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
@@ -278,19 +305,15 @@ export default class SearchForm extends React.Component<Props> {
     }
   };
 
-  private makeLink(params: ArtistTrackSearch = this.params) {
-    return makeLink(params);
-  }
-
   private renderGenreLink(name: string, value: Nullable<string>) {
     return (
       <a
         key={name}
-        className={classWithModifiers('artist-track-search-form__genre-link', {
+        className={classWithModifiers('artist-track-search-form-switches__link', {
           active: presence(this.params.genre) === value,
         })}
         data-value={value ?? ''}
-        href={this.makeLink({ ...this.params, genre: value })}
+        href={makeLink({ ...this.params, genre: value })}
         onClick={this.handleGenreLinkClick}
       >
         {name}

resources/lang/en/artist.php

@@ -45,13 +45,19 @@
         'index' => [
             '_' => 'track search',
 
+            'exclusive_only' => [
+                'all' => 'All',
+                'exclusive_only' => 'osu! original',
+            ],
+
             'form' => [
                 'advanced' => 'Advanced Search',
                 'album' => 'Album',
                 'artist' => 'Artist',
                 'bpm_gte' => 'BPM Minimum',
                 'bpm_lte' => 'BPM Maximum',
                 'empty' => 'No tracks matching search criteria were found.',
+                'exclusive_only' => 'Type',
                 'genre' => 'Genre',
                 'genre_all' => 'All',
                 'length_gte' => 'Length Minimum',