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

Merge branch 'main' into enhancement/search-bar

Browse source
This commit is contained in:
Pedro Galhardo 2022-06-26 00:29:03 +01:00
commit 2911667a99
17 changed files with 205 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/renderer/views/pages/cider-playlist.ejs
View file

@ -8,9 +8,13 @@
</div>
</template>
<template v-if="app.playlists.loadingState == 1">
<div class="playlist-display"
<div class="playlist-display" :style="{ 'background-color': '#' +hasHeroObject()?.bgColor ?? '' }"
@mouseover.self="minClass(false)">
<div class="playlistInfo">
<div class="playlist-hero" v-if="hasHero()">
<mediaitem-artwork shadow="none" :url="hasHero()" size="2160" />
<div class="hero-tint" :style="{'background-color': '#' + hasHeroObject()?.bgColor ?? ''}"></div>
</div>
<div class="row">
<div class="col-auto flex-center" @mouseover="minClass(false)">
<div class="mediaContainer">
@ -26,7 +30,7 @@
<div class="col playlist-info">
<template v-if="!editorialNotesExpanded">
<div>
<div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()" v-show="!nameEditing">
<div class="playlist-name" @mouseover="minClass(false)" @click="editPlaylistName()" v-show="!nameEditing" :style="{ 'color': '#' +hasHeroObject()?.textColor1 ?? '', 'filter' : 'drop-shadow(1px 3px 8px #' + hasHeroObject()?.textColor4 ?? '' +')' }">
{{data.attributes ? (data.attributes.name ??
(data.attributes.title ?? '') ?? '') : ''}}
</div>
@ -38,24 +42,26 @@
@change="editPlaylist"
@keydown.enter="editPlaylist"/>
</div>
<div class="playlist-time genre" style="margin: 0px;">{{getAlbumGenre()}}</div>
<div class="playlist-time genre" style="margin: 0px;" :style="{ 'color': '#' + hasHeroObject()?.textColor2 ?? '' }">{{getAlbumGenre()}}</div>
<div class="playlist-artist item-navigate"
v-if="getArtistName(data) != '' && !useArtistChip"
@click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
{{getArtistName(data)}}
</div>
<template v-if="useArtistChip">
<artist-chip v-for="artist in data.relationships.artists?.data"
<artist-chip v-for="artist in data.relationships.artists?.data" :style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
:item="artist"></artist-chip>
</template>
<div class="playlist-desc"
:style="{ 'color': '#' +hasHeroObject()?.textColor3 ?? '' }"
v-if="(data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)) || (data.attributes.editorialNotes && (data.attributes.editorialNotes.standard || data.attributes.editorialNotes.short))">
<div v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short) != null"
class="content"
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
@click="openInfoModal()"></div>
<div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing == false)"
@mouseover="minClass(false)" @click="editPlaylistDescription()">{{data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard}}</div>
@mouseover="minClass(false)" @click="editPlaylistDescription()" v-html="(data.attributes.description?.standard ?? (data.attributes.editorialNotes?.standard ?? '')).substring(0, 255) +'...'"
@click="if((data.attributes.description?.standard ?? (data.attributes.editorialNotes?.standard ?? '')).length > 255) {openInfoModal()}"></div>
<div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing)"
@mouseover="minClass(false)"><input type="text"
spellcheck="false"
@ -102,11 +108,25 @@
{{app.getLz('term.confirm')}}
</button>
<div style="display: flex; float: right;">
<<<<<<< HEAD
<button :class="['search-btn', showSearch ? 'active' : '']"
@click="toggleSearch()"
:aria-label="showSearch ? app.getLz('term.hideSearch') : app.getLz('term.showSearch')">
<img :src="showSearch ? './assets/search-alt.svg' : './assets/search.svg'">
</button>
=======
<div class="search-input-container" style="margin-right: 8px;">
<div class="search-input--icon"></div>
<input type="search"
style="width:100%;"
spellcheck="false"
:placeholder="$root.getLz('term.search') + '...'"
@input="search()"
:style="{ '--heroplaceholdercolor': '#' +hasHeroObject()?.textColor4 ?? ''}"
v-model="searchQuery"
class="search-input">
</div>
>>>>>>> main
<button class="more-btn-round" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
@ -115,7 +135,7 @@
</div>
</div>
</div>
<div class="artworkContainer" v-if="data.attributes.artwork != null">
<div class="artworkContainer" v-if="data.attributes.artwork != null && !hasHero()">
<artwork-material :url="data.attributes.artwork.url" size="500" images="1"></artwork-material>
</div>
<button class="md-btn md-btn-small editTracksBtn" v-if="(data.attributes.canEdit && data.type == 'library-playlists')" @click="editing = !editing">
@ -369,6 +389,26 @@
isHeaderVisible(visible) {
this.headerVisible = visible
},
hasHero() {
if(this.data.attributes?.editorialArtwork?.bannerUber){
return this.data.attributes?.editorialArtwork?.bannerUber.url
} else if(this.data.attributes?.editorialArtwork?.subscriptionHero) {
return this.data.attributes?.editorialArtwork?.subscriptionHero.url
} else if(this.data.attributes?.editorialArtwork?.storeFlowcase){
return this.data.attributes?.editorialArtwork?.storeFlowcase.url
}
return false;
},
hasHeroObject() {
if(this.data.attributes?.editorialArtwork?.bannerUber){
return this.data.attributes?.editorialArtwork?.bannerUber
} else if(this.data.attributes?.editorialArtwork?.subscriptionHero) {
return this.data.attributes?.editorialArtwork?.subscriptionHero
} else if(this.data.attributes?.editorialArtwork?.storeFlowcase){
return this.data.attributes?.editorialArtwork?.storeFlowcase
}
return [];
},
getBadges() {
return
if (this.badgesRequested) {