monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests 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
Download patch file Download diff file Expand all files Collapse all files

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>