nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-13 08:45:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove addEventListener change the video sizing wrapper

Browse Source
This commit is contained in:
Miloš Holba
2020-08-22 14:18:57 +02:00
parent 9372906a3e
commit 4be77c07ac
4 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mix-manifest.json
+11 -1
View File
@@ -13,5 +13,15 @@
"/js/main.b7f8b140489b6f84b5fa.hot-update.js": "/js/main.b7f8b140489b6f84b5fa.hot-update.js", "/js/main.b7f8b140489b6f84b5fa.hot-update.js": "/js/main.b7f8b140489b6f84b5fa.hot-update.js",
"/js/main.072990b3c71796c0890e.hot-update.js": "/js/main.072990b3c71796c0890e.hot-update.js", "/js/main.072990b3c71796c0890e.hot-update.js": "/js/main.072990b3c71796c0890e.hot-update.js",
"/js/main.647feaaaa324a4c0a90c.hot-update.js": "/js/main.647feaaaa324a4c0a90c.hot-update.js", "/js/main.647feaaaa324a4c0a90c.hot-update.js": "/js/main.647feaaaa324a4c0a90c.hot-update.js",
"/js/main.df8ce05016498d3f7fe5.hot-update.js": "/js/main.df8ce05016498d3f7fe5.hot-update.js" "/js/main.df8ce05016498d3f7fe5.hot-update.js": "/js/main.df8ce05016498d3f7fe5.hot-update.js",
"/js/main.e53af339d2e561120030.hot-update.js": "/js/main.e53af339d2e561120030.hot-update.js",
"/js/main.79e7901acb9aaa7f3bd0.hot-update.js": "/js/main.79e7901acb9aaa7f3bd0.hot-update.js",
"/js/main.f93eb4cc730060c8b4c8.hot-update.js": "/js/main.f93eb4cc730060c8b4c8.hot-update.js",
"/js/main.15c2a08e6be31a440ac8.hot-update.js": "/js/main.15c2a08e6be31a440ac8.hot-update.js",
"/js/main.fd70e2b0906329f2f8c8.hot-update.js": "/js/main.fd70e2b0906329f2f8c8.hot-update.js",
"/js/main.1517c69f49f7cbf58556.hot-update.js": "/js/main.1517c69f49f7cbf58556.hot-update.js",
"/js/main.31d2a937b7ed1c38abf3.hot-update.js": "/js/main.31d2a937b7ed1c38abf3.hot-update.js",
"/js/main.7d748799750837d3d3d1.hot-update.js": "/js/main.7d748799750837d3d3d1.hot-update.js",
"/js/main.b6eeec4c5f2cdef792b1.hot-update.js": "/js/main.b6eeec4c5f2cdef792b1.hot-update.js",
"/js/main.91ed64d2faf14a03d117.hot-update.js": "/js/main.91ed64d2faf14a03d117.hot-update.js"
} }
resources/js/components/FilesView/FileFullPreview.vue
-4
View File
@@ -68,10 +68,6 @@ export default {
}, },
mounted() { mounted() {
if (this.showFullPreview) {
let preview = document.getElementById("file-wrapper-preview");
preview.addEventListener("click", this.hideMenu);
}
events.$on("fileFullPreview:show", () => { events.$on("fileFullPreview:show", () => {
this.showFullPreview = true; this.showFullPreview = true;
}); });
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+2
View File
@@ -35,11 +35,13 @@
<div class="navigation-icons"> <div class="navigation-icons">
<div class="navigation-tool-wrapper"> <div class="navigation-tool-wrapper">
<ToolbarButton <ToolbarButton
v-if="!this.$isMobile()"
source="download" source="download"
@click.native="downloadItem" @click.native="downloadItem"
:action="$t('actions.download')" :action="$t('actions.download')"
/> />
<ToolbarButton <ToolbarButton
v-if="!this.$isMobile()"
source="share" source="share"
:class="{ 'is-inactive': canShareInView }" :class="{ 'is-inactive': canShareInView }"
:action="$t('actions.share')" :action="$t('actions.share')"
resources/js/components/FilesView/MediaFullPreview.vue
+21 -6
View File
@@ -17,8 +17,9 @@
:src="currentFile.file_url" :src="currentFile.file_url"
v-on:load="onLoaded" v-on:load="onLoaded"
/> />
<div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
<video <video
v-if="fileInfoDetail.type === 'video' && currentFile.file_url"
:src="currentFile.file_url" :src="currentFile.file_url"
class="video" class="video"
controlsList="nodownload" controlsList="nodownload"
@@ -26,6 +27,7 @@
playsinline playsinline
controls controls
/> />
</div>
<spinner v-if="!loaded && fileInfoDetail.type === 'image'" /> <spinner v-if="!loaded && fileInfoDetail.type === 'image'" />
</div> </div>
</div> </div>
@@ -207,17 +209,22 @@ export default {
.audio { .audio {
border-radius: 28px; border-radius: 28px;
} }
.video { .video-wrapper {
max-width: 1080px;
max-height: 100%; max-height: 100%;
max-width: 1072px;
box-shadow: 0 8px 40px rgba($text, 0.3);
@media (min-width: 1920px) { @media (min-width: 1200px) {
& {
max-width: 800px;
}
}
@media (min-width: 1920px) and (max-width: 2560px) {
& { & {
max-width: 1080px; max-width: 1080px;
} }
} }
@media (min-width: 2560px) { @media (min-width: 2560px) and (max-width: 3840px) {
& { & {
max-width: 1440px; max-width: 1440px;
} }
@@ -227,6 +234,14 @@ export default {
max-width: 2160px; max-width: 2160px;
} }
} }
.video {
max-width: 100%;
max-height: 100%;
align-self: center;
box-shadow: 0 8px 40px rgba($text, 0.3);
}
} }
} }
} }