81 force loading with https for image resources (#82)

* force image load with `https` * fix logic `urlImage` * fix typo Co-authored-by: Tachibana Shin <[email protected]> Co-authored-by: Tachibana Shin <[email protected]>
anime-vsub · Jan 2, 2023 · dbd84d9 · dbd84d9
1 parent 8f3669c
commit dbd84d9
Show file tree

Hide file tree

Showing 15 changed files with 65 additions and 25 deletions.
diff --git a/src/components/Card.vue b/src/components/Card.vue
@@ -8,7 +8,7 @@
     >
       <q-img
         no-spinner
-        :src="data.image"
+        :src="forceHttp2(data.image)"
         :ratio="280 / 400"
         :initial-ratio="744 / 530"
         class="!rounded-[4px]"
@@ -120,6 +120,7 @@ import BottomBlur from "components/BottomBlur.vue"
 import { debounce, QCard, QCardSection, QImg, QMenu } from "quasar"
 import type { TPost } from "src/apis/parser/__helpers__/getInfoTPost"
 import dayjs from "src/logic/dayjs"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { formatView } from "src/logic/formatView"
 import ranks from "src/logic/ranks"
 import { ref, watch } from "vue"

diff --git a/src/components/CardVertical.vue b/src/components/CardVertical.vue
@@ -3,7 +3,7 @@
     <div>
       <q-img
         no-spinner
-        :src="data.image"
+        :src="forceHttp2(data.image)"
         :ratio="280 / 400"
         width="110px"
         class="rounded-lg"
@@ -63,6 +63,7 @@
 
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { useI18n } from "vue-i18n"
 
 import Star from "./Star.vue"

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -110,7 +110,7 @@
                   <div>
                     <q-img
                       :ratio="267 / 400"
-                      :src="item.image"
+                      :src="forceHttp2(item.image)"
                       width="90px"
                       class="rounded"
                     />
@@ -408,7 +408,7 @@
                       <div class="w-[149px]">
                         <q-img
                           no-spinner
-                          :src="item.poster"
+                          :src="forceHttp2(item.poster)"
                           :ratio="1920 / 1080"
                           class="!rounded-[4px]"
                         >
@@ -553,7 +553,7 @@
                         <div class="flex flex-nowrap">
                           <q-img
                             no-spinner
-                            :src="item.image"
+                            :src="forceHttp2(item.image!)"
                             width="128px"
                             :ratio="120 / 81"
                             class="rounded-sm"
@@ -592,7 +592,7 @@
           <q-avatar v-if="authStore.isLogged" size="35px">
             <img
               v-if="authStore.user_data?.avatar"
-              :src="authStore.user_data.avatar"
+              :src="forceHttp2(authStore.user_data.avatar)"
             />
             <Icon
               v-else
@@ -620,7 +620,7 @@
                       <q-avatar size="45px">
                         <img
                           v-if="authStore.user_data?.avatar"
-                          :src="authStore.user_data.avatar"
+                          :src="forceHttp2(authStore.user_data.avatar)"
                         />
                         <Icon
                           v-else
@@ -1084,6 +1084,7 @@ import { TuPhim } from "src/apis/runs/tu-phim"
 import { checkContentEditable } from "src/helpers/checkContentEditable"
 import { languages } from "src/i18n"
 import dayjs from "src/logic/dayjs"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { parseChapName } from "src/logic/parseChapName"
 import { parseMdBasic } from "src/logic/parseMdBasic"
 import { parseTime } from "src/logic/parseTime"

diff --git a/src/logic/forceHttp2.spec.ts b/src/logic/forceHttp2.spec.ts
@@ -0,0 +1,14 @@
+import { forceHttp2 } from "./forceHttp2"
+
+describe("forceHttp2", () => {
+  test("should use http 1", () => {
+    expect(forceHttp2("http://example.com/image.png")).toEqual(
+      "https://example.com/image.png"
+    )
+  })
+  test("should use http 2", () => {
+    expect(forceHttp2("https://example.com/image.png")).toEqual(
+      "https://example.com/image.png"
+    )
+  })
+})
diff --git a/src/logic/forceHttp2.ts b/src/logic/forceHttp2.ts
@@ -0,0 +1,5 @@
+export function forceHttp2(url: string): string {
+  if (url.startsWith("http://")) return "https" + url.slice(4)
+
+  return url
+}
diff --git a/src/logic/urlImage.spec.ts b/src/logic/urlImage.spec.ts
@@ -35,16 +35,16 @@ describe("urlImage", () => {
   describe("add host", () => {
     test("should url is removed host", () => {
       expect(addHostUrlImage("$@/image.png")).toEqual(
-        `${location.protocol}//${HOST_CURL}/image.png`
+        `https://${HOST_CURL}/image.png`
       )
       expect(addHostUrlImage("$@:433/image.png")).toEqual(
-        `${location.protocol}//${HOST_CURL}:433/image.png`
+        `https://${HOST_CURL}:433/image.png`
       )
       expect(addHostUrlImage("cdn.$@/image.png")).toEqual(
-        `${location.protocol}//cdn.${HOST_CURL}/image.png`
+        `https://cdn.${HOST_CURL}/image.png`
       )
       expect(addHostUrlImage("cdn.$@:433/image.png")).toEqual(
-        `${location.protocol}//cdn.${HOST_CURL}:433/image.png`
+        `https://cdn.${HOST_CURL}:433/image.png`
       )
     })
     test("should url is not remove host", () => {

diff --git a/src/logic/urlImage.ts b/src/logic/urlImage.ts
@@ -11,6 +11,6 @@ export function removeHostUrlImage(url: string): string {
 export function addHostUrlImage(url: string): string {
   return url.replace(
     /^([^/]+.)?\$@(:\d+)?(?=\/)/,
-    location.protocol + "//$1" + HOST_CURL + "$2"
+    "https:" + "//$1" + HOST_CURL + "$2"
   )
 }
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -88,7 +88,7 @@
         <q-img
           no-spinner
           :ratio="aspectRatio"
-          :src="item.image!"
+          :src="forceHttp2(item.image!)"
           class="poster"
         />
         <div class="drop-left"></div>
@@ -353,12 +353,12 @@ import SkeletonGridCard from "components/SkeletonGridCard.vue"
 import { Index } from "src/apis/runs/index"
 import appIcon from "src/assets/app_icon.svg"
 import dayjs from "src/logic/dayjs"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { Autoplay, Navigation } from "swiper"
 import { Swiper, SwiperSlide } from "swiper/vue"
 import { computed } from "vue"
 import { useI18n } from "vue-i18n"
 import { useRouter } from "vue-router"
-
 // Import Swiper styles
 import "swiper/css"
 import "swiper/css/pagination"

diff --git a/src/pages/news.vue b/src/pages/news.vue
@@ -108,7 +108,7 @@
       @click="open(item.href)"
     >
       <div>
-        <q-img no-spinner :src="item.image" class="image" />
+        <q-img no-spinner :src="forceHttp2(item.image)" class="image" />
       </div>
 
       <div class="content">
@@ -146,6 +146,7 @@ import { Icon } from "@iconify/vue"
 import { QInfiniteScroll } from "quasar"
 import { NewsAnime } from "src/apis/runs/news-anime"
 import dayjs from "src/logic/dayjs"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { ref, shallowReactive } from "vue"
 import { useI18n } from "vue-i18n"
 

diff --git a/src/pages/notification.vue b/src/pages/notification.vue
@@ -47,7 +47,7 @@
               <q-item-section side>
                 <q-img
                   no-spinner
-                  :src="item.image"
+                  :src="forceHttp2(item.image!)"
                   width="120px"
                   :ratio="120 / 81"
                   class="rounded-sm"
@@ -102,11 +102,13 @@
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import ScreenLoading from "src/components/ScreenLoading.vue"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { useAuthStore } from "stores/auth"
 import { useNotificationStore } from "stores/notification"
 import { useI18n } from "vue-i18n"
 import { useRouter } from "vue-router"
 
+
 const { t } = useI18n()
 const router = useRouter()
 const notificationStore = useNotificationStore()

diff --git a/src/pages/phim/_season.vue b/src/pages/phim/_season.vue
@@ -26,7 +26,7 @@
         :next-chap="nextChap"
         :prev-chap="prevChap"
         :name="data.name"
-        :poster="currentDataSeason?.poster"
+        :poster="currentDataSeason?.poster ? forceHttp2(currentDataSeason.poster) : undefined"
         :seasons="seasons"
         :_cache-data-seasons="_cacheDataSeasons"
         :fetch-season="fetchSeason"
@@ -317,7 +317,7 @@
             v-if="data?.image"
             width="152px"
             class="rounded-xl"
-            :src="data.image"
+            :src="forceHttp2(data.image)"
           />
         </div>
         <div class="flex-1 ml-4">
@@ -409,6 +409,7 @@ import { PhimIdChap } from "src/apis/runs/phim/[id]/[chap]"
 // import BottomSheet from "src/components/BottomSheet.vue"
 import type { Source } from "src/components/sources"
 import { C_URL, labelToQuality } from "src/constants"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { formatView } from "src/logic/formatView"
 import { fs } from "src/logic/fs"
 import { getRealSeasonId } from "src/logic/getRealSeasonId"

diff --git a/src/pages/playlist/[playlist].vue b/src/pages/playlist/[playlist].vue
@@ -12,7 +12,7 @@
               <img
                 v-if="metaPlaylist.poster"
                 class="h-auto w-full"
-                :src="metaPlaylist.poster"
+                :src="forceHttp2(metaPlaylist.poster)"
               />
             </div>
             <div
@@ -32,7 +32,7 @@
             <q-img
               v-if="metaPlaylist.poster"
               class="rounded-xl"
-              :src="metaPlaylist.poster"
+              :src="forceHttp2(metaPlaylist.poster)"
             />
             <div>
               <div
@@ -252,7 +252,7 @@
           <div>
             <q-img
               no-spinner
-              :src="item.poster"
+              :src="forceHttp2(item.poster)"
               :ratio="1920 / 1080"
               class="!rounded-xl w-[150px]"
             />
@@ -356,13 +356,15 @@ import { useHead } from "@vueuse/head"
 import AddToPlaylist from "components/AddToPlaylist.vue"
 import { QInfiniteScroll, useQuasar } from "quasar"
 import dayjs from "src/logic/dayjs"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { parseChapName } from "src/logic/parseChapName"
 import { usePlaylistStore } from "stores/playlist"
 import { computed, ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import { useRequest } from "vue-request"
 import { useRoute, useRouter } from "vue-router"
 
+
 const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()

diff --git a/src/pages/tai-khoan/edit-profile.vue b/src/pages/tai-khoan/edit-profile.vue
@@ -6,7 +6,10 @@
   <div v-if="authStore.isLogged" class="pt-[32px]">
     <div class="py-15 text-center pt-[47px]">
       <q-avatar size="80px">
-        <img v-if="authStore.user?.avatar" :src="authStore.user.avatar" />
+        <img
+          v-if="authStore.user?.avatar"
+          :src="forceHttp2(authStore.user.avatar)"
+        />
         <Icon
           v-else
           icon="fluent:person-circle-20-filled"
@@ -135,11 +138,13 @@
 import { Icon } from "@iconify/vue"
 import { useHead } from "@vueuse/head"
 import { useQuasar } from "quasar"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { useAuthStore } from "stores/auth"
 import { computed, ref } from "vue"
 import { useI18n } from "vue-i18n"
 import { useRouter } from "vue-router"
 
+
 const { t } = useI18n()
 useHead(
   computed(() => {

diff --git a/src/pages/tai-khoan/history.vue b/src/pages/tai-khoan/history.vue
@@ -36,7 +36,7 @@
           >
             <q-img
               no-spinner
-              :src="item.poster"
+              :src="forceHttp2(item.poster)"
               :ratio="1920 / 1080"
               class="!rounded-[4px] w-[min(210px,40%)]"
             >
@@ -98,13 +98,15 @@ import ScreenError from "components/ScreenError.vue"
 import ScreenLoading from "components/ScreenLoading.vue"
 import ScreenNotFound from "components/ScreenNotFound.vue"
 import { QInfiniteScroll } from "quasar"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { parseChapName } from "src/logic/parseChapName"
 import { parseTime } from "src/logic/parseTime"
 import { useHistoryStore } from "stores/history"
 import { computed } from "vue"
 import { useI18n } from "vue-i18n"
 import { useRequest } from "vue-request"
 
+
 const { t } = useI18n()
 const historyStore = useHistoryStore()
 

diff --git a/src/pages/tai-khoan/index.vue b/src/pages/tai-khoan/index.vue
@@ -6,7 +6,10 @@
     >
       <q-item-section avatar>
         <q-avatar size="55px">
-          <img v-if="authStore.user?.avatar" :src="authStore.user.avatar" />
+          <img
+            v-if="authStore.user?.avatar"
+            :src="forceHttp2(authStore.user.avatar)"
+          />
           <Icon
             v-else
             icon="fluent:person-circle-20-filled"
@@ -106,7 +109,7 @@
         >
           <q-img
             no-spinner
-            :src="item.poster"
+            :src="forceHttp2(item.poster)"
             :ratio="1920 / 1080"
             class="!rounded-[4px]"
           >
@@ -330,6 +333,7 @@ import { compressToBase64 } from "lz-string"
 import QRCode from "qrcode"
 import { useQuasar } from "quasar"
 import { TuPhim } from "src/apis/runs/tu-phim"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { parseChapName } from "src/logic/parseChapName"
 import { parseTime } from "src/logic/parseTime"
 import { useAuthStore } from "stores/auth"
@@ -340,6 +344,7 @@ import { useRequest } from "vue-request"
 import { useRouter } from "vue-router"
 // import QrScanner from "qr-scanner"
 
+
 const { t } = useI18n()
 const showDialogLogin = ref(false)
 const showDialogQR = ref(false)