rectangular view for music video

resources/cider-ui-tests/style.less

@@ -679,17 +679,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   font-weight: 600;
   text-align: center;
   font-size: 13px;
-  height: 1em;
+  height: 1.3em;
-  line-height: 1em;
+  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;
+  height: 1.2em;
-  line-height: 1em;
+  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;

resources/cider-ui-tests/views/components/mediaitem-mvview.ejs

@@ -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>

resources/cider-ui-tests/views/components/mediaitem-scroller-horizontal-mvview.ejs

@@ -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>

resources/cider-ui-tests/views/main.ejs

@@ -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') %>
 

resources/cider-ui-tests/views/pages/artist.ejs

@@ -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">

resources/cider-ui-tests/views/pages/search.ejs

@@ -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>