standardize square uis

This commit is contained in:
vapormusic 2021-12-06 23:28:11 +07:00
parent 5c94430d20
commit 2a3526d133
2 changed files with 21 additions and 14 deletions

View file

@ -451,8 +451,8 @@
<button class="cd-btn-seeall">See All</button> <button class="cd-btn-seeall">See All</button>
</div> </div>
</div> </div>
<mediaitem-square :item="item" <mediaitem-square-large :item="item"
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square> v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
</template> </template>
<template v-if="search.results.playlists"> <template v-if="search.results.playlists">
<div class="row"> <div class="row">
@ -602,13 +602,13 @@
<div class="button" style = " <div class="button" style = "
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" background: rgba(50,50,50,0.7);"
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px', :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
width: '40px', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"> @click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div> <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
</div> </div>
<div class="title text-overflow-elipsis" @click='app.routeView(item)'> <div class="title text-overflow-elipsis" @click='app.routeView(item)'>
@ -623,13 +623,13 @@
<div class="button" style = " <div class="button" style = "
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" background: rgba(50,50,50,0.7);"
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px', :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
width: '40px', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"> @click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div> <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
</div> </div>
</div> </div>
@ -650,13 +650,13 @@
<div class="button" style = " <div class="button" style = "
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" background: rgba(50,50,50,0.7);"
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px', :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
width: '40px', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"> @click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div> <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
</div> </div>
<div class="title text-overflow-elipsis" <div class="title text-overflow-elipsis"
@ -676,13 +676,13 @@
<div class="button" style = " <div class="button" style = "
border-radius: 50%; border-radius: 50%;
background: rgba(50,50,50,0.7);" background: rgba(50,50,50,0.7);"
:style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px', :style = "[(!(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('radioStation') && !(item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? '')).includes('song')) ? {'margin': '140px',
width: '40px', width: '40px',
height: '40px',} : height: '40px',} :
{margin: '35px', {margin: '35px',
width: '120px', width: '120px',
height: '120px',}]" height: '120px',}]"
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"> @click="app.playMediaItem(item)">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div> <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
</div> </div>
</div> </div>

View file

@ -249,17 +249,24 @@ const app = new Vue({
}, },
routeView (item){ routeView (item){
app.showingPlaylist = []; app.showingPlaylist = [];
let kind = item.attributes.playParams.kind ?? item.type; let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
let id = item.attributes.playParams.id ?? item.id; let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
let isLibrary = item.attributes.playParams.isLibrary ?? false; let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
console.log(kind, id, isLibrary) console.log(kind, id, isLibrary)
if(!kind.toString().includes("radioStation") && !kind.toString().includes("song")) if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
{app.page = (kind) + "_"+ (id); {app.page = (kind) + "_"+ (id);
console.log("oks"); console.log("oks");
app.getTypeFromID((kind),(id), (isLibrary));} else { app.getTypeFromID((kind),(id), (isLibrary));} else {
app.playMediaItemById((kind),(id), (isLibrary), item.attributes.url ?? '') app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
} }
}, },
playMediaItem(item){
let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
console.log(kind, id, isLibrary)
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
},
async getTypeFromID(kind,id, isLibrary = false){ async getTypeFromID(kind,id, isLibrary = false){
var a; var a;