feat: experimental videos in grid

src/api/utils/ThumbUtil.js

@@ -72,10 +72,16 @@ class ThumbUtil {
 	}
 
 	static getFileThumbnail(filename) {
+		// TODO: refactor so we don't do the same compare multiple times (poor cpu cycles)
 		if (!filename) return null;
 		const ext = path.extname(filename).toLowerCase();
 		if (!ThumbUtil.imageExtensions.includes(ext) && !ThumbUtil.videoExtensions.includes(ext)) return null;
-		return `${filename.slice(0, -ext.length)}.png`;
+		if (ThumbUtil.imageExtensions.includes(ext)) return { thumb: `${filename.slice(0, -ext.length)}.png` };
+		if (ThumbUtil.videoExtensions.includes(ext))
+			return {
+				thumb: `${filename.slice(0, -ext.length)}.png`,
+				preview: `${filename.slice(0, -ext.length)}.webm`
+			};
 	}
 
 	static async removeThumbs(thumbName) {

src/api/utils/Util.js

@@ -40,10 +40,11 @@ class Util {
 			the site and the API under the same domain. Pls fix.
 		*/
 		file.url = `${process.env.DOMAIN}/${file.name}`;
-		const thumb = ThumbUtil.getFileThumbnail(file.name);
+		const { thumb, preview } = ThumbUtil.getFileThumbnail(file.name) || {};
 		if (thumb) {
 			file.thumb = `${process.env.DOMAIN}/thumbs/${thumb}`;
 			file.thumbSquare = `${process.env.DOMAIN}/thumbs/square/${thumb}`;
+			file.preview = preview && `${process.env.DOMAIN}/thumbs/preview/${preview}`;
 		}
 		return file;
 	}

src/site/components/grid/Grid.vue

@@ -32,6 +32,7 @@
 				<WaterfallItem v-for="(item, index) in gridFiles"
 					:key="item.id"
 					:width="width"
+					:video="!!item.preview"
 					move-class="item-move">
 					<template v-if="isPublic">
 						<a :href="`${item.url}`"
@@ -42,7 +43,11 @@
 						</a>
 					</template>
 					<template v-else>
-						<img :src="item.thumb ? item.thumb : blank">
+						<img v-if="!item.preview" :class="{'hidden': item.preview}" 
+							:src="item.thumb ? item.thumb : blank">
+						<video v-if="item.preview" autoplay loop>
+  							<source :src="item.preview" type="video/mp4" />
+						</video>
 						<span v-if="!item.thumb && item.name"
 							class="extension">{{ item.name.split('.').pop() }}</span>
 						<div v-if="!isPublic"
@@ -56,21 +61,20 @@
 									<i class="icon-web-code" />
 								</a>
 							</b-tooltip>
+							<b-tooltip label="Tags"
+								position="is-top">
+								<a class="btn"
+									@click="manageTags(item)">
+									<i class="icon-ecommerce-tag-c" />
+								</a>
+							</b-tooltip>
 							<b-tooltip label="Albums"
 								position="is-top">
 								<a class="btn"
 									@click="openAlbumModal(item)">
 									<i class="icon-interface-window" />
 								</a>
-							</b-tooltip>
-							<!--
-							<b-tooltip label="Tags"
-								position="is-top">
-								<a @click="manageTags(item)">
-									<i class="icon-ecommerce-tag-c" />
-								</a>
-							</b-tooltip>
-							-->
+							</b-tooltip>							
 							<b-tooltip label="Delete"
 								position="is-top">
 								<a class="btn"
@@ -318,6 +322,9 @@ export default {
 			const response = await this.$axios.$get(`albums/dropdown`);
 			this.albums = response.albums;
 			this.$forceUpdate();
+		},
+		mouseOverTest() {
+			console.log('aaaaaa');
 		}
 	}
 };
@@ -385,6 +392,7 @@ export default {
 			&:nth-child(1), &:nth-child(3) {
 				justify-content: flex-end;
 			}
+
 			a {
 				width: 30px;
 				height: 30px;
@@ -429,6 +437,10 @@ export default {
 			text-align: left;
 		}
 	}
+
+	img.hidden {
+		display: none;
+	}
 </style>
 
 <style lang="scss">

src/site/components/grid/waterfall/Waterfall.vue

@@ -170,7 +170,7 @@ export default {
 					return;
 				}
 				child.el.style.top = `${offsetArr[position]}px`;
-				offsetArr[position] += (child.height + this.gutterHeight);
+				offsetArr[position] += child.height + this.gutterHeight;
 				this.$el.style.height = `${Math.max.apply(Math, offsetArr)}px`;
 			});
 			this.$emit('rendered', this);

src/site/components/grid/waterfall/WaterfallItem.vue

@@ -1,13 +1,15 @@
-<style>
+<style scoped>
 	.waterfall-item {
 		position: absolute;
 	}
 </style>
+
 <template>
 	<div class="waterfall-item">
 		<slot />
 	</div>
 </template>
+
 <script>
 import imagesLoaded from 'imagesloaded';
 export default {
@@ -20,6 +22,10 @@ export default {
 		width: {
 			type: Number,
 			default: 150
+		},
+		video: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
@@ -35,13 +41,28 @@ export default {
 		this.$el.style.display = 'none';
 		this.$el.style.width = `${this.width}px`;
 		this.emit();
-		imagesLoaded(this.$el, () => {
-			this.$el.style.left = '-9999px';
-			this.$el.style.top = '-9999px';
-			this.$el.style.display = 'block';
-			this.height = this.$el.offsetHeight;
-			this.itemWidth = this.$el.offsetWidth;
-		});
+		if (this.video) {
+			const videoEl = this.$slots.default.find(e => e.tag?.toLowerCase() === 'video');
+			const el = videoEl.elm;
+			console.log(videoEl);
+			console.log(el);
+			el.onloadeddata = () => {
+				console.log('loaded');
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = el.offsetHeight + 5;
+				this.itemWidth = el.offsetWidth;
+			}
+		} else {
+			imagesLoaded(this.$el, () => {
+				this.$el.style.left = '-9999px';
+				this.$el.style.top = '-9999px';
+				this.$el.style.display = 'block';
+				this.height = this.$el.offsetHeight;
+				this.itemWidth = this.$el.offsetWidth;
+			});
+		}
 	},
 	methods: {
 		emit() {