aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/attachment/attachment.js47
-rw-r--r--src/components/attachment/attachment.vue94
-rw-r--r--src/components/gallery/gallery.js55
-rw-r--r--src/components/gallery/gallery.vue60
-rw-r--r--src/components/media_modal/media_modal.js7
-rw-r--r--src/components/media_modal/media_modal.vue13
-rw-r--r--src/components/registration/registration.vue2
-rw-r--r--src/components/settings/settings.js25
-rw-r--r--src/components/settings/settings.vue21
-rw-r--r--src/components/status/status.js25
-rw-r--r--src/components/status/status.vue21
-rw-r--r--src/components/video_attachment/video_attachment.js31
-rw-r--r--src/components/video_attachment/video_attachment.vue11
13 files changed, 343 insertions, 69 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index d16e5086..0ae8f71a 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'
@@ -8,6 +9,7 @@ const Attachment = {
'nsfw',
'statusId',
'size',
+ 'allowPlay',
'setMedia'
],
data () {
@@ -16,11 +18,14 @@ const Attachment = {
hideNsfwLocal: this.$store.state.config.hideNsfw,
preloadImage: this.$store.state.config.preloadImage,
loading: false,
- modalOpen: false
+ img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+ modalOpen: false,
+ showHidden: false
}
},
components: {
- StillImage
+ StillImage,
+ VideoAttachment
},
computed: {
usePlaceHolder () {
@@ -33,7 +38,7 @@ const Attachment = {
return fileTypeService.fileType(this.attachment.mimetype)
},
hidden () {
- return this.nsfw && this.hideNsfwLocal
+ return this.nsfw && this.hideNsfwLocal && !this.showHidden
},
isEmpty () {
return (this.type === 'html' && !this.attachment.oembed) || this.type === 'unknown'
@@ -51,14 +56,38 @@ const Attachment = {
window.open(target.href, '_blank')
}
},
- toggleModal (event) {
- if (this.type !== 'image' && this.type !== 'video') {
+ 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
}
- event.stopPropagation()
- event.preventDefault()
- this.setMedia()
- this.$store.dispatch('setCurrent', this.attachment)
+ if (this.img && !this.preloadImage) {
+ if (this.img.onload) {
+ this.img.onload()
+ } else {
+ this.loading = true
+ this.img.src = this.attachment.url
+ this.img.onload = () => {
+ this.loading = false
+ this.showHidden = !this.showHidden
+ }
+ }
+ } else {
+ this.showHidden = !this.showHidden
+ }
}
}
}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index ad5120c0..56a49d2d 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -1,34 +1,43 @@
<template>
- <div v-if="usePlaceHolder" @click="toggleModal">
- <a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
+ <div v-if="usePlaceHolder" @click="openModal">
+ <a class="placeholder"
+ v-if="type !== 'html'"
+ target="_blank" :href="attachment.url"
+ >
+ [{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]
+ </a>
</div>
<div
v-else class="attachment"
:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
v-show="!isEmpty"
- @click="toggleModal"
>
- <a class="image-attachment" v-if="hidden" :href="attachment.url">
- <img :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
+ <a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden">
+ <img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/>
<i v-if="type === 'video'" class="play-icon icon-play-circled"></i>
</a>
+ <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden">
+ <a href="#" @click.prevent="toggleHidden">Hide</a>
+ </div>
<a v-if="type === 'image' && (!hidden || preloadImage)"
+ @click="openModal"
class="image-attachment"
- :class="{'hidden': hidden && preloadImage}"
+ :class="{'hidden': hidden && preloadImage }"
:href="attachment.url" target="_blank"
:title="attachment.description"
>
- <StillImage :class="{'small': isSmall}" referrerpolicy="referrerPolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
+ <StillImage referrerpolicy="referrerPolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
</a>
<a class="video-container"
+ @click="openModal"
v-if="type === 'video' && !hidden"
:class="{'small': isSmall}"
:href="attachment.url"
>
- <video class="video" :src="attachment.url"></video>
- <i class="play-icon icon-play-circled"></i>
+ <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" />
+ <i v-if="!allowPlay" class="play-icon icon-play-circled"></i>
</a>
<audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
@@ -50,18 +59,18 @@
<style lang="scss">
@import '../../_variables.scss';
-$normalheight: 140px;
-$normalwidth: 180px;
-$smallheight: 80px;
-
.attachments {
display: flex;
flex-wrap: wrap;
.attachment.media-upload-container {
flex: 0 0 auto;
- max-height: $normalheight;
+ max-height: 200px;
max-width: 100%;
+ display: flex;
+ video {
+ max-width: 100%;
+ }
}
.placeholder {
@@ -82,7 +91,6 @@ $smallheight: 80px;
margin: 0.5em 0.5em 0em 0em;
align-self: flex-start;
line-height: 0;
- flex-grow: 0;
border-style: solid;
border-width: 1px;
@@ -92,6 +100,28 @@ $smallheight: 80px;
border-color: var(--border, $fallback--border);
overflow: hidden;
}
+
+ .non-gallery.attachment {
+ &.video {
+ flex: 1 0 40%;
+ }
+ .nsfw {
+ height: 260px;
+ }
+ .small {
+ height: 120px;
+ flex-grow: 0;
+ }
+ .video {
+ height: 260px;
+ display: flex;
+ }
+ video {
+ max-height: 100%;
+ object-fit: contain;
+ }
+ }
+
.fullwidth {
flex-basis: 100%;
}
@@ -101,14 +131,12 @@ $smallheight: 80px;
}
.video-container {
- width: auto;
- height: $normalheight;
- max-width: $normalwidth;
+ display: flex;
+ max-height: 100%;
}
.video {
- width: auto;
- object-fit: cover;
+ width: 100%;
}
.play-icon {
@@ -132,6 +160,7 @@ $smallheight: 80px;
.hider {
position: absolute;
+ white-space: nowrap;
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
@@ -142,12 +171,7 @@ $smallheight: 80px;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
}
- .small {
- max-height: $smallheight;
- }
-
video {
- height: 100%;
z-index: 0;
}
@@ -157,7 +181,7 @@ $smallheight: 80px;
img.media-upload {
line-height: 0;
- max-height: $normalheight;
+ max-height: 200px;
max-width: 100%;
}
@@ -194,26 +218,20 @@ $smallheight: 80px;
}
.image-attachment {
- flex-grow: 0;
+ width: 100%;
+ height: 100%;
&.hidden {
display: none;
}
- .still-image {
- }
-
- .small {
- img {
- height: $smallheight;
- }
+ .nsfw {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
}
img {
- object-fit: cover;
- height: $normalheight;
- width: auto;
- max-width: $normalwidth;
image-orientation: from-image;
}
}
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
new file mode 100644
index 00000000..7f33a81b
--- /dev/null
+++ b/src/components/gallery/gallery.js
@@ -0,0 +1,55 @@
+import Attachment from '../attachment/attachment.vue'
+import { chunk, last, dropRight } from 'lodash'
+
+const Gallery = {
+ data: () => ({
+ width: 500
+ }),
+ props: [
+ 'attachments',
+ 'nsfw',
+ 'setMedia'
+ ],
+ components: { Attachment },
+ mounted () {
+ this.resize()
+ window.addEventListener('resize', this.resize)
+ },
+ destroyed () {
+ window.removeEventListener('resize', this.resize)
+ },
+ computed: {
+ rows () {
+ if (!this.attachments) {
+ return []
+ }
+ const rows = chunk(this.attachments, 3)
+ if (last(rows).length === 1 && rows.length > 1) {
+ // if 1 attachment on last row -> add it to the previous row instead
+ const lastAttachment = last(rows)[0]
+ const allButLastRow = dropRight(rows)
+ last(allButLastRow).push(lastAttachment)
+ return allButLastRow
+ }
+ return rows
+ },
+ rowHeight () {
+ return itemsPerRow => ({ 'height': `${(this.width / (itemsPerRow + 0.6))}px` })
+ },
+ useContainFit () {
+ return this.$store.state.config.useContainFit
+ }
+ },
+ methods: {
+ resize () {
+ // Quick optimization to make resizing not always trigger state change,
+ // only update attachment size in 10px steps
+ const width = Math.floor(this.$el.getBoundingClientRect().width / 10) * 10
+ if (this.width !== width) {
+ this.width = width
+ }
+ }
+ }
+}
+
+export default Gallery
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
new file mode 100644
index 00000000..20e8ab2f
--- /dev/null
+++ b/src/components/gallery/gallery.vue
@@ -0,0 +1,60 @@
+<template>
+ <div ref="galleryContainer" style="width: 100%;">
+ <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }">
+ <attachment
+ v-for="attachment in row"
+ :setMedia="setMedia"
+ :nsfw="nsfw"
+ :attachment="attachment"
+ :allowPlay="false"
+ :key="attachment.id"
+ />
+ </div>
+ </div>
+</template>
+
+<script src='./gallery.js'></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.gallery-row {
+ height: 200px;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-content: stretch;
+ flex-grow: 1;
+ margin-top: 0.5em;
+
+ .attachments, .attachment {
+ margin: 0 0.5em 0 0;
+ flex-grow: 1;
+ height: 100%;
+ box-sizing: border-box;
+ }
+
+ .image-attachment {
+ width: 100%;
+ height: 100%;
+ }
+
+ .video-container {
+ height: 100%;
+ }
+
+ &.contain-fit {
+ img, video {
+ object-fit: contain;
+ }
+ }
+
+ &.cover-fit {
+ img, video {
+ object-fit: cover;
+ }
+ }
+}
+
+</style>
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 7f10589c..14ae19d4 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -1,9 +1,11 @@
import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
import fileTypeService from '../../services/file_type/file_type.service.js'
const MediaModal = {
components: {
- StillImage
+ StillImage,
+ VideoAttachment
},
computed: {
showing () {
@@ -17,9 +19,6 @@ const MediaModal = {
},
type () {
return this.currentMedia ? fileTypeService.fileType(this.currentMedia.mimetype) : null
- },
- loopVideo () {
- return this.$store.state.config.loopVideo
}
},
created () {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index eb8fca53..796d4e40 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -1,14 +1,13 @@
<template>
<div class="modal-view" v-if="showing" @click.prevent="hide">
<img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img>
- <video
+ <VideoAttachment
class="modal-image"
v-if="type === 'video'"
- :src="currentMedia.url"
- @click.stop=""
- controls autoplay
- :loop="loopVideo">
- </video>
+ :attachment="currentMedia"
+ :controls="true"
+ @click.stop.native="">
+ </VideoAttachment>
</div>
</template>
@@ -18,7 +17,7 @@
@import '../../_variables.scss';
.modal-view {
- z-index: 1005;
+ z-index: 1000;
position: fixed;
width: 100vw;
height: 100vh;
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 25c1a9d0..a3ba14d1 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -215,7 +215,7 @@ $validations-cRed: #f04124;
}
}
-@media all and (max-width: 959px) {
+@media all and (max-width: 800px) {
.registration-form .container {
flex-direction: column-reverse;
}
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 76b42bab..06011e7c 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -13,6 +13,7 @@ const settings = {
hideAttachmentsLocal: user.hideAttachments,
hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
hideNsfwLocal: user.hideNsfw,
+ useOneClickNsfw: user.useOneClickNsfw,
hideISPLocal: user.hideISP,
preloadImage: user.preloadImage,
@@ -56,7 +57,17 @@ const settings = {
scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),
stopGifs: user.stopGifs,
- webPushNotificationsLocal: user.webPushNotifications
+ webPushNotificationsLocal: user.webPushNotifications,
+ loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
+ loopSilentAvailable:
+ // Firefox
+ Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
+ // Chrome-likes
+ Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
+ // Future spec, still not supported in Nightly 63 as of 08/2018
+ Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+ playVideosInline: user.playVideosInline,
+ useContainFit: user.useContainFit
}
},
components: {
@@ -88,6 +99,9 @@ const settings = {
hideNsfwLocal (value) {
this.$store.dispatch('setOption', { name: 'hideNsfw', value })
},
+ useOneClickNsfw (value) {
+ this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })
+ },
preloadImage (value) {
this.$store.dispatch('setOption', { name: 'preloadImage', value })
},
@@ -112,6 +126,9 @@ const settings = {
loopVideoLocal (value) {
this.$store.dispatch('setOption', { name: 'loopVideo', value })
},
+ loopVideoSilentOnlyLocal (value) {
+ this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
+ },
autoLoadLocal (value) {
this.$store.dispatch('setOption', { name: 'autoLoad', value })
},
@@ -146,6 +163,12 @@ const settings = {
webPushNotificationsLocal (value) {
this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
if (value) this.$store.dispatch('registerPushNotifications')
+ },
+ playVideosInline (value) {
+ this.$store.dispatch('setOption', { name: 'playVideosInline', value })
+ },
+ useContainFit (value) {
+ this.$store.dispatch('setOption', { name: 'useContainFit', value })
}
}
}
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index e84bd3f6..08d659d6 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -123,6 +123,10 @@
<input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
<label for="preloadImage">{{$t('settings.preload_images')}}</label>
</li>
+ <li>
+ <input type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
+ <label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
+ </li>
</ul>
<li>
<input type="checkbox" id="stopGifs" v-model="stopGifs">
@@ -131,6 +135,23 @@
<li>
<input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
<label for="loopVideo">{{$t('settings.loop_video')}}</label>
+ <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
+ <li>
+ <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
+ <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
+ <div v-if="!loopSilentAvailable" class="unavailable">
+ <i class="icon-globe"/>! {{$t('settings.limited_availability')}}
+ </div>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <input type="checkbox" id="playVideosInline" v-model="playVideosInline">
+ <label for="playVideosInline">{{$t('settings.play_videos_inline')}}</label>
+ </li>
+ <li>
+ <input type="checkbox" id="useContainFit" v-model="useContainFit">
+ <label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
</li>
</ul>
</div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 6e82307a..1db074e2 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -5,9 +5,11 @@ import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue'
import StillImage from '../still-image/still-image.vue'
+import Gallery from '../gallery/gallery.vue'
import { filter, find } from 'lodash'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import fileType from 'src/services/file_type/file_type.service'
const Status = {
name: 'Status',
@@ -197,6 +199,24 @@ const Status = {
return 'small'
}
return 'normal'
+ },
+ galleryTypes () {
+ if (this.attachmentSize === 'hide') {
+ return []
+ }
+ return this.$store.state.config.playVideosInline
+ ? ['image']
+ : ['image', 'video']
+ },
+ galleryAttachments () {
+ return this.status.attachments.filter(
+ file => fileType.fileMatchesSomeType(this.galleryTypes, file)
+ )
+ },
+ nonGalleryAttachments () {
+ return this.status.attachments.filter(
+ file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
+ )
}
},
components: {
@@ -206,7 +226,8 @@ const Status = {
DeleteButton,
PostStatusForm,
UserCardContent,
- StillImage
+ StillImage,
+ Gallery
},
methods: {
visibilityIcon (visibility) {
@@ -283,7 +304,7 @@ const Status = {
return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
},
setMedia () {
- const attachments = this.status.attachments
+ const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
return () => this.$store.dispatch('setMedia', attachments)
}
},
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d7cab15b..ba3b9a4a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -93,16 +93,23 @@
<a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a>
</div>
- <div v-if='status.attachments && !hideSubjectStatus' class='attachments media-body'>
+ <div v-if="status.attachments && !hideSubjectStatus" class="attachments media-body">
<attachment
+ class="non-gallery"
+ v-for="attachment in nonGalleryAttachments"
:size="attachmentSize"
- :status-id="status.id"
:nsfw="nsfwClickthrough"
:attachment="attachment"
- :set-media="setMedia()"
- v-for="attachment in status.attachments"
- :key="attachment.id">
- </attachment>
+ :allowPlay="true"
+ :setMedia="setMedia()"
+ :key="attachment.id"
+ />
+ <gallery
+ v-if="galleryAttachments.length > 0"
+ :nsfw="nsfwClickthrough"
+ :attachments="galleryAttachments"
+ :setMedia="setMedia()"
+ />
</div>
<div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
@@ -568,7 +575,7 @@ a.unmute {
}
}
-@media all and (max-width: 960px) {
+@media all and (max-width: 800px) {
.status-el {
.retweet-info {
.avatar {
diff --git a/src/components/video_attachment/video_attachment.js b/src/components/video_attachment/video_attachment.js
new file mode 100644
index 00000000..76b19a02
--- /dev/null
+++ b/src/components/video_attachment/video_attachment.js
@@ -0,0 +1,31 @@
+
+const VideoAttachment = {
+ props: ['attachment', 'controls'],
+ data () {
+ return {
+ loopVideo: this.$store.state.config.loopVideo
+ }
+ },
+ methods: {
+ onVideoDataLoad (e) {
+ const target = e.srcElement || e.target
+ if (typeof target.webkitAudioDecodedByteCount !== 'undefined') {
+ // non-zero if video has audio track
+ if (target.webkitAudioDecodedByteCount > 0) {
+ this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+ }
+ } else if (typeof target.mozHasAudio !== 'undefined') {
+ // true if video has audio track
+ if (target.mozHasAudio) {
+ this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+ }
+ } else if (typeof target.audioTracks !== 'undefined') {
+ if (target.audioTracks.length > 0) {
+ this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
+ }
+ }
+ }
+ }
+}
+
+export default VideoAttachment
diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
new file mode 100644
index 00000000..68de201e
--- /dev/null
+++ b/src/components/video_attachment/video_attachment.vue
@@ -0,0 +1,11 @@
+<template>
+ <video class="video"
+ @loadeddata="onVideoDataLoad"
+ :src="attachment.url"
+ :loop="loopVideo"
+ :controls="controls"
+ playsinline
+ />
+</template>
+
+<script src="./video_attachment.js"></script>