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 return false
} }
}, },
getMediaItemArtwork(url, size = 64) { getMediaItemArtwork(url, height = 64, width) {
var newurl = `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`; var newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}',(height == '516')? "sr" :"cc")}`;
return newurl return newurl
}, },
getNowPlayingArtworkBG(size = 600) { getNowPlayingArtworkBG(size = 600) {

View file

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

View file

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

View file

@ -3,20 +3,22 @@
<div style="position: relative; display: inline-flex;"> <div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)' <div @click.self='app.routeView(item)'
class="cd-mediaitem-mvview"> class="cd-mediaitem-mvview">
<div class="title-browse-sp bold " @click='app.routeView(item)'> <div style="height: 70px; min-height: 70px; max-height: 70px; width: 100%;">
{{ badge ? badge.designBadge : ' '}} <div class="title-browse-sp bold " @click='app.routeView(item)' style = "color: darkgrey;">
{{ badge ? badge.designBadge : ''}}
</div> </div>
<div class="title-browse-sp " > <div class="title-browse-sp " >
{{ (badge != null && badge.designTag != null) ? badge.designTag : (item.attributes.name ?? ' ') }} {{ (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 semibold" >
{{ (item.attributes.artistName ?? (item.attributes.curatorName ?? ' ')) }}
</div> </div>
<div class="artwork"> <div class="artwork">
<mediaitem-artwork <mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''" :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 : '')) : '' " :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> ></mediaitem-artwork>
</div> </div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'> <div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>