added tv page, small changes and fix bugs

2025-05-21 14:00:04 +05:00
parent 10ec9a90c7
commit 791a56ca4d
12 changed files with 327 additions and 102 deletions
@@ -155,11 +155,14 @@ export default {
    this.sortedSlides = this.slides.slice().sort((a, b) => a.sort - b.sort);

    // Передаем данные в Vuex после монтирования компонента
-    this.updateLastSlider({
-      url: this.$page.props.ziggy.location,
-      top: this.$refs.sliderRef.getBoundingClientRect().top,
-      bottom: this.$refs.sliderRef.getBoundingClientRect().bottom, // Получаем актуальное значение bottom
-    });
+    if (typeof window !== 'undefined') {
+      this.updateLastSlider({
+        url: this.$page.props.ziggy.location,
+        top: this.$refs.sliderRef.getBoundingClientRect().top,
+        bottom: this.$refs.sliderRef.getBoundingClientRect().bottom, // Получаем актуальное значение bottom
+      });
+    }
+
    this.startTimer();
  },
  beforeUnmount() {
@@ -0,0 +1,159 @@
+<template>
+  <div class="relative z-0 min-h-screen flex flex-col">
+    <div class="w-full">
+      <div class="flex w-full h-1 bg-gray-200 overflow-hidden" role="progressbar"
+           aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+        <div
+            class="flex flex-col justify-center overflow-hidden bg-primary-light text-xs text-white text-center whitespace-nowrap transition-all duration-500 ease-in-out"
+            :style="{ 'width': `${progressBarStep}%` }"></div>
+      </div>
+    </div>
+
+    <!-- Основной контент, который занимает все доступное пространство -->
+    <div class="flex-1 relative">
+      <!-- Слайды с изображениями -->
+      <a
+          :href="(!slide.settings.link_text) ? slide.link : '#'"
+          v-for="(slide, index) in sortedSlides"
+          :key="index"
+          :style="{ filter: `brightness(${slide.image.shading})` }"
+          class="absolute -z-10 h-full w-full before:absolute before:z-10 before:h-full before:w-full"
+      >
+        <img
+            alt="Thumbnail"
+            loading="eager"
+            decoding="async"
+            data-nimg="fill"
+            class="object-cover transition-opacity duration-1000 absolute inset-0 h-full w-full"
+            sizes="100vw"
+            :src="'/storage/' + slide.image.url"
+            :loading="index === 0 ? 'eager' : 'lazy'"
+            :class="{ 'opacity-1': currentIndex === index, 'opacity-0': currentIndex !== index }"
+        />
+      </a>
+
+      <!-- Текст слайдов с анимацией -->
+      <transition name="fade" mode="out-in">
+        <div :key="currentIndex">
+          <div
+              v-show="currentIndex === index"
+              v-for="(item, index) in sortedSlides"
+              :key="index"
+              class="mx-auto max-w-screen-lg px-5 pt-[150px] pb-0 bvi-no-styles"
+          >
+            <h1
+                v-if="item.title"
+                :class="`text-${item.settings.text_position}`"
+                class="text-brand-primary mb-3 mt-2 text-3xl font-semibold tracking-tight text-white lg:text-5xl lg:leading-tight"
+            >
+              {{ item.title }}
+            </h1>
+            <div v-if="item.content" class="mt-8 space-x-3 text-gray-500 mb-8">
+              <div class="gap-3 md:flex-row md:items-center">
+                <div class="gap-3">
+                  <p :class="`text-${item.settings.text_position}`" class="text-gray-100 text-2xl font-light line-clamp-3">
+                    {{ item.content }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {mapActions} from "vuex";
+import axios from "axios";
+import {helpers} from "@/mixins/Helpers.js";
+
+export default {
+  mixins: [helpers],
+  name: 'TvSliderBody',
+  props: {
+    slides: {
+      type: Object,
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      intervalId: null,
+      reloadIntervalId: null,
+      slideDuration: 9000,
+      reloadDuration: 600000, // 10 минут в миллисекундах
+      sortedSlides: null,
+
+    }
+  },
+  computed: {
+    totalSlides() {
+      return this.slides && this.slides ? this.slides.length : 0;
+    },
+    progressBarStep() {
+      const slides = this.totalSlides;
+      const step = 100 / slides;
+      return (this.currentIndex + 1) * step;
+    }
+  },
+  methods: {
+    ...mapActions(['updateLastSlider']),
+    next() {
+      if (this.totalSlides > 0) {
+        this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
+        this.resetTimer();
+      }
+    },
+    prev() {
+      if (this.totalSlides > 0) {
+        this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
+        this.resetTimer();
+      }
+    },
+    startTimer() {
+      this.stopTimer();
+      this.intervalId = setInterval(this.next, this.slideDuration);
+    },
+    stopTimer() {
+      clearInterval(this.intervalId);
+    },
+    resetTimer() {
+      this.stopTimer();
+      this.startTimer();
+    },
+    startReloadTimer() {
+      this.stopReloadTimer();
+      this.reloadIntervalId = setInterval(() => {
+        window.location.reload();
+      }, this.reloadDuration);
+    },
+    stopReloadTimer() {
+      clearInterval(this.reloadIntervalId);
+    },
+  },
+  mounted() {
+    this.sortedSlides = this.slides.slice().sort((a, b) => a.sort - b.sort);
+
+    this.startTimer();
+    this.startReloadTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
+    this.stopReloadTimer();
+  },
+}
+</script>
+
+<style>
+/* Стили для изображений слайдов */
+.opacity-1 {
+  opacity: 1;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+</style>