fix the top view of browse
This commit is contained in:
parent
2fca495a5d
commit
b49c079a21
4 changed files with 21 additions and 17 deletions
|
@ -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) {
|
||||
|
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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: ''
|
||||
|
|
|
@ -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)'>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue