mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-24 00:39:32 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve media list

Browse Source
This commit is contained in:
tamaina 2018-09-05 01:08:18 +09:00
parent 2399ba05cd
commit ebeaef94e2
10 changed files with 152 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
locales/ja-JP.yml
View File

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

2
src/client/app/common/views/components/index.ts
View File

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

85
src/client/app/common/views/components/media-banner.vue Normal file
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>

109
src/client/app/common/views/components/media-list.vue
View File

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

2
src/client/app/desktop/views/components/index.ts
View File

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

67
src/client/app/desktop/views/components/media-audio.vue
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>

79
src/client/app/desktop/views/components/media-download.vue
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>

2
src/client/app/desktop/views/components/media-image.vue
View File

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

21
src/client/app/desktop/views/components/media-video.vue
View File

@ -6,19 +6,11 @@
</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"
v-else>
:title="video.name">
%fa:R play-circle%
</a>
</div>
@ -34,9 +26,6 @@ export default Vue.extend({
type: Object,
required: true
},
inlinePlayable: {
default: false
},
hide: {
type: Boolean,
default: true
@ -68,12 +57,6 @@ 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
@ -99,7 +82,7 @@ export default Vue.extend({
text-align center
font-size 12px
> b
> *
display block
</style>

2
src/client/app/mobile/views/components/media-image.vue
View File

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