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; cursor: pointer;
} }
.list-entry.artist-song {
padding: 5px;
width: 100%;
}
.list-entry-image { .list-entry-image {
--artwork: url(""); --artwork: url("");
width: 64px; width: 64px;
@ -519,6 +524,11 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
box-shadow: var(--mediaItemShadow); box-shadow: var(--mediaItemShadow);
} }
.artist-song .list-entry-image {
width: 45px;
height: 45px;
}
.list-entry-image.artist { .list-entry-image.artist {
border-radius: 50%; border-radius: 50%;
} }
@ -586,6 +596,10 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
width: 100%; width: 100%;
} }
.mediaitem-scroller-horizontal::-webkit-scrollbar {
display: none;
}
.album-placeholder { .album-placeholder {
height: 180px; height: 180px;
width: 180px; width: 180px;
@ -643,6 +657,11 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
overflow-y: hidden; overflow-y: hidden;
} }
.search-tab-container::-webkit-scrollbar {
display: none;
}
.search-body-container { .search-body-container {
position: relative; position: relative;
width: 100%; width: 100%;
@ -704,7 +723,7 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
} }
.albumpage-album-notes > .notes-preview { .albumpage-album-notes > .notes-preview {
height: 60px; height: 48px;
overflow: hidden; overflow: hidden;
-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)));
} }
@ -757,13 +776,13 @@ input[type="range"].web-slider::-webkit-slider-runnable-track {
} }
.artist-header { .artist-header {
height: 400px; /* height: 400px; */
width: 100%; width: 100%;
margin: 12px auto; /* margin: 12px auto; */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 12px; /* padding: 12px; */
flex-direction: column; flex-direction: column;
background: rgb(0 0 0 / 40%); 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"> <script type="text/x-template" id="mediaitem-artwork">
<div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url" <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"
v-observe-visibility="{callback: visibilityChanged}"> 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" decoding="async" loading="lazy"
class="mediaitem-artwork--img"> class="mediaitem-artwork--img">
<!-- <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box"> <!-- <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)"> @click="trackSelect(song)">
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(song.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -284,8 +284,8 @@
@click="trackSelect(song)"> @click="trackSelect(song)">
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork?.url ?? './assets/MissingArtwork.svg' )}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -307,8 +307,8 @@
@click="showAlbum(album.id)"> @click="showAlbum(album.id)">
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="album.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(album.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(album.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -328,8 +328,8 @@
@click="showAlbum(album.id, true)"> @click="showAlbum(album.id, true)">
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="album.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(album.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(album.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -352,8 +352,7 @@
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image artist" <div class="list-entry-image artist"
v-if="artist.attributes.artwork" :style="{'--artwork': getAlbumArtUrlList(artist?.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
:style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -373,8 +372,7 @@
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image artist" <div class="list-entry-image artist"
v-if="artist.attributes.artwork" :style="{'--artwork': getAlbumArtUrlList(artist.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
:style="{'--artwork': getAlbumArtUrlList(artist.attributes.artwork.url)}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -396,8 +394,8 @@
@click="showPlaylist(playlist.attributes.playParams.id)"> @click="showPlaylist(playlist.attributes.playParams.id)">
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="playlist.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(playlist.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -418,8 +416,8 @@
> >
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="playlist.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(playlist.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(playlist.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -452,7 +450,7 @@
<div class="col-auto flex-center" v-if="search.selected.attributes.artwork" <div class="col-auto flex-center" v-if="search.selected.attributes.artwork"
style="display:flex;align-items: center;"> style="display:flex;align-items: center;">
<div class="list-entry-image" <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> </div>
<div class="col flex-center" style="display:flex;align-items: center;"> <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']" <div class="artist-header" v-if="artistPage.data.attributes['artwork']"
:style="getMediaPalette(artistPage.data.attributes)"> :style="getMediaPalette(artistPage.data.attributes)">
<div class="artist-header-portrait" <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> </div>
<h2>{{ artistPage.data.attributes["name"] }}</h2> <h2>{{ artistPage.data.attributes["name"] }}</h2>
</div> </div>
<div class="md-body artist-body"> <div class="md-body artist-body">
<h2>Songs</h2> <h2>Songs</h2>
<div class="song-scroller-horizontal"> <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)"> class="song-placeholder" @click="trackSelect(song)">
{{ song.attributes.name }} {{ song.attributes.name }}
</button> </button> -->
</div> </div>
<h2>Albums</h2> <h2>Albums</h2>
<div class="mediaitem-scroller-horizontal"> <div class="mediaitem-scroller-horizontal">
@ -712,8 +728,8 @@
</div> </div>
</div> </div>
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.item.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.item.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(song.item.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">
@ -807,7 +823,7 @@
<div class="album-body-container"> <div class="album-body-container">
<div class="md-header"> <div class="md-header">
<div class="albumpage-artwork" <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>
<div class="albumpage-album-name"> <div class="albumpage-album-name">
{{ albumPage.data.attributes["name"] }} {{ albumPage.data.attributes["name"] }}
@ -853,8 +869,8 @@
@click="trackSelect(song)"> @click="trackSelect(song)">
<div class="row"> <div class="row">
<div class="col-auto flex-center"> <div class="col-auto flex-center">
<div class="list-entry-image" v-if="song.attributes.artwork" <div class="list-entry-image"
:style="{'--artwork': getAlbumArtUrlList(song.attributes.artwork.url)}"> :style="{'--artwork': getAlbumArtUrlList(song.attributes?.artwork?.url ?? './assets/MissingArtwork.svg')}">
</div> </div>
</div> </div>
<div class="col flex-center"> <div class="col flex-center">