動画もNSFW
This commit is contained in:
parent
ec2b1ec3f0
commit
738ced81ec
3 changed files with 101 additions and 25 deletions
|
@ -383,6 +383,10 @@ desktop/views/components/media-image.vue:
|
||||||
sensitive: "閲覧注意"
|
sensitive: "閲覧注意"
|
||||||
click-to-show: "クリックして表示"
|
click-to-show: "クリックして表示"
|
||||||
|
|
||||||
|
desktop/views/components/media-video.vue:
|
||||||
|
sensitive: "閲覧注意"
|
||||||
|
click-to-show: "クリックして表示"
|
||||||
|
|
||||||
desktop/views/components/follow-button.vue:
|
desktop/views/components/follow-button.vue:
|
||||||
following: "フォロー中"
|
following: "フォロー中"
|
||||||
follow: "フォロー"
|
follow: "フォロー"
|
||||||
|
@ -863,6 +867,10 @@ mobile/views/components/media-image.vue:
|
||||||
sensitive: "閲覧注意"
|
sensitive: "閲覧注意"
|
||||||
click-to-show: "クリックして表示"
|
click-to-show: "クリックして表示"
|
||||||
|
|
||||||
|
mobile/views/components/media-video.vue:
|
||||||
|
sensitive: "閲覧注意"
|
||||||
|
click-to-show: "クリックして表示"
|
||||||
|
|
||||||
mobile/views/components/follow-button.vue:
|
mobile/views/components/follow-button.vue:
|
||||||
following: "フォロー中"
|
following: "フォロー中"
|
||||||
follow: "フォロー"
|
follow: "フォロー"
|
||||||
|
|
|
@ -1,12 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<video class="mk-media-video"
|
<div class="uofhebxjdgksfmltszlxurtjnjjsvioh" v-if="video.isSensitive && hide" @click="hide = false">
|
||||||
|
<div>
|
||||||
|
<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
|
||||||
|
<span>%i18n:@click-to-show%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vwxdhznewyashiknzolsoihtlpicqepe" v-else>
|
||||||
|
<video class="video"
|
||||||
:src="video.url"
|
:src="video.url"
|
||||||
:title="video.name"
|
:title="video.name"
|
||||||
controls
|
controls
|
||||||
@dblclick.prevent="onClick"
|
@dblclick.prevent="onClick"
|
||||||
ref="video"
|
ref="video"
|
||||||
v-if="inlinePlayable" />
|
v-if="inlinePlayable" />
|
||||||
<a class="mk-media-video-thumbnail"
|
<a class="thumbnail"
|
||||||
:href="video.url"
|
:href="video.url"
|
||||||
:style="imageStyle"
|
:style="imageStyle"
|
||||||
@click.prevent="onClick"
|
@click.prevent="onClick"
|
||||||
|
@ -14,6 +21,7 @@
|
||||||
v-else>
|
v-else>
|
||||||
%fa:R play-circle%
|
%fa:R play-circle%
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
@ -21,7 +29,19 @@ import Vue from 'vue';
|
||||||
import MkMediaVideoDialog from './media-video-dialog.vue';
|
import MkMediaVideoDialog from './media-video-dialog.vue';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: ['video', 'inlinePlayable'],
|
props: {
|
||||||
|
video: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
inlinePlayable: {
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
hide: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
imageStyle(): any {
|
imageStyle(): any {
|
||||||
return {
|
return {
|
||||||
|
@ -47,13 +67,14 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-media-video
|
.vwxdhznewyashiknzolsoihtlpicqepe
|
||||||
|
.video
|
||||||
display block
|
display block
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
.mk-media-video-thumbnail
|
.thumbnail
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
justify-content center
|
||||||
align-items center
|
align-items center
|
||||||
|
@ -65,4 +86,20 @@ export default Vue.extend({
|
||||||
background-size cover
|
background-size cover
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
|
.uofhebxjdgksfmltszlxurtjnjjsvioh
|
||||||
|
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>
|
</style>
|
||||||
|
|
|
@ -1,5 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<a class="mk-media-video"
|
<div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="video.isSensitive && hide" @click="hide = false">
|
||||||
|
<div>
|
||||||
|
<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
|
||||||
|
<span>%i18n:@click-to-show%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else
|
||||||
:href="video.url"
|
:href="video.url"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
:style="imageStyle"
|
:style="imageStyle"
|
||||||
|
@ -11,7 +17,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: ['video'],
|
props: {
|
||||||
|
video: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
hide: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
imageStyle(): any {
|
imageStyle(): any {
|
||||||
return {
|
return {
|
||||||
|
@ -22,7 +37,7 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
.mk-media-video
|
.kkjnbbplepmiyuadieoenjgutgcmtsvu
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
justify-content center
|
||||||
align-items center
|
align-items center
|
||||||
|
@ -33,4 +48,20 @@ export default Vue.extend({
|
||||||
background-size cover
|
background-size cover
|
||||||
width 100%
|
width 100%
|
||||||
height 100%
|
height 100%
|
||||||
|
|
||||||
|
.icozogqfvdetwohsdglrbswgrejoxbdj
|
||||||
|
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>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue