mirror of
https://github.com/pixelfed/pixelfed.git
synced 2025-01-30 08:20:46 +00:00
Abstract presenter logic into separate components to reuse across timeline and post views
This commit is contained in:
Daniel Supernault
parent
07eb40d91b
commit
a5929584de
6 changed files with 221 additions and 0 deletions
31
resources/assets/js/components.js
vendored
31
resources/assets/js/components.js
vendored
|
|
@ -58,6 +58,32 @@ require('./components/notifications');
|
|||
// Initalize Notification Helper
|
||||
window.pixelfed.n = {};
|
||||
|
||||
Vue.component(
|
||||
'photo-presenter',
|
||||
require('./components/presenter/PhotoPresenter.vue')
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'video-presenter',
|
||||
require('./components/presenter/VideoPresenter.vue')
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'photo-album-presenter',
|
||||
require('./components/presenter/PhotoAlbumPresenter.vue')
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'video-album-presenter',
|
||||
require('./components/presenter/VideoAlbumPresenter.vue')
|
||||
);
|
||||
|
||||
|
||||
Vue.component(
|
||||
'mixed-album-presenter',
|
||||
require('./components/presenter/MixedAlbumPresenter.vue')
|
||||
);
|
||||
|
||||
Vue.component(
|
||||
'follow-suggestions',
|
||||
require('./components/FollowSuggestions.vue')
|
||||
|
|
@ -88,6 +114,11 @@ Vue.component(
|
|||
require('./components/Timeline.vue')
|
||||
);
|
||||
|
||||
// Vue.component(
|
||||
// 'micro',
|
||||
// require('./components/Micro.vue')
|
||||
// );
|
||||
|
||||
Vue.component(
|
||||
'passport-clients',
|
||||
require('./components/passport/Clients.vue')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<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'"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['status']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<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'"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['status']
|
||||
}
|
||||
</script>
|
||||
24
resources/assets/js/components/presenter/PhotoPresenter.vue
Normal file
24
resources/assets/js/components/presenter/PhotoPresenter.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['status']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<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'"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['status']
|
||||
}
|
||||
</script>
|
||||
26
resources/assets/js/components/presenter/VideoPresenter.vue
Normal file
26
resources/assets/js/components/presenter/VideoPresenter.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script type="text/javascript">
|
||||
export default {
|
||||
props: ['status']
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue