Improve media list

This commit is contained in:
tamaina 2018-09-05 01:08:18 +09:00
parent b6dac75f8a
commit 395904cf00
10 changed files with 152 additions and 230 deletions

View File

@ -250,6 +250,10 @@ common/views/components/connect-failed.troubleshooter.vue:
flush: "キャッシュの削除" flush: "キャッシュの削除"
set-version: "バージョン指定" set-version: "バージョン指定"
common/views/components/media-banner.vue:
sensitive: "閲覧注意"
click-to-show: "クリックして表示"
common/views/components/messaging.vue: common/views/components/messaging.vue:
search-user: "ユーザーを探す" search-user: "ユーザーを探す"
you: "あなた" you: "あなた"
@ -583,15 +587,6 @@ desktop/views/components/media-video.vue:
sensitive: "閲覧注意" sensitive: "閲覧注意"
click-to-show: "クリックして表示" click-to-show: "クリックして表示"
desktop/views/components/media-audio.vue:
sensitive: "閲覧注意"
click-to-show: "クリックして表示"
desktop/views/components/media-download.vue:
sensitive: "閲覧注意"
click-to-show: "クリックして表示"
download: "ダウンロード"
desktop/views/components/follow-button.vue: desktop/views/components/follow-button.vue:
following: "フォロー中" following: "フォロー中"
follow: "フォロー" follow: "フォロー"

View File

@ -18,6 +18,7 @@ import reactionsViewer from './reactions-viewer.vue';
import time from './time.vue'; import time from './time.vue';
import timer from './timer.vue'; import timer from './timer.vue';
import mediaList from './media-list.vue'; import mediaList from './media-list.vue';
import mediaBanner from './media-banner.vue';
import uploader from './uploader.vue'; import uploader from './uploader.vue';
import specialMessage from './special-message.vue'; import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.vue'; import streamIndicator from './stream-indicator.vue';
@ -59,6 +60,7 @@ Vue.component('mk-reactions-viewer', reactionsViewer);
Vue.component('mk-time', time); Vue.component('mk-time', time);
Vue.component('mk-timer', timer); Vue.component('mk-timer', timer);
Vue.component('mk-media-list', mediaList); Vue.component('mk-media-list', mediaList);
Vue.component('mk-media-banner', mediaBanner);
Vue.component('mk-uploader', uploader); Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage); Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator); Vue.component('mk-stream-indicator', streamIndicator);

View File

@ -0,0 +1,85 @@
<template>
<div class="mk-media-banner">
<div class="mk-media-banner-sensitive" v-if="media.isSensitive && hide" @click="hide = false">
<span class="mk-media-banner-icon">%fa:exclamation-triangle%</span>
<b>%i18n:@sensitive%</b>
<span>%i18n:@click-to-show%</span>
</div>
<div class="mk-media-banner-audio" v-else-if="media.type.startsWith('audio')">
<audio class="audio"
:src="media.url"
:title="media.name"
controls
ref="audio"
preload="metadata" />
</div>
<a class="mk-media-banner-download" v-else
:href="media.url"
:title="media.name"
:download="media.name"
>
<span class="mk-media-banner-icon">%fa:download%</span>
<b>{{ media.name }}</b>
</a>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
media: {
type: Object,
required: true
},
hide: {
type: Boolean,
default: true
}
}
})
</script>
<style lang="stylus" scoped>
.mk-media-banner
width 100%
border-radius 4px
margin-top 4px
overflow hidden
.mk-media-banner-download,
.mk-media-banner-sensitive
display flex
align-items center
font-size 12px
padding .2em .6em
white-space nowrap
> *
display block
> b
flex-shrink 2147483647
overflow hidden
text-overflow ellipsis
> *:not(:last-child)
margin-right .2em
> .mk-media-banner-icon
font-size 1.6em
.mk-media-banner-download
background #f7f7f7
.mk-media-banner-sensitive
background #111
color #fff
.mk-media-banner-audio
.audio
display block
width 100%
height 100%
</style>

View File

@ -1,12 +1,15 @@
<template> <template>
<div class="mk-media-list"> <div class="mk-media-list">
<div :data-count="mediaList.length" ref="grid"> <template v-for="media in mediaList">
<template v-for="media in mediaList"> <mk-media-banner :media="media" :key="media.id" v-if="!media.type.startsWith('image') && !media.type.startsWith('video')"/>
<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/> </template>
<mk-media-audio :audio="media" :key="media.id" v-else-if="media.type.startsWith('audio')"/> <div class="mk-media-list-fixed" v-if="mediaList.filter(media => media.type.startsWith('image') || media.type.startsWith('video')).length > 0">
<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/> <div :data-count="mediaList.filter(media => media.type.startsWith('video') || media.type.startsWith('image')).length" ref="grid">
<mk-media-download :download="media" :key="media.id" v-else/> <template v-for="media in mediaList">
</template> <mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')"/>
<mk-media-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
</template>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -32,62 +35,64 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-media-list .mk-media-list
width 100% > .mk-media-list-fixed
width 100%
margin-top 4px
&:before &:before
content '' content ''
display block display block
padding-top 56.25% // 16:9 padding-top 56.25% // 16:9
> div > div
position absolute position absolute
top 0 top 0
right 0 right 0
bottom 0 bottom 0
left 0 left 0
display grid display grid
grid-gap 4px grid-gap 4px
> * > *
overflow hidden overflow hidden
border-radius 4px border-radius 4px
&[data-count="1"] &[data-count="1"]
grid-template-rows 1fr grid-template-rows 1fr
&[data-count="2"] &[data-count="2"]
grid-template-columns 1fr 1fr grid-template-columns 1fr 1fr
grid-template-rows 1fr grid-template-rows 1fr
&[data-count="3"] &[data-count="3"]
grid-template-columns 1fr 0.5fr grid-template-columns 1fr 0.5fr
grid-template-rows 1fr 1fr grid-template-rows 1fr 1fr
> *:nth-child(1)
grid-row 1 / 3
> *:nth-child(3)
grid-column 2 / 3
grid-row 2 / 3
&[data-count="4"]
grid-template-columns 1fr 1fr
grid-template-rows 1fr 1fr
> *:nth-child(1) > *:nth-child(1)
grid-row 1 / 3 grid-column 1 / 2
grid-row 1 / 2
> *:nth-child(2)
grid-column 2 / 3
grid-row 1 / 2
> *:nth-child(3) > *:nth-child(3)
grid-column 1 / 2
grid-row 2 / 3
> *:nth-child(4)
grid-column 2 / 3 grid-column 2 / 3
grid-row 2 / 3 grid-row 2 / 3
&[data-count="4"]
grid-template-columns 1fr 1fr
grid-template-rows 1fr 1fr
> *:nth-child(1)
grid-column 1 / 2
grid-row 1 / 2
> *:nth-child(2)
grid-column 2 / 3
grid-row 1 / 2
> *:nth-child(3)
grid-column 1 / 2
grid-row 2 / 3
> *:nth-child(4)
grid-column 2 / 3
grid-row 2 / 3
</style> </style>

