Show mini preview of Twitch Stream.
// ==UserScript== // @name TiwtchPreview // @namespace Violentmonkey Scripts // @description Show mini preview of Twitch Stream. // @match *://*.twitch.tv/* // @version 0.0.1 // @license MIT // @icon https://external-content.duckduckgo.com/ip3/www.twitch.tv.ico // @author Pipos_ // @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2 // @require https://cdn.jsdelivr.net/npm/@violentmonkey/[email protected] // @homepageURL https://github.com/P1P0S/TwitchPreview // @supportURL https://github.com/P1P0S/TwitchPreview/issues // @grant GM_addStyle // @grant GM_getValue // @grant GM_setValue // ==/UserScript== (function () { 'use strict'; const IS_DEV = false; const equalFn = (a, b) => a === b; const $TRACK = Symbol("solid-track"); const signalOptions = { equals: equalFn }; let runEffects = runQueue; const STALE = 1; const PENDING = 2; const UNOWNED = { owned: null, cleanups: null, context: null, owner: null }; var Owner = null; let Transition = null; let ExternalSourceConfig = null; let Listener = null; let Updates = null; let Effects = null; let ExecCount = 0; function createRoot(fn, detachedOwner) { const listener = Listener, owner = Owner, unowned = fn.length === 0, current = detachedOwner === undefined ? owner : detachedOwner, root = unowned ? UNOWNED : { owned: null, cleanups: null, context: current ? current.context : null, owner: current }, updateFn = unowned ? fn : () => fn(() => untrack(() => cleanNode(root))); Owner = root; Listener = null; try { return runUpdates(updateFn, true); } finally { Listener = listener; Owner = owner; } } function createSignal(value, options) { options = options ? Object.assign({}, signalOptions, options) : signalOptions; const s = { value, observers: null, observerSlots: null, comparator: options.equals || undefined }; const setter = value => { if (typeof value === "function") { value = value(s.value); } return writeSignal(s, value); }; return [readSignal.bind(s), setter]; } function createRenderEffect(fn, value, options) { const c = createComputation(fn, value, false, STALE); updateComputation(c); } function createMemo(fn, value, options) { options = options ? Object.assign({}, signalOptions, options) : signalOptions; const c = createComputation(fn, value, true, 0); c.observers = null; c.observerSlots = null; c.comparator = options.equals || undefined; updateComputation(c); return readSignal.bind(c); } function untrack(fn) { if (Listener === null) return fn(); const listener = Listener; Listener = null; try { if (ExternalSourceConfig) ; return fn(); } finally { Listener = listener; } } function onCleanup(fn) { if (Owner === null) ;else if (Owner.cleanups === null) Owner.cleanups = [fn];else Owner.cleanups.push(fn); return fn; } function readSignal() { if (this.sources && (this.state)) { if ((this.state) === STALE) updateComputation(this);else { const updates = Updates; Updates = null; runUpdates(() => lookUpstream(this), false); Updates = updates; } } if (Listener) { const sSlot = this.observers ? this.observers.length : 0; if (!Listener.sources) { Listener.sources = [this]; Listener.sourceSlots = [sSlot]; } else { Listener.sources.push(this); Listener.sourceSlots.push(sSlot); } if (!this.observers) { this.observers = [Listener]; this.observerSlots = [Listener.sources.length - 1]; } else { this.observers.push(Listener); this.observerSlots.push(Listener.sources.length - 1); } } return this.value; } function writeSignal(node, value, isComp) { let current = node.value; if (!node.comparator || !node.comparator(current, value)) { node.value = value; if (node.observers && node.observers.length) { runUpdates(() => { for (let i = 0; i < node.observers.length; i += 1) { const o = node.observers[i]; const TransitionRunning = Transition && Transition.running; if (TransitionRunning && Transition.disposed.has(o)) ; if (TransitionRunning ? !o.tState : !o.state) { if (o.pure) Updates.push(o);else Effects.push(o); if (o.observers) markDownstream(o); } if (!TransitionRunning) o.state = STALE; } if (Updates.length > 10e5) { Updates = []; if (IS_DEV) ; throw new Error(); } }, false); } } return value; } function updateComputation(node) { if (!node.fn) return; cleanNode(node); const time = ExecCount; runComputation(node, node.value, time); } function runComputation(node, value, time) { let nextValue; const owner = Owner, listener = Listener; Listener = Owner = node; try { nextValue = node.fn(value); } catch (err) { if (node.pure) { { node.state = STALE; node.owned && node.owned.forEach(cleanNode); node.owned = null; } } node.updatedAt = time + 1; return handleError(err); } finally { Listener = listener; Owner = owner; } if (!node.updatedAt || node.updatedAt <= time) { if (node.updatedAt != null && "observers" in node) { writeSignal(node, nextValue); } else node.value = nextValue; node.updatedAt = time; } } function createComputation(fn, init, pure, state = STALE, options) { const c = { fn, state: state, updatedAt: null, owned: null, sources: null, sourceSlots: null, cleanups: null, value: init, owner: Owner, context: Owner ? Owner.context : null, pure }; if (Owner === null) ;else if (Owner !== UNOWNED) { { if (!Owner.owned) Owner.owned = [c];else Owner.owned.push(c); } } return c; } function runTop(node) { if ((node.state) === 0) return; if ((node.state) === PENDING) return lookUpstream(node); if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node); const ancestors = [node]; while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) { if (node.state) ancestors.push(node); } for (let i = ancestors.length - 1; i >= 0; i--) { node = ancestors[i]; if ((node.state) === STALE) { updateComputation(node); } else if ((node.state) === PENDING) { const updates = Updates; Updates = null; runUpdates(() => lookUpstream(node, ancestors[0]), false); Updates = updates; } } } function runUpdates(fn, init) { if (Updates) return fn(); let wait = false; if (!init) Updates = []; if (Effects) wait = true;else Effects = []; ExecCount++; try { const res = fn(); completeUpdates(wait); return res; } catch (err) { if (!wait) Effects = null; Updates = null; handleError(err); } } function completeUpdates(wait) { if (Updates) { runQueue(Updates); Updates = null; } if (wait) return; const e = Effects; Effects = null; if (e.length) runUpdates(() => runEffects(e), false); } function runQueue(queue) { for (let i = 0; i < queue.length; i++) runTop(queue[i]); } function lookUpstream(node, ignore) { node.state = 0; for (let i = 0; i < node.sources.length; i += 1) { const source = node.sources[i]; if (source.sources) { const state = source.state; if (state === STALE) { if (source !== ignore && (!source.updatedAt || source.updatedAt < ExecCount)) runTop(source); } else if (state === PENDING) lookUpstream(source, ignore); } } } function markDownstream(node) { for (let i = 0; i < node.observers.length; i += 1) { const o = node.observers[i]; if (!o.state) { o.state = PENDING; if (o.pure) Updates.push(o);else Effects.push(o); o.observers && markDownstream(o); } } } function cleanNode(node) { let i; if (node.sources) { while (node.sources.length) { const source = node.sources.pop(), index = node.sourceSlots.pop(), obs = source.observers; if (obs && obs.length) { const n = obs.pop(), s = source.observerSlots.pop(); if (index < obs.length) { n.sourceSlots[s] = index; obs[index] = n; source.observerSlots[index] = s; } } } } if (node.tOwned) { for (i = node.tOwned.length - 1; i >= 0; i--) cleanNode(node.tOwned[i]); delete node.tOwned; } if (node.owned) { for (i = node.owned.length - 1; i >= 0; i--) cleanNode(node.owned[i]); node.owned = null; } if (node.cleanups) { for (i = node.cleanups.length - 1; i >= 0; i--) node.cleanups[i](); node.cleanups = null; } node.state = 0; } function castError(err) { if (err instanceof Error) return err; return new Error(typeof err === "string" ? err : "Unknown error", { cause: err }); } function handleError(err, owner = Owner) { const error = castError(err); throw error; } const FALLBACK = Symbol("fallback"); function dispose(d) { for (let i = 0; i < d.length; i++) d[i](); } function mapArray(list, mapFn, options = {}) { let items = [], mapped = [], disposers = [], len = 0, indexes = mapFn.length > 1 ? [] : null; onCleanup(() => dispose(disposers)); return () => { let newItems = list() || [], newLen = newItems.length, i, j; newItems[$TRACK]; return untrack(() => { let newIndices, newIndicesNext, temp, tempdisposers, tempIndexes, start, end, newEnd, item; if (newLen === 0) { if (len !== 0) { dispose(disposers); disposers = []; items = []; mapped = []; len = 0; indexes && (indexes = []); } if (options.fallback) { items = [FALLBACK]; mapped[0] = createRoot(disposer => { disposers[0] = disposer; return options.fallback(); }); len = 1; } } else if (len === 0) { mapped = new Array(newLen); for (j = 0; j < newLen; j++) { items[j] = newItems[j]; mapped[j] = createRoot(mapper); } len = newLen; } else { temp = new Array(newLen); tempdisposers = new Array(newLen); indexes && (tempIndexes = new Array(newLen)); for (start = 0, end = Math.min(len, newLen); start < end && items[start] === newItems[start]; start++); for (end = len - 1, newEnd = newLen - 1; end >= start && newEnd >= start && items[end] === newItems[newEnd]; end--, newEnd--) { temp[newEnd] = mapped[end]; tempdisposers[newEnd] = disposers[end]; indexes && (tempIndexes[newEnd] = indexes[end]); } newIndices = new Map(); newIndicesNext = new Array(newEnd + 1); for (j = newEnd; j >= start; j--) { item = newItems[j]; i = newIndices.get(item); newIndicesNext[j] = i === undefined ? -1 : i; newIndices.set(item, j); } for (i = start; i <= end; i++) { item = items[i]; j = newIndices.get(item); if (j !== undefined && j !== -1) { temp[j] = mapped[i]; tempdisposers[j] = disposers[i]; indexes && (tempIndexes[j] = indexes[i]); j = newIndicesNext[j]; newIndices.set(item, j); } else disposers[i](); } for (j = start; j < newLen; j++) { if (j in temp) { mapped[j] = temp[j]; disposers[j] = tempdisposers[j]; if (indexes) { indexes[j] = tempIndexes[j]; indexes[j](j); } } else mapped[j] = createRoot(mapper); } mapped = mapped.slice(0, len = newLen); items = newItems.slice(0); } return mapped; }); function mapper(disposer) { disposers[j] = disposer; if (indexes) { const [s, set] = createSignal(j); indexes[j] = set; return mapFn(newItems[j], s); } return mapFn(newItems[j]); } }; } function createComponent(Comp, props) { return untrack(() => Comp(props || {})); } const narrowedError = name => `Stale read from <${name}>.`; function For(props) { const fallback = "fallback" in props && { fallback: () => props.fallback }; return createMemo(mapArray(() => props.each, props.children, fallback || undefined)); } function Show(props) { const keyed = props.keyed; const conditionValue = createMemo(() => props.when, undefined, undefined); const condition = keyed ? conditionValue : createMemo(conditionValue, undefined, { equals: (a, b) => !a === !b }); return createMemo(() => { const c = condition(); if (c) { const child = props.children; const fn = typeof child === "function" && child.length > 0; return fn ? untrack(() => child(keyed ? c : () => { if (!untrack(condition)) throw narrowedError("Show"); return conditionValue(); })) : child; } return props.fallback; }, undefined, undefined); } function reconcileArrays(parentNode, a, b) { let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = a[aEnd - 1].nextSibling, map = null; while (aStart < aEnd || bStart < bEnd) { if (a[aStart] === b[bStart]) { aStart++; bStart++; continue; } while (a[aEnd - 1] === b[bEnd - 1]) { aEnd--; bEnd--; } if (aEnd === aStart) { const node = bEnd < bLength ? bStart ? b[bStart - 1].nextSibling : b[bEnd - bStart] : after; while (bStart < bEnd) parentNode.insertBefore(b[bStart++], node); } else if (bEnd === bStart) { while (aStart < aEnd) { if (!map || !map.has(a[aStart])) a[aStart].remove(); aStart++; } } else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) { const node = a[--aEnd].nextSibling; parentNode.insertBefore(b[bStart++], a[aStart++].nextSibling); parentNode.insertBefore(b[--bEnd], node); a[aEnd] = b[bEnd]; } else { if (!map) { map = new Map(); let i = bStart; while (i < bEnd) map.set(b[i], i++); } const index = map.get(a[aStart]); if (index != null) { if (bStart < index && index < bEnd) { let i = aStart, sequence = 1, t; while (++i < aEnd && i < bEnd) { if ((t = map.get(a[i])) == null || t !== index + sequence) break; sequence++; } if (sequence > index - bStart) { const node = a[aStart]; while (bStart < index) parentNode.insertBefore(b[bStart++], node); } else parentNode.replaceChild(b[bStart++], a[aStart++]); } else aStart++; } else a[aStart++].remove(); } } } const $$EVENTS = "_$DX_DELEGATE"; function render(code, element, init, options = {}) { let disposer; createRoot(dispose => { disposer = dispose; element === document ? code() : insert(element, code(), element.firstChild ? null : undefined, init); }, options.owner); return () => { disposer(); element.textContent = ""; }; } function template(html, isImportNode, isSVG, isMathML) { let node; const create = () => { const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template"); t.innerHTML = html; return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild; }; const fn = isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true); fn.cloneNode = fn; return fn; } function delegateEvents(eventNames, document = window.document) { const e = document[$$EVENTS] || (document[$$EVENTS] = new Set()); for (let i = 0, l = eventNames.length; i < l; i++) { const name = eventNames[i]; if (!e.has(name)) { e.add(name); document.addEventListener(name, eventHandler); } } } function setAttribute(node, name, value) { if (value == null) node.removeAttribute(name);else node.setAttribute(name, value); } function addEventListener(node, name, handler, delegate) { if (delegate) { if (Array.isArray(handler)) { node[`$$${name}`] = handler[0]; node[`$$${name}Data`] = handler[1]; } else node[`$$${name}`] = handler; } else if (Array.isArray(handler)) { const handlerFn = handler[0]; node.addEventListener(name, handler[0] = e => handlerFn.call(node, handler[1], e)); } else node.addEventListener(name, handler, typeof handler !== "function" && handler); } function style(node, value, prev) { if (!value) return prev ? setAttribute(node, "style") : value; const nodeStyle = node.style; if (typeof value === "string") return nodeStyle.cssText = value; typeof prev === "string" && (nodeStyle.cssText = prev = undefined); prev || (prev = {}); value || (value = {}); let v, s; for (s in prev) { value[s] == null && nodeStyle.removeProperty(s); delete prev[s]; } for (s in value) { v = value[s]; if (v !== prev[s]) { nodeStyle.setProperty(s, v); prev[s] = v; } } return prev; } function use(fn, element, arg) { return untrack(() => fn(element, arg)); } function insert(parent, accessor, marker, initial) { if (marker !== undefined && !initial) initial = []; if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker); createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial); } function eventHandler(e) { let node = e.target; const key = `$$${e.type}`; const oriTarget = e.target; const oriCurrentTarget = e.currentTarget; const retarget = value => Object.defineProperty(e, "target", { configurable: true, value }); const handleNode = () => { const handler = node[key]; if (handler && !node.disabled) { const data = node[`${key}Data`]; data !== undefined ? handler.call(node, data, e) : handler.call(node, e); if (e.cancelBubble) return; } node.host && typeof node.host !== "string" && !node.host._$host && node.contains(e.target) && retarget(node.host); return true; }; const walkUpTree = () => { while (handleNode() && (node = node._$host || node.parentNode || node.host)); }; Object.defineProperty(e, "currentTarget", { configurable: true, get() { return node || document; } }); if (e.composedPath) { const path = e.composedPath(); retarget(path[0]); for (let i = 0; i < path.length - 2; i++) { node = path[i]; if (!handleNode()) break; if (node._$host) { node = node._$host; walkUpTree(); break; } if (node.parentNode === oriCurrentTarget) { break; } } } else walkUpTree(); retarget(oriTarget); } function insertExpression(parent, value, current, marker, unwrapArray) { while (typeof current === "function") current = current(); if (value === current) return current; const t = typeof value, multi = marker !== undefined; parent = multi && current[0] && current[0].parentNode || parent; if (t === "string" || t === "number") { if (t === "number") { value = value.toString(); if (value === current) return current; } if (multi) { let node = current[0]; if (node && node.nodeType === 3) { node.data !== value && (node.data = value); } else node = document.createTextNode(value); current = cleanChildren(parent, current, marker, node); } else { if (current !== "" && typeof current === "string") { current = parent.firstChild.data = value; } else current = parent.textContent = value; } } else if (value == null || t === "boolean") { current = cleanChildren(parent, current, marker); } else if (t === "function") { createRenderEffect(() => { let v = value(); while (typeof v === "function") v = v(); current = insertExpression(parent, v, current, marker); }); return () => current; } else if (Array.isArray(value)) { const array = []; const currentArray = current && Array.isArray(current); if (normalizeIncomingArray(array, value, current, unwrapArray)) { createRenderEffect(() => current = insertExpression(parent, array, current, marker, true)); return () => current; } if (array.length === 0) { current = cleanChildren(parent, current, marker); if (multi) return current; } else if (currentArray) { if (current.length === 0) { appendNodes(parent, array, marker); } else reconcileArrays(parent, current, array); } else { current && cleanChildren(parent); appendNodes(parent, array); } current = array; } else if (value.nodeType) { if (Array.isArray(current)) { if (multi) return current = cleanChildren(parent, current, marker, value); cleanChildren(parent, current, null, value); } else if (current == null || current === "" || !parent.firstChild) { parent.appendChild(value); } else parent.replaceChild(value, parent.firstChild); current = value; } else ; return current; } function normalizeIncomingArray(normalized, array, current, unwrap) { let dynamic = false; for (let i = 0, len = array.length; i < len; i++) { let item = array[i], prev = current && current[normalized.length], t; if (item == null || item === true || item === false) ; else if ((t = typeof item) === "object" && item.nodeType) { normalized.push(item); } else if (Array.isArray(item)) { dynamic = normalizeIncomingArray(normalized, item, prev) || dynamic; } else if (t === "function") { if (unwrap) { while (typeof item === "function") item = item(); dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic; } else { normalized.push(item); dynamic = true; } } else { const value = String(item); if (prev && prev.nodeType === 3 && prev.data === value) normalized.push(prev);else normalized.push(document.createTextNode(value)); } } return dynamic; } function appendNodes(parent, array, marker = null) { for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker); } function cleanChildren(parent, current, marker, replacement) { if (marker === undefined) return parent.textContent = ""; const node = replacement || document.createTextNode(""); if (current.length) { let inserted = false; for (let i = current.length - 1; i >= 0; i--) { const el = current[i]; if (node !== el) { const isParent = el.parentNode === parent; if (!inserted && !i) isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);else isParent && el.remove(); } else inserted = true; } } else parent.insertBefore(node, marker); return [node]; } const DEFAULT_PANEL_WIDTH = 460; const DEFAULT_PANEL_HEIGHT = 290; const DEFAULT_HOVER_DELAY = 500; const DEFAULT_HIDE_DELAY = 300; const DEFAULT_BLOCKED_ROUTES = ['directory', 'downloads', 'jobs', 'p', 'search', 'settings', 'subscriptions', 'turbo', 'wallet', 'videos']; function loadSetting(key, fallback) { try { const val = GM_getValue(key, undefined); if (val !== undefined) return val; } catch (_unused) {/* noop */} return fallback; } function saveSetting(key, value) { try { GM_setValue(key, value); } catch (_unused2) {/* noop */} } const [panelWidth, _setPanelWidth] = createSignal(loadSetting('panelWidth', DEFAULT_PANEL_WIDTH)); const [panelHeight, _setPanelHeight] = createSignal(loadSetting('panelHeight', DEFAULT_PANEL_HEIGHT)); const [hoverDelay, _setHoverDelay] = createSignal(loadSetting('hoverDelay', DEFAULT_HOVER_DELAY)); const [hideDelay, _setHideDelay] = createSignal(loadSetting('hideDelay', DEFAULT_HIDE_DELAY)); const [blockedRoutes, _setBlockedRoutes] = createSignal(loadSetting('blockedRoutes', DEFAULT_BLOCKED_ROUTES)); function setPanelWidth(v) { _setPanelWidth(v); saveSetting('panelWidth', v); } function setPanelHeight(v) { _setPanelHeight(v); saveSetting('panelHeight', v); } function setHoverDelay(v) { _setHoverDelay(v); saveSetting('hoverDelay', v); } function setHideDelay(v) { _setHideDelay(v); saveSetting('hideDelay', v); } function setBlockedRoutes(v) { _setBlockedRoutes(v); saveSetting('blockedRoutes', v); } function resetAllSettings() { setPanelWidth(DEFAULT_PANEL_WIDTH); setPanelHeight(DEFAULT_PANEL_HEIGHT); setHoverDelay(DEFAULT_HOVER_DELAY); setHideDelay(DEFAULT_HIDE_DELAY); setBlockedRoutes([...DEFAULT_BLOCKED_ROUTES]); } function getTwitchParent() { return window.location.hostname; } function buildEmbedUrl(channelLogin) { const parent = encodeURIComponent(getTwitchParent()); const ch = encodeURIComponent(channelLogin); return `https://player.twitch.tv/?channel=${ch}&parent=${parent}&muted=true&autoplay=true`; } function extractChannelLoginFromLink(a) { const href = a.getAttribute('href'); if (!href) return null; const clean = href.split('?')[0].split('#')[0]; const parts = clean.split('/').filter(Boolean); if (!parts.length) return null; const login = parts[0]; const blocked = new Set(blockedRoutes()); if (blocked.has(login)) return null; if (!/^[a-z0-9_]{2,25}$/i.test(login)) return null; return login; } function findAnchorFromTarget(target) { if (!(target instanceof Element)) return null; return target.closest('a[href^="/"]'); } function isSidebarChannelLink(a) { const nav = a.closest('nav'); if (!nav) return false; const rect = nav.getBoundingClientRect(); return rect.left < 80 && rect.width < 500; } function useDrag(onDragEndOutside) { const [isDragging, setIsDragging] = createSignal(false); let dragOffsetX = 0; let dragOffsetY = 0; let currentPanelRef = null; const onDragMove = e => { if (!isDragging() || !currentPanelRef) return; e.preventDefault(); let left = e.clientX - dragOffsetX; let top = e.clientY - dragOffsetY; left = Math.max(0, Math.min(window.innerWidth - panelWidth(), left)); top = Math.max(0, Math.min(window.innerHeight - panelHeight(), top)); currentPanelRef.style.left = `${left}px`; currentPanelRef.style.top = `${top}px`; }; const onDragEnd = e => { if (!isDragging()) return; setIsDragging(false); window.removeEventListener('mousemove', onDragMove); window.removeEventListener('mouseup', onDragEnd); if (currentPanelRef) { const rect = currentPanelRef.getBoundingClientRect(); const isOutside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom; if (isOutside) { onDragEndOutside(); } } }; const onDragStart = (e, panelRef) => { e.preventDefault(); currentPanelRef = panelRef; setIsDragging(true); dragOffsetX = e.clientX - panelRef.offsetLeft; dragOffsetY = e.clientY - panelRef.offsetTop; window.addEventListener('mousemove', onDragMove); window.addEventListener('mouseup', onDragEnd); }; const cleanupDrag = () => { window.removeEventListener('mousemove', onDragMove); window.removeEventListener('mouseup', onDragEnd); }; return { isDragging, onDragStart, cleanupDrag }; } function useTimers() { let hoverTimer = null; let hideTimer = null; const cancelHide = () => { if (hideTimer) { window.clearTimeout(hideTimer); hideTimer = null; } }; const cancelHover = () => { if (hoverTimer) { window.clearTimeout(hoverTimer); hoverTimer = null; } }; const scheduleHide = callback => { cancelHide(); hideTimer = window.setTimeout(() => { callback(); hideTimer = null; }, hideDelay()); }; const setHoverTimer = (callback, delay) => { cancelHover(); hoverTimer = window.setTimeout(() => { callback(); hoverTimer = null; }, delay); }; const clearAllTimers = () => { cancelHide(); cancelHover(); }; return { scheduleHide, cancelHide, setHoverTimer, cancelHover, clearAllTimers }; } function usePreviewPanel() { const [getChannel, setChannel] = createSignal(null); const [isLoading, setIsLoading] = createSignal(false); const [isVisible, setIsVisible] = createSignal(false); const [isPinned, setIsPinned] = createSignal(false); const [showSettings, setShowSettings] = createSignal(false); let iframeEl = null; let panelRef; const timers = useTimers(); const hidePanel = () => { setIsVisible(false); setIsPinned(false); setTimeout(() => { setChannel(null); if (iframeEl) iframeEl.src = ''; }, 200); }; const requestHide = () => { if (isPinned() || drag.isDragging()) return; timers.scheduleHide(hidePanel); }; const drag = useDrag(() => { if (!isPinned()) { requestHide(); } }); const showPanel = (login, linkRect) => { setChannel(login); setIsLoading(true); setIsVisible(true); if (iframeEl) { iframeEl.src = buildEmbedUrl(login); setTimeout(() => setIsLoading(false), 800); } if (!panelRef) return; let left = linkRect.right + 15; let top = linkRect.top - 20; if (left + panelWidth() > window.innerWidth) { left = linkRect.left - panelWidth() - 15; } if (top + panelHeight() > window.innerHeight) { top = window.innerHeight - panelHeight() - 10; } if (top < 10) top = 10; panelRef.style.left = `${left}px`; panelRef.style.top = `${top}px`; }; const onMouseOver = ev => { const a = findAnchorFromTarget(ev.target); if (!a || !isSidebarChannelLink(a)) return; const login = extractChannelLoginFromLink(a); if (!login) return; timers.cancelHide(); if (getChannel() === login) return; timers.setHoverTimer(() => { const rect = a.getBoundingClientRect(); showPanel(login, rect); }, hoverDelay()); }; const onMouseOut = ev => { const a = findAnchorFromTarget(ev.target); if (!a || !isSidebarChannelLink(a)) return; timers.cancelHover(); requestHide(); }; const openInTwitch = () => { const ch = getChannel(); if (ch) { window.open(`https://www.twitch.tv/${ch}`, '_blank'); } }; const togglePin = () => { setIsPinned(!isPinned()); }; const toggleSettings = () => { setShowSettings(!showSettings()); }; const handlePanelMouseEnter = () => { timers.cancelHide(); }; const handlePanelMouseLeave = () => { requestHide(); }; const handleDragStart = e => { if (!panelRef) return; timers.cancelHide(); drag.onDragStart(e, panelRef); }; window.addEventListener('mouseover', onMouseOver, true); window.addEventListener('mouseout', onMouseOut, true); onCleanup(() => { var _panelRef; window.removeEventListener('mouseover', onMouseOver, true); window.removeEventListener('mouseout', onMouseOut, true); drag.cleanupDrag(); timers.clearAllTimers(); if ((_panelRef = panelRef) != null && _panelRef.parentNode) { panelRef.parentNode.removeChild(panelRef); } }); return { getChannel, isLoading, isVisible, isPinned, isDragging: drag.isDragging, showSettings, setIframeRef: el => { iframeEl = el; }, setPanelRef: el => { panelRef = el; }, hidePanel, openInTwitch, togglePin, toggleSettings, handlePanelMouseEnter, handlePanelMouseLeave, handleDragStart }; } function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } const FONT_STACK = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'; function panelStyle(isVisible, isDragging, hasChannel) { return { position: 'fixed', 'z-index': 999999, display: hasChannel ? 'block' : 'none', width: `${panelWidth()}px`, height: `${panelHeight()}px`, background: '#18181b', border: '1px solid #323237', 'border-radius': '12px', 'box-shadow': '0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05)', padding: 0, 'pointer-events': 'auto', overflow: 'hidden', 'user-select': 'none', opacity: isVisible ? '1' : '0', transform: isVisible ? 'scale(1)' : 'scale(0.95)', transition: isDragging ? 'none' : 'opacity 0.2s ease, transform 0.2s ease' }; } const headerStyle = { display: 'flex', 'align-items': 'center', 'justify-content': 'space-between', padding: '10px 12px', background: 'linear-gradient(to bottom, #1f1f23, #18181b)', 'border-bottom': '1px solid #323237' }; const headerLeftStyle = { display: 'flex', 'align-items': 'center', gap: '8px', flex: 1, 'min-width': 0 }; const liveDotStyle = { width: '8px', height: '8px', 'border-radius': '50%', background: '#ff4655', 'box-shadow': '0 0 8px rgba(255, 70, 85, 0.6)', animation: 'pulse 2s ease-in-out infinite' }; const channelNameStyle = { color: '#efeff1', 'font-size': '14px', 'font-weight': '600', 'font-family': FONT_STACK, 'white-space': 'nowrap', overflow: 'hidden', 'text-overflow': 'ellipsis' }; const liveBadgeStyle = { color: '#fff', 'font-size': '10px', 'font-weight': '700', 'font-family': FONT_STACK, 'text-transform': 'uppercase', background: '#e91916', padding: '2px 6px', 'border-radius': '4px', 'letter-spacing': '0.5px' }; const buttonGroupStyle = { display: 'flex', gap: '6px' }; const iconButtonStyle = { background: 'transparent', border: 'none', color: '#efeff1', cursor: 'pointer', padding: '4px 8px', 'border-radius': '6px', display: 'flex', 'align-items': 'center', 'justify-content': 'center', transition: 'background 0.2s ease' }; const dragButtonStyle = _extends({}, iconButtonStyle, { cursor: 'grab' }); const loaderOverlayStyle = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', 'z-index': 10, display: 'flex', 'flex-direction': 'column', 'align-items': 'center', gap: '12px' }; const spinnerStyle = { width: '32px', height: '32px', border: '3px solid rgba(145, 71, 255, 0.2)', 'border-top-color': '#9147ff', 'border-radius': '50%', animation: 'spin 0.8s linear infinite' }; const loaderTextStyle = { color: '#efeff1', 'font-size': '12px', 'font-family': FONT_STACK }; const iframeStyle = { width: '100%', height: 'calc(100% - 40px)', border: 0, display: 'block', background: '#0e0e10' }; function applyHover(e) { e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)'; } function removeHover(e) { e.currentTarget.style.background = 'transparent'; } var _tmpl$$2 = /*#__PURE__*/template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><circle cx=12 cy=5 r=1></circle><circle cx=19 cy=5 r=1></circle><circle cx=5 cy=5 r=1></circle><circle cx=12 cy=12 r=1></circle><circle cx=19 cy=12 r=1></circle><circle cx=5 cy=12 r=1></circle><circle cx=12 cy=19 r=1></circle><circle cx=19 cy=19 r=1></circle><circle cx=5 cy=19 r=1>`), _tmpl$2$2 = /*#__PURE__*/template(`<svg width=16 height=16 viewBox="0 0 24 24"stroke=currentColor stroke-width=2><path d="M12 17v5"></path><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z">`), _tmpl$3 = /*#__PURE__*/template(`<svg xmlns=http://www.w3.org/2000/svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx=12 cy=12 r=3>`), _tmpl$4 = /*#__PURE__*/template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6">`), _tmpl$5 = /*#__PURE__*/template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><circle cx=12 cy=12 r=10></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6">`), _tmpl$6 = /*#__PURE__*/template(`<div><div><div></div><span></span><span>LIVE</span></div><button title="Drag to move"></button><div><button></button><button title=Settings></button><button title="Open in new tab"></button><button title=Close>`); function DragIcon() { return _tmpl$$2(); } function PinIcon(props) { return (() => { var _el$2 = _tmpl$2$2(); createRenderEffect(() => setAttribute(_el$2, "fill", props.filled ? 'currentColor' : 'none')); return _el$2; })(); } function SettingsIcon() { return _tmpl$3(); } function ExternalLinkIcon() { return _tmpl$4(); } function CloseIcon() { return _tmpl$5(); } function HeaderBar(props) { return (() => { var _el$6 = _tmpl$6(), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$9.nextSibling, _el$1 = _el$7.nextSibling, _el$10 = _el$1.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.nextSibling; insert(_el$9, () => props.channel()); addEventListener(_el$1, "mouseleave", removeHover); addEventListener(_el$1, "mouseenter", applyHover); addEventListener(_el$1, "mousedown", props.onDragStart, true); insert(_el$1, createComponent(DragIcon, {})); addEventListener(_el$11, "mouseleave", removeHover); addEventListener(_el$11, "mouseenter", applyHover); addEventListener(_el$11, "click", props.onTogglePin, true); insert(_el$11, createComponent(PinIcon, { get filled() { return props.isPinned(); } })); addEventListener(_el$12, "mouseleave", removeHover); addEventListener(_el$12, "mouseenter", applyHover); addEventListener(_el$12, "click", props.onOpenSettings, true); insert(_el$12, createComponent(SettingsIcon, {})); addEventListener(_el$13, "mouseleave", removeHover); addEventListener(_el$13, "mouseenter", applyHover); addEventListener(_el$13, "click", props.onOpenInTwitch, true); insert(_el$13, createComponent(ExternalLinkIcon, {})); addEventListener(_el$14, "mouseleave", removeHover); addEventListener(_el$14, "mouseenter", applyHover); addEventListener(_el$14, "click", props.onClose, true); insert(_el$14, createComponent(CloseIcon, {})); createRenderEffect(_p$ => { var _v$ = headerStyle, _v$2 = headerLeftStyle, _v$3 = liveDotStyle, _v$4 = channelNameStyle, _v$5 = liveBadgeStyle, _v$6 = dragButtonStyle, _v$7 = buttonGroupStyle, _v$8 = iconButtonStyle, _v$9 = props.isPinned() ? 'Unpin' : 'Pin', _v$0 = iconButtonStyle, _v$1 = iconButtonStyle, _v$10 = iconButtonStyle; _p$.e = style(_el$6, _v$, _p$.e); _p$.t = style(_el$7, _v$2, _p$.t); _p$.a = style(_el$8, _v$3, _p$.a); _p$.o = style(_el$9, _v$4, _p$.o); _p$.i = style(_el$0, _v$5, _p$.i); _p$.n = style(_el$1, _v$6, _p$.n); _p$.s = style(_el$10, _v$7, _p$.s); _p$.h = style(_el$11, _v$8, _p$.h); _v$9 !== _p$.r && setAttribute(_el$11, "title", _p$.r = _v$9); _p$.d = style(_el$12, _v$0, _p$.d); _p$.l = style(_el$13, _v$1, _p$.l); _p$.u = style(_el$14, _v$10, _p$.u); return _p$; }, { e: undefined, t: undefined, a: undefined, o: undefined, i: undefined, n: undefined, s: undefined, h: undefined, r: undefined, d: undefined, l: undefined, u: undefined }); return _el$6; })(); } delegateEvents(["mousedown", "click"]); var _tmpl$$1 = /*#__PURE__*/template(`<div><div><div><span>Settings</span><button><svg width=18 height=18 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg></button></div><div><label>Blocked Routes</label><textarea></textarea><div>Comma-separated list of routes to ignore</div></div><div><button>Reset Defaults</button><div style=flex:1></div><button>Cancel</button><button>Save`), _tmpl$2$1 = /*#__PURE__*/template(`<div><label></label><input><div>`); const FONT = 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'; const overlayStyle = { position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0, 0, 0, 0.7)', 'z-index': 9999999, display: 'flex', 'align-items': 'center', 'justify-content': 'center', 'backdrop-filter': 'blur(4px)' }; const modalStyle = { background: '#1f1f23', border: '1px solid #323237', 'border-radius': '12px', padding: '24px', width: '380px', 'max-height': '80vh', 'overflow-y': 'auto', color: '#efeff1', 'font-family': FONT, 'box-shadow': '0 16px 48px rgba(0, 0, 0, 0.8)' }; const titleStyle = { 'font-size': '18px', 'font-weight': '700', margin: '0 0 20px 0', display: 'flex', 'align-items': 'center', 'justify-content': 'space-between' }; const fieldStyle = { 'margin-bottom': '16px' }; const labelStyle = { display: 'block', 'font-size': '12px', 'font-weight': '600', color: '#adadb8', 'margin-bottom': '6px', 'text-transform': 'uppercase', 'letter-spacing': '0.5px' }; const inputStyle = { width: '100%', padding: '8px 12px', background: '#0e0e10', border: '1px solid #323237', 'border-radius': '6px', color: '#efeff1', 'font-size': '14px', 'font-family': FONT, outline: 'none', 'box-sizing': 'border-box', transition: 'border-color 0.2s' }; const textareaStyle = _extends({}, inputStyle, { 'min-height': '80px', resize: 'vertical' }); const hintStyle = { 'font-size': '11px', color: '#71717a', 'margin-top': '4px' }; const btnRowStyle = { display: 'flex', gap: '8px', 'margin-top': '20px', 'justify-content': 'flex-end' }; const btnBase = { padding: '8px 16px', 'border-radius': '6px', border: 'none', 'font-size': '13px', 'font-weight': '600', 'font-family': FONT, cursor: 'pointer', transition: 'background 0.2s' }; const btnPrimary = _extends({}, btnBase, { background: '#9147ff', color: '#fff' }); const btnSecondary = _extends({}, btnBase, { background: '#323237', color: '#efeff1' }); const btnDanger = _extends({}, btnBase, { background: 'transparent', color: '#e91916', padding: '8px 12px' }); const closeBtnStyle = { background: 'transparent', border: 'none', color: '#efeff1', cursor: 'pointer', padding: '4px', 'border-radius': '6px', display: 'flex', 'align-items': 'center', 'justify-content': 'center' }; function SettingsPanel(props) { const [width, setWidth] = createSignal(String(panelWidth())); const [height, setHeight] = createSignal(String(panelHeight())); const [hover, setHover] = createSignal(String(hoverDelay())); const [hide, setHide] = createSignal(String(hideDelay())); const [routes, setRoutes] = createSignal(blockedRoutes().join(', ')); const handleSave = () => { const w = parseInt(width(), 10); const h = parseInt(height(), 10); const hov = parseInt(hover(), 10); const hid = parseInt(hide(), 10); if (!isNaN(w) && w >= 200 && w <= 1200) setPanelWidth(w); if (!isNaN(h) && h >= 150 && h <= 800) setPanelHeight(h); if (!isNaN(hov) && hov >= 0 && hov <= 5000) setHoverDelay(hov); if (!isNaN(hid) && hid >= 0 && hid <= 5000) setHideDelay(hid); const parsed = routes().split(',').map(s => s.trim().toLowerCase()).filter(Boolean); setBlockedRoutes(parsed); props.onClose(); }; const handleReset = () => { resetAllSettings(); setWidth(String(DEFAULT_PANEL_WIDTH)); setHeight(String(DEFAULT_PANEL_HEIGHT)); setHover(String(DEFAULT_HOVER_DELAY)); setHide(String(DEFAULT_HIDE_DELAY)); setRoutes(blockedRoutes().join(', ')); }; const handleOverlayClick = e => { if (e.target === e.currentTarget) props.onClose(); }; const fields = [{ label: 'Panel Width (px)', value: width, setter: setWidth, hint: `Min: 200, Max: 1200, Default: ${DEFAULT_PANEL_WIDTH}`, type: 'number' }, { label: 'Panel Height (px)', value: height, setter: setHeight, hint: `Min: 150, Max: 800, Default: ${DEFAULT_PANEL_HEIGHT}`, type: 'number' }, { label: 'Hover Delay (ms)', value: hover, setter: setHover, hint: `Time before preview appears. Default: ${DEFAULT_HOVER_DELAY}`, type: 'number' }, { label: 'Hide Delay (ms)', value: hide, setter: setHide, hint: `Time before preview hides. Default: ${DEFAULT_HIDE_DELAY}`, type: 'number' }]; return (() => { var _el$ = _tmpl$$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$0 = _el$6.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$10.nextSibling, _el$12 = _el$11.nextSibling; _el$.$$click = handleOverlayClick; style(_el$, overlayStyle); _el$2.$$click = e => e.stopPropagation(); style(_el$2, modalStyle); style(_el$3, titleStyle); _el$5.addEventListener("mouseleave", e => { e.currentTarget.style.background = 'transparent'; }); _el$5.addEventListener("mouseenter", e => { e.currentTarget.style.background = 'rgba(255,255,255,0.1)'; }); addEventListener(_el$5, "click", props.onClose, true); style(_el$5, closeBtnStyle); insert(_el$2, createComponent(For, { each: fields, children: field => (() => { var _el$13 = _tmpl$2$1(), _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.nextSibling; insert(_el$14, () => field.label); _el$15.addEventListener("blur", e => { e.currentTarget.style['border-color'] = '#323237'; }); _el$15.addEventListener("focus", e => { e.currentTarget.style['border-color'] = '#9147ff'; }); _el$15.$$input = e => field.setter(e.currentTarget.value); insert(_el$16, () => field.hint); createRenderEffect(_p$ => { var _v$8 = fieldStyle, _v$9 = labelStyle, _v$0 = field.type, _v$1 = inputStyle, _v$10 = hintStyle; _p$.e = style(_el$13, _v$8, _p$.e); _p$.t = style(_el$14, _v$9, _p$.t); _v$0 !== _p$.a && setAttribute(_el$15, "type", _p$.a = _v$0); _p$.o = style(_el$15, _v$1, _p$.o); _p$.i = style(_el$16, _v$10, _p$.i); return _p$; }, { e: undefined, t: undefined, a: undefined, o: undefined, i: undefined }); createRenderEffect(() => _el$15.value = field.value()); return _el$13; })() }), _el$6); _el$8.addEventListener("blur", e => { e.currentTarget.style['border-color'] = '#323237'; }); _el$8.addEventListener("focus", e => { e.currentTarget.style['border-color'] = '#9147ff'; }); _el$8.$$input = e => setRoutes(e.currentTarget.value); style(_el$0, btnRowStyle); _el$1.addEventListener("mouseleave", e => { e.currentTarget.style.background = 'transparent'; }); _el$1.addEventListener("mouseenter", e => { e.currentTarget.style.background = 'rgba(233, 25, 22, 0.1)'; }); _el$1.$$click = handleReset; _el$11.addEventListener("mouseleave", e => { e.currentTarget.style.background = '#323237'; }); _el$11.addEventListener("mouseenter", e => { e.currentTarget.style.background = '#3f3f46'; }); addEventListener(_el$11, "click", props.onClose, true); _el$12.addEventListener("mouseleave", e => { e.currentTarget.style.background = '#9147ff'; }); _el$12.addEventListener("mouseenter", e => { e.currentTarget.style.background = '#772ce8'; }); _el$12.$$click = handleSave; createRenderEffect(_p$ => { var _v$ = fieldStyle, _v$2 = labelStyle, _v$3 = textareaStyle, _v$4 = hintStyle, _v$5 = btnDanger, _v$6 = btnSecondary, _v$7 = btnPrimary; _p$.e = style(_el$6, _v$, _p$.e); _p$.t = style(_el$7, _v$2, _p$.t); _p$.a = style(_el$8, _v$3, _p$.a); _p$.o = style(_el$9, _v$4, _p$.o); _p$.i = style(_el$1, _v$5, _p$.i); _p$.n = style(_el$11, _v$6, _p$.n); _p$.s = style(_el$12, _v$7, _p$.s); return _p$; }, { e: undefined, t: undefined, a: undefined, o: undefined, i: undefined, n: undefined, s: undefined }); createRenderEffect(() => _el$8.value = routes()); return _el$; })(); } delegateEvents(["click", "input"]); var _tmpl$ = /*#__PURE__*/template(`<div><div></div><span>Loading...`), _tmpl$2 = /*#__PURE__*/template(`<div><iframe allow="autoplay; fullscreen"allowfullscreen loading=eager></iframe><style>\n @keyframes pulse \{\n 0%, 100% \{ opacity: 1; }\n 50% \{ opacity: 0.5; }\n }\n @keyframes spin \{\n to \{ transform: rotate(360deg); }\n }\n `, true, false, false); function App() { const panel = usePreviewPanel(); return [(() => { var _el$ = _tmpl$2(), _el$5 = _el$.firstChild; addEventListener(_el$, "mouseleave", panel.handlePanelMouseLeave); addEventListener(_el$, "mouseenter", panel.handlePanelMouseEnter); var _ref$ = panel.setPanelRef; typeof _ref$ === "function" ? use(_ref$, _el$) : panel.setPanelRef = _el$; insert(_el$, createComponent(HeaderBar, { get channel() { return panel.getChannel; }, get isPinned() { return panel.isPinned; }, get onDragStart() { return panel.handleDragStart; }, get onTogglePin() { return panel.togglePin; }, get onOpenSettings() { return panel.toggleSettings; }, get onOpenInTwitch() { return panel.openInTwitch; }, get onClose() { return panel.hidePanel; } }), _el$5); insert(_el$, createComponent(Show, { get when() { return panel.isLoading(); }, get children() { var _el$2 = _tmpl$(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling; createRenderEffect(_p$ => { var _v$ = loaderOverlayStyle, _v$2 = spinnerStyle, _v$3 = loaderTextStyle; _p$.e = style(_el$2, _v$, _p$.e); _p$.t = style(_el$3, _v$2, _p$.t); _p$.a = style(_el$4, _v$3, _p$.a); return _p$; }, { e: undefined, t: undefined, a: undefined }); return _el$2; } }), _el$5); var _ref$2 = panel.setIframeRef; typeof _ref$2 === "function" ? use(_ref$2, _el$5) : panel.setIframeRef = _el$5; createRenderEffect(_p$ => { var _v$4 = panelStyle(panel.isVisible(), panel.isDragging(), !!panel.getChannel()), _v$5 = iframeStyle; _p$.e = style(_el$, _v$4, _p$.e); _p$.t = style(_el$5, _v$5, _p$.t); return _p$; }, { e: undefined, t: undefined }); return _el$; })(), createComponent(Show, { get when() { return panel.showSettings(); }, get children() { return createComponent(SettingsPanel, { get onClose() { return panel.toggleSettings; } }); } })]; } const root = document.createElement('div'); document.body.appendChild(root); render(() => createComponent(App, {}), root); })();
