wr test

2022-01-22 22:46:15 +07:00 · 2022-01-22 22:46:15 +07:00 · c229ab43f4
commit c229ab43f4
parent a688d04cec
4 changed files with 667 additions and 8 deletions
--- a/src/web-remote/views/components/mediaitem-artwork.ejs
+++ b/src/web-remote/views/components/mediaitem-artwork.ejs
@ -0,0 +1,101 @@
+<script type="text/x-template" id="mediaitem-artwork">
+    <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"
+         v-observe-visibility="{callback: visibilityChanged}">
+        <img :src="getMediaItemArtwork(url, size, width)"
+             decoding="async" loading="lazy"
+             class="mediaitem-artwork--img">
+        <!-- <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
+            <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
+        </div> -->
+    </div>
+</script>
+
+<script>
+    Vue.component('mediaitem-artwork', {
+        template: '#mediaitem-artwork',
+        props: {
+            size: {
+                type: [String, Number],
+                default: '120'
+            },
+            width: {
+                type: [String, Number],
+                required: false
+            },
+            url: {
+                type: String,
+                default: ''
+            },
+            type: {
+                type: String,
+                default: ''
+            },
+            video: {
+                type: String,
+                required: false
+            },
+            videoPriority: {
+                type: Boolean,
+                required: false
+            },
+            shadow: {
+                type: String,
+                default: ''
+            }
+        },
+        data: function () {
+            return {
+                app:this.$root,
+                isVisible: false,
+                style: {
+                    "box-shadow": ""
+                },
+                classes: []
+            }
+        },
+        mounted() {
+            this.getClasses()
+        },
+        methods: {
+            getVideoPriority() {
+                return false
+            },
+            getClasses() {
+                switch (this.shadow) {
+                    case "none":
+                        this.classes.push("no-shadow")
+                        break;
+                    case "large":
+                        this.classes.push("shadow")
+                        break;
+                    case "subtle":
+                        this.classes.push("subtle-shadow")
+                        break;
+                    default:
+                        break;
+                }
+                return this.classes;
+            },
+            getArtworkStyle() {
+                return {
+                    width: this.size + 'px',
+                    height: this.size + 'px'
+                };
+            },
+            visibilityChanged: function (isVisible, entry) {
+                this.isVisible = isVisible
+            },
+            getMediaItemArtwork(url, height = 64, width) {
+            if (typeof url == "undefined" || url == "") {
+                return "https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg"
+            }
+            let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900) ? "sr" : "cc"))}`;
+
+            if (newurl.includes("900x516")) {
+                newurl = newurl.replace("900x516cc", "900x516sr").replace("900x516bb", "900x516sr");
+            }
+            return newurl
+            },
+        }
+    });
+</script>