<!--
 Copyright (C) 2016-2023 Jones Magloire @Joxit

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<image-size>
  <div title="Compressed size of your image.">{ getImageSize(props.image) }</div>
  <script>
    import { bytesToSize } from '../../scripts/utils';
    export default {
      onMounted(props, state) {
        this.load(props, state);
      },
      onUpdated(props, state) {
        this.load(props, state);
      },
      load(props, state) {
        if (typeof props.image.size === 'number') {
          return;
        }
        props.image.on('size', (size) => {
          this.update({
            size,
          });
        });
        props.image.trigger('get-size');
      },
      getImageSize(image) {
        return bytesToSize(image.size);
      },
    };
  </script>
</image-size>
