improved artist page

src/renderer/views/components/inline-collection-list.ejs

@@ -0,0 +1,132 @@
+<script type="text/x-template" id="inline-collection-list">
+    <div class="collection-page">
+        <h3 class="header-text" v-observe-visibility="{callback: headerVisibility}">{{ title }}</h3>
+        <div v-if="data['data'] != 'null'" class="well itemContainer">
+            <template v-for="(item, key) in data.data">
+                <template v-if="item.type == 'artists'">
+                    <mediaitem-square :item="item"></mediaitem-square>
+                </template>
+            <template v-else>
+                    <mediaitem-list-item
+                            v-if="getKind(item) == 'song'"
+                            :index="key"
+                            :item="item"></mediaitem-list-item>
+                    <mediaitem-square v-else :item="item" :type="getKind(item)"></mediaitem-square>
+                </template>
+            </template>
+            <button v-if="triggerEnabled" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{this.app.getLz('term.showMore')}}
+            </button>
+        </div>
+        <transition name="fabfade">
+            <button class="top-fab" v-show="showFab" @click="scrollToTop()">
+                <%- include("../svg/arrow-up.svg") %>
+            </button>
+        </transition>
+        <div class="well itemContainer" v-show="loading">
+            <div class="spinner"></div>
+        </div>
+    </div>
+</script>
+<script>
+    Vue.component('inline-collection-list', {
+        template: "#inline-collection-list",
+        props: {
+            data: {
+                required: true
+            },
+            title: {
+                type: String,
+                required: false
+            },
+            type: {
+                type: String,
+                required: false,
+                default: "artists"
+            }
+        },
+        data: function() {
+            return {
+                triggerEnabled: true,
+                canSeeTrigger: false,
+                showFab: false,
+                commonKind: "song",
+                api: this.$root.mk.api,
+                loading: false,
+                app: this.$root,
+            }
+        },
+        watch:{
+            data: function(newVal, oldVal) {
+            console.log("newdata",newVal);
+            },
+        
+        },
+        methods: {
+            getKind(item) {
+                if (typeof item.kind != "undefined") {
+                    this.commonKind = item.kind;
+                    return item.kind
+                }
+                if (typeof item.attributes.playParams != "undefined") {
+                    this.commonKind = item.attributes.playParams.kind
+                    return item.attributes.playParams.kind
+                }
+                return this.commonKind
+            },
+            scrollToTop() {
+                let target = document.querySelector(".header-text")
+                document.querySelector("#app-content").scrollTo({
+                    top: 0,
+                    left: 0,
+                    behavior: 'smooth'
+                })
+            },
+            getNext() {
+                let self = this
+                this.triggerEnabled = false;
+                if (typeof this.data.next == "undefined") {
+                    return
+                }
+                this.loading = true
+
+                this.api.v3.music(this.data.next, app.collectionList.requestBody).then((response) => {
+                    console.log(response)
+                    if (!app.collectionList.response.groups) {
+                        this.data.data = this.data.data.concat(response.data.data);
+                        if (response.data.next) {
+                            this.data.next = response.data.next;
+                            this.triggerEnabled = true;
+                        }
+                        this.loading = false
+                    } else {
+                        if (!response.data.results[app.collectionList.response.groups]) {
+                            this.loading = false
+                            return
+                        }
+                        this.data.data = this.data.data.concat(response.data.results[app.collectionList.response.groups].data);
+                        if (response.data.results[app.collectionList.response.groups].next) {
+                            this.data.next = response.data.results[app.collectionList.response.groups].next;
+                            this.triggerEnabled = true;
+                            this.loading = false
+                        }
+                    }
+                })
+            },
+            headerVisibility: function(isVisible, entry) {
+                if (isVisible) {
+                    this.showFab = false;
+                } else {
+                    this.showFab = true;
+                }
+            },
+            visibilityChanged: function(isVisible, entry) {
+                if (isVisible) {
+                    this.canSeeTrigger = true;
+                    this.getNext();
+                } else {
+                    this.canSeeTrigger = false;
+                }
+            }
+        }
+    })
+</script>