From 8d930964470b8713a2269a83db6a894cc667fd8b Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sun, 9 Dec 2018 23:53:25 -0700
Subject: [PATCH] Update Timeline.vue component, add CW to other types and
 prevent carousel from automatically rotating

---
 resources/assets/js/components/Timeline.vue | 151 +++++++++++++++-----
 1 file changed, 112 insertions(+), 39 deletions(-)

diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index e2b3b81f0..47787135f 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -72,55 +72,128 @@
 					</div>
 
 					<div v-else-if="status.pf_type === 'photo:album'">
-						<b-carousel :id="status.id + '-carousel'"
-							style="text-shadow: 1px 1px 2px #333;"
-							controls
-							indicators
-							background="#ffffff"
-							:interval="4000"
-						>
-							<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 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>
 					</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 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>
 					</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'">
+						<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>
+										<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">
+										<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>
+										<p v-else class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
 
-							</b-carousel-slide>
-						</b-carousel>
+									</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 v-else class="w-100">