From bb1f2a8b9690294fd843b0c54fade81d02e2582a Mon Sep 17 00:00:00 2001
From: "leeway.zlw" <leeway.zlw@outlook.com>
Date: Thu, 13 Jun 2024 21:31:22 +0800
Subject: [PATCH] update

---
 src/components/SingleVideo.vue      |  17 +--
 src/components/TextVideo.vue        |  11 +-
 src/components/VideoCarousel.vue    | 158 ++++++++++++++++++++++++++++
 src/components/VideoComparision.vue |  11 +-
 src/components/WrappedSection.vue   |   2 +
 src/index.json                      |  64 ++++-------
 6 files changed, 206 insertions(+), 57 deletions(-)
 create mode 100644 src/components/VideoCarousel.vue

diff --git a/src/components/SingleVideo.vue b/src/components/SingleVideo.vue
index f803570d..b902f3f7 100644
--- a/src/components/SingleVideo.vue
+++ b/src/components/SingleVideo.vue
@@ -16,7 +16,8 @@
                 </div>
 
                 <!--Carousel indicators-->
-                <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
+                <div v-if="items.length > 1"
+                    class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
                     data-twe-carousel-indicators>
                     <button v-for="(_item, i) in items" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
                         type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
@@ -24,8 +25,8 @@
                 </div>
 
                 <!--Carousel controls - prev item-->
-                <button class="indicator-btn indicator-left-btn" type="button" :data-twe-target="`#${id}`"
-                    data-twe-slide="prev">
+                <button v-if="items.length > 1" class="indicator-btn indicator-left-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="prev">
                     <span class="inline-block h-8 w-8">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="h-6 w-6">
@@ -36,8 +37,8 @@
                         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
                 </button>
                 <!--Carousel controls - next item-->
-                <button class="indicator-btn indicator-right-btn" type="button" :data-twe-target="`#${id}`"
-                    data-twe-slide="next">
+                <button v-if="items.length > 1" class="indicator-btn indicator-right-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="next">
                     <span class="inline-block h-8 w-8">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="h-6 w-6">
@@ -122,11 +123,15 @@ section {
     @apply font-light italic md:px-20 text-center leading-snug;
 }
 
