@plaidev/karte-action-sdk 1.1.106-27910965.2bd7d973 → 1.1.106-27913102.1715f7db

package/dist/index.es.js

@@ -1721,20 +1721,20 @@ var widget = /*#__PURE__*/Object.freeze({
 
 /* src/components/Normalize.svelte generated by Svelte v3.53.1 */
 
-function add_css$i(target) {
+function add_css$k(target) {
 	append_styles(target, "svelte-tr4qnr", "@import 'https://esm.sh/normalize.css';");
 }
 
 class Normalize extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, null, null, safe_not_equal, {}, add_css$i);
+		init(this, options, null, null, safe_not_equal, {}, add_css$k);
 	}
 }
 
 /* src/components/State.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$m(ctx) {
+function create_fragment$o(ctx) {
 	let normalize;
 	let t;
 	let current;
@@ -1793,7 +1793,7 @@ function create_fragment$m(ctx) {
 	};
 }
 
-function instance$m($$self, $$props, $$invalidate) {
+function instance$o($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 
 	$$self.$$set = $$props => {
@@ -1806,13 +1806,13 @@ function instance$m($$self, $$props, $$invalidate) {
 class State extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$m, create_fragment$m, safe_not_equal, {});
+		init(this, options, instance$o, create_fragment$o, safe_not_equal, {});
 	}
 }
 
 /* src/components/StateItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$h(target) {
+function add_css$j(target) {
 	append_styles(target, "svelte-2qb6dm", ".state-item.svelte-2qb6dm{position:absolute;display:none}");
 }
 
@@ -1879,7 +1879,7 @@ function create_if_block$3(ctx) {
 	};
 }
 
-function create_fragment$l(ctx) {
+function create_fragment$n(ctx) {
 	let if_block_anchor;
 	let current;
 	let if_block = /*$state*/ ctx[1] === /*path*/ ctx[0] && create_if_block$3(ctx);
@@ -1934,7 +1934,7 @@ function create_fragment$l(ctx) {
 	};
 }
 
