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

412
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,215 +23,215 @@
</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">
<div class="app-chrome-item full-height"> <div class="app-chrome-item full-height">
<div class="app-title"></div> <div class="app-title"></div>
</div>
<div class="app-chrome-item">
<button class="playback-button--small shuffle"></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous"></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>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat"></button>
</div>
</div> </div>
<div class="app-chrome--center"> <div class="app-chrome-item">
<div class="app-chrome-item playback-controls"> <button class="playback-button--small shuffle"></button>
<template v-if="mkReady()">
<div class="app-playback-controls">
<div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
<div class="playback-info">
<div class="song-name">
{{ mk.nowPlayingItem["attributes"]["name"] }}
</div>
<div class="song-artist">
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }}
</div>
<div class="song-progress">
<input type="range" step="0.01" min="0"
@change="mk.seekToTime($event.target.value)"
:max="mk.currentPlaybackDuration"
:value="mk.currentPlaybackProgress * 100">
</div>
</div>
<div class="actions">❤️</div>
</div>
</template>
</div>
</div> </div>
<div class="app-chrome--right"> <div class="app-chrome-item">
<div class="app-chrome-item volume display--large"> <button class="playback-button previous"></button>
<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">
<div class="app-chrome-item generic"> <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button--small"> <button class="playback-button play" @click="mk.play()" v-else></button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 22" version="1.1" fill="#fff" </div>
style="width: 100%; height: 100%; fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.41421"> <div class="app-chrome-item">
<path <button class="playback-button next"></button>
d="M16.811,12.75c0.245,-0.355 0.389,-0.786 0.389,-1.25c0,-1.215 -0.985,-2.2 -2.2,-2.2c-1.215,0 -2.2,0.985 -2.2,2.2c0,0.466 0.145,0.898 0.392,1.254l-0.83,1.047c-0.537,-0.616 -0.862,-1.42 -0.862,-2.301c0,-1.933 1.567,-3.5 3.5,-3.5c1.933,0 3.5,1.567 3.5,3.5c0,0.879 -0.324,1.683 -0.859,2.297l-0.83,-1.047Zm1.271,1.604c0.694,-0.749 1.118,-1.752 1.118,-2.854c0,-2.32 -1.88,-4.2 -4.2,-4.2c-2.32,0 -4.2,1.88 -4.2,4.2c0,1.103 0.425,2.107 1.121,2.857l-0.814,1.028c-0.993,-0.995 -1.607,-2.368 -1.607,-3.885c0,-3.038 2.462,-5.5 5.5,-5.5c3.038,0 5.5,2.462 5.5,5.5c0,1.515 -0.613,2.887 -1.604,3.882l-0.814,-1.028Zm1.252,1.58c1.151,-1.126 1.866,-2.697 1.866,-4.434c0,-3.424 -2.776,-6.2 -6.2,-6.2c-3.424,0 -6.2,2.776 -6.2,6.2c0,1.739 0.716,3.311 1.869,4.437l-0.811,1.023c-1.452,-1.368 -2.358,-3.308 -2.358,-5.46c0,-4.142 3.358,-7.5 7.5,-7.5c4.142,0 7.5,3.358 7.5,7.5c0,2.15 -0.905,4.089 -2.355,5.457l-0.811,-1.023Zm-0.227,2.066l-8.219,0c-0.355,0 -0.515,-0.434 -0.27,-0.717l4.058,-5.12c0.178,-0.217 0.474,-0.217 0.652,0l4.058,5.12c0.237,0.283 0.085,0.717 -0.279,0.717Z" </div>
style="fill-rule:nonzero"></path> <div class="app-chrome-item">
</svg> <button class="playback-button--small repeat"></button>
</button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue"></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small lyrics"></button>
</div>
<div class="app-chrome-item full-height">
<div class="window-controls">
<div class="minimize"></div>
<div class="minmax"></div>
<div class="close"></div>
</div>
</div>
</div> </div>
</div> </div>
<div class="app-navigation"> <div class="app-chrome--center">
<div id="app-sidebar"> <div class="app-chrome-item playback-controls">
<div class="app-sidebar-header"> <template v-if="mkReady()">
<div class="search-input-container"> <div class="app-playback-controls">
<div class="search-input--icon"></div> <div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
<input type="search" <div class="playback-info">
@click="showSearch()" <div class="song-name">
@change="showSearch();searchQuery()" {{ mk.nowPlayingItem["attributes"]["name"] }}
placeholder="Search..." </div>
v-model="search.term" <div class="song-artist">
class="search-input"> {{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{
</div> mk.nowPlayingItem["attributes"]["albumName"] }}
</div> </div>
<div class="app-sidebar-content"> <div class="song-progress">
<div class="app-sidebar-header-text"> <input type="range" step="0.01" min="0"
Apple Music @change="mk.seekToTime($event.target.value)"
</div> :max="mk.currentPlaybackDuration"
<button class="app-sidebar-item"> :value="mk.currentPlaybackProgress * 100">
<div></div> </div>
<div>Listen Now</div>
</button>
<button class="app-sidebar-item active">Browse</button>
<button class="app-sidebar-item">Radio</button>
<div class="app-sidebar-header-text">
Library
</div>
<button class="app-sidebar-item">Songs</button>
<button class="app-sidebar-item">Albums</button>
<button class="app-sidebar-item">Artists</button>
<button class="app-sidebar-item">Made For You</button>
<div class="app-sidebar-header-text">
Playlists
</div>
<button class="app-sidebar-item" v-for="i in 32">Playist</button>
</div>
<div class="app-sidebar-footer">
<input type="range" class="display--small">
<button class="app-sidebar-button" style="width:100%">
<div class="sidebar-user-icon">
</div>
<div class="sidebar-user-text">Cider User</div>
</button>
</div>
</div>
<div id="app-content">
<!-- Browse -->
<template v-if="page == 'browse'">
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
<br>
<template v-if="mk.nowPlayingItem">
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<br>
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
</template>
<div><input type="text" v-model="quickPlayQuery">
<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
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
</p>
<div class="media-item--small">
<div class="artwork">
</div>
<div class="text">
Text
</div>
<div class="subtext">
Subtext
</div> </div>
<div class="actions">❤️</div>
</div> </div>
<br>
<br>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<button class="md-btn">Button</button>
<button class="md-btn md-btn-primary">Button</button>
</template> </template>
<!-- Search -->
<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>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>
</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>
</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>
</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>
</template>
</template>
</template>
</div>
<div class="app-drawer" v-if="drawertest">
</div> </div>
</div> </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'">
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 22" version="1.1" fill="#fff"
style="width: 100%; height: 100%; fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.41421">
<path
d="M16.811,12.75c0.245,-0.355 0.389,-0.786 0.389,-1.25c0,-1.215 -0.985,-2.2 -2.2,-2.2c-1.215,0 -2.2,0.985 -2.2,2.2c0,0.466 0.145,0.898 0.392,1.254l-0.83,1.047c-0.537,-0.616 -0.862,-1.42 -0.862,-2.301c0,-1.933 1.567,-3.5 3.5,-3.5c1.933,0 3.5,1.567 3.5,3.5c0,0.879 -0.324,1.683 -0.859,2.297l-0.83,-1.047Zm1.271,1.604c0.694,-0.749 1.118,-1.752 1.118,-2.854c0,-2.32 -1.88,-4.2 -4.2,-4.2c-2.32,0 -4.2,1.88 -4.2,4.2c0,1.103 0.425,2.107 1.121,2.857l-0.814,1.028c-0.993,-0.995 -1.607,-2.368 -1.607,-3.885c0,-3.038 2.462,-5.5 5.5,-5.5c3.038,0 5.5,2.462 5.5,5.5c0,1.515 -0.613,2.887 -1.604,3.882l-0.814,-1.028Zm1.252,1.58c1.151,-1.126 1.866,-2.697 1.866,-4.434c0,-3.424 -2.776,-6.2 -6.2,-6.2c-3.424,0 -6.2,2.776 -6.2,6.2c0,1.739 0.716,3.311 1.869,4.437l-0.811,1.023c-1.452,-1.368 -2.358,-3.308 -2.358,-5.46c0,-4.142 3.358,-7.5 7.5,-7.5c4.142,0 7.5,3.358 7.5,7.5c0,2.15 -0.905,4.089 -2.355,5.457l-0.811,-1.023Zm-0.227,2.066l-8.219,0c-0.355,0 -0.515,-0.434 -0.27,-0.717l4.058,-5.12c0.178,-0.217 0.474,-0.217 0.652,0l4.058,5.12c0.237,0.283 0.085,0.717 -0.279,0.717Z"
style="fill-rule:nonzero"></path>
</svg>
</button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small queue"></button>
</div>
<div class="app-chrome-item generic">
<button class="playback-button--small lyrics"></button>
</div>
<div class="app-chrome-item full-height">
<div class="window-controls">
<div class="minimize"></div>
<div class="minmax"></div>
<div class="close"></div>
</div>
</div>
</div>
</div>
<div class="app-navigation">
<div id="app-sidebar">
<div class="app-sidebar-header">
<div class="search-input-container">
<div class="search-input--icon"></div>
<input type="search"
spellcheck="false"
@click="showSearch()"
@change="showSearch();searchQuery()"
placeholder="Search..."
v-model="search.term"
class="search-input">
</div>
</div>
<div class="app-sidebar-content">
<div class="app-sidebar-header-text">
Apple Music
</div>
<button class="app-sidebar-item">
<div></div>
<div>Listen Now</div>
</button>
<button class="app-sidebar-item active">Browse</button>
<button class="app-sidebar-item">Radio</button>
<div class="app-sidebar-header-text">
Library
</div>
<button class="app-sidebar-item">Songs</button>
<button class="app-sidebar-item">Albums</button>
<button class="app-sidebar-item">Artists</button>
<button class="app-sidebar-item">Made For You</button>
<div class="app-sidebar-header-text">
Playlists
</div>
<button class="app-sidebar-item" v-for="i in 32">Playist</button>
</div>
<div class="app-sidebar-footer">
<input type="range" class="display--small">
<button class="app-sidebar-button" style="width:100%">
<div class="sidebar-user-icon">
</div>
<div class="sidebar-user-text">Cider User</div>
</button>
</div>
</div>
<div id="app-content">
<!-- Browse -->
<template v-if="page == 'browse'">
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
<br>
<template v-if="mk.nowPlayingItem">
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
<br>
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
</template>
<div><input type="text" v-model="quickPlayQuery">
<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
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
</p>
<div class="media-item--small">
<div class="artwork">
</div>
<div class="text">
Text
</div>
<div class="subtext">
Subtext
</div>
</div>
<br>
<br>
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
<button class="md-btn">Button</button>
<button class="md-btn md-btn-primary">Button</button>
</template>
<!-- Search -->
<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>Songs</h3>
<mediaitem-square :item="item" v-for="item in search.results.songs.data"></mediaitem-square>
</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>
</template>
</template>
</template>
</div>
<div class="app-drawer" v-if="drawertest">
</div>
</div> </div>
<div class="bg-artwork"></div>
</div> </div>
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script> <div class="bg-artwork"></div>
<script src="index.js?v=1"></script> </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 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> </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>