Added artist and song radios, added play button on artist pages, added artist page menu (needs glyph)
This commit is contained in:
booploops
parent
147f056270
commit
2837c9d57e
4 changed files with 127 additions and 43 deletions
|
|
@ -14,31 +14,6 @@ Vue.component('lyrics-view', {
|
|||
});
|
||||
|
||||
// This is going to suck to code
|
||||
var CiderContextMenus = {
|
||||
mediaitem: function (mediaitem) {
|
||||
this.items = [
|
||||
{
|
||||
"name": "Add to Library",
|
||||
"action": function(song) {
|
||||
console.log("Adding song to library");
|
||||
console.log(mediaitem.attributes.name)
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Add to Playlist",
|
||||
"action": function(song) {
|
||||
console.log("Adding song to playlist");
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Add to Queue",
|
||||
"action": function(song) {
|
||||
console.log("Adding song to queue");
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
var CiderContextMenu = {
|
||||
Menu: function (event) {
|
||||
this.items = []
|
||||
|
|
@ -48,11 +23,10 @@ var CiderContextMenu = {
|
|||
var menu = document.createElement("div");
|
||||
menu.classList.add("context-menu-body");
|
||||
menuBackground.classList.add("context-menu");
|
||||
menu.style.left = event.clientX + "px";
|
||||
menu.style.top = event.clientY + "px";
|
||||
menu.style.left = 0 + "px";
|
||||
menu.style.top = 0 + "px";
|
||||
menu.style.position = "absolute";
|
||||
menu.style.zIndex = "99909";
|
||||
menu.style.minWidth = "120px"
|
||||
|
||||
// when menubackground is clicked, remove it
|
||||
menuBackground.addEventListener("click", function () {
|
||||
|
|
@ -64,6 +38,8 @@ var CiderContextMenu = {
|
|||
menuBackground.appendChild(menu);
|
||||
|
||||
document.body.appendChild(menuBackground);
|
||||
|
||||
|
||||
// for each item in menudata create a menu item
|
||||
for (var i = 0; i < menudata.items.length; i++) {
|
||||
var item = document.createElement("button")
|
||||
|
|
@ -73,13 +49,17 @@ var CiderContextMenu = {
|
|||
item.onclick = menudata.items[i].action
|
||||
menu.appendChild(item)
|
||||
}
|
||||
// if menu would be off the screen, move it into view
|
||||
if (event.clientX + menu.offsetWidth > window.innerWidth) {
|
||||
menu.style.width = (menu.offsetWidth + 10) + "px";
|
||||
menu.style.left = event.clientX + "px";
|
||||
menu.style.top = event.clientY + "px";
|
||||
// if menu would be off the screen, move it into view, but preserve the width
|
||||
if (menu.offsetLeft + menu.offsetWidth > window.innerWidth) {
|
||||
menu.style.left = (window.innerWidth - menu.offsetWidth) + "px";
|
||||
}
|
||||
if (event.clientY + menu.offsetHeight > window.innerHeight) {
|
||||
if (menu.offsetTop + menu.offsetHeight > window.innerHeight) {
|
||||
menu.style.top = (window.innerHeight - menu.offsetHeight) + "px";
|
||||
}
|
||||
|
||||
return menuBackground;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1631,20 +1631,26 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
padding: 0px;
|
||||
|
||||
.artist-header {
|
||||
background: var(--keyColor);
|
||||
background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 300px;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
|
||||
.col.flex-center.artist-animation-on {
|
||||
width: 100%;
|
||||
display: block;
|
||||
flex: unset;
|
||||
margin-left: 2.3em;
|
||||
color: whitesmoke;
|
||||
.artist-more {
|
||||
border-radius: 100%;
|
||||
background: var(--keyColor);
|
||||
box-shadow: var(--mediaItemShadow-Shadow);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
right: 32px;
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.animated {
|
||||
|
|
@ -1676,6 +1682,60 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 32px;
|
||||
position: relative;
|
||||
.overlay-play {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
opacity:0;
|
||||
background: rgb(0 0 0 / 50%);
|
||||
transition: opacity 0.1s var(--appleEase);
|
||||
border-radius: 100%;
|
||||
z-index:1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border:0px;
|
||||
padding:0px;
|
||||
&:hover {
|
||||
opacity:1;
|
||||
}
|
||||
>svg {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.artist-title {
|
||||
.artist-play {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--keyColor);
|
||||
border-radius: 100%;
|
||||
margin: 14px;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border:0px;
|
||||
padding:0px;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
&.artist-animation-on {
|
||||
width: 100%;
|
||||
flex: unset;
|
||||
margin-left: 0.5em;
|
||||
color: whitesmoke;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
.artist-play {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.artist-body {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script type="text/x-template" id="mediaitem-list-item">
|
||||
<template>
|
||||
<div v-observe-visibility="{callback: visibilityChanged}"
|
||||
@contextmenu="CiderContextMenu.Create($event, new CiderContextMenus.mediaitem(item))"
|
||||
@contextmenu="contextMenu"
|
||||
class="cd-mediaitem-list-item">
|
||||
<template v-if="isVisible">
|
||||
<div class="isLibrary" v-if="showLibraryStatus == true">
|
||||
|
|
@ -71,6 +71,22 @@
|
|||
'show-duration': {type: Boolean, default: true}
|
||||
},
|
||||
methods: {
|
||||
contextMenu(event) {
|
||||
let self = this
|
||||
CiderContextMenu.Create(event,
|
||||
{
|
||||
items: [
|
||||
{
|
||||
"name": "Start Radio",
|
||||
"action": function() {
|
||||
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(()=>{
|
||||
app.mk.play()
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
this.isVisible = isVisible
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,20 +7,25 @@
|
|||
</animatedartwork-view>
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;">
|
||||
<div class="artist-image">
|
||||
<div class="artist-image" v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
|
||||
<mediaitem-artwork
|
||||
:shadow="true"
|
||||
v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))"
|
||||
|
||||
:url="data.attributes.artwork ? data.attributes.artwork.url : ''"
|
||||
size="220" type="artists"></mediaitem-artwork>
|
||||
<button class="overlay-play">
|
||||
<%- include("../svg/play.svg") %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col flex-center"
|
||||
<div class="col flex-center artist-title"
|
||||
:class="{'artist-animation-on': (data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)) }"
|
||||
>
|
||||
<button class="artist-play"><%- include("../svg/play.svg") %></button>
|
||||
<h1>{{ data.attributes.name }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<button class="artist-more" @click="artistMenu"></button>
|
||||
</div>
|
||||
<div class="artist-body">
|
||||
<div class="row well">
|
||||
|
|
@ -115,6 +120,29 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
artistMenu (event) {
|
||||
let self = this
|
||||
CiderContextMenu.Create(event, {
|
||||
items: [
|
||||
{
|
||||
name: "Play Artist Radio",
|
||||
action: ()=>{
|
||||
app.mk.setStationQueue({artist:self.data.id}).then(()=>{
|
||||
app.mk.play()
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Follow Artist",
|
||||
action: ()=>{}
|
||||
},
|
||||
{
|
||||
name: "Share",
|
||||
action: ()=>{}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
getArtistPalette(artist) {
|
||||
if (artist["attributes"]["artwork"]) {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue