From cdee4f863f8cb1e6a7cd6280b7b7d1ccfd145d1b Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sun, 9 Dec 2018 22:43:47 -0700
Subject: [PATCH] Update Timeline.vue component, add video album and photo
 video album renderers

---
 resources/assets/js/components/Timeline.vue | 40 ++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index 7f0ae06dc..c90268175 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -72,7 +72,7 @@
 					</div>
 
 					<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;"
 							controls
 							indicators
@@ -85,6 +85,44 @@
 						</b-carousel>
 					</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">
 						<p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
 					</div>