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

CSS Changes to mediaitem-square, updated to do with code for playlist sorting

Browse source
This commit is contained in:
booploops 2021-12-21 16:09:59 -08:00
parent 05f97ad4a1
commit e38ddced69
5 changed files with 75 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/renderer/style.less
View file

@ -4,7 +4,7 @@
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--mediaItemShadow-Shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
--mediaItemRadius: 4px;
--mediaItemRadius: 6px;
--mediaItemRadiusRound: 100%;
--contentInnerPadding: 16px;
--navbarHeight: 48px;
@ -1606,8 +1606,25 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
background: rgba(200, 200, 200, 0.05);
border-radius: 10px;
padding: var(--contentInnerPadding);
box-shadow: rgb(0 0 0 / 8%) 0px 0px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
margin-top: 16px;
display: flex;
flex-flow: wrap;
justify-content: center;
>.cd-mediaitem-square {
width: 220px;
height: 260px;
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: center;
align-items: center;
border-radius: 6px;
max-width: 240px;
flex-grow: 1;
}
}
/* Album / Playlist Page */
@ -2573,6 +2590,13 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
text-align: center;
font-size: 12px;
}
&.mediaitem-video {
height: 200px;
.artwork {
height: 106px;
}
}
}
.cd-btn-seeall {

20
src/renderer/todo.js
View file

@ -159,4 +159,22 @@ function processChunk (response) {
// create Artist / Song/ Album stations:
app.mk.setStationQueue({artist:"1258279972"})
app.mk.setStationQueue({song:"1437308307"}) // yes the song id here can be the albumId, but just keep using the song:
app.mk.setStationQueue({song:"1437308307"}) // yes the song id here can be the albumId, but just keep using the song:
// Sorting Playlists, send an array of tracks in the format below
// playlist must be fully recursively downloaded first before sorting
app.mk.api.library.putPlaylistTracklisting(app.showingPlaylist.attributes.playParams.id, [
{
"id": relationships.tracks.data[X].id,
"type": relationships.tracks.data[X].type
},
{
"id": relationships.tracks.data[X].id,
"type": relationships.tracks.data[X].type
},
{
"id": relationships.tracks.data[X].id,
"type": relationships.tracks.data[X].type
},
])

12
src/renderer/views/components/mediaitem-square.ejs
View file

@ -1,7 +1,7 @@
<script type="text/x-template" id="mediaitem-square">
<template>
<div tabindex="0"
class="cd-mediaitem-square" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
<template v-if="isVisible">
<div class="artwork-container">
<div class="artwork" @click='app.routeView(item)'>
@ -37,6 +37,16 @@
}
},
methods: {
getClasses() {
switch(this.item.type) {
default:
return []
break;
case "uploaded-videos":
return "mediaitem-video";
break;
}
},
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible
},

10
src/renderer/views/pages/library-albums.ejs
View file

@ -48,9 +48,11 @@
</div>
</div>
</div>
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item>
<div class="well">
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item>
</div>
</div>
</template>

19
src/renderer/views/pages/library-recentlyadded.ejs
View file

@ -5,7 +5,8 @@
<h1 class="header-text">Recently Added</h1>
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
class="reload-btn"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">
@ -23,7 +24,8 @@
<div class="col-auto flex-center">
<div class="row">
<div class="col">
<select class="md-select" v-model="library.albums.sortOrder[0]" @change="searchLibraryAlbums(0)">
<select class="md-select" v-model="library.albums.sortOrder[0]"
@change="searchLibraryAlbums(0)">
<optgroup label="Sort Order">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
@ -41,9 +43,14 @@
</div>
</div>
</div>
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item>
<div class="well">
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item"
v-for="item in library.albums.displayListing">
</mediaitem-square>
<mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true"
:show-library-status="false" :item="item"
v-for="item in library.albums.displayListing">
</mediaitem-list-item>
</div>
</div>
</template>