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

added square mediaitem component

Browse source
This commit is contained in:
booploops 2021-12-02 22:56:23 -08:00
parent a7d87b7fa1
commit 2da89b81b1
4 changed files with 345 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

78
resources/cider-ui-tests/index.html
View file

@ -2,15 +2,15 @@
<html lang="en">
<head>
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
@ -23,7 +23,7 @@
</head>
<body oncontextmenu="return false;">
<div id="app">
<div id="app">
<div id="app-main">
<div class="app-chrome">
<div class="app-chrome--left">
@ -57,7 +57,8 @@
{{ mk.nowPlayingItem["attributes"]["name"] }}
</div>
<div class="song-artist">
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }}
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{
mk.nowPlayingItem["attributes"]["albumName"] }}
</div>
<div class="song-progress">
<input type="range" step="0.01" min="0"
@ -74,7 +75,8 @@
</div>
<div class="app-chrome--right">
<div class="app-chrome-item volume display--large">
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'">
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small">
@ -107,6 +109,7 @@
<div class="search-input-container">
<div class="search-input--icon"></div>
<input type="search"
spellcheck="false"
@click="showSearch()"
@change="showSearch();searchQuery()"
placeholder="Search..."
@ -157,7 +160,8 @@
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
</template>
<div><input type="text" v-model="quickPlayQuery">
<button @click="quickPlay(quickPlayQuery)">Play</button></div>
<button @click="quickPlay(quickPlayQuery)">Play</button>
</div>
<h1 class="header-text">Browse</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
@ -186,39 +190,19 @@
<template v-if="search.results['meta']">
<template v-if="search.results.songs">
<h3>Songs</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.songs.data">
<b>{{ item.attributes.name }}</b>
<br>
{{ item.attributes.artistName }}
</button>
<mediaitem-square :item="item" v-for="item in search.results.songs.data"></mediaitem-square>
</template>
<template v-if="search.results.songs">
<h3>Albums</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.albums.data">
<b>{{ item.attributes.name }}</b>
<br>
{{ item.attributes.artistName }}
</button>
<mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
</template>
<template v-if="search.results.songs">
<h3>Artists</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.artists.data">
{{ item.attributes.name }}
</button>
<mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
</template>
<template v-if="search.results.songs">
<h3>Playlists</h3>
<button
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.playlists.data">
{{ item.attributes.name }}
</button>
<mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
</template>
</template>
</template>
@ -229,9 +213,25 @@
</div>
</div>
<div class="bg-artwork"></div>
</div>
<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="$parent.getMediaItemArtwork(item.attributes.artwork.url)"></div>
<div class="title text-overflow-elipsis">
{{ item.attributes.name }}
</div>
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
<script src="index.js?v=1"></script>
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
{{ item.attributes.artistName }}
</div>
</div>
</template>
</script>
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
<script src="index.js?v=1"></script>
</body>
</html>

12
resources/cider-ui-tests/index.js
View file

