More Components

resources/cider-ui-tests/index.html

@@ -31,20 +31,23 @@
                     <div class="app-title"></div>
                 </div>
                 <div class="app-chrome-item">
-                    <button class="playback-button--small shuffle"></button>
+                    <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" @click="mk.shuffleMode = 1"></button>
+                    <button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
                 </div>
                 <div class="app-chrome-item">
-                    <button class="playback-button previous"></button>
+                    <button class="playback-button previous" @click="mk.skipToPreviousItem()"></button>
                 </div>
                 <div class="app-chrome-item">
                     <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
                     <button class="playback-button play" @click="mk.play()" v-else></button>
                 </div>
                 <div class="app-chrome-item">
-                    <button class="playback-button next"></button>
+                    <button class="playback-button next" @click="mk.skipToNextItem()"></button>
                 </div>
                 <div class="app-chrome-item">
-                    <button class="playback-button--small repeat"></button>
+                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" @click="mk.repeatMode = 1"></button>
+                    <button class="playback-button--small repeat active" @click="mk.repeatMode = 2" v-else-if="mk.repeatMode == 1"></button>
+                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0" v-else-if="mk.repeatMode == 2"></button>
                 </div>
             </div>
             <div class="app-chrome--center">
@@ -188,18 +191,18 @@
                 <template v-if="page == 'search'">
                     <h1 class="header-text">{{ search.term }}</h1>
                     <template v-if="search.results['meta']">
+                        <template v-if="search.results.songs">
+                            <h3>Artists</h3>
+                            <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
+                        </template>
                         <template v-if="search.results.songs">
                             <h3>Songs</h3>
-                            <mediaitem-square :item="item" v-for="item in search.results.songs.data"></mediaitem-square>
+                            <mediaitem-list-item :item="item" v-for="item in search.results.songs.data"></mediaitem-list-item>
                         </template>
                         <template v-if="search.results.songs">
                             <h3>Albums</h3>
                             <mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
                         </template>
-                        <template v-if="search.results.songs">
-                            <h3>Artists</h3>
-                            <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
-                        </template>
                         <template v-if="search.results.songs">
                             <h3>Playlists</h3>
                             <mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
@@ -215,11 +218,58 @@
     <div class="bg-artwork"></div>
 </div>
 
+<script type="text/x-template" id="mediaitem-list-item">
+    <template>
+        <div @click="$parent.playMediaItemById(item.id, item.type)"
+             class="cd-mediaitem-list-item">
+            <div class="artwork"
+                 :class="{'round': item.type == 'artists'}"
+                 :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 55)}
+                "></div>
+            <div class="info-rect">
+                <div class="title text-overflow-elipsis">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis">
+                    <template v-if="item.attributes.artistName">
+                        {{ item.attributes.artistName }}
+                    </template>
+                </div>
+            </div>
+        </div>
+    </template>
+</script>
+
+<script type="text/x-template" id="mediaitem-hrect">
+    <template>
+        <div @click="$parent.playMediaItemById(item.id, item.type)"
+             class="cd-mediaitem-hrect">
+            <div class="artwork"
+                 :class="{'round': item.type == 'artists'}"
+                 :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 70)}
+                "></div>
+            <div class="info-rect">
+                <div class="title text-overflow-elipsis">
+                    {{ item.attributes.name }}
+                </div>
+                <div class="subtitle text-overflow-elipsis">
+                    {{ item.type }}
+                    <template v-if="item.attributes.artistName">
+                        ∙ {{ item.attributes.artistName }}
+                    </template>
+                </div>
+            </div>
+        </div>
+    </template>
+</script>
+
 <script type="text/x-template" id="mediaitem-square">
     <template>
         <div @click="$parent.playMediaItemById(item.id, item.type)"
                 class="cd-mediaitem-square">
-            <div class="artwork" :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 80)}"></div>
+            <div class="artwork"
+                 :class="{'round': item.type == 'artists'}"
+                 :style="{'--artwork': $parent.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
             <div class="title text-overflow-elipsis">
                 {{ item.attributes.name }}
             </div>

