summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--locales/ja-JP.yml13
-rw-r--r--src/client/app/common/views/components/index.ts2
-rw-r--r--src/client/app/common/views/components/media-banner.vue85
-rw-r--r--src/client/app/common/views/components/media-list.vue107
-rw-r--r--src/client/app/desktop/views/components/index.ts2
-rw-r--r--src/client/app/desktop/views/components/media-audio.vue67
-rw-r--r--src/client/app/desktop/views/components/media-download.vue79
-rw-r--r--src/client/app/desktop/views/components/media-image.vue2
-rw-r--r--src/client/app/desktop/views/components/media-video.vue21
-rw-r--r--src/client/app/mobile/views/components/media-image.vue2
10 files changed, 151 insertions, 229 deletions
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 193c3c5022..de5505e7db 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -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: "フォロー"
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 4700b6269e..43cde6c54f 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -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);
diff --git a/src/client/app/common/views/components/media-banner.vue b/src/client/app/common/views/components/media-banner.vue
new file mode 100644
index 0000000000..69cd579446
--- /dev/null
+++ b/src/client/app/common/views/components/media-banner.vue
@@ -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>
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index 0312c2dfda..e949c063ab 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -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(1)
+ grid-row 1 / 3
- > *:nth-child(3)
- grid-column 2 / 3
- grid-row 2 / 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
+ &[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(1)
+ grid-column 1 / 2
+ grid-row 1 / 2
- > *:nth-child(2)
- grid-column 2 / 3
- 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(3)
+ grid-column 1 / 2
+ grid-row 2 / 3
- > *:nth-child(4)
- grid-column 2 / 3
- grid-row 2 / 3
+ > *:nth-child(4)
+ grid-column 2 / 3
+ grid-row 2 / 3
</style>
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 159ead4983..7b7a38afa2 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -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);
diff --git a/src/client/app/desktop/views/components/media-audio.vue b/src/client/app/desktop/views/components/media-audio.vue
deleted file mode 100644
index 5d41947b17..0000000000
--- a/src/client/app/desktop/views/components/media-audio.vue
+++ /dev/null
@@ -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>
diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue
deleted file mode 100644
index 236b065204..0000000000
--- a/src/client/app/desktop/views/components/media-download.vue
+++ /dev/null
@@ -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>
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 0284872c68..904dc7f832 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -89,7 +89,7 @@ export default Vue.extend({
text-align center
font-size 12px
- > b
+ > *
display block
</style>
diff --git a/src/client/app/desktop/views/components/media-video.vue b/src/client/app/desktop/views/components/media-video.vue
index 6c60f2da96..0a374acb8f 100644
--- a/src/client/app/desktop/views/components/media-video.vue
+++ b/src/client/app/desktop/views/components/media-video.vue
@@ -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>
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index e40069bbe3..c8766f5464 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -65,7 +65,7 @@ export default Vue.extend({
text-align center
font-size 12px
- > b
+ > *
display block
</style>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-27 12:24:52 +0000