Sidebar.vue 13.7 KB
Newer Older
1
<template>
2
3
<aside :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar',]">
  <header class="ui inverted segment header-wrapper">
4
    <search-bar @search="isCollapsed = false">
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
    </search-bar>
15
  </header>
16
17
18

  <div class="menu-area">
    <div class="ui compact fluid two item inverted menu">
19
20
      <a :class="[{active: selectedTab === 'library'}, 'item']" role="button" @click.prevent.stop="selectedTab = 'library'" data-tab="library"><translate>Browse</translate></a>
      <a :class="[{active: selectedTab === 'queue'}, 'item']" role="button" @click.prevent.stop="selectedTab = 'queue'" data-tab="queue">
21
        <translate>Queue</translate>&nbsp;
22
         <template v-if="queue.tracks.length === 0">
23
           <translate>(empty)</translate>
24
         </template>
Eliot Berriot's avatar
Eliot Berriot 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
    <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'library'}, 'tab']" :aria-label="labels.mainMenu">
33
      <nav class="ui inverted vertical large fluid menu" role="navigation" :aria-label="labels.mainMenu">
34
        <div class="item">
35
          <header class="header"><translate>My account</translate></header>
36
          <div class="menu">
Eliot Berriot's avatar
Eliot Berriot 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>
Eliot Berriot's avatar
Eliot Berriot committed
42
              <img class="ui right floated circular tiny avatar image" v-if="$store.state.auth.profile.avatar.square_crop" v-lazy="$store.getters['instance/absoluteUrl']($store.state.auth.profile.avatar.square_crop)" />
Eliot Berriot's avatar
Eliot Berriot 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
46
47
48
49
50
51
52
            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'notifications'}">
              <i class="feed icon"></i>
              <translate>Notifications</translate>
              <div
                v-if="$store.state.ui.notifications.inbox > 0"
                :class="['ui', 'teal', 'label']">
                {{ $store.state.ui.notifications.inbox }}</div>
            </router-link>
53
            <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
54
55
56
            <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'}">
Eliot Berriot's avatar
Eliot Berriot committed
57
                <i class="corner add icon"></i>
emillumine's avatar
emillumine committed
58
59
60
                <translate>Create an account</translate>
              </router-link>
            </template>
61
62
63
          </div>
        </div>
        <div class="item">
64
          <header class="header"><translate>Music</translate></header>
65
          <div class="menu">
66
            <router-link class="item" :to="{path: '/library'}"><i class="sound icon"></i><translate>Browse library</translate></router-link>
67
            <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/favorites'}"><i class="heart icon"></i><translate>Favorites</translate></router-link>
68
69
70
71
            <a
              @click="$store.commit('playlists/chooseTrack', null)"
              v-if="$store.state.auth.authenticated"
              class="item">
72
              <i class="list icon"></i><translate>Playlists</translate>
73
            </a>
74
75
76
            <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>
77
78
          </div>
        </div>
79
        <div class="item" v-if="$store.state.auth.availablePermissions['settings'] || $store.state.auth.availablePermissions['moderation']">
80
          <header class="header"><translate>Administration</translate></header>
81
          <div class="menu">
82
            <router-link
83
              v-if="$store.state.auth.availablePermissions['settings']"
84
85
              class="item"
              :to="{path: '/manage/settings'}">
86
              <i class="settings icon"></i><translate>Settings</translate>
87
            </router-link>
Eliot Berriot's avatar
Eliot Berriot committed
88
            <router-link
89
              v-if="$store.state.auth.availablePermissions['settings']"
Eliot Berriot's avatar
Eliot Berriot committed
90
              class="item"
91
              :to="{name: 'manage.users.users.list'}">
92
              <i class="users icon"></i><translate>Users</translate>
Eliot Berriot's avatar
Eliot Berriot committed
93
            </router-link>
94
95
96
97
98
99
            <router-link
              v-if="$store.state.auth.availablePermissions['moderation']"
              class="item"
              :to="{name: 'manage.moderation.domains.list'}">
              <i class="shield icon"></i><translate>Moderation</translate>
            </router-link>
100
101
          </div>
        </div>
102
103
      </nav>
    </section>
104
105
106
107
    <div v-if="queue.previousQueue " class="ui black icon message">
      <i class="history icon"></i>
      <div class="content">
        <div class="header">
108
          <translate>Do you want to restore your previous queue?</translate>
109
        </div>
