Skip to content
Snippets Groups Projects
Select Git revision
  • 629-cookie-auth
  • develop default protected
  • master
  • 735-table-truncate
  • webdav
  • domain-policies
  • live-streaming
  • 303-json-ld
  • 0.18.2
  • 0.18.1
  • 0.18
  • 0.17
  • 0.16.3
  • 0.16.2
  • 0.16.1
  • 0.16
  • 0.15
  • 0.14.2
  • 0.14.1
  • 0.14
  • 0.13
  • 0.12
  • 0.11
  • 0.10
  • 0.9.1
  • 0.9
  • 0.8
  • 0.7
28 results

Home.vue

Blame
  • Forked from funkwhale / funkwhale
    6534 commits behind the upstream repository.
    Home.vue 2.57 KiB
    <template>
      <div v-title="labels.title">
        <div class="ui vertical stripe segment">
          <div class="ui stackable three column grid">
            <div class="column">
              <track-widget :url="'history/listenings/'" :filters="{scope: 'user', ordering: '-creation_date'}">
                <template slot="title"><translate>Recently listened</translate></template>
              </track-widget>
            </div>
            <div class="column">
              <track-widget :url="'favorites/tracks/'" :filters="{scope: 'user', ordering: '-creation_date'}">
                <template slot="title"><translate>Recently favorited</translate></template>
              </track-widget>
            </div>
            <div class="column">
              <playlist-widget :url="'playlists/'" :filters="{scope: 'user', listenable: true, ordering: '-creation_date'}">
                <template slot="title"><translate>Playlists</translate></template>
              </playlist-widget>
            </div>
          </div>
          <div class="ui section hidden divider"></div>
          <div class="ui grid">
            <div class="ui row">
              <album-widget :filters="{ordering: '-creation_date'}">
                <template slot="title"><translate>Recently added</translate></template>
              </album-widget>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    import Search from '@/components/audio/Search'
    import logger from '@/logging'
    import ArtistCard from '@/components/audio/artist/Card'
    import TrackWidget from '@/components/audio/track/Widget'
    import AlbumWidget from '@/components/audio/album/Widget'
    import PlaylistWidget from '@/components/playlists/Widget'
    
    const ARTISTS_URL = 'artists/'
    
    export default {
      name: 'library',
      components: {
        Search,
        ArtistCard,
        TrackWidget,
        AlbumWidget,
        PlaylistWidget
      },
      data () {
        return {
          artists: [],
          isLoadingArtists: false
        }
      },
      created () {
        this.fetchArtists()
      },
      computed: {
        labels () {
          return {
            title: this.$gettext('Home')
          }
        }
      },
      methods: {
        fetchArtists () {
          var self = this
          this.isLoadingArtists = true
          let params = {
            ordering: '-creation_date',
            listenable: true
          }
          let url = ARTISTS_URL
          logger.default.time('Loading latest artists')
          axios.get(url, {params: params}).then((response) => {
            self.artists = response.data.results
            logger.default.timeEnd('Loading latest artists')
            self.isLoadingArtists = false
          })
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    </style>