update komponen

2025-10-17 15:12:20 +07:00
parent f3a5e8935e
commit fa2d439ea4
15 changed files with 746 additions and 306 deletions
@@ -83,11 +83,7 @@
                  @error="onVideoError"
                ></iframe>

-                <div
-                  v-else
-                  class="video-thumbnail"
-                  @click="playVideo(index)"
-                >
+                <div v-else class="video-thumbnail" @click="playVideo(index)">
                  <img
                    :src="`https://img.youtube.com/vi/${item.videoId}/maxresdefault.jpg`"
                    alt="Video thumbnail"
@@ -112,7 +108,7 @@
        </div>
      </div>

-      <div class="cta-section-contact">
+      <!-- <div class="cta-section-contact">
        <v-btn
          @click="startDebugPayment"
          color="#808080"
@@ -121,7 +117,7 @@
        >
          <span class="button-text">SIMULASI PEMBAYARAN</span>
        </v-btn>
-      </div>
+      </div> -->
    </div>

    <div class="orange-background-contact">
@@ -175,7 +171,7 @@ const carouselItems = ref([
    isImage: false,
  },
  {
-    src: "https://scontent.fcgk22-2.fna.fbcdn.net/v/t39.30808-6/481267190_3904366386504845_1409667601717073976_n.jpg?stp=dst-jpg_s960x960_tt6&_nc_cat=110&ccb=1-7&_nc_sid=cc71e4&_nc_ohc=w6wAp5Df1lAQ7kNvwHL8Snq&_nc_oc=Adnq0LOV2vro6n7DGZu9GfUYGx3iBXzZ7LlUk7oWYi_lZ_OYDD7LVYe5zogYKxEEJdU&_nc_zt=23&_nc_ht=scontent.fcgk22-2.fna&_nc_gid=Dir3R7zaEbm2b0HPtrmGiQ&oh=00_AfaERSA1GyvNKkfajBF5yIv_JrijpizdmUqgy9528oAszQ&oe=68D12398",
+    src: "https://rsusaifulanwar.jatimprov.go.id/wp-content/uploads/2023/08/siam-2-scaled.jpg",
    alt: "Medical Services",
    title: "Pelayanan Terbaik",
    description: "Tim medis profesional siap melayani 24 jam",
@@ -184,31 +180,30 @@ const carouselItems = ref([
 ]);

 const getYouTubeEmbedUrl = (videoId) => {
-  const baseUrl = 'https://www.youtube.com/embed/';
+  const baseUrl = "https://www.youtube.com/embed/";
  const params = new URLSearchParams({
-    autoplay: '1',
-    mute: '0',
-    controls: '1',
-    modestbranding: '1',
-    rel: '0',
-    showinfo: '0',
-    fs: '1',
-    cc_load_policy: '0',
-    iv_load_policy: '3',
-    autohide: '0'
+    autoplay: "1",
+    mute: "0",
+    controls: "1",
+    modestbranding: "1",
+    rel: "0",
+    showinfo: "0",
+    fs: "1",
+    cc_load_policy: "0",
+    iv_load_policy: "3",
+    autohide: "0",
  });
  return `${baseUrl}${videoId}?${params.toString()}`;
 };

 const onVideoLoad = () => {
-  console.log('Video iframe loaded successfully');
+  console.log("Video iframe loaded successfully");
 };

 const onVideoError = (error) => {
-  console.error('Video iframe error:', error);
+  console.error("Video iframe error:", error);
 };

-// Fungsi untuk memulai carousel otomatis
 const startCarousel = () => {
  if (carouselInterval.value) {
    clearInterval(carouselInterval.value);
@@ -216,10 +211,9 @@ const startCarousel = () => {
  carouselInterval.value = setInterval(() => {
    const nextSlide = (currentSlide.value + 1) % carouselItems.value.length;
    currentSlide.value = nextSlide;
-  }, 10000); // Ganti gambar setiap 10 detik
+  }, 10000);
 };

-// Fungsi untuk menghentikan carousel otomatis
 const stopCarousel = () => {
  if (carouselInterval.value) {
    clearInterval(carouselInterval.value);
@@ -227,40 +221,33 @@ const stopCarousel = () => {
  }
 };

-// Fungsi untuk memutar video (menghentikan carousel)
 const playVideo = (index) => {
  currentSlide.value = index;
-  stopCarousel(); // Hentikan carousel saat video diputar
+  stopCarousel();
 };

-// Tonton perubahan slide
 watch(currentSlide, (newSlide) => {
  const currentItem = carouselItems.value[newSlide];
  if (currentItem && !currentItem.isImage) {
-    // Jika slide adalah video, hentikan carousel
-    console.log('Video detected, stopping carousel');
+    console.log("Video detected, stopping carousel");
    stopCarousel();
  } else {
-    // Jika slide adalah gambar, mulai kembali carousel
-    console.log('Image detected, starting carousel');
+    console.log("Image detected, starting carousel");
    startCarousel();
  }
 });

 onMounted(() => {
-  // Mulai carousel saat komponen dimuat
  startCarousel();
 });

 onUnmounted(() => {
-  // Hentikan carousel saat komponen dihancurkan
  stopCarousel();
 });

-// Fungsi untuk simulasi pembayaran debug
 const startDebugPayment = () => {
  console.log("Simulasi Pembayaran (Debug) dimulai.");
-  // Mengisi data dummy untuk simulasi
+
  const dummyData = {
    posdevice: "GRANDPAV",
    invoice_number: "000000000000012000615",
@@ -268,14 +255,15 @@ const startDebugPayment = () => {
    created_at: "2024-11-21T11:52:25.805965+07:00",
    display_name: "KASIH",
    id: "1",
-    status: "1", // Status awal untuk simulasi
+    status: "1",
    display_amount: "90",
-    qrvalue: "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
+    qrvalue:
+      "000201010212262710019ID.CO.BANKJATIM.WWW01189360011400001347728215ID02400134529083038ES1459015ID.OR.GPMQR.MM0215ID202431094996960309ES2049939530536054029605802D5923-RSUD SAIFUL ANWAR MLG-100000MALANG0556111622901250000000000000000000000000000012800061563040C9B",
    ip: "10.10.150.106",
    display_nobill: "24072579/10000675",
  };
  paymentStore.updatePayment({ data: [dummyData] });
-  paymentStore.currentStep = 2; // Pindah ke QRISPayment
+  paymentStore.currentStep = 2;
 };
 </script>

@@ -388,10 +376,13 @@ const startDebugPayment = () => {
  width: 100%;
  height: 100%;
  position: relative;
-  background: #000;
+
+  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
+  /* PASTIKAN INI ADA untuk membatasi iframe */
+  overflow: hidden;
 }

 .youtube-iframe {
@@ -399,8 +390,26 @@ const startDebugPayment = () => {
  height: 100%;
  border: none;
  border-radius: 15px;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  min-width: 100%;
+  min-height: 100%;
+
+  aspect-ratio: 16 / 9;
 }

+.thumbnail-img {
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+  border-radius: 15px;
+}
 .video-thumbnail {
  width: 100%;
  height: 100%;
@@ -558,4 +567,4 @@ const startDebugPayment = () => {
 :deep(.v-carousel__controls--bottom) {
  bottom: 40px !important;
 }
-</style>
+</style>