Sidebar.vue 14.4 KB
Newer Older
1
<template>
2
<div :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar',]">
3
  <div class="ui inverted segment header-wrapper">
4
    <search-bar @search="isCollapsed = false">
Agate's avatar
Agate committed
5
      <router-link :title="'Funkwhale'" :to="{name: logoUrl}">
6 7 8
        <i class="logo bordered inverted orange big icon">
          <logo class="logo"></logo>
        </i>
9
      </router-link><span
10 11 12 13
        slot="after"
        @click="isCollapsed = !isCollapsed"
        :class="['ui', 'basic', 'big', {'inverted': isCollapsed}, 'orange', 'icon', 'collapse', 'button']">
          <i class="sidebar icon"></i></span>
14 15 16 17 18
    </search-bar>
  </div>

  <div class="menu-area">
    <div class="ui compact fluid two item inverted menu">
19
      <a class="active item" @click="selectedTab = 'library'" data-tab="library"><translate>Browse</translate></a>
20
      <a class="item" @click="selectedTab = 'queue'" data-tab="queue">
21
        <translate>Queue</translate>&nbsp;
22
         <template v-if="queue.tracks.length === 0">
23
           <translate>(empty)</translate>
24
         </template>
Agate's avatar
Agate committed
25 26 27
         <translate v-else :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}">
          (%{ index } of %{ length })
         </translate>
28 29 30 31
      </a>
    </div>
  </div>
  <div class="tabs">
32
    <div class="ui bottom attached active tab" data-tab="library">
33
      <div class="ui inverted vertical large fluid menu">
Agate's avatar
Agate committed
34
        <div class="item">
35
          <div class="header"><translate>My account</translate></div>
Agate's avatar
Agate committed
36
          <div class="menu">
Agate's avatar
Agate committed
37 38 39 40 41
            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'profile', params: {username: $store.state.auth.username}}">
              <i class="user icon"></i>
              <translate :translate-params="{username: $store.state.auth.username}">
                Logged in as %{ username }
              </translate>
Agate's avatar
Agate committed
42
              <img class="ui right floated circular tiny avatar image" v-if="$store.state.auth.profile.avatar.square_crop" :src="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
Agate's avatar
Agate committed
43
            </router-link>
44
            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/settings'}"><i class="setting icon"></i><translate>Settings</translate></router-link>
45
            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i><translate>Logout</translate></router-link>
emillumine's avatar
emillumine committed
46 47 48 49 50 51
            <template v-else>
              <router-link class="item" :to="{name: 'login'}"><i class="sign in icon"></i><translate>Login</translate></router-link>
              <router-link class="item" :to="{path: '/signup'}">
                <translate>Create an account</translate>
              </router-link>
            </template>
Agate's avatar
Agate committed
52 53 54
          </div>
        </div>
        <div class="item">
55
          <div class="header"><translate>Music</translate></div>
Agate's avatar
Agate committed
56
          <div class="menu">
57
            <router-link class="item" :to="{path: '/library'}"><i class="sound icon"></i><translate>Browse library</translate></router-link>
58
            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/favorites'}"><i class="heart icon"></i><translate>Favorites</translate></router-link>
Agate's avatar
Agate committed
59 60 61 62
            <a
              @click="$store.commit('playlists/chooseTrack', null)"
              v-if="$store.state.auth.authenticated"
              class="item">
63
              <i class="list icon"></i><translate>Playlists</translate>
Agate's avatar
Agate committed
64 65 66
            </a>
            <router-link
              v-if="$store.state.auth.authenticated"
67
              class="item" :to="{path: '/activity'}"><i class="bell icon"></i><translate>Activity</translate></router-link>
68 69 70
            <router-link
              v-if="$store.state.auth.authenticated"
              class="item" :to="{name: 'content.index'}"><i class="upload icon"></i><translate>Add content</translate></router-link>
Agate's avatar
Agate committed
71 72
          </div>
        </div>
73
        <div class="item" v-if="showAdmin">
74
          <div class="header"><translate>Administration</translate></div>
Agate's avatar
Agate committed
75
          <div class="menu">
76 77 78 79
            <router-link
              class="item"
              v-if="$store.state.auth.availablePermissions['library']"
              :to="{name: 'manage.library.files'}">
