<script type="text/x-template" id="mediaitem-artwork">
    <div class="mediaitem-artwork" :style="awStyle" @contextmenu="contextMenu"
         :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
        <img :src="imgSrc"
             ref="image"
             decoding="async"
             loading="lazy"
             :style="imgStyle"
             @load="imgLoaded()"
             class="mediaitem-artwork--img">
        <div v-if="video && 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
      },
      bgcolor: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: ''
      },
      video: {
        type: String,
        required: false
      },
      videoPriority: {
        type: Boolean,
        required: false
      },
      shadow: {
        type: String,
        default: ''
      },
      upscaling: {
        type: Boolean,
        default: false
      }
    },
    data: function() {
      return {
        app: this.$root,
        isVisible: false,
        style: {
          "box-shadow": ""
        },
        awStyle: {
          background: this.bgcolor
        },
        imgStyle: {
          opacity: 0,
          transition: "opacity .25s linear"
        },
        classes: [],
        imgSrc: ""
      }
    },
    computed: {
      windowRelativeScale: function() {
        return app.$store.state.windowRelativeScale;
      }
    },
    watch: {
      windowRelativeScale: function(newValue, oldValue) {
        this.swapImage(newValue)
      },
      url: function(newValue, oldValue) {
        this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
      }
    },
    mounted() {
      this.getClasses()
      this.imgSrc = app.getMediaItemArtwork(this.url, this.size, this.width)
    },
    methods: {
      swapImage(newValue) {
        if (!this.upscaling || window.devicePixelRatio !== 1) return
        if (newValue > 1.5) {
          this.imgSrc = app.getMediaItemArtwork(this.url, parseInt(this.size * 2.0), parseInt(this.size * 2.0));
        }
      },
      imgLoaded() {
        this.imgStyle.opacity = 1
        this.swapImage(app.$store.state.windowRelativeScale)
        // this.awStyle.background = ""
      },
      contextMenu(event) {
        let self = this
        app.showMenuPanel({
          items: {
            "save": {
              name: app.getLz('action.openArtworkInBrowser'),
              action: () => {
                window.open(app.getMediaItemArtwork(self.url, 1024, 1024))
              }
            }
          }
        }, event)
      },
      getVideoPriority() {
        if (app.cfg.visual.animated_artwork == "always") {
          return true;
        } else if (this.videoPriority && app.cfg.visual.animated_artwork == "limited") {
          return true
        } else if (app.cfg.visual.animated_artwork == "disabled") {
          return false
        }
        return this.videoPriority
      },
      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'
        };
      }
    }
  });
</script>
