@realsee/dnalogel 2.1.0-alpha.11 → 2.1.0-alpha.13

package/libs/PanoTagPlugin/Components/Common/Media.js

@@ -2,12 +2,13 @@
 import {
 	SvelteComponent,
 	add_render_callback,
-	append,
 	append_styles,
 	attr,
 	check_outros,
+	create_component,
 	create_in_transition,
 	create_out_transition,
+	destroy_component,
 	destroy_each,
 	detach,
 	element,
@@ -15,106 +16,109 @@ import {
 	group_outros,
 	init,
 	insert,
-	noop,
+	mount_component,
 	safe_not_equal,
-	set_style,
 	space,
-	src_url_equal,
 	toggle_class,
 	transition_in,
 	transition_out
 } from "svelte/internal";
 
 import { fly } from 'svelte/transition';
-import { Image_Play } from '../../Assets/Icon';
 import { linear } from 'svelte/easing';
-import { notNil } from '../../../shared-utils/isNil';
+import { Swiper, SwiperSlide } from 'swiper/svelte';
+import { Autoplay } from 'swiper';
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import { noTypecheck } from '../../utils';
+import MediaItem from './MediaItem';
 
 function add_css(target) {
-	append_styles(target, "svelte-129jnm", ".media.svelte-129jnm{width:100%;height:100%;position:relative;overflow:hidden;border-radius:0.125rem}.carousel-item.svelte-129jnm{height:100%}.media-content.svelte-129jnm{width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:inherit;object-fit:inherit}.video-icon.svelte-129jnm{width:1.75rem;height:1.75rem;background-size:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}");
+	append_styles(target, "svelte-ai0lv9", ".media.svelte-ai0lv9{width:100%;height:100%;position:relative;overflow:hidden;border-radius:0.125rem}");
 }
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i];
+	child_ctx[14] = list[i];
 	return child_ctx;
 }
 
-// (16:0) {#if unfolded}
+// (24:0) {#if unfolded}
 function create_if_block(ctx) {
 	let div;
+	let current_block_type_index;
+	let if_block;
 	let div_intro;
 	let div_outro;
 	let current;
-	let each_value = /*mediaDataList*/ ctx[6];
-	let each_blocks = [];
+	const if_block_creators = [create_if_block_1, create_else_block];
+	const if_blocks = [];
 
-	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	function select_block_type(ctx, dirty) {
+		if (/*carouselEnabled*/ ctx[11]) return 0;
+		return 1;
 	}
 
+	current_block_type_index = select_block_type(ctx, -1);
+	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+
 	return {
 		c() {
 			div = element("div");
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].c();
-			}
-
-			attr(div, "class", "media svelte-129jnm");
-			toggle_class(div, "unfolded", /*unfolded*/ ctx[3]);
+			if_block.c();
+			attr(div, "class", "media svelte-ai0lv9");
+			toggle_class(div, "unfolded", /*unfolded*/ ctx[4]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(div, null);
-			}
-
+			if_blocks[current_block_type_index].m(div, null);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
+			let previous_block_index = current_block_type_index;
+			current_block_type_index = select_block_type(ctx, dirty);
 
-			if (dirty & /*objectFit, Image_Play, mediaDataList*/ 96) {
-				each_value = /*mediaDataList*/ ctx[6];
-				let i;
+			if (current_block_type_index === previous_block_index) {
+				if_blocks[current_block_type_index].p(ctx, dirty);
+			} else {
+				group_outros();
 
-				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context(ctx, each_value, i);
+				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+					if_blocks[previous_block_index] = null;
+				});
 
-					if (each_blocks[i]) {
-						each_blocks[i].p(child_ctx, dirty);
-					} else {
-						each_blocks[i] = create_each_block(child_ctx);
-						each_blocks[i].c();
-						each_blocks[i].m(div, null);
-					}
-				}
+				check_outros();
+				if_block = if_blocks[current_block_type_index];
 
-				for (; i < each_blocks.length; i += 1) {
-					each_blocks[i].d(1);
+				if (!if_block) {
+					if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+					if_block.c();
+				} else {
+					if_block.p(ctx, dirty);
 				}
 
-				each_blocks.length = each_value.length;
+				transition_in(if_block, 1);
+				if_block.m(div, null);
 			}
 
