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"> <html lang="en">
<head> <head>
<link rel="preconnect" href="https://amp-api.music.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://api.music.apple.com/" crossorigin/>
<link rel="preconnect" href="https://is1-ssl.mzstatic.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://is2-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is3-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://is4-ssl.mzstatic.com/" crossorigin/>
<link rel="preconnect" href="https://is5-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://play.itunes.apple.com/" crossorigin/>
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin /> <link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
@ -23,7 +23,7 @@
</head> </head>
<body oncontextmenu="return false;"> <body oncontextmenu="return false;">
<div id="app"> <div id="app">
<div id="app-main"> <div id="app-main">
<div class="app-chrome"> <div class="app-chrome">
<div class="app-chrome--left"> <div class="app-chrome--left">
@ -57,7 +57,8 @@
{{ mk.nowPlayingItem["attributes"]["name"] }} {{ mk.nowPlayingItem["attributes"]["name"] }}
</div> </div>
<div class="song-artist"> <div class="song-artist">
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }} {{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{
mk.nowPlayingItem["attributes"]["albumName"] }}
</div> </div>
<div class="song-progress"> <div class="song-progress">
<input type="range" step="0.01" min="0" <input type="range" step="0.01" min="0"
@ -74,7 +75,8 @@
</div> </div>
<div class="app-chrome--right"> <div class="app-chrome--right">
<div class="app-chrome-item volume display--large"> <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>
<div class="app-chrome-item generic"> <div class="app-chrome-item generic">
<button class="playback-button--small"> <button class="playback-button--small">
@ -107,6 +109,7 @@
<div class="search-input-container"> <div class="search-input-container">
<div class="search-input--icon"></div> <div class="search-input--icon"></div>
<input type="search" <input type="search"
spellcheck="false"
@click="showSearch()" @click="showSearch()"
@change="showSearch();searchQuery()" @change="showSearch();searchQuery()"
placeholder="Search..." placeholder="Search..."
@ -157,7 +160,8 @@
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }} currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
</template> </template>
<div><input type="text" v-model="quickPlayQuery"> <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> <h1 class="header-text">Browse</h1>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt 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['meta']">
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Songs</h3> <h3>Songs</h3>
<button <mediaitem-square :item="item" v-for="item in search.results.songs.data"></mediaitem-square>
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.songs.data">
<b>{{ item.attributes.name }}</b>
<br>
{{ item.attributes.artistName }}
</button>
</template> </template>
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Albums</h3> <h3>Albums</h3>
<button <mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.albums.data">
<b>{{ item.attributes.name }}</b>
<br>
{{ item.attributes.artistName }}
</button>
</template> </template>
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Artists</h3> <h3>Artists</h3>
<button <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.artists.data">
{{ item.attributes.name }}
</button>
</template> </template>
<template v-if="search.results.songs"> <template v-if="search.results.songs">
<h3>Playlists</h3> <h3>Playlists</h3>
<button <mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
@click="playMediaItemById(item.id, item.type)"
v-for="item in search.results.playlists.data">
{{ item.attributes.name }}
</button>
</template> </template>
</template> </template>
</template> </template>
@ -229,9 +213,25 @@
</div> </div>
</div> </div>
<div class="bg-artwork"></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> </div>
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script> <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
<script src="index.js?v=1"></script> {{ 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> </body>
</html> </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", el: "#app",
data: { data: {
drawertest: false, drawertest: false,
@ -41,6 +48,9 @@ var app = new Vue({
return false return false
} }
}, },
getMediaItemArtwork(url, size = 64) {
return `url("${url.replace('{w}', size).replace('{h}', size)}")`;
},
getNowPlayingArtwork(size = 600) { getNowPlayingArtwork(size = 600) {
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`; 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 { .bg-artwork {
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
width:100%; width: 100%;
height:100%; height: 100%;
background: url("artwork.jpeg"); background: url("artwork.jpeg");
z-index: -1; z-index: -1;
filter: blur(60px) saturate(180%); filter: blur(60px) saturate(180%);
@ -132,23 +132,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
#app-main { #app-main {
display: flex; display: flex;
width:100%; width: 100%;
height:100%; height: 100%;
flex-direction: column; flex-direction: column;
} }
#app-sidebar { #app-sidebar {
/* background-color: var(--color1); */ /* background-color: var(--color1); */
height:100%; height: 100%;
width:260px; width: 260px;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 0 0 auto; flex: 0 0 auto;
} }
#app-content { #app-content {
background-color: var(--color2); background-color: var(--color2);
height:100%; height: 100%;
width:100%; width: 100%;
padding: 32px; padding: 32px;
overflow-y: scroll; overflow-y: scroll;
overflow-y: overlay; overflow-y: overlay;
@ -195,8 +196,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%; height: 100%;
display: block; display: block;
position: absolute; position: absolute;
top:0px; top: 0px;
left:0px; left: 0px;
background-image: url('assets/search.svg'); background-image: url('assets/search.svg');
background-position: 10px; background-position: 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -223,10 +224,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
} }
.app-sidebar-button { .app-sidebar-button {
width:100%; width: 100%;
padding: 8px; padding: 8px;
font-family: inherit; font-family: inherit;
display:flex; display: flex;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgb(200 200 200 / 5%); border: 1px solid rgb(200 200 200 / 5%);
background: rgb(100 100 100 / 25%); background: rgb(100 100 100 / 25%);
@ -235,7 +236,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
align-items: center; align-items: center;
} }
.app-sidebar-button>.sidebar-user-icon { .app-sidebar-button > .sidebar-user-icon {
width: 22px; width: 22px;
height: 22px; height: 22px;
border-radius: 100%; border-radius: 100%;
@ -244,9 +245,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
flex: 0 0 auto; flex: 0 0 auto;
} }
.app-sidebar-button>.sidebar-user-text { .app-sidebar-button > .sidebar-user-text {
width:100%; width: 100%;
display:flex; display: flex;
font-size: 16px; font-size: 16px;
margin: 6px 12px; margin: 6px 12px;
} }
@ -255,7 +256,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
padding: 8px; padding: 8px;
overflow-y: scroll; overflow-y: scroll;
overflow-y: overlay; overflow-y: overlay;
height:100%; height: 100%;
} }
.app-sidebar-content::-webkit-scrollbar { .app-sidebar-content::-webkit-scrollbar {
@ -308,13 +309,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
position: absolute; position: absolute;
top: calc(100% - 72%); top: calc(100% - 72%);
border-radius: 10px; border-radius: 10px;
left:0px; left: 0px;
background:var(--keyColor); background: var(--keyColor);
} }
.app-chrome { .app-chrome {
background:var(--color1); background: var(--color1);
width:100%; width: 100%;
height: var(--chromeHeight); height: var(--chromeHeight);
display: flex; display: flex;
flex-direction: row; 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--left,
.app-chrome .app-chrome--center, .app-chrome .app-chrome--center,
.app-chrome .app-chrome--right .app-chrome .app-chrome--right {
{
height: 100%; height: 100%;
width:100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -366,25 +366,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
margin-right: 6px; 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); 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); background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2); 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); background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1); transform: scale(1);
} }
.app-chrome .app-chrome-item.volume>input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
width:100%; width: 100%;
} }
.app-chrome .app-chrome-item.volume>input[type=range] { .app-chrome .app-chrome-item.volume > input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
height: 4px; height: 4px;
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
@ -393,7 +393,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
background-repeat: no-repeat; 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; -webkit-appearance: none;
height: 14px; height: 14px;
width: 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); 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; -webkit-appearance: none;
box-shadow: none; box-shadow: none;
border: none; border: none;
@ -419,7 +419,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%; height: 100%;
} }
.app-chrome .app-chrome-item>.app-title { .app-chrome .app-chrome-item > .app-title {
width: 100px; width: 100px;
font-size: 13px; font-size: 13px;
background: url("./logotmp.png"); background: url("./logotmp.png");
@ -433,76 +433,78 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.app-chrome .app-chrome-item>.window-controls { .app-chrome .app-chrome-item > .window-controls {
width: 138px; width: 138px;
font-size: 13px; font-size: 13px;
height: 100%; height: 100%;
display: flex; display: flex;
} }
.app-chrome .app-chrome-item>.window-controls>div { .app-chrome .app-chrome-item > .window-controls > div {
height: 100%; height: 100%;
width: 32px; 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%); background: rgb(200 200 200 / 10%);
} }
.app-chrome .app-chrome-item>.window-controls>div.close {
width:100%; .app-chrome .app-chrome-item > .window-controls > div.close {
height:100%; width: 100%;
height: 100%;
background-image: var(--gfx-closeBtn); background-image: var(--gfx-closeBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -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-image: var(--gfx-maxBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
width:100%; width: 100%;
height: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-image: var(--gfx-minBtn);
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
width:100%; width: 100%;
height:100%; height: 100%;
} }
.app-chrome .app-chrome-item.playback-controls { .app-chrome .app-chrome-item.playback-controls {
width: 80%; width: 80%;
height: 90%; height: 90%;
display:flex; display: flex;
max-width: 500px; max-width: 500px;
border-left: 1px solid rgb(200 200 200 / 8%); border-left: 1px solid rgb(200 200 200 / 8%);
border-right: 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; display: flex;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
width: 100%; 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; font-weight: 600;
text-align:center; text-align: center;
font-size: 13px; 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-weight: 400;
font-size: 13px; 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; height: 16px;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
@ -510,32 +512,32 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
overflow: hidden; 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; appearance: none;
width:100%; width: 100%;
height: 4px; height: 4px;
background-color: rgb(200 200 200 / 10%); 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; -webkit-appearance: none;
appearance: none; appearance: none;
width: 4px; width: 4px;
height:12px; height: 12px;
border-radius: 2px; border-radius: 2px;
background: var(--keyColor); background: var(--keyColor);
cursor: ew-resize; 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; width: 8px;
height:8px; height: 8px;
border-radius: 100%; border-radius: 100%;
background: var(--keyColor); background: var(--keyColor);
cursor: pointer; cursor: pointer;
} }
.app-chrome .app-chrome-item>.app-playback-controls .artwork { .app-chrome .app-chrome-item > .app-playback-controls .artwork {
width: 42px; width: 42px;
height: 42px; height: 42px;
background-image: var(--artwork); background-image: var(--artwork);
@ -549,18 +551,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
image-rendering: -webkit-optimize-contrast; 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; width: 42px;
height: 42px; height: 42px;
border-radius: 2px; border-radius: 2px;
flex: 0 0 auto; flex: 0 0 auto;
margin: 6px; margin: 6px;
display:flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -569,27 +571,29 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
position: relative; 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%; width: 100%;
} }
.app-navigation { .app-navigation {
background:var(--color1); background: var(--color1);
height:calc(100% - var(--chromeHeight)); height: calc(100% - var(--chromeHeight));
width:100%; width: 100%;
display:flex; display: flex;
} }
.display--small { .display--small {
display: none!important; display: none !important;
} }
/* Window is smaller <= 1023px width */ /* Window is smaller <= 1023px width */
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
.display--small { .display--small {
display: inherit!important; display: inherit !important;
} }
.display--large { .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 { .media-item--small .artwork {
background:red; background: red;
margin: 6px; margin: 6px;
border-radius: 100%; border-radius: 100%;
width: 90px; width: 90px;
@ -931,7 +935,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
.list-entry .handle { .list-entry .handle {
height: 100%; height: 100%;
width: 28px; width: 28px;
background:var(--keyColor); background: var(--keyColor);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: 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))); -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-y: scroll;
overflow-x: hidden; overflow-x: hidden;
display:flex; display: flex;
flex-flow: column; flex-flow: column;
} }
@ -1198,6 +1202,50 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
height: 100%; 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 */ /* Transitions */
.wpfade-enter-active, .wpfade-enter-active,
.wpfade-leave-active { .wpfade-leave-active {

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

@ -258,7 +258,8 @@
</div> </div>
<div class="list-entry-artist"> <div class="list-entry-artist">
{{ song.artistName }} {{ 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> </div>
</div> </div>
@ -301,7 +302,8 @@
</div> </div>
<div class="list-entry-artist"> <div class="list-entry-artist">
{{ album.artistName }} {{ 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> </div>
</div> </div>