Eliot Berriot's avatar
Eliot Berriot committed
110
111
112
113
114
115
116
117
        <p>
          <translate
            translate-plural="%{ count } tracks"
            :translate-n="queue.previousQueue.tracks.length"
            :translate-params="{count: queue.previousQueue.tracks.length}">
            %{ count } track
          </translate>
        </p>
118
        <div class="ui two buttons">
119
120
          <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>
121
122
123
        </div>
      </div>
    </div>
124
    <section :class="['ui', 'bottom', 'attached', {active: selectedTab === 'queue'}, 'tab']">
125
      <table class="ui compact inverted very basic fixed single line unstackable table">
126
        <draggable v-model="tracks" element="tbody" @update="reorder">
127
128
129
130
131
          <tr
              @click="$store.dispatch('queue/currentIndex', index)"
              v-for="(track, index) in tracks"
              :key="index"
              :class="[{'active': index === queue.currentIndex}]">
132
133
              <td class="right aligned">{{ index + 1}}</td>
              <td class="center aligned">
134
                  <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)">
135
136
137
                  <img class="ui mini image" v-else src="../assets/audio/default-cover.png">
              </td>
              <td colspan="4">
138
                  <button class="title reset ellipsis" :title="track.title" :aria-label="labels.selectTrack">
139
                    <strong>{{ track.title }}</strong><br />
140
141
142
                    <span>
                      {{ track.artist.name }}
                    </span>
143
                  </button>
144
145
              </td>
              <td>
146
                <template v-if="$store.getters['favorites/isFavorite'](track.id)">
147
                  <i class="pink heart icon"></i>
148
                </template>
149
150
              </td>
              <td>
151
                  <button :title="labels.removeFromQueue" @click.stop="cleanTrack(index)" :class="['ui', {'inverted': index != queue.currentIndex}, 'really', 'tiny', 'basic', 'circular', 'icon', 'button']">
152
153
                    <i class="trash icon"></i>
                  </button>
154
155
156
              </td>
            </tr>
          </draggable>
157
      </table>
158
      <div v-if="$store.state.radios.running" class="ui black message">
159
160
        <div class="content">
          <div class="header">
161
            <i class="feed icon"></i> <translate>You have a radio playing</translate>
162
          </div>
163
164
          <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>
165
166
        </div>
      </div>
167
    </section>
168
  </div>
169
  <player @next="scrollToCurrent" @previous="scrollToCurrent"></player>
170
</aside>
171
172
173
</template>

<script>
174
import { mapState, mapActions } from "vuex"
175

176
177
178
179
180
import Player from "@/components/audio/Player"
import Logo from "@/components/Logo"
import SearchBar from "@/components/audio/SearchBar"
import backend from "@/audio/backend"
import draggable from "vuedraggable"
181

182
import $ from "jquery"
183
184

export default {
185
  name: "sidebar",
186
187
188
  components: {
    Player,
    SearchBar,
189
    Logo,
190
    draggable
191
  },
192
  data() {
193
    return {
194
      selectedTab: "library",
195
      backend: backend,
196
      tracksChangeBuffer: null,
197
      isCollapsed: true,
198
      fetchInterval: null
199
200
    }
  },
201
  destroy() {
202
203
204
205
    if (this.fetchInterval) {
      clearInterval(this.fetchInterval)
    }
  },
206
207
  computed: {
    ...mapState({
208
209
      queue: state => state.queue,
      url: state => state.route.path
210
    }),
211
212
213
214
    labels() {
      let mainMenu = this.$gettext("Main menu")
      let selectTrack = this.$gettext("Play this track")
      let pendingFollows = this.$gettext("Pending follow requests")
Eliot Berriot's avatar
Eliot Berriot committed
215
      return {
216
217
218
        pendingFollows,
        mainMenu,
        selectTrack
Eliot Berriot's avatar
Eliot Berriot committed
219
220
      }
    },
221
    tracks: {
222
      get() {
223
224
        return this.$store.state.queue.tracks
      },
225
      set(value) {
226
227
        this.tracksChangeBuffer = value
      }
228
    },
229
    logoUrl() {
230
      if (this.$store.state.auth.authenticated) {
231
        return "library.index"
232
      } else {
233
        return "index"
234
      }
235
    }
236
  },
237
  methods: {
238
    ...mapActions({
239
      cleanTrack: "queue/cleanTrack"
240
    }),
241
242
243
244
245
246
    reorder: function(event) {
      this.$store.commit("queue/reorder", {
        tracks: this.tracksChangeBuffer,
        oldIndex: event.oldIndex,
        newIndex: event.newIndex
      })
247
    },
248
    scrollToCurrent() {
249
250
251
252
      let current = $(this.$el).find('[data-tab="queue"] .active')[0]
      if (!current) {
        return
      }
253
      let container = $(this.$el).find(".tabs")[0]
254
255
256
257
258
      // 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
259
260
261
262
      var scrollBack =
        container.scrollHeight - container.scrollTop <= container.clientHeight
          ? 0
          : container.clientHeight / 2
263
      container.scrollTop = container.scrollTop - scrollBack
264
    }
265
266
  },
  watch: {
267
    url: function() {
268
      this.isCollapsed = true
269
    },
270
271
    selectedTab: function(newValue) {
      if (newValue === "queue") {
272
273
274
        this.scrollToCurrent()
      }
    },
275
276
    "$store.state.queue.currentIndex": function() {
      if (this.selectedTab !== "queue") {
277
278
        this.scrollToCurrent()
      }
279
    }
280
281
282
283
284
285
  }
}
</script>

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