+video {
+    @apply rounded-lg
+}
+
 .item-content {
     @apply flex flex-col-reverse md:flex-row md:justify-between md:items-center;
 
     video {
-        @apply w-full md:w-1/2;
+        @apply w-full md:w-1/2
     }
 
     div {
diff --git a/src/components/TextVideo.vue b/src/components/TextVideo.vue
index 10b0e2f3..0a1a06fd 100644
--- a/src/components/TextVideo.vue
+++ b/src/components/TextVideo.vue
@@ -19,7 +19,8 @@
                 </div>
 
                 <!--Carousel indicators-->
-                <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
+                <div v-if="items.length > 1"
+                    class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
                     data-twe-carousel-indicators>
                     <button v-for="(_item, i) in items" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
                         type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
@@ -27,8 +28,8 @@
                 </div>
 
                 <!--Carousel controls - prev item-->
-                <button class="indicator-btn indicator-left-btn" type="button" :data-twe-target="`#${id}`"
-                    data-twe-slide="prev">
+                <button v-if="items.length > 1" class="indicator-btn indicator-left-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="prev">
                     <span class="inline-block h-8 w-8">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="h-6 w-6">
@@ -39,8 +40,8 @@
                         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
                 </button>
                 <!--Carousel controls - next item-->
-                <button class="indicator-btn indicator-right-btn" type="button" :data-twe-target="`#${id}`"
-                    data-twe-slide="next">
+                <button v-if="items.length > 1" class="indicator-btn indicator-right-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="next">
                     <span class="inline-block h-8 w-8">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="h-6 w-6">
diff --git a/src/components/VideoCarousel.vue b/src/components/VideoCarousel.vue
new file mode 100644
index 00000000..c7e4660b
--- /dev/null
+++ b/src/components/VideoCarousel.vue
@@ -0,0 +1,158 @@
+<template>
+    <section>
+        <h3>{{ title }}</h3>
+        <div class="panel">
+            <div ref="carouselElement" :id="id" class="relative" data-twe-carousel-init data-twe-carousel-slide
+                data-twe-ride="carousel" data-twe-interval="9999999">
+
+                <!--Carousel items-->
+                <div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
+                    <div v-for="(videos, i) in videoLists" :key="i" :ref="(el: any) => carouselItems[i] = el"
+                        :class="{ hidden: i > 0 }"
+                        class="video-group relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+                        data-twe-carousel-item style="backface-visibility: hidden">
+                        <video v-for="(video, vi) in videos" :key="vi" :ref="(el: any) => videos[i + vi] = el" v-lazy
+                            controls :src="video"
+                            :style="{ width: `${100 / videos.length - 1}%`, 'margin-right': `1%` }"></video>
+                    </div>
+                </div>
+
+                <!--Carousel indicators-->
+                <div v-if="videoLists.length > 1"
+                    class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
+                    data-twe-carousel-indicators>
+                    <button v-for="(_item, i) in videoLists" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
+                        type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
+                        aria-current="true" :aria-label="`Slide ${i + 1}`"></button>
+                </div>
+
+                <!--Carousel controls - prev item-->
+                <button v-if="videoLists.length > 1" class="indicator-btn indicator-left-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="prev">
+                    <span class="inline-block h-8 w-8">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="h-6 w-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                        </svg>
+                    </span>
+                    <span
+                        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
+                </button>
+                <!--Carousel controls - next item-->
+                <button v-if="videoLists.length > 1" class="indicator-btn indicator-right-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="next">
+                    <span class="inline-block h-8 w-8">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="h-6 w-6">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                        </svg>
+                    </span>
+                    <span
+                        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Next</span>
+                </button>
+            </div>
+        </div>
+    </section>
+
+</template>
+
+<script setup lang="ts">
+interface Props {
+    id?: string
+    title?: string
+    items?: string[]
+    count?: number
+}
+const { props } = defineProps<{ props: Props }>()
+const title = props.title || ''
+const items = (props.items || []).map(sub => new URL(`../${sub}`, import.meta.url).href)
+const count = (props.count || 1)
+const id = props.id || title.replaceAll(" ", "")
+
+const videoLists: string[][] = []
+for (let i = 0; i < items.length; i++) {
+    if (i % count === 0) {
+        videoLists.push(items.slice(i, count + i))
+    }
+}
+
+import { ref, onMounted } from 'vue';
+import { initTWE, Carousel } from 'tw-elements';
+import { inVisible } from '@/utils/video';
+import { store } from '@/store'
+
+const carouselElement = ref<HTMLElement>();
+const videos = ref<HTMLVideoElement[]>([]);
+const carouselItems = ref<HTMLElement[]>([]);
+const carouselIndicators = ref<HTMLElement[]>([]);
+
+onMounted(async () => {
+    carouselItems.value[0]?.setAttribute("data-twe-carousel-active", "")
+    carouselIndicators.value[0]?.setAttribute("data-twe-carousel-active", "")
+    do {
+        await new Promise(resolve => setTimeout(resolve, 100))
+    } while (store.tweInitializing["Carousel"])
+    store.setInitializing("Carousel", true)
+    console.log("initializing..", store.tweInitializing["Carousel"])
+    initTWE({ Carousel }, { allowReinits: true, checkOtherImports: true });
+    store.setInitializing("Carousel", false)
+    console.log("initialized", store.tweInitializing["Carousel"])
+
+    carouselElement.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();
+        // }
+    })
+});
+
+</script>
+
+<style scoped lang="scss">
+section {
+    @apply w-full py-10 md:px-16 px-6;
+    @apply flex flex-col justify-center items-center;
+}
+
+.panel {
+    max-width: 960px;
+    @apply w-full mt-2;
+
+    &>* {
+        @apply w-full mb-8;
+    }
+
+    :last-child {
+        @apply mb-0;
+    }
+}
+
+.video-group {
+    video {
+        width: 49%;
+        @apply rounded-lg;
+    }
+
+    @media (max-width: 768px) {
+        video {
+            width: 100% !important;
+        }
+
+        div {
+            width: 0;
+        }
+    }
+
+    div {
+        width: 1%;
+    }
+
+    * {
+        @apply inline-block;
+    }
+}
+</style>
diff --git a/src/components/VideoComparision.vue b/src/components/VideoComparision.vue
index 00a11eec..1a518f97 100644
--- a/src/components/VideoComparision.vue
+++ b/src/components/VideoComparision.vue
@@ -18,7 +18,8 @@
                 </div>
 
                 <!--Carousel indicators-->
-                <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
+                <div v-if="items.length > 1"
+                    class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
                     data-twe-carousel-indicators>
                     <button v-for="(_item, i) in items" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
                         type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
@@ -26,8 +27,8 @@
                 </div>
 
                 <!--Carousel controls - prev item-->
