Update Timeline.vue component, use presenter sub components

resources/assets/js/components/Timeline.vue

@@ -35,168 +35,23 @@
 
 				<div class="postPresenterContainer">
 					<div v-if="status.pf_type === 'photo'" class="w-100">
-						<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>
+						<photo-presenter :status="status"></photo-presenter>	
 					</div>
 
 					<div v-else-if="status.pf_type === 'video'" class="w-100">
-						<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>
+						<video-presenter :status="status"></video-presenter>
 					</div>
 
 					<div v-else-if="status.pf_type === 'photo:album'" class="w-100">
-						<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>
+						<photo-album-presenter :status="status"></photo-album-presenter>
 					</div>
 
 					<div v-else-if="status.pf_type === 'video:album'" class="w-100">
-						<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>
+						<video-album-presenter :status="status"></video-album-presenter>
 					</div>
 
 					<div v-else-if="status.pf_type === 'photo:video:album'" class="w-100">
-						<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>
+						<mixed-album-presenter :status="status"></mixed-album-presenter>
 					</div>
 
 					<div v-else class="w-100">
@@ -345,12 +200,7 @@
 	.postPresenterContainer {
 		display: flex;
 		align-items: center;
-		background: #000;
-	}
-	@media(min-width: 720px) {
-		.postPresenterContainer {
-			min-height: 600px;
-		}
+		background: #fff;
 	}
 	.cursor-pointer {
 		cursor: pointer;