diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue index 710e43acb2..848c9c3750 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue @@ -2,11 +2,11 @@
- +
@@ -29,10 +29,12 @@ + v-if="item.type !== 'torrent' && item.item_type !== 'photo'" /> +
+ +
+ + + +
@@ -82,11 +90,18 @@ import Dropdown from "@/components/elements/Dropdown"; import DropdownItem from "@/components/elements/DropdownItem"; import Icons from "./icons.json"; import MediaImage from "./MediaImage"; +import Modal from "@/components/Modal"; import Utils from "@/Utils"; export default { - components: {Dropdown, DropdownItem, MediaImage}, mixins: [Utils], + components: { + Dropdown, + DropdownItem, + MediaImage, + Modal, + }, + emits: [ 'add-to-playlist', 'download', @@ -130,8 +145,39 @@ export default { }, }, + methods: { + onContextClick(e) { + if (this.item?.item_type === 'photo') { + return + } + + e.preventDefault() + this.$refs.dropdown.toggle() + }, + + onImgLoad() { + const width = this.$refs.image.naturalWidth + const height = this.$refs.image.naturalHeight + + if (width > height) { + this.$refs.image.classList.add('horizontal') + } else { + this.$refs.image.classList.add('vertical') + } + }, + + onMediaSelect() { + if (this.item?.item_type === 'photo') { + this.showPhoto = true + } else { + this.$emit('select') + } + }, + }, + data() { return { + showPhoto: false, typeIcons: Icons, } }, @@ -329,5 +375,31 @@ export default { } } } + + .photo-container { + :deep(.modal) { + .body { + max-width: 95vh; + max-height: 90vh; + padding: 0; + } + + img { + &.horizontal { + width: 100%; + height: auto; + max-width: 95vh; + max-height: 100%; + } + + &.vertical { + width: auto; + height: 100%; + max-width: 100%; + max-height: 90vh; + } + } + } + } } diff --git a/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue b/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue index e53f953c61..9f287b0351 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue @@ -1,12 +1,12 @@