diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue index 0a374acb8f..8af5f9b07e 100644 --- a/src/client/app/desktop/views/components/media-video.vue +++ b/src/client/app/desktop/views/components/media-video.vue @@ -6,11 +6,19 @@ </div> </div> <div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else> + <video class="video" + :src="video.url" + :title="video.name" + controls + @dblclick.prevent="onClick" + ref="video" + v-if="inlinePlayable" /> <a class="thumbnail" :href="video.url" :style="imageStyle" @click.prevent="onClick" - :title="video.name"> + :title="video.name" + v-else> %fa:R play-circle% </a> </div> @@ -19,13 +27,15 @@ <script lang="ts"> import Vue from 'vue'; import MkMediaVideoDialog from './media-video-dialog.vue'; - export default Vue.extend({ props: { video: { type: Object, required: true }, + inlinePlayable: { + default: false + }, hide: { type: Boolean, default: true @@ -57,32 +67,32 @@ export default Vue.extend({ <style lang="stylus" scoped> .vwxdhznewyashiknzolsoihtlpicqepe + .video + display block + width 100% + height 100% + border-radius 4px .thumbnail display flex justify-content center align-items center font-size 3.5em - cursor zoom-in overflow hidden background-position center background-size cover width 100% height 100% - .uofhebxjdgksfmltszlxurtjnjjsvioh display flex justify-content center align-items center background #111 color #fff - > div display table-cell text-align center font-size 12px - - > * + > b display block - </style>