wip
This commit is contained in:
parent
1595683904
commit
2555e23b10
2 changed files with 69 additions and 0 deletions
|
@ -3,6 +3,7 @@
|
||||||
<div :data-count="mediaList.length" ref="grid">
|
<div :data-count="mediaList.length" ref="grid">
|
||||||
<template v-for="media in mediaList">
|
<template v-for="media in mediaList">
|
||||||
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
|
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
|
||||||
|
<mk-media-audio :video="media" :key="media.id" v-if="media.type.startsWith('audio')" :inline-playable="mediaList.length === 1"/>
|
||||||
<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
|
<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
68
src/client/app/desktop/views/components/media-audio.vue
Normal file
68
src/client/app/desktop/views/components/media-audio.vue
Normal file
|
@ -0,0 +1,68 @@
|
||||||
|
<template>
|
||||||
|
<div class="abunaiaudionankasirankedoichioux" v-if="audio.isSensitive && hide" @click="hide = false">
|
||||||
|
<div>
|
||||||
|
<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
|
||||||
|
<span>%i18n:@click-to-show%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="komeijiokayusabanomisoniohitashi" v-else>
|
||||||
|
<audio class="audio"
|
||||||
|
:src="audio.url"
|
||||||
|
:title="audio.name"
|
||||||
|
controls
|
||||||
|
ref="audio"
|
||||||
|
v-if="inlinePlayable" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
props: {
|
||||||
|
audio: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
inlinePlayable: {
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hide: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
imageStyle(): any {
|
||||||
|
return {
|
||||||
|
'background-image': `url(${this.audio.url})`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.komeijiokayusabanomisoniohitashi
|
||||||
|
.audio
|
||||||
|
display block
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
border-radius 4px
|
||||||
|
|
||||||
|
.abunaiaudionankasirankedoichioux
|
||||||
|
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>
|
Loading…
Reference in a new issue