-                <button class="indicator-btn indicator-left-btn" type="button" :data-twe-target="`#${id}`"
-                    data-twe-slide="prev">
+                <button v-if="items.length > 1" class="indicator-btn indicator-left-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="prev">
                     <span class="inline-block h-8 w-8">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="h-6 w-6">
@@ -38,8 +39,8 @@
                         class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
                 </button>
                 <!--Carousel controls - next item-->
-                <button class="indicator-btn indicator-right-btn" type="button" :data-twe-target="`#${id}`"
-                    data-twe-slide="next">
+                <button v-if="items.length > 1" class="indicator-btn indicator-right-btn" type="button"
+                    :data-twe-target="`#${id}`" data-twe-slide="next">
                     <span class="inline-block h-8 w-8">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="h-6 w-6">
diff --git a/src/components/WrappedSection.vue b/src/components/WrappedSection.vue
index 1733186d..9f2794d9 100644
--- a/src/components/WrappedSection.vue
+++ b/src/components/WrappedSection.vue
@@ -5,6 +5,7 @@
     <VideoComparision v-if="template === 'video-comparision'" :props="props" />
     <TextVideo v-if="template === 'text-video'" :props="props" />
     <SingleVideo v-if="template === 'single-video'" :props="props" />
+    <VideoCarousel v-if="template === 'video-carousel'" :props="props" />
     <BibTeX v-if="template === 'bibtex'" :props="props" />
 </template>
 
@@ -15,6 +16,7 @@ import FrameworkSection from "@/components/FrameworkSection.vue"
 import VideoComparision from "@/components/VideoComparision.vue"
 import TextVideo from "@/components/TextVideo.vue"
 import SingleVideo from "@/components/SingleVideo.vue"
+import VideoCarousel from "@/components/VideoCarousel.vue"
 import BibTeX from "@/components/BibTeX.vue"
 interface Props {
     template?: string,
diff --git a/src/index.json b/src/index.json
index 269bccbb..0150fbef 100644
--- a/src/index.json
+++ b/src/index.json
@@ -45,7 +45,7 @@
                     },
                     {
                         "name": "Luc Van Gool",
-                        "homepage": "",
+                        "homepage": "https://scholar.google.com/citations?user=TwMib_QAAAAJ",
                         "suffix": "3"
                     },
                     {
@@ -107,66 +107,48 @@
     {
         "template": "single-video",
         "props": {
-            "title": "Hallo Singing",
+            "title": "Cross-ID Showcase",
             "items": [
                 "assets/video/singing/1.mp4"
             ]
         }
     },
     {
-        "template": "video-comparision",
+        "template": "video-carousel",
         "props": {
-            "title": "",
+            "title": "Singing Audio",
             "items": [
-                [
-                    "assets/video/opera/1.mp4",
-                    "assets/video/opera/2.mp4"
-                ]
-            ]
-        }
-    },
-    {
-        "template": "video-comparision",
-        "props": {
-            "title": "Speedy Rhythm",
-            "items": [
-                [
-                    "assets/video/rap/1.mp4",
-                    "assets/video/rap/2.mp4"
-                ]
-            ]
+                "assets/video/opera/1.mp4",
+                "assets/video/opera/2.mp4",
+                "assets/video/rap/1.mp4",
+                "assets/video/rap/2.mp4"
+            ],
+            "count": 4
         }
     },
     {
-        "template": "video-comparision",
+        "template": "video-carousel",
         "props": {
             "title": "Portrait Style",
             "items": [
-                [
-                    "assets/video/portrait_style/4.mp4",
-                    "assets/video/portrait_style/3.mp4"
-                ],
-                [
-                    "assets/video/portrait_style/2.mp4",
-                    "assets/video/portrait_style/1.mp4"
-                ]
-            ]
+                "assets/video/portrait_style/4.mp4",
+                "assets/video/portrait_style/3.mp4",
+                "assets/video/portrait_style/2.mp4",
+                "assets/video/portrait_style/1.mp4"
+            ],
+            "count": 4
         }
     },
     {
-        "template": "video-comparision",
+        "template": "video-carousel",
         "props": {
             "title": "Cross Actor",
             "items": [
-                [
-                    "assets/video/cross_actor/1.mp4",
-                    "assets/video/cross_actor/2.mp4"
-                ],
-                [
-                    "assets/video/cross_actor/3.mp4",
-                    "assets/video/cross_actor/4.mp4"
-                ]
-            ]
+                "assets/video/cross_actor/1.mp4",
+                "assets/video/cross_actor/2.mp4",
+                "assets/video/cross_actor/4.mp4"
+            ],
+            "count": 3
         }
     },
     {