diff --git a/changes/changelog.d/131.enhancement b/changes/changelog.d/131.enhancement
new file mode 100644
index 000000000..260a8bb6f
--- /dev/null
+++ b/changes/changelog.d/131.enhancement
@@ -0,0 +1 @@
+Removed player from queue tab and consistently show current track in queue (#131)
diff --git a/front/src/components/Sidebar.vue b/front/src/components/Sidebar.vue
index f225313b6..42a923b6b 100644
--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -16,8 +16,8 @@
@@ -96,7 +98,6 @@
-
@@ -121,6 +122,7 @@ export default {
},
data () {
return {
+ selectedTab: 'library',
backend: backend,
isCollapsed: true
}
@@ -140,11 +142,36 @@ export default {
}),
reorder: function (oldValue, newValue) {
this.$store.commit('queue/reorder', {oldValue, newValue})
+ },
+ 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
+ console.log(container.scrollHeight - container.scrollTop, container.clientHeight)
}
},
watch: {
url: function () {
this.isCollapsed = true
+ },
+ selectedTab: function (newValue) {
+ if (newValue === 'queue') {
+ this.scrollToCurrent()
+ }
+ },
+ '$store.state.queue.currentIndex': function () {
+ if (this.selectedTab !== 'queue') {
+ this.scrollToCurrent()
+ }
}
}
}
@@ -204,19 +231,38 @@ $sidebar-color: #3D3E3F;
}
}
.tabs {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
overflow-y: auto;
+ justify-content: space-between;
@include media(">tablet") {
height: 0px;
}
@include media(" .menu {
+ flex: 1;
+ flex-grow: 1;
+ }
+ > .player-wrapper {
+ width: 100%;
+ }
+}
.sidebar .segment {
margin: 0;
border-radius: 0;
@@ -225,9 +271,6 @@ $sidebar-color: #3D3E3F;
.ui.inverted.segment.header-wrapper {
padding: 0;
}
-.tabs {
- flex: 1;
-}
.logo {
cursor: pointer;