From 7dcea49be74784132469e027845fc68557aa8dd4 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 27 Jan 2019 13:29:53 +0900
Subject: Refactoring

---
 .../app/common/views/components/media-image.vue    | 89 ++++++++++++++++++++++
 .../app/common/views/components/media-list.vue     |  6 +-
 src/client/app/desktop/views/components/index.ts   |  2 -
 .../app/desktop/views/components/media-image.vue   | 81 --------------------
 src/client/app/mobile/views/components/index.ts    |  2 -
 .../app/mobile/views/components/media-image.vue    | 83 --------------------
 6 files changed, 93 insertions(+), 170 deletions(-)
 create mode 100644 src/client/app/common/views/components/media-image.vue
 delete mode 100644 src/client/app/desktop/views/components/media-image.vue
 delete mode 100644 src/client/app/mobile/views/components/media-image.vue

(limited to 'src/client')

diff --git a/src/client/app/common/views/components/media-image.vue b/src/client/app/common/views/components/media-image.vue
new file mode 100644
index 0000000000..01187465f1
--- /dev/null
+++ b/src/client/app/common/views/components/media-image.vue
@@ -0,0 +1,89 @@
+<template>
+<div class="qjewsnkgzzxlxtzncydssfbgjibiehcy" 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="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 './image-viewer.vue';
+
+export default Vue.extend({
+	i18n: i18n('common/views/components/media-image.vue'),
+	props: {
+		image: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		}
+	},
+	data() {
+		return {
+			hide: true
+		};
+	}
+	computed: {
+		style(): any {
+			let url = `url(${this.image.thumbnailUrl})`;
+
+			if (this.$store.state.device.loadRemoteMedia || this.$store.state.device.lightmode) {
+				url = null;
+			} else if (this.raw || this.$store.state.device.loadRawImages) {
+				url = `url(${this.image.url})`;
+			}
+
+			return {
+				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
+				'background-image': url
+			};
+		}
+	},
+	methods: {
+		onClick() {
+			this.$root.new(ImageViewer, {
+				image: this.image
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.gqnyydlzavusgskkfvwvjiattxdzsqlf
+	display block
+	cursor zoom-in
+	overflow hidden
+	width 100%
+	height 100%
+	background-position center
+	background-size contain
+	background-repeat no-repeat
+
+.qjewsnkgzzxlxtzncydssfbgjibiehcy
+	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/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index d83d6f85cd..b0a14be0d4 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/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: {
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 8ea2b602db..2edc8117a8 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/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);
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
deleted file mode 100644
index 446e500939..0000000000
--- a/src/client/app/desktop/views/components/media-image.vue
+++ /dev/null
@@ -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>
diff --git a/src/client/app/mobile/views/components/index.ts b/src/client/app/mobile/views/components/index.ts
index 9a410e8278..351aaea9f6 100644
--- a/src/client/app/mobile/views/components/index.ts
+++ b/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);
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
deleted file mode 100644
index dbb275b511..0000000000
--- a/src/client/app/mobile/views/components/media-image.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-<div class="qjewsnkgzzxlxtzncydssfbgjibiehcy" 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="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else :href="image.url" target="_blank" :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';
-
-export default Vue.extend({
-	i18n: i18n('mobile/views/components/media-image.vue'),
-	props: {
-		image: {
-			type: Object,
-			required: true
-		},
-		raw: {
-			default: false
-		}
-	},
-	data() {
-		return {
-			hide: true
-		};
-	}
-	computed: {
-		style(): any {
-			let url = `url(${this.image.thumbnailUrl})`;
-
-			if (this.$store.state.device.loadRemoteMedia || this.$store.state.device.lightmode) {
-				url = null;
-			} else if (this.raw || this.$store.state.device.loadRawImages) {
-				url = `url(${this.image.url})`;
-			}
-
-			return {
-				'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
-				'background-image': url
-			};
-		}
-	},
-	methods: {
-		onClick() {
-			this.$root.new(ImageViewer, {
-				image: this.image
-			});
-		}
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.gqnyydlzavusgskkfvwvjiattxdzsqlf
-	display block
-	overflow hidden
-	width 100%
-	height 100%
-	background-position center
-	background-size contain
-	background-repeat no-repeat
-
-.qjewsnkgzzxlxtzncydssfbgjibiehcy
-	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>
-- 
cgit v1.2.3-freya