<template>
  <v-img class="image-with-progress" v-bind="{...$props, ...$attrs}">
    <LoadProgress class="image-with-progress__progress" v-if="loadingProgress != undefined && loadingProgress >= 0 && loadingProgress < 100" :percentage="loadingProgress" />
  </v-img>
</template>

<script>
import User from "../models/user";
import util from "../plugins/utils";
import rememberMeMixin from "./rememberMeMixin";
import * as sdk from "matrix-js-sdk";
import logoMixin from "./logoMixin";
import LoadProgress from "./LoadProgress.vue";
import { VImg } from "vuetify/components/VImg";

export default {
  name: "ImageWithProgress",
  extends: VImg,
  components: { LoadProgress },
  props: {
    loadingProgress: {
      type: Number,
      default: function () {
        return -1;
      },
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.image-with-progress {
  position: relative;
  .image-with-progress__progress {
    position: absolute;
    top: 4px;
    right: 4px;
    color: white;
    width: 32px;
    height: 32px;
  }
}
</style>
