diff --git a/src/web/app/mobile/views/components/index.ts b/src/web/app/mobile/views/components/index.ts index 4743f50e0d..fb8f65f47d 100644 --- a/src/web/app/mobile/views/components/index.ts +++ b/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); diff --git a/src/web/app/mobile/views/components/media-video.vue b/src/web/app/mobile/views/components/media-video.vue new file mode 100644 index 0000000000..68cd48587a --- /dev/null +++ b/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>