@ -1,4 +1,11 @@
var app = new Vue({
Vue.component('mediaitem-square', {
template: '#mediaitem-square',
props: ['item'],
methods: {
}
});
const app = new Vue({
el: "#app",
data: {
drawertest: false,
@ -41,6 +48,9 @@ var app = new Vue({
return false
}
},
getMediaItemArtwork(url, size = 64) {
return `url("${url.replace('{w}', size).replace('{h}', size)}")`;
},
getNowPlayingArtwork(size = 600) {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;

200
resources/cider-ui-tests/style.css
View file

@ -79,10 +79,10 @@ body {
.bg-artwork {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("artwork.jpeg");
z-index: -1;
filter: blur(60px) saturate(180%);
@ -132,23 +132,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
#app-main {
display: flex;
width:100%;
height:100%;
width: 100%;
height: 100%;
flex-direction: column;
}
#app-sidebar {
/* background-color: var(--color1); */
height:100%;
width:260px;
display:flex;
height: 100%;
width: 260px;
display: flex;
flex-direction: column;
flex: 0 0 auto;
}
#app-content {
background-color: var(--color2);
height:100%;
width:100%;
height: 100%;
width: 100%;
padding: 32px;
overflow-y: scroll;
overflow-y: overlay;
@ -195,8 +196,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%;
display: block;
position: absolute;
top:0px;
left:0px;
top: 0px;
left: 0px;
background-image: url('assets/search.svg');
background-position: 10px;
background-repeat: no-repeat;
@ -223,10 +224,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.app-sidebar-button {
width:100%;
width: 100%;
padding: 8px;
font-family: inherit;
display:flex;
display: flex;
border-radius: 6px;
border: 1px solid rgb(200 200 200 / 5%);
background: rgb(100 100 100 / 25%);
@ -235,7 +236,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
align-items: center;
}
.app-sidebar-button>.sidebar-user-icon {
.app-sidebar-button > .sidebar-user-icon {
width: 22px;
height: 22px;
border-radius: 100%;
@ -244,9 +245,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex: 0 0 auto;
}
.app-sidebar-button>.sidebar-user-text {
width:100%;
display:flex;
.app-sidebar-button > .sidebar-user-text {
width: 100%;
display: flex;
font-size: 16px;
margin: 6px 12px;
}
@ -255,7 +256,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
padding: 8px;
overflow-y: scroll;
overflow-y: overlay;
height:100%;
height: 100%;
}
.app-sidebar-content::-webkit-scrollbar {
@ -308,13 +309,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
position: absolute;
top: calc(100% - 72%);
border-radius: 10px;
left:0px;
background:var(--keyColor);
left: 0px;
background: var(--keyColor);
}
.app-chrome {
background:var(--color1);
width:100%;
background: var(--color1);
width: 100%;
height: var(--chromeHeight);
display: flex;
flex-direction: row;
@ -323,10 +324,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.app-chrome .app-chrome--left,
.app-chrome .app-chrome--center,
.app-chrome .app-chrome--right
{
.app-chrome .app-chrome--right {
height: 100%;
width:100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
@ -366,25 +366,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin-right: 6px;
}
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
transition: all var(--appleTransition);
}
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:hover {
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:active {
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
.app-chrome .app-chrome-item.volume>input[type=range] {
width:100%;
.app-chrome .app-chrome-item.volume > input[type=range] {
width: 100%;
}
.app-chrome .app-chrome-item.volume>input[type=range] {
.app-chrome .app-chrome-item.volume > input[type=range] {
-webkit-appearance: none;
height: 4px;
background: rgba(255, 255, 255, 0.4);
@ -393,7 +393,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background-repeat: no-repeat;
}
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
@ -403,7 +403,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
}
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-runnable-track {
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
@ -419,7 +419,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%;
}
.app-chrome .app-chrome-item>.app-title {
.app-chrome .app-chrome-item > .app-title {
width: 100px;
font-size: 13px;
background: url("./logotmp.png");
@ -433,76 +433,78 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
-webkit-app-region: drag;
}
.app-chrome .app-chrome-item>.window-controls {
.app-chrome .app-chrome-item > .window-controls {
width: 138px;
font-size: 13px;
height: 100%;
display: flex;
}
.app-chrome .app-chrome-item>.window-controls>div {
.app-chrome .app-chrome-item > .window-controls > div {
height: 100%;
width: 32px;
}
.app-chrome .app-chrome-item>.window-controls>div:hover {
.app-chrome .app-chrome-item > .window-controls > div:hover {
background: rgb(200 200 200 / 10%);
}
.app-chrome .app-chrome-item>.window-controls>div.close {
width:100%;
height:100%;
.app-chrome .app-chrome-item > .window-controls > div.close {
width: 100%;
height: 100%;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
}
.app-chrome .app-chrome-item>.window-controls>div.minmax {
.app-chrome .app-chrome-item > .window-controls > div.minmax {
background-image: var(--gfx-maxBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
width:100%;
height:100%;
width: 100%;
height: 100%;
}
.app-chrome .app-chrome-item>.window-controls>div.minimize {
.app-chrome .app-chrome-item > .window-controls > div.minimize {
background-image: var(--gfx-minBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
width:100%;
height:100%;
width: 100%;
height: 100%;
}
.app-chrome .app-chrome-item.playback-controls {
width: 80%;
height: 90%;
display:flex;
display: flex;
max-width: 500px;
border-left: 1px solid rgb(200 200 200 / 8%);
border-right: 1px solid rgb(200 200 200 / 8%);
}
.app-chrome .app-chrome-item>.app-playback-controls {
.app-chrome .app-chrome-item > .app-playback-controls {
display: flex;
justify-content: center;
align-content: center;
width: 100%;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-name {
.app-chrome .app-chrome-item > .app-playback-controls .song-name {
font-weight: 600;
text-align:center;
text-align: center;
font-size: 13px;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-artist {
.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
font-weight: 400;
font-size: 13px;
text-align:center;
text-align: center;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-progress {
.app-chrome .app-chrome-item > .app-playback-controls .song-progress {
height: 16px;
position: absolute;
bottom: 0px;
@ -510,32 +512,32 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
overflow: hidden;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range] {
.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range] {
appearance: none;
width:100%;
width: 100%;
height: 4px;
background-color: rgb(200 200 200 / 10%);
}
.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-webkit-slider-thumb {
.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 4px;
height:12px;
height: 12px;
border-radius: 2px;
background: var(--keyColor);
cursor: ew-resize;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-moz-range-thumb {
.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-moz-range-thumb {
width: 8px;
height:8px;
height: 8px;
border-radius: 100%;
background: var(--keyColor);
cursor: pointer;
}
.app-chrome .app-chrome-item>.app-playback-controls .artwork {
.app-chrome .app-chrome-item > .app-playback-controls .artwork {
width: 42px;
height: 42px;
background-image: var(--artwork);
@ -549,18 +551,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
image-rendering: -webkit-optimize-contrast;
}
.app-chrome .app-chrome-item>.app-playback-controls .actions {
.app-chrome .app-chrome-item > .app-playback-controls .actions {
width: 42px;
height: 42px;
border-radius: 2px;
flex: 0 0 auto;
margin: 6px;
display:flex;
display: flex;
justify-content: center;
align-items: center;
}
.app-chrome .app-chrome-item>.app-playback-controls .playback-info {
.app-chrome .app-chrome-item > .app-playback-controls .playback-info {
width: 100%;
display: flex;
justify-content: center;
@ -569,27 +571,29 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
position: relative;
}
.app-chrome .app-chrome-item>.app-playback-controls .playback-info > div {
.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {
width: 100%;
}
.app-navigation {
background:var(--color1);
height:calc(100% - var(--chromeHeight));
width:100%;
display:flex;
background: var(--color1);
height: calc(100% - var(--chromeHeight));
width: 100%;
display: flex;
}
.display--small {
display: none!important;
display: none !important;
}
/* Window is smaller <= 1023px width */
@media only screen and (max-width: 1023px) {
.display--small {
display: inherit!important;
display: inherit !important;
}
.display--large {
display: none!important;
display: none !important;
}
}
@ -609,7 +613,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.media-item--small .artwork {
background:red;
background: red;
margin: 6px;
border-radius: 100%;
width: 90px;
@ -931,7 +935,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.list-entry .handle {
height: 100%;
width: 28px;
background:var(--keyColor);
background: var(--keyColor);
display: flex;
justify-content: center;
align-items: center;
@ -1091,7 +1095,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
-webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
overflow-y: scroll;
overflow-x: hidden;
display:flex;
display: flex;
flex-flow: column;
}
@ -1198,6 +1202,50 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%;
}
/* Cider */
.text-overflow-elipsis {
min-width: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cd-mediaitem-square {
background: rgb(255 255 255 / 18%);
width: 128px;
height: 128px;
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: center;
align-items: center;
border-radius: 6px;
cursor: pointer;
}
.cd-mediaitem-square .artwork {
height: 80px;
width: 80px;
background: blue;
border-radius: 100%;
}
.cd-mediaitem-square .title {
width: 100%;
text-align: center;
}
.cd-mediaitem-square .subtitle {
width: 100%;
text-align: center;
font-size: 12px;
}
/* Cider */
/* Transitions */
.wpfade-enter-active,
.wpfade-leave-active {

6
resources/web-remote/index.html
View file

@ -258,7 +258,8 @@
</div>
<div class="list-entry-artist">
{{ song.artistName }}
<span class="lossless-badge" v-if="song.audioTraits.includes('lossless')">Lossless</span>
<span class="lossless-badge"
v-if="song.audioTraits.includes('lossless')">Lossless</span>
</div>
</div>
</div>
@ -301,7 +302,8 @@
</div>
<div class="list-entry-artist">
{{ album.artistName }}
<span class="lossless-badge" v-if="album.audioTraits.includes('lossless')">Lossless</span>
<span class="lossless-badge"
v-if="album.audioTraits.includes('lossless')">Lossless</span>
</div>
</div>
</div>