UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-30 02:03:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update Timeline.vue component, add video album and photo video album renderers

Browse source
This commit is contained in:
Daniel Supernault 2018-12-09 22:43:47 -07:00
parent befed118ea
commit cdee4f863f
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 39 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -72,7 +72,7 @@
</div> </div>
<div v-else-if="status.pf_type === 'photo:album'"> <div v-else-if="status.pf_type === 'photo:album'">
<b-carousel id="carousel1" <b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333;" style="text-shadow: 1px 1px 2px #333;"
controls controls
indicators indicators
@ -85,6 +85,44 @@
</b-carousel> </b-carousel>
</div> </div>
<div v-else-if="status.pf_type === 'video:album'" class="w-100">
<b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333; background-color: #000;"
controls
img-blank
background="#ffffff"
:interval="4000"
>
<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>
</div>
<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
<b-carousel :id="status.id + '-carousel'"
style="text-shadow: 1px 1px 2px #333; background-color: #000;"
controls
img-blank
background="#ffffff"
:interval="4000"
>
<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 v-else class="w-100"> <div v-else class="w-100">
<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p> <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
</div> </div>