From f7b7a6a9b467d88e1909f94fa739bbb6d83cf8b0 Mon Sep 17 00:00:00 2001
From: Yukai Huang <yukaihuangtw@gmail.com>
Date: Tue, 16 May 2023 22:02:52 +0800
Subject: [PATCH] feat: implement ImgurFallbackImage component

---
 .env.example                          |  1 +
 src/components/FactoryDetailPage.vue  |  6 ++-
 src/components/ImgurFallbackImage.vue | 58 +++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ImgurFallbackImage.vue

diff --git a/.env.example b/.env.example
index 3edc37b..b179561 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
 VUE_APP_BASE_URL=https://staging.disfactory.tw/api
+VUE_APP_IMGUR_FALLBACK_URL=https://api.disfactory.tw/imgur
diff --git a/src/components/FactoryDetailPage.vue b/src/components/FactoryDetailPage.vue
index cc0ffc0..4835ba4 100644
--- a/src/components/FactoryDetailPage.vue
+++ b/src/components/FactoryDetailPage.vue
@@ -56,7 +56,7 @@
             </div>
           </v-slide-item>
           <v-slide-item v-for="(image, index) in images" class="mr-4" :key="image.id" :class="{ 'ml-4': index === 0 }" @click.native="setLightboxIndex(index)">
-            <img :src="image.url" class="factory-slide-image" />
+            <ImgurFallbackImage :src="image.url" className="factory-slide-image" />
           </v-slide-item>
         </v-slide-group>
 
@@ -145,9 +145,13 @@ import { getFactoryReportRecords } from '@/api'
 
 import { useAppState } from '../lib/appState'
 import { FactoryImage, getDisplayStatusText, ReportRecord } from '../types'
+import ImgurFallbackImage from './ImgurFallbackImage.vue'
 
 export default createComponent({
   name: 'FactoryDetailPage',
+  components: {
+    ImgurFallbackImage
+  },
   setup () {
     const [appState, { pageTransition, expandFactoryDetail, collapseFactoryDetail, toggleFactoryDetail }] = useAppState()
 
diff --git a/src/components/ImgurFallbackImage.vue b/src/components/ImgurFallbackImage.vue
new file mode 100644
index 0000000..0897247
--- /dev/null
+++ b/src/components/ImgurFallbackImage.vue
@@ -0,0 +1,58 @@
+<template>
+  <img :src="imageUrl" :alt="alt" :class="className" @error="onError" />
+</template>
+
+<script lang="ts">
+import { createComponent, computed, ref, onUpdated, watch } from '@vue/composition-api'
+
+const IMGUR_REGEX = /i\.imgur\.com\/([a-zA-Z0-9]+)\.([a-zA-Z0-9]+)(\?.*)?$/
+
+const imgurFallbackBaseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_IMGUR_FALLBACK_URL : '/server/imgur'
+
+export default createComponent({
+  name: 'ImgurFallbackImage',
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  setup (props, context) {
+    const matches = IMGUR_REGEX.exec(props.src)
+
+    const imgurInfo = computed(() => {
+      return matches ? {
+        id: matches[1],
+        ext: matches[2]
+      } : null
+    })
+
+    const fallbackUrl = computed(() => {
+      if (imgurInfo.value) {
+        return `${imgurFallbackBaseUrl}/${imgurInfo.value.id}.${imgurInfo.value.ext}`
+      } else {
+        return props.src
+      }
+    })
+
+    const imageUrl = ref(fallbackUrl.value)
+
+    const onError = () => {
+      imageUrl.value = props.src
+    }
+
+    return {
+      imageUrl,
+      onError
+    }
+  }
+})
+</script>