View File

@ -13,7 +13,6 @@ import ellipsisIcon from './ellipsis-icon.vue';
import mediaImage from './media-image.vue'; import mediaImage from './media-image.vue';
import mediaImageDialog from './media-image-dialog.vue'; import mediaImageDialog from './media-image-dialog.vue';
import mediaVideo from './media-video.vue'; import mediaVideo from './media-video.vue';
import mediaAudio from './media-audio.vue';
import notifications from './notifications.vue'; import notifications from './notifications.vue';
import noteForm from './post-form.vue'; import noteForm from './post-form.vue';
import renoteForm from './renote-form.vue'; import renoteForm from './renote-form.vue';
@ -44,7 +43,6 @@ Vue.component('mk-ellipsis-icon', ellipsisIcon);
Vue.component('mk-media-image', mediaImage); Vue.component('mk-media-image', mediaImage);
Vue.component('mk-media-image-dialog', mediaImageDialog); Vue.component('mk-media-image-dialog', mediaImageDialog);
Vue.component('mk-media-video', mediaVideo); Vue.component('mk-media-video', mediaVideo);
Vue.component('mk-media-audio', mediaAudio);
Vue.component('mk-notifications', notifications); Vue.component('mk-notifications', notifications);
Vue.component('mk-post-form', noteForm); Vue.component('mk-post-form', noteForm);
Vue.component('mk-renote-form', renoteForm); Vue.component('mk-renote-form', renoteForm);

View File

@ -1,67 +0,0 @@
<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" />
</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>

View File

@ -1,79 +0,0 @@
<template>
<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="download.isSensitive && hide" @click="hide = false">
<div>
<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
<span>%i18n:@click-to-show%</span>
</div>
</div>
<a class="reiujibreakfastbreadbaconeggnuts" v-else
:href="download.url"
:style="style"
:title="download.name"
download="{{ download.name }}{{ download.ext }}"
>
<div>
<div>%fa:download%</div>
<div>%i18n:@download%</div>
<div>{{ download.name }}{{ download.ext }}</div>
</div>
</a>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
download: {
type: Object,
required: true
},
raw: {
default: false
},
hide: {
type: Boolean,
default: true
}
},
computed: {
style(): any {
return {
'background-color': this.download.properties.avgColor && this.download.properties.avgColor.length == 3 ? `rgb(${this.download.properties.avgColor.join(',')})` : 'transparent',
'background-download': this.raw ? `url(${this.download.url})` : `url(${this.download.thumbnailUrl})`
};
}
}
});
</script>
<style lang="stylus" scoped>
.reiujibreakfastbreadbaconeggnuts
display flex
justify-content center
align-items center
> div
display table-cell
text-align center
font-size 12px
> *
display block
.ldwbgwstjsdgcjruamauqdrffetqudry
display flex
justify-content center
align-items center
background #111
color #fff
> div
display table-cell
text-align center
font-size 12px
> *
display block
</style>

View File

@ -89,7 +89,7 @@ export default Vue.extend({
text-align center text-align center
font-size 12px font-size 12px
> b > *
display block display block
</style> </style>

View File

@ -6,19 +6,11 @@
</div> </div>
</div> </div>
<div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else> <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" <a class="thumbnail"
:href="video.url" :href="video.url"
:style="imageStyle" :style="imageStyle"
@click.prevent="onClick" @click.prevent="onClick"
:title="video.name" :title="video.name">
v-else>
%fa:R play-circle% %fa:R play-circle%
</a> </a>
</div> </div>
@ -34,9 +26,6 @@ export default Vue.extend({
type: Object, type: Object,
required: true required: true
}, },
inlinePlayable: {
default: false
},
hide: { hide: {
type: Boolean, type: Boolean,
default: true default: true
@ -68,12 +57,6 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.vwxdhznewyashiknzolsoihtlpicqepe .vwxdhznewyashiknzolsoihtlpicqepe
.video
display block
width 100%
height 100%
border-radius 4px
.thumbnail .thumbnail
display flex display flex
justify-content center justify-content center
@ -99,7 +82,7 @@ export default Vue.extend({
text-align center text-align center
font-size 12px font-size 12px
> b > *
display block display block
</style> </style>

View File

@ -65,7 +65,7 @@ export default Vue.extend({
text-align center text-align center
font-size 12px font-size 12px
> b > *
display block display block
</style> </style>