okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added sticky header to playlist/albums

Browse source
This commit is contained in:
booploops 2022-01-18 03:44:28 -08:00
parent 2e5381df04
commit 274454af8a
2 changed files with 59 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/renderer/views/pages/cider-playlist.ejs
View file

@ -61,7 +61,7 @@
</button>
</div>
</template>
<div class="playlist-controls">
<div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
<button class="md-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 0; play()">
Play
@ -78,7 +78,7 @@
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
Confirm?
</button>
<button class="playlist-more" @click="menu">
<button class="playlist-more" style="float:right;" @click="menu">
<div style=" margin-top: -1px;
margin-left: -5px;
width: 36px;
@ -95,6 +95,44 @@
</div>
</div>
<div class="playlist-floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="row">
<div class="col">
<h3>{{data.attributes ? (data.attributes.name ??
(data.attributes.title ?? '') ?? '') : ''}}</h3>
</div>
<div class="col-auto flex-center">
<div>
<button class="md-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 0; play()">
Play
</button>
<button class="md-btn" style="min-width: 120px;"
@click="app.mk.shuffleMode = 1;play()">
Shuffle
</button>
<button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()">
{{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
</button>
<button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
Confirm?
</button>
</div>
</div>
<div class="col-auto flex-center">
<button class="playlist-more" @click="menu">
<div style=" margin-top: -1px;
margin-left: -5px;
width: 36px;
height: 36px;">
<%- include("../svg/more.svg") %>
</div>
</button>
</div>
</div>
</div>
<div class="playlist-body">
<div class="well">
<div style="width:100%">
@ -147,7 +185,8 @@
confirm: false,
app: this.$root,
itemBadges: [],
badgesRequested: false
badgesRequested: false,
headerVisible: true
}
},
mounted: function () {
@ -162,6 +201,9 @@
}
},
methods: {
isHeaderVisible(visible) {
this.headerVisible = visible
},
getBadges() {
return
if (this.badgesRequested) {