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

minor webremote fixes

Browse source
This commit is contained in:
vapormusic 2022-08-31 17:26:33 +07:00
parent 5c69f635c5
commit 2be9ad0944
4 changed files with 73 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/web-remote/assets/MissingArtwork.svg Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<rect x="0" y="0" width="1024" height="1024" style="fill:rgb(110,110,110);"/>
<g transform="matrix(6.05996,0,0,6.05996,189.003,209)">
<path d="M93.161,0.071C59.66,-1.043 32.22,11.314 32.22,11.314L32.2,74.023C28.789,72.669 24.641,72.348 20.428,73.372C11.345,75.579 5.397,83.192 7.143,90.379C8.889,97.566 17.667,101.604 26.749,99.398C35.313,97.317 41.087,90.429 40.256,83.626L40.256,36.771C40.256,36.771 59.66,29.987 84.829,28.286L84.829,63.135C81.455,61.843 77.386,61.55 73.25,62.555C64.167,64.761 58.219,72.374 59.965,79.562C61.71,86.749 70.488,90.786 79.571,88.58C87.502,86.653 93.042,80.603 93.158,74.316L93.161,74.32L93.161,0.071Z" style="fill-opacity:0.16;fill-rule:nonzero;"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

27
src/web-remote/style.css
View file

@ -507,6 +507,11 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
cursor: pointer;
}
.list-entry.artist-song {
padding: 5px;
width: 100%;
}
.list-entry-image {
--artwork: url("");
width: 64px;
@ -519,6 +524,11 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
box-shadow: var(--mediaItemShadow);
}
.artist-song .list-entry-image {
width: 45px;
height: 45px;
}
.list-entry-image.artist {
border-radius: 50%;
}
@ -586,6 +596,10 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
width: 100%;
}
.mediaitem-scroller-horizontal::-webkit-scrollbar {
display: none;
}
.album-placeholder {
height: 180px;
width: 180px;
@ -643,6 +657,11 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
overflow-y: hidden;
}
.search-tab-container::-webkit-scrollbar {
display: none;
}
.search-body-container {
position: relative;
width: 100%;
@ -704,7 +723,7 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
}
.albumpage-album-notes > .notes-preview {
height: 60px;
height: 48px;
overflow: hidden;
-webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
@ -757,13 +776,13 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
}
.artist-header {
height: 400px;
/* height: 400px; */
width: 100%;
margin: 12px auto;
/* margin: 12px auto; */
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
/* padding: 12px; */
flex-direction: column;
background: rgb(0 0 0 / 40%);
}

2
src/web-remote/views/components/mediaitem-artwork.ejs
View file

@ -1,7 +1,7 @@
<script type="text/x-template" id="mediaitem-artwork">
<div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="getMediaItemArtwork(url, size, width)"
<img :src="getMediaItemArtwork(url, size, width)" :style="{ width: size + 'px'}"
decoding="async" loading="lazy"
class="mediaitem-artwork--img">
<!-- <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">

66
src/web-remote/views/index.ejs
View file

@ -263,8 +263,8 @@
@click="trackSelect(song)">
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -284,8 +284,8 @@
@click="trackSelect(song)">
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork?.url ?? './assets/MissingArtwork.svg' )}">
</div>
</div>
<div class="col flex-center">
@ -307,8 +307,8 @@
@click="showAlbum(album.id)">
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="album.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(album.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(album.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -328,8 +328,8 @@
@click="showAlbum(album.id, true)">
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="album.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(album.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(album.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -352,8 +352,7 @@
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image artist"
v-if="artist.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
:style="{'--artwork': getAlbumArtUrlList(artist?.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -373,8 +372,7 @@
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image artist"
v-if="artist.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
:style="{'--artwork': getAlbumArtUrlList(artist.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -396,8 +394,8 @@
@click="showPlaylist(playlist.attributes.playParams.id)">
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="playlist.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -418,8 +416,8 @@
>
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="playlist.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -452,7 +450,7 @@
<div class="col-auto flex-center" v-if="search.selected.attributes.artwork"
style="display:flex;align-items: center;">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(search.selected.attributes.artwork.url)}">
:style="{'--artwork': getAlbumArtUrlList(search.selected.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center" style="display:flex;align-items: center;">
@ -625,17 +623,35 @@
<div class="artist-header" v-if="artistPage.data.attributes['artwork']"
:style="getMediaPalette(artistPage.data.attributes)">
<div class="artist-header-portrait"
:style="{'--artwork': getAlbumArtUrlList(artistPage.data.attributes['artwork']['url'], 600)}">
:style="{'--artwork': getAlbumArtUrlList(artistPage.data.attributes['artwork']['url'] ?? './assets/MissingArtwork.svg', 600)}">
</div>
<h2>{{ artistPage.data.attributes["name"] }}</h2>
</div>
<div class="md-body artist-body">
<h2>Songs</h2>
<div class="song-scroller-horizontal">
<button v-for="song in artistPage.data.relationships['songs'].data"
<div class="list-entry artist-song" v-for="song in artistPage.data.relationships['songs'].data"
@click="trackSelect(song)">
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.attributes?.artwork?.url ?? './assets/MissingArtwork.svg', 45)}">
</div>
</div>
<div class="col flex-center">
<div class="list-entry-name">
{{ song.attributes.name }}
</div>
<div class="list-entry-artist">
{{ song.attributes.artistName }}
</div>
</div>
</div>
</div>
<!-- <button v-for="song in artistPage.data.relationships['songs'].data"
class="song-placeholder" @click="trackSelect(song)">
{{ song.attributes.name }}
</button>
</button> -->
</div>
<h2>Albums</h2>
<div class="mediaitem-scroller-horizontal">
@ -712,8 +728,8 @@
</div>
</div>
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.item.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(song.item.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.item.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">
@ -807,7 +823,7 @@
<div class="album-body-container">
<div class="md-header">
<div class="albumpage-artwork"
:style="{'--artwork': getAlbumArtUrlList(albumPage.data.attributes['artwork'] ? albumPage.data.attributes['artwork']['url'] : '', 300)}">
:style="{'--artwork': getAlbumArtUrlList(albumPage.data.attributes['artwork'] ? albumPage.data.attributes['artwork']['url'] : './assets/MissingArtwork.svg', 300)}">
</div>
<div class="albumpage-album-name">
{{ albumPage.data.attributes["name"] }}
@ -853,8 +869,8 @@
@click="trackSelect(song)">
<div class="row">
<div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.attributes.artwork"
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}">
<div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div>
</div>
<div class="col flex-center">