vuefilemanager/resources/js/components/FilesView/MediaFullPreview.vue

<template>
  <div class="media-full-preview" @keydown.esc="closeFullPreview">
    <div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
      <div class="file-wrapper">
        <audio
          class="file"
          v-if="fileInfoDetail.type == 'audio'"
          :src="fileInfoDetail.file_url"
          controlsList="nodownload"
          controls
        ></audio>

        <img
          v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail"
          class="file"
          id="image"
          :src="currentFile.file_url"
          :style="{ width: sizeWidth, height: sizeHeight }"
          v-on:load="onLoaded"
          v-show="loaded"
        />
        <video
          v-if="fileInfoDetail.type === 'video' && currentFile.file_url"
          :src="currentFile.file_url"
          class="file"
          :style="{ width: sizeWidth, height: sizeHeight }"
          controlsList="nodownload"
          disablePictureInPicture
          playsinline
          controls
        />
        <spinner v-if="!loaded && fileInfoDetail.type === 'image'" />
      </div>
    </div>
  </div>
</template>

<script>
import { events } from '@/bus';
import { mapGetters } from 'vuex';
import ToolbarButton from '@/components/FilesView/ToolbarButton';
import Spinner from '@/components/FilesView/Spinner';

export default {
  components: { ToolbarButton, Spinner },
  data() {
    return {
      currentIndex: 1,
      sliderFile: [],
      loaded: false,
      sizeWidth: '',
      sizeHeight: '',
    };
  },
  computed: {
    ...mapGetters(['fileInfoDetail', 'data']),

    currentFile: function() {
      return this.sliderFile[
        Math.abs(this.currentIndex) % this.sliderFile.length
      ];
    },

    canShareInView() {
      return !this.$isThisLocation([
        'base',
        'participant_uploads',
        'latest',
        'shared',
        'public',
      ]);
    },
  },
  mounted() {
    events.$on('filePreviewAction:next', () => {
      this.currentIndex += 1;
      if (this.currentIndex > this.sliderFile.length - 1) {
        this.currentIndex = 0;
      }
    });
    events.$on('filePreviewAction:prev', () => {
      this.currentIndex -= 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.sliderFile.length - 1;
      }
    });
  },
  created() {
    this.filteredFiles();
    this.imageSizing();
  },
  watch: {
    currentFile() {
      //HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
      this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
      events.$emit('actualShowingImage:ContextMenu', this.currentFile);
    },
    fileInfoDetail() {
      //FILE DELETE HANDLING
      if (!this.fileInfoDetail) {
        if (this.data.length == 0) {
          events.$emit('fileFullPreview:hide');
        } else {
          this.currentIndex = this.currentIndex - 1;
          this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
          this.sliderFile = [];
          this.filteredFiles();
        }
      }
    },
    data(newValue, oldValue) {
      //MOVE ITEM HANDLING
      if (newValue != oldValue) {
        this.sliderFile = [];
        this.filteredFiles();
      }
    },
  },
  methods: {
    imageSizing() {
      if (this.$isMobile()) {
        this.sizeWidth = '100%';
        this.sizeHeight = 'auto';
      } else {
        this.sizeWidth = 'auto';
        this.sizeHeight = '100%';
      }
    },
    closeFullPreview() {
      events.$emit('fileFullPreview:hide');
    },

    filteredFiles() {
      this.data.filter((element) => {
        if (element.type == this.fileInfoDetail.type) {
          this.sliderFile.push(element);
        }
      });
      this.choseActiveFile();
    },
    onLoaded() {
      this.loaded = true;
    },
    choseActiveFile() {
      this.sliderFile.forEach((element, index) => {
        if (element.unique_id == this.fileInfoDetail.unique_id) {
          this.currentIndex = index;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@assets/vue-file-manager/_variables';
@import '@assets/vue-file-manager/_mixins';

.media-full-preview {
  height: 93.1%;
  position: relative;
}

.navigation-panel {
  width: 100%;
  height: 7%;
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: space-between;
  background-color: $light-background;
  color: $text;
  .icon-close {
    color: $text;
    @include font-size(21);
    &:hover {
      color: $theme;
    }
  }
}

.file-wrapper-preview {
  width: 100%;
  height: 100%;
  padding: 30px 0px;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  background-color: white;
  .file-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .file {
      max-width: 100%;
      max-height: 100%;
      margin: auto;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .file-wrapper-preview {
    background-color: $dark_mode_background;
  }
}
</style>