diff --git "a/bundle.js" "b/bundle.js"
--- "a/bundle.js"
+++ "b/bundle.js"
@@ -4,6 +4,13 @@ var app = (function () {
     'use strict';
 
     function noop() { }
+    const identity = x => x;
+    function assign(tar, src) {
+        // @ts-ignore
+        for (const k in src)
+            tar[k] = src[k];
+        return tar;
+    }
     function add_location(element, file, line, column, char) {
         element.__svelte_meta = {
             loc: { file, line, column, char }
@@ -35,6 +42,97 @@ var app = (function () {
     function is_empty(obj) {
         return Object.keys(obj).length === 0;
     }
+    function create_slot(definition, ctx, $$scope, fn) {
+        if (definition) {
+            const slot_ctx = get_slot_context(definition, ctx, $$scope, fn);
+            return definition[0](slot_ctx);
+        }
+    }
+    function get_slot_context(definition, ctx, $$scope, fn) {
+        return definition[1] && fn
+            ? assign($$scope.ctx.slice(), definition[1](fn(ctx)))
+            : $$scope.ctx;
+    }
+    function get_slot_changes(definition, $$scope, dirty, fn) {
+        if (definition[2] && fn) {
+            const lets = definition[2](fn(dirty));
+            if ($$scope.dirty === undefined) {
+                return lets;
+            }
+            if (typeof lets === 'object') {
+                const merged = [];
+                const len = Math.max($$scope.dirty.length, lets.length);
+                for (let i = 0; i < len; i += 1) {
+                    merged[i] = $$scope.dirty[i] | lets[i];
+                }
+                return merged;
+            }
+            return $$scope.dirty | lets;
+        }
+        return $$scope.dirty;
+    }
+    function update_slot_base(slot, slot_definition, ctx, $$scope, slot_changes, get_slot_context_fn) {
+        if (slot_changes) {
+            const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn);
+            slot.p(slot_context, slot_changes);
+        }
+    }
+    function get_all_dirty_from_scope($$scope) {
+        if ($$scope.ctx.length > 32) {
+            const dirty = [];
+            const length = $$scope.ctx.length / 32;
+            for (let i = 0; i < length; i++) {
+                dirty[i] = -1;
+            }
+            return dirty;
+        }
+        return -1;
+    }
+    function compute_slots(slots) {
+        const result = {};
+        for (const key in slots) {
+            result[key] = true;
+        }
+        return result;
+    }
+    function null_to_empty(value) {
+        return value == null ? '' : value;
+    }
+
+    const is_client = typeof window !== 'undefined';
+    let now = is_client
+        ? () => window.performance.now()
+        : () => Date.now();
+    let raf = is_client ? cb => requestAnimationFrame(cb) : noop;
+
+    const tasks = new Set();
+    function run_tasks(now) {
+        tasks.forEach(task => {
+            if (!task.c(now)) {
+                tasks.delete(task);
+                task.f();
+            }
+        });
+        if (tasks.size !== 0)
+            raf(run_tasks);
+    }
+    /**
+     * Creates a new task that runs on each raf frame
+     * until it returns a falsy value or is aborted
+     */
+    function loop(callback) {
+        let task;
+        if (tasks.size === 0)
+            raf(run_tasks);
+        return {
+            promise: new Promise(fulfill => {
+                tasks.add(task = { c: callback, f: fulfill });
+            }),
+            abort() {
+                tasks.delete(task);
+            }
+        };
+    }
 
     const globals = (typeof window !== 'undefined'
         ? window
@@ -44,6 +142,24 @@ var app = (function () {
     function append(target, node) {
         target.appendChild(node);
     }
+    function get_root_for_style(node) {
+        if (!node)
+            return document;
+        const root = node.getRootNode ? node.getRootNode() : node.ownerDocument;
+        if (root && root.host) {
+            return root;
+        }
+        return node.ownerDocument;
+    }
+    function append_empty_stylesheet(node) {
+        const style_element = element('style');
+        append_stylesheet(get_root_for_style(node), style_element);
+        return style_element.sheet;
+    }
+    function append_stylesheet(node, style) {
+        append(node.head || node, style);
+        return style.sheet;
+    }
     function insert(target, node, anchor) {
         target.insertBefore(node, anchor || null);
     }
@@ -61,6 +177,9 @@ var app = (function () {
     function element(name) {
         return document.createElement(name);
     }
+    function svg_element(name) {
+        return document.createElementNS('http://www.w3.org/2000/svg', name);
+    }
     function text(data) {
         return document.createTextNode(data);
     }
@@ -119,6 +238,71 @@ var app = (function () {
         return e;
     }
 
+    // we need to store the information for multiple documents because a Svelte application could also contain iframes
+    // https://github.com/sveltejs/svelte/issues/3624
+    const managed_styles = new Map();
+    let active = 0;
+    // https://github.com/darkskyapp/string-hash/blob/master/index.js
+    function hash(str) {
+        let hash = 5381;
+        let i = str.length;
+        while (i--)
+            hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+        return hash >>> 0;
+    }
+    function create_style_information(doc, node) {
+        const info = { stylesheet: append_empty_stylesheet(node), rules: {} };
+        managed_styles.set(doc, info);
+        return info;
+    }
+    function create_rule(node, a, b, duration, delay, ease, fn, uid = 0) {
+        const step = 16.666 / duration;
+        let keyframes = '{\n';
+        for (let p = 0; p <= 1; p += step) {
+            const t = a + (b - a) * ease(p);
+            keyframes += p * 100 + `%{${fn(t, 1 - t)}}\n`;
+        }
+        const rule = keyframes + `100% {${fn(b, 1 - b)}}\n}`;
+        const name = `__svelte_${hash(rule)}_${uid}`;
+        const doc = get_root_for_style(node);
+        const { stylesheet, rules } = managed_styles.get(doc) || create_style_information(doc, node);
+        if (!rules[name]) {
+            rules[name] = true;
+            stylesheet.insertRule(`@keyframes ${name} ${rule}`, stylesheet.cssRules.length);
+        }
+        const animation = node.style.animation || '';
+        node.style.animation = `${animation ? `${animation}, ` : ''}${name} ${duration}ms linear ${delay}ms 1 both`;
+        active += 1;
+        return name;
+    }
+    function delete_rule(node, name) {
+        const previous = (node.style.animation || '').split(', ');
+        const next = previous.filter(name
+            ? anim => anim.indexOf(name) < 0 // remove specific animation
+            : anim => anim.indexOf('__svelte') === -1 // remove all Svelte animations
+        );
+        const deleted = previous.length - next.length;
+        if (deleted) {
+            node.style.animation = next.join(', ');
+            active -= deleted;
+            if (!active)
+                clear_rules();
+        }
+    }
+    function clear_rules() {
+        raf(() => {
+            if (active)
+                return;
+            managed_styles.forEach(info => {
+                const { ownerNode } = info.stylesheet;
+                // there is no ownerNode if it runs on jsdom.
+                if (ownerNode)
+                    detach(ownerNode);
+            });
+            managed_styles.clear();
+        });
+    }
+
     let current_component;
     function set_current_component(component) {
         current_component = component;
@@ -140,6 +324,27 @@ var app = (function () {
     function onMount(fn) {
         get_current_component().$$.on_mount.push(fn);
     }
+    /**
+     * Schedules a callback to run immediately before the component is unmounted.
+     *
+     * Out of `onMount`, `beforeUpdate`, `afterUpdate` and `onDestroy`, this is the
+     * only one that runs inside a server-side component.
+     *
+     * https://svelte.dev/docs#run-time-svelte-ondestroy
+     */
+    function onDestroy(fn) {
+        get_current_component().$$.on_destroy.push(fn);
+    }
+    // TODO figure out if we still want to support
+    // shorthand events, or if we want to implement
+    // a real bubbling mechanism
+    function bubble(component, event) {
+        const callbacks = component.$$.callbacks[event.type];
+        if (callbacks) {
+            // @ts-ignore
+            callbacks.slice().forEach(fn => fn.call(this, event));
+        }
+    }
 
     const dirty_components = [];
     const binding_callbacks = [];
@@ -246,6 +451,20 @@ var app = (function () {
         targets.forEach((c) => c());
         render_callbacks = filtered;
     }
+
+    let promise;
+    function wait() {
+        if (!promise) {
+            promise = Promise.resolve();
+            promise.then(() => {
+                promise = null;
+            });
+        }
+        return promise;
+    }
+    function dispatch(node, direction, kind) {
+        node.dispatchEvent(custom_event(`${direction ? 'intro' : 'outro'}${kind}`));
+    }
     const outroing = new Set();
     let outros;
     function group_outros() {
@@ -286,6 +505,76 @@ var app = (function () {
             callback();
         }
     }
+    const null_transition = { duration: 0 };
+    function create_in_transition(node, fn, params) {
+        const options = { direction: 'in' };
+        let config = fn(node, params, options);
+        let running = false;
+        let animation_name;
+        let task;
+        let uid = 0;
+        function cleanup() {
+            if (animation_name)
+                delete_rule(node, animation_name);
+        }
+        function go() {
+            const { delay = 0, duration = 300, easing = identity, tick = noop, css } = config || null_transition;
+            if (css)
+                animation_name = create_rule(node, 0, 1, duration, delay, easing, css, uid++);
+            tick(0, 1);
+            const start_time = now() + delay;
+            const end_time = start_time + duration;
+            if (task)
+                task.abort();
+            running = true;
+            add_render_callback(() => dispatch(node, true, 'start'));
+            task = loop(now => {
+                if (running) {
+                    if (now >= end_time) {
+                        tick(1, 0);
+                        dispatch(node, true, 'end');
+                        cleanup();
+                        return running = false;
+                    }
+                    if (now >= start_time) {
+                        const t = easing((now - start_time) / duration);
+                        tick(t, 1 - t);
+                    }
+                }
+                return running;
+            });
+        }
+        let started = false;
+        return {
+            start() {
+                if (started)
+                    return;
+                started = true;
+                delete_rule(node);
+                if (is_function(config)) {
+                    config = config(options);
+                    wait().then(go);
+                }
+                else {
+                    go();
+                }
+            },
+            invalidate() {
+                started = false;
+            },
+            end() {
+                if (running) {
+                    cleanup();
+                    running = false;
+                }
+            }
+        };
+    }
+
+    function destroy_block(block, lookup) {
+        block.d(1);
+        lookup.delete(block.key);
+    }
     function outro_and_destroy_block(block, lookup) {
         transition_out(block, 1, 1, () => {
             lookup.delete(block.key);
@@ -552,6 +841,10 @@ var app = (function () {
         else
             dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
     }
+    function prop_dev(node, property, value) {
+        node[property] = value;
+        dispatch_dev('SvelteDOMSetProperty', { node, property, value });
+    }
     function set_data_dev(text, data) {
         data = '' + data;
         if (text.data === data)
@@ -597,17 +890,17 @@ var app = (function () {
 
     /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */
 
-    const { console: console_1 } = globals;
-    const file$5 = "src\\VideoGradioComponentBrainstorming.svelte";
+    const { console: console_1$2 } = globals;
+    const file$c = "src\\VideoGradioComponentBrainstorming.svelte";
 
-    function get_each_context$2(ctx, list, i) {
+    function get_each_context$3(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[15] = list[i];
     	return child_ctx;
     }
 
     // (85:4) {#each kitchenOptions as option}
-    function create_each_block$2(ctx) {
+    function create_each_block$3(ctx) {
     	let option;
     	let t_value = /*option*/ ctx[15] + "";
     	let t;
@@ -618,7 +911,7 @@ var app = (function () {
     			t = text(t_value);
     			option.__value = /*option*/ ctx[15];
     			option.value = option.__value;
-    			add_location(option, file$5, 85, 6, 2561);
+    			add_location(option, file$c, 85, 6, 2561);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, option, anchor);
@@ -632,7 +925,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$2.name,
+    		id: create_each_block$3.name,
     		type: "each",
     		source: "(85:4) {#each kitchenOptions as option}",
     		ctx
@@ -641,7 +934,7 @@ var app = (function () {
     	return block;
     }
 
-    function create_fragment$5(ctx) {
+    function create_fragment$c(ctx) {
     	let h1;
     	let t1;
     	let div1;
@@ -668,7 +961,7 @@ var app = (function () {
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
+    		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
     	}
 
     	const block = {
@@ -698,34 +991,34 @@ var app = (function () {
     				each_blocks[i].c();
     			}
 
-    			add_location(h1, file$5, 66, 0, 1800);
+    			add_location(h1, file$c, 66, 0, 1800);
     			attr_dev(track, "kind", "captions");
     			if (!src_url_equal(track.src, track_src_value = "path/to/your/captions/file.vtt")) attr_dev(track, "src", track_src_value);
     			attr_dev(track, "srclang", "en");
     			attr_dev(track, "label", "English");
-    			add_location(track, file$5, 72, 4, 2006);
+    			add_location(track, file$c, 72, 4, 2006);
     			attr_dev(video, "id", "videoCanvas");
     			video.autoplay = true;
     			attr_dev(video, "class", "svelte-ufd3fo");
-    			add_location(video, file$5, 70, 2, 1965);
+    			add_location(video, file$c, 70, 2, 1965);
     			attr_dev(div0, "id", "overlayText");
     			attr_dev(div0, "class", "svelte-ufd3fo");
-    			add_location(div0, file$5, 74, 2, 2111);
+    			add_location(div0, file$c, 74, 2, 2111);
     			attr_dev(div1, "id", "videoContainer");
     			attr_dev(div1, "class", "svelte-ufd3fo");
-    			add_location(div1, file$5, 68, 0, 1911);
+    			add_location(div1, file$c, 68, 0, 1911);
     			attr_dev(canvas_1, "id", "myCanvas");
     			set_style(canvas_1, "border", "2px solid black");
     			attr_dev(canvas_1, "width", "500");
     			attr_dev(canvas_1, "height", "500");
-    			add_location(canvas_1, file$5, 77, 0, 2186);
+    			add_location(canvas_1, file$c, 77, 0, 2186);
     			attr_dev(input, "type", "text");
-    			add_location(input, file$5, 78, 0, 2294);
-    			add_location(button, file$5, 82, 2, 2429);
+    			add_location(input, file$c, 78, 0, 2294);
+    			add_location(button, file$c, 82, 2, 2429);
     			if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[9].call(select));
-    			add_location(select, file$5, 83, 2, 2479);
+    			add_location(select, file$c, 83, 2, 2479);
     			attr_dev(div2, "id", "frameForButtons");
-    			add_location(div2, file$5, 81, 0, 2399);
+    			add_location(div2, file$c, 81, 0, 2399);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -784,12 +1077,12 @@ var app = (function () {
     				let i;
 
     				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$2(ctx, each_value, i);
+    					const child_ctx = get_each_context$3(ctx, each_value, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(child_ctx, dirty);
     					} else {
-    						each_blocks[i] = create_each_block$2(child_ctx);
+    						each_blocks[i] = create_each_block$3(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(select, null);
     					}
@@ -827,7 +1120,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$5.name,
+    		id: create_fragment$c.name,
     		type: "component",
     		source: "",
     		ctx
@@ -840,7 +1133,7 @@ var app = (function () {
     	
     } // Logic for 'Test OCR' button
 
-    function instance$5($$self, $$props, $$invalidate) {
+    function instance$c($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('VideoGradioComponentBrainstorming', slots, []);
     	let selectedOption = 'Stove - lu'; // default value
@@ -902,7 +1195,7 @@ var app = (function () {
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$2.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
     	});
 
     	function canvas_1_binding($$value) {
@@ -973,13 +1266,13 @@ var app = (function () {
     class VideoGradioComponentBrainstorming extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$5, create_fragment$5, safe_not_equal, {});
+    		init(this, options, instance$c, create_fragment$c, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "VideoGradioComponentBrainstorming",
     			options,
-    			id: create_fragment$5.name
+    			id: create_fragment$c.name
     		});
     	}
     }
@@ -1050,29 +1343,29 @@ var app = (function () {
     }
 
     /* src\NestedCommentsTestfromReact.svelte generated by Svelte v3.59.2 */
-    const file$4 = "src\\NestedCommentsTestfromReact.svelte";
+    const file$b = "src\\NestedCommentsTestfromReact.svelte";
 
-    function get_each_context$1(ctx, list, i) {
+    function get_each_context$2(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[6] = list[i];
     	return child_ctx;
     }
 
-    function get_each_context_1(ctx, list, i) {
+    function get_each_context_1$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[9] = list[i];
     	return child_ctx;
     }
 
     // (29:12) {#if comment.items}
-    function create_if_block$1(ctx) {
+    function create_if_block$6(ctx) {
     	let each_1_anchor;
     	let each_value_1 = /*comment*/ ctx[6].items;
     	validate_each_argument(each_value_1);
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value_1.length; i += 1) {
-    		each_blocks[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
+    		each_blocks[i] = create_each_block_1$1(get_each_context_1$1(ctx, each_value_1, i));
     	}
 
     	const block = {
@@ -1099,12 +1392,12 @@ var app = (function () {
     				let i;
 
     				for (i = 0; i < each_value_1.length; i += 1) {
-    					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+    					const child_ctx = get_each_context_1$1(ctx, each_value_1, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(child_ctx, dirty);
     					} else {
-    						each_blocks[i] = create_each_block_1(child_ctx);
+    						each_blocks[i] = create_each_block_1$1(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
     					}
@@ -1125,7 +1418,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_if_block$1.name,
+    		id: create_if_block$6.name,
     		type: "if",
     		source: "(29:12) {#if comment.items}",
     		ctx
@@ -1135,7 +1428,7 @@ var app = (function () {
     }
 
     // (30:16) {#each comment.items as item}
-    function create_each_block_1(ctx) {
+    function create_each_block_1$1(ctx) {
     	let t0_value = /*item*/ ctx[9].title + "";
     	let t0;
     	let t1;
@@ -1160,7 +1453,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block_1.name,
+    		id: create_each_block_1$1.name,
     		type: "each",
     		source: "(30:16) {#each comment.items as item}",
     		ctx
@@ -1170,7 +1463,7 @@ var app = (function () {
     }
 
     // (23:4) {#each comments as comment}
-    function create_each_block$1(ctx) {
+    function create_each_block$2(ctx) {
     	let div1;
     	let div0;
     	let span;
@@ -1188,7 +1481,7 @@ var app = (function () {
     		return /*click_handler*/ ctx[5](/*comment*/ ctx[6]);
     	}
 
-    	let if_block = /*comment*/ ctx[6].items && create_if_block$1(ctx);
+    	let if_block = /*comment*/ ctx[6].items && create_if_block$6(ctx);
 
     	const block = {
     		c: function create() {
@@ -1203,13 +1496,13 @@ var app = (function () {
     			if (if_block) if_block.c();
     			t4 = space();
     			attr_dev(span, "class", "text");
-    			add_location(span, file$4, 25, 16, 818);
-    			add_location(button, file$4, 26, 16, 877);
+    			add_location(span, file$b, 25, 16, 818);
+    			add_location(button, file$b, 26, 16, 877);
     			attr_dev(div0, "class", "card");
-    			add_location(div0, file$4, 24, 12, 782);
+    			add_location(div0, file$b, 24, 12, 782);
     			attr_dev(div1, "key", div1_key_value = /*comment*/ ctx[6].id);
     			set_style(div1, "margin-left", "20px");
-    			add_location(div1, file$4, 23, 8, 719);
+    			add_location(div1, file$b, 23, 8, 719);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, div1, anchor);
@@ -1235,7 +1528,7 @@ var app = (function () {
     				if (if_block) {
     					if_block.p(ctx, dirty);
     				} else {
-    					if_block = create_if_block$1(ctx);
+    					if_block = create_if_block$6(ctx);
     					if_block.c();
     					if_block.m(div1, t4);
     				}
@@ -1258,7 +1551,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block$1.name,
+    		id: create_each_block$2.name,
     		type: "each",
     		source: "(23:4) {#each comments as comment}",
     		ctx
@@ -1267,7 +1560,7 @@ var app = (function () {
     	return block;
     }
 
-    function create_fragment$4(ctx) {
+    function create_fragment$b(ctx) {
     	let div1;
     	let div0;
     	let input;
@@ -1281,7 +1574,7 @@ var app = (function () {
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+    		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
     	}
 
     	const block = {
@@ -1300,11 +1593,11 @@ var app = (function () {
 
     			attr_dev(input, "type", "text");
     			attr_dev(input, "placeholder", "Add a comment");
-    			add_location(input, file$4, 19, 8, 530);
-    			add_location(button, file$4, 20, 8, 613);
-    			add_location(div0, file$4, 18, 4, 515);
+    			add_location(input, file$b, 19, 8, 530);
+    			add_location(button, file$b, 20, 8, 613);
+    			add_location(div0, file$b, 18, 4, 515);
     			attr_dev(div1, "id", "comment-container");
-    			add_location(div1, file$4, 17, 0, 481);
+    			add_location(div1, file$b, 17, 0, 481);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1344,12 +1637,12 @@ var app = (function () {
     				let i;
 
     				for (i = 0; i < each_value.length; i += 1) {
-    					const child_ctx = get_each_context$1(ctx, each_value, i);
+    					const child_ctx = get_each_context$2(ctx, each_value, i);
 
     					if (each_blocks[i]) {
     						each_blocks[i].p(child_ctx, dirty);
     					} else {
-    						each_blocks[i] = create_each_block$1(child_ctx);
+    						each_blocks[i] = create_each_block$2(child_ctx);
     						each_blocks[i].c();
     						each_blocks[i].m(div1, null);
     					}
@@ -1374,7 +1667,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$4.name,
+    		id: create_fragment$b.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1383,7 +1676,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$4($$self, $$props, $$invalidate) {
+    function instance$b($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('NestedCommentsTestfromReact', slots, []);
     	let comments = [];
@@ -1449,21 +1742,21 @@ var app = (function () {
     class NestedCommentsTestfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$4, create_fragment$4, safe_not_equal, {});
+    		init(this, options, instance$b, create_fragment$b, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "NestedCommentsTestfromReact",
     			options,
-    			id: create_fragment$4.name
+    			id: create_fragment$b.name
     		});
     	}
     }
 
     /* src\MovingDotPortfromReact.svelte generated by Svelte v3.59.2 */
-    const file$3 = "src\\MovingDotPortfromReact.svelte";
+    const file$a = "src\\MovingDotPortfromReact.svelte";
 
-    function create_fragment$3(ctx) {
+    function create_fragment$a(ctx) {
     	let div;
 
     	const block = {
@@ -1472,7 +1765,7 @@ var app = (function () {
     			attr_dev(div, "class", "MovingDot svelte-12o76ak");
     			set_style(div, "left", /*position*/ ctx[0].x + "px");
     			set_style(div, "top", /*position*/ ctx[0].y + "px");
-    			add_location(div, file$3, 39, 0, 1178);
+    			add_location(div, file$a, 39, 0, 1178);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1498,7 +1791,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$3.name,
+    		id: create_fragment$a.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1509,7 +1802,7 @@ var app = (function () {
 
     const step = 10;
 
-    function instance$3($$self, $$props, $$invalidate) {
+    function instance$a($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotPortfromReact', slots, []);
     	let { position = { x: 0, y: 0 } } = $$props;
@@ -1583,13 +1876,13 @@ var app = (function () {
     class MovingDotPortfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$3, create_fragment$3, safe_not_equal, { position: 0, boundaries: 1 });
+    		init(this, options, instance$a, create_fragment$a, safe_not_equal, { position: 0, boundaries: 1 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotPortfromReact",
     			options,
-    			id: create_fragment$3.name
+    			id: create_fragment$a.name
     		});
     	}
 
@@ -1612,9 +1905,9 @@ var app = (function () {
 
     /* src\MovingDotTargetPortfromReact.svelte generated by Svelte v3.59.2 */
 
-    const file$2 = "src\\MovingDotTargetPortfromReact.svelte";
+    const file$9 = "src\\MovingDotTargetPortfromReact.svelte";
 
-    function create_fragment$2(ctx) {
+    function create_fragment$9(ctx) {
     	let div;
 
     	const block = {
@@ -1623,7 +1916,7 @@ var app = (function () {
     			attr_dev(div, "class", "target svelte-4yc66h");
     			set_style(div, "left", /*position*/ ctx[0].x + "px");
     			set_style(div, "top", /*position*/ ctx[0].y + "px");
-    			add_location(div, file$2, 4, 0, 49);
+    			add_location(div, file$9, 4, 0, 49);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -1649,7 +1942,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$2.name,
+    		id: create_fragment$9.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1658,7 +1951,7 @@ var app = (function () {
     	return block;
     }
 
-    function instance$2($$self, $$props, $$invalidate) {
+    function instance$9($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotTargetPortfromReact', slots, []);
     	let { position } = $$props;
@@ -1695,13 +1988,13 @@ var app = (function () {
     class MovingDotTargetPortfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$2, create_fragment$2, safe_not_equal, { position: 0 });
+    		init(this, options, instance$9, create_fragment$9, safe_not_equal, { position: 0 });
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotTargetPortfromReact",
     			options,
-    			id: create_fragment$2.name
+    			id: create_fragment$9.name
     		});
     	}
 
@@ -1715,16 +2008,16 @@ var app = (function () {
     }
 
     /* src\MovingDotSpacePortfromReact.svelte generated by Svelte v3.59.2 */
-    const file$1 = "src\\MovingDotSpacePortfromReact.svelte";
+    const file$8 = "src\\MovingDotSpacePortfromReact.svelte";
 
-    function get_each_context(ctx, list, i) {
+    function get_each_context$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[7] = list[i];
     	return child_ctx;
     }
 
-    // (31:4) {#each targets as target (target.name)}
-    function create_each_block(key_1, ctx) {
+    // (32:4) {#each targets as target (target.name)}
+    function create_each_block$1(key_1, ctx) {
     	let first;
     	let target;
     	let t0;
@@ -1750,7 +2043,7 @@ var app = (function () {
     			set_style(span, "position", "absolute");
     			set_style(span, "left", /*target*/ ctx[7].x + "px");
     			set_style(span, "top", /*target*/ ctx[7].y + "px");
-    			add_location(span, file$1, 32, 8, 1368);
+    			add_location(span, file$8, 33, 8, 1435);
     			this.first = first;
     		},
     		m: function mount(target$1, anchor) {
@@ -1783,39 +2076,41 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_each_block.name,
+    		id: create_each_block$1.name,
     		type: "each",
-    		source: "(31:4) {#each targets as target (target.name)}",
+    		source: "(32:4) {#each targets as target (target.name)}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (37:4) {#if isModalOpen}
-    function create_if_block(ctx) {
+    // (38:4) {#if isModalOpen}
+    function create_if_block$5(ctx) {
     	const block = { c: noop, m: noop, d: noop };
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_if_block.name,
+    		id: create_if_block$5.name,
     		type: "if",
-    		source: "(37:4) {#if isModalOpen}",
+    		source: "(38:4) {#if isModalOpen}",
     		ctx
     	});
 
     	return block;
     }
 
-    function create_fragment$1(ctx) {
-    	let div;
+    function create_fragment$8(ctx) {
+    	let div1;
+    	let div0;
+    	let t1;
     	let canvas_1;
-    	let t0;
+    	let t2;
     	let movingdot;
-    	let t1;
+    	let t3;
     	let each_blocks = [];
     	let each_1_lookup = new Map();
-    	let t2;
+    	let t4;
     	let current;
 
     	movingdot = new MovingDotPortfromReact({
@@ -1829,56 +2124,64 @@ var app = (function () {
     	let each_value = /*targets*/ ctx[2];
     	validate_each_argument(each_value);
     	const get_key = ctx => /*target*/ ctx[7].name;
-    	validate_each_keys(ctx, each_value, get_each_context, get_key);
+    	validate_each_keys(ctx, each_value, get_each_context$1, get_key);
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		let child_ctx = get_each_context(ctx, each_value, i);
+    		let child_ctx = get_each_context$1(ctx, each_value, i);
     		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
     	}
 
-    	let if_block = /*isModalOpen*/ ctx[4] && create_if_block(ctx);
+    	let if_block = /*isModalOpen*/ ctx[4] && create_if_block$5(ctx);
 
     	const block = {
     		c: function create() {
-    			div = element("div");
+    			div1 = element("div");
+    			div0 = element("div");
+    			div0.textContent = "Minor Game Events Log for player";
+    			t1 = space();
     			canvas_1 = element("canvas");
-    			t0 = space();
+    			t2 = space();
     			create_component(movingdot.$$.fragment);
-    			t1 = space();
+    			t3 = space();
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				each_blocks[i].c();
     			}
 
-    			t2 = space();
+    			t4 = space();
     			if (if_block) if_block.c();
+    			attr_dev(div0, "id", "overlayText");
+    			attr_dev(div0, "class", "svelte-e0peue");
+    			add_location(div0, file$8, 28, 4, 1144);
     			attr_dev(canvas_1, "width", "100%");
     			attr_dev(canvas_1, "height", "100%");
-    			add_location(canvas_1, file$1, 28, 4, 1157);
-    			attr_dev(div, "style", /*spaceStyle*/ ctx[5]);
-    			attr_dev(div, "tabindex", "0");
-    			add_location(div, file$1, 27, 0, 1114);
+    			attr_dev(canvas_1, "tabindex", "0");
+    			add_location(canvas_1, file$8, 29, 4, 1211);
+    			attr_dev(div1, "style", /*spaceStyle*/ ctx[5]);
+    			add_location(div1, file$8, 27, 0, 1114);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, div, anchor);
-    			append_dev(div, canvas_1);
+    			insert_dev(target, div1, anchor);
+    			append_dev(div1, div0);
+    			append_dev(div1, t1);
+    			append_dev(div1, canvas_1);
     			/*canvas_1_binding*/ ctx[6](canvas_1);
-    			append_dev(div, t0);
-    			mount_component(movingdot, div, null);
-    			append_dev(div, t1);
+    			append_dev(div1, t2);
+    			mount_component(movingdot, div1, null);
+    			append_dev(div1, t3);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				if (each_blocks[i]) {
-    					each_blocks[i].m(div, null);
+    					each_blocks[i].m(div1, null);
     				}
     			}
 
-    			append_dev(div, t2);
-    			if (if_block) if_block.m(div, null);
+    			append_dev(div1, t4);
+    			if (if_block) if_block.m(div1, null);
     			current = true;
     		},
     		p: function update(ctx, [dirty]) {
@@ -1886,8 +2189,8 @@ var app = (function () {
     				each_value = /*targets*/ ctx[2];
     				validate_each_argument(each_value);
     				group_outros();
-    				validate_each_keys(ctx, each_value, get_each_context, get_key);
-    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, t2, get_each_context);
+    				validate_each_keys(ctx, each_value, get_each_context$1, get_key);
+    				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block$1, t4, get_each_context$1);
     				check_outros();
     			}
     		},
@@ -1911,7 +2214,7 @@ var app = (function () {
     			current = false;
     		},
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(div);
+    			if (detaching) detach_dev(div1);
     			/*canvas_1_binding*/ ctx[6](null);
     			destroy_component(movingdot);
 
@@ -1925,7 +2228,7 @@ var app = (function () {
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment$1.name,
+    		id: create_fragment$8.name,
     		type: "component",
     		source: "",
     		ctx
@@ -1939,7 +2242,7 @@ var app = (function () {
     } // Collision logic
     // To open modal or adjust positions, update isModalOpen or dotPosition accordingly
 
-    function instance$1($$self, $$props, $$invalidate) {
+    function instance$8($$self, $$props, $$invalidate) {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('MovingDotSpacePortfromReact', slots, []);
     	let canvas;
@@ -2006,146 +2309,3084 @@ var app = (function () {
     class MovingDotSpacePortfromReact extends SvelteComponentDev {
     	constructor(options) {
     		super(options);
-    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
+    		init(this, options, instance$8, create_fragment$8, safe_not_equal, {});
 
     		dispatch_dev("SvelteRegisterComponent", {
     			component: this,
     			tagName: "MovingDotSpacePortfromReact",
     			options,
-    			id: create_fragment$1.name
+    			id: create_fragment$8.name
     		});
     	}
     }
 
-    /* src\App.svelte generated by Svelte v3.59.2 */
-    const file = "src\\App.svelte";
+    /* node_modules\svelte-youtube-embed\Button.svelte generated by Svelte v3.59.2 */
 
-    function create_fragment(ctx) {
-    	let main;
-    	let h10;
-    	let t0;
-    	let t1;
-    	let t2;
-    	let t3;
-    	let p;
-    	let t4;
-    	let a;
-    	let t6;
-    	let t7;
-    	let h11;
-    	let t9;
-    	let nestedcommentstestfromreact;
-    	let t10;
-    	let videogradiocomponentbrainstorming;
-    	let t11;
-    	let hr;
-    	let t12;
-    	let dotgame;
-    	let current;
-    	nestedcommentstestfromreact = new NestedCommentsTestfromReact({ $$inline: true });
-    	videogradiocomponentbrainstorming = new VideoGradioComponentBrainstorming({ $$inline: true });
-    	dotgame = new MovingDotSpacePortfromReact({ $$inline: true });
+    const file$7 = "node_modules\\svelte-youtube-embed\\Button.svelte";
+
+    // (9:0) {:else}
+    function create_else_block$1(ctx) {
+    	let button;
+    	let svg;
+    	let path;
+    	let mounted;
+    	let dispose;
 
     	const block = {
     		c: function create() {
-    			main = element("main");
-    			h10 = element("h1");
-    			t0 = text("Hello ");
-    			t1 = text(/*name*/ ctx[0]);
-    			t2 = text("!");
-    			t3 = space();
-    			p = element("p");
-    			t4 = text("Visit the ");
-    			a = element("a");
-    			a.textContent = "Svelte tutorial";
-    			t6 = text(" to learn how to build Svelte apps.");
-    			t7 = space();
-    			h11 = element("h1");
-    			h11.textContent = "My new component test";
-    			t9 = space();
-    			create_component(nestedcommentstestfromreact.$$.fragment);
-    			t10 = space();
-    			create_component(videogradiocomponentbrainstorming.$$.fragment);
-    			t11 = space();
-    			hr = element("hr");
-    			t12 = space();
-    			create_component(dotgame.$$.fragment);
-    			attr_dev(h10, "class", "svelte-1tky8bj");
-    			add_location(h10, file, 9, 1, 281);
-    			attr_dev(a, "href", "https://svelte.dev/tutorial");
-    			add_location(a, file, 10, 14, 318);
-    			add_location(p, file, 10, 1, 305);
-    			attr_dev(h11, "class", "svelte-1tky8bj");
-    			add_location(h11, file, 12, 1, 417);
-    			add_location(hr, file, 15, 1, 521);
-    			attr_dev(main, "class", "svelte-1tky8bj");
-    			add_location(main, file, 8, 0, 273);
-    		},
-    		l: function claim(nodes) {
-    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    			button = element("button");
+    			svg = svg_element("svg");
+    			path = svg_element("path");
+    			attr_dev(path, "fill", "#ff4e45");
+    			attr_dev(path, "d", "m10 15 5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73Z");
+    			add_location(path, file$7, 16, 6, 407);
+    			attr_dev(svg, "xmlns", "http://www.w3.org/2000/svg");
+    			attr_dev(svg, "aria-hidden", "true");
+    			attr_dev(svg, "class", "iconify iconify--mdi");
+    			attr_dev(svg, "viewBox", "0 0 24 24");
+    			add_location(svg, file$7, 10, 5, 263);
+    			attr_dev(button, "class", "play__btn svelte-1srk8gt");
+    			attr_dev(button, "aria-label", "Play YouTube video");
+    			add_location(button, file$7, 9, 2, 191);
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, main, anchor);
-    			append_dev(main, h10);
-    			append_dev(h10, t0);
-    			append_dev(h10, t1);
-    			append_dev(h10, t2);
-    			append_dev(main, t3);
-    			append_dev(main, p);
-    			append_dev(p, t4);
-    			append_dev(p, a);
-    			append_dev(p, t6);
-    			append_dev(main, t7);
-    			append_dev(main, h11);
-    			append_dev(main, t9);
-    			mount_component(nestedcommentstestfromreact, main, null);
-    			append_dev(main, t10);
-    			mount_component(videogradiocomponentbrainstorming, main, null);
-    			append_dev(main, t11);
-    			append_dev(main, hr);
-    			append_dev(main, t12);
-    			mount_component(dotgame, main, null);
-    			current = true;
-    		},
-    		p: function update(ctx, [dirty]) {
-    			if (!current || dirty & /*name*/ 1) set_data_dev(t1, /*name*/ ctx[0]);
-    		},
-    		i: function intro(local) {
-    			if (current) return;
-    			transition_in(nestedcommentstestfromreact.$$.fragment, local);
-    			transition_in(videogradiocomponentbrainstorming.$$.fragment, local);
-    			transition_in(dotgame.$$.fragment, local);
-    			current = true;
-    		},
-    		o: function outro(local) {
-    			transition_out(nestedcommentstestfromreact.$$.fragment, local);
-    			transition_out(videogradiocomponentbrainstorming.$$.fragment, local);
-    			transition_out(dotgame.$$.fragment, local);
-    			current = false;
+    			insert_dev(target, button, anchor);
+    			append_dev(button, svg);
+    			append_dev(svg, path);
+
+    			if (!mounted) {
+    				dispose = listen_dev(button, "click", /*click_handler_1*/ ctx[4], false, false, false, false);
+    				mounted = true;
+    			}
     		},
+    		p: noop,
+    		i: noop,
+    		o: noop,
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(main);
-    			destroy_component(nestedcommentstestfromreact);
-    			destroy_component(videogradiocomponentbrainstorming);
-    			destroy_component(dotgame);
+    			if (detaching) detach_dev(button);
+    			mounted = false;
+    			dispose();
     		}
     	};
 
     	dispatch_dev("SvelteRegisterBlock", {
     		block,
-    		id: create_fragment.name,
-    		type: "component",
-    		source: "",
+    		id: create_else_block$1.name,
+    		type: "else",
+    		source: "(9:0) {:else}",
     		ctx
     	});
 
     	return block;
     }
 
-    function instance($$self, $$props, $$invalidate) {
-    	let { $$slots: slots = {}, $$scope } = $$props;
-    	validate_slots('App', slots, []);
-    	let { name } = $$props;
+    // (5:0) {#if isCustomPlayButton}
+    function create_if_block$4(ctx) {
+    	let button;
+    	let current;
+    	let mounted;
+    	let dispose;
+    	const default_slot_template = /*#slots*/ ctx[2].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[1], null);
+
+    	const block = {
+    		c: function create() {
+    			button = element("button");
+    			if (default_slot) default_slot.c();
+    			attr_dev(button, "class", "custom__play__btn svelte-1srk8gt");
+    			attr_dev(button, "aria-label", "Play YouTube video");
+    			add_location(button, file$7, 5, 2, 80);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, button, anchor);
+
+    			if (default_slot) {
+    				default_slot.m(button, null);
+    			}
+
+    			current = true;
+
+    			if (!mounted) {
+    				dispose = listen_dev(button, "click", /*click_handler*/ ctx[3], false, false, false, false);
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, dirty) {
+    			if (default_slot) {
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 2)) {
+    					update_slot_base(
+    						default_slot,
+    						default_slot_template,
+    						ctx,
+    						/*$$scope*/ ctx[1],
+    						!current
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[1])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[1], dirty, null),
+    						null
+    					);
+    				}
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(default_slot, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(default_slot, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(button);
+    			if (default_slot) default_slot.d(detaching);
+    			mounted = false;
+    			dispose();
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block$4.name,
+    		type: "if",
+    		source: "(5:0) {#if isCustomPlayButton}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment$7(ctx) {
+    	let current_block_type_index;
+    	let if_block;
+    	let if_block_anchor;
+    	let current;
+    	const if_block_creators = [create_if_block$4, create_else_block$1];
+    	const if_blocks = [];
+
+    	function select_block_type(ctx, dirty) {
+    		if (/*isCustomPlayButton*/ ctx[0]) return 0;
+    		return 1;
+    	}
+
+    	current_block_type_index = select_block_type(ctx);
+    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+
+    	const block = {
+    		c: function create() {
+    			if_block.c();
+    			if_block_anchor = empty();
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			if_blocks[current_block_type_index].m(target, anchor);
+    			insert_dev(target, if_block_anchor, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, [dirty]) {
+    			let previous_block_index = current_block_type_index;
+    			current_block_type_index = select_block_type(ctx);
+
+    			if (current_block_type_index === previous_block_index) {
+    				if_blocks[current_block_type_index].p(ctx, dirty);
+    			} else {
+    				group_outros();
+
+    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+    					if_blocks[previous_block_index] = null;
+    				});
+
+    				check_outros();
+    				if_block = if_blocks[current_block_type_index];
+
+    				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);
+    				}
+
+    				transition_in(if_block, 1);
+    				if_block.m(if_block_anchor.parentNode, if_block_anchor);
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(if_block);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(if_block);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if_blocks[current_block_type_index].d(detaching);
+    			if (detaching) detach_dev(if_block_anchor);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$7.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$7($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('Button', slots, ['default']);
+    	let { isCustomPlayButton } = $$props;
+
+    	$$self.$$.on_mount.push(function () {
+    		if (isCustomPlayButton === undefined && !('isCustomPlayButton' in $$props || $$self.$$.bound[$$self.$$.props['isCustomPlayButton']])) {
+    			console.warn("<Button> was created without expected prop 'isCustomPlayButton'");
+    		}
+    	});
+
+    	const writable_props = ['isCustomPlayButton'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Button> was created with unknown prop '${key}'`);
+    	});
+
+    	function click_handler(event) {
+    		bubble.call(this, $$self, event);
+    	}
+
+    	function click_handler_1(event) {
+    		bubble.call(this, $$self, event);
+    	}
+
+    	$$self.$$set = $$props => {
+    		if ('isCustomPlayButton' in $$props) $$invalidate(0, isCustomPlayButton = $$props.isCustomPlayButton);
+    		if ('$$scope' in $$props) $$invalidate(1, $$scope = $$props.$$scope);
+    	};
+
+    	$$self.$capture_state = () => ({ isCustomPlayButton });
+
+    	$$self.$inject_state = $$props => {
+    		if ('isCustomPlayButton' in $$props) $$invalidate(0, isCustomPlayButton = $$props.isCustomPlayButton);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [isCustomPlayButton, $$scope, slots, click_handler, click_handler_1];
+    }
+
+    class Button extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$7, create_fragment$7, safe_not_equal, { isCustomPlayButton: 0 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "Button",
+    			options,
+    			id: create_fragment$7.name
+    		});
+    	}
+
+    	get isCustomPlayButton() {
+    		throw new Error("<Button>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set isCustomPlayButton(value) {
+    		throw new Error("<Button>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    function cubicOut(t) {
+        const f = t - 1.0;
+        return f * f * f + 1.0;
+    }
+
+    function scale(node, { delay = 0, duration = 400, easing = cubicOut, start = 0, opacity = 0 } = {}) {
+        const style = getComputedStyle(node);
+        const target_opacity = +style.opacity;
+        const transform = style.transform === 'none' ? '' : style.transform;
+        const sd = 1 - start;
+        const od = target_opacity * (1 - opacity);
+        return {
+            delay,
+            duration,
+            easing,
+            css: (_t, u) => `
+			transform: ${transform} scale(${1 - (sd * u)});
+			opacity: ${target_opacity - (od * u)}
+		`
+        };
+    }
+
+    /* node_modules\svelte-youtube-embed\Iframe.svelte generated by Svelte v3.59.2 */
+    const file$6 = "node_modules\\svelte-youtube-embed\\Iframe.svelte";
+
+    function create_fragment$6(ctx) {
+    	let iframe;
+    	let iframe_src_value;
+    	let iframe_intro;
+
+    	const block = {
+    		c: function create() {
+    			iframe = element("iframe");
+    			if (!src_url_equal(iframe.src, iframe_src_value = "https://www.youtube.com/embed/" + /*id*/ ctx[1] + "?autoplay=1&rel=0")) attr_dev(iframe, "src", iframe_src_value);
+    			attr_dev(iframe, "title", /*title*/ ctx[0]);
+    			attr_dev(iframe, "frameborder", "0");
+    			attr_dev(iframe, "allow", "autoplay; picture-in-picture; clipboard-write");
+    			iframe.allowFullscreen = true;
+    			attr_dev(iframe, "class", "svelte-11gebsu");
+    			add_location(iframe, file$6, 7, 0, 137);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, iframe, anchor);
+    		},
+    		p: function update(new_ctx, [dirty]) {
+    			ctx = new_ctx;
+
+    			if (dirty & /*id*/ 2 && !src_url_equal(iframe.src, iframe_src_value = "https://www.youtube.com/embed/" + /*id*/ ctx[1] + "?autoplay=1&rel=0")) {
+    				attr_dev(iframe, "src", iframe_src_value);
+    			}
+
+    			if (dirty & /*title*/ 1) {
+    				attr_dev(iframe, "title", /*title*/ ctx[0]);
+    			}
+    		},
+    		i: function intro(local) {
+    			if (!iframe_intro) {
+    				add_render_callback(() => {
+    					iframe_intro = create_in_transition(iframe, scale, /*animations*/ ctx[2]
+    					? { delay: 500, duration: 800 }
+    					: {});
+
+    					iframe_intro.start();
+    				});
+    			}
+    		},
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(iframe);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$6.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$6($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('Iframe', slots, []);
+    	let { title = "" } = $$props;
+    	let { id = "" } = $$props;
+    	let { animations } = $$props;
+
+    	$$self.$$.on_mount.push(function () {
+    		if (animations === undefined && !('animations' in $$props || $$self.$$.bound[$$self.$$.props['animations']])) {
+    			console.warn("<Iframe> was created without expected prop 'animations'");
+    		}
+    	});
+
+    	const writable_props = ['title', 'id', 'animations'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Iframe> was created with unknown prop '${key}'`);
+    	});
+
+    	$$self.$$set = $$props => {
+    		if ('title' in $$props) $$invalidate(0, title = $$props.title);
+    		if ('id' in $$props) $$invalidate(1, id = $$props.id);
+    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
+    	};
+
+    	$$self.$capture_state = () => ({ scale, title, id, animations });
+
+    	$$self.$inject_state = $$props => {
+    		if ('title' in $$props) $$invalidate(0, title = $$props.title);
+    		if ('id' in $$props) $$invalidate(1, id = $$props.id);
+    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [title, id, animations];
+    }
+
+    class Iframe extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$6, create_fragment$6, safe_not_equal, { title: 0, id: 1, animations: 2 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "Iframe",
+    			options,
+    			id: create_fragment$6.name
+    		});
+    	}
+
+    	get title() {
+    		throw new Error("<Iframe>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set title(value) {
+    		throw new Error("<Iframe>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get id() {
+    		throw new Error("<Iframe>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set id(value) {
+    		throw new Error("<Iframe>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get animations() {
+    		throw new Error("<Iframe>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set animations(value) {
+    		throw new Error("<Iframe>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    /* node_modules\svelte-youtube-embed\Image.svelte generated by Svelte v3.59.2 */
+
+    const file$5 = "node_modules\\svelte-youtube-embed\\Image.svelte";
+
+    // (8:0) {#key play}
+    function create_key_block(ctx) {
+    	let img;
+    	let img_src_value;
+    	let img_alt_value;
+
+    	const block = {
+    		c: function create() {
+    			img = element("img");
+    			if (!src_url_equal(img.src, img_src_value = "https://i.ytimg.com/vi/" + /*id*/ ctx[0] + "/" + (/*altThumb*/ ctx[2] ? 'hqdefault' : 'maxresdefault') + ".jpg")) attr_dev(img, "src", img_src_value);
+    			attr_dev(img, "title", /*title*/ ctx[1]);
+    			attr_dev(img, "alt", img_alt_value = "Youtube video: " + /*title*/ ctx[1]);
+    			attr_dev(img, "referrerpolicy", "no-referrer");
+    			attr_dev(img, "class", "svelte-hw9fhp");
+    			add_location(img, file$5, 8, 2, 136);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, img, anchor);
+    		},
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*id, altThumb*/ 5 && !src_url_equal(img.src, img_src_value = "https://i.ytimg.com/vi/" + /*id*/ ctx[0] + "/" + (/*altThumb*/ ctx[2] ? 'hqdefault' : 'maxresdefault') + ".jpg")) {
+    				attr_dev(img, "src", img_src_value);
+    			}
+
+    			if (dirty & /*title*/ 2) {
+    				attr_dev(img, "title", /*title*/ ctx[1]);
+    			}
+
+    			if (dirty & /*title*/ 2 && img_alt_value !== (img_alt_value = "Youtube video: " + /*title*/ ctx[1])) {
+    				attr_dev(img, "alt", img_alt_value);
+    			}
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(img);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_key_block.name,
+    		type: "key",
+    		source: "(8:0) {#key play}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment$5(ctx) {
+    	let previous_key = /*play*/ ctx[3];
+    	let key_block_anchor;
+    	let key_block = create_key_block(ctx);
+
+    	const block = {
+    		c: function create() {
+    			key_block.c();
+    			key_block_anchor = empty();
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			key_block.m(target, anchor);
+    			insert_dev(target, key_block_anchor, anchor);
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*play*/ 8 && safe_not_equal(previous_key, previous_key = /*play*/ ctx[3])) {
+    				key_block.d(1);
+    				key_block = create_key_block(ctx);
+    				key_block.c();
+    				key_block.m(key_block_anchor.parentNode, key_block_anchor);
+    			} else {
+    				key_block.p(ctx, dirty);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(key_block_anchor);
+    			key_block.d(detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$5.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$5($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('Image', slots, []);
+    	let { id = "" } = $$props;
+    	let { title = "" } = $$props;
+    	let { altThumb = "" } = $$props;
+    	let { play = false } = $$props;
+    	const writable_props = ['id', 'title', 'altThumb', 'play'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Image> was created with unknown prop '${key}'`);
+    	});
+
+    	$$self.$$set = $$props => {
+    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+    		if ('title' in $$props) $$invalidate(1, title = $$props.title);
+    		if ('altThumb' in $$props) $$invalidate(2, altThumb = $$props.altThumb);
+    		if ('play' in $$props) $$invalidate(3, play = $$props.play);
+    	};
+
+    	$$self.$capture_state = () => ({ id, title, altThumb, play });
+
+    	$$self.$inject_state = $$props => {
+    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+    		if ('title' in $$props) $$invalidate(1, title = $$props.title);
+    		if ('altThumb' in $$props) $$invalidate(2, altThumb = $$props.altThumb);
+    		if ('play' in $$props) $$invalidate(3, play = $$props.play);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [id, title, altThumb, play];
+    }
+
+    class Image extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$5, create_fragment$5, safe_not_equal, { id: 0, title: 1, altThumb: 2, play: 3 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "Image",
+    			options,
+    			id: create_fragment$5.name
+    		});
+    	}
+
+    	get id() {
+    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set id(value) {
+    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get title() {
+    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set title(value) {
+    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get altThumb() {
+    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set altThumb(value) {
+    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get play() {
+    		throw new Error("<Image>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set play(value) {
+    		throw new Error("<Image>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    /* node_modules\svelte-youtube-embed\Youtube.svelte generated by Svelte v3.59.2 */
+    const file$4 = "node_modules\\svelte-youtube-embed\\Youtube.svelte";
+    const get_thumbnail_slot_changes = dirty => ({});
+    const get_thumbnail_slot_context = ctx => ({});
+
+    // (38:2) {:else}
+    function create_else_block(ctx) {
+    	let current_block_type_index;
+    	let if_block;
+    	let t0;
+    	let div0;
+    	let t1;
+    	let div1;
+    	let h3;
+    	let t2;
+    	let current;
+    	let mounted;
+    	let dispose;
+    	const if_block_creators = [create_if_block_2, create_else_block_1];
+    	const if_blocks = [];
+
+    	function select_block_type_1(ctx, dirty) {
+    		if (/*isCustomThumbnail*/ ctx[8]) return 0;
+    		return 1;
+    	}
+
+    	current_block_type_index = select_block_type_1(ctx);
+    	if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+
+    	const block = {
+    		c: function create() {
+    			if_block.c();
+    			t0 = space();
+    			div0 = element("div");
+    			t1 = space();
+    			div1 = element("div");
+    			h3 = element("h3");
+    			t2 = text(/*title*/ ctx[3]);
+    			attr_dev(div0, "class", "b__overlay svelte-w0t24e");
+    			add_location(div0, file$4, 43, 4, 1025);
+    			attr_dev(h3, "class", "svelte-w0t24e");
+    			add_location(h3, file$4, 44, 26, 1143);
+    			attr_dev(div1, "class", "v__title svelte-w0t24e");
+    			add_location(div1, file$4, 44, 4, 1121);
+    		},
+    		m: function mount(target, anchor) {
+    			if_blocks[current_block_type_index].m(target, anchor);
+    			insert_dev(target, t0, anchor);
+    			insert_dev(target, div0, anchor);
+    			insert_dev(target, t1, anchor);
+    			insert_dev(target, div1, anchor);
+    			append_dev(div1, h3);
+    			append_dev(h3, t2);
+    			current = true;
+
+    			if (!mounted) {
+    				dispose = [
+    					listen_dev(div0, "click", /*click_handler*/ ctx[10], false, false, false, false),
+    					listen_dev(div0, "keypress", /*keypress_handler*/ ctx[11], false, false, false, false)
+    				];
+
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, dirty) {
+    			if_block.p(ctx, dirty);
+    			if (!current || dirty & /*title*/ 8) set_data_dev(t2, /*title*/ ctx[3]);
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(if_block);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(if_block);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if_blocks[current_block_type_index].d(detaching);
+    			if (detaching) detach_dev(t0);
+    			if (detaching) detach_dev(div0);
+    			if (detaching) detach_dev(t1);
+    			if (detaching) detach_dev(div1);
+    			mounted = false;
+    			run_all(dispose);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_else_block.name,
+    		type: "else",
+    		source: "(38:2) {:else}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (36:2) {#if play}
+    function create_if_block_1(ctx) {
+    	let iframe;
+    	let current;
+
+    	iframe = new Iframe({
+    			props: {
+    				play: /*play*/ ctx[6],
+    				id: /*id*/ ctx[0],
+    				title: /*title*/ ctx[3],
+    				animations: /*animations*/ ctx[2]
+    			},
+    			$$inline: true
+    		});
+
+    	const block = {
+    		c: function create() {
+    			create_component(iframe.$$.fragment);
+    		},
+    		m: function mount(target, anchor) {
+    			mount_component(iframe, target, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			const iframe_changes = {};
+    			if (dirty & /*play*/ 64) iframe_changes.play = /*play*/ ctx[6];
+    			if (dirty & /*id*/ 1) iframe_changes.id = /*id*/ ctx[0];
+    			if (dirty & /*title*/ 8) iframe_changes.title = /*title*/ ctx[3];
+    			if (dirty & /*animations*/ 4) iframe_changes.animations = /*animations*/ ctx[2];
+    			iframe.$set(iframe_changes);
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(iframe.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(iframe.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			destroy_component(iframe, detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block_1.name,
+    		type: "if",
+    		source: "(36:2) {#if play}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (41:4) {:else}
+    function create_else_block_1(ctx) {
+    	let image;
+    	let current;
+
+    	image = new Image({
+    			props: {
+    				id: /*id*/ ctx[0],
+    				title: /*title*/ ctx[3],
+    				altThumb: /*altThumb*/ ctx[1],
+    				play: /*play*/ ctx[6]
+    			},
+    			$$inline: true
+    		});
+
+    	const block = {
+    		c: function create() {
+    			create_component(image.$$.fragment);
+    		},
+    		m: function mount(target, anchor) {
+    			mount_component(image, target, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			const image_changes = {};
+    			if (dirty & /*id*/ 1) image_changes.id = /*id*/ ctx[0];
+    			if (dirty & /*title*/ 8) image_changes.title = /*title*/ ctx[3];
+    			if (dirty & /*altThumb*/ 2) image_changes.altThumb = /*altThumb*/ ctx[1];
+    			if (dirty & /*play*/ 64) image_changes.play = /*play*/ ctx[6];
+    			image.$set(image_changes);
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(image.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(image.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			destroy_component(image, detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_else_block_1.name,
+    		type: "else",
+    		source: "(41:4) {:else}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (39:4) {#if isCustomThumbnail}
+    function create_if_block_2(ctx) {
+    	let current;
+    	const thumbnail_slot_template = /*#slots*/ ctx[9].thumbnail;
+    	const thumbnail_slot = create_slot(thumbnail_slot_template, ctx, /*$$scope*/ ctx[13], get_thumbnail_slot_context);
+
+    	const block = {
+    		c: function create() {
+    			if (thumbnail_slot) thumbnail_slot.c();
+    		},
+    		m: function mount(target, anchor) {
+    			if (thumbnail_slot) {
+    				thumbnail_slot.m(target, anchor);
+    			}
+
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			if (thumbnail_slot) {
+    				if (thumbnail_slot.p && (!current || dirty & /*$$scope*/ 8192)) {
+    					update_slot_base(
+    						thumbnail_slot,
+    						thumbnail_slot_template,
+    						ctx,
+    						/*$$scope*/ ctx[13],
+    						!current
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[13])
+    						: get_slot_changes(thumbnail_slot_template, /*$$scope*/ ctx[13], dirty, get_thumbnail_slot_changes),
+    						get_thumbnail_slot_context
+    					);
+    				}
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(thumbnail_slot, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(thumbnail_slot, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (thumbnail_slot) thumbnail_slot.d(detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block_2.name,
+    		type: "if",
+    		source: "(39:4) {#if isCustomThumbnail}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (47:2) {#if !play}
+    function create_if_block$3(ctx) {
+    	let button;
+    	let current;
+
+    	button = new Button({
+    			props: {
+    				isCustomPlayButton: /*isCustomPlayButton*/ ctx[7],
+    				$$slots: { default: [create_default_slot] },
+    				$$scope: { ctx }
+    			},
+    			$$inline: true
+    		});
+
+    	button.$on("click", /*click_handler_1*/ ctx[12]);
+
+    	const block = {
+    		c: function create() {
+    			create_component(button.$$.fragment);
+    		},
+    		m: function mount(target, anchor) {
+    			mount_component(button, target, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			const button_changes = {};
+
+    			if (dirty & /*$$scope*/ 8192) {
+    				button_changes.$$scope = { dirty, ctx };
+    			}
+
+    			button.$set(button_changes);
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(button.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(button.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			destroy_component(button, detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block$3.name,
+    		type: "if",
+    		source: "(47:2) {#if !play}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (48:4) <Button on:click={() => (play = true)} {isCustomPlayButton}>
+    function create_default_slot(ctx) {
+    	let current;
+    	const default_slot_template = /*#slots*/ ctx[9].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[13], null);
+
+    	const block = {
+    		c: function create() {
+    			if (default_slot) default_slot.c();
+    		},
+    		m: function mount(target, anchor) {
+    			if (default_slot) {
+    				default_slot.m(target, anchor);
+    			}
+
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			if (default_slot) {
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 8192)) {
+    					update_slot_base(
+    						default_slot,
+    						default_slot_template,
+    						ctx,
+    						/*$$scope*/ ctx[13],
+    						!current
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[13])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[13], dirty, null),
+    						null
+    					);
+    				}
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(default_slot, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(default_slot, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (default_slot) default_slot.d(detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_default_slot.name,
+    		type: "slot",
+    		source: "(48:4) <Button on:click={() => (play = true)} {isCustomPlayButton}>",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment$4(ctx) {
+    	let div;
+    	let current_block_type_index;
+    	let if_block0;
+    	let t;
+    	let current;
+    	const if_block_creators = [create_if_block_1, create_else_block];
+    	const if_blocks = [];
+
+    	function select_block_type(ctx, dirty) {
+    		if (/*play*/ ctx[6]) return 0;
+    		return 1;
+    	}
+
+    	current_block_type_index = select_block_type(ctx);
+    	if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    	let if_block1 = !/*play*/ ctx[6] && create_if_block$3(ctx);
+
+    	const block = {
+    		c: function create() {
+    			div = element("div");
+    			if_block0.c();
+    			t = space();
+    			if (if_block1) if_block1.c();
+    			attr_dev(div, "class", "you__tube svelte-w0t24e");
+    			set_style(div, "--aspect-ratio", /*width*/ ctx[4] / /*height*/ ctx[5] || '16/9');
+    			attr_dev(div, "title", /*title*/ ctx[3]);
+    			add_location(div, file$4, 30, 0, 732);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div, anchor);
+    			if_blocks[current_block_type_index].m(div, null);
+    			append_dev(div, t);
+    			if (if_block1) if_block1.m(div, null);
+    			current = true;
+    		},
+    		p: function update(ctx, [dirty]) {
+    			let previous_block_index = current_block_type_index;
+    			current_block_type_index = select_block_type(ctx);
+
+    			if (current_block_type_index === previous_block_index) {
+    				if_blocks[current_block_type_index].p(ctx, dirty);
+    			} else {
+    				group_outros();
+
+    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+    					if_blocks[previous_block_index] = null;
+    				});
+
+    				check_outros();
+    				if_block0 = if_blocks[current_block_type_index];
+
+    				if (!if_block0) {
+    					if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    					if_block0.c();
+    				} else {
+    					if_block0.p(ctx, dirty);
+    				}
+
+    				transition_in(if_block0, 1);
+    				if_block0.m(div, t);
+    			}
+
+    			if (!/*play*/ ctx[6]) {
+    				if (if_block1) {
+    					if_block1.p(ctx, dirty);
+
+    					if (dirty & /*play*/ 64) {
+    						transition_in(if_block1, 1);
+    					}
+    				} else {
+    					if_block1 = create_if_block$3(ctx);
+    					if_block1.c();
+    					transition_in(if_block1, 1);
+    					if_block1.m(div, null);
+    				}
+    			} else if (if_block1) {
+    				group_outros();
+
+    				transition_out(if_block1, 1, 1, () => {
+    					if_block1 = null;
+    				});
+
+    				check_outros();
+    			}
+
+    			if (!current || dirty & /*width, height*/ 48) {
+    				set_style(div, "--aspect-ratio", /*width*/ ctx[4] / /*height*/ ctx[5] || '16/9');
+    			}
+
+    			if (!current || dirty & /*title*/ 8) {
+    				attr_dev(div, "title", /*title*/ ctx[3]);
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(if_block0);
+    			transition_in(if_block1);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(if_block0);
+    			transition_out(if_block1);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div);
+    			if_blocks[current_block_type_index].d();
+    			if (if_block1) if_block1.d();
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$4.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$4($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('Youtube', slots, ['thumbnail','default']);
+    	const $$slots = compute_slots(slots);
+    	let { id = null } = $$props;
+    	let { altThumb = false } = $$props;
+    	let { animations = true } = $$props;
+    	let title = "";
+    	let width = 0;
+    	let height = 0;
+    	let videoInfo = {};
+
+    	onMount(async () => {
+    		const res = await fetch(`//www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`);
+    		videoInfo = await res.json();
+    		$$invalidate(3, title = videoInfo?.title);
+    		$$invalidate(4, width = videoInfo?.width);
+    		$$invalidate(5, height = videoInfo?.height);
+    	});
+
+    	let play = false;
+    	const isCustomPlayButton = $$slots.default;
+    	const isCustomThumbnail = $$slots.thumbnail;
+    	const writable_props = ['id', 'altThumb', 'animations'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<Youtube> was created with unknown prop '${key}'`);
+    	});
+
+    	const click_handler = () => $$invalidate(6, play = true);
+    	const keypress_handler = () => $$invalidate(6, play = true);
+    	const click_handler_1 = () => $$invalidate(6, play = true);
+
+    	$$self.$$set = $$props => {
+    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+    		if ('altThumb' in $$props) $$invalidate(1, altThumb = $$props.altThumb);
+    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
+    		if ('$$scope' in $$props) $$invalidate(13, $$scope = $$props.$$scope);
+    	};
+
+    	$$self.$capture_state = () => ({
+    		onMount,
+    		Button,
+    		Iframe,
+    		Image,
+    		id,
+    		altThumb,
+    		animations,
+    		title,
+    		width,
+    		height,
+    		videoInfo,
+    		play,
+    		isCustomPlayButton,
+    		isCustomThumbnail
+    	});
+
+    	$$self.$inject_state = $$props => {
+    		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+    		if ('altThumb' in $$props) $$invalidate(1, altThumb = $$props.altThumb);
+    		if ('animations' in $$props) $$invalidate(2, animations = $$props.animations);
+    		if ('title' in $$props) $$invalidate(3, title = $$props.title);
+    		if ('width' in $$props) $$invalidate(4, width = $$props.width);
+    		if ('height' in $$props) $$invalidate(5, height = $$props.height);
+    		if ('videoInfo' in $$props) videoInfo = $$props.videoInfo;
+    		if ('play' in $$props) $$invalidate(6, play = $$props.play);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [
+    		id,
+    		altThumb,
+    		animations,
+    		title,
+    		width,
+    		height,
+    		play,
+    		isCustomPlayButton,
+    		isCustomThumbnail,
+    		slots,
+    		click_handler,
+    		keypress_handler,
+    		click_handler_1,
+    		$$scope
+    	];
+    }
+
+    class Youtube extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$4, create_fragment$4, safe_not_equal, { id: 0, altThumb: 1, animations: 2 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "Youtube",
+    			options,
+    			id: create_fragment$4.name
+    		});
+    	}
+
+    	get id() {
+    		throw new Error("<Youtube>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set id(value) {
+    		throw new Error("<Youtube>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get altThumb() {
+    		throw new Error("<Youtube>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set altThumb(value) {
+    		throw new Error("<Youtube>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get animations() {
+    		throw new Error("<Youtube>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set animations(value) {
+    		throw new Error("<Youtube>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    /* src\YoutubeBookmarksfromReact.svelte generated by Svelte v3.59.2 */
+
+    const { console: console_1$1 } = globals;
+    const file$3 = "src\\YoutubeBookmarksfromReact.svelte";
+
+    function get_each_context(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[22] = list[i];
+    	child_ctx[24] = i;
+    	return child_ctx;
+    }
+
+    function get_each_context_1(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[22] = list[i];
+    	child_ctx[24] = i;
+    	return child_ctx;
+    }
+
+    // (145:4) {#if videoId}
+    function create_if_block$2(ctx) {
+    	let youtube;
+    	let current;
+
+    	youtube = new Youtube({
+    			props: { id: /*videoId*/ ctx[0] },
+    			$$inline: true
+    		});
+
+    	youtube.$on("ready", /*onReady*/ ctx[5]);
+
+    	const block = {
+    		c: function create() {
+    			create_component(youtube.$$.fragment);
+    		},
+    		m: function mount(target, anchor) {
+    			mount_component(youtube, target, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			const youtube_changes = {};
+    			if (dirty & /*videoId*/ 1) youtube_changes.id = /*videoId*/ ctx[0];
+    			youtube.$set(youtube_changes);
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(youtube.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(youtube.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			destroy_component(youtube, detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block$2.name,
+    		type: "if",
+    		source: "(145:4) {#if videoId}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (165:12) {#each userTimestamps as time, index (time)}
+    function create_each_block_1(key_1, ctx) {
+    	let li;
+    	let t0_value = /*time*/ ctx[22] + "";
+    	let t0;
+    	let t1;
+
+    	const block = {
+    		key: key_1,
+    		first: null,
+    		c: function create() {
+    			li = element("li");
+    			t0 = text(t0_value);
+    			t1 = text(" s");
+    			add_location(li, file$3, 165, 12, 6828);
+    			this.first = li;
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, li, anchor);
+    			append_dev(li, t0);
+    			append_dev(li, t1);
+    		},
+    		p: function update(new_ctx, dirty) {
+    			ctx = new_ctx;
+    			if (dirty & /*userTimestamps*/ 4 && t0_value !== (t0_value = /*time*/ ctx[22] + "")) set_data_dev(t0, t0_value);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(li);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_each_block_1.name,
+    		type: "each",
+    		source: "(165:12) {#each userTimestamps as time, index (time)}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    // (171:12) {#each r2userTimestamps as time, index (time)}
+    function create_each_block(key_1, ctx) {
+    	let li;
+    	let t0_value = /*time*/ ctx[22] + "";
+    	let t0;
+    	let t1;
+
+    	const block = {
+    		key: key_1,
+    		first: null,
+    		c: function create() {
+    			li = element("li");
+    			t0 = text(t0_value);
+    			t1 = text(" s");
+    			add_location(li, file$3, 171, 12, 7032);
+    			this.first = li;
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, li, anchor);
+    			append_dev(li, t0);
+    			append_dev(li, t1);
+    		},
+    		p: function update(new_ctx, dirty) {
+    			ctx = new_ctx;
+    			if (dirty & /*r2userTimestamps*/ 8 && t0_value !== (t0_value = /*time*/ ctx[22] + "")) set_data_dev(t0, t0_value);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(li);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_each_block.name,
+    		type: "each",
+    		source: "(171:12) {#each r2userTimestamps as time, index (time)}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment$3(ctx) {
+    	let div2;
+    	let t0;
+    	let input0;
+    	let t1;
+    	let t2;
+    	let div0;
+    	let span;
+    	let t4;
+    	let br0;
+    	let t5;
+    	let t6_value = /*currentUserIndex*/ ctx[1] + 1 + "";
+    	let t6;
+    	let t7;
+    	let t8_value = /*userTimestamps*/ ctx[2].length + "";
+    	let t8;
+    	let t9;
+    	let t10;
+    	let button0;
+    	let t14;
+    	let button1;
+    	let t18;
+    	let button2;
+    	let t20;
+    	let button3;
+    	let t22;
+    	let button4;
+    	let t24;
+    	let button5;
+    	let t26;
+    	let button6;
+    	let t28;
+    	let button7;
+    	let t30;
+    	let input1;
+    	let t31;
+    	let br1;
+    	let t32;
+    	let button8;
+    	let t34;
+    	let button9;
+    	let t36;
+    	let div1;
+    	let h40;
+    	let t38;
+    	let ul0;
+    	let each_blocks_1 = [];
+    	let each0_lookup = new Map();
+    	let t39;
+    	let h41;
+    	let t41;
+    	let ul1;
+    	let each_blocks = [];
+    	let each1_lookup = new Map();
+    	let current;
+    	let mounted;
+    	let dispose;
+    	let if_block = /*videoId*/ ctx[0] && create_if_block$2(ctx);
+    	let each_value_1 = /*userTimestamps*/ ctx[2];
+    	validate_each_argument(each_value_1);
+    	const get_key = ctx => /*time*/ ctx[22];
+    	validate_each_keys(ctx, each_value_1, get_each_context_1, get_key);
+
+    	for (let i = 0; i < each_value_1.length; i += 1) {
+    		let child_ctx = get_each_context_1(ctx, each_value_1, i);
+    		let key = get_key(child_ctx);
+    		each0_lookup.set(key, each_blocks_1[i] = create_each_block_1(key, child_ctx));
+    	}
+
+    	let each_value = /*r2userTimestamps*/ ctx[3];
+    	validate_each_argument(each_value);
+    	const get_key_1 = ctx => /*time*/ ctx[22];
+    	validate_each_keys(ctx, each_value, get_each_context, get_key_1);
+
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		let child_ctx = get_each_context(ctx, each_value, i);
+    		let key = get_key_1(child_ctx);
+    		each1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+    	}
+
+    	const block = {
+    		c: function create() {
+    			div2 = element("div");
+    			t0 = text("(Select All and Paste to change) Test - 4SrHKXxdI0k | qEpmiA3XkX8\r\n    ");
+    			input0 = element("input");
+    			t1 = space();
+    			if (if_block) if_block.c();
+    			t2 = space();
+    			div0 = element("div");
+    			span = element("span");
+    			span.textContent = "For course content - ask chatgpt to show you the bash version. For QB In the last day before the test if you are still on the incorrect ones take screenshot and write on them with iPad";
+    			t4 = space();
+    			br0 = element("br");
+    			t5 = space();
+    			t6 = text(t6_value);
+    			t7 = text(" / ");
+    			t8 = text(t8_value);
+    			t9 = text(" (Update this number on Add Current or Add current - 5) Display Total timestamp count here as well");
+    			t10 = space();
+    			button0 = element("button");
+    			button0.textContent = `Previous (${/*interval*/ ctx[4]}s)`;
+    			t14 = space();
+    			button1 = element("button");
+    			button1.textContent = `Next (${/*interval*/ ctx[4]}s)`;
+    			t18 = space();
+    			button2 = element("button");
+    			button2.textContent = "Add Current Time";
+    			t20 = space();
+    			button3 = element("button");
+    			button3.textContent = "Add Current Time - 5";
+    			t22 = space();
+    			button4 = element("button");
+    			button4.textContent = "Remove Current Time";
+    			t24 = space();
+    			button5 = element("button");
+    			button5.textContent = "User Previous";
+    			t26 = space();
+    			button6 = element("button");
+    			button6.textContent = "User Next";
+    			t28 = space();
+    			button7 = element("button");
+    			button7.textContent = "Export Timestamps";
+    			t30 = space();
+    			input1 = element("input");
+    			t31 = space();
+    			br1 = element("br");
+    			t32 = space();
+    			button8 = element("button");
+    			button8.textContent = "Round 2 Add Current Time - 5";
+    			t34 = space();
+    			button9 = element("button");
+    			button9.textContent = "Export Round 2 Timestamps";
+    			t36 = space();
+    			div1 = element("div");
+    			h40 = element("h4");
+    			h40.textContent = "User Timestamps";
+    			t38 = space();
+    			ul0 = element("ul");
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				each_blocks_1[i].c();
+    			}
+
+    			t39 = space();
+    			h41 = element("h4");
+    			h41.textContent = "Round 2 Timestamps";
+    			t41 = space();
+    			ul1 = element("ul");
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			attr_dev(input0, "type", "text");
+    			attr_dev(input0, "placeholder", "Enter YouTube Video ID");
+    			add_location(input0, file$3, 139, 4, 4430);
+    			attr_dev(span, "class", "bg-red-600 font-bold");
+    			add_location(span, file$3, 148, 10, 4657);
+    			add_location(br0, file$3, 148, 238, 4885);
+    			add_location(div0, file$3, 148, 4, 4651);
+    			attr_dev(button0, "class", "VideoUIButton svelte-17r32ez");
+    			add_location(button0, file$3, 149, 4, 5055);
+    			attr_dev(button1, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
+    			add_location(button1, file$3, 150, 4, 5155);
+    			attr_dev(button2, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
+    			add_location(button2, file$3, 151, 4, 5308);
+    			attr_dev(button3, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
+    			add_location(button3, file$3, 152, 4, 5458);
+    			attr_dev(button4, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
+    			add_location(button4, file$3, 153, 4, 5618);
+    			attr_dev(button5, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
+    			add_location(button5, file$3, 154, 4, 5774);
+    			attr_dev(button6, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
+    			add_location(button6, file$3, 155, 4, 5930);
+    			attr_dev(button7, "class", "border border-double border-black rounded-md font-bold bg-red-300 p-1 mx-1");
+    			add_location(button7, file$3, 156, 4, 6078);
+    			attr_dev(input1, "type", "file");
+    			attr_dev(input1, "accept", ".json");
+    			add_location(input1, file$3, 157, 4, 6229);
+    			add_location(br1, file$3, 158, 4, 6300);
+    			attr_dev(button8, "class", "border border-double border-black rounded-md font-bold bg-green-300 p-1 mx-1");
+    			add_location(button8, file$3, 159, 4, 6312);
+    			attr_dev(button9, "class", "border border-double border-black rounded-md font-bold bg-green-300 p-1 mx-1");
+    			add_location(button9, file$3, 160, 4, 6485);
+    			add_location(h40, file$3, 162, 8, 6692);
+    			attr_dev(ul0, "class", "grid grid-cols-12");
+    			add_location(ul0, file$3, 163, 8, 6726);
+    			add_location(h41, file$3, 168, 8, 6891);
+    			attr_dev(ul1, "class", "grid grid-cols-12");
+    			add_location(ul1, file$3, 169, 8, 6928);
+    			attr_dev(div1, "class", "h-32 overflow-y-auto");
+    			add_location(div1, file$3, 161, 4, 6648);
+    			attr_dev(div2, "class", "border border-double border-width-4 border-red-800");
+    			add_location(div2, file$3, 137, 0, 4289);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div2, anchor);
+    			append_dev(div2, t0);
+    			append_dev(div2, input0);
+    			set_input_value(input0, /*videoId*/ ctx[0]);
+    			append_dev(div2, t1);
+    			if (if_block) if_block.m(div2, null);
+    			append_dev(div2, t2);
+    			append_dev(div2, div0);
+    			append_dev(div0, span);
+    			append_dev(div0, t4);
+    			append_dev(div0, br0);
+    			append_dev(div0, t5);
+    			append_dev(div0, t6);
+    			append_dev(div0, t7);
+    			append_dev(div0, t8);
+    			append_dev(div0, t9);
+    			append_dev(div2, t10);
+    			append_dev(div2, button0);
+    			append_dev(div2, t14);
+    			append_dev(div2, button1);
+    			append_dev(div2, t18);
+    			append_dev(div2, button2);
+    			append_dev(div2, t20);
+    			append_dev(div2, button3);
+    			append_dev(div2, t22);
+    			append_dev(div2, button4);
+    			append_dev(div2, t24);
+    			append_dev(div2, button5);
+    			append_dev(div2, t26);
+    			append_dev(div2, button6);
+    			append_dev(div2, t28);
+    			append_dev(div2, button7);
+    			append_dev(div2, t30);
+    			append_dev(div2, input1);
+    			append_dev(div2, t31);
+    			append_dev(div2, br1);
+    			append_dev(div2, t32);
+    			append_dev(div2, button8);
+    			append_dev(div2, t34);
+    			append_dev(div2, button9);
+    			append_dev(div2, t36);
+    			append_dev(div2, div1);
+    			append_dev(div1, h40);
+    			append_dev(div1, t38);
+    			append_dev(div1, ul0);
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				if (each_blocks_1[i]) {
+    					each_blocks_1[i].m(ul0, null);
+    				}
+    			}
+
+    			append_dev(div1, t39);
+    			append_dev(div1, h41);
+    			append_dev(div1, t41);
+    			append_dev(div1, ul1);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				if (each_blocks[i]) {
+    					each_blocks[i].m(ul1, null);
+    				}
+    			}
+
+    			current = true;
+
+    			if (!mounted) {
+    				dispose = [
+    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[17]),
+    					listen_dev(button0, "click", /*goToPreviousTimestamp*/ ctx[10], false, false, false, false),
+    					listen_dev(button1, "click", /*goToNextTimestamp*/ ctx[9], false, false, false, false),
+    					listen_dev(button2, "click", /*addUserTimestamp*/ ctx[13], false, false, false, false),
+    					listen_dev(button3, "click", /*addUserTimestampminus5*/ ctx[14], false, false, false, false),
+    					listen_dev(button4, "click", /*removeUserTimestamp*/ ctx[15], false, false, false, false),
+    					listen_dev(button5, "click", /*goToUserPreviousTimestamp*/ ctx[12], false, false, false, false),
+    					listen_dev(button6, "click", /*goToUserNextTimestamp*/ ctx[11], false, false, false, false),
+    					listen_dev(button7, "click", /*exportTimestamps*/ ctx[6], false, false, false, false),
+    					listen_dev(input1, "change", /*importTimestamps*/ ctx[8], false, false, false, false),
+    					listen_dev(button8, "click", /*addr2UserTimestampminus5*/ ctx[16], false, false, false, false),
+    					listen_dev(button9, "click", /*exportr2Timestamps*/ ctx[7], false, false, false, false)
+    				];
+
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*videoId*/ 1 && input0.value !== /*videoId*/ ctx[0]) {
+    				set_input_value(input0, /*videoId*/ ctx[0]);
+    			}
+
+    			if (/*videoId*/ ctx[0]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+
+    					if (dirty & /*videoId*/ 1) {
+    						transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block$2(ctx);
+    					if_block.c();
+    					transition_in(if_block, 1);
+    					if_block.m(div2, t2);
+    				}
+    			} else if (if_block) {
+    				group_outros();
+
+    				transition_out(if_block, 1, 1, () => {
+    					if_block = null;
+    				});
+
+    				check_outros();
+    			}
+
+    			if ((!current || dirty & /*currentUserIndex*/ 2) && t6_value !== (t6_value = /*currentUserIndex*/ ctx[1] + 1 + "")) set_data_dev(t6, t6_value);
+    			if ((!current || dirty & /*userTimestamps*/ 4) && t8_value !== (t8_value = /*userTimestamps*/ ctx[2].length + "")) set_data_dev(t8, t8_value);
+
+    			if (dirty & /*userTimestamps*/ 4) {
+    				each_value_1 = /*userTimestamps*/ ctx[2];
+    				validate_each_argument(each_value_1);
+    				validate_each_keys(ctx, each_value_1, get_each_context_1, get_key);
+    				each_blocks_1 = update_keyed_each(each_blocks_1, dirty, get_key, 1, ctx, each_value_1, each0_lookup, ul0, destroy_block, create_each_block_1, null, get_each_context_1);
+    			}
+
+    			if (dirty & /*r2userTimestamps*/ 8) {
+    				each_value = /*r2userTimestamps*/ ctx[3];
+    				validate_each_argument(each_value);
+    				validate_each_keys(ctx, each_value, get_each_context, get_key_1);
+    				each_blocks = update_keyed_each(each_blocks, dirty, get_key_1, 1, ctx, each_value, each1_lookup, ul1, destroy_block, create_each_block, null, get_each_context);
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(if_block);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(if_block);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div2);
+    			if (if_block) if_block.d();
+
+    			for (let i = 0; i < each_blocks_1.length; i += 1) {
+    				each_blocks_1[i].d();
+    			}
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].d();
+    			}
+
+    			mounted = false;
+    			run_all(dispose);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$3.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$3($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('YoutubeBookmarksfromReact', slots, []);
+    	let videoId = '';
+    	let currentIndex = 0;
+    	let currentUserIndex = 0;
+    	let timestamps = [];
+    	let userTimestamps = [];
+    	let r2userTimestamps = [];
+    	let player = null;
+    	let interval = 20;
+
+    	const opts = {
+    		height: '560',
+    		width: '100%',
+    		playerVars: { autoplay: 1 }
+    	};
+
+    	function onReady(event) {
+    		player = event.target;
+    		console.log(player);
+    		const duration = player.getDuration();
+    		console.log(duration);
+    		const generatedTimestamps = [];
+
+    		for (let i = interval; i < duration; i += interval) {
+    			generatedTimestamps.push(i);
+    		}
+
+    		timestamps = generatedTimestamps;
+    	}
+
+    	function exportTimestamps() {
+    		const data = JSON.stringify({ videoId, timestamps: userTimestamps });
+    		const blob = new Blob([data], { type: 'application/json' });
+    		const url = URL.createObjectURL(blob);
+    		const a = document.createElement('a');
+    		a.style.display = 'none';
+    		const filename = `${videoId}_timestamps.json`;
+    		a.href = url;
+    		a.download = filename;
+    		document.body.appendChild(a);
+    		a.click();
+    		window.URL.revokeObjectURL(url);
+    	}
+
+    	function exportr2Timestamps() {
+    		const data = JSON.stringify({ videoId, timestamps: r2userTimestamps });
+    		const blob = new Blob([data], { type: 'application/json' });
+    		const url = URL.createObjectURL(blob);
+    		const a = document.createElement('a');
+    		a.style.display = 'none';
+    		const filename = `${videoId}_round2timestamps.json`;
+    		a.href = url;
+    		a.download = filename;
+    		document.body.appendChild(a);
+    		a.click();
+    		window.URL.revokeObjectURL(url);
+    	}
+
+    	function importTimestamps(event) {
+    		const file = event.target.files[0];
+    		const reader = new FileReader();
+
+    		reader.onload = e => {
+    			try {
+    				const data = JSON.parse(e.target.result);
+
+    				if (!Array.isArray(data.timestamps)) {
+    					alert('Invalid file structure: timestamps should be an array.');
+    					return;
+    				}
+
+    				$$invalidate(0, videoId = data.videoId || '');
+    				$$invalidate(2, userTimestamps = data.timestamps);
+    			} catch(error) {
+    				alert('An error occurred while importing timestamps.');
+    			}
+    		};
+
+    		reader.readAsText(file);
+    	}
+
+    	function goToNextTimestamp() {
+    		if (currentIndex < timestamps.length - 1) {
+    			currentIndex += 1;
+    			player.seekTo(timestamps[currentIndex]);
+    		}
+    	}
+
+    	function goToPreviousTimestamp() {
+    		if (currentIndex > 0) {
+    			currentIndex -= 1;
+    			player.seekTo(timestamps[currentIndex]);
+    		}
+    	}
+
+    	function goToUserNextTimestamp() {
+    		if (currentUserIndex < userTimestamps.length - 1) {
+    			$$invalidate(1, currentUserIndex += 1);
+    			player.seekTo(userTimestamps[currentUserIndex]);
+    		}
+    	}
+
+    	function goToUserPreviousTimestamp() {
+    		if (currentUserIndex > 0) {
+    			$$invalidate(1, currentUserIndex -= 1);
+    			player.seekTo(userTimestamps[currentUserIndex]);
+    		}
+    	}
+
+    	function addUserTimestamp() {
+    		const currentTime = Math.floor(player.getCurrentTime());
+    		$$invalidate(2, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
+    	}
+
+    	function addUserTimestampminus5() {
+    		const currentTime = Math.floor(player.getCurrentTime() - 5);
+    		$$invalidate(2, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
+    	}
+
+    	function removeUserTimestamp() {
+    		const currentTime = Math.floor(player.getCurrentTime());
+    		$$invalidate(2, userTimestamps = userTimestamps.filter(time => time !== currentTime));
+    	}
+
+    	function addr2UserTimestampminus5() {
+    		const currentTime = Math.floor(player.getCurrentTime() - 5);
+    		$$invalidate(3, r2userTimestamps = [...r2userTimestamps, currentTime].sort((a, b) => a - b));
+    	}
+
+    	const writable_props = [];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1$1.warn(`<YoutubeBookmarksfromReact> was created with unknown prop '${key}'`);
+    	});
+
+    	function input0_input_handler() {
+    		videoId = this.value;
+    		$$invalidate(0, videoId);
+    	}
+
+    	$$self.$capture_state = () => ({
+    		onMount,
+    		YouTube: Youtube,
+    		videoId,
+    		currentIndex,
+    		currentUserIndex,
+    		timestamps,
+    		userTimestamps,
+    		r2userTimestamps,
+    		player,
+    		interval,
+    		opts,
+    		onReady,
+    		exportTimestamps,
+    		exportr2Timestamps,
+    		importTimestamps,
+    		goToNextTimestamp,
+    		goToPreviousTimestamp,
+    		goToUserNextTimestamp,
+    		goToUserPreviousTimestamp,
+    		addUserTimestamp,
+    		addUserTimestampminus5,
+    		removeUserTimestamp,
+    		addr2UserTimestampminus5
+    	});
+
+    	$$self.$inject_state = $$props => {
+    		if ('videoId' in $$props) $$invalidate(0, videoId = $$props.videoId);
+    		if ('currentIndex' in $$props) currentIndex = $$props.currentIndex;
+    		if ('currentUserIndex' in $$props) $$invalidate(1, currentUserIndex = $$props.currentUserIndex);
+    		if ('timestamps' in $$props) timestamps = $$props.timestamps;
+    		if ('userTimestamps' in $$props) $$invalidate(2, userTimestamps = $$props.userTimestamps);
+    		if ('r2userTimestamps' in $$props) $$invalidate(3, r2userTimestamps = $$props.r2userTimestamps);
+    		if ('player' in $$props) player = $$props.player;
+    		if ('interval' in $$props) $$invalidate(4, interval = $$props.interval);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [
+    		videoId,
+    		currentUserIndex,
+    		userTimestamps,
+    		r2userTimestamps,
+    		interval,
+    		onReady,
+    		exportTimestamps,
+    		exportr2Timestamps,
+    		importTimestamps,
+    		goToNextTimestamp,
+    		goToPreviousTimestamp,
+    		goToUserNextTimestamp,
+    		goToUserPreviousTimestamp,
+    		addUserTimestamp,
+    		addUserTimestampminus5,
+    		removeUserTimestamp,
+    		addr2UserTimestampminus5,
+    		input0_input_handler
+    	];
+    }
+
+    class YoutubeBookmarksfromReact extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$3, create_fragment$3, safe_not_equal, {});
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "YoutubeBookmarksfromReact",
+    			options,
+    			id: create_fragment$3.name
+    		});
+    	}
+    }
+
+    /* src\SimpleModal.svelte generated by Svelte v3.59.2 */
+
+    const file$2 = "src\\SimpleModal.svelte";
+
+    // (11:2) {#if isOpen}
+    function create_if_block$1(ctx) {
+    	let div3;
+    	let div2;
+    	let div0;
+    	let h2;
+    	let t0;
+    	let t1;
+    	let button;
+    	let t3;
+    	let div1;
+    	let t4;
+    	let mounted;
+    	let dispose;
+
+    	const block = {
+    		c: function create() {
+    			div3 = element("div");
+    			div2 = element("div");
+    			div0 = element("div");
+    			h2 = element("h2");
+    			t0 = text(/*title*/ ctx[1]);
+    			t1 = space();
+    			button = element("button");
+    			button.textContent = "×";
+    			t3 = space();
+    			div1 = element("div");
+    			t4 = text(/*content*/ ctx[2]);
+    			add_location(h2, file$2, 14, 10, 302);
+    			add_location(button, file$2, 15, 10, 330);
+    			attr_dev(div0, "class", "modal-header svelte-1qa8urn");
+    			add_location(div0, file$2, 13, 8, 264);
+    			attr_dev(div1, "class", "modal-content svelte-1qa8urn");
+    			add_location(div1, file$2, 17, 8, 402);
+    			attr_dev(div2, "class", "modal svelte-1qa8urn");
+    			add_location(div2, file$2, 12, 6, 235);
+    			attr_dev(div3, "class", "modal-overlay svelte-1qa8urn");
+    			add_location(div3, file$2, 11, 4, 200);
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, div3, anchor);
+    			append_dev(div3, div2);
+    			append_dev(div2, div0);
+    			append_dev(div0, h2);
+    			append_dev(h2, t0);
+    			append_dev(div0, t1);
+    			append_dev(div0, button);
+    			append_dev(div2, t3);
+    			append_dev(div2, div1);
+    			append_dev(div1, t4);
+
+    			if (!mounted) {
+    				dispose = listen_dev(button, "click", /*closeModal*/ ctx[3], false, false, false, false);
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, dirty) {
+    			if (dirty & /*title*/ 2) set_data_dev(t0, /*title*/ ctx[1]);
+    			if (dirty & /*content*/ 4) set_data_dev(t4, /*content*/ ctx[2]);
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(div3);
+    			mounted = false;
+    			dispose();
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block$1.name,
+    		type: "if",
+    		source: "(11:2) {#if isOpen}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment$2(ctx) {
+    	let if_block_anchor;
+    	let if_block = /*isOpen*/ ctx[0] && create_if_block$1(ctx);
+
+    	const block = {
+    		c: function create() {
+    			if (if_block) if_block.c();
+    			if_block_anchor = empty();
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			if (if_block) if_block.m(target, anchor);
+    			insert_dev(target, if_block_anchor, anchor);
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (/*isOpen*/ ctx[0]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+    				} else {
+    					if_block = create_if_block$1(ctx);
+    					if_block.c();
+    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+    				}
+    			} else if (if_block) {
+    				if_block.d(1);
+    				if_block = null;
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (if_block) if_block.d(detaching);
+    			if (detaching) detach_dev(if_block_anchor);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$2.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance$2($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('SimpleModal', slots, []);
+    	let { isOpen = false } = $$props;
+    	let { title = '' } = $$props;
+    	let { content = '' } = $$props;
+
+    	function closeModal() {
+    		$$invalidate(0, isOpen = false);
+    	}
+
+    	const writable_props = ['isOpen', 'title', 'content'];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<SimpleModal> was created with unknown prop '${key}'`);
+    	});
+
+    	$$self.$$set = $$props => {
+    		if ('isOpen' in $$props) $$invalidate(0, isOpen = $$props.isOpen);
+    		if ('title' in $$props) $$invalidate(1, title = $$props.title);
+    		if ('content' in $$props) $$invalidate(2, content = $$props.content);
+    	};
+
+    	$$self.$capture_state = () => ({ isOpen, title, content, closeModal });
+
+    	$$self.$inject_state = $$props => {
+    		if ('isOpen' in $$props) $$invalidate(0, isOpen = $$props.isOpen);
+    		if ('title' in $$props) $$invalidate(1, title = $$props.title);
+    		if ('content' in $$props) $$invalidate(2, content = $$props.content);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	return [isOpen, title, content, closeModal];
+    }
+
+    class SimpleModal extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$2, create_fragment$2, safe_not_equal, { isOpen: 0, title: 1, content: 2 });
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "SimpleModal",
+    			options,
+    			id: create_fragment$2.name
+    		});
+    	}
+
+    	get isOpen() {
+    		throw new Error("<SimpleModal>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set isOpen(value) {
+    		throw new Error("<SimpleModal>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get title() {
+    		throw new Error("<SimpleModal>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set title(value) {
+    		throw new Error("<SimpleModal>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	get content() {
+    		throw new Error("<SimpleModal>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+
+    	set content(value) {
+    		throw new Error("<SimpleModal>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
+    	}
+    }
+
+    /* src\YoutubeIframeAPICustomInterface.svelte generated by Svelte v3.59.2 */
+
+    const { console: console_1 } = globals;
+    const file$1 = "src\\YoutubeIframeAPICustomInterface.svelte";
+
+    function create_fragment$1(ctx) {
+    	let h1;
+    	let t1;
+    	let label;
+    	let t2;
+    	let input0;
+    	let t3;
+    	let input1;
+    	let t4;
+    	let textarea0;
+    	let t5;
+    	let textarea1;
+    	let t6;
+    	let div3;
+    	let div0;
+    	let t7;
+    	let div1;
+    	let t8;
+    	let t9_value = /*currentTime*/ ctx[2].toFixed(2) + "";
+    	let t9;
+    	let t10;
+    	let t11;
+    	let div2;
+    	let t12;
+    	let t13;
+    	let br0;
+    	let t14;
+    	let t15;
+    	let t16;
+    	let button0;
+    	let t18;
+    	let button1;
+    	let t20;
+    	let t21;
+    	let t22;
+    	let t23_value = /*timestamps*/ ctx[7].length + "";
+    	let t23;
+    	let t24;
+    	let button2;
+    	let t26;
+    	let button3;
+    	let t27;
+    	let button3_class_value;
+    	let button3_disabled_value;
+    	let t28;
+    	let button4;
+    	let t29;
+    	let button4_class_value;
+    	let button4_disabled_value;
+    	let t30;
+    	let t31;
+    	let t32;
+    	let t33_value = /*userTimestamps*/ ctx[1].length + "";
+    	let t33;
+    	let t34;
+    	let br1;
+    	let t35;
+    	let mounted;
+    	let dispose;
+
+    	const block = {
+    		c: function create() {
+    			h1 = element("h1");
+    			h1.textContent = "Custom Youtube Player for learning Video and music";
+    			t1 = space();
+    			label = element("label");
+    			t2 = text("Current Video Id (test - qEpmiA3XkX8 hardcoded)\r\n    ");
+    			input0 = element("input");
+    			t3 = text("\r\n    Start/Stop Word Update\r\n    ");
+    			input1 = element("input");
+    			t4 = text("\r\n    VideoIDs\r\n    ");
+    			textarea0 = element("textarea");
+    			t5 = text("\r\n    MusicIDs\r\n    ");
+    			textarea1 = element("textarea");
+    			t6 = space();
+    			div3 = element("div");
+    			div0 = element("div");
+    			t7 = space();
+    			div1 = element("div");
+    			t8 = text("Current Time: ");
+    			t9 = text(t9_value);
+    			t10 = text(" seconds");
+    			t11 = space();
+    			div2 = element("div");
+    			t12 = text(/*line*/ ctx[4]);
+    			t13 = space();
+    			br0 = element("br");
+    			t14 = space();
+    			t15 = text(/*currentWord*/ ctx[3]);
+    			t16 = space();
+    			button0 = element("button");
+    			button0.textContent = "Previous Auto Timestamp";
+    			t18 = space();
+    			button1 = element("button");
+    			button1.textContent = "Next Auto Timestamp";
+    			t20 = text("\r\nAuto Timestamps: ");
+    			t21 = text(/*currentIndex*/ ctx[6]);
+    			t22 = text(" / ");
+    			t23 = text(t23_value);
+    			t24 = space();
+    			button2 = element("button");
+    			button2.textContent = "Add Timestamp";
+    			t26 = space();
+    			button3 = element("button");
+    			t27 = text("Previous Auto Timestamp");
+    			t28 = space();
+    			button4 = element("button");
+    			t29 = text("Next Auto Timestamp");
+    			t30 = text("\r\nUser Timestamps: ");
+    			t31 = text(/*currentuserIndex*/ ctx[0]);
+    			t32 = text(" / ");
+    			t33 = text(t33_value);
+    			t34 = space();
+    			br1 = element("br");
+    			t35 = text("A list of one messes up the logic for the counter in conjuction with the button reactivity");
+    			add_location(h1, file$1, 166, 0, 5477);
+    			attr_dev(input0, "type", "text");
+    			add_location(input0, file$1, 170, 4, 5606);
+    			attr_dev(input1, "type", "checkbox");
+    			add_location(input1, file$1, 172, 4, 5687);
+    			attr_dev(textarea0, "id", "ytvideoids");
+    			attr_dev(textarea0, "cols", "40");
+    			attr_dev(textarea0, "rows", "1");
+    			attr_dev(textarea0, "placeholder", "Put video ids to learn here");
+    			add_location(textarea0, file$1, 174, 4, 5780);
+    			attr_dev(textarea1, "id", "ytmusicids");
+    			attr_dev(textarea1, "cols", "40");
+    			attr_dev(textarea1, "rows", "1");
+    			attr_dev(textarea1, "placeholder", "Put song ids to learn here");
+    			add_location(textarea1, file$1, 176, 4, 5898);
+    			add_location(label, file$1, 168, 0, 5540);
+    			attr_dev(div0, "id", "youtube-player");
+    			set_style(div0, "height", "90vh");
+    			set_style(div0, "width", "90%");
+    			add_location(div0, file$1, 180, 4, 6048);
+    			set_style(div1, "position", "absolute");
+    			set_style(div1, "top", "0%");
+    			set_style(div1, "left", "40%");
+    			set_style(div1, "color", "white");
+    			set_style(div1, "background-color", "rgba(0, 0, 0, 0.5)");
+    			add_location(div1, file$1, 181, 4, 6118);
+    			add_location(br0, file$1, 185, 15, 6438);
+    			set_style(div2, "position", "absolute");
+    			set_style(div2, "top", "50%");
+    			set_style(div2, "left", "20%");
+    			set_style(div2, "color", "white");
+    			set_style(div2, "background-color", "rgba(0, 0, 0, 0.5)");
+    			set_style(div2, "font-size", "100px");
+    			add_location(div2, file$1, 184, 4, 6297);
+    			set_style(div3, "position", "relative");
+    			add_location(div3, file$1, 179, 0, 6009);
+    			add_location(button0, file$1, 190, 0, 6489);
+    			add_location(button1, file$1, 191, 0, 6568);
+    			add_location(button2, file$1, 193, 0, 6694);
+    			attr_dev(button3, "class", button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[9]) + " svelte-1g3vo12"));
+    			button3.disabled = button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0;
+    			add_location(button3, file$1, 194, 0, 6754);
+    			attr_dev(button4, "class", button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[10]) + " svelte-1g3vo12"));
+    			button4.disabled = button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1;
+    			add_location(button4, file$1, 195, 0, 6894);
+    			add_location(br1, file$1, 196, 62, 7108);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, h1, anchor);
+    			insert_dev(target, t1, anchor);
+    			insert_dev(target, label, anchor);
+    			append_dev(label, t2);
+    			append_dev(label, input0);
+    			set_input_value(input0, /*currentvideoId*/ ctx[8]);
+    			append_dev(label, t3);
+    			append_dev(label, input1);
+    			input1.checked = /*isUpdating*/ ctx[5];
+    			append_dev(label, t4);
+    			append_dev(label, textarea0);
+    			append_dev(label, t5);
+    			append_dev(label, textarea1);
+    			insert_dev(target, t6, anchor);
+    			insert_dev(target, div3, anchor);
+    			append_dev(div3, div0);
+    			append_dev(div3, t7);
+    			append_dev(div3, div1);
+    			append_dev(div1, t8);
+    			append_dev(div1, t9);
+    			append_dev(div1, t10);
+    			append_dev(div3, t11);
+    			append_dev(div3, div2);
+    			append_dev(div2, t12);
+    			append_dev(div2, t13);
+    			append_dev(div2, br0);
+    			append_dev(div2, t14);
+    			append_dev(div2, t15);
+    			insert_dev(target, t16, anchor);
+    			insert_dev(target, button0, anchor);
+    			insert_dev(target, t18, anchor);
+    			insert_dev(target, button1, anchor);
+    			insert_dev(target, t20, anchor);
+    			insert_dev(target, t21, anchor);
+    			insert_dev(target, t22, anchor);
+    			insert_dev(target, t23, anchor);
+    			insert_dev(target, t24, anchor);
+    			insert_dev(target, button2, anchor);
+    			insert_dev(target, t26, anchor);
+    			insert_dev(target, button3, anchor);
+    			append_dev(button3, t27);
+    			insert_dev(target, t28, anchor);
+    			insert_dev(target, button4, anchor);
+    			append_dev(button4, t29);
+    			insert_dev(target, t30, anchor);
+    			insert_dev(target, t31, anchor);
+    			insert_dev(target, t32, anchor);
+    			insert_dev(target, t33, anchor);
+    			insert_dev(target, t34, anchor);
+    			insert_dev(target, br1, anchor);
+    			insert_dev(target, t35, anchor);
+
+    			if (!mounted) {
+    				dispose = [
+    					listen_dev(input0, "input", /*input0_input_handler*/ ctx[17]),
+    					listen_dev(input1, "change", /*input1_change_handler*/ ctx[18]),
+    					listen_dev(input1, "click", /*toggleUpdate*/ ctx[11], false, false, false, false),
+    					listen_dev(button0, "click", /*goToPreviousAutoTimestamp*/ ctx[13], false, false, false, false),
+    					listen_dev(button1, "click", /*goToNextAutoTimestamp*/ ctx[12], false, false, false, false),
+    					listen_dev(button2, "click", /*addUserTimestamp*/ ctx[14], false, false, false, false),
+    					listen_dev(button3, "click", /*goToPreviousUserTimestamp*/ ctx[16], false, false, false, false),
+    					listen_dev(button4, "click", /*goToNextUserTimestamp*/ ctx[15], false, false, false, false)
+    				];
+
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (dirty & /*currentvideoId*/ 256 && input0.value !== /*currentvideoId*/ ctx[8]) {
+    				set_input_value(input0, /*currentvideoId*/ ctx[8]);
+    			}
+
+    			if (dirty & /*isUpdating*/ 32) {
+    				input1.checked = /*isUpdating*/ ctx[5];
+    			}
+
+    			if (dirty & /*currentTime*/ 4 && t9_value !== (t9_value = /*currentTime*/ ctx[2].toFixed(2) + "")) set_data_dev(t9, t9_value);
+    			if (dirty & /*line*/ 16) set_data_dev(t12, /*line*/ ctx[4]);
+    			if (dirty & /*currentWord*/ 8) set_data_dev(t15, /*currentWord*/ ctx[3]);
+    			if (dirty & /*currentIndex*/ 64) set_data_dev(t21, /*currentIndex*/ ctx[6]);
+    			if (dirty & /*timestamps*/ 128 && t23_value !== (t23_value = /*timestamps*/ ctx[7].length + "")) set_data_dev(t23, t23_value);
+
+    			if (dirty & /*previousButtonClass*/ 512 && button3_class_value !== (button3_class_value = "" + (null_to_empty(/*previousButtonClass*/ ctx[9]) + " svelte-1g3vo12"))) {
+    				attr_dev(button3, "class", button3_class_value);
+    			}
+
+    			if (dirty & /*currentuserIndex*/ 1 && button3_disabled_value !== (button3_disabled_value = /*currentuserIndex*/ ctx[0] <= 0)) {
+    				prop_dev(button3, "disabled", button3_disabled_value);
+    			}
+
+    			if (dirty & /*nextButtonClass*/ 1024 && button4_class_value !== (button4_class_value = "" + (null_to_empty(/*nextButtonClass*/ ctx[10]) + " svelte-1g3vo12"))) {
+    				attr_dev(button4, "class", button4_class_value);
+    			}
+
+    			if (dirty & /*currentuserIndex, userTimestamps*/ 3 && button4_disabled_value !== (button4_disabled_value = /*currentuserIndex*/ ctx[0] >= /*userTimestamps*/ ctx[1].length - 1)) {
+    				prop_dev(button4, "disabled", button4_disabled_value);
+    			}
+
+    			if (dirty & /*currentuserIndex*/ 1) set_data_dev(t31, /*currentuserIndex*/ ctx[0]);
+    			if (dirty & /*userTimestamps*/ 2 && t33_value !== (t33_value = /*userTimestamps*/ ctx[1].length + "")) set_data_dev(t33, t33_value);
+    		},
+    		i: noop,
+    		o: noop,
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(h1);
+    			if (detaching) detach_dev(t1);
+    			if (detaching) detach_dev(label);
+    			if (detaching) detach_dev(t6);
+    			if (detaching) detach_dev(div3);
+    			if (detaching) detach_dev(t16);
+    			if (detaching) detach_dev(button0);
+    			if (detaching) detach_dev(t18);
+    			if (detaching) detach_dev(button1);
+    			if (detaching) detach_dev(t20);
+    			if (detaching) detach_dev(t21);
+    			if (detaching) detach_dev(t22);
+    			if (detaching) detach_dev(t23);
+    			if (detaching) detach_dev(t24);
+    			if (detaching) detach_dev(button2);
+    			if (detaching) detach_dev(t26);
+    			if (detaching) detach_dev(button3);
+    			if (detaching) detach_dev(t28);
+    			if (detaching) detach_dev(button4);
+    			if (detaching) detach_dev(t30);
+    			if (detaching) detach_dev(t31);
+    			if (detaching) detach_dev(t32);
+    			if (detaching) detach_dev(t33);
+    			if (detaching) detach_dev(t34);
+    			if (detaching) detach_dev(br1);
+    			if (detaching) detach_dev(t35);
+    			mounted = false;
+    			run_all(dispose);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment$1.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    const interval = 10; // Define your interval
+
+    function getRandomWord(line) {
+    	let words = line.split(" ");
+    	return words[Math.floor(Math.random() * words.length)];
+    }
+
+    function instance$1($$self, $$props, $$invalidate) {
+    	let nextButtonClass;
+    	let previousButtonClass;
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('YoutubeIframeAPICustomInterface', slots, []);
+    	let player;
+    	let currentTime = 0;
+    	let timeUpdateInterval;
+
+    	// Assuming 'transcript' contains your video transcript
+    	let transcript = `Line 1 of the transcript.
+    Line 2 of the transcript.
+    Line 3 food
+    Line 4 foodest
+    Line 5 foods
+    Line 6 fooder
+    Line 7 foodz
+    Line 8 fooding
+    ...`; // Replace with your actual transcript
+
+    	let lines = transcript.split("\n");
+    	let currentWord = "";
+    	let line = "";
+    	let isUpdating = false;
+    	let updateInterval;
+    	let currentIndex = 0; // Assuming this is initialized appropriately
+    	let currentuserIndex = 0; // Assuming this is initialized appropriately
+    	let timestamps = []; // Array of timestamps
+    	let userTimestamps = []; // Array of user timestamps
+    	let currentvideoId = 'qEpmiA3XkX8';
+
+    	// Function to initialize the YouTube player
+    	function initYouTubePlayer() {
+    		player = new YT.Player('youtube-player',
+    		{
+    				height: '360',
+    				width: '640',
+    				videoId: currentvideoId, //'YOUR_VIDEO_ID',
+    				events: {
+    					'onReady': onPlayerReady,
+    					'onStateChange': onPlayerStateChange
+    				}
+    			});
+    	}
+
+    	onMount(() => {
+    		// Load the YouTube IFrame Player API
+    		const tag = document.createElement('script');
+
+    		tag.src = "https://www.youtube.com/iframe_api";
+    		const firstScriptTag = document.getElementsByTagName('script')[0];
+    		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    		// Set up the API ready callback
+    		window.onYouTubeIframeAPIReady = initYouTubePlayer;
+
+    		// Update the current time every second
+    		timeUpdateInterval = setInterval(updateCurrentTime, 1000);
+    	});
+
+    	// Event handler for when the player is ready
+    	function onPlayerReady(event) {
+    		const duration = player.getDuration();
+
+    		//console.log("Video Duration: ", duration);
+    		const generatedTimestamps = [];
+
+    		for (let i = interval; i < duration; i += interval) {
+    			generatedTimestamps.push(i);
+    		}
+
+    		$$invalidate(7, timestamps = generatedTimestamps);
+    	} // Do something with the timestamps
+    	//console.log("Generated Timestamps: ", generatedTimestamps);
+
+    	function onPlayerStateChange(event) {
+    		if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.PAUSED) {
+    			updateCurrentIndex();
+    		}
+    	}
+
+    	function updateCurrentIndex() {
+    		const currentTime = player.getCurrentTime();
+
+    		// Find the closest timestamp
+    		let closest = timestamps.reduce((prev, curr) => Math.abs(curr - currentTime) < Math.abs(prev - currentTime)
+    		? curr
+    		: prev);
+
+    		$$invalidate(6, currentIndex = timestamps.indexOf(closest));
+    	}
+
+    	function updateCurrentTime() {
+    		if (player && player.getCurrentTime) {
+    			$$invalidate(2, currentTime = player.getCurrentTime());
+    		}
+    	}
+
+    	onDestroy(() => {
+    		clearInterval(timeUpdateInterval);
+    	});
+
+    	function updateWord() {
+    		if (isUpdating) {
+    			$$invalidate(4, line = lines[Math.floor(Math.random() * lines.length)]);
+    			$$invalidate(3, currentWord = getRandomWord(line));
+    		}
+    	}
+
+    	function toggleUpdate() {
+    		$$invalidate(5, isUpdating = !isUpdating);
+
+    		if (isUpdating) {
+    			updateWord(); // Immediately update once
+    			updateInterval = setInterval(updateWord, 3000); // Update every 3 seconds
+    		} else {
+    			clearInterval(updateInterval);
+    			$$invalidate(4, line = '');
+    			$$invalidate(3, currentWord = '');
+    		}
+    	}
+
+    	function goToNextAutoTimestamp() {
+    		if (currentIndex < timestamps.length - 1) {
+    			$$invalidate(6, currentIndex += 1);
+    			player.seekTo(timestamps[currentIndex], true);
+    		}
+    	}
+
+    	function goToPreviousAutoTimestamp() {
+    		if (currentIndex > 0) {
+    			$$invalidate(6, currentIndex -= 1);
+    			player.seekTo(timestamps[currentIndex], true);
+    		}
+    	}
+
+    	function addUserTimestamp() {
+    		const currentTime = Math.floor(player.getCurrentTime());
+    		$$invalidate(1, userTimestamps = [...userTimestamps, currentTime].sort((a, b) => a - b));
+    	}
+
+    	function goToNextUserTimestamp() {
+    		if (currentuserIndex < userTimestamps.length - 1) {
+    			$$invalidate(0, currentuserIndex += 1);
+    			player.seekTo(userTimestamps[currentuserIndex], true);
+    		} else {
+    			// Handle the end of the list here
+    			console.log("Reached the end of user timestamps.");
+    		} // You can also disable the "next" button or loop to the start if needed.
+    	}
+
+    	function goToPreviousUserTimestamp() {
+    		if (currentuserIndex > 0) {
+    			$$invalidate(0, currentuserIndex -= 1);
+    			player.seekTo(userTimestamps[currentuserIndex], true);
+    		} else {
+    			// Handle the beginning of the list here
+    			console.log("Reached the start of user timestamps.");
+    		} // You can also disable the "previous" button or loop to the end if needed.
+    	}
+
+    	const writable_props = [];
+
+    	Object.keys($$props).forEach(key => {
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<YoutubeIframeAPICustomInterface> was created with unknown prop '${key}'`);
+    	});
+
+    	function input0_input_handler() {
+    		currentvideoId = this.value;
+    		$$invalidate(8, currentvideoId);
+    	}
+
+    	function input1_change_handler() {
+    		isUpdating = this.checked;
+    		$$invalidate(5, isUpdating);
+    	}
+
+    	$$self.$capture_state = () => ({
+    		onMount,
+    		onDestroy,
+    		player,
+    		interval,
+    		currentTime,
+    		timeUpdateInterval,
+    		transcript,
+    		lines,
+    		currentWord,
+    		line,
+    		isUpdating,
+    		updateInterval,
+    		currentIndex,
+    		currentuserIndex,
+    		timestamps,
+    		userTimestamps,
+    		currentvideoId,
+    		initYouTubePlayer,
+    		onPlayerReady,
+    		onPlayerStateChange,
+    		updateCurrentIndex,
+    		updateCurrentTime,
+    		getRandomWord,
+    		updateWord,
+    		toggleUpdate,
+    		goToNextAutoTimestamp,
+    		goToPreviousAutoTimestamp,
+    		addUserTimestamp,
+    		goToNextUserTimestamp,
+    		goToPreviousUserTimestamp,
+    		previousButtonClass,
+    		nextButtonClass
+    	});
+
+    	$$self.$inject_state = $$props => {
+    		if ('player' in $$props) player = $$props.player;
+    		if ('currentTime' in $$props) $$invalidate(2, currentTime = $$props.currentTime);
+    		if ('timeUpdateInterval' in $$props) timeUpdateInterval = $$props.timeUpdateInterval;
+    		if ('transcript' in $$props) transcript = $$props.transcript;
+    		if ('lines' in $$props) lines = $$props.lines;
+    		if ('currentWord' in $$props) $$invalidate(3, currentWord = $$props.currentWord);
+    		if ('line' in $$props) $$invalidate(4, line = $$props.line);
+    		if ('isUpdating' in $$props) $$invalidate(5, isUpdating = $$props.isUpdating);
+    		if ('updateInterval' in $$props) updateInterval = $$props.updateInterval;
+    		if ('currentIndex' in $$props) $$invalidate(6, currentIndex = $$props.currentIndex);
+    		if ('currentuserIndex' in $$props) $$invalidate(0, currentuserIndex = $$props.currentuserIndex);
+    		if ('timestamps' in $$props) $$invalidate(7, timestamps = $$props.timestamps);
+    		if ('userTimestamps' in $$props) $$invalidate(1, userTimestamps = $$props.userTimestamps);
+    		if ('currentvideoId' in $$props) $$invalidate(8, currentvideoId = $$props.currentvideoId);
+    		if ('previousButtonClass' in $$props) $$invalidate(9, previousButtonClass = $$props.previousButtonClass);
+    		if ('nextButtonClass' in $$props) $$invalidate(10, nextButtonClass = $$props.nextButtonClass);
+    	};
+
+    	if ($$props && "$$inject" in $$props) {
+    		$$self.$inject_state($$props.$$inject);
+    	}
+
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*currentuserIndex, userTimestamps*/ 3) {
+    			$$invalidate(10, nextButtonClass = currentuserIndex >= userTimestamps.length - 1
+    			? 'button-at-end'
+    			: 'button');
+    		}
+
+    		if ($$self.$$.dirty & /*currentuserIndex*/ 1) {
+    			$$invalidate(9, previousButtonClass = currentuserIndex <= 0 ? 'button-at-end' : 'button');
+    		}
+    	};
+
+    	return [
+    		currentuserIndex,
+    		userTimestamps,
+    		currentTime,
+    		currentWord,
+    		line,
+    		isUpdating,
+    		currentIndex,
+    		timestamps,
+    		currentvideoId,
+    		previousButtonClass,
+    		nextButtonClass,
+    		toggleUpdate,
+    		goToNextAutoTimestamp,
+    		goToPreviousAutoTimestamp,
+    		addUserTimestamp,
+    		goToNextUserTimestamp,
+    		goToPreviousUserTimestamp,
+    		input0_input_handler,
+    		input1_change_handler
+    	];
+    }
+
+    class YoutubeIframeAPICustomInterface extends SvelteComponentDev {
+    	constructor(options) {
+    		super(options);
+    		init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
+
+    		dispatch_dev("SvelteRegisterComponent", {
+    			component: this,
+    			tagName: "YoutubeIframeAPICustomInterface",
+    			options,
+    			id: create_fragment$1.name
+    		});
+    	}
+    }
+
+    /* src\App.svelte generated by Svelte v3.59.2 */
+    const file = "src\\App.svelte";
+
+    // (38:1) {#if showModal}
+    function create_if_block(ctx) {
+    	let modal;
+    	let current;
+
+    	modal = new SimpleModal({
+    			props: {
+    				isOpen: /*showModal*/ ctx[1],
+    				title: "My Modal",
+    				content: "This is the modal content."
+    			},
+    			$$inline: true
+    		});
+
+    	const block = {
+    		c: function create() {
+    			create_component(modal.$$.fragment);
+    		},
+    		m: function mount(target, anchor) {
+    			mount_component(modal, target, anchor);
+    			current = true;
+    		},
+    		p: function update(ctx, dirty) {
+    			const modal_changes = {};
+    			if (dirty & /*showModal*/ 2) modal_changes.isOpen = /*showModal*/ ctx[1];
+    			modal.$set(modal_changes);
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(modal.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(modal.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			destroy_component(modal, detaching);
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_if_block.name,
+    		type: "if",
+    		source: "(38:1) {#if showModal}",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function create_fragment(ctx) {
+    	let main;
+    	let myyoutube;
+    	let t0;
+    	let h10;
+    	let t1;
+    	let t2;
+    	let t3;
+    	let t4;
+    	let p;
+    	let t5;
+    	let a;
+    	let t7;
+    	let t8;
+    	let h11;
+    	let t10;
+    	let nestedcommentstestfromreact;
+    	let t11;
+    	let h12;
+    	let t13;
+    	let button;
+    	let t15;
+    	let t16;
+    	let h13;
+    	let t18;
+    	let dotgame;
+    	let current;
+    	let mounted;
+    	let dispose;
+    	myyoutube = new YoutubeIframeAPICustomInterface({ $$inline: true });
+    	nestedcommentstestfromreact = new NestedCommentsTestfromReact({ $$inline: true });
+    	let if_block = /*showModal*/ ctx[1] && create_if_block(ctx);
+    	dotgame = new MovingDotSpacePortfromReact({ $$inline: true });
+
+    	const block = {
+    		c: function create() {
+    			main = element("main");
+    			create_component(myyoutube.$$.fragment);
+    			t0 = space();
+    			h10 = element("h1");
+    			t1 = text("Hello ");
+    			t2 = text(/*name*/ ctx[0]);
+    			t3 = text("!");
+    			t4 = space();
+    			p = element("p");
+    			t5 = text("Visit the ");
+    			a = element("a");
+    			a.textContent = "Svelte tutorial";
+    			t7 = text(" to learn how to build Svelte apps.");
+    			t8 = space();
+    			h11 = element("h1");
+    			h11.textContent = "My new component test";
+    			t10 = space();
+    			create_component(nestedcommentstestfromreact.$$.fragment);
+    			t11 = space();
+    			h12 = element("h1");
+    			h12.textContent = "Modal for events in game and maybe inventory";
+    			t13 = space();
+    			button = element("button");
+    			button.textContent = "Open Modal - Fix break first modal close";
+    			t15 = space();
+    			if (if_block) if_block.c();
+    			t16 = space();
+    			h13 = element("h1");
+    			h13.textContent = "The End Goal is A themeable game using just one LLM prompt";
+    			t18 = space();
+    			create_component(dotgame.$$.fragment);
+    			attr_dev(h10, "class", "svelte-1tky8bj");
+    			add_location(h10, file, 25, 1, 599);
+    			attr_dev(a, "href", "https://svelte.dev/tutorial");
+    			add_location(a, file, 26, 14, 636);
+    			add_location(p, file, 26, 1, 623);
+    			attr_dev(h11, "class", "svelte-1tky8bj");
+    			add_location(h11, file, 28, 1, 735);
+    			attr_dev(h12, "class", "svelte-1tky8bj");
+    			add_location(h12, file, 35, 1, 916);
+    			add_location(button, file, 36, 1, 971);
+    			attr_dev(h13, "class", "svelte-1tky8bj");
+    			add_location(h13, file, 40, 1, 1159);
+    			attr_dev(main, "class", "svelte-1tky8bj");
+    			add_location(main, file, 21, 0, 574);
+    		},
+    		l: function claim(nodes) {
+    			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
+    		},
+    		m: function mount(target, anchor) {
+    			insert_dev(target, main, anchor);
+    			mount_component(myyoutube, main, null);
+    			append_dev(main, t0);
+    			append_dev(main, h10);
+    			append_dev(h10, t1);
+    			append_dev(h10, t2);
+    			append_dev(h10, t3);
+    			append_dev(main, t4);
+    			append_dev(main, p);
+    			append_dev(p, t5);
+    			append_dev(p, a);
+    			append_dev(p, t7);
+    			append_dev(main, t8);
+    			append_dev(main, h11);
+    			append_dev(main, t10);
+    			mount_component(nestedcommentstestfromreact, main, null);
+    			append_dev(main, t11);
+    			append_dev(main, h12);
+    			append_dev(main, t13);
+    			append_dev(main, button);
+    			append_dev(main, t15);
+    			if (if_block) if_block.m(main, null);
+    			append_dev(main, t16);
+    			append_dev(main, h13);
+    			append_dev(main, t18);
+    			mount_component(dotgame, main, null);
+    			current = true;
+
+    			if (!mounted) {
+    				dispose = listen_dev(button, "click", /*openModal*/ ctx[2], false, false, false, false);
+    				mounted = true;
+    			}
+    		},
+    		p: function update(ctx, [dirty]) {
+    			if (!current || dirty & /*name*/ 1) set_data_dev(t2, /*name*/ ctx[0]);
+
+    			if (/*showModal*/ ctx[1]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+
+    					if (dirty & /*showModal*/ 2) {
+    						transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block(ctx);
+    					if_block.c();
+    					transition_in(if_block, 1);
+    					if_block.m(main, t16);
+    				}
+    			} else if (if_block) {
+    				group_outros();
+
+    				transition_out(if_block, 1, 1, () => {
+    					if_block = null;
+    				});
+
+    				check_outros();
+    			}
+    		},
+    		i: function intro(local) {
+    			if (current) return;
+    			transition_in(myyoutube.$$.fragment, local);
+    			transition_in(nestedcommentstestfromreact.$$.fragment, local);
+    			transition_in(if_block);
+    			transition_in(dotgame.$$.fragment, local);
+    			current = true;
+    		},
+    		o: function outro(local) {
+    			transition_out(myyoutube.$$.fragment, local);
+    			transition_out(nestedcommentstestfromreact.$$.fragment, local);
+    			transition_out(if_block);
+    			transition_out(dotgame.$$.fragment, local);
+    			current = false;
+    		},
+    		d: function destroy(detaching) {
+    			if (detaching) detach_dev(main);
+    			destroy_component(myyoutube);
+    			destroy_component(nestedcommentstestfromreact);
+    			if (if_block) if_block.d();
+    			destroy_component(dotgame);
+    			mounted = false;
+    			dispose();
+    		}
+    	};
+
+    	dispatch_dev("SvelteRegisterBlock", {
+    		block,
+    		id: create_fragment.name,
+    		type: "component",
+    		source: "",
+    		ctx
+    	});
+
+    	return block;
+    }
+
+    function instance($$self, $$props, $$invalidate) {
+    	let { $$slots: slots = {}, $$scope } = $$props;
+    	validate_slots('App', slots, []);
+    	let { name } = $$props;
+    	let showModal = false;
+
+    	function openModal() {
+    		$$invalidate(1, showModal = true);
+    	}
+
+    	function closeModal() {
+    		$$invalidate(1, showModal = false);
+    	}
 
     	$$self.$$.on_mount.push(function () {
     		if (name === undefined && !('name' in $$props || $$self.$$.bound[$$self.$$.props['name']])) {
@@ -2167,18 +5408,25 @@ var app = (function () {
     		name,
     		VideoGradioComponentBrainstorming,
     		NestedCommentsTestfromReact,
-    		DotGame: MovingDotSpacePortfromReact
+    		DotGame: MovingDotSpacePortfromReact,
+    		YoutubeBookmarker: YoutubeBookmarksfromReact,
+    		Modal: SimpleModal,
+    		MyYoutube: YoutubeIframeAPICustomInterface,
+    		showModal,
+    		openModal,
+    		closeModal
     	});
 
     	$$self.$inject_state = $$props => {
     		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+    		if ('showModal' in $$props) $$invalidate(1, showModal = $$props.showModal);
     	};
 
     	if ($$props && "$$inject" in $$props) {
     		$$self.$inject_state($$props.$$inject);
     	}
 
-    	return [name];
+    	return [name, showModal, openModal];
     }
 
     class App extends SvelteComponentDev {