resources/cider-ui-tests/index.js

@@ -5,6 +5,20 @@ Vue.component('mediaitem-square', {
     }
 });
 
+Vue.component('mediaitem-hrect', {
+    template: '#mediaitem-hrect',
+    props: ['item'],
+    methods: {
+    }
+});
+
+Vue.component('mediaitem-list-item', {
+    template: '#mediaitem-list-item',
+    props: ['item'],
+    methods: {
+    }
+});
+
 const app = new Vue({
     el: "#app",
     data: {

resources/cider-ui-tests/style.css

@@ -3,6 +3,8 @@
 :root {
     --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
     --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
+    --mediaItemRadius: 4px;
+    --mediaItemRadiusRound: 100%;
     --keyColor: #fa586a;
     --keyColor-rgb: 250, 88, 106;
     --keyColor-rollover: #ff8a9c;
@@ -1212,10 +1214,106 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     text-overflow: ellipsis;
 }
 
-.cd-mediaitem-square {
+/* mediaitem-list-item */
+.cd-mediaitem-list-item {
+    width: 100%;
+    height: 80px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    font-size: 14px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-bottom: 1px solid rgb(200 200 200 / 10%);
+}
+
+.cd-mediaitem-list-item:hover {
+    background: rgb(200 200 200 / 10%);
+}
+
+.cd-mediaitem-list-item .artwork {
+    height: 55px;
+    width: 55px;
+    background: blue;
+    border-radius: var(--mediaItemRadius);
+    background: var(--artwork);
+    background-size: contain;
+    box-shadow: var(--mediaItemShadow);
+    flex: 0 0 auto;
+    background-repeat: no-repeat;
+    margin: 12px;
+}
+
+.cd-mediaitem-list-item .artwork.round {
+    border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-list-item .info-rect {
+    width: 100%;
+}
+
+.cd-mediaitem-list-item .title {
+    width: 100%;
+}
+
+.cd-mediaitem-list-item .subtitle {
+    width: 100%;
+    font-size: 12px;
+}
+
+/* mediaitem-hrect */
+.cd-mediaitem-hrect {
     background: rgb(255 255 255 / 18%);
-    width: 128px;
+    width: 264px;
-    height: 128px;
+    height: 100px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+    font-size: 14px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.cd-mediaitem-hrect .artwork {
+    height: 70px;
+    width: 70px;
+    background: blue;
+    border-radius: var(--mediaItemRadius);
+    background: var(--artwork);
+    background-size: contain;
+    box-shadow: var(--mediaItemShadow);
+    flex: 0 0 auto;
+    background-repeat: no-repeat;
+    margin: 18px;
+}
+
+.cd-mediaitem-hrect .artwork.round {
+    border-radius: var(--mediaItemRadiusRound);
+}
+
+.cd-mediaitem-hrect .info-rect {
+    width: 100%;
+}
+
+.cd-mediaitem-hrect .title {
+    width: 100%;
+    text-align: center;
+}
+
+.cd-mediaitem-hrect .subtitle {
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+}
+
+
+/* mediaitem-square */
+.cd-mediaitem-square {
+    width: 200px;
+    height: 190px;
     display: inline-flex;
     flex: 0 0 auto;
     flex-direction: column;
@@ -1226,18 +1324,28 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     cursor: pointer;
 }
 
+.cd-mediaitem-square:hover {
+    background: rgb(200 200 200 / 10%);
+}
+
 .cd-mediaitem-square .artwork {
-    height: 80px;
+    height: 128px;
-    width: 80px;
+    width: 128px;
     background: blue;
-    border-radius: 100%;
+    border-radius: var(--mediaItemRadius);
     background: var(--artwork);
-    background-size: contain;
+    background-size: cover;
     box-shadow: var(--mediaItemShadow);
+    flex: 0 0 auto;
+    margin: 6px;
+}
+
+.cd-mediaitem-square .artwork.round {
+    border-radius: var(--mediaItemRadiusRound);
 }
 
 .cd-mediaitem-square .title {
-    width: 100%;
+    width: 90%;
     text-align: center;
 }