More Components
This commit is contained in:
booploops
parent
64444b2123
commit
220b7d4498
3 changed files with 190 additions and 18 deletions
|
|
@ -31,20 +31,23 @@
|
|||
<div class="app-title"></div>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small shuffle"></button>
|
||||
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" @click="mk.shuffleMode = 1"></button>
|
||||
<button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button previous"></button>
|
||||
<button class="playback-button previous" @click="mk.skipToPreviousItem()"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
|
||||
<button class="playback-button play" @click="mk.play()" v-else></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button next"></button>
|
||||
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small repeat"></button>
|
||||
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0" @click="mk.repeatMode = 1"></button>
|
||||
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2" v-else-if="mk.repeatMode == 1"></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome--center">
|
||||
|
|
@ -188,18 +191,18 @@
|
|||
<template v-if="page == 'search'">
|
||||
<h1 class="header-text">{{ search.term }}</h1>
|
||||
<template v-if="search.results['meta']">
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Artists</h3>
|
||||
<mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Songs</h3>
|
||||
<mediaitem-square :item="item" v-for="item in search.results.songs.data"></mediaitem-square>
|
||||
<mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item>
|
||||
</template>
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Albums</h3>
|
||||
<mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Artists</h3>
|
||||
<mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.songs">
|
||||
<h3>Playlists</h3>
|
||||
<mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
|
||||
|
|
@ -215,11 +218,58 @@
|
|||
<div class="bg-artwork"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-list-item">
|
||||
<template>
|
||||
<div @click="$parent.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-list-item">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 55)}
|
||||
"></div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis">
|
||||
<template v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-hrect">
|
||||
<template>
|
||||
<div @click="$parent.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-hrect">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 70)}
|
||||
"></div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis">
|
||||
{{ item.type }}
|
||||
<template v-if="item.attributes.artistName">
|
||||
∙ {{ item.attributes.artistName }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-square">
|
||||
<template>
|
||||
<div @click="$parent.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-square">
|
||||
<div class="artwork" :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 80)}"></div>
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,20 @@ Vue.component('mediaitem-square', {
|
|||
}
|
||||
});
|
||||
|
||||
Vue.component('mediaitem-hrect', {
|
||||
template: '#mediaitem-hrect',
|
||||
props: ['item'],
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('mediaitem-list-item', {
|
||||
template: '#mediaitem-list-item',
|
||||
props: ['item'],
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
|
||||
const app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
:root {
|
||||
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
|
||||
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
|
||||
--mediaItemRadius: 4px;
|
||||
--mediaItemRadiusRound: 100%;
|
||||
--keyColor: #fa586a;
|
||||
--keyColor-rgb: 250, 88, 106;
|
||||
--keyColor-rollover: #ff8a9c;
|
||||
|
|
@ -1212,10 +1214,106 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square {
|
||||
/* mediaitem-list-item */
|
||||
.cd-mediaitem-list-item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: contain;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
background-repeat: no-repeat;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork.round {
|
||||
border-radius: var(--mediaItemRadiusRound);
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .info-rect {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .subtitle {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* mediaitem-hrect */
|
||||
.cd-mediaitem-hrect {
|
||||
background: rgb(255 255 255 / 18%);
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
width: 264px;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .artwork {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: contain;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
background-repeat: no-repeat;
|
||||
margin: 18px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .artwork.round {
|
||||
border-radius: var(--mediaItemRadiusRound);
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .info-rect {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .subtitle {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* mediaitem-square */
|
||||
.cd-mediaitem-square {
|
||||
width: 200px;
|
||||
height: 190px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
|
|
@ -1226,18 +1324,28 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .artwork {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
background: blue;
|
||||
border-radius: 100%;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: contain;
|
||||
background-size: cover;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .artwork.round {
|
||||
border-radius: var(--mediaItemRadiusRound);
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .title {
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue