mobile version of media-video

src/web/app/mobile/views/components/index.ts

@@ -5,6 +5,7 @@ import timeline from './timeline.vue';
 import post from './post.vue';
 import posts from './posts.vue';
 import mediaImage from './media-image.vue';
+import mediaVideo from './media-video.vue';
 import drive from './drive.vue';
 import postPreview from './post-preview.vue';
 import subPostContent from './sub-post-content.vue';
@@ -27,6 +28,7 @@ Vue.component('mk-timeline', timeline);
 Vue.component('mk-post', post);
 Vue.component('mk-posts', posts);
 Vue.component('mk-media-image', mediaImage);
+Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-drive', drive);
 Vue.component('mk-post-preview', postPreview);
 Vue.component('mk-sub-post-content', subPostContent);

src/web/app/mobile/views/components/media-video.vue

@@ -0,0 +1,36 @@
+<template>
+	<a class="mk-media-video"
+		:href="video.url"
+		target="_blank"
+		:style="imageStyle"
+		:title="video.name">
+		%fa:R play-circle%
+	</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+	props: ['video'],
+	computed: {
+		imageStyle(): any {
+			return {
+				'background-image': `url(${this.video.url}?thumbnail&size=512)`
+			};
+		}
+	},})
+</script>
+
+<style lang="stylus" scoped>
+.mk-media-video
+	display flex
+	justify-content center
+	align-items center
+
+	font-size 3.5em
+	overflow hidden
+	background-position center
+	background-size cover
+	width 100%
+	height 100%
+</style>