update

fudan-generative-vision · Mar 24, 2024 · e8b5451 · e8b5451
1 parent 5eda140
commit e8b5451
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 155 deletions.
diff --git a/src/assets/carousel.css b/src/assets/carousel.css
@@ -7,8 +7,7 @@
 }
 
 .indicator-left-btn {
-  @apply md:-left-20 -left-8;
-  @apply md:-translate-x-2;
+  @apply md:-left-24 -left-8;
 }
 
 .indicator-right-btn {

diff --git a/src/assets/video/cross-id/0.mp4 b/src/assets/video/cross-id/0.mp4
diff --git a/src/assets/video/cross-id/1.mp4 b/src/assets/video/cross-id/1.mp4
diff --git a/src/assets/video/cross-id/2.mp4 b/src/assets/video/cross-id/2.mp4
diff --git a/src/components/AnimateHumanVideos.vue b/src/components/AnimateHumanVideos.vue
@@ -1,24 +1,37 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 import { initTWE, Carousel } from 'tw-elements';
+import { inVisible } from '@/utils/video';
 onMounted(() => {
   initTWE({ Carousel }, { allowReinits: true });
+
+  animateHumanCarousel.value?.addEventListener('slide.twe.carousel', (v: any) => {
+    const from = v.from;
+    const to = v.to;
+    videos.value[2 * from]?.pause();
+    videos.value[2 * from + 1]?.pause();
+    if (inVisible(videos.value[2 * from])) {
+      videos.value[2 * to].play();
+      videos.value[2 * to + 1].play();
+    }
+  })
+
 });
 
 const animateHumanCarousel = ref<HTMLElement>();
 const videos = ref<HTMLVideoElement[]>([]);
-watch(animateHumanCarousel, (newV) => {
-  if (newV) {
-    newV.addEventListener('slide.twe.carousel', (v: any) => {
-      const from = v.from;
-      const to = v.to;
-      videos.value[from]?.pause();
-      videos.value[from + 1]?.pause();
-      videos.value[2 * to]?.play();
-      videos.value[2 * to + 1]?.play();
-    })
-  }
-}, { once: true });
+// watch(animateHumanCarousel, (newV) => {
+//   if (newV) {
+//     newV.addEventListener('slide.twe.carousel', (v: any) => {
+//       const from = v.from;
+//       const to = v.to;
+//       videos.value[from]?.pause();
+//       videos.value[from + 1]?.pause();
+//       videos.value[2 * to]?.play();
+//       videos.value[2 * to + 1]?.play();
+//     })
+//   }
+// }, { once: true });
 </script>
 
 <template>

diff --git a/src/components/ComparisionVideos.vue b/src/components/ComparisionVideos.vue
@@ -1,22 +1,32 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 import { initTWE, Carousel } from 'tw-elements';
+import { inVisible } from '@/utils/video';
 onMounted(() => {
   initTWE({ Carousel }, { allowReinits: true });
+
+  comparisionsCarousel.value?.addEventListener('slide.twe.carousel', (v: any) => {
+    const from = v.from;
+    const to = v.to;
+    comparisionVideos.value[from]?.pause();
+    if (inVisible(comparisionVideos.value[from])) {
+      comparisionVideos.value[to].play();
+    }
+  })
 });
 
 const comparisionsCarousel = ref<HTMLElement>();
 const comparisionVideos = ref<HTMLVideoElement[]>([]);
-watch(comparisionsCarousel, (newV) => {
-  if (newV) {
-    newV.addEventListener('slide.twe.carousel', (v: any) => {
-      const from = v.from;
-      const to = v.to;
-      comparisionVideos.value[from]?.pause();
-      comparisionVideos.value[to]?.play();
-    })
-  }
-}, { once: true });
+// watch(comparisionsCarousel, (newV) => {
+//   if (newV) {
+//     newV.addEventListener('slide.twe.carousel', (v: any) => {
+//       const from = v.from;
+//       const to = v.to;
+//       comparisionVideos.value[from]?.pause();
+//       comparisionVideos.value[to]?.play();
+//     })
+//   }
+// }, { once: true });
 </script>
 
 <template>

diff --git a/src/components/CrossIdVideos.vue b/src/components/CrossIdVideos.vue
@@ -1,24 +1,36 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 import { initTWE, Carousel } from 'tw-elements';
+import { inVisible } from '@/utils/video';
 onMounted(() => {
   initTWE({ Carousel }, { allowReinits: true });
+
+  crossIdCarousel.value?.addEventListener('slide.twe.carousel', (v: any) => {
+    const from = v.from;
+    const to = v.to;
+    videos.value[2 * from]?.pause();
+    videos.value[2 * from + 1]?.pause();
+    if (inVisible(videos.value[2 * from])) {
+      videos.value[2 * to].play();
+      videos.value[2 * to + 1].play();
+    }
+  })
 });
 
 const crossIdCarousel = ref<HTMLElement>();
 const videos = ref<HTMLVideoElement[]>([]);
-watch(crossIdCarousel, (newV) => {
-  if (newV) {
-    newV.addEventListener('slide.twe.carousel', (v: any) => {
-      const from = v.from;
-      const to = v.to;
-      videos.value[from]?.pause();
-      videos.value[from + 1]?.pause();
-      videos.value[2 * to]?.play();
-      videos.value[2 * to + 1]?.play();
-    })
-  }
-}, { once: true });
+// watch(crossIdCarousel, (newV) => {
+//   if (newV) {
+//     newV.addEventListener('slide.twe.carousel', (v: any) => {
+//       const from = v.from;
+//       const to = v.to;
+//       videos.value[from]?.pause();
+//       videos.value[from + 1]?.pause();
+//       videos.value[2 * to]?.play();
+//       videos.value[2 * to + 1]?.play();
+//     })
+//   }
+// }, { once: true });
 </script>
 
 <template>

diff --git a/src/components/T2IVideos.vue b/src/components/T2IVideos.vue
@@ -1,25 +1,37 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 import { initTWE, Carousel } from 'tw-elements';
+import { inVisible } from '@/utils/video';
 onMounted(() => {
   initTWE({ Carousel }, { allowReinits: true });
+
+  t2iCarousel.value?.addEventListener('slide.twe.carousel', (v: any) => {
+    const from = v.from;
+    const to = v.to;
+    videos.value[from]?.pause();
+    if (inVisible(videos.value[from])) {
+      videos.value[to].play();
+    }
+
+    t2iIndex.value = to;
+  })
 });
 
 const t2iCarousel = ref<HTMLElement>();
 const videos = ref<HTMLVideoElement[]>([]);
 const t2iIndex = ref(0);
-watch(t2iCarousel, (newV) => {
-  if (newV) {
-    newV.addEventListener('slide.twe.carousel', (v: any) => {
-      const from = v.from;
-      const to = v.to;
-      videos.value[from]?.pause();
-      videos.value[to]?.play();
-
-      t2iIndex.value = to;
-    })
-  }
-}, { once: true });
+// watch(t2iCarousel, (newV) => {
+//   if (newV) {
+//     newV.addEventListener('slide.twe.carousel', (v: any) => {
+//       const from = v.from;
+//       const to = v.to;
+//       videos.value[from]?.pause();
+//       videos.value[to]?.play();
+
+//       t2iIndex.value = to;
+//     })
+//   }
+// }, { once: true });
 
 const t2iCaptions = ref([
   `A woman in a silver dress posing for a picture, trending on cg society, futurism,

diff --git a/src/components/UnseenVideos.vue b/src/components/UnseenVideos.vue
@@ -1,24 +1,26 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
 import { initTWE, Carousel } from 'tw-elements';
+import { inVisible } from '@/utils/video';
+const unseenCarousel = ref<HTMLElement>();
+const videos = ref<HTMLVideoElement[]>([]);
+
 onMounted(() => {
   initTWE({ Carousel }, { allowReinits: true });
+
+  unseenCarousel.value?.addEventListener('slide.twe.carousel', (v: any) => {
+    const from = v.from;
+    const to = v.to;
+    videos.value[2 * from]?.pause();
+    videos.value[2 * from + 1]?.pause();
+    if (inVisible(videos.value[2 * from])) {
+      videos.value[2 * to].play();
+      videos.value[2 * to + 1].play();
+    }
+  })
+
 });
 
-const unseenCarousel = ref<HTMLElement>();
-const videos = ref<HTMLVideoElement[]>([]);
-watch(unseenCarousel, (newV) => {
-  if (newV) {
-    newV.addEventListener('slide.twe.carousel', (v: any) => {
-      const from = v.from;
-      const to = v.to;
-      videos.value[from]?.pause();
-      videos.value[from + 1]?.pause();
-      videos.value[2 * to]?.play();
-      videos.value[2 * to + 1]?.play();
-    })
-  }
-}, { once: true });
 </script>
 
 <template>
@@ -38,9 +40,9 @@ watch(unseenCarousel, (newV) => {
       <div
         class="video-group relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
         data-twe-carousel-item style="backface-visibility: hidden">
-        <video :ref="(el: any) => videos[2] = el" v-lazy src="@/assets/video/unseen/2.mp4" muted loop></video>
+        <video :ref="(el: any) => videos[2] = el" v-lazy src="@/assets/video/unseen/2.mp4" muted loop autoplay></video>
         <div></div>
-        <video :ref="(el: any) => videos[3] = el" v-lazy src="@/assets/video/unseen/3.mp4" muted loop></video>
+        <video :ref="(el: any) => videos[3] = el" v-lazy src="@/assets/video/unseen/3.mp4" muted loop autoplay></video>
       </div>
       <!--Third item-->
       <div

diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
diff --git a/src/directives/video-lazy.ts b/src/directives/video-lazy.ts
@@ -1,11 +1,12 @@
+import { inVisible } from '@/utils/video'
+
 const videos = new Map<HTMLVideoElement, DOMRect>()
 
 function playOrPause(video: HTMLVideoElement) {
-  const { left, right, top, bottom } = video.getBoundingClientRect()
-  if (bottom < 0 || top > window.innerHeight) {
-    video.pause()
-  } else if (left != 0 && right != 0) {
+  if (inVisible(video)) {
     video.play()
+  } else {
+    video.pause()
   }
 }
 

diff --git a/src/utils/video.ts b/src/utils/video.ts
@@ -0,0 +1,9 @@
+export function inVisible(video: HTMLElement) {
+  const { left, right, top, bottom, width, height } = video.getBoundingClientRect()
+  if (bottom < 0 || top > window.innerHeight) {
+    return false
+  } else if (left != 0 && right != 0) {
+    return true
+  }
+  return false
+}