feat(Activity): Allow to show previews in Activity component

Signed-off-by: Ferdinand Thiessen <[email protected]>

src/components/Activity.vue

@@ -33,6 +33,20 @@
 		</div>
 		<span class="hidden-visually">{{ activity.formattedDate }}</span>
 		<span :title="activity.formattedDate" class="activity-entry__date">{{ dateFromNow }}</span>
+		<div v-if="showPreviews" class="activity-entry__preview-wrapper">
+			<component :is="preview.link ? 'a' : 'span'"
+				v-for="preview, index in activity.previews"
+				:key="preview.fileId ?? `preview-${index}`"
+				class="activity-entry__preview"
+				:href="preview.link">
+				<img class="activity-entry__preview-image"
+					:class="{
+						'activity-entry__preview-mimetype': preview.isMimeTypeIcon,
+					}"
+					:src="preview.source"
+					:alt="preview.link ? t('activity', 'Open {filename}', preview) : ''">
+			</component>
+		</div>
 	</li>
 </template>
 
@@ -72,6 +86,13 @@ export default {
 			type: ActivityModel,
 			required: true,
 		},
+		/**
+		 * Whether to show previews
+		 */
+		showPreviews: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -198,6 +219,7 @@ export default {
 <style lang="scss" scoped>
 .activity-entry {
 	display: flex;
+	flex-wrap: wrap;
 	align-items: flex-start;
 	width: 100%;
 	height: var(--height);
@@ -242,5 +264,34 @@ export default {
 		margin-left: 5px;
 		flex-shrink: 0;
 	}
+
+	&__preview-wrapper {
+		// Force next line
+		flex: 0 0 100%;
+		// Proper spacing
+		gap: 12px;
+		// align with content
+		margin-inline-start: 24px;
+	}
+
+	&__preview:hover {
+		opacity: .75;
+	}
+
+	&__preview-image {
+		height: 50px;
+		width: 50px;
+
+		// Only add borders for images, not for MIME types
+		&:not(.activity-entry__preview-mimetype) {
+			border: 2px solid var(--color-border);
+			border-radius: var(--border-radius-large);
+
+			&:hover {
+				border-color: var(--color-main-text);
+				outline: 2px solid var(--color-main-background);
+			}
+		}
+	}
 }
 </style>

src/models/ActivityModel.ts

@@ -20,7 +20,7 @@
  *
  */
 
-import type { IRawActivity, IRichObject } from './types'
+import type { IPreview, IRawActivity, IRichObject } from './types'
 import moment from '@nextcloud/moment'
 
 export default class ActivityModel {
@@ -275,4 +275,11 @@ export default class ActivityModel {
 		return moment(this._activity.datetime).unix()
 	}
 
+	/**
+	 * Get previews of affected files
+	 */
+	get previews(): IPreview[] {
+		return this._activity.previews ?? []
+	}
+
 }

src/models/types.ts

@@ -43,6 +43,31 @@ export interface IRichObject {
 	[key: string]: unknown
 }
 
+export interface IPreview {
+	/**
+	 * The URL of the link target
+	 */
+	link?: string
+	/**
+	 * The URL of the preview image
+	 */
+	source: string
+	/**
+	 * MIME type of the file
+	 */
+	mimeType: string
+	/**
+	 * Whether this is a MIME type icon or a real preview of the file
+	 */
+	isMimeTypeIcon: boolean
+	/**
+	 * The file ID
+	 */
+	fileId: number
+	view: string
+	filename: string
+}
+
 export interface IRawActivity {
 	activity_id: number
 	app: string
@@ -68,5 +93,5 @@ export interface IRawActivity {
 	link: string
 	icon: string
 	datetime: string
-	previews: unknown[]
+	previews?: IPreview[]
 }