@oxygen-cms/ui 1.5.0

package/src/components/media/MediaItem.vue

@@ -0,0 +1,282 @@
+<template>
+    <div class="media-item card" :class="item.selected ? 'media-item-selected' : ''" >
+        <div class="card-image cursor-pointer" @click.exact="select(true)" @click.shift.exact="select(false)">
+            <MediaItemPreview :item="item" />
+        </div>
+        <div class="card-content">
+            <p class="title is-4 cursor-pointer has-text-centered" @click.exact="select(true)" @click.shift.exact="select(false)">{{ item.name }}</p>
+            <p v-if="displayFullPath" class="subtitle is-6 cursor-pointer has-text-centered" @click.exact="select(true)" @click.shift.exact="select(false)">
+                inside '{{ directoryPath }}'
+<!--                <b-icon icon="file-image" v-if="item.type === TYPE_IMAGE"></b-icon>-->
+<!--                <b-icon icon="file" v-else-if="item.type === TYPE_DOCUMENT"></b-icon>-->
+<!--                <b-icon icon="file-audio" v-else-if="item.type === TYPE_AUDIO"></b-icon>-->
+<!--                {{ item.slug }}.{{ item.extension }}-->
+            </p>
+
+            <div v-if="item.selected" class="content media-item-toolbar">
+                <b-button icon-left="photo-video" size="is-small" rounded tag="a" :href="externalLink">View</b-button>
+                <b-button icon-left="pencil-alt" size="is-small" rounded @click="openEditModal">Edit info</b-button>
+                <MediaChooseDirectory v-if="!item.deletedAt" @submit="moveToDirectory"></MediaChooseDirectory>
+                <b-button v-if="!item.deletedAt" icon-left="share" size="is-small" rounded outlined @click="isShareModalActive = true">Share</b-button>
+                <b-button v-if="!item.deletedAt" icon-left="trash" size="is-small" rounded outlined type="is-danger" @click="deleteItem">Delete</b-button>
+                <b-button v-if="item.deletedAt" icon-left="recycle" size="is-small" rounded outlined @click="restoreItem">Restore</b-button>
+                <b-button v-if="item.deletedAt" icon-left="trash" size="is-small" rounded outlined type="is-danger" @click="confirmForceDeleteItem">Delete forever</b-button>
+            </div>
+        </div>
+
+        <b-modal :active.sync="isShareModalActive" trap-focus has-modal-card width="80%">
+            <div class="modal-card" style="width: auto;">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Share a public link</p>
+                </header>
+                <section class="modal-card-body">
+                    <p>When referencing "{{ item.name }}" externally, use the following URL:<br/>
+                    <a :href="externalLink">{{ externalLink }}</a>
+                    </p>
+                    <br />
+
+                    <p>To use this item within Oxygen, use the <em>"Insert Photo or File"</em> button inside the content editor.</p>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button
+                        label="Close"
+                        @click="isShareModalActive = false" />
+                </footer>
+            </div>
+        </b-modal>
+
+        <b-modal v-hotkey="keymap" :active.sync="isEditModalActive" trap-focus has-modal-card width="80%">
+            <div class="modal-card" style="width: auto">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Edit Media Item - {{ name }}</p>
+                </header>
+                <section class="modal-card-body">
+                    <b-field label="Name">
+                        <b-input v-model="name"></b-input>
+                    </b-field>
+                    <b-field>
+                        <template #label>
+                            Slug
+                            <b-tooltip multilined position="is-right" type="is-dark" label="How this item is referenced in code. If left blank, it will be autogenerated.">
+                                <b-icon size="is-small" icon="question-circle"></b-icon>
+                            </b-tooltip>
+                        </template>
+                        <p class="control">
+                            <b-tooltip label="To change, move this item to another directory."
+                                       multilined
+                                       type="is-dark"
+                                       position="is-right">
+                                <b-button disabled>{{ directorySlug }}/</b-button>
+                            </b-tooltip>
+                        </p>
+                        <b-input v-model="slug" placeholder="will be set from 'Name'" expanded></b-input>
+                        <p class="control">
+                            <b-tooltip label="The extension is set from the file type."
+                                       multilined
+                                       type="is-dark"
+                                       position="is-left">
+                                <b-button disabled>.{{ item.extension }}</b-button>
+                            </b-tooltip>
+                        </p>
+                    </b-field>
+                    <b-field label="Author">
+                        <b-input v-model="author"></b-input>
+                    </b-field>
+                    <b-field>
+                        <template #label>
+                            Caption
+                            <b-tooltip multilined position="is-right" type="is-dark" label="May be displayed next to the item, or used as alt-text for vision-impaired.">
+                                <b-icon size="is-small" icon="question-circle"></b-icon>
+                            </b-tooltip>
+                        </template>
+                        <b-input v-model="caption"></b-input>
+                    </b-field>
+                    <b-field>
+                        <template #label>
+                            Description
+                            <b-tooltip multilined position="is-right" type="is-dark" label="Arbitrary extra details/notes - will not be shown to the public.">
+                                <b-icon size="is-small" icon="question-circle"></b-icon>
+                            </b-tooltip>
+                        </template>
+                        <b-input v-model="description" type="textarea"></b-input>
+                    </b-field>
+
+                    <label class="label">
+                        Variants
+                        <b-tooltip multilined position="is-right" type="is-dark" label="Each uploaded media item will be automatically converted into different sizes/formats to serve optimized images to users.">
+                            <b-icon size="is-small" icon="question-circle"></b-icon>
+                        </b-tooltip>
+                    </label>
+                    <b-table striped :data="variants" :default-sort="['width']">
+                        <b-table-column v-slot="props" label="Filename" field="filename"><a :href="'/content/media/' + props.row.filename">{{ props.row.filename }}</a></b-table-column>
+                        <b-table-column v-slot="props" label="Width (px)" field="width" sortable>{{ props.row.width ? props.row.width : 'Full size' }}</b-table-column>
+                        <b-table-column v-slot="props" label="Format" field="mime" sortable>{{ props.row.mime }}</b-table-column>
+                    </b-table>
+
+                    <label class="label">Versions</label>
+
+                    <b-table striped :data="versions"
+                             :loading="versions.length === 0"
+                             custom-row-key="id"
+                             detailed
+                             detail-key="id">
+                        <b-table-column v-slot="props" label="Name" field="name">{{ props.row.name }}</b-table-column>
+                        <b-table-column v-slot="props" label="Path" field="fullPath">{{ props.row.fullPath }}</b-table-column>
+                        <b-table-column v-slot="props" label="Last Updated" field="updatedAt">
+                            <div class="is-size-7">{{ Internationalize.formatLastUpdated(props.row.updatedAt) }}</div>
+                        </b-table-column>
+
+                        <b-table-column v-slot="slotProps" label="">
+                            <b-button rounded :disabled="slotProps.row.headVersion === null" @click="restoreVersion(slotProps.row.id)">
+                                <span v-if="slotProps.row.headVersion === null">Already current</span>
+                                <span v-else>Restore version</span>
+                            </b-button>
+                        </b-table-column>
+
+                        <template slot="detail" slot-scope="props">
+                            <article class="media">
+                                <div class="media-content">
+                                    <div class="content">
+                                        <p>
+                                            <strong>Author: </strong><span v-if="props.row.author">{{ props.row.author }}</span><em v-else>none</em><br>
+                                            <strong>Caption: </strong><span v-if="props.row.caption">{{ props.row.caption }}</span><em v-else>none</em><br>
+                                            <strong>Description: </strong><span v-if="props.row.description">{{ props.row.description }}</span><em v-else>none</em><br>
+                                        </p>
+                                    </div>
+                                </div>
+                            </article>
+                        </template>
+                    </b-table>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button @click="isEditModalActive = false">Close</b-button>
+                    <b-button type="is-primary" @click="saveEdits">Save</b-button>
+                </footer>
+            </div>
+        </b-modal>
+    </div>
+</template>
+
+<script>
+
+import {morphToNotification} from "../../api";
+import MediaApi from "../../MediaApi";
+import MediaChooseDirectory from "./MediaChooseDirectory.vue";
+import Internationalize from "../../Internationalize";
+import {getDirectoryFullSlug, getDirectoryPathString} from "../../MediaDirectoryApi";
+import MediaItemPreview from "./MediaItemPreview.vue";
+
+export default {
+    name: "MediaItem",
+    components: {MediaChooseDirectory, MediaItemPreview},
+    props: {
+        item: { type: Object, required: true },
+        displayFullPath: Boolean
+    },
+    data() {
+        return {
+            isEditModalActive: false,
+            isShareModalActive: false,
+            name: null,
+            author: null,
+            slug: null,
+            versions: [],
+            caption: null,
+            description: null,
+            mediaApi: new MediaApi(this.$buefy),
+            Internationalize
+        }
+    },
+    computed: {
+        keymap() {
+            return {
+                'ctrl+s': (event) => {
+                    this.saveEdits();
+                    event.preventDefault();
+                }
+            }
+        },
+        variants() {
+            return this.item.variants;
+        },
+        externalLink() {
+            return window.location.origin + '/media/' + this.item.fullPath;
+        },
+        directoryPath() {
+            return getDirectoryPathString(this.item.parentDirectory);
+        },
+        directorySlug() {
+            return getDirectoryFullSlug(this.item.parentDirectory);
+        }
+    },
+    methods: {
+        select(toggle) {
+            if(this.item.selected) {
+                this.$emit('double-click-action', this.item);
+                return;
+            }
+            this.$emit('select', this.item, toggle);
+        },
+        openEditModal() {
+            this.isEditModalActive = true;
+            this.name = this.item.name;
+            this.author = this.item.author;
+            this.slug = this.item.slug;
+            this.caption = this.item.caption;
+            this.description = this.item.description;
+            this.fetchVersions();
+        },
+        async fetchVersions() {
+            this.versions = [];
+            this.versions = (await this.mediaApi.listVersions(this.item.id)).items;
+        },
+        async saveEdits() {
+            let data = await this.mediaApi.update({
+                id: this.item.id,
+                parentDirectory: this.item.parentDirectory,
+                name: this.name,
+                author: this.author,
+                slug: this.slug,
+                caption: this.caption,
+                description: this.description
+            });
+            this.$buefy.toast.open(morphToNotification(data));
+            this.isEditModalActive = false;
+            this.$emit('update:item', data.item);
+        },
+        async restoreItem() {
+            await this.mediaApi.restoreAndNotify(this.item.id);
+            this.$emit('update:item', this.item);
+        },
+        async confirmForceDeleteItem() {
+            await this.mediaApi.confirmForceDelete(this.item.id);
+            this.$emit('update:item', null);
+        },
+        async deleteItem() {
+            await this.mediaApi.deleteAndNotify(this.item.id);
+            this.$emit('update:item', this.item);
+        },
+        async restoreVersion(id) {
+            let data = await this.mediaApi.makeHeadVersion(id);
+            this.$buefy.toast.open(morphToNotification(data));
+            this.versions = [];
+            this.isEditModalActive = false;
+        },
+        async moveToDirectory(directory) {
+            console.log('move to directory', directory);
+            let data = await this.mediaApi.update({
+                id: this.item.id,
+                parentDirectory: directory
+            });
+            this.$buefy.toast.open(morphToNotification(data));
+            this.$emit('update:item', this.item);
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import './media.scss';
+</style>

package/src/components/media/MediaItemPreview.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="media-icon-container">
+        <img v-if="item.type === TYPE_IMAGE && !loadingError" :src="'/content/media/' + item.filename" :alt="item.caption ? item.caption : item.name" @error="loadingFailed">
+        <b-tooltip v-else-if="item.type === TYPE_IMAGE" :label="missingMessage" type="is-dark" position="is-bottom" multilined>
+            <b-icon type="is-danger" icon="file-image" size="is-large" class="media-icon"></b-icon>
+        </b-tooltip>
+        <img v-if="item.type === TYPE_DOCUMENT && !loadingError" :src="'/oxygen/api/media/' + item.id + '/preview'" alt="PDF preview" @error="loadingFailed">
+        <b-tooltip v-else-if="item.type === TYPE_DOCUMENT" :label="missingMessage" type="is-dark" position="is-bottom" multilined>
+            <b-icon type="is-danger" icon="file-pdf" size="is-large" class="media-icon"></b-icon>
+        </b-tooltip>
+        <b-icon v-else-if="item.type === TYPE_AUDIO" icon="music" size="is-large" class="media-icon"></b-icon>
+    </div>
+</template>
+
+<script>
+import MediaApi from "../../MediaApi";
+
+export default {
+    name: "MediaItemPreview",
+    props: {
+        item: { type: Object, required: true },
+        missingMessage: {
+            type: String,
+            default: 'There was an error trying to load this media item. The file may be corrupt or missing'
+        }
+    },
+    data() {
+        return {
+            TYPE_IMAGE: MediaApi.TYPE_IMAGE,
+            TYPE_AUDIO: MediaApi.TYPE_AUDIO,
+            TYPE_DOCUMENT: MediaApi.TYPE_DOCUMENT,
+            loadingError: false
+        }
+    },
+    methods: {
+        loadingFailed() {
+            this.loadingError = true;
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import './media.scss';
+</style>

package/src/components/media/MediaList.vue

@@ -0,0 +1,305 @@
+<template>
+
+    <div class="full-height full-height-container media-container">
+        <div class="top-bar">
+            <div v-if="!paginatedItems.loading && !inTrash && !searchQuery" class="breadcrumb">
+                <ul>
+                    <li v-for="item in getDirectoryBreadcrumbItems(paginatedItems.currentDirectory)" :key="JSON.stringify(item)" :class="item.separator ? 'separator' : ''">
+                        <b-icon v-if="item.home && paginatedItems.currentDirectory === null" class="subtitle" icon="home"></b-icon>
+                        <b-button v-else-if="item.home" type="is-text" class="subtitle" icon-left="home" @click="navigateTo({ currentPath: '' })"></b-button>
+                        <b-button v-else-if="item.link !== null" type="is-text" class="subtitle" @click="navigateTo({ currentPath: item.link })">{{ item.text }}</b-button>
+                        <span v-else class="subtitle is-active">{{ item.text }}</span>
+                    </li>
+                </ul>
+            </div>
+            <div v-else-if="inTrash" class="is-flex">
+                <b-button outlined rounded icon-left="arrow-left" class="action-bar-pad" @click="navigateTo({ currentPath: '' })">All Items</b-button>
+                <div class="title action-bar-pad">Deleted Photos & Files</div>
+            </div>
+            <div v-else-if="searchQuery" class="is-flex">
+                <b-button outlined rounded icon-left="arrow-left" class="action-bar-pad" @click="navigateTo({ currentPath: '' })">All Items</b-button>
+                <div class="title action-bar-pad">Search results for "{{ searchQuery }}"</div>
+            </div>
+            <ul v-else>
+                <li><b-skeleton :animated="true" size="is-large" :width="100"></b-skeleton></li>
+            </ul>
+
+            <div class="is-flex-grow-1"></div>
+
+            <b-field class="action-bar-pad">
+                <p class="control">
+                    <b-button v-if="numberOfItemsSelected > 0" disabled type="is-primary">{{ numberOfItemsSelected }} item(s) selected</b-button>
+                </p>
+                <p class="control">
+                    <b-button v-if="numberOfItemsSelected > 0" icon-left="times" type="is-primary" @click="resetSelection"></b-button>
+                </p>
+            </b-field>
+
+            <b-button v-if="!inTrash && !searchQuery" icon-left="folder-plus" class="action-bar-pad" @click="isCreateDirectoryModalActive = true">New Directory</b-button>
+            <b-button v-if="!inTrash && !searchQuery" icon-left="file-upload" type="is-success" class="action-bar-pad" @click="$router.push({ query: { upload: true }})">Upload Files</b-button>
+            <b-input v-if="!inTrash" rounded placeholder="Search photos and files..." icon="search"
+                     icon-pack="fas" :value="searchQuery" class="action-bar-pad" @input="value => navigateTo({searchQuery: value})"></b-input>
+            <b-button v-if="!inTrash" icon-left="trash" type="is-danger" outlined class="action-bar-pad" @click="navigateTo({inTrash: true})">Deleted Items</b-button>
+        </div>
+
+
+        <div class="media-items full-height-flex scroll-container">
+
+            <b-loading v-model="paginatedItems.loading" :is-full-page="false" :can-cancel="false"></b-loading>
+
+            <h2 v-if="!paginatedItems.loading && paginatedItems.directories.length === 0 && paginatedItems.files.length === 0" class="subtitle media-items-empty">
+                No items found.
+            </h2>
+
+            <MediaDirectory
+                v-for="dir in paginatedItems.directories"
+                :key="dir.id"
+                :directory="dir"
+                :display-full-path="!!searchQuery"
+                @rename="renameDirectory"
+                @move="fetchData"
+                @delete="fetchData"
+                @select="(item, toggle) => handleSelect(paginatedItems.directories, item, toggle)"
+                @navigate="navigateTo"></MediaDirectory>
+            <MediaItem
+                v-for="item in paginatedItems.files"
+                :key="item.id"
+                :item="item"
+                :display-full-path="!!searchQuery || inTrash"
+                @double-click-action="args => $emit('double-click-action', args)"
+                @update:item="fetchData"
+                @select="(i, toggle) => handleSelect(paginatedItems.files, i, toggle)"></MediaItem>
+
+        </div>
+
+        <div v-if="paginatedItems.totalFiles > paginatedItems.filesPerPage" class="pagination-container">
+            <b-pagination
+                v-model="paginatedItems.currentPage"
+                :total="paginatedItems.totalFiles"
+                :per-page="paginatedItems.filesPerPage"
+                aria-next-label="Next page"
+                aria-previous-label="Previous page"
+                aria-page-label="Page"
+                aria-current-label="Current page">
+            </b-pagination>
+        </div>
+
+        <b-modal :active.sync="isCreateDirectoryModalActive" trap-focus has-modal-card aria-role="dialog" aria-modal auto-focus>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Create directory inside of '{{ displayPath }}'</p>
+                </header>
+                <section class="modal-card-body">
+                    <b-field label-position="inside" label="Name">
+                        <b-input v-model="newDirectoryName" @keyup.native.enter="doCreateDirectory"></b-input>
+                    </b-field>
+                </section>
+                <footer class="modal-card-foot is-flex">
+                    <div class="is-flex-grow-1"></div>
+                    <b-button @click="isCreateDirectoryModalActive = false">Close</b-button>
+                    <b-button type="is-primary" @click="doCreateDirectory">Create</b-button>
+                </footer>
+            </div>
+        </b-modal>
+
+        <b-modal :active.sync="isUploadModalActive" trap-focus has-modal-card aria-role="dialog" aria-modal auto-focus>
+            <MediaUpload :current-directory="paginatedItems.currentDirectory" @close="$router.push({ query: { }})" @uploaded="fetchData"></MediaUpload>
+        </b-modal>
+
+    </div>
+
+</template>
+
+<script>
+import MediaApi from "../../MediaApi";
+import MediaDirectory from "./MediaDirectory.vue";
+import MediaItem from "./MediaItem.vue";
+import MediaDirectoryApi, {getDirectoryBreadcrumbItems, getDirectoryPathString} from "../../MediaDirectoryApi";
+import {morphToNotification} from "../../api";
+import MediaUpload from "./MediaUpload.vue";
+
+export default {
+    name: "MediaList",
+    components: { MediaDirectory, MediaItem, MediaUpload },
+    props: {
+        currentPath: {
+            type: String,
+            required: true
+        },
+        inTrash: {
+            type: Boolean
+        },
+        searchQuery: {
+            type: String,
+            default: null
+        }
+    },
+    data() {
+        return {
+            paginatedItems: {files: [], directories: [], currentDirectory: null, totalFiles: null, filesPerPage: null, loading: false, currentPage: 1},
+            isCreateDirectoryModalActive: false,
+            newDirectoryName: '',
+            searchDebounce: null,
+            mediaApi: new MediaApi(this.$buefy),
+            mediaDirectoryApi: new MediaDirectoryApi(this.$buefy),
+            getDirectoryBreadcrumbItems: getDirectoryBreadcrumbItems
+        }
+    },
+    computed: {
+        isUploadModalActive() {
+            return this.$route.query.upload === 'true';
+        },
+        displayPath() {
+            return getDirectoryPathString(this.paginatedItems.currentDirectory);
+        },
+        numberOfItemsSelected() {
+            return this.paginatedItems.files.concat(this.paginatedItems.directories).filter(item => item.selected).length;
+        }
+    },
+    watch: {
+        'searchQuery': 'debounceFetchData',
+        'inTrash': 'fetchData',
+        'paginatedItems.currentPage': 'fetchData',
+        'currentPath': 'fetchData'
+    },
+    created() {
+        this.fetchData()
+    },
+    methods: {
+        async fetchData() {
+            if(this.paginatedItems.loading) {
+                return;
+            }
+            this.paginatedItems.loading = true;
+            this.paginatedItems.files = []
+            this.paginatedItems.directories = [];
+
+            let data = await this.mediaApi.list(this.inTrash, this.searchQuery, this.paginatedItems.currentPage, this.searchQuery ? '' : this.currentPath);
+
+            this.paginatedItems.currentDirectory = data.currentDirectory;
+            this.paginatedItems.directories = data.directories.map(dir => { dir.selected = false; return dir; });
+            this.paginatedItems.files = data.files.map(file => {file.selected = false; return file;});
+            this.paginatedItems.totalFiles = data.totalFiles;
+            this.paginatedItems.filesPerPage = data.filesPerPage;
+            this.paginatedItems.loading = false;
+        },
+        debounceFetchData() {
+            clearTimeout(this.searchDebounce)
+            this.searchDebounce = setTimeout(() => {
+                this.fetchData();
+            }, 400);
+        },
+        handleSelect(items, item, toggle) {
+            this.paginatedItems.files.concat(this.paginatedItems.directories)
+                .forEach(i => {
+                    if(i === item && toggle) {
+                        i.selected = !i.selected;
+                    } else if(i === item) {
+                        i.selected = true;
+                    } else if(toggle) {
+                        i.selected = false;
+                    }
+                });
+            this.$emit('select-files', this.paginatedItems.files.filter(i => i.selected));
+        },
+        resetSelection() {
+            console.log('resetting selection');
+            this.paginatedItems.files.concat(this.paginatedItems.directories)
+                .forEach(i => i.selected = false);
+        },
+        navigateTo(options) {
+            this.$emit('navigate', options);
+        },
+        async doCreateDirectory() {
+            let data = await this.mediaDirectoryApi.create({
+                name: this.newDirectoryName,
+                parentDirectory: this.paginatedItems.currentDirectory
+            });
+            this.$buefy.toast.open(morphToNotification(data));
+            this.newDirectoryName = '';
+            this.isCreateDirectoryModalActive = false;
+            await this.fetchData();
+        },
+        async renameDirectory(dir, name) {
+            let data = await this.mediaDirectoryApi.update({ ... dir, name: name });
+            this.$buefy.toast.open(morphToNotification(data));
+            await this.fetchData();
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import '../../styles/variables';
+    @import '../util.css';
+
+    .box {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+    }
+
+    .media-items {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        align-content: flex-start;
+        padding: 1rem;
+    }
+
+    .pagination-container {
+        padding: 1rem;
+        background-color: white;
+        border-top: 1px solid $grey-lighter;
+
+    }
+
+    .media-container {
+        background-color: $white-bis;
+    }
+
+    .top-bar {
+        display: flex;
+        align-items: center;
+        background-color: white;
+        padding: 1rem;
+        margin-bottom: 0;
+        border-bottom: 1px solid $grey-lighter;
+        width: 100%;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-bar .breadcrumb {
+        margin-bottom: 0;
+    }
+
+    .action-bar-pad {
+        margin: 0 0.25rem;
+    }
+
+    .breadcrumb li {
+        padding: 0 0.5em;
+    }
+
+    .breadcrumb li:first-child a {
+        padding-left: inherit !important;
+    }
+
+    .breadcrumb li + li:before {
+        padding-right: 1.5em;
+    }
+
+    .breadcrumb ul {
+        align-items: center;
+    }
+
+    .media-items-empty {
+        text-align: center;
+        padding: 3rem 1rem;
+        width: 100%;
+    }
+</style>

package/src/components/media/MediaPage.vue

@@ -0,0 +1,44 @@
+<template>
+    <MediaList :current-path="currentPath" :in-trash="inTrash" :search-query="searchQuery" @navigate="onNavigate" @double-click-action="viewItem" />
+</template>
+
+<script>
+import MediaList from './MediaList.vue';
+
+export default {
+    name: "MediaPage",
+    components: { MediaList },
+    props: {
+        currentPath: {
+            type: String,
+            default: ''
+        },
+        inTrash: {
+            type: Boolean,
+            default: false
+        },
+        searchQuery: {
+            type: String,
+            default: null
+        }
+    },
+    methods: {
+        onNavigate(options) {
+            if(typeof options.searchQuery !== 'undefined' && options.searchQuery !== null && options.searchQuery !== '') {
+                this.$router.push({ name: 'media.search', params: { searchQuery: options.searchQuery }});
+            } else if(options.inTrash) {
+                this.$router.push({ name: 'media.trash' });
+            } else {
+                this.$router.push({ name: 'media.list', params: { currentPath: options.currentPath } });
+            }
+        },
+        viewItem(item) {
+            window.location.href = '/media/' + item.fullPath;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>