Abstract presenter logic into separate components to reuse across timeline and post views

resources/assets/js/components.js

@@ -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')

resources/assets/js/components/presenter/MixedAlbumPresenter.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>

resources/assets/js/components/presenter/PhotoAlbumPresenter.vue

@@ -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>

resources/assets/js/components/presenter/PhotoPresenter.vue

@@ -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>

resources/assets/js/components/presenter/VideoAlbumPresenter.vue

@@ -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>

resources/assets/js/components/presenter/VideoPresenter.vue

@@ -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>