Sidebar.vue 8.71 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">
5
6
7
8
      <router-link :title="'Funkwhale'" :to="{name: 'index'}">
        <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
20
      <a class="active item" @click="selectedTab = 'library'" data-tab="library">Browse</a>
      <a class="item" @click="selectedTab = 'queue'" data-tab="queue">
21
22
23
24
25
26
27
28
29
30
31
        Queue &nbsp;
         <template v-if="queue.tracks.length === 0">
           (empty)
         </template>
         <template v-else>
           ({{ queue.currentIndex + 1}} of {{ queue.tracks.length }})
         </template>
      </a>
    </div>
  </div>
  <div class="tabs">
32
    <div class="ui bottom attached active tab" data-tab="library">
33
      <div class="ui inverted vertical fluid menu">
34
35
        <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'profile', params: {username: $store.state.auth.username}}"><i class="user icon"></i> Logged in as {{ $store.state.auth.username }}</router-link>
        <router-link class="item" v-if="$store.state.auth.authenticated" :to="{name: 'logout'}"><i class="sign out icon"></i> Logout</router-link>
36
        <router-link class="item" v-else :to="{name: 'login'}"><i class="sign in icon"></i> Login</router-link>
37
        <router-link class="item" :to="{path: '/library'}"><i class="sound icon"> </i>Browse library</router-link>
38
        <router-link class="item" v-if="$store.state.auth.authenticated" :to="{path: '/favorites'}"><i class="heart icon"></i> Favorites</router-link>
Eliot Berriot's avatar
Eliot Berriot committed
39
40
41
42
43
44
        <a
          @click="$store.commit('playlists/chooseTrack', null)"
          v-if="$store.state.auth.authenticated"
          class="item">
          <i class="list icon"></i> Playlists
        </a>
Eliot Berriot's avatar
Eliot Berriot committed
45
46
47
        <router-link
          v-if="$store.state.auth.authenticated"
          class="item" :to="{path: '/activity'}"><i class="bell icon"></i> Activity</router-link>
48
49
        <router-link
          class="item" v-if="$store.state.auth.availablePermissions['federation.manage']"
50
          :to="{path: '/manage/federation/libraries'}"><i class="sitemap icon"></i> Federation</router-link>
51
      </div>
52
53

      <player></player>
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    </div>
    <div v-if="queue.previousQueue " class="ui black icon message">
      <i class="history icon"></i>
      <div class="content">
        <div class="header">
          Do you want to restore your previous queue?
        </div>
        <p>{{ queue.previousQueue.tracks.length }} tracks</p>
        <div class="ui two buttons">
          <div @click="queue.restore()" class="ui basic inverted green button">Yes</div>
          <div @click="queue.removePrevious()" class="ui basic inverted red button">No</div>
        </div>
      </div>
    </div>
    <div class="ui bottom attached tab" data-tab="queue">
69
      <table class="ui compact inverted very basic fixed single line unstackable table">
70
        <draggable v-model="queue.tracks" element="tbody" @update="reorder">
71
          <tr @click="$store.dispatch('queue/currentIndex', index)" v-for="(track, index) in queue.tracks" :key="index" :class="[{'active': index === queue.currentIndex}]">
72
73
74
75
76
77
78
79
80
81
              <td class="right aligned">{{ index + 1}}</td>
              <td class="center aligned">
                  <img class="ui mini image" v-if="track.album.cover" :src="backend.absoluteUrl(track.album.cover)">
                  <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>
82
                <template v-if="$store.getters['favorites/isFavorite'](track.id)">
83
                  <i class="pink heart icon"></i>
84
                </template>
85
86
              </td>
              <td>
87
                  <i @click.stop="cleanTrack(index)" class="circular trash icon"></i>
88
89
90
              </td>
            </tr>
          </draggable>
91
      </table>
92
      <div v-if="$store.state.radios.running" class="ui black message">
93
94
95
96
97
98

        <div class="content">
          <div class="header">
            <i class="feed icon"></i> You have a radio playing
          </div>
          <p>New tracks will be appended here automatically.</p>
99
          <div @click="$store.dispatch('radios/stop')" class="ui basic inverted red button">Stop radio</div>
100
101
102
103
104
105
106
107
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
108
import {mapState, mapActions} from 'vuex'
109