288
$sidebar-color: #3d3e3f;
289
290

.sidebar {
291
  background: $sidebar-color;
292
  @include media(">tablet") {
293
294
    display: flex;
    flex-direction: column;
295
296
297
298
    justify-content: space-between;
  }
  @include media(">desktop") {
    .collapse.button {
299
      display: none !important;
300
301
302
303
304
305
    }
  }
  @include media("<desktop") {
    position: static !important;
    width: 100% !important;
    &.collapsed {
306
307
308
      .menu-area,
      .player-wrapper,
      .tabs {
309
310
311
312
        display: none;
      }
    }
  }
313
314
315
316
317

  > div {
    margin: 0;
    background-color: $sidebar-color;
  }
318
319
  .menu.vertical {
    background: $sidebar-color;
320
321
322
323
324
  }
}

.menu-area {
  .menu .item:not(.active):not(:hover) {
Bat's avatar
Bat committed
325
    opacity: 0.75;
326
327
  }

328
329
330
331
332
333
334
  .menu .item {
    border-radius: 0;
  }

  .menu .item.active {
    background-color: $sidebar-color;
    &:hover {
335
      background-color: rgba(255, 255, 255, 0.06);
336
337
    }
  }
338
}
339
340
341
.vertical.menu {
  .item .item {
    font-size: 1em;
342
343
344
345
346
347
348
    > i.icon {
      float: none;
      margin: 0 0.5em 0 0;
    }
    &:not(.active) {
      color: rgba(255, 255, 255, 0.75);
    }
349
350
  }
}
351
.tabs {
352
353
354
  flex: 1;
  display: flex;
  flex-direction: column;
355
  overflow-y: auto;
356
  justify-content: space-between;
357
  @include media("<desktop") {
358
    max-height: 500px;
359
  }
360
}
361
362
363
.ui.tab.active {
  display: flex;
}
364
.tab[data-tab="queue"] {
365
  flex-direction: column;
366
367
368
  tr {
    cursor: pointer;
  }
Renon's avatar
Renon committed
369
370
371
  td:nth-child(2) {
    width: 55px;
  }
372
}
373
374
375
376
377
378
379
380
381
382
383
.tab[data-tab="library"] {
  flex-direction: column;
  flex: 1 1 auto;
  > .menu {
    flex: 1;
    flex-grow: 1;
  }
  > .player-wrapper {
    width: 100%;
  }
}
384
385
386
387
388
389
390
391
392
393
394
395
.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
396
  margin: 0px;
397
398
399
}

.ui.search {
Bat's avatar
Bat committed
400
  display: flex;
401

402
403
404
  .collapse.button,
  .collapse.button:hover,
  .collapse.button:active {
405
406
407
408
409
    box-shadow: none !important;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
410
  }
411
}
Bat's avatar
Bat committed
412

Bat's avatar
Bat committed
413
414
415
.ui.message.black {
  background: $sidebar-color;
}
Renon's avatar
Renon committed
416
417
418
419

.ui.mini.image {
  width: 100%;
}
Bat's avatar
Bat committed
420
421
422
423
424
425
426
427
428
429
430
</style>

<style lang="scss">
.sidebar {
  .ui.search .input {
    flex: 1;
    .prompt {
      border-radius: 0;
    }
  }
}
431
.ui.tiny.avatar.image {
Eliot Berriot's avatar
Eliot Berriot committed
432
433
  position: relative;
  top: -0.5em;
434
  width: 3em;
Eliot Berriot's avatar
Eliot Berriot committed
435
}
436
437
438
439

:not(.active) button.title {
  outline-color: white;
}
440
</style>