Fix up nsfw and some styling.

This commit is contained in:
Roger Braun 2016-10-29 01:38:41 +02:00
parent 5f69014575
commit 500b704c0f
6 changed files with 73 additions and 20 deletions

View file

@ -3,17 +3,32 @@ import nsfwImage from '../../assets/nsfw.jpg'
const Attachment = { const Attachment = {
props: [ props: [
'attachment', 'attachment',
'nsfw' 'nsfw',
'statusId'
], ],
data: () => ({ nsfwImage }), data: () => ({ nsfwImage }),
computed: { computed: {
type () { 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: { methods: {
showNsfw () { showNsfw () {
this.nsfw = false this.$store.commit('setNsfw', { id: this.statusId, nsfw: false })
} }
} }
} }

View file

@ -5,21 +5,29 @@
</a> </a>
<a v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></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"> <span v-if="type === 'unknown'">Don't know how to display this...</span>
<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>
<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> </div>
</template> </template>
<script src="./attachment.js"></script> <script src="./attachment.js"></script>
<style lang="scss">
.attachment {
video {
height: 100%;
}
}
</style>

View file

@ -2,9 +2,6 @@ import Attachment from '../attachment/attachment.vue'
const Status = { const Status = {
props: [ 'statusoid' ], props: [ 'statusoid' ],
data: () => ({
nsfw: true
}),
computed: { computed: {
retweet () { return !!this.statusoid.retweeted_status }, retweet () { return !!this.statusoid.retweeted_status },
retweeter () { return this.statusoid.user.name }, retweeter () { return this.statusoid.user.name },

View file

@ -26,7 +26,7 @@
<div v-html="status.statusnet_html"></div> <div v-html="status.statusnet_html"></div>
<div v-if='status.attachments' class='attachments'> <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> </attachment>
</div> </div>
@ -49,3 +49,13 @@
</template> </template>
<script src="./status.js" ></script> <script src="./status.js" ></script>
<style lang="scss">
.status-el {
word-wrap: break-word;
a {
word-break: break-all;
}
}
</style>

View file

@ -11,3 +11,9 @@
</div> </div>
</template> </template>
<script src="./timeline.js"></script> <script src="./timeline.js"></script>
<style>
.timeline.panel {
flex: 1;
}
</style>

View file

@ -51,13 +51,18 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
addedStatuses = statusesAndFaves['status'] || [] addedStatuses = statusesAndFaves['status'] || []
// Add some html to the statuses. // Add some html and nsfw to the statuses.
each(addedStatuses, (status) => { each(addedStatuses, (status) => {
const statusoid = status.retweeted_status || status const statusoid = status.retweeted_status || status
if (statusoid.parsedText === undefined) { if (statusoid.parsedText === undefined) {
// statusoid.parsedText = statusParserService.parse(statusoid) // statusoid.parsedText = statusParserService.parse(statusoid)
statusoid.parsedText = statusoid.text statusoid.parsedText = statusoid.text
} }
if (statusoid.nsfw === undefined) {
const nsfwRegex = /#nsfw/i
statusoid.nsfw = statusoid.text.match(nsfwRegex)
}
}) })
const newStatuses = sortBy( const newStatuses = sortBy(
@ -88,7 +93,9 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
} }
const updateTimestampsInStatuses = (statuses) => { const updateTimestampsInStatuses = (statuses) => {
return map(statuses, (status) => { return map(statuses, (statusoid) => {
const status = statusoid.retweeted_status || statusoid
// Parse date // Parse date
status.created_at_parsed = moment(status.created_at).fromNow() status.created_at_parsed = moment(status.created_at).fromNow()
return status return status
@ -110,6 +117,16 @@ const statuses = {
}, },
updateTimestamps (state) { updateTimestamps (state) {
updateTimestampsInStatuses(state.allStatuses) 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
}
})
} }
} }
} }