graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 05:03:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

mobile version of media-video

Browse source
This commit is contained in:
rinsuki 2018-03-26 22:04:34 +09:00
parent b1f8fe7752
commit 6d69b0d271
2 changed files with 38 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/web/app/mobile/views/components/index.ts
View file

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

36
src/web/app/mobile/views/components/media-video.vue Normal file
View file

@ -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>