Merge pull request #151 from ciderapp/fuck-git

Add main branch renderer edits.
This commit is contained in:
cryptofyre 2022-01-18 21:25:50 -06:00 committed by GitHub
commit aa89f8ec4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 88 additions and 26 deletions

View file

@ -863,6 +863,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
}
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
transition: all var(--appleTransition);
}
@ -876,10 +883,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
transform: scale(1);
}
.app-chrome .app-chrome-item.volume > input[type=range] {
width: 100%;
}
.app-chrome .app-chrome-item.volume > input[type=range] {
-webkit-appearance: none;
height: 4px;
@ -887,16 +890,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-radius: 5px;
background-size: 70% 100%;
background-repeat: no-repeat;
}
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
width: 100%,
}
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
@ -1014,6 +1008,15 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
//margin-bottom: -3px;
}
}
.explicit-icon {
background-image: url("./assets/explicit.svg");
height: 12px;
width: 36px;
filter: contrast(0);
background-repeat: no-repeat;
margin-left: 3px;
}
}
.app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
@ -1201,7 +1204,57 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Window is smaller <= 1023px width */
@media only screen and (max-width: 1023px) {
.display--small {
display: inherit !important;
display: inherit !important;;
.slider {
width: 100%;
z-index: 1;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding-bottom: 10px;
}
input[type=range] {
-webkit-appearance: none;
height: 4px;
background: rgba(255, 255, 255, 0.4);
border-radius: 5px;
background-size: 70% 100%;
background-repeat: no-repeat;
&::-webkit-slider-thumb {
-webkit-appearance: none;
height: 14px;
width: 14px;
border-radius: 50%;
background: rgb(50 50 50);
cursor: default;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
transition: all var(--appleTransition);
}
&::-webkit-slider-thumb:hover {
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
transform: scale(1.2);
}
&::-webkit-slider-thumb:active {
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
transform: scale(1);
}
&::-webkit-slider-runnable-track {
-webkit-appearance: none;
box-shadow: none;
border: none;
background: transparent;
}
}
}
.display--large {

View file

@ -2,8 +2,7 @@
<div tabindex="0"
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
v-observe-visibility="{callback: visibilityChanged}"
:style="{'--spcolor': getBgColor()}"
@click.self='app.routeView(item)'>
:style="{'--spcolor': getBgColor()}">
<template v-if="isVisible">
<div class="artwork-container">
<div class="artwork" @click='app.routeView(item)'>

View file

@ -72,10 +72,10 @@
style["top"] = this.event.clientY + "px";
// make sure the menu panel isnt off the screen
if (this.event.clientX + this.size[0] > window.innerWidth) {
style["left"] = (window.innerWidth - this.size[0]) + "px";
style["left"] = (this.event.clientX - this.size[0]) + "px";
}
if (this.event.clientY + this.size[1] > window.innerHeight) {
style["top"] = (window.innerHeight - this.size[1]) + "px";
style["top"] = (this.event.clientY - this.size[1]) + "px";
}
}
return style

View file

@ -82,8 +82,10 @@
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="playback-info">
<div class="song-name">
<div class="song-name" style="-webkit-box-orient: horizontal;"
:style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
{{ mk.nowPlayingItem["attributes"]["name"] }}
<div class="explicit-icon" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" style="display: inline-block"></div>
</div>
<div class="song-artist"
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
@ -92,7 +94,7 @@
{{ mk.nowPlayingItem["attributes"]["artistName"] }}
</div>
<div class="song-artist item-navigate" style="display: inline-block;"
@click="getNowPlayingItemDetailed('album')">
@click="getNowPlayingItemDetailed('album')" v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
<div class="separator" style="display: inline-block;">{{"—"}}</div>
{{(mk.nowPlayingItem["attributes"]["albumName"]) ?
(mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
@ -288,8 +290,8 @@
</div>
</div>
<div class="app-chrome-item volume">
<div class="app-chrome-item volume-icon"></div>
<div class="input-container">
<div class="app-chrome-item volume-icon"></div>
<input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'">

View file

@ -132,6 +132,10 @@
<h3>{{ data.attributes.isGroup ? "Formed" : "Born" }}</h3>
{{ data.attributes.bornOrFormed }}
</div>
<div v-if="data.attributes.genreNames">
<h3>Genre</h3>
{{ data.attributes.genreNames.join(', ') }}
</div>
</div>
</div>
</div>

View file

@ -8,6 +8,10 @@
<mediaitem-square :item="getTopResult()"></mediaitem-square>
</template>
</div>
<div v-else style="text-align: center">
<h3>No Results</h3>
<p>Try a new search.</p>
</div>
<div class="col" v-if="search.results.song">
<div class="row">
<div class="col">
@ -108,10 +112,10 @@
},
methods: {
getTopResult() {
if (this.search.results["meta"]) {
try {
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
} else {
return false;
} catch( error ) {
return false
}
},
async getCategories() {