File structure update - all source files now in src directory, cider-ui renamed to renderer, main/backend-related files in main directory, base implementation of mpris and start of backend rework

src/renderer/views/components/mediaitem-artwork.ejs

@@ -0,0 +1,62 @@
+<script type="text/x-template" id="mediaitem-artwork">
+    <template v-if="type == 'artists'">
+        <div class="mediaitem-artwork rounded" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}">
+            <img :src="app.getMediaItemArtwork(url, size)"
+                 class="mediaitem-artwork--img">
+        </div>
+    </template>
+    <template v-else>
+        <div class="mediaitem-artwork" :key="url" :style="{'box-shadow': shadow ? 'var(--mediaItemShadow-Shadow)' : ''}"
+             v-observe-visibility="{callback: visibilityChanged}">
+            <img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
+                 class="mediaitem-artwork--img">
+            <div v-if="video && isVisible" class="animatedartwork-view-box">
+                <animatedartwork-view  :video="video"></animatedartwork-view>   
+            </div>  
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('mediaitem-artwork', {
+        template: '#mediaitem-artwork',
+        props: {
+            size: {
+                type: String,
+                default: '120'
+            },
+            url: {
+                type: String,
+                default: ''
+            },
+            type: {
+                type: String,
+                default: ''
+            },
+            video: {
+                type: String,
+                required: false
+            },
+            shadow: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data: function () {
+            return {
+                isVisible: false
+            }
+        },
+        methods: {
+            getArtworkStyle() {
+                return {
+                    width: this.size + 'px',
+                    height: this.size + 'px'
+                };
+            },
+            visibilityChanged: function (isVisible, entry) {
+                this.isVisible = isVisible
+            }
+        }
+    });
+</script>