vuefilemanager/resources/js/components/FilePreview/FilePreviewMedia.vue

<template>
	<div v-if="currentFile" class="file-preview-wrapper">

        <!--Arrow navigation-->
        <div v-if="files.length > 1" class="navigation-arrows">
            <div @click.prevent="prev" class="prev">
                <chevron-left-icon size="17" />
            </div>

            <div @click.prevent="next" class="next">
                <chevron-right-icon size="17" />
            </div>
        </div>

        <!--File preview-->
		<div class="file-wrapper-preview">

            <!--Show PDF-->
			<PdfFile v-if="isPDF" :file="currentFile"/>

            <!--Show Audio, Video and Image-->
            <div v-if="isAudio || isImage || isVideo" class="file-wrapper">
				<Audio v-if="isAudio" :file="currentFile"/>
				<Video v-if="isVideo" :file="currentFile"/>
				<ImageFile v-if="isImage" :file="currentFile"/>
			</div>
		</div>
	</div>
</template>

<script>
import {ChevronLeftIcon, ChevronRightIcon} from 'vue-feather-icons'
import ToolbarButton from '/resources/js/components/FilesView/ToolbarButton'
import ImageFile from '/resources/js/components/FilePreview/Media/ImageFile'
import PdfFile from '/resources/js/components/FilePreview/Media/PdfFile'
import Audio from '/resources/js/components/FilePreview/Media/Audio'
import Video from '/resources/js/components/FilePreview/Media/Video'
import Spinner from '/resources/js/components/FilesView/Spinner'
import {mapGetters} from 'vuex'
import {events} from '/resources/js/bus'

export default {
    name: 'FilePreviewMedia',
    components: {
        ChevronRightIcon,
        ChevronLeftIcon,
        ToolbarButton,
		ImageFile,
		PdfFile,
        Spinner,
		Audio,
		Video,
    },
    computed: {
        ...mapGetters([
            'fastPreview',
            'clipboard',
            'entries',
        ]),
        currentFile() {
            return this.fastPreview
				? this.fastPreview
				: this.files[Math.abs(this.currentIndex) % this.files.length]
        },
        isPDF() {
            return this.currentFile.mimetype === 'pdf'
        },
        isVideo() {
            return this.currentFile.type === 'video'
        },
        isAudio() {
            return this.currentFile.type === 'audio'
        },
        isImage() {
            return this.currentFile.type === 'image'
        }
    },
    data() {
        return {
            currentIndex: 0,
            files: [],
        }
    },
    watch: {
        files() {
            if (this.files.length === 0)
                events.$emit('file-preview-wrapper:hide')
        },
        currentFile() {
            if (this.clipboard[0]) {
                this.$store.commit('CLIPBOARD_CLEAR')
                this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFile)
            }
        },
        clipboard() {
            if (!this.clipboard[0]) {
                this.currentIndex -= 1

                this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFile)

                this.files = []
            }
        },
        data(newValue, oldValue) {
            if (newValue !== oldValue) {
                this.files = []
            }
        },
    },
    methods: {
        getFilesForView() {
            let requestedFile = this.clipboard[0]

            this.entries.map(element => {

                if (requestedFile.mimetype === 'pdf') {

                    if (element.mimetype === 'pdf')
                        this.files.push(element)

                } else {

                    if (element.type === requestedFile.type)
                        this.files.push(element)
                }
            })

            this.files.forEach((element, index) => {
                if (element.id === this.clipboard[0].id) {
                    this.currentIndex = index
                }
            })
        },
		next() {
			if (!this.files.length > 1) return

			this.currentIndex += 1

			if (this.currentIndex > this.files.length - 1) {
				this.currentIndex = 0
			}
		},
		prev() {
			if (!this.files.length > 1) return

			this.currentIndex -= 1

			if (this.currentIndex < 0) {
				this.currentIndex = this.files.length - 1
			}
		}
    },
    created() {
		events.$on('file-preview:next', () => this.next())
        events.$on('file-preview:prev', () => this.prev())

        this.getFilesForView()
    }
}
</script>

<style lang="scss">
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';

.navigation-arrows {

    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 45%;
        display: flex;
        justify-content: center;
        color: $text;
        border-radius: 50%;
        text-decoration: none;
        user-select: none;
        filter: drop-shadow(0px 1px 0 rgba(255, 255, 255, 1));
        padding: 10px;
        z-index: 2;
    }

    .next {
        right: 0;
    }

    .prev {
        left: 0;
    }
}

.file-preview-wrapper {
    height: calc(100% - 72px);
    top: 72px;
    position: relative;
    background-color: white;
}

.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;
        align-items: center;

        .file-shadow {
            box-shadow: 0 8px 40px rgba(17, 26, 52, 0.05);
        }

        .file {
            max-width: 100%;
            max-height: 100%;
            align-self: center;
        }

        .audio {
            border-radius: 28px;
        }

        img {
            border-radius: 4px;
        }
    }
}

@media only screen and (max-width: 960px) {

    .file-preview-wrapper {
        top: 53px;
    }
}


.dark-mode {

    .navigation-arrows {
        .prev, .next {
            color: $light-text;
            filter: drop-shadow(0px 1px 0 rgba(17, 19, 20, 1));
        }
    }

    .file-wrapper-preview {
        background-color: $dark_mode_background;

        .file-wrapper {
            .file-shadow {
                box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
            }
        }
    }
}
</style>