fix the top view of browse

This commit is contained in:
vapormusic 2021-12-25 09:12:45 +07:00
parent 2fca495a5d
commit b49c079a21
4 changed files with 21 additions and 17 deletions

View file

@ -1992,8 +1992,8 @@ const app = new Vue({
return false
}
},
getMediaItemArtwork(url, size = 64) {
var newurl = `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
getMediaItemArtwork(url, height = 64, width) {
var newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}',(height == '516')? "sr" :"cc")}`;
return newurl
},
getNowPlayingArtworkBG(size = 600) {

View file

@ -10,7 +10,7 @@
Vue.component('animatedartwork-view', {
template: '#animatedartwork-view',
props: ['video', 'hls'],
mounted() {
async mounted() {
if (this.video) {
this.$nextTick(function () {
@ -24,7 +24,6 @@
capLevelToPlayerSize: true
};
if (this.hls) {
console.log('detached');
this.hls.detachMedia();
} else {
@ -53,7 +52,6 @@
if(this.hls) {
await this.hls.destroy();
this.hls = null
console.log('killed')
}
}
});

View file

@ -1,7 +1,7 @@
<script type="text/x-template" id="mediaitem-artwork">
<template v-if="type == 'artists'">
<div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
<img :src="app.getMediaItemArtwork(url, size)"
<img :src="app.getMediaItemArtwork(url, size, width)"
decoding="async"
class="mediaitem-artwork--img">
</div>
@ -9,7 +9,7 @@
<template v-else>
<div class="mediaitem-artwork" :key="url" :style="getStyle()"
v-observe-visibility="{callback: visibilityChanged}">
<img :src="app.getMediaItemArtwork(url, size)"
<img :src="app.getMediaItemArtwork(url, size, width)"
decoding="async"
class="mediaitem-artwork--img">
<div v-if="video && isVisible" class="animatedartwork-view-box">
@ -27,6 +27,10 @@
type: String,
default: '120'
},
width: {
type: String,
required: false
},
url: {
type: String,
default: ''

View file

@ -1,22 +1,24 @@
<script type="text/x-template" id="mediaitem-mvview-sp">
<template>
<div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)'
<div @click.self='app.routeView(item)'
class="cd-mediaitem-mvview">
<div class="title-browse-sp bold " @click='app.routeView(item)'>
{{ badge ? badge.designBadge : ' '}}
<div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%;">
<div class="title-browse-sp bold " @click='app.routeView(item)' style = "color: darkgrey;">
{{ badge ? badge.designBadge : ''}}
</div>
<div class="title-browse-sp " >
{{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? '') }}
</div>
<div class="title-browse-sp semibold" style = "color: darkgrey;" >
{{ (item.attributes.artistName ?? (item.attributes.curatorName ?? '')) }}
</div>
</div>
<div class="title-browse-sp " >
{{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? ' ') }}
</div>
<div class="title-browse-sp semibold" >
{{ (item.attributes.artistName ?? (item.attributes.curatorName ?? ' ')) }}
</div>
<div class="artwork">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
:size="imagesize ?? 300"
:size="516" :width="900"
></mediaitem-artwork>
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>