Skip to content

Commit bb1f2a8

Browse files
AricGammaAricGamma
committed
update
1 parent 8fc134a commit bb1f2a8

File tree

6 files changed

+206
-57
lines changed

6 files changed

+206
-57
lines changed

‎src/components/SingleVideo.vue

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,17 @@
1616
</div>
1717

1818
<!--Carousel indicators-->
19-
<div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
19+
<div v-if="items.length > 1"
20+
class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
2021
data-twe-carousel-indicators>
2122
<button v-for="(_item, i) in items" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
2223
type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
2324
aria-current="true" :aria-label="`Slide ${i + 1}`"></button>
2425
</div>
2526

2627
<!--Carousel controls - prev item-->
27-
<button class="indicator-btn indicator-left-btn" type="button" :data-twe-target="`#${id}`"
28-
data-twe-slide="prev">
28+
<button v-if="items.length > 1" class="indicator-btn indicator-left-btn" type="button"
29+
:data-twe-target="`#${id}`" data-twe-slide="prev">
2930
<span class="inline-block h-8 w-8">
3031
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
3132
stroke="currentColor" class="h-6 w-6">
@@ -36,8 +37,8 @@
3637
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
3738
</button>
3839
<!--Carousel controls - next item-->
39-
<button class="indicator-btn indicator-right-btn" type="button" :data-twe-target="`#${id}`"
40-
data-twe-slide="next">
40+
<button v-if="items.length > 1" class="indicator-btn indicator-right-btn" type="button"
41+
:data-twe-target="`#${id}`" data-twe-slide="next">
4142
<span class="inline-block h-8 w-8">
4243
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
4344
stroke="currentColor" class="h-6 w-6">
@@ -122,11 +123,15 @@ section {
122123
@apply font-light italic md:px-20 text-center leading-snug;
123124
}
124125
126+
video {
127+
@apply rounded-lg
128+
}
129+
125130
.item-content {
126131
@apply flex flex-col-reverse md:flex-row md:justify-between md:items-center;
127132
128133
video {
129-
@apply w-full md:w-1/2;
134+
@apply w-full md:w-1/2
130135
}
131136
132137
div {

‎src/components/TextVideo.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,17 @@
1919
</div>
2020

2121
<!--Carousel indicators-->
22-
<div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
22+
<div v-if="items.length > 1"
23+
class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
2324
data-twe-carousel-indicators>
2425
<button v-for="(_item, i) in items" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
2526
type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
2627
aria-current="true" :aria-label="`Slide ${i + 1}`"></button>
2728
</div>
2829

2930
<!--Carousel controls - prev item-->
30-
<button class="indicator-btn indicator-left-btn" type="button" :data-twe-target="`#${id}`"
31-
data-twe-slide="prev">
31+
<button v-if="items.length > 1" class="indicator-btn indicator-left-btn" type="button"
32+
:data-twe-target="`#${id}`" data-twe-slide="prev">
3233
<span class="inline-block h-8 w-8">
3334
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
3435
stroke="currentColor" class="h-6 w-6">
@@ -39,8 +40,8 @@
3940
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
4041
</button>
4142
<!--Carousel controls - next item-->
42-
<button class="indicator-btn indicator-right-btn" type="button" :data-twe-target="`#${id}`"
43-
data-twe-slide="next">
43+
<button v-if="items.length > 1" class="indicator-btn indicator-right-btn" type="button"
44+
:data-twe-target="`#${id}`" data-twe-slide="next">
4445
<span class="inline-block h-8 w-8">
4546
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
4647
stroke="currentColor" class="h-6 w-6">

‎src/components/VideoCarousel.vue

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<section>
3+
<h3>{{ title }}</h3>
4+
<div class="panel">
5+
<div ref="carouselElement" :id="id" class="relative" data-twe-carousel-init data-twe-carousel-slide
6+
data-twe-ride="carousel" data-twe-interval="9999999">
7+
8+
<!--Carousel items-->
9+
<div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
10+
<div v-for="(videos, i) in videoLists" :key="i" :ref="(el: any) => carouselItems[i] = el"
11+
:class="{ hidden: i > 0 }"
12+
class="video-group relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
13+
data-twe-carousel-item style="backface-visibility: hidden">
14+
<video v-for="(video, vi) in videos" :key="vi" :ref="(el: any) => videos[i + vi] = el" v-lazy
15+
controls :src="video"
16+
:style="{ width: `${100 / videos.length - 1}%`, 'margin-right': `1%` }"></video>
17+
</div>
18+
</div>
19+
20+
<!--Carousel indicators-->
21+
<div v-if="videoLists.length > 1"
22+
class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
23+
data-twe-carousel-indicators>
24+
<button v-for="(_item, i) in videoLists" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
25+
type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
26+
aria-current="true" :aria-label="`Slide ${i + 1}`"></button>
27+
</div>
28+
29+
<!--Carousel controls - prev item-->
30+
<button v-if="videoLists.length > 1" class="indicator-btn indicator-left-btn" type="button"
31+
:data-twe-target="`#${id}`" data-twe-slide="prev">
32+
<span class="inline-block h-8 w-8">
33+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
34+
stroke="currentColor" class="h-6 w-6">
35+
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
36+
</svg>
37+
</span>
38+
<span
39+
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
40+
</button>
41+
<!--Carousel controls - next item-->
42+
<button v-if="videoLists.length > 1" class="indicator-btn indicator-right-btn" type="button"
43+
:data-twe-target="`#${id}`" data-twe-slide="next">
44+
<span class="inline-block h-8 w-8">
45+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
46+
stroke="currentColor" class="h-6 w-6">
47+
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
48+
</svg>
49+
</span>
50+
<span
51+
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Next</span>
52+
</button>
53+
</div>
54+
</div>
55+
</section>
56+
57+
</template>
58+
59+
<script setup lang="ts">
60+
interface Props {
61+
id?: string
62+
title?: string
63+
items?: string[]
64+
count?: number
65+
}
66+
const { props } = defineProps<{ props: Props }>()
67+
const title = props.title || ''
68+
const items = (props.items || []).map(sub => new URL(`../${sub}`, import.meta.url).href)
69+
const count = (props.count || 1)
70+
const id = props.id || title.replaceAll(" ", "")
71+
72+
const videoLists: string[][] = []
73+
for (let i = 0; i < items.length; i++) {
74+
if (i % count === 0) {
75+
videoLists.push(items.slice(i, count + i))
76+
}
77+
}
78+
79+
import { ref, onMounted } from 'vue';
80+
import { initTWE, Carousel } from 'tw-elements';
81+
import { inVisible } from '@/utils/video';
82+
import { store } from '@/store'
83+
84+
const carouselElement = ref<HTMLElement>();
85+
const videos = ref<HTMLVideoElement[]>([]);
86+
const carouselItems = ref<HTMLElement[]>([]);
87+
const carouselIndicators = ref<HTMLElement[]>([]);
88+
89+
onMounted(async () => {
90+
carouselItems.value[0]?.setAttribute("data-twe-carousel-active", "")
91+
carouselIndicators.value[0]?.setAttribute("data-twe-carousel-active", "")
92+
do {
93+
await new Promise(resolve => setTimeout(resolve, 100))
94+
} while (store.tweInitializing["Carousel"])
95+
store.setInitializing("Carousel", true)
96+
console.log("initializing..", store.tweInitializing["Carousel"])
97+
initTWE({ Carousel }, { allowReinits: true, checkOtherImports: true });
98+
store.setInitializing("Carousel", false)
99+
console.log("initialized", store.tweInitializing["Carousel"])
100+
101+
carouselElement.value?.addEventListener('slide.twe.carousel', (v: any) => {
102+
const from = v.from;
103+
const to = v.to;
104+
videos.value[2 * from]?.pause();
105+
videos.value[2 * from + 1]?.pause();
106+
// if (inVisible(videos.value[2 * from])) {
107+
// videos.value[2 * to].play();
108+
// videos.value[2 * to + 1].play();
109+
// }
110+
})
111+
});
112+
113+
</script>
114+
115+
<style scoped lang="scss">
116+
section {
117+
@apply w-full py-10 md:px-16 px-6;
118+
@apply flex flex-col justify-center items-center;
119+
}
120+
121+
.panel {
122+
max-width: 960px;
123+
@apply w-full mt-2;
124+
125+
&>* {
126+
@apply w-full mb-8;
127+
}
128+
129+
:last-child {
130+
@apply mb-0;
131+
}
132+
}
133+
134+
.video-group {
135+
video {
136+
width: 49%;
137+
@apply rounded-lg;
138+
}
139+
140+
@media (max-width: 768px) {
141+
video {
142+
width: 100% !important;
143+
}
144+
145+
div {
146+
width: 0;
147+
}
148+
}
149+
150+
div {
151+
width: 1%;
152+
}
153+
154+
* {
155+
@apply inline-block;
156+
}
157+
}
158+
</style>

‎src/components/VideoComparision.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,17 @@
1818
</div>
1919

2020
<!--Carousel indicators-->
21-
<div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
21+
<div v-if="items.length > 1"
22+
class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] -mb-8 flex list-none justify-center p-0"
2223
data-twe-carousel-indicators>
2324
<button v-for="(_item, i) in items" :key="i" :ref="(el: any) => carouselIndicators[i] = el"
2425
type="button" :data-twe-target="`#${id}`" :data-twe-slide-to="i" class="indicator"
2526
aria-current="true" :aria-label="`Slide ${i + 1}`"></button>
2627
</div>
2728

2829
<!--Carousel controls - prev item-->
29-
<button class="indicator-btn indicator-left-btn" type="button" :data-twe-target="`#${id}`"
30-
data-twe-slide="prev">
30+
<button v-if="items.length > 1" class="indicator-btn indicator-left-btn" type="button"
31+
:data-twe-target="`#${id}`" data-twe-slide="prev">
3132
<span class="inline-block h-8 w-8">
3233
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
3334
stroke="currentColor" class="h-6 w-6">
@@ -38,8 +39,8 @@
3839
class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
3940
</button>
4041
<!--Carousel controls - next item-->
41-
<button class="indicator-btn indicator-right-btn" type="button" :data-twe-target="`#${id}`"
42-
data-twe-slide="next">
42+
<button v-if="items.length > 1" class="indicator-btn indicator-right-btn" type="button"
43+
:data-twe-target="`#${id}`" data-twe-slide="next">
4344
<span class="inline-block h-8 w-8">
4445
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
4546
stroke="currentColor" class="h-6 w-6">

‎src/components/WrappedSection.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<VideoComparision v-if="template === 'video-comparision'" :props="props" />
66
<TextVideo v-if="template === 'text-video'" :props="props" />
77
<SingleVideo v-if="template === 'single-video'" :props="props" />
8+
<VideoCarousel v-if="template === 'video-carousel'" :props="props" />
89
<BibTeX v-if="template === 'bibtex'" :props="props" />
910
</template>
1011

@@ -15,6 +16,7 @@ import FrameworkSection from "@/components/FrameworkSection.vue"
1516
import VideoComparision from "@/components/VideoComparision.vue"
1617
import TextVideo from "@/components/TextVideo.vue"
1718
import SingleVideo from "@/components/SingleVideo.vue"
19+
import VideoCarousel from "@/components/VideoCarousel.vue"
1820
import BibTeX from "@/components/BibTeX.vue"
1921
interface Props {
2022
template?: string,

‎src/index.json

Lines changed: 23 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
},
4646
{
4747
"name": "Luc Van Gool",
48-
"homepage": "",
48+
"homepage": "https://scholar.google.com/citations?user=TwMib_QAAAAJ",
4949
"suffix": "3"
5050
},
5151
{
@@ -107,66 +107,48 @@
107107
{
108108
"template": "single-video",
109109
"props": {
110-
"title": "Hallo Singing",
110+
"title": "Cross-ID Showcase",
111111
"items": [
112112
"assets/video/singing/1.mp4"
113113
]
114114
}
115115
},
116116
{
117-
"template": "video-comparision",
117+
"template": "video-carousel",
118118
"props": {
119-
"title": "",
119+
"title": "Singing Audio",
120120
"items": [
121-
[
122-
"assets/video/opera/1.mp4",
123-
"assets/video/opera/2.mp4"
124-
]
125-
]
126-
}
127-
},
128-
{
129-
"template": "video-comparision",
130-
"props": {
131-
"title": "Speedy Rhythm",
132-
"items": [
133-
[
134-
"assets/video/rap/1.mp4",
135-
"assets/video/rap/2.mp4"
136-
]
137-
]
121+
"assets/video/opera/1.mp4",
122+
"assets/video/opera/2.mp4",
123+
"assets/video/rap/1.mp4",
124+
"assets/video/rap/2.mp4"
125+
],
126+
"count": 4
138127
}
139128
},
140129
{
141-
"template": "video-comparision",
130+
"template": "video-carousel",
142131
"props": {
143132
"title": "Portrait Style",
144133
"items": [
145-
[
146-
"assets/video/portrait_style/4.mp4",
147-
"assets/video/portrait_style/3.mp4"
148-
],
149-
[
150-
"assets/video/portrait_style/2.mp4",
151-
"assets/video/portrait_style/1.mp4"
152-
]
153-
]
134+
"assets/video/portrait_style/4.mp4",
135+
"assets/video/portrait_style/3.mp4",
136+
"assets/video/portrait_style/2.mp4",
137+
"assets/video/portrait_style/1.mp4"
138+
],
139+
"count": 4
154140
}
155141
},
156142
{
157-
"template": "video-comparision",
143+
"template": "video-carousel",
158144
"props": {
159145
"title": "Cross Actor",
160146
"items": [
161-
[
162-
"assets/video/cross_actor/1.mp4",
163-
"assets/video/cross_actor/2.mp4"
164-
],
165-
[
166-
"assets/video/cross_actor/3.mp4",
167-
"assets/video/cross_actor/4.mp4"
168-
]
169-
]
147+
"assets/video/cross_actor/1.mp4",
148+
"assets/video/cross_actor/2.mp4",
149+
"assets/video/cross_actor/4.mp4"
150+
],
151+
"count": 3
170152
}
171153
},
172154
{

0 commit comments

Comments
 (0)