-			if (!current || dirty & /*unfolded*/ 8) {
-				toggle_class(div, "unfolded", /*unfolded*/ ctx[3]);
+			if (!current || dirty & /*unfolded*/ 16) {
+				toggle_class(div, "unfolded", /*unfolded*/ ctx[4]);
 			}
 		},
 		i(local) {
 			if (current) return;
+			transition_in(if_block);
 
 			if (local) {
 				add_render_callback(() => {
 					if (div_outro) div_outro.end(1);
 
-					div_intro = create_in_transition(div, fly, /*animation*/ ctx[4]
+					div_intro = create_in_transition(div, fly, /*animation*/ ctx[5]
 					? {
 							y: 4,
-							duration: /*duration*/ ctx[2],
-							delay: /*inDelay*/ ctx[0],
+							duration: /*duration*/ ctx[3],
+							delay: /*inDelay*/ ctx[1],
 							easing: linear
 						}
 					: undefined);
@@ -126,14 +130,15 @@ function create_if_block(ctx) {
 			current = true;
 		},
 		o(local) {
+			transition_out(if_block);
 			if (div_intro) div_intro.invalidate();
 
 			if (local) {
-				div_outro = create_out_transition(div, fly, /*animation*/ ctx[4]
+				div_outro = create_out_transition(div, fly, /*animation*/ ctx[5]
 				? {
 						y: 4,
-						duration: /*duration*/ ctx[2],
-						delay: /*outDelay*/ ctx[1],
+						duration: /*duration*/ ctx[3],
+						delay: /*outDelay*/ ctx[2],
 						easing: linear
 					}
 				: undefined);
@@ -143,213 +148,295 @@ function create_if_block(ctx) {
 		},
 		d(detaching) {
 			if (detaching) detach(div);
-			destroy_each(each_blocks, detaching);
+			if_blocks[current_block_type_index].d();
 			if (detaching && div_outro) div_outro.end();
 		}
 	};
 }
 
-// (29:65) 
-function create_if_block_4(ctx) {
-	let video;
-	let video_src_value;
-	let video_poster_value;
-	let video_loop_value;
-	let video_controls_value;
+// (80:4) {:else}
+function create_else_block(ctx) {
+	let mediaitem;
+	let current;
+
+	mediaitem = new MediaItem({
+			props: {
+				media: /*mediaData*/ ctx[0][0],
+				objectFit: /*objectFit*/ ctx[6]
+			}
+		});
 
 	return {
 		c() {
-			video = element("video");
-			attr(video, "class", "media-content svelte-129jnm");
-			if (!src_url_equal(video.src, video_src_value = /*media*/ ctx[9].url)) attr(video, "src", video_src_value);
-			attr(video, "poster", video_poster_value = /*media*/ ctx[9].videoCoverUrl);
-			video.playsInline = true;
-			attr(video, "paused", "");
-			video.loop = video_loop_value = false;
-			attr(video, "preload", "auto");
-			attr(video, "crossorigin", "");
-			video.controls = video_controls_value = false;
-			video.muted = true;
+			create_component(mediaitem.$$.fragment);
 		},
 		m(target, anchor) {
-			insert(target, video, anchor);
+			mount_component(mediaitem, target, anchor);
+			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*mediaDataList*/ 64 && !src_url_equal(video.src, video_src_value = /*media*/ ctx[9].url)) {
-				attr(video, "src", video_src_value);
-			}
-
-			if (dirty & /*mediaDataList*/ 64 && video_poster_value !== (video_poster_value = /*media*/ ctx[9].videoCoverUrl)) {
-				attr(video, "poster", video_poster_value);
-			}
+			const mediaitem_changes = {};
+			if (dirty & /*mediaData*/ 1) mediaitem_changes.media = /*mediaData*/ ctx[0][0];
+			if (dirty & /*objectFit*/ 64) mediaitem_changes.objectFit = /*objectFit*/ ctx[6];
+			mediaitem.$set(mediaitem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(mediaitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(mediaitem.$$.fragment, local);
+			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(video);
+			destroy_component(mediaitem, detaching);
 		}
 	};
 }
 
-// (27:64) 
-function create_if_block_3(ctx) {
-	let img;
-	let img_src_value;
-	let img_alt_value;
+// (31:4) {#if carouselEnabled}
+function create_if_block_1(ctx) {
+	let swiper;
+	let current;
+
+	swiper = new Swiper({
+			props: {
+				style: "height: 100%",
+				modules: [Autoplay],
+				spaceBetween: 30,
+				autoplay: /*autoplay*/ ctx[10]
+				? noTypecheck({
+						delay: 2000,
+						stopOnLastSlide: false,
+						disableOnInteraction: false
+					})
+				: false,
+				loop: true,
+				$$slots: { default: [create_default_slot] },
+				$$scope: { ctx }
+			}
+		});
+
+	swiper.$on("slideChange", /*slideChange_handler*/ ctx[13]);
 
 	return {
 		c() {
-			img = element("img");
-			attr(img, "class", "media-content svelte-129jnm");
-			if (!src_url_equal(img.src, img_src_value = /*media*/ ctx[9].videoCoverUrl)) attr(img, "src", img_src_value);
-			attr(img, "alt", img_alt_value = /*media*/ ctx[9].name);
+			create_component(swiper.$$.fragment);
 		},
 		m(target, anchor) {
-			insert(target, img, anchor);
+			mount_component(swiper, target, anchor);
+			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*mediaDataList*/ 64 && !src_url_equal(img.src, img_src_value = /*media*/ ctx[9].videoCoverUrl)) {
-				attr(img, "src", img_src_value);
+			const swiper_changes = {};
+
+			if (dirty & /*autoplay*/ 1024) swiper_changes.autoplay = /*autoplay*/ ctx[10]
+			? noTypecheck({
+					delay: 2000,
+					stopOnLastSlide: false,
+					disableOnInteraction: false
+				})
+			: false;
+
+			if (dirty & /*$$scope, mediaDataList, objectFit*/ 131392) {
+				swiper_changes.$$scope = { dirty, ctx };
 			}
 
-			if (dirty & /*mediaDataList*/ 64 && img_alt_value !== (img_alt_value = /*media*/ ctx[9].name)) {
-				attr(img, "alt", img_alt_value);
-			}
+			swiper.$set(swiper_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(swiper.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(swiper.$$.fragment, local);
+			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(img);
+			destroy_component(swiper, detaching);
 		}
 	};
 }
 
-// (25:8) {#if media.type === 'Image'}
-function create_if_block_2(ctx) {
-	let img;
-	let img_src_value;
-	let img_alt_value;
+// (75:10) <SwiperSlide>
+function create_default_slot_1(ctx) {
+	let mediaitem;
+	let t;
+	let current;
+
+	mediaitem = new MediaItem({
+			props: {
+				media: /*media*/ ctx[14],
+				objectFit: /*objectFit*/ ctx[6]
+			}
+		});
 
 	return {
 		c() {
-			img = element("img");
-			attr(img, "class", "media-content carousel-indicator-item svelte-129jnm");
-			if (!src_url_equal(img.src, img_src_value = /*media*/ ctx[9].url)) attr(img, "src", img_src_value);
-			attr(img, "alt", img_alt_value = /*media*/ ctx[9].name);
+			create_component(mediaitem.$$.fragment);
+			t = space();
 		},
 		m(target, anchor) {
-			insert(target, img, anchor);
+			mount_component(mediaitem, target, anchor);
+			insert(target, t, anchor);
+			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*mediaDataList*/ 64 && !src_url_equal(img.src, img_src_value = /*media*/ ctx[9].url)) {
-				attr(img, "src", img_src_value);
-			}
-
-			if (dirty & /*mediaDataList*/ 64 && img_alt_value !== (img_alt_value = /*media*/ ctx[9].name)) {
-				attr(img, "alt", img_alt_value);
-			}
+			const mediaitem_changes = {};
+			if (dirty & /*mediaDataList*/ 256) mediaitem_changes.media = /*media*/ ctx[14];
+			if (dirty & /*objectFit*/ 64) mediaitem_changes.objectFit = /*objectFit*/ ctx[6];
+			mediaitem.$set(mediaitem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(mediaitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(mediaitem.$$.fragment, local);
+			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(img);
+			destroy_component(mediaitem, detaching);
+			if (detaching) detach(t);
 		}
 	};
 }
 
-// (33:8) {#if media.type === 'Video'}
-function create_if_block_1(ctx) {
-	let div;
+// (74:8) {#each mediaDataList as media}
+function create_each_block(ctx) {
+	let swiperslide;
+	let current;
+
+	swiperslide = new SwiperSlide({
+			props: {
+				$$slots: { default: [create_default_slot_1] },
+				$$scope: { ctx }
+			}
+		});
 
 	return {
 		c() {
-			div = element("div");
-			attr(div, "class", "video-icon svelte-129jnm");
-			set_style(div, "background-image", "url(" + Image_Play + ")");
+			create_component(swiperslide.$$.fragment);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
+			mount_component(swiperslide, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const swiperslide_changes = {};
+
+			if (dirty & /*$$scope, mediaDataList, objectFit*/ 131392) {
+				swiperslide_changes.$$scope = { dirty, ctx };
+			}
+
+			swiperslide.$set(swiperslide_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(swiperslide.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(swiperslide.$$.fragment, local);
+			current = false;
 		},
-		p: noop,
 		d(detaching) {
-			if (detaching) detach(div);
+			destroy_component(swiperslide, detaching);
 		}
 	};
 }
 
-// (23:4) {#each mediaDataList as media}
-function create_each_block(ctx) {
-	let div;
-	let t0;
-	let t1;
-	let div_style_value;
+// (32:6) <Swiper         style="height: 100%"         modules={[Autoplay]}         spaceBetween={30}         autoplay={autoplay ? noTypecheck({ delay: 2000, stopOnLastSlide: false, disableOnInteraction: false }) : false}         loop         on:slideChange={async (event) => {           if (!autoplay) return           if (!autoplayConfig.autoplayVideo) return           const swiper = event.detail[0]           if (!swiper) return            const index = swiper.realIndex           // loop 完一圈后，swiper.realIndex 会重复一次，比如有三张图片 [0,1,2]，slideChange 触发后输出的 index 为 [0,1,2,0,0,1,2,0,0,1,2,0], 添加 lastAutoPlayIndex 判断后，输出为[0,1,2,0,1,2,0,1,2,0]           if (index === lastAutoPlayIndex) return           lastAutoPlayIndex = index            const media = mediaDataList[index]           if (!media) return           if (media.type !== 'Video') return            // 先暂停自动轮播           swiper.autoplay.stop()           // 播放视频           await new Promise((resolve) => {             const video = swiper.slides[swiper.activeIndex]?.querySelector('video')             if (!video) {               resolve(noTypecheck(null))               return             }             video.play()             video.onerror = () => resolve(noTypecheck(null))             video.onended = () => resolve(noTypecheck(null))             video.onclick = () => {               video.pause()               resolve(noTypecheck(null))             }           })           // 恢复自动轮播           swiper.autoplay.start()         }}       >
+function create_default_slot(ctx) {
+	let each_1_anchor;
+	let current;
+	let each_value = /*mediaDataList*/ ctx[8];
+	let each_blocks = [];
 
-	function select_block_type(ctx, dirty) {
-		if (/*media*/ ctx[9].type === 'Image') return create_if_block_2;
-		if (/*media*/ ctx[9].type === 'Video' && /*media*/ ctx[9].videoCoverUrl) return create_if_block_3;
-		if (/*media*/ ctx[9].type === 'Video' && !/*media*/ ctx[9].videoCoverUrl) return create_if_block_4;
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
 	}
 
-	let current_block_type = select_block_type(ctx, -1);
-	let if_block0 = current_block_type && current_block_type(ctx);
-	let if_block1 = /*media*/ ctx[9].type === 'Video' && create_if_block_1(ctx);
+	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
 
 	return {
 		c() {
-			div = element("div");
-			if (if_block0) if_block0.c();
-			t0 = space();
-			if (if_block1) if_block1.c();
-			t1 = space();
-			attr(div, "class", "carousel-item svelte-129jnm");
-			attr(div, "style", div_style_value = `object-fit: ${/*objectFit*/ ctx[5]};`);
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
-			if (if_block0) if_block0.m(div, null);
-			append(div, t0);
-			if (if_block1) if_block1.m(div, null);
-			append(div, t1);
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+			current = true;
 		},
 		p(ctx, dirty) {
-			if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block0) {
-				if_block0.p(ctx, dirty);
-			} else {
-				if (if_block0) if_block0.d(1);
-				if_block0 = current_block_type && current_block_type(ctx);
+			if (dirty & /*mediaDataList, objectFit*/ 320) {
+				each_value = /*mediaDataList*/ ctx[8];
+				let i;
 
-				if (if_block0) {
-					if_block0.c();
-					if_block0.m(div, t0);
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+						transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						transition_in(each_blocks[i], 1);
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
 				}
-			}
 
-			if (/*media*/ ctx[9].type === 'Video') {
-				if (if_block1) {
-					if_block1.p(ctx, dirty);
-				} else {
-					if_block1 = create_if_block_1(ctx);
-					if_block1.c();
-					if_block1.m(div, t1);
+				group_outros();
+
+				for (i = each_value.length; i < each_blocks.length; i += 1) {
+					out(i);
 				}
-			} else if (if_block1) {
-				if_block1.d(1);
-				if_block1 = null;
+
+				check_outros();
 			}
+		},
+		i(local) {
+			if (current) return;
 
-			if (dirty & /*objectFit*/ 32 && div_style_value !== (div_style_value = `object-fit: ${/*objectFit*/ ctx[5]};`)) {
-				attr(div, "style", div_style_value);
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
 			}
+
+			current = true;
 		},
-		d(detaching) {
-			if (detaching) detach(div);
+		o(local) {
+			each_blocks = each_blocks.filter(Boolean);
 
-			if (if_block0) {
-				if_block0.d();
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
 			}
 
-			if (if_block1) if_block1.d();
+			current = false;
+		},
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(each_1_anchor);
 		}
 	};
 }
 
 function create_fragment(ctx) {
 	let if_block_anchor;
-	let if_block = /*unfolded*/ ctx[3] && create_if_block(ctx);
+	let current;
+	let if_block = /*unfolded*/ ctx[4] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -359,13 +446,14 @@ function create_fragment(ctx) {
 		m(target, anchor) {
 			if (if_block) if_block.m(target, anchor);
 			insert(target, if_block_anchor, anchor);
+			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*unfolded*/ ctx[3]) {
+			if (/*unfolded*/ ctx[4]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*unfolded*/ 8) {
+					if (dirty & /*unfolded*/ 16) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -385,10 +473,13 @@ function create_fragment(ctx) {
 			}
 		},
 		i(local) {
+			if (current) return;
 			transition_in(if_block);
+			current = true;
 		},
 		o(local) {
 			transition_out(if_block);
+			current = false;
 		},
 		d(detaching) {
 			if (if_block) if_block.d(detaching);
@@ -398,7 +489,9 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let carouselEnabled;
 	let mediaDataList;
+	let autoplay;
 	let { mediaData } = $$props;
 	let { inDelay = 0 } = $$props;
 	let { outDelay = 0 } = $$props;
@@ -407,34 +500,93 @@ function instance($$self, $$props, $$invalidate) {
 	let { animation = true } = $$props;
 	let { objectFit = 'cover' } = $$props;
 	let { enableCarousel = true } = $$props;
+	let { autoplayConfig = { autoplay: true, autoplayVideo: false } } = $$props;
+	let lastAutoPlayIndex = null;
+
+	const slideChange_handler = async event => {
+		if (!autoplay) return;
+		if (!autoplayConfig.autoplayVideo) return;
+		const swiper = event.detail[0];
+		if (!swiper) return;
+		const index = swiper.realIndex;
+
+		// loop 完一圈后，swiper.realIndex 会重复一次，比如有三张图片 [0,1,2]，slideChange 触发后输出的 index 为 [0,1,2,0,0,1,2,0,0,1,2,0], 添加 lastAutoPlayIndex 判断后，输出为[0,1,2,0,1,2,0,1,2,0]
+		if (index === lastAutoPlayIndex) return;
+
+		$$invalidate(9, lastAutoPlayIndex = index);
+		const media = mediaDataList[index];
+		if (!media) return;
+		if (media.type !== 'Video') return;
+
+		// 先暂停自动轮播
+		swiper.autoplay.stop();
+
+		// 播放视频
+		await new Promise(resolve => {
+				const video = swiper.slides[swiper.activeIndex]?.querySelector('video');
+
+				if (!video) {
+					resolve(noTypecheck(null));
+					return;
+				}
+
+				video.play();
+				video.onerror = () => resolve(noTypecheck(null));
+				video.onended = () => resolve(noTypecheck(null));
+
+				video.onclick = () => {
+					video.pause();
+					resolve(noTypecheck(null));
+				};
+			});
+
+		// 恢复自动轮播
+		swiper.autoplay.start();
+	};
 
 	$$self.$$set = $$props => {
-		if ('mediaData' in $$props) $$invalidate(7, mediaData = $$props.mediaData);
-		if ('inDelay' in $$props) $$invalidate(0, inDelay = $$props.inDelay);
-		if ('outDelay' in $$props) $$invalidate(1, outDelay = $$props.outDelay);
-		if ('duration' in $$props) $$invalidate(2, duration = $$props.duration);
-		if ('unfolded' in $$props) $$invalidate(3, unfolded = $$props.unfolded);
-		if ('animation' in $$props) $$invalidate(4, animation = $$props.animation);
-		if ('objectFit' in $$props) $$invalidate(5, objectFit = $$props.objectFit);
-		if ('enableCarousel' in $$props) $$invalidate(8, enableCarousel = $$props.enableCarousel);
+		if ('mediaData' in $$props) $$invalidate(0, mediaData = $$props.mediaData);
+		if ('inDelay' in $$props) $$invalidate(1, inDelay = $$props.inDelay);
+		if ('outDelay' in $$props) $$invalidate(2, outDelay = $$props.outDelay);
+		if ('duration' in $$props) $$invalidate(3, duration = $$props.duration);
+		if ('unfolded' in $$props) $$invalidate(4, unfolded = $$props.unfolded);
+		if ('animation' in $$props) $$invalidate(5, animation = $$props.animation);
+		if ('objectFit' in $$props) $$invalidate(6, objectFit = $$props.objectFit);
+		if ('enableCarousel' in $$props) $$invalidate(12, enableCarousel = $$props.enableCarousel);
+		if ('autoplayConfig' in $$props) $$invalidate(7, autoplayConfig = $$props.autoplayConfig);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*enableCarousel, mediaData*/ 384) {
-			$: $$invalidate(6, mediaDataList = (enableCarousel ? mediaData : [mediaData[0]]).filter(notNil));
+		if ($$self.$$.dirty & /*enableCarousel, mediaData*/ 4097) {
+			$: $$invalidate(11, carouselEnabled = enableCarousel && (mediaData === null || mediaData === void 0
+			? void 0
+			: mediaData.length) > 1);
+		}
+
+		if ($$self.$$.dirty & /*mediaData*/ 1) {
+			$: $$invalidate(8, mediaDataList = mediaData);
+		}
+
+		if ($$self.$$.dirty & /*mediaDataList, autoplayConfig*/ 384) {
+			$: $$invalidate(10, autoplay = mediaDataList.length > 1 && autoplayConfig.autoplay);
 		}
 	};
 
 	return [
+		mediaData,
 		inDelay,
 		outDelay,
 		duration,
 		unfolded,
 		animation,
 		objectFit,
+		autoplayConfig,
 		mediaDataList,
-		mediaData,
-		enableCarousel
+		lastAutoPlayIndex,
+		autoplay,
+		carouselEnabled,
+		enableCarousel,
+		slideChange_handler
 	];
 }
 
@@ -449,14 +601,15 @@ class Component extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				mediaData: 7,
-				inDelay: 0,
-				outDelay: 1,
-				duration: 2,
-				unfolded: 3,
-				animation: 4,
-				objectFit: 5,
-				enableCarousel: 8
+				mediaData: 0,
+				inDelay: 1,
+				outDelay: 2,
+				duration: 3,
+				unfolded: 4,
+				animation: 5,
+				objectFit: 6,
+				enableCarousel: 12,
+				autoplayConfig: 7
 			},
 			add_css
 		);