+
-
+
-
+
@@ -40,12 +50,13 @@
.attachment.media-upload-container {
flex: 0 0 auto;
- max-height: 300px;
+ max-height: 160px;
max-width: 100%;
}
.placeholder {
- margin-right: 0.5em;
+ margin-right: 8px;
+ margin-bottom: 4px;
}
.nsfw-placeholder {
@@ -57,16 +68,12 @@
}
.small-attachment {
- &.image, &.video {
- max-width: 35%;
- }
max-height: 100px;
}
.attachment {
position: relative;
- flex: 1 0 30%;
- margin: 0.5em 0.7em 0.6em 0.0em;
+ margin: 0.5em 0.5em 0em 0em;
align-self: flex-start;
line-height: 0;
@@ -86,6 +93,10 @@
line-height: 0;
}
+ .video {
+ object-fit: cover;
+ }
+
&.html {
flex-basis: 90%;
width: 100%;
@@ -107,10 +118,10 @@
.small {
max-height: 100px;
}
+
video {
- max-height: 500px;
+ max-height: 160px;
height: 100%;
- width: 100%;
z-index: 0;
}
@@ -120,7 +131,7 @@
img.media-upload {
line-height: 0;
- max-height: 300px;
+ max-height: 160px;
max-width: 100%;
}
@@ -165,21 +176,19 @@
}
.still-image {
- width: 100%;
height: 100%;
}
.small {
img {
- max-height: 100px;
+ max-height: 80px;
}
}
img {
- object-fit: contain;
- width: 100%;
+ object-fit: cover;
height: 100%; /* If this isn't here, chrome will stretch the images */
- max-height: 500px;
+ height: 160px;
image-orientation: from-image;
}
}
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
new file mode 100644
index 00000000..91601515
--- /dev/null
+++ b/src/components/media_modal/media_modal.js
@@ -0,0 +1,51 @@
+import StillImage from '../still-image/still-image.vue'
+import fileTypeService from '../../services/file_type/file_type.service.js'
+
+const MediaModal = {
+ data () {
+ return {
+ loopVideo: this.$store.state.config.loopVideo
+ }
+ },
+ components: {
+ StillImage
+ },
+ computed: {
+ showing () {
+ return this.$store.state.mediaViewer.activated
+ },
+ currentIndex () {
+ return this.$store.state.mediaViewer.currentIndex
+ },
+ currentMedia () {
+ return this.$store.state.mediaViewer.media[this.currentIndex]
+ },
+ type () {
+ return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
+ }
+ },
+ methods: {
+ hide () {
+ this.$store.dispatch('closeMediaViewer')
+ },
+ onVideoDataLoad (e) {
+ if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
+ // non-zero if video has audio track
+ if (e.srcElement.webkitAudioDecodedByteCount > 0) {
+ this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+ }
+ } else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
+ // true if video has audio track
+ if (e.srcElement.mozHasAudio) {
+ this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+ }
+ } else if (typeof e.srcElement.audioTracks !== 'undefined') {
+ if (e.srcElement.audioTracks.length > 0) {
+ this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+ }
+ }
+ }
+ }
+}
+
+export default MediaModal
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
new file mode 100644
index 00000000..6e291ac5
--- /dev/null
+++ b/src/components/media_modal/media_modal.vue
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 73d53694..8058e1bb 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -35,7 +35,8 @@ const Status = {
expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined'
? !this.$store.state.instance.collapseMessageWithSubject
: !this.$store.state.config.collapseMessageWithSubject,
- betterShadow: this.$store.state.interface.browserSupport.cssFilter
+ betterShadow: this.$store.state.interface.browserSupport.cssFilter,
+ maxAttachments: 9
}
},
computed: {
@@ -201,7 +202,8 @@ const Status = {
},
attachmentSize () {
if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
- (this.$store.state.config.hideAttachmentsInConv && this.inConversation)) {
+ (this.$store.state.config.hideAttachmentsInConv && this.inConversation) ||
+ (this.status.attachments.length > this.maxAttachments)) {
return 'hide'
} else if (this.compact) {
return 'small'
@@ -291,6 +293,10 @@ const Status = {
},
userProfileLink (id, name) {
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
+ },
+ setMedia () {
+ const attachments = this.status.attachments
+ return () => this.$store.dispatch('setMedia', attachments)
}
},
watch: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index af756801..f88b5afb 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -94,7 +94,14 @@
diff --git a/src/main.js b/src/main.js
index f87ef9da..adeb0550 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import apiModule from './modules/api.js'
import configModule from './modules/config.js'
import chatModule from './modules/chat.js'
import oauthModule from './modules/oauth.js'
+import mediaViewerModule from './modules/media_viewer.js'
import VueTimeago from 'vue-timeago'
import VueI18n from 'vue-i18n'
@@ -62,7 +63,8 @@ createPersistedState(persistedStateOptions).then((persistedState) => {
api: apiModule,
config: configModule,
chat: chatModule,
- oauth: oauthModule
+ oauth: oauthModule,
+ mediaViewer: mediaViewerModule
},
plugins: [persistedState, pushNotifications],
strict: false // Socket modifies itself, let's ignore this for now.
diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
new file mode 100644
index 00000000..27714bae
--- /dev/null
+++ b/src/modules/media_viewer.js
@@ -0,0 +1,40 @@
+import fileTypeService from '../services/file_type/file_type.service.js'
+
+const mediaViewer = {
+ state: {
+ media: [],
+ currentIndex: 0,
+ activated: false
+ },
+ mutations: {
+ setMedia (state, media) {
+ state.media = media
+ },
+ setCurrent (state, index) {
+ state.activated = true
+ state.currentIndex = index
+ },
+ close (state) {
+ state.activated = false
+ }
+ },
+ actions: {
+ setMedia ({ commit }, attachments) {
+ const media = attachments.filter(attachment => {
+ const type = fileTypeService.fileType(attachment.mimetype)
+ return type === 'image' || type === 'video'
+ })
+ commit('setMedia', media)
+ },
+ setCurrent ({ commit, state }, current) {
+ const index = state.media.indexOf(current)
+ console.log(index, current)
+ commit('setCurrent', index || 0)
+ },
+ closeMediaViewer ({ commit }) {
+ commit('close')
+ }
+ }
+}
+
+export default mediaViewer