110
111
112
113
import Player from '@/components/audio/Player'
import Logo from '@/components/Logo'
import SearchBar from '@/components/audio/SearchBar'
import backend from '@/audio/backend'
114
import draggable from 'vuedraggable'
115
116
117
118
119
120
121
122

import $ from 'jquery'

export default {
  name: 'sidebar',
  components: {
    Player,
    SearchBar,
123
    Logo,
124
    draggable
125
126
127
  },
  data () {
    return {
128
      selectedTab: 'library',
129
130
      backend: backend,
      isCollapsed: true
131
132
133
134
    }
  },
  mounted () {
    $(this.$el).find('.menu .item').tab()
135
  },
136
137
  computed: {
    ...mapState({
138
139
      queue: state => state.queue,
      url: state => state.route.path
140
141
    })
  },
142
  methods: {
143
144
145
146
147
    ...mapActions({
      cleanTrack: 'queue/cleanTrack'
    }),
    reorder: function (oldValue, newValue) {
      this.$store.commit('queue/reorder', {oldValue, newValue})
148
149
150
151
152
153
154
155
156
157
158
159
160
161
    },
    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
162
    }
163
164
165
166
  },
  watch: {
    url: function () {
      this.isCollapsed = true
167
168
169
170
171
172
173
174
175
176
    },
    selectedTab: function (newValue) {
      if (newValue === 'queue') {
        this.scrollToCurrent()
      }
    },
    '$store.state.queue.currentIndex': function () {
      if (this.selectedTab !== 'queue') {
        this.scrollToCurrent()
      }
177
    }
178
179
180
181
182
183
  }
}
</script>

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

186
$sidebar-color: #3D3E3F;
187
188

.sidebar {
189
	background: $sidebar-color;
190
191
192
193
194
195
196
  @include media(">tablet") {
    display:flex;
    flex-direction:column;
    justify-content: space-between;
  }
  @include media(">desktop") {
    .collapse.button {
197
      display: none !important;
198
199
200
201
202
203
204
205
206
207
208
    }
  }
  @include media("<desktop") {
    position: static !important;
    width: 100% !important;
    &.collapsed {
      .menu-area, .player-wrapper, .tabs {
        display: none;
      }
    }
  }
209
210
211
212
213

  > div {
    margin: 0;
    background-color: $sidebar-color;
  }
214
215
  .menu.vertical {
    background: $sidebar-color;
216
217
218
219
220
  }
}

.menu-area {
  .menu .item:not(.active):not(:hover) {
Bat's avatar
Bat committed
221
    opacity: 0.75;
222
223
  }

224
225
226
227
228
229
230
  .menu .item {
    border-radius: 0;
  }

  .menu .item.active {
    background-color: $sidebar-color;
    &:hover {
231
      background-color: rgba(255, 255, 255, 0.06);
232
233
    }
  }
234
235
}
.tabs {
236
237
238
  flex: 1;
  display: flex;
  flex-direction: column;
239
  overflow-y: auto;
240
  justify-content: space-between;
241
  @include media("<desktop") {
242
    max-height: 500px;
243
  }
244
}
245
246
247
.ui.tab.active {
  display: flex;
}
248
.tab[data-tab="queue"] {
249
  flex-direction: column;
250
251
252
253
  tr {
    cursor: pointer;
  }
}
254
255
256
257
258
259
260
261
262
263
264
.tab[data-tab="library"] {
  flex-direction: column;
  flex: 1 1 auto;
  > .menu {
    flex: 1;
    flex-grow: 1;
  }
  > .player-wrapper {
    width: 100%;
  }
}
265
266
267
268
269
270
271
272
273
274
275
276
.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
277
  margin: 0px;
278
279
280
}

.ui.search {
Bat's avatar
Bat committed
281
  display: flex;
282
283
284
285
286
287
288

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

Bat's avatar
Bat committed
292
293
294
.ui.message.black {
  background: $sidebar-color;
}
Bat's avatar
Bat committed
295
296
297
298
299
300
301
302
303
304
305
</style>

<style lang="scss">
.sidebar {
  .ui.search .input {
    flex: 1;
    .prompt {
      border-radius: 0;
    }
  }
}
306
</style>