mirror of
https://iceshrimp.dev/crimekillz/iceshrimp-161sh.git
synced 2024-11-22 12:13:48 +01:00
Improve media list
This commit is contained in:
parent
b6dac75f8a
commit
395904cf00
@ -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: "フォロー"
|
||||||
|
@ -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);
|
||||||
|
85
src/client/app/common/views/components/media-banner.vue
Normal file
85
src/client/app/common/views/components/media-banner.vue
Normal 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>
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user