okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rectangular view for music video

Browse source
This commit is contained in:
vapormusic 2021-12-10 11:07:31 +07:00
parent 8e2f61ca76
commit 59850b1006
6 changed files with 182 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

93
resources/cider-ui-tests/style.less
View file

@ -679,17 +679,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-weight: 600;
text-align: center;
font-size: 13px;
height: 1em;
line-height: 1em;
height: 1.3em;
line-height: 1.3em;
overflow: hidden;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-artist {
font-weight: 400;
font-size: 13px;
font-size: 12px;
text-align: center;
height: 1em;
line-height: 1em;
height: 1.2em;
line-height: 1.2em;
overflow: hidden;
/* animation: marquee 10s linear infinite; */
}
@ -2076,6 +2076,89 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 12px;
}
/* mediaitem-mvview */
.cd-mediaitem-mvview {
width: 300px;
height: 250px;
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: flex-start;
align-items: center;
border-radius: 6px;
margin-left: 10px;
cursor: pointer;
>* {
z-index: inherit;
}
}
.cd-mediaitem-mvview .artwork {
height: 190px;
width: 300px;
background: blue;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: var(--artwork);
background-size: cover;
flex: 0 0 auto;
margin: 6px;
margin-top: 0px;
}
.cd-mediaitem-mvview-overlay {
position: absolute;
width: 300px;
float: right;
height: 250px;
top: 0px;
margin: 10px;
margin-top: 0px;
opacity: 0;
}
.cd-mediaitem-mvview-overlay>* {
pointer-events: auto;
}
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay {
z-index: 3;
}
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay:hover {
opacity: 1;
}
.cd-mediaitem-mvview+.cd-mediaitem-mvview-overlay {
pointer-events: none;
}
.cd-mediaitem-mvview:hover+.cd-mediaitem-mvview-overlay {
opacity: 1;
}
.cd-mediaitem-mvview .artwork.round {
border-radius: var(--mediaItemRadiusRound);
}
.cd-mediaitem-mvview .title {
width: 90%;
text-align: center;
}
.cd-mediaitem-mvview .subtitle {
width: 100%;
text-align: center;
font-size: 12px;
}
/* mediaitem-square */
.cd-mediaitem-square {
width: 200px;

59
resources/cider-ui-tests/views/components/mediaitem-mvview.ejs Normal file
View file

@ -0,0 +1,59 @@
<script type="text/x-template" id="mediaitem-mvview">
<template>
<div style="position: relative; display: inline-flex;">
<div @click.self='app.routeView(item)'
class="cd-mediaitem-mvview">
<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="300"
:type="item.type"></mediaitem-artwork>
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)'>
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
: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',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
<div class="title text-overflow-elipsis" @click='app.routeView(item)'>
{{ item.attributes.name ?? '' }}
</div>
<div class="subtitle text-overflow-elipsis item-navigate" v-if="item.attributes.artistName" :style = "{'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : ''}" @click="if(item.attributes.artistName)app.searchAndNavigate(item,'artist')">
{{ item.attributes.artistName ?? '' }}
</div>
</div>
<div class="cd-mediaitem-mvview-overlay" @click.self='app.routeView(item)' tabindex="0">
<div class="button" style="
border-radius: 50%;
background: rgba(50,50,50,0.7);"
: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',
'margin-left': '250px',
width: '40px',
height: '40px',} :
{margin: '35px',
width: '120px',
height: '120px',}]" @click="app.playMediaItem(item)">
<%- include("../svg/play.svg") %>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-mvview', {
template: '#mediaitem-mvview',
props: ['item'],
methods: {}
});
</script>

17
resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-mvview.ejs Normal file
View file

@ -0,0 +1,17 @@
<script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
<template>
<div class="cd-hmedia-scroller">
<mediaitem-mvview :item="item"
v-for="item in items"></mediaitem-mvview>
</div>
</template>
</script>
<script>
Vue.component('mediaitem-scroller-horizontal-mvview', {
template: '#mediaitem-scroller-horizontal-mvview',
props: ['items'],
methods: {}
});
</script>

4
resources/cider-ui-tests/views/main.ejs
View file

@ -444,6 +444,8 @@
<%- include('components/mediaitem-scroller-horizontal-large') %>
<!-- Horizontal MediaItem Scroller (SP : Special) -->
<%- include('components/mediaitem-scroller-horizontal-sp') %>
<!-- Horizontal MediaItem Scroller (MV) -->
<%- include('components/mediaitem-scroller-horizontal-mvview') %>
<!-- MediaItem List Item -->
<%- include('components/mediaitem-list-item') %>
<!-- MediaItem Horizontal Rectangle -->
@ -454,6 +456,8 @@
<%- include('components/mediaitem-square-large') %>
<!-- MediaItem Square SP -->
<%- include('components/mediaitem-square-sp') %>
<!-- MediaItem MusicVideo -->
<%- include('components/mediaitem-mvview') %>
<!-- Animated Artwork View -->
<%- include('components/animatedartwork-view') %>

7
resources/cider-ui-tests/views/pages/artist.ejs
View file

@ -62,8 +62,15 @@
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<template v-if="!(data.views[view].attributes.title ?
data.views[view].attributes.title : '???').includes('Video')">
<mediaitem-scroller-horizontal-large :items="data.views[view].data.limit(10)">
</mediaitem-scroller-horizontal-large>
</template>
<template v-else>
<mediaitem-scroller-horizontal-mvview
:items="data.views[view].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
</template>
<div class="row">
<div class="col" v-if="data.attributes.artistBio">

8
resources/cider-ui-tests/views/pages/search.ejs
View file

@ -34,9 +34,15 @@
<button class="cd-btn-seeall">See All</button>
</div>
</div>
<template v-if="!app.friendlyTypes(section).includes('Video')">
<mediaitem-scroller-horizontal-large
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-large>
</template>
</template>
<template v-else>
<mediaitem-scroller-horizontal-mvview
:items="search.results[section].data.limit(10)"></mediaitem-scroller-horizontal-mvview>
</template>
</template>
</template>
</div>
</script>