1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <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%" :poster="vid.preview_url">
- <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%" :poster="vid.preview_url">
- <source :src="vid.url" :type="vid.mime">
- </video>
- </b-carousel-slide>
- </b-carousel>
- </div>
- </template>
- <script type="text/javascript">
- export default {
- props: ['status']
- }
- </script>
|