forked from mirror/pixelfed
Update Timeline.vue component, use presenter sub components
This commit is contained in:
Daniel Supernault
parent
a5929584de
commit
e0d50b15cd
1 changed files with 6 additions and 156 deletions
|
|
@ -35,168 +35,23 @@
|
||||||
|
|
||||||
<div class="postPresenterContainer">
|
<div class="postPresenterContainer">
|
||||||
<div v-if="status.pf_type === 'photo'" class="w-100">
|
<div v-if="status.pf_type === 'photo'" class="w-100">
|
||||||
<div v-if="status.sensitive == true">
|
<photo-presenter :status="status"></photo-presenter>
|
||||||
<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>
|
|
||||||
<a class="max-hide-overflow" :href="status.url" :class="status.media_attachments[0].filter_class">
|
|
||||||
<img class="card-img-top" :src="status.media_attachments[0].url">
|
|
||||||
</a>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<div :class="status.media_attachments[0].filter_class">
|
|
||||||
<img class="card-img-top" :src="status.media_attachments[0].url">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="status.pf_type === 'video'" class="w-100">
|
<div v-else-if="status.pf_type === 'video'" class="w-100">
|
||||||
<div v-if="status.sensitive == true">
|
<video-presenter :status="status"></video-presenter>
|
||||||
<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>
|
|
||||||
<div class="embed-responsive embed-responsive-16by9">
|
|
||||||
<video class="video" preload="none" controls loop>
|
|
||||||
<source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
<div v-else class="embed-responsive embed-responsive-16by9">
|
|
||||||
<video class="video" preload="none" controls loop>
|
|
||||||
<source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
|
<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
|
||||||
<div v-if="status.sensitive == true">
|
<photo-album-presenter :status="status"></photo-album-presenter>
|
||||||
<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'"
|
|
||||||
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">
|
|
||||||
<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">
|
|
||||||
<img slot="img" class="d-block img-fluid w-100" :src="img.url" :alt="img.description">
|
|
||||||
</b-carousel-slide>
|
|
||||||
</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">
|
<video-album-presenter :status="status"></video-album-presenter>
|
||||||
<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'"
|
|
||||||
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'">
|
|
||||||
<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'">
|
|
||||||
<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>
|
</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">
|
<mixed-album-presenter :status="status"></mixed-album-presenter>
|
||||||
<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'"
|
|
||||||
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>
|
|
||||||
</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">
|
||||||
|
|
@ -345,12 +200,7 @@
|
||||||
.postPresenterContainer {
|
.postPresenterContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #000;
|
background: #fff;
|
||||||
}
|
|
||||||
@media(min-width: 720px) {
|
|
||||||
.postPresenterContainer {
|
|
||||||
min-height: 600px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.cursor-pointer {
|
.cursor-pointer {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue