diff --git a/src/App.js b/src/App.js index 85df941691..83a61d3926 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue' +import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils' @@ -20,6 +21,7 @@ export default { FeaturesPanel, WhoToFollowPanel, ChatPanel, + MediaModal, SideDrawer }, data: () => ({ diff --git a/src/App.scss b/src/App.scss index f3e9e55711..d3721b324c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -505,7 +505,7 @@ nav { } .main { - flex-basis: 60%; + flex-basis: 50%; flex-grow: 1; flex-shrink: 1; } @@ -539,7 +539,7 @@ nav { } } -@media all and (min-width: 960px) { +@media all and (min-width: 800px) { body { overflow-y: scroll; } @@ -623,7 +623,7 @@ nav { color: $fallback--faint; color: var(--faint, $fallback--faint); } -@media all and (min-width: 959px) { +@media all and (min-width: 800px) { .logo { opacity: 1 !important; } @@ -687,7 +687,7 @@ nav { } } -@media all and (max-width: 959px) { +@media all and (max-width: 800px) { .mobile-hidden { display: none; } diff --git a/src/App.vue b/src/App.vue index feadb009bc..833608ea59 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,6 +41,7 @@ + diff --git a/src/assets/nsfw.png b/src/assets/nsfw.png index 427490334a..d251377676 100644 Binary files a/src/assets/nsfw.png and b/src/assets/nsfw.png differ diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 9212b74b52..4793985249 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -1,4 +1,5 @@ import StillImage from '../still-image/still-image.vue' +import VideoAttachment from '../video_attachment/video_attachment.vue' import nsfwImage from '../../assets/nsfw.png' import fileTypeService from '../../services/file_type/file_type.service.js' @@ -7,23 +8,29 @@ const Attachment = { 'attachment', 'nsfw', 'statusId', - 'size' + 'size', + 'allowPlay', + 'setMedia' ], data () { return { nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage, hideNsfwLocal: this.$store.state.config.hideNsfw, preloadImage: this.$store.state.config.preloadImage, - loopVideo: this.$store.state.config.loopVideo, - showHidden: false, loading: false, - img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img') + img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'), + modalOpen: false, + showHidden: false } }, components: { - StillImage + StillImage, + VideoAttachment }, computed: { + usePlaceHolder () { + return this.size === 'hide' || this.type === 'unknown' + }, referrerpolicy () { return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer' }, @@ -40,7 +47,7 @@ const Attachment = { return this.size === 'small' }, fullwidth () { - return fileTypeService.fileType(this.attachment.mimetype) === 'html' + return this.type === 'html' || this.type === 'audio' } }, methods: { @@ -49,7 +56,24 @@ const Attachment = { window.open(target.href, '_blank') } }, - toggleHidden () { + openModal (event) { + const modalTypes = this.$store.state.config.playVideosInline + ? ['image'] + : ['image', 'video'] + if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) || + this.usePlaceHolder + ) { + event.stopPropagation() + event.preventDefault() + this.setMedia() + this.$store.dispatch('setCurrent', this.attachment) + } + }, + toggleHidden (event) { + if (this.$store.state.config.useOneClickNsfw && !this.showHidden) { + this.openModal(event) + return + } if (this.img && !this.preloadImage) { if (this.img.onload) { this.img.onload() @@ -64,23 +88,6 @@ const Attachment = { } else { this.showHidden = !this.showHidden } - }, - 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 - } - } } } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index d7f25953e4..7e972026e7 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,19 +1,44 @@