動画もNSFW

locales/ja.yml

@@ -383,6 +383,10 @@ desktop/views/components/media-image.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+desktop/views/components/media-video.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+
 desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
@@ -863,6 +867,10 @@ mobile/views/components/media-image.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+mobile/views/components/media-video.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+
 mobile/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"

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

@@ -1,12 +1,19 @@
 <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"
 		:title="video.name"
 		controls
 		@dblclick.prevent="onClick"
 		ref="video"
 		v-if="inlinePlayable" />
-	<a class="mk-media-video-thumbnail"
+	<a class="thumbnail"
 		:href="video.url"
 		:style="imageStyle"
 		@click.prevent="onClick"
@@ -14,6 +21,7 @@
 		v-else>
 		%fa:R play-circle%
 	</a>
+</div>
 </template>
 
 <script lang="ts">
@@ -21,7 +29,19 @@ import Vue from 'vue';
 import MkMediaVideoDialog from './media-video-dialog.vue';
 
 export default Vue.extend({
-	props: ['video', 'inlinePlayable'],
+	props: {
+		video: {
+			type: Object,
+			required: true
+		},
+		inlinePlayable: {
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	},
 	computed: {
 		imageStyle(): any {
 			return {
@@ -47,22 +67,39 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-video
+.vwxdhznewyashiknzolsoihtlpicqepe
-	display block
+	.video
-	width 100%
+		display block
-	height 100%
+		width 100%
-	border-radius 4px
+		height 100%
+		border-radius 4px
 
-.mk-media-video-thumbnail
+	.thumbnail
+		display flex
+		justify-content center
+		align-items center
+		font-size 3.5em
+
+		cursor zoom-in
+		overflow hidden
+		background-position center
+		background-size cover
+		width 100%
+		height 100%
+
+.uofhebxjdgksfmltszlxurtjnjjsvioh
 	display flex
 	justify-content center
 	align-items center
-	font-size 3.5em
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> b
+			display block
 
-	cursor zoom-in
-	overflow hidden
-	background-position center
-	background-size cover
-	width 100%
-	height 100%
 </style>

src/client/app/mobile/views/components/media-video.vue

@@ -1,17 +1,32 @@
 <template>
-	<a class="mk-media-video"
+<div class="icozogqfvdetwohsdglrbswgrejoxbdj" v-if="video.isSensitive && hide" @click="hide = false">
-		:href="video.url"
+	<div>
-		target="_blank"
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
-		:style="imageStyle"
+		<span>%i18n:@click-to-show%</span>
-		:title="video.name">
+	</div>
-		%fa:R play-circle%
+</div>
-	</a>
+<a class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else
+	:href="video.url"
+	target="_blank"
+	:style="imageStyle"
+	:title="video.name">
+	%fa:R play-circle%
+</a>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 export default Vue.extend({
-	props: ['video'],
+	props: {
+		video: {
+			type: Object,
+			required: true
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	},
 	computed: {
 		imageStyle(): any {
 			return {
@@ -22,7 +37,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-video
+.kkjnbbplepmiyuadieoenjgutgcmtsvu
 	display flex
 	justify-content center
 	align-items center
@@ -33,4 +48,20 @@ export default Vue.extend({
 	background-size cover
 	width 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>