80
              <i class="book icon"></i><translate>Library</translate>
81 82
              <div
                :class="['ui', {'teal': $store.state.ui.notifications.importRequests > 0}, 'label']"
Agate's avatar
Agate committed
83
                :title="labels.pendingRequests">
84 85
                {{ $store.state.ui.notifications.importRequests }}</div>

86
            </router-link>
87 88 89 90
            <router-link
              class="item"
              v-else-if="$store.state.auth.availablePermissions['upload']"
              to="/library/import/launch">
91
              <i class="download icon"></i><translate>Import music</translate>
92
            </router-link>
93 94
            <router-link
              class="item"
95
              v-if="$store.state.auth.availablePermissions['federation']"
96
              :to="{path: '/manage/federation/libraries'}">
97
              <i class="sitemap icon"></i><translate>Federation</translate>
98
              <div
99
                :class="['ui', {'teal': $store.state.ui.notifications.federation > 0}, 'label']"
Agate's avatar
Agate committed
100
                :title="labels.pendingFollows">
101
                {{ $store.state.ui.notifications.federation }}</div>
102
            </router-link>
103 104
            <router-link
              class="item"
105
              v-if="$store.state.auth.availablePermissions['settings']"
106
              :to="{path: '/manage/settings'}">
107
              <i class="settings icon"></i><translate>Settings</translate>
108
            </router-link>
Agate's avatar
Agate committed
109 110 111
            <router-link
              class="item"
              v-if="$store.state.auth.availablePermissions['settings']"
112
              :to="{name: 'manage.users.users.list'}">
113
              <i class="users icon"></i><translate>Users</translate>
Agate's avatar
Agate committed
114
            </router-link>
Agate's avatar
Agate committed
115 116
          </div>
        </div>
117 118 119 120 121 122
      </div>
    </div>
    <div v-if="queue.previousQueue " class="ui black icon message">
      <i class="history icon"></i>
      <div class="content">
        <div class="header">
123
          <translate>Do you want to restore your previous queue?</translate>
124
        </div>
Agate's avatar
Agate committed
125 126 127 128 129 130 131 132
        <p>
          <translate
            translate-plural="%{ count } tracks"
            :translate-n="queue.previousQueue.tracks.length"
            :translate-params="{count: queue.previousQueue.tracks.length}">
            %{ count } track
          </translate>
        </p>
133
        <div class="ui two buttons">
134 135
          <div @click="queue.restore()" class="ui basic inverted green button"><translate>Yes</translate></div>
          <div @click="queue.removePrevious()" class="ui basic inverted red button"><translate>No</translate></div>
136 137 138 139
        </div>
      </div>
    </div>
    <div class="ui bottom attached tab" data-tab="queue">
140
      <table class="ui compact inverted very basic fixed single line unstackable table">
141 142
        <draggable v-model="tracks" element="tbody" @update="reorder">
          <tr @click="$store.dispatch('queue/currentIndex', index)" v-for="(track, index) in tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
143 144
              <td class="right aligned">{{ index + 1}}</td>
              <td class="center aligned">
145
                  <img class="ui mini image" v-if="track.album.cover && track.album.cover.original" :src="$store.getters['instance/absoluteUrl'](track.album.cover.small_square_crop)">
146 147 148 149 150 151 152
                  <img class="ui mini image" v-else src="../assets/audio/default-cover.png">
              </td>
              <td colspan="4">
                  <strong>{{ track.title }}</strong><br />
                  {{ track.artist.name }}
              </td>
              <td>
153
                <template v-if="$store.getters['favorites/isFavorite'](track.id)">
154
                  <i class="pink heart icon"></i>
155
                </template>
156 157
              </td>
              <td>
158
                  <i @click.stop="cleanTrack(index)" class="circular trash icon"></i>
159 160 161
              </td>
            </tr>
          </draggable>
162
      </table>
163
      <div v-if="$store.state.radios.running" class="ui black message">
164 165
        <div class="content">
          <div class="header">
166
            <i class="feed icon"></i> <translate>You have a radio playing</translate>
167
          </div>
168 169
          <p><translate>New tracks will be appended here automatically.</translate></p>
          <div @click="$store.dispatch('radios/stop')" class="ui basic inverted red button"><translate>Stop radio</translate></div>
170 171 172 173
        </div>
      </div>
    </div>
  </div>
Agate's avatar
Agate committed
174
  <player @next="scrollToCurrent" @previous="scrollToCurrent"></player>
175 176 177 178
</div>
</template>

<script>
179
import {mapState, mapActions} from 'vuex'
180

181 182 183 184
import Player from '@/components/audio/Player'
import Logo from '@/components/Logo'
import SearchBar from '@/components/audio/SearchBar'
import backend from '@/audio/backend'
185
import draggable from 'vuedraggable'
186 187 188 189 190 191 192 193

import $ from 'jquery'

export default {
  name: 'sidebar',
  components: {
    Player,
    SearchBar,
194
    Logo,
195
    draggable
196 197 198
  },
  data () {
    return {
199
      selectedTab: 'library',
200
      backend: backend,
201
      tracksChangeBuffer: null,
202
      isCollapsed: true,
203 204
      fetchInterval: null,
      showAdmin: this.getShowAdmin()
205 206 207 208
    }
  },
  mounted () {
    $(this.$el).find('.menu .item').tab()
209
  },
210 211 212 213 214 215 216 217 218 219
  created () {
    this.fetchNotificationsCount()
    this.fetchInterval = setInterval(
        this.fetchNotificationsCount, 1000 * 60 * 15)
  },
  destroy () {
    if (this.fetchInterval) {
      clearInterval(this.fetchInterval)
    }
  },
220 221
  computed: {
    ...mapState({
222 223
      queue: state => state.queue,
      url: state => state.route.path
224
    }),
Agate's avatar
Agate committed
225 226 227 228 229 230 231 232
    labels () {
      let pendingRequests = this.$gettext('Pending import requests')
      let pendingFollows = this.$gettext('Pending follow requests')
      return {
        pendingRequests,
        pendingFollows
      }
    },
233 234 235 236 237 238 239
    tracks: {
      get () {
        return this.$store.state.queue.tracks
      },
      set (value) {
        this.tracksChangeBuffer = value
      }
Agate's avatar
Agate committed
240 241 242 243 244 245 246
    },
    logoUrl () {
      if (this.$store.state.auth.authenticated) {
        return 'library.index'
      } else {
        return 'index'
      }
247
    }
248
  },
249
  methods: {
250 251 252
    ...mapActions({
      cleanTrack: 'queue/cleanTrack'
    }),
253 254 255 256 257 258 259 260 261 262 263
    getShowAdmin () {
      let adminPermissions = [
        this.$store.state.auth.availablePermissions['federation'],
        this.$store.state.auth.availablePermissions['library'],
        this.$store.state.auth.availablePermissions['upload']
      ]
      return adminPermissions.filter(e => {
        return e
      }).length > 0
    },

264
    fetchNotificationsCount () {
265 266
      this.$store.dispatch('ui/fetchFederationNotificationsCount')
      this.$store.dispatch('ui/fetchImportRequestsCount')
267
    },
268 269
    reorder: function (event) {
      this.$store.commit('queue/reorder', {
270
        tracks: this.tracksChangeBuffer, oldIndex: event.oldIndex, newIndex: event.newIndex})
271 272 273 274 275 276 277 278 279 280 281 282 283 284
    },
    scrollToCurrent () {
      let current = $(this.$el).find('[data-tab="queue"] .active')[0]
      if (!current) {
        return
      }
      let container = $(this.$el).find('.tabs')[0]
      // Position container at the top line then scroll current into view
      container.scrollTop = 0
      current.scrollIntoView(true)
      // Scroll back nothing if element is at bottom of container else do it
      // for half the height of the containers display area
      var scrollBack = (container.scrollHeight - container.scrollTop <= container.clientHeight) ? 0 : container.clientHeight / 2
      container.scrollTop = container.scrollTop - scrollBack
285
    }
286 287 288 289
  },
  watch: {
    url: function () {
      this.isCollapsed = true
290 291 292 293 294 295 296 297 298 299
    },
    selectedTab: function (newValue) {
      if (newValue === 'queue') {
        this.scrollToCurrent()
      }
    },
    '$store.state.queue.currentIndex': function () {
      if (this.selectedTab !== 'queue') {
        this.scrollToCurrent()
      }
300
    },
301
    '$store.state.auth.availablePermissions': {
302
      handler () {
303
        this.showAdmin = this.getShowAdmin()
304 305 306
        this.fetchNotificationsCount()
      },
      deep: true
307
    }
308 309 310 311 312 313
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
314
@import '../style/vendor/media';
315

316
$sidebar-color: #3d3e3f;
317 318

.sidebar {
319
	background: $sidebar-color;
320 321 322 323 324 325 326
  @include media(">tablet") {
    display:flex;
    flex-direction:column;
    justify-content: space-between;
  }
  @include media(">desktop") {
    .collapse.button {
327
      display: none !important;
328 329 330 331 332 333 334 335 336 337 338
    }
  }
  @include media("<desktop") {
    position: static !important;
    width: 100% !important;
    &.collapsed {
      .menu-area, .player-wrapper, .tabs {
        display: none;
      }
    }
  }
339 340 341 342 343

  > div {
    margin: 0;
    background-color: $sidebar-color;
  }
344 345
  .menu.vertical {
    background: $sidebar-color;
346 347 348 349 350
  }
}

.menu-area {
  .menu .item:not(.active):not(:hover) {
Bat's avatar
Bat committed
351
    opacity: 0.75;
352 353
  }

354 355 356 357 358 359 360
  .menu .item {
    border-radius: 0;
  }

  .menu .item.active {
    background-color: $sidebar-color;
    &:hover {
361
      background-color: rgba(255, 255, 255, 0.06);
362 363
    }
  }
364
}
Agate's avatar
Agate committed
365 366 367
.vertical.menu {
  .item .item {
    font-size: 1em;
368 369 370 371 372 373 374
    > i.icon {
      float: none;
      margin: 0 0.5em 0 0;
    }
    &:not(.active) {
      color: rgba(255, 255, 255, 0.75);
    }
Agate's avatar
Agate committed
375 376
  }
}
377
.tabs {
378 379 380
  flex: 1;
  display: flex;
  flex-direction: column;
381
  overflow-y: auto;
382
  justify-content: space-between;
383
  @include media("<desktop") {
384
    max-height: 500px;
385
  }
386
}
387 388 389
.ui.tab.active {
  display: flex;
}
390
.tab[data-tab="queue"] {
391
  flex-direction: column;
392 393 394
  tr {
    cursor: pointer;
  }
Renon's avatar
Renon committed
395 396 397
  td:nth-child(2) {
    width: 55px;
  }
398
}
399 400 401 402 403 404 405 406 407 408 409
.tab[data-tab="library"] {
  flex-direction: column;
  flex: 1 1 auto;
  > .menu {
    flex: 1;
    flex-grow: 1;
  }
  > .player-wrapper {
    width: 100%;
  }
}
410 411 412 413 414 415 416 417 418 419 420 421
.sidebar .segment {
  margin: 0;
  border-radius: 0;
}

.ui.inverted.segment.header-wrapper {
  padding: 0;
}

.logo {
  cursor: pointer;
  display: inline-block;
Bat's avatar
Bat committed
422
  margin: 0px;
423 424 425
}

.ui.search {
Bat's avatar
Bat committed
426
  display: flex;
427 428 429 430 431 432 433

  .collapse.button, .collapse.button:hover, .collapse.button:active {
    box-shadow: none !important;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
434
  }
435
}
Bat's avatar
Bat committed
436

Bat's avatar
Bat committed
437 438 439
.ui.message.black {
  background: $sidebar-color;
}
Renon's avatar
Renon committed
440 441 442 443

.ui.mini.image {
  width: 100%;
}
Bat's avatar
Bat committed
444 445 446 447 448 449 450 451 452 453 454
</style>

<style lang="scss">
.sidebar {
  .ui.search .input {
    flex: 1;
    .prompt {
      border-radius: 0;
    }
  }
}
Agate's avatar
Agate committed
455
.ui.tiny.avatar.image {
Agate's avatar
Agate committed
456 457
  position: relative;
  top: -0.5em;
Agate's avatar
Agate committed
458
  width: 3em;
Agate's avatar
Agate committed
459
}
460
</style>