diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index 7ef140fd..8a9dc045 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -451,8 +451,8 @@
                         <button class="cd-btn-seeall">See All</button>
                     </div>
                 </div>
-                <mediaitem-square :item="item"
-                                  v-for="item in search.results.artists.data.limit(5)"></mediaitem-square>
+                <mediaitem-square-large :item="item"
+                                  v-for="item in search.results.artists.data.limit(5)"></mediaitem-square-large>
             </template>
             <template v-if="search.results.playlists">
                 <div class="row">
@@ -602,13 +602,13 @@
                     <div class="button" style = "
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                    :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
+                    :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',
                         width: '40px',
                         height: '40px',} :
                         {margin: '35px',
                         width: '120px',
                         height: '120px',}]"
-                    @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
+                    @click="app.playMediaItem(item)">
                     <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
                 </div>
                 <div class="title text-overflow-elipsis"  @click='app.routeView(item)'>
@@ -623,13 +623,13 @@
                 <div class="button" style = "
                 border-radius: 50%;
                 background: rgba(50,50,50,0.7);"
-                :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
+                :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',
                     width: '40px',
                     height: '40px',} :
                     {margin: '35px',
                     width: '120px',
                     height: '120px',}]"
-                @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
+                @click="app.playMediaItem(item)">
                 <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
             </div>
         </div>
@@ -650,13 +650,13 @@
                  <div class="button" style = "
                     border-radius: 50%;
                     background: rgba(50,50,50,0.7);"
-                    :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
+                    :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',
                         width: '40px',
                         height: '40px',} :
                         {margin: '35px',
                         width: '120px',
                         height: '120px',}]"
-                    @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
+                    @click="app.playMediaItem(item)">
                     <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
             </div>     
             <div class="title text-overflow-elipsis"
@@ -676,13 +676,13 @@
             <div class="button" style = "
                border-radius: 50%;
                background: rgba(50,50,50,0.7);"
-               :style = "[(!(item.attributes.playParams.kind ?? item.type).includes('radioStation') && !(item.attributes.playParams.kind ?? item.type).includes('song')) ? {'margin': '140px',
+               :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',
                    width: '40px',
                    height: '40px',} :
                    {margin: '35px',
                    width: '120px',
                    height: '120px',}]"
-               @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
+               @click="app.playMediaItem(item)">
                <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
        </div>     
     </div>
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index 7cb42e7d..87122aff 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -249,17 +249,24 @@ const app = new Vue({
         },
         routeView (item){
             app.showingPlaylist = []; 
-            let kind = item.attributes.playParams.kind ?? item.type;
-            let id = item.attributes.playParams.id ?? item.id;
-            let isLibrary = item.attributes.playParams.isLibrary ?? false;
+            let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
+            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
+            let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
             console.log(kind, id, isLibrary)
             if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
             {app.page = (kind) + "_"+ (id); 
             console.log("oks");
             app.getTypeFromID((kind),(id), (isLibrary));} else {
-                app.playMediaItemById((kind),(id), (isLibrary), item.attributes.url ?? '')
+                app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
             }
         },
+        playMediaItem(item){
+            let kind = (item.attributes.playParams ? (item.attributes.playParams.kind ?? (item.type ?? '')): (item.type ?? ''));
+            let id = (item.attributes.playParams ? (item.attributes.playParams.id ?? (item.id?? '')): (item.id ?? ''));;
+            let isLibrary = item.attributes.playParams ? (item.attributes.playParams.isLibrary ?? false) : false;
+            console.log(kind, id, isLibrary)
+            app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
+        },
         async getTypeFromID(kind,id, isLibrary = false){
             
             var a;