added square mediaitem component

resources/cider-ui-tests/index.html

@@ -57,7 +57,8 @@
                                     {{ mk.nowPlayingItem["attributes"]["name"] }}
                                 </div>
                                 <div class="song-artist">
-                                        {{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }}
+                                    {{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{
+                                    mk.nowPlayingItem["attributes"]["albumName"] }}
                                 </div>
                                 <div class="song-progress">
                                     <input type="range" step="0.01" min="0"
@@ -74,7 +75,8 @@
             </div>
             <div class="app-chrome--right">
                 <div class="app-chrome-item volume display--large">
-                        <input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'">
+                    <input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
+                           v-if="typeof mk.volume != 'undefined'">
                 </div>
                 <div class="app-chrome-item generic">
                     <button class="playback-button--small">
@@ -107,6 +109,7 @@
                     <div class="search-input-container">
                         <div class="search-input--icon"></div>
                         <input type="search"
+                               spellcheck="false"
                                @click="showSearch()"
                                @change="showSearch();searchQuery()"
                                placeholder="Search..."
@@ -157,7 +160,8 @@
                         currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
                     </template>
                     <div><input type="text" v-model="quickPlayQuery">
-                            <button @click="quickPlay(quickPlayQuery)">Play</button></div>
+                        <button @click="quickPlay(quickPlayQuery)">Play</button>
+                    </div>
                     <h1 class="header-text">Browse</h1>
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
@@ -186,39 +190,19 @@
                     <template v-if="search.results['meta']">
                         <template v-if="search.results.songs">
                             <h3>Songs</h3>
-                                <button
+                            <mediaitem-square :item="item" v-for="item in search.results.songs.data"></mediaitem-square>
-                                        @click="playMediaItemById(item.id, item.type)"
-                                        v-for="item in search.results.songs.data">
-                                    <b>{{ item.attributes.name }}</b>
-                                    <br>
-                                    {{ item.attributes.artistName }}
-                                </button>
                         </template>
                         <template v-if="search.results.songs">
                             <h3>Albums</h3>
-                                <button
+                            <mediaitem-square :item="item" v-for="item in search.results.albums.data"></mediaitem-square>
-                                        @click="playMediaItemById(item.id, item.type)"
-                                        v-for="item in search.results.albums.data">
-                                    <b>{{ item.attributes.name }}</b>
-                                    <br>
-                                    {{ item.attributes.artistName }}
-                                </button>
                         </template>
                         <template v-if="search.results.songs">
                             <h3>Artists</h3>
-                                <button
+                            <mediaitem-square :item="item" v-for="item in search.results.artists.data"></mediaitem-square>
-                                        @click="playMediaItemById(item.id, item.type)"
-                                        v-for="item in search.results.artists.data">
-                                    {{ item.attributes.name }}
-                                </button>
                         </template>
                         <template v-if="search.results.songs">
                             <h3>Playlists</h3>
-                                <button
+                            <mediaitem-square :item="item" v-for="item in search.results.playlists.data"></mediaitem-square>
-                                        @click="playMediaItemById(item.id, item.type)"
-                                        v-for="item in search.results.playlists.data">
-                                    {{ item.attributes.name }}
-                                </button>
                         </template>
                     </template>
                 </template>
@@ -230,6 +214,22 @@
     </div>
     <div class="bg-artwork"></div>
 </div>
+
+<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="$parent.getMediaItemArtwork(item.attributes.artwork.url)"></div>
+            <div class="title text-overflow-elipsis">
+                {{ item.attributes.name }}
+            </div>
+            <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
+                {{ item.attributes.artistName }}
+            </div>
+        </div>
+    </template>
+</script>
+
 <script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
 <script src="index.js?v=1"></script>
 </body>

resources/cider-ui-tests/index.js

@@ -1,4 +1,11 @@
-var app = new Vue({
+Vue.component('mediaitem-square', {
+    template: '#mediaitem-square',
+    props: ['item'],
+    methods: {
+    }
+});
+
+const app = new Vue({
     el: "#app",
     data: {
         drawertest: false,
@@ -41,6 +48,9 @@ var app = new Vue({
                 return false
             }
         },
+        getMediaItemArtwork(url, size = 64) {
+            return `url("${url.replace('{w}', size).replace('{h}', size)}")`;
+        },
         getNowPlayingArtwork(size = 600) {
             if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
                 return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;

resources/cider-ui-tests/style.css

@@ -145,6 +145,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     flex-direction: column;
     flex: 0 0 auto;
 }
+
 #app-content {
     background-color: var(--color2);
     height: 100%;
@@ -323,8 +324,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 .app-chrome .app-chrome--left,
 .app-chrome .app-chrome--center,
-.app-chrome .app-chrome--right
+.app-chrome .app-chrome--right {
-{
     height: 100%;
     width: 100%;
     display: flex;
@@ -444,9 +444,11 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     height: 100%;
     width: 32px;
 }
+
 .app-chrome .app-chrome-item > .window-controls > div:hover {
     background: rgb(200 200 200 / 10%);
 }
+
 .app-chrome .app-chrome-item > .window-controls > div.close {
     width: 100%;
     height: 100%;
@@ -583,11 +585,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .display--small {
     display: none !important;
 }
+
 /* Window is smaller <= 1023px width */
 @media only screen and (max-width: 1023px) {
     .display--small {
         display: inherit !important;
     }
+
     .display--large {
         display: none !important;
     }
@@ -1198,6 +1202,50 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     height: 100%;
 }
 
+/* Cider */
+
+.text-overflow-elipsis {
+    min-width: 0px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.cd-mediaitem-square {
+    background: rgb(255 255 255 / 18%);
+    width: 128px;
+    height: 128px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    font-size: 14px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.cd-mediaitem-square .artwork {
+    height: 80px;
+    width: 80px;
+    background: blue;
+    border-radius: 100%;
+}
+
+.cd-mediaitem-square .title {
+    width: 100%;
+    text-align: center;
+}
+
+.cd-mediaitem-square .subtitle {
+    width: 100%;
+    text-align: center;
+    font-size: 12px;
+}
+
+
+/* Cider */
+
 /* Transitions */
 .wpfade-enter-active,
 .wpfade-leave-active {

resources/web-remote/index.html

@@ -258,7 +258,8 @@
                                             </div>
                                             <div class="list-entry-artist">
                                                 {{ song.artistName }}
-                                                <span class="lossless-badge" v-if="song.audioTraits.includes('lossless')">Lossless</span>
+                                                <span class="lossless-badge"
+                                                      v-if="song.audioTraits.includes('lossless')">Lossless</span>
                                             </div>
                                         </div>
                                     </div>
@@ -301,7 +302,8 @@
                                             </div>
                                             <div class="list-entry-artist">
                                                 {{ album.artistName }}
-                                                <span class="lossless-badge" v-if="album.audioTraits.includes('lossless')">Lossless</span>
+                                                <span class="lossless-badge"
+                                                      v-if="album.audioTraits.includes('lossless')">Lossless</span>
                                             </div>
                                         </div>
                                     </div>