Update Presenters

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

@@ -5,22 +5,6 @@
 				<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'"
-				v-model="cursor"
-				style="text-shadow: 1px 1px 2px #333;min-height: 330px;display: flex;align-items: center;"
-				controls
-				background="#ffffff"
-				:interval="0"
-			>
-				<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
-					<div slot="img" class="d-block mx-auto text-center" style="max-height: 600px;" :title="img.description">
-						<img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" :alt="img.description" loading="lazy">
-					</div>
-				</b-carousel-slide>
-				<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
-					{{cursor + 1}} / {{status.media_attachments.length}}
-				</span>
-			</b-carousel> -->
 			<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb">
 				<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="w-100 h-100 d-block mx-auto text-center" :title="img.description">
 					<img :class="img.filter_class + ' img-fluid'" :src="img.url" :alt="img.description">
@@ -29,22 +13,6 @@
 		</details>
 	</div>
 	<div v-else class="w-100 h-100 p-0">
-		<!-- <b-carousel :id="status.id + '-carousel'"
-			v-model="cursor"
-			style="text-shadow: 1px 1px 2px #333;min-height: 330px;display: flex;align-items: center;"
-			controls
-			background="#ffffff"
-			:interval="0"
-		>
-			<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id" :title="img.description">
-				<div slot="img" class="d-block mx-auto text-center" style="max-height: 600px;">
-					<img :class="img.filter_class + ' img-fluid'" style="max-height: 600px;" :src="img.url" loading="lazy" :alt="img.description">
-				</div>
-			</b-carousel-slide>
-			<span class="badge badge-dark box-shadow" style="position: absolute;top:10px;right:10px;">
-				{{cursor + 1}} / {{status.media_attachments.length}}
-			</span>
-		</b-carousel> -->
 		<carousel ref="carousel" :centerMode="true" :loop="false" :per-page="1" :paginationPosition="'bottom-overlay'" paginationActiveColor="#3897f0" paginationColor="#dbdbdb" class="p-0 m-0">
 			<slide v-for="(img, index) in status.media_attachments" :key="'px-carousel-'+img.id + '-' + index" class="" style="background: #000; display: flex;align-items: center;" :title="img.description">
 				<img :class="img.filter_class + ' img-fluid w-100 p-0'" style="" :src="img.url" :alt="img.description">

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

@@ -6,14 +6,14 @@
 				<p class="font-weight-light">(click to show)</p>
 			</summary>
 			<div class="embed-responsive embed-responsive-1by1">
-				<video class="video" preload="none" controls loop :poster="status.media_attachments[0].preview_url">
+				<video class="video" preload="none" loop :poster="status.media_attachments[0].preview_url":data-id="status.id" @click="playOrPause($event)">
 					<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="auto" controls loop :poster="status.media_attachments[0].preview_url">
+		<video class="video" controls preload="metadata" loop :poster="status.media_attachments[0].preview_url" :data-id="status.id">
 			<source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
 		</video>
 	</div>
@@ -22,5 +22,18 @@
 <script type="text/javascript">
 	export default {
 		props: ['status'],
+
+		methods: {
+			playOrPause(e) {
+				let el = e.target;
+				if(el.getAttribute('playing') == 1) {
+					el.removeAttribute('playing');
+					el.pause();
+				} else {
+					el.setAttribute('playing', 1);
+					el.play();
+				}
+			}
+		}
 	}
 </script>