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
|
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) {
|
||||||
|
|
|
@ -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')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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: ''
|
||||||
|
|
|
@ -1,22 +1,24 @@
|
||||||
<script type="text/x-template" id="mediaitem-mvview-sp">
|
<script type="text/x-template" id="mediaitem-mvview-sp">
|
||||||
<template>
|
<template>
|
||||||
<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 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>
|
||||||
<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">
|
<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)'>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue