commit: 500b704c0f93059b75b8943e3351cdac63270b0f
parent: 5f690145755c3972268e2750808ac98dcc17af90
Author: Roger Braun <roger@rogerbraun.net>
Date: Sat, 29 Oct 2016 01:38:41 +0200
Fix up nsfw and some styling.
Diffstat:
6 files changed, 73 insertions(+), 20 deletions(-)
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
@@ -3,17 +3,32 @@ import nsfwImage from '../../assets/nsfw.jpg'
const Attachment = {
props: [
'attachment',
- 'nsfw'
+ 'nsfw',
+ 'statusId'
],
data: () => ({ nsfwImage }),
computed: {
type () {
- return 'image'
+ let type = 'unknown'
+
+ if(this.attachment.mimetype.match(/text\/html/)) {
+ type = 'html';
+ }
+
+ if(this.attachment.mimetype.match(/image/)) {
+ type = 'image';
+ }
+
+ if(this.attachment.mimetype.match(/video\/webm/)) {
+ type = 'webm';
+ };
+
+ return type
}
},
methods: {
showNsfw () {
- this.nsfw = false
+ this.$store.commit('setNsfw', { id: this.statusId, nsfw: false })
}
}
}
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
@@ -5,21 +5,29 @@
</a>
<a v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
- <!-- <span ng-if="type === 'unknown'">Don't know how to display this...</span>
+ <video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video>
- <div ng-if="type === 'html' && attachment.oembed" class="oembed">
- <div ng-if="attachment.thumb_url" class="image">
- <img ng-src="{{::attachment.thumb_url}}"></img>
- </div>
- <div class="text">
- <h1><a href="{{::attachment.url}}">{{::attachment.oembed.title}}</a></h1>
- <div ng-bind-html="attachment.oembed.oembedHTML"></div>
- </div>
- </div>
+ <span v-if="type === 'unknown'">Don't know how to display this...</span>
- <video ng-if="type ==='webm'" ng-src="{{::videoUrl}}" controls></video> -->
+ <div v-if="type === 'html' && attachment.oembed" class="oembed">
+ <div v-if="attachment.thumb_url" class="image">
+ <img :src="attachment.thumb_url"></img>
+ </div>
+ <div class="text">
+ <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1>
+ <div v-html="attachment.oembed.oembedHTML"></div>
+ </div>
+ </div>
</div>
</template>
<script src="./attachment.js"></script>
+
+<style lang="scss">
+ .attachment {
+ video {
+ height: 100%;
+ }
+ }
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -2,9 +2,6 @@ import Attachment from '../attachment/attachment.vue'
const Status = {
props: [ 'statusoid' ],
- data: () => ({
- nsfw: true
- }),
computed: {
retweet () { return !!this.statusoid.retweeted_status },
retweeter () { return this.statusoid.user.name },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -26,7 +26,7 @@
<div v-html="status.statusnet_html"></div>
<div v-if='status.attachments' class='attachments'>
- <attachment :nsfw="nsfw" :attachment="attachment" v-for="attachment in status.attachments">
+ <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments">
</attachment>
</div>
@@ -49,3 +49,13 @@
</template>
<script src="./status.js" ></script>
+
+<style lang="scss">
+ .status-el {
+ word-wrap: break-word;
+
+ a {
+ word-break: break-all;
+ }
+ }
+</style>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
@@ -11,3 +11,9 @@
</div>
</template>
<script src="./timeline.js"></script>
+
+<style>
+ .timeline.panel {
+ flex: 1;
+ }
+</style>
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
@@ -51,13 +51,18 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
addedStatuses = statusesAndFaves['status'] || []
- // Add some html to the statuses.
+ // Add some html and nsfw to the statuses.
each(addedStatuses, (status) => {
const statusoid = status.retweeted_status || status
if (statusoid.parsedText === undefined) {
// statusoid.parsedText = statusParserService.parse(statusoid)
statusoid.parsedText = statusoid.text
}
+
+ if (statusoid.nsfw === undefined) {
+ const nsfwRegex = /#nsfw/i
+ statusoid.nsfw = statusoid.text.match(nsfwRegex)
+ }
})
const newStatuses = sortBy(
@@ -88,7 +93,9 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
}
const updateTimestampsInStatuses = (statuses) => {
- return map(statuses, (status) => {
+ return map(statuses, (statusoid) => {
+ const status = statusoid.retweeted_status || statusoid
+
// Parse date
status.created_at_parsed = moment(status.created_at).fromNow()
return status
@@ -110,6 +117,16 @@ const statuses = {
},
updateTimestamps (state) {
updateTimestampsInStatuses(state.allStatuses)
+ },
+ setNsfw (state, { id, nsfw }) {
+ // For now, walk through all the statuses because the stuff might be in the replied_to_status
+ // TODO: Save the replied_tos as references.
+ each(state.allStatuses, (statusoid) => {
+ const status = statusoid.retweeted_status || statusoid
+ if (status.id === id) {
+ status.nsfw = nsfw
+ }
+ })
}
}
}