UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2025-01-11 14:40:46 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update Timeline.vue component, add CW to other types and prevent carousel from automatically rotating

Browse source
This commit is contained in:
Daniel Supernault 2018-12-09 23:53:25 -07:00
parent 45f52ece0a
commit 8d93096447
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 112 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
resources/assets/js/components/Timeline.vue
View file

@ -72,26 +72,69 @@
</div> </div>
<div v-else-if="status.pf_type === 'photo:album'"> <div v-else-if="status.pf_type === 'photo:album'">
<div v-if="status.sensitive == true">
<details class="details-animated">
<summary>
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
<p class="font-weight-light">(click to show)</p>
</summary>
<b-carousel :id="status.id + '-carousel'" <b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333;" style="text-shadow: 1px 1px 2px #333;"
controls controls
indicators indicators
background="#ffffff" background="#ffffff"
:interval="4000" :interval="0"
>
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
<img slot="img" class="d-block img-fluid w-100" :src="img.url" :alt="img.description">
</b-carousel-slide>
</b-carousel>
</details>
</div>
<div v-else>
<b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333;"
controls
indicators
background="#ffffff"
:interval="0"
> >
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id"> <b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
<img slot="img" class="d-block img-fluid w-100" :src="img.url" :alt="img.description"> <img slot="img" class="d-block img-fluid w-100" :src="img.url" :alt="img.description">
</b-carousel-slide> </b-carousel-slide>
</b-carousel> </b-carousel>
</div> </div>
</div>
<div v-else-if="status.pf_type === 'video:album'" class="w-100"> <div v-else-if="status.pf_type === 'video:album'" class="w-100">
<div v-if="status.sensitive == true">
<details class="details-animated">
<summary>
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
<p class="font-weight-light">(click to show)</p>
</summary>
<b-carousel :id="status.id + '-carousel'" <b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333; background-color: #000;" style="text-shadow: 1px 1px 2px #333; background-color: #000;"
controls controls
img-blank img-blank
background="#ffffff" background="#ffffff"
:interval="4000" :interval="0"
>
<b-carousel-slide v-for="(vid, index) in status.media_attachments" :key="vid.id + '-media'">
<video slot="img" class="embed-responsive-item" preload="none" controls loop :alt="vid.description" width="100%" height="100%">
<source :src="vid.url" :type="vid.mime">
</video>
</b-carousel-slide>
</b-carousel>
</details>
</div>
<div v-else>
<b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333; background-color: #000;"
controls
img-blank
background="#ffffff"
:interval="0"
> >
<b-carousel-slide v-for="(vid, index) in status.media_attachments" :key="vid.id + '-media'"> <b-carousel-slide v-for="(vid, index) in status.media_attachments" :key="vid.id + '-media'">
<video slot="img" class="embed-responsive-item" preload="none" controls loop :alt="vid.description" width="100%" height="100%"> <video slot="img" class="embed-responsive-item" preload="none" controls loop :alt="vid.description" width="100%" height="100%">
@ -100,14 +143,21 @@
</b-carousel-slide> </b-carousel-slide>
</b-carousel> </b-carousel>
</div> </div>
</div>
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100"> <div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
<div v-if="status.sensitive == true">
<details class="details-animated">
<summary>
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
<p class="font-weight-light">(click to show)</p>
</summary>
<b-carousel :id="status.id + '-carousel'" <b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333; background-color: #000;" style="text-shadow: 1px 1px 2px #333; background-color: #000;"
controls controls
img-blank img-blank
background="#ffffff" background="#ffffff"
:interval="4000" :interval="0"
> >
<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'"> <b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
@ -121,6 +171,29 @@
</b-carousel-slide> </b-carousel-slide>
</b-carousel> </b-carousel>
</details>
</div>
<div v-else>
<b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333; background-color: #000;"
controls
img-blank
background="#ffffff"
:interval="0"
>
<b-carousel-slide v-for="(media, index) in status.media_attachments" :key="media.id + '-media'">
<video v-if="media.type == 'Video'" slot="img" class="embed-responsive-item" preload="none" controls loop :alt="media.description" width="100%" height="100%">
<source :src="media.url" :type="media.mime">
</video>
<img v-else-if="media.type == 'Image'" slot="img" class="d-block img-fluid w-100" :src="media.url" :alt="media.description">
<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
</b-carousel-slide>
</b-carousel>
</div>
</div> </div>
<div v-else class="w-100"> <div v-else class="w-100">