Refactoring

src/client/app/common/views/components/media-image.vue

@@ -5,16 +5,21 @@
 		<span>{{ $t('click-to-show') }}</span>
 	</div>
 </div>
-<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else :href="image.url" target="_blank" :style="style" :title="image.name" @click.prevent="onClick"></a>
+<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else
+	:href="image.url"
+	:style="style"
+	:title="image.name"
+	@click.prevent="onClick"
+></a>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import ImageViewer from '../../../common/views/components/image-viewer.vue';
+import ImageViewer from './image-viewer.vue';
 
 export default Vue.extend({
-	i18n: i18n('mobile/views/components/media-image.vue'),
+	i18n: i18n('common/views/components/media-image.vue'),
 	props: {
 		image: {
 			type: Object,
@@ -58,6 +63,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .gqnyydlzavusgskkfvwvjiattxdzsqlf
 	display block
+	cursor zoom-in
 	overflow hidden
 	width 100%
 	height 100%

src/client/app/common/views/components/media-list.vue

@@ -7,7 +7,7 @@
 		<div :data-count="mediaList.filter(media => previewable(media)).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"/>
+				<x-image :image="media" :key="media.id" v-else-if="media.type.startsWith('image')" :raw="raw"/>
 			</template>
 		</div>
 	</div>
@@ -17,10 +17,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import XBanner from './media-banner.vue';
+import XImage from './media-image.vue';
 
 export default Vue.extend({
 	components: {
-		XBanner
+		XBanner,
+		XImage
 	},
 	props: {
 		mediaList: {

src/client/app/desktop/views/components/index.ts

@@ -9,7 +9,6 @@ import subNoteContent from './sub-note-content.vue';
 import window from './window.vue';
 import noteFormWindow from './post-form-window.vue';
 import renoteFormWindow from './renote-form-window.vue';
-import mediaImage from './media-image.vue';
 import mediaVideo from './media-video.vue';
 import notifications from './notifications.vue';
 import noteForm from './post-form.vue';
@@ -32,7 +31,6 @@ Vue.component('mk-sub-note-content', subNoteContent);
 Vue.component('mk-window', window);
 Vue.component('mk-post-form-window', noteFormWindow);
 Vue.component('mk-renote-form-window', renoteFormWindow);
-Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', noteForm);

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

@@ -1,81 +0,0 @@
-<template>
-<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="image.isSensitive && hide && !$store.state.device.alwaysShowNsfw" @click="hide = false">
-	<div>
-		<b><fa icon="exclamation-triangle"/> {{ $t('sensitive') }}</b>
-		<span>{{ $t('click-to-show') }}</span>
-	</div>
-</div>
-<a class="lcjomzwbohoelkxsnuqjiaccdbdfiazy" v-else
-	:href="image.url"
-	@click.prevent="onClick"
-	:style="style"
-	:title="image.name"
-></a>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-import ImageViewer from '../../../common/views/components/image-viewer.vue';
-
-export default Vue.extend({
-	i18n: i18n('desktop/views/components/media-image.vue'),
-	props: {
-		image: {
-			type: Object,
-			required: true
-		},
-		raw: {
-			default: false
-		}
-	},
-	data() {
-		return {
-			hide: true
-		};
-	},
-	computed: {
-		style(): any {
-			return {
-				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.thumbnailUrl})`
-			};
-		}
-	},
-	methods: {
-		onClick() {
-			this.$root.new(ImageViewer, {
-				image: this.image
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.lcjomzwbohoelkxsnuqjiaccdbdfiazy
-	display block
-	cursor zoom-in
-	overflow hidden
-	width 100%
-	height 100%
-	background-position center
-	background-size contain
-	background-repeat no-repeat
-
-.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>

src/client/app/mobile/views/components/index.ts

@@ -3,7 +3,6 @@ import Vue from 'vue';
 import ui from './ui.vue';
 import note from './note.vue';
 import notes from './notes.vue';
-import mediaImage from './media-image.vue';
 import mediaVideo from './media-video.vue';
 import notePreview from './note-preview.vue';
 import subNoteContent from './sub-note-content.vue';
@@ -24,7 +23,6 @@ import postForm from './post-form.vue';
 Vue.component('mk-ui', ui);
 Vue.component('mk-note', note);
 Vue.component('mk-notes', notes);
-Vue.component('mk-media-image', mediaImage);
 Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-note-preview', notePreview);
 Vue.component('mk-sub-note-content', subNoteContent);