owntone-server/web-src/src/pages/PageSearch.vue

<template>
  <div>
    <!-- Search field + recent searches -->
    <section class="section fd-remove-padding-bottom">
      <div class="container">
        <div class="columns is-centered">
          <div class="column is-four-fifths">
            <form v-on:submit.prevent="new_search">
              <div class="field">
                <p class="control is-expanded has-icons-left">
                  <input class="input is-rounded is-shadowless" type="text" placeholder="Search" v-model="search_query" ref="search_field" autocomplete="off">
                  <span class="icon is-left">
                    <i class="mdi mdi-magnify"></i>
                  </span>
                </p>
                <p class="help has-text-centered">Tip: you can search by a smart playlist query language <a href="https://github.com/ejurgensen/forked-daapd/blob/master/README_SMARTPL.md" target="_blank">expression</a> if you prefix it
                  with <code>query:</code>.
                </p>
              </div>
            </form>
            <div class="tags" style="margin-top: 16px;">
              <a class="tag" v-for="recent_search in recent_searches" :key="recent_search" @click="open_recent_search(recent_search)">{{ recent_search }}</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <tabs-search></tabs-search>

    <!-- Tracks -->
    <content-with-heading v-if="show_tracks">
      <template slot="heading-left">
        <p class="title is-4">Tracks</p>
      </template>
      <template slot="content">
        <list-item-track v-for="track in tracks.items" :key="track.id" :track="track" @click="play_track(track)">
          <template slot="actions">
            <a @click="open_track_dialog(track)">
              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
            </a>
          </template>
        </list-item-track>
        <modal-dialog-track :show="show_track_details_modal" :track="selected_track" @close="show_track_details_modal = false" />
      </template>
      <template slot="footer">
        <nav v-if="show_all_tracks_button" class="level">
          <p class="level-item">
            <a class="button is-light is-small is-rounded" v-on:click="open_search_tracks">Show all {{ tracks.total.toLocaleString() }} tracks</a>
          </p>
        </nav>
        <p v-if="!tracks.total">No results</p>
      </template>
    </content-with-heading>

    <!-- Artists -->
    <content-with-heading v-if="show_artists">
      <template slot="heading-left">
        <p class="title is-4">Artists</p>
      </template>
      <template slot="content">
        <list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist" @click="open_artist(artist)">
          <template slot="actions">
            <a @click="open_artist_dialog(artist)">
              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
            </a>
          </template>
        </list-item-artist>
        <modal-dialog-artist :show="show_artist_details_modal" :artist="selected_artist" @close="show_artist_details_modal = false" />
      </template>
      <template slot="footer">
        <nav v-if="show_all_artists_button" class="level">
          <p class="level-item">
            <a class="button is-light is-small is-rounded" v-on:click="open_search_artists">Show all {{ artists.total.toLocaleString() }} artists</a>
          </p>
        </nav>
        <p v-if="!artists.total">No results</p>
      </template>
    </content-with-heading>

    <!-- Albums -->
    <content-with-heading v-if="show_albums">
      <template slot="heading-left">
        <p class="title is-4">Albums</p>
      </template>
      <template slot="content">
        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" @click="open_album(album)">
          <template slot="artwork" v-if="is_visible_artwork">
            <p class="image is-64x64 fd-has-shadow fd-has-action">
              <cover-artwork
                :artwork_url="album.artwork_url"
                :artist="album.artist"
                :album="album.name"
                :maxwidth="64"
                :maxheight="64" />
            </p>
          </template>
          <template slot="actions">
            <a @click="open_album_dialog(album)">
              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
            </a>
          </template>
        </list-item-album>
        <modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
      </template>
      <template slot="footer">
        <nav v-if="show_all_albums_button" class="level">
          <p class="level-item">
            <a class="button is-light is-small is-rounded" v-on:click="open_search_albums">Show all {{ albums.total.toLocaleString() }} albums</a>
          </p>
        </nav>
        <p v-if="!albums.total">No results</p>
      </template>
    </content-with-heading>

    <!-- Playlists -->
    <content-with-heading v-if="show_playlists">
      <template slot="heading-left">
        <p class="title is-4">Playlists</p>
      </template>
      <template slot="content">
        <list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
          <template slot="actions">
            <a @click="open_playlist_dialog(playlist)">
              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
            </a>
          </template>
        </list-item-playlist>
        <modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
      </template>
      <template slot="footer">
        <nav v-if="show_all_playlists_button" class="level">
          <p class="level-item">
            <a class="button is-light is-small is-rounded" v-on:click="open_search_playlists">Show all {{ playlists.total.toLocaleString() }} playlists</a>
          </p>
        </nav>
        <p v-if="!playlists.total">No results</p>
      </template>
    </content-with-heading>

    <!-- Podcasts -->
    <content-with-heading v-if="show_podcasts">
      <template slot="heading-left">
        <p class="title is-4">Podcasts</p>
      </template>
      <template slot="content">
        <list-item-album v-for="album in podcasts.items" :key="album.id" :album="album" :media_kind="'podcast'" @click="open_podcast(album)">
          <template slot="artwork" v-if="is_visible_artwork">
            <p class="image is-64x64 fd-has-shadow fd-has-action">
              <cover-artwork
                :artwork_url="album.artwork_url"
                :artist="album.artist"
                :album="album.name"
                :maxwidth="64"
                :maxheight="64" />
            </p>
          </template>
          <template slot="actions">
            <a @click="open_podcast_dialog(album)">
              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
            </a>
          </template>
        </list-item-album>
        <modal-dialog-album :show="show_podcast_details_modal" :album="selected_podcast" :media_kind="'podcast'" @close="show_podcast_details_modal = false" />
      </template>
      <template slot="footer">
        <nav v-if="show_all_podcasts_button" class="level">
          <p class="level-item">
            <a class="button is-light is-small is-rounded" v-on:click="open_search_podcasts">Show all {{ podcasts.total.toLocaleString() }} podcasts</a>
          </p>
        </nav>
        <p v-if="!podcasts.total">No results</p>
      </template>
    </content-with-heading>

    <!-- Audiobooks -->
    <content-with-heading v-if="show_audiobooks">
      <template slot="heading-left">
        <p class="title is-4">Audiobooks</p>
      </template>
      <template slot="content">
        <list-item-album v-for="album in audiobooks.items" :key="album.id" :album="album" :media_kind="'audiobook'" @click="open_audiobook(album)">
          <template slot="artwork" v-if="is_visible_artwork">
            <p class="image is-64x64 fd-has-shadow fd-has-action">
              <cover-artwork
                :artwork_url="album.artwork_url"
                :artist="album.artist"
                :album="album.name"
                :maxwidth="64"
                :maxheight="64" />
            </p>
          </template>
          <template slot="actions">
            <a @click="open_audiobook_dialog(album)">
              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
            </a>
          </template>
        </list-item-album>
        <modal-dialog-album :show="show_audiobook_details_modal" :album="selected_audiobook" :media_kind="'audiobook'" @close="show_audiobook_details_modal = false" />
      </template>
      <template slot="footer">
        <nav v-if="show_all_audiobooks_button" class="level">
          <p class="level-item">
            <a class="button is-light is-small is-rounded" v-on:click="open_search_audiobooks">Show all {{ audiobooks.total.toLocaleString() }} audiobooks</a>
          </p>
        </nav>
        <p v-if="!audiobooks.total">No results</p>
      </template>
    </content-with-heading>
  </div>
</template>

<script>
import ContentWithHeading from '@/templates/ContentWithHeading'
import TabsSearch from '@/components/TabsSearch'
import ListItemTrack from '@/components/ListItemTrack'
import ListItemArtist from '@/components/ListItemArtist'
import ListItemAlbum from '@/components/ListItemAlbum'
import ListItemPlaylist from '@/components/ListItemPlaylist'
import ModalDialogTrack from '@/components/ModalDialogTrack'
import ModalDialogAlbum from '@/components/ModalDialogAlbum'
import ModalDialogArtist from '@/components/ModalDialogArtist'
import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
import CoverArtwork from '@/components/CoverArtwork'
import webapi from '@/webapi'
import * as types from '@/store/mutation_types'

export default {
  name: 'PageSearch',
  components: { ContentWithHeading, TabsSearch, ListItemTrack, ListItemArtist, ListItemAlbum, ListItemPlaylist, ModalDialogTrack, ModalDialogAlbum, ModalDialogArtist, ModalDialogPlaylist, CoverArtwork },

  data () {
    return {
      search_query: '',

      tracks: { items: [], total: 0 },
      artists: { items: [], total: 0 },
      albums: { items: [], total: 0 },
      playlists: { items: [], total: 0 },
      audiobooks: { items: [], total: 0 },
      podcasts: { items: [], total: 0 },

      show_track_details_modal: false,
      selected_track: {},

      show_album_details_modal: false,
      selected_album: {},

      show_artist_details_modal: false,
      selected_artist: {},

      show_playlist_details_modal: false,
      selected_playlist: {},

      show_audiobook_details_modal: false,
      selected_audiobook: {},

      show_podcast_details_modal: false,
      selected_podcast: {}
    }
  },

  computed: {
    recent_searches () {
      return this.$store.state.recent_searches
    },

    show_tracks () {
      return this.$route.query.type && this.$route.query.type.includes('track')
    },
    show_all_tracks_button () {
      return this.tracks.total > this.tracks.items.length
    },

    show_artists () {
      return this.$route.query.type && this.$route.query.type.includes('artist')
    },
    show_all_artists_button () {
      return this.artists.total > this.artists.items.length
    },

    show_albums () {
      return this.$route.query.type && this.$route.query.type.includes('album')
    },
    show_all_albums_button () {
      return this.albums.total > this.albums.items.length
    },

    show_playlists () {
      return this.$route.query.type && this.$route.query.type.includes('playlist')
    },
    show_all_playlists_button () {
      return this.playlists.total > this.playlists.items.length
    },

    show_audiobooks () {
      return this.$route.query.type && this.$route.query.type.includes('audiobook')
    },
    show_all_audiobooks_button () {
      return this.audiobooks.total > this.audiobooks.items.length
    },

    show_podcasts () {
      return this.$route.query.type && this.$route.query.type.includes('podcast')
    },
    show_all_podcasts_button () {
      return this.podcasts.total > this.podcasts.items.length
    },

    is_visible_artwork () {
      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
    }
  },

  methods: {
    search: function (route) {
      if (!route.query.query || route.query.query === '') {
        this.search_query = ''
        this.$refs.search_field.focus()
        return
      }

      this.searchMusic(route.query)
      this.searchAudiobooks(route.query)
      this.searchPodcasts(route.query)
      this.$store.commit(types.ADD_RECENT_SEARCH, route.query.query)
    },

    searchMusic: function (query) {
      if (query.type.indexOf('track') < 0 && query.type.indexOf('track') < 0 && query.type.indexOf('album') < 0 && query.type.indexOf('playlist') < 0) {
        return
      }

      var searchParams = {
        type: query.type,
        media_kind: 'music'
      }

      if (query.query.startsWith('query:')) {
        searchParams.expression = query.query.replace(/^query:/, '').trim()
      } else {
        searchParams.query = query.query
      }

      if (query.limit) {
        searchParams.limit = query.limit
        searchParams.offset = query.offset
      }

      webapi.search(searchParams).then(({ data }) => {
        this.tracks = data.tracks ? data.tracks : { items: [], total: 0 }
        this.artists = data.artists ? data.artists : { items: [], total: 0 }
        this.albums = data.albums ? data.albums : { items: [], total: 0 }
        this.playlists = data.playlists ? data.playlists : { items: [], total: 0 }
      })
    },

    searchAudiobooks: function (query) {
      if (query.type.indexOf('audiobook') < 0) {
        return
      }

      var searchParams = {
        type: 'album',
        media_kind: 'audiobook'
      }

      if (query.query.startsWith('query:')) {
        searchParams.expression = query.query.replace(/^query:/, '').trim()
      } else {
        searchParams.expression = '((album includes "' + query.query + '" or artist includes "' + query.query + '") and media_kind is audiobook)'
      }

      if (query.limit) {
        searchParams.limit = query.limit
        searchParams.offset = query.offset
      }

      webapi.search(searchParams).then(({ data }) => {
        this.audiobooks = data.albums ? data.albums : { items: [], total: 0 }
      })
    },

    searchPodcasts: function (query) {
      if (query.type.indexOf('podcast') < 0) {
        return
      }

      var searchParams = {
        type: 'album',
        media_kind: 'podcast'
      }

      if (query.query.startsWith('query:')) {
        searchParams.expression = query.query.replace(/^query:/, '').trim()
      } else {
        searchParams.expression = '((album includes "' + query.query + '" or artist includes "' + query.query + '") and media_kind is podcast)'
      }

      if (query.limit) {
        searchParams.limit = query.limit
        searchParams.offset = query.offset
      }

      webapi.search(searchParams).then(({ data }) => {
        this.podcasts = data.albums ? data.albums : { items: [], total: 0 }
      })
    },

    new_search: function () {
      if (!this.search_query) {
        return
      }

      this.$router.push({
        path: '/search/library',
        query: {
          type: 'track,artist,album,playlist,audiobook,podcast',
          query: this.search_query,
          limit: 3,
          offset: 0
        }
      })
      this.$refs.search_field.blur()
    },

    open_search_tracks: function () {
      this.$router.push({
        path: '/search/library',
        query: {
          type: 'track',
          query: this.$route.query.query
        }
      })
    },

    open_search_artists: function () {
      this.$router.push({
        path: '/search/library',
        query: {
          type: 'artist',
          query: this.$route.query.query
        }
      })
    },

    open_search_albums: function () {
      this.$router.push({
        path: '/search/library',
        query: {
          type: 'album',
          query: this.$route.query.query
        }
      })
    },

    open_search_playlists: function () {
      this.$router.push({
        path: '/search/library',
        query: {
          type: 'playlist',
          query: this.$route.query.query
        }
      })
    },

    open_search_audiobooks: function () {
      this.$router.push({
        path: '/search/library',
        query: {
          type: 'audiobook',
          query: this.$route.query.query
        }
      })
    },

    open_search_podcasts: function () {
      this.$router.push({
        path: '/search/library',
        query: {
          type: 'podcast',
          query: this.$route.query.query
        }
      })
    },

    play_track: function (track) {
      webapi.player_play_uri(track.uri, false)
    },

    open_artist: function (artist) {
      this.$router.push({ path: '/music/artists/' + artist.id })
    },

    open_album: function (album) {
      this.$router.push({ path: '/music/albums/' + album.id })
    },

    open_playlist: function (playlist) {
      this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
    },

    open_audiobook: function (album) {
      this.$router.push({ path: '/audiobooks/' + album.id })
    },

    open_podcast: function (album) {
      this.$router.push({ path: '/podcasts/' + album.id })
    },

    open_recent_search: function (query) {
      this.search_query = query
      this.new_search()
    },

    open_track_dialog: function (track) {
      this.selected_track = track
      this.show_track_details_modal = true
    },

    open_album_dialog: function (album) {
      this.selected_album = album
      this.show_album_details_modal = true
    },

    open_artist_dialog: function (artist) {
      this.selected_artist = artist
      this.show_artist_details_modal = true
    },

    open_playlist_dialog: function (playlist) {
      this.selected_playlist = playlist
      this.show_playlist_details_modal = true
    },

    open_audiobook_dialog: function (album) {
      this.selected_audiobook = album
      this.show_audiobook_details_modal = true
    },

    open_podcast_dialog: function (album) {
      this.selected_podcast = album
      this.show_podcast_details_modal = true
    }
  },

  mounted: function () {
    this.search(this.$route)
  },

  watch: {
    '$route' (to, from) {
      this.search(to)
    }
  }
}
</script>

<style>
</style>