hajeebtok-frontend/src/components/ProfileVideo.vue

<script lang="ts">
import { defineComponent } from 'vue'
import { config } from '@/main'
import { useRouter } from 'vue-router'

export default defineComponent({
	name: 'ProfileVideo',
	props: {
		id: {
			type: Number,
			required: true,
		},
		accountId: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			config,
		}
	},
	setup() {
		const router = useRouter();
		return { router }
	},
})
</script>

<template>
	<div class="profile-video" @click="this.router.push(`/profile/${accountId}/videos?video=${id}`)">
		<img :src="`${config.serverURL}/video/${id}/thumbnail`" class="profile-video-thumbnail" />
	</div>
</template>

<style scoped>
.profile-video {
	border-radius: 15px;
	border: 2px solid var(--accent-color);
	width: 200px;
	height: 300px;
}

.profile-video:hover {
	cursor: pointer;
	animation-name: interaction;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.profile-video-thumbnail {
	border-radius: 15px;
	width: 100%;
	height: 100%;
}

@keyframes interaction {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}

	100% {
		transform: scale(1);
	}
}
</style>