Skip to content

Commit

Permalink
Update status square previews, add blurhash and improved content warn…
Browse files Browse the repository at this point in the history 
…ings
  • Loading branch information
@dansup
dansup committed Jan 31, 2021
1 parent 9e0fd36 commit 39e389d
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 12 deletions.
43 changes: 37 additions & 6 deletions resources/assets/js/components/Hashtag.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,16 @@
<div v-for="(tag, index) in top" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
<a class="card info-overlay card-md-border-0" :href="tag.status.url">
<div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content" :style="'background-image: url(/storage/no-preview.png)'"></div>
<div v-else class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content">
<blur-hash-image
v-if="s.sensitive"
width="32"
height="32"
punch="1"
:hash="tag.status.media_attachments[0].blurhash"
/>
</div>
<div v-else class="square-content" :style="'background-image: url('+tag.status.media_attachments[0].preview_url+')'"></div>
<div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold">
<span class="pr-4">
Expand All @@ -57,15 +65,38 @@
<div v-for="(tag, index) in tags" class="col-4 p-0 p-sm-2 p-md-3 hashtag-post-square">
<a class="card info-overlay card-md-border-0" :href="tag.status.url">
<div :class="[tag.status.filter ? 'square ' + tag.status.filter : 'square']">
<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content" :style="'background-image: url(/storage/no-preview.png)'"></div>
<div v-else class="square-content" :style="'background-image: url('+tag.status.thumb+')'"></div>
<div v-if="tag.status.sensitive && forceNsfw == false" class="square-content">
<div class="info-overlay-text-label">
<h5 class="text-white m-auto font-weight-bold">
<span>
<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
</span>
</h5>
</div>
<blur-hash-canvas
width="32"
height="32"
:hash="tag.status.media_attachments[0].blurhash"
/>
</div>
<div v-else class="square-content">
<blur-hash-image
width="32"
height="32"
:hash="tag.status.media_attachments[0].blurhash"
:src="tag.status.media_attachments[0].preview_url"
/>
</div>
<span v-if="tag.status.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
<span v-if="tag.status.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
<span v-if="tag.status.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
<div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold">
<span class="pr-4">
<span class="far fa-heart fa-lg pr-1"></span> {{tag.status.like_count}}
<span class="far fa-heart fa-lg pr-1"></span> {{tag.status.favourites_count}}
</span>
<span>
<span class="fas fa-retweet fa-lg pr-1"></span> {{tag.status.share_count}}
<span class="far fa-comment fa-lg pr-1"></span> {{tag.status.reply_count}}
</span>
</h5>
</div>
Expand Down
38 changes: 32 additions & 6 deletions resources/assets/js/components/Profile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,21 +183,42 @@
<div class="row" v-if="mode == 'grid'">
<div class="col-4 p-1 p-md-3" v-for="(s, index) in timeline" :key="'tlob:'+index">
<a class="card info-overlay card-md-border-0" :href="statusUrl(s)" v-once>
<div :class="[s.sensitive ? 'square' : 'square ' + s.media_attachments[0].filter_class]">
<div class="square">
<div v-if="s.sensitive" class="square-content">
<div class="info-overlay-text-label">
<h5 class="text-white m-auto font-weight-bold">
<span>
<span class="far fa-eye-slash fa-lg p-2 d-flex-inline"></span>
</span>
</h5>
</div>
<blur-hash-canvas
width="32"
height="32"
:hash="s.media_attachments[0].blurhash"
/>
</div>
<div v-else class="square-content">

<blur-hash-image
width="32"
height="32"
:hash="s.media_attachments[0].blurhash"
:src="s.media_attachments[0].preview_url"
/>
</div>
<span v-if="s.pf_type == 'photo:album'" class="float-right mr-3 post-icon"><i class="fas fa-images fa-2x"></i></span>
<span v-if="s.pf_type == 'video'" class="float-right mr-3 post-icon"><i class="fas fa-video fa-2x"></i></span>
<span v-if="s.pf_type == 'video:album'" class="float-right mr-3 post-icon"><i class="fas fa-film fa-2x"></i></span>
<div class="square-content" v-bind:style="previewBackground(s)">
</div>
<div class="info-overlay-text">
<h5 class="text-white m-auto font-weight-bold">
<span>
<span class="far fa-heart fa-lg p-2 d-flex-inline"></span>
<span class="d-flex-inline">{{s.favourites_count}}</span>
<span class="d-flex-inline">{{formatCount(s.favourites_count)}}</span>
</span>
<span>
<span class="fas fa-retweet fa-lg p-2 d-flex-inline"></span>
<span class="d-flex-inline">{{s.reblogs_count}}</span>
<span class="far fa-comment fa-lg p-2 d-flex-inline"></span>
<span class="d-flex-inline">{{formatCount(s.reply_count)}}</span>
</span>
</h5>
</div>
Expand Down Expand Up @@ -818,6 +839,11 @@
return 'background-image: url(' + preview + ');';
},
blurhHashMedia(status) {
return status.sensitive ? null :
status.media_attachments[0].preview_url;
},
switchMode(mode) {
this.mode = _.indexOf(this.modes, mode) ? mode : 'grid';
if(this.mode == 'bookmarks' && this.bookmarks.length == 0) {
Expand Down
29 changes: 29 additions & 0 deletions resources/assets/sass/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,22 @@ body, button, input, textarea {
background-color: rgba(0,0,0,0.5);
}

.info-overlay-text-label {
display: flex;
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);

h5 {
z-index: 2;
}
}

.info-overlay:hover .info-overlay-text-label {
display: none;
}

.font-weight-lighter {
font-weight: 300 !important
}
Expand Down Expand Up @@ -565,4 +581,17 @@ details summary::-webkit-details-marker {

.follow-modal {
max-width: 400px !important;
}

.square-content {
img {
object-fit: cover !important;
}
}

.square .square-content {
canvas {
width: 100%;
height: 100%;
}
}

0 comments on commit 39e389d

Please sign in to comment.