-function instance$l($$self, $$props, $$invalidate) {
+function instance$n($$self, $$props, $$invalidate) {
 	let $state;
 	component_subscribe($$self, state, $$value => $$invalidate(1, $state = $$value));
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -1959,13 +1959,13 @@ function instance$l($$self, $$props, $$invalidate) {
 class StateItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$l, create_fragment$l, safe_not_equal, { path: 0 }, add_css$h);
+		init(this, options, instance$n, create_fragment$n, safe_not_equal, { path: 0 }, add_css$j);
 	}
 }
 
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
-function add_css$g(target) {
+function add_css$i(target) {
 	append_styles(target, "svelte-1d4fta", ".background.svelte-1d4fta{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
 
@@ -1997,7 +1997,7 @@ function create_if_block$2(ctx) {
 	};
 }
 
-function create_fragment$k(ctx) {
+function create_fragment$m(ctx) {
 	let if_block_anchor;
 	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$2(ctx);
 
@@ -2033,7 +2033,7 @@ function create_fragment$k(ctx) {
 	};
 }
 
-function instance$k($$self, $$props, $$invalidate) {
+function instance$m($$self, $$props, $$invalidate) {
 	let { backgroundOverray = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
@@ -2048,13 +2048,13 @@ function instance$k($$self, $$props, $$invalidate) {
 class BackgroundOverray extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$k, create_fragment$k, safe_not_equal, { backgroundOverray: 0 }, add_css$g);
+		init(this, options, instance$m, create_fragment$m, safe_not_equal, { backgroundOverray: 0 }, add_css$i);
 	}
 }
 
 /* src/components/Modal.svelte generated by Svelte v3.53.1 */
 
-function add_css$f(target) {
+function add_css$h(target) {
 	append_styles(target, "svelte-12dkw0q", ".modal.svelte-12dkw0q{position:fixed;box-sizing:border-box;z-index:2147483647}.close.svelte-12dkw0q{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-12dkw0q:hover{transform:rotate(90deg)}.modal-content.svelte-12dkw0q{display:flex;justify-content:center;align-items:center}");
 }
 
@@ -2235,7 +2235,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$l(ctx) {
 	let backgroundoverray;
 	let t;
 	let if_block_anchor;
@@ -2328,7 +2328,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$l($$self, $$props, $$invalidate) {
 	let click;
 	let close;
 	let closable;
@@ -2516,8 +2516,8 @@ class Modal extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$j,
-			create_fragment$j,
+			instance$l,
+			create_fragment$l,
 			safe_not_equal,
 			{
 				onClick: 17,
@@ -2533,14 +2533,14 @@ class Modal extends SvelteComponent {
 				closeButtonColor: 2,
 				_closeStyle: 3
 			},
-			add_css$f
+			add_css$h
 		);
 	}
 }
 
 /* src/components/Grid.svelte generated by Svelte v3.53.1 */
 
-function create_fragment$i(ctx) {
+function create_fragment$k(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[8].default;
@@ -2598,7 +2598,7 @@ function create_fragment$i(ctx) {
 	};
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { width = '512px' } = $$props;
@@ -2643,7 +2643,7 @@ class Grid extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$i, create_fragment$i, safe_not_equal, {
+		init(this, options, instance$k, create_fragment$k, safe_not_equal, {
 			width: 1,
 			height: 2,
 			rows: 3,
@@ -2825,7 +2825,7 @@ function create_default_slot(ctx) {
 	};
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$j(ctx) {
 	let stateitem;
 	let current;
 
@@ -2870,7 +2870,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { path } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
@@ -2941,7 +2941,7 @@ class GridModalState extends SvelteComponent {
 	constructor(options) {
 		super();
 
-		init(this, options, instance$h, create_fragment$h, safe_not_equal, {
+		init(this, options, instance$j, create_fragment$j, safe_not_equal, {
 			path: 0,
 			onClick: 1,
 			clickEventName: 2,
@@ -2966,11 +2966,11 @@ class GridModalState extends SvelteComponent {
 
 /* src/components/GridItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$e(target) {
+function add_css$g(target) {
 	append_styles(target, "svelte-n7kdl3", ".grid-item.svelte-n7kdl3{word-break:break-all;position:relative}.grid-item-inner.svelte-n7kdl3{position:absolute;inset:0}");
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$i(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -3033,7 +3033,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let _style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { x1 } = $$props;
@@ -3086,8 +3086,8 @@ class GridItem extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$g,
-			create_fragment$g,
+			instance$i,
+			create_fragment$i,
 			safe_not_equal,
 			{
 				x1: 2,
@@ -3097,18 +3097,18 @@ class GridItem extends SvelteComponent {
 				z: 6,
 				background: 7
 			},
-			add_css$e
+			add_css$g
 		);
 	}
 }
 
 /* src/components/Flex.svelte generated by Svelte v3.53.1 */
 
-function add_css$d(target) {
+function add_css$f(target) {
 	append_styles(target, "svelte-1e71ejc", ".flex.svelte-1e71ejc{display:flex}");
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$h(ctx) {
 	let div;
 	let div_style_value;
 	let current;
@@ -3173,7 +3173,7 @@ function getFlexContext() {
 	return getContext(FlexContextKey);
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'row' } = $$props;
 	let { width = '100%' } = $$props;
@@ -3199,8 +3199,8 @@ class Flex extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$f,
-			create_fragment$f,
+			instance$h,
+			create_fragment$h,
 			safe_not_equal,
 			{
 				direction: 0,
@@ -3208,18 +3208,18 @@ class Flex extends SvelteComponent {
 				height: 2,
 				_style: 3
 			},
-			add_css$d
+			add_css$f
 		);
 	}
 }
 
 /* src/components/FlexItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$c(target) {
+function add_css$e(target) {
 	append_styles(target, "svelte-1p0bk1x", ".flex-item.svelte-1p0bk1x{max-width:100%;max-height:100%;position:relative;isolation:isolate}");
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$g(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[4].default;
@@ -3277,7 +3277,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { length } = $$props;
 	let { _style = '' } = $$props;
@@ -3320,7 +3320,7 @@ function instance$e($$self, $$props, $$invalidate) {
 class FlexItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$e, create_fragment$e, safe_not_equal, { length: 1, _style: 2 }, add_css$c);
+		init(this, options, instance$g, create_fragment$g, safe_not_equal, { length: 1, _style: 2 }, add_css$e);
 	}
 }
 
@@ -3415,7 +3415,7 @@ function create_each_block$1(ctx) {
 	};
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$f(ctx) {
 	let each_1_anchor;
 	let each_value = /*items*/ ctx[0];
 	let each_blocks = [];
@@ -3474,7 +3474,7 @@ function create_fragment$d(ctx) {
 
 const regexp = /(\r?\n)/;
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let items;
 	let { text = 'サンプルSample' } = $$props;
 
@@ -3494,17 +3494,17 @@ function instance$d($$self, $$props, $$invalidate) {
 class RenderText extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$d, create_fragment$d, safe_not_equal, { text: 1 });
+		init(this, options, instance$f, create_fragment$f, safe_not_equal, { text: 1 });
 	}
 }
 
 /* src/components/TextElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$b(target) {
+function add_css$d(target) {
 	append_styles(target, "svelte-9en2jg", ".text-element.svelte-9en2jg.svelte-9en2jg{display:flex;position:relative;width:100%;height:100%;box-sizing:border-box;white-space:pre-wrap;overflow:auto}.text-element-inner.svelte-9en2jg.svelte-9en2jg{width:100%;height:auto}.text-direction-vertical.svelte-9en2jg.svelte-9en2jg{writing-mode:vertical-rl}.text-direction-vertical.svelte-9en2jg .text-element-inner.svelte-9en2jg{width:auto;height:100%}");
 }
 
-function create_fragment$c(ctx) {
+function create_fragment$e(ctx) {
 	let div1;
 	let div0;
 	let rendertext;
@@ -3556,7 +3556,7 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$c($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let style;
 	let { text = 'サンプルSample' } = $$props;
 	let { _textStyle = 'font-size:12px;' } = $$props;
@@ -3586,8 +3586,8 @@ class TextElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$c,
-			create_fragment$c,
+			instance$e,
+			create_fragment$e,
 			safe_not_equal,
 			{
 				text: 0,
@@ -3595,18 +3595,18 @@ class TextElement extends SvelteComponent {
 				textDirection: 1,
 				_style: 4
 			},
-			add_css$b
+			add_css$d
 		);
 	}
 }
 
 /* src/components/TextButtonElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$a(target) {
+function add_css$c(target) {
 	append_styles(target, "svelte-tx5xf5", ".text-button-element.svelte-tx5xf5{width:100%;height:100%}.text-button.svelte-tx5xf5{display:flex;justify-content:center;align-items:center;width:100%;height:100%;background-color:transparent;border:none;box-shadow:transparent;box-sizing:border-box;cursor:pointer;transition:box-shadow 0.2s;white-space:pre-wrap;overflow:hidden}.text-button.svelte-tx5xf5:active{box-shadow:inset 0 0 100px 100px rgba(0, 0, 0, 0.3)}.text-button.svelte-tx5xf5:hover{box-shadow:inset 0 0 100px 100px rgba(255, 255, 255, 0.3)}");
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$d(ctx) {
 	let div;
 	let button;
 	let rendertext;
@@ -3667,7 +3667,7 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$d($$self, $$props, $$invalidate) {
 	let { text = 'ボタンラベル' } = $$props;
 	let { onClick = { operation: 'none', args: [] } } = $$props;
 
@@ -3701,8 +3701,8 @@ class TextButtonElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$b,
-			create_fragment$b,
+			instance$d,
+			create_fragment$d,
 			safe_not_equal,
 			{
 				text: 0,
@@ -3711,18 +3711,18 @@ class TextButtonElement extends SvelteComponent {
 				_buttonStyle: 1,
 				_style: 2
 			},
-			add_css$a
+			add_css$c
 		);
 	}
 }
 
 /* src/components/ImageElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$9(target) {
+function add_css$b(target) {
 	append_styles(target, "svelte-t8kpqw", ".image-element.svelte-t8kpqw{display:flex;position:relative;width:100%;height:100%;max-width:100%;max-height:100%;justify-content:center;align-items:center;white-space:nowrap;box-sizing:border-box;overflow:hidden}.image.svelte-t8kpqw{width:100%;height:100%}.transport.svelte-t8kpqw:hover,.transport.svelte-t8kpqw:focus{opacity:0.75;box-shadow:0 5px 16px rgba(0, 0, 0, 0.1), 0 8px 28px rgba(0, 0, 0, 0.16)}");
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$c(ctx) {
 	let div;
 	let img;
 	let img_src_value;
@@ -3784,7 +3784,7 @@ function create_fragment$a(ctx) {
 	};
 }
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let { src = 'https://admin.karte.io/action-editor2/public/images/no_image_en.svg' } = $$props;
 	let { alt = 'No Image' } = $$props;
 	let { transport = false } = $$props;
@@ -3822,8 +3822,8 @@ class ImageElement extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$a,
-			create_fragment$a,
+			instance$c,
+			create_fragment$c,
 			safe_not_equal,
 			{
 				src: 0,
@@ -3834,18 +3834,18 @@ class ImageElement extends SvelteComponent {
 				_imageStyle: 3,
 				_style: 4
 			},
-			add_css$9
+			add_css$b
 		);
 	}
 }
 
 /* src/components/List.svelte generated by Svelte v3.53.1 */
 
-function add_css$8(target) {
+function add_css$a(target) {
 	append_styles(target, "svelte-dfqtyx", ".list.svelte-dfqtyx{display:flex;width:100%;height:100%;overflow:hidden}");
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$b(ctx) {
 	let div;
 	let current;
 	const default_slot_template = /*#slots*/ ctx[6].default;
@@ -3905,7 +3905,7 @@ function create_fragment$9(ctx) {
 
 const LIST_CONTEXT_KEY = Symbol();
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let style;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { direction = 'vertical' } = $$props;
@@ -3972,8 +3972,8 @@ class List extends SvelteComponent {
 		init(
 			this,
 			options,
-			instance$9,
-			create_fragment$9,
+			instance$b,
+			create_fragment$b,
 			safe_not_equal,
 			{
 				direction: 1,
@@ -3981,18 +3981,18 @@ class List extends SvelteComponent {
 				background: 3,
 				_style: 4
 			},
-			add_css$8
+			add_css$a
 		);
 	}
 }
 
 /* src/components/ListItem.svelte generated by Svelte v3.53.1 */
 
-function add_css$7(target) {
+function add_css$9(target) {
 	append_styles(target, "svelte-h5j4xe", ".list-item.svelte-h5j4xe{flex:auto;box-sizing:border-box;min-width:0;min-height:0;position:relative}.list-item-inner.svelte-h5j4xe{position:absolute;inset:0}");
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$a(ctx) {
 	let div1;
 	let div0;
 	let current;
@@ -4073,7 +4073,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let click;
 	let listItemStyle;
 	let { $$slots: slots = {}, $$scope } = $$props;
@@ -4163,17 +4163,17 @@ function instance$8($$self, $$props, $$invalidate) {
 class ListItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$8, create_fragment$8, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$7);
+		init(this, options, instance$a, create_fragment$a, safe_not_equal, { onClick: 3, clickEventName: 4, _style: 0 }, add_css$9);
 	}
 }
 
 /* src/components/EmbedElement.svelte generated by Svelte v3.53.1 */
 
-function add_css$6(target) {
+function add_css$8(target) {
 	append_styles(target, "svelte-k86zna", ".embed.svelte-k86zna{position:relative;box-shadow:0 1px rgba(0, 0, 0, 0.06);padding-top:56.25%;overflow:hidden}.embed.svelte-k86zna iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
 }
 
-function create_fragment$7(ctx) {
+function create_fragment$9(ctx) {
 	let div;
 
 	return {
@@ -4200,7 +4200,7 @@ function create_fragment$7(ctx) {
 	};
 }
 
-function instance$7($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let { code } = $$props;
 	let { _style = '' } = $$props;
 
@@ -4215,7 +4215,439 @@ function instance$7($$self, $$props, $$invalidate) {
 class EmbedElement extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$7, create_fragment$7, safe_not_equal, { code: 0, _style: 1 }, add_css$6);
+		init(this, options, instance$9, create_fragment$9, safe_not_equal, { code: 0, _style: 1 }, add_css$8);
+	}
+}
+
+/* src/components/MovieYouTubeElement.svelte generated by Svelte v3.53.1 */
+
+function add_css$7(target) {
+	append_styles(target, "svelte-k86zna", ".embed.svelte-k86zna{position:relative;box-shadow:0 1px rgba(0, 0, 0, 0.06);padding-top:56.25%;overflow:hidden}.embed.svelte-k86zna iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
+}
+
+function create_fragment$8(ctx) {
+	let div1;
+	let div0;
+
+	return {
+		c() {
+			div1 = element("div");
+			div0 = element("div");
+			attr(div0, "class", "karte-player");
+			attr(div1, "class", "embed svelte-k86zna");
+			attr(div1, "style", /*_style*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+			/*div0_binding*/ ctx[7](div0);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*_style*/ 1) {
+				attr(div1, "style", /*_style*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			/*div0_binding*/ ctx[7](null);
+		}
+	};
+}
+
+function instance$8($$self, $$props, $$invalidate) {
+	let $system;
+	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
+	let { videoId } = $$props;
+	let { sendEvent } = $$props;
+	let { autoplay = false } = $$props;
+	let { loop = false } = $$props;
+	let { mute = false } = $$props;
+	let { _style = "" } = $$props;
+
+	// @ts-ignore
+	if (!window.YT) {
+		const tag = document.createElement("script");
+		tag.src = "//www.youtube.com/iframe_api";
+		const firstScriptTag = document.getElementsByTagName("script")[0];
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+	}
+
+	let startDate = 0;
+	let totalPlaySeconds = 0;
+	let alreadyPlay = false;
+	let player = null;
+	let domRef = null;
+
+	function sendMovieEvent(event_name, values = {}) {
+		if (!sendEvent) {
+			return;
+		}
+
+		const sentValues = {
+			campaign_id: $system.campaignId,
+			shorten_id: $system.shortenId,
+			...values
+		};
+
+		send_event(event_name, sentValues);
+	}
+
+	function sendPlaytime() {
+		if (!startDate) {
+			return;
+		}
+
+		const currentDate = Date.now();
+		const playSeconds = Math.round((currentDate - startDate) / 1000);
+		totalPlaySeconds += playSeconds;
+
+		sendMovieEvent("_movie_playtime", {
+			seconds: playSeconds,
+			total_seconds: totalPlaySeconds
+		});
+	}
+
+	// @ts-ignore
+	function onPlayerReady(event) {
+		if (mute) {
+			player.mute();
+		}
+	}
+
+	function onStart() {
+		startDate = Date.now();
+
+		if (!alreadyPlay) {
+			alreadyPlay = true;
+			sendMovieEvent("_movie_play");
+		}
+	}
+
+	function onPause() {
+		sendPlaytime();
+		startDate = null;
+	}
+
+	function onFinish() {
+		sendMovieEvent("_movie_finish");
+		sendPlaytime();
+		startDate = null;
+	}
+
+	function onPlayerStateChange(event) {
+		switch (event.data) {
+			case 1:
+				// 再生中
+				onStart();
+				break;
+			case 2:
+				// 停止
+				onPause();
+				break;
+			case 0:
+				// 終了
+				onFinish();
+				break;
+		}
+	}
+
+	function createPlayer() {
+		if (!domRef) {
+			return;
+		}
+
+		const playerVars = {
+			autoplay: autoplay ? 1 : 0,
+			loop: loop ? 1 : 0,
+			rel: 0,
+			playlist: null
+		};
+
+		if (loop) {
+			playerVars.playlist = videoId;
+		}
+
+		// @ts-ignore
+		player = new window.YT.Player(domRef,
+		{
+				videoId,
+				playerVars,
+				events: {
+					onReady: onPlayerReady,
+					onStateChange: onPlayerStateChange
+				}
+			});
+	}
+
+	onDestroy$1(() => {
+		if (player) {
+			player.stopVideo();
+		}
+
+		player.destroy();
+	});
+
+	onMount(() => {
+		setTimeout(
+			() => {
+				// @ts-ignore
+				if (window.YT) {
+					createPlayer();
+				}
+			},
+			200
+		);
+	});
+
+	// @ts-ignore
+	window.onYouTubeIframeAPIReady = () => {
+		createPlayer();
+	};
+
+	window.addEventListener("beforeunload", () => {
+		sendPlaytime();
+	});
+
+	function div0_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			domRef = $$value;
+			$$invalidate(1, domRef);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('videoId' in $$props) $$invalidate(2, videoId = $$props.videoId);
+		if ('sendEvent' in $$props) $$invalidate(3, sendEvent = $$props.sendEvent);
+		if ('autoplay' in $$props) $$invalidate(4, autoplay = $$props.autoplay);
+		if ('loop' in $$props) $$invalidate(5, loop = $$props.loop);
+		if ('mute' in $$props) $$invalidate(6, mute = $$props.mute);
+		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
+	};
+
+	return [_style, domRef, videoId, sendEvent, autoplay, loop, mute, div0_binding];
+}
+
+class MovieYouTubeElement extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance$8,
+			create_fragment$8,
+			safe_not_equal,
+			{
+				videoId: 2,
+				sendEvent: 3,
+				autoplay: 4,
+				loop: 5,
+				mute: 6,
+				_style: 0
+			},
+			add_css$7
+		);
+	}
+}
+
+/* src/components/MovieVimeoElement.svelte generated by Svelte v3.53.1 */
+
+function add_css$6(target) {
+	append_styles(target, "svelte-k86zna", ".embed.svelte-k86zna{position:relative;box-shadow:0 1px rgba(0, 0, 0, 0.06);padding-top:56.25%;overflow:hidden}.embed.svelte-k86zna iframe{position:absolute;top:0;left:0;width:100%;height:100%}");
+}
+
+function create_fragment$7(ctx) {
+	let div1;
+	let div0;
+
+	return {
+		c() {
+			div1 = element("div");
+			div0 = element("div");
+			attr(div0, "class", "karte-player");
+			attr(div1, "class", "embed svelte-k86zna");
+			attr(div1, "style", /*_style*/ ctx[0]);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+			/*div0_binding*/ ctx[7](div0);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*_style*/ 1) {
+				attr(div1, "style", /*_style*/ ctx[0]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			/*div0_binding*/ ctx[7](null);
+		}
+	};
+}
+
+function instance$7($$self, $$props, $$invalidate) {
+	let $system;
+	component_subscribe($$self, system, $$value => $$invalidate(12, $system = $$value));
+	let { videoId } = $$props;
+	let { sendEvent } = $$props;
+	let { autoplay = false } = $$props;
+	let { loop = false } = $$props;
+	let { mute = false } = $$props;
+	let { _style = "" } = $$props;
+
+	// @ts-ignore
+	if (!window.Vimeo) {
+		const tag = document.createElement("script");
+		tag.src = "//player.vimeo.com/api/player.js";
+		const firstScriptTag = document.getElementsByTagName("script")[0];
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+	}
+
+	let startDate = 0;
+	let totalPlaySeconds = 0;
+	let alreadyPlay = false;
+	let player = null;
+	let domRef = null;
+
+	function sendMovieEvent(event_name, values = {}) {
+		if (!sendEvent) {
+			return;
+		}
+
+		const sentValues = {
+			campaign_id: $system.campaignId,
+			shorten_id: $system.shortenId,
+			...values
+		};
+
+		send_event(event_name, sentValues);
+	}
+
+	function sendPlaytime() {
+		if (!startDate) {
+			return;
+		}
+
+		const currentDate = Date.now();
+		const playSeconds = Math.round((currentDate - startDate) / 1000);
+		totalPlaySeconds += playSeconds;
+
+		sendMovieEvent("_movie_playtime", {
+			seconds: playSeconds,
+			total_seconds: totalPlaySeconds
+		});
+	}
+
+	function onPlayerReady() {
+		if (mute) {
+			player.setMuted(true);
+		}
+	}
+
+	function onStart() {
+		startDate = Date.now();
+
+		if (!alreadyPlay) {
+			alreadyPlay = true;
+			sendMovieEvent("_movie_play");
+		}
+	}
+
+	function onPause() {
+		sendPlaytime();
+		startDate = null;
+	}
+
+	function onFinish() {
+		sendMovieEvent("_movie_finish");
+		sendPlaytime();
+		startDate = null;
+	}
+
+	function createPlayer() {
+		if (!domRef) {
+			return;
+		}
+
+		const playerOptions = { id: videoId, autoplay, loop };
+		console.log("createPlayer1");
+
+		// @ts-ignore
+		player = new window.Vimeo.Player(domRef, playerOptions);
+
+		console.log("createPlayer2");
+		player.on("play", onStart);
+		player.on("pause", onPause);
+		player.on("ended", onFinish);
+		onPlayerReady();
+	}
+
+	onDestroy$1(() => {
+		player.destroy();
+	});
+
+	onMount(() => {
+		console.log("onMount1");
+
+		setTimeout(
+			() => {
+				// @ts-ignore
+				if (window.Vimeo) {
+					console.log("onMount2");
+					createPlayer();
+				}
+			},
+			1000
+		);
+	});
+
+	window.addEventListener("beforeunload", () => {
+		sendPlaytime();
+	});
+
+	function div0_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			domRef = $$value;
+			$$invalidate(1, domRef);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('videoId' in $$props) $$invalidate(2, videoId = $$props.videoId);
+		if ('sendEvent' in $$props) $$invalidate(3, sendEvent = $$props.sendEvent);
+		if ('autoplay' in $$props) $$invalidate(4, autoplay = $$props.autoplay);
+		if ('loop' in $$props) $$invalidate(5, loop = $$props.loop);
+		if ('mute' in $$props) $$invalidate(6, mute = $$props.mute);
+		if ('_style' in $$props) $$invalidate(0, _style = $$props._style);
+	};
+
+	return [_style, domRef, videoId, sendEvent, autoplay, loop, mute, div0_binding];
+}
+
+class MovieVimeoElement extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance$7,
+			create_fragment$7,
+			safe_not_equal,
+			{
+				videoId: 2,
+				sendEvent: 3,
+				autoplay: 4,
+				loop: 5,
+				mute: 6,
+				_style: 0
+			},
+			add_css$6
+		);
 	}
 }
 
@@ -5125,4 +5557,4 @@ class ImageBlock extends SvelteComponent {
 	}
 }
 
-export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, Form, FormButton, FormRadioButtons, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };
+export { ACTION_CHANGE_STATE_EVENT, ACTION_CLOSE_EVENT, ACTION_DESTROY_EVENT, ACTION_SHOW_EVENT, ALL_ACTION_ID, ALL_ACTION_SHORTEN_ID, Alignments, AnimationStyles, BackgroundSizes, Cursors, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalPlacement, Directions, Elasticities, ElasticityStyle, EmbedElement, Flex, FlexItem, Form, FormButton, FormRadioButtons, FormTextarea, Grid, GridItem, GridModalState, ImageBlock, ImageElement, Justifies, KARTE_ACTION_RID, KARTE_ACTION_ROOT, KARTE_ACTION_SHORTEN_ID, KARTE_MODAL_ROOT, LengthUnits, List, ListItem, MediaQueries, Modal, ModalPositions, MovieVimeoElement, MovieYouTubeElement, NOOP, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, Repeats, State, StateItem, TextBlock, TextButtonBlock, TextButtonElement, TextDirections, TextElement, WritingModes, actionId, actionSetting, addState, applyCss, applyGlobalCss, close, closeAction, closeApp, closed, collection$1 as collection, create, createApp, createFog, customAnimation, customHandlers, customVariables, destroy, destroyed, dispatchDestroyEvent, embed, ensureActionRoot, ensureModalRoot, execOnClickOperation, finalize, getActionSetting, getActionShadowRoot, getCustomHandlers, getCustomVariables, getInternalHandlers, getMarginStyle, getPositionStyle, getState$1 as getState, getStates, getStoreState, getSystem, getTransform, h, handleFocus, handleKeydown, handleState, hasSuffix, hashCode, haveFunction, hideOnScroll, hideOnTime, initialize, internalHandlers, isClosed, isDestroyed, isOpened, isPreview, isStopped, linkTo, loadGlobalScript, loadGlobalStyle, loadStyle, maximumZindex, moveTo, none, onChangeState, onClose, onCreate, onDestroy, onScroll, onShow, onTime, opened, randStr, resetActionSetting, runScript, send_event, setActionSetting, setAutoStart, setClosed, setCustomHandlers, setCustomVariables, setDestroyed, setInternalHandlers, setMaximumZindex, setOpened, setPreviousFocus, setState$1 as setState, setStopped, setSystem, show, showAction, showModal, showOnScroll, showOnTime, state, states, stopped, system, toBr, updateCustomHandlers, updateCustomVariables, updateInternalHandlers, widget };