force load image with https

src/components/BrtPlayer.vue

@@ -654,7 +654,7 @@ import { NavigationBar } from "@hugotomazi/capacitor-navigation-bar"
 import { Icon } from "@iconify/vue"
 import ArtDialog from "components/ArtDialog.vue"
 import ChapsGridQBtn from "components/ChapsGridQBtn.vue"
-import type { PlaylistLoaderConstructor } from "hls.js";
+import type { PlaylistLoaderConstructor } from "hls.js"
 import Hls from "hls.js"
 import {
   QBtn,
@@ -826,10 +826,7 @@ watch(
           await historyStore.getProgressChap(currentSeason, currentChap)
         )?.cur
 
-        if (
-          cur &&
-          !holdedBD.value
-        ) {
+        if (cur && !holdedBD.value) {
           setArtCurrentTime(cur)
           addNotice(t("da-khoi-phuc-phien-xem-truoc-_time", [parseTime(cur)]))
         } else {

src/components/Card.vue

@@ -3,7 +3,7 @@
     <q-card flat dense class="bg-transparent">
       <q-img
         no-spinner
-        :src="data.image"
+        :src="forceHttp2(data.image)"
         :ratio="280 / 400"
         :initial-ratio="744 / 530"
         class="!rounded-[4px]"
@@ -46,6 +46,7 @@
 <script lang="ts" setup>
 import BottomBlur from "components/BottomBlur.vue"
 import type { TPost } from "src/apis/parser/__helpers__/getInfoTPost"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import ranks from "src/logic/ranks"
 
 import Quality from "./Quality.vue"

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"
@@ -47,6 +47,7 @@
 
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
+import { forceHttp2 } from "src/logic/forceHttp2"
 
 defineProps<{
   data: {

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"
+    )
+  })
+})

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
+}

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", () => {

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"
   )
 }

src/pages/index.vue

@@ -112,7 +112,7 @@
         <q-img
           no-spinner
           :ratio="aspectRatio"
-          :src="item.image!"
+          :src="forceHttp2(item.image!)"
           class="poster"
         />
         <div class="drop-left"></div>
@@ -330,6 +330,7 @@ import SkeletonCard from "components/SkeletonCard.vue"
 import SkeletonGridCard from "components/SkeletonGridCard.vue"
 import { useAliveScrollBehavior } from "src/composibles/useAliveScrollBehavior"
 import dayjs from "src/logic/dayjs"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { Autoplay } from "swiper"
 import { Swiper, SwiperSlide } from "swiper/vue"
 import { useRouter } from "vue-router"

src/pages/news.vue

@@ -109,7 +109,7 @@
         @click="open(item.href, item.title)"
       >
         <div>
-          <q-img no-spinner :src="item.image" class="image" />
+          <q-img no-spinner :src="forceHttp2(item.image)" class="image" />
         </div>
 
         <div class="content">
@@ -122,7 +122,7 @@
           <q-card-section class="pt-0">
             <span class="text-caption text-grey">
               <img
-                :src="item.by.icon"
+                :src="forceHttp2(item.by.icon)"
                 width="18"
                 height="18"
                 class="inline-block mr-[5px]"
@@ -150,6 +150,7 @@ import { QInfiniteScroll } from "quasar"
 import { NewsAnime } from "src/apis/runs/news-anime"
 import { useAliveScrollBehavior } from "src/composibles/useAliveScrollBehavior"
 import dayjs from "src/logic/dayjs"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { ref, shallowReactive } from "vue"
 
 // Import Swiper Vue.js components

src/pages/notification.vue

@@ -49,7 +49,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,6 +102,7 @@
 import { Icon } from "@iconify/vue"
 import ScreenLoading from "src/components/ScreenLoading.vue"
 import { useAliveScrollBehavior } from "src/composibles/useAliveScrollBehavior"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { useAuthStore } from "stores/auth"
 import { useNotificationStore } from "stores/notification"
 import { useRouter } from "vue-router"

src/pages/phim/_season.vue

@@ -398,7 +398,7 @@
           <div class="flex flex-nowrap">
             <q-img
               no-spinner
-              :src="currentDataSeason?.image ?? data.image"
+              :src="forceHttp2(currentDataSeason?.image ?? data.image)"
               :ratio="280 / 400"
               width="110px"
               class="rounded-lg"
@@ -502,6 +502,7 @@ import { PhimIdChap } from "src/apis/runs/phim/[id]/[chap]"
 import type { Source } from "src/components/sources"
 import { C_URL, labelToQuality } from "src/constants"
 import { scrollXIntoView } from "src/helpers/scrollIntoView"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { formatView } from "src/logic/formatView"
 import { getRealSeasonId } from "src/logic/getRealSeasonId"
 import { post } from "src/logic/http"

src/pages/tai-khoan/edit-profile.vue

@@ -15,7 +15,10 @@
   <template v-if="authStore.isLogged">
     <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"
@@ -149,6 +152,7 @@
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import { useQuasar } from "quasar"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { useAuthStore } from "stores/auth"
 import { ref } from "vue"
 import { useRouter } from "vue-router"

src/pages/tai-khoan/history.vue

@@ -43,7 +43,7 @@
           >
             <q-img
               no-spinner
-              :src="item.poster"
+              :src="forceHttp2(item.poster)"
               :ratio="1920 / 1080"
               class="!rounded-[4px] w-[min(210px,40%)]"
             >
@@ -101,6 +101,7 @@ import ScreenLoading from "components/ScreenLoading.vue"
 import ScreenNotFound from "components/ScreenNotFound.vue"
 import { QInfiniteScroll } from "quasar"
 import { History } from "src/apis/runs/history"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { parseTime } from "src/logic/parseTime"
 import { ref } from "vue"
 import { useRequest } from "vue-request"

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"
@@ -100,7 +103,7 @@
         >
           <q-img
             no-spinner
-            :src="item.poster"
+            :src="forceHttp2(item.poster)"
             :ratio="1920 / 1080"
             class="!rounded-[4px]"
           >
@@ -323,6 +326,7 @@ import QRCode from "qrcode"
 import { useQuasar } from "quasar"
 import { History } from "src/apis/runs/history"
 import { TuPhim } from "src/apis/runs/tu-phim"
+import { forceHttp2 } from "src/logic/forceHttp2"
 import { parseTime } from "src/logic/parseTime"
 import { useAuthStore } from "stores/auth"
 import { ref, watch, watchEffect } from "vue"

src/pages/tim-kiem/[keyword]-.vue

@@ -272,7 +272,6 @@ function onEnter(event: Event) {
 
   keyword.value = query.value
 
-
   FirebaseAnalytics.logEvent({
     name: "search",
     params: {

vitest.config.ts

@@ -3,6 +3,6 @@ import { defineConfig } from "vitest/config"
 export default defineConfig({
   test: {
     environment: "jsdom",
-    globals: true
+    globals: true,
   },
 })