mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
feat: move svelte interface to 'src/interface'
This commit is contained in:
sethburkart123
@@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
let { onClick, text } = $props<{ onClick: () => void, text: string, [key: string]: any }>();
|
||||
</script>
|
||||
|
||||
<button onclick={onClick} class='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>
|
||||
{text}
|
||||
</button>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { settingsState } from '@/seqta/utils/listeners/SettingsState'
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
|
||||
import { EditorState } from '@codemirror/state';
|
||||
import { highlightSelectionMatches } from '@codemirror/search';
|
||||
import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirror/commands';
|
||||
import { indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
|
||||
import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
|
||||
import { highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView, dropCursor } from '@codemirror/view';
|
||||
import { color } from '@uiw/codemirror-extensions-color'
|
||||
import { Compartment } from '@codemirror/state';
|
||||
|
||||
// Theme
|
||||
import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
|
||||
|
||||
// Language
|
||||
import { css } from "@codemirror/lang-css";
|
||||
|
||||
let editor = $state<HTMLDivElement | null>(null)
|
||||
let view: EditorView | null = null;
|
||||
let editorTheme = new Compartment();
|
||||
let { value, onChange } = $props<{value: string, onChange: (value: string) => void}>()
|
||||
|
||||
function createEditorState(initialContents: string) {
|
||||
let extensions = [
|
||||
highlightSpecialChars(),
|
||||
history(),
|
||||
drawSelection(),
|
||||
indentUnit.of(" "),
|
||||
EditorState.allowMultipleSelections.of(true),
|
||||
indentOnInput(),
|
||||
bracketMatching(),
|
||||
closeBrackets(),
|
||||
autocompletion(),
|
||||
rectangularSelection(),
|
||||
crosshairCursor(),
|
||||
dropCursor(),
|
||||
highlightActiveLine(),
|
||||
highlightSelectionMatches(),
|
||||
editorTheme.of(githubLight),
|
||||
keymap.of([
|
||||
indentWithTab,
|
||||
...closeBracketsKeymap,
|
||||
...defaultKeymap,
|
||||
...historyKeymap,
|
||||
...foldKeymap,
|
||||
...completionKeymap,
|
||||
]),
|
||||
EditorView.updateListener.of((update) => {
|
||||
if (update.docChanged) {
|
||||
onChange(update.state.doc.toString())
|
||||
}
|
||||
}),
|
||||
css(),
|
||||
color,
|
||||
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
|
||||
];
|
||||
|
||||
return EditorState.create({
|
||||
doc: initialContents,
|
||||
extensions
|
||||
});
|
||||
}
|
||||
|
||||
function createEditorView(state: EditorState, parent: HTMLElement) {
|
||||
return new EditorView({ state, parent });
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (editor) {
|
||||
const state = createEditorState(value);
|
||||
view = createEditorView(state, editor as HTMLElement);
|
||||
}
|
||||
|
||||
settingsState.subscribe((settings) => {
|
||||
if (view) {
|
||||
view.dispatch({
|
||||
effects: editorTheme.reconfigure(
|
||||
settings.DarkMode ? githubDark : githubLight
|
||||
)
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (view) {
|
||||
view.destroy();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="rounded-lg text-[13px] overflow-clip w-full bg-white dark:bg-zinc-900" bind:this={editor}></div>
|
||||
@@ -0,0 +1,86 @@
|
||||
div:has(> #rbgcp-wrapper) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.dark {
|
||||
#rbgcp-wrapper {
|
||||
div[style="padding-top: 11px; position: relative;"] div {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
div:has(> #rbgcp-solid-btn),
|
||||
div:has(> #rbgcp-advanced-btn),
|
||||
#rbgcp-color-model-btn > div,
|
||||
#rbgcp-gradient-controls-wrap {
|
||||
background-color: #37373b !important;
|
||||
color: white !important;
|
||||
|
||||
svg {
|
||||
circle {
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
polyline,
|
||||
line,
|
||||
g,
|
||||
path {
|
||||
stroke: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
#rbgcp-radial-btn,
|
||||
#rbgcp-linear-btn {
|
||||
&[style*="background: white;"] {
|
||||
background-color: #28282b !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
path,
|
||||
g,
|
||||
polyline,
|
||||
circle {
|
||||
stroke: white !important;
|
||||
fill: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div:has(> #rbgcp-stop-input) svg {
|
||||
path {
|
||||
stroke: unset !important;
|
||||
fill: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
#rbgcp-comparibles-btn svg path {
|
||||
fill: white !important;
|
||||
}
|
||||
|
||||
> div {
|
||||
color: white !important;
|
||||
|
||||
&[style*="background: white;"] {
|
||||
background: #28282b !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div:has(> #rbgcp-degree-input) {
|
||||
width: 70px !important;
|
||||
}
|
||||
|
||||
#rbgcp-degree-input {
|
||||
width: 50px !important;
|
||||
}
|
||||
|
||||
#rbgcp-degree-input,
|
||||
#rbgcp-stop-input {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#rbgcp-gradient-controls-wrap > div,
|
||||
#rbgcp-gradient-controls-wrap > div > div:not([role="button"]) {
|
||||
background-color: #37373b !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import ColourPicker from './ColourPicker.tsx';
|
||||
import ReactAdapter from './utils/ReactAdapter.svelte';
|
||||
import { animate, spring } from 'motion';
|
||||
import { delay } from '@/seqta/utils/delay.ts'
|
||||
|
||||
const { hidePicker, standalone = false, savePresets = true, customOnChange = null, customState = null } = $props<{
|
||||
hidePicker?: () => void,
|
||||
standalone?: boolean,
|
||||
savePresets?: boolean,
|
||||
customOnChange?: (color: string) => void,
|
||||
customState?: string
|
||||
}>();
|
||||
|
||||
let background = $state<HTMLDivElement | null>(null);
|
||||
let content = $state<HTMLDivElement | null>(null);
|
||||
|
||||
const closePicker = async () => {
|
||||
if (standalone) return;
|
||||
if (!background || !content) return;
|
||||
|
||||
animate(
|
||||
content,
|
||||
{ scale: [1, 0.4], opacity: [1, 0] },
|
||||
{ easing: spring({ stiffness: 400, damping: 30 }) }
|
||||
);
|
||||
|
||||
animate(
|
||||
background,
|
||||
{ opacity: [1, 0] },
|
||||
{ easing: [0.4, 0, 0.2, 1] }
|
||||
);
|
||||
|
||||
await delay(400);
|
||||
hidePicker();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (standalone) return;
|
||||
if (!background || !content) return;
|
||||
|
||||
animate(
|
||||
background,
|
||||
{ opacity: [0, 1] },
|
||||
{ duration: 0.3, easing: [0.4, 0, 0.2, 1] }
|
||||
);
|
||||
|
||||
animate(
|
||||
content,
|
||||
{ scale: [0.4, 1], opacity: [0, 1] },
|
||||
{ easing: spring({ stiffness: 400, damping: 30 }) }
|
||||
);
|
||||
|
||||
const handleEscapeKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
closePicker();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscapeKey);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscapeKey);
|
||||
};
|
||||
});
|
||||
|
||||
function handleBackgroundClick(event: MouseEvent) {
|
||||
if (event.target === background) {
|
||||
closePicker();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if standalone}
|
||||
<div class="h-auto rounded-xl overflow-clip">
|
||||
<ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
|
||||
</div>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
bind:this={background}
|
||||
class="absolute top-0 left-0 z-50 flex items-center justify-center w-full h-full cursor-pointer bg-black/20"
|
||||
onclick={handleBackgroundClick}
|
||||
onkeydown={(e) => { e.key === 'Enter' && handleBackgroundClick }}
|
||||
>
|
||||
<div
|
||||
bind:this={content}
|
||||
class="h-auto p-4 bg-white border shadow-lg cursor-auto rounded-xl dark:bg-zinc-800 border-zinc-100 dark:border-zinc-700"
|
||||
>
|
||||
<ReactAdapter customOnChange={customOnChange} customState={customState} savePresets={savePresets} el={ColourPicker} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,108 @@
|
||||
import ColorPicker from "react-best-gradient-color-picker"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { settingsState } from "@/seqta/utils/listeners/SettingsState.ts"
|
||||
|
||||
const defaultPresets = [
|
||||
"linear-gradient(30deg, rgba(229,209,218,1) 0%, RGBA(235,169,202,1) 46%, rgba(214,155,162,1) 100%)",
|
||||
"linear-gradient(40deg, rgba(201,61,0,1) 0%, RGBA(170, 5, 58, 1) 100%)",
|
||||
"linear-gradient(40deg, rgba(0, 141, 201, 0.76) 0%, rgba(8, 5, 170, 0.66) 100%)",
|
||||
"linear-gradient(40deg, rgba(0, 201, 20, 0.76) 0%, rgba(4, 160, 105, 0.66) 100%)",
|
||||
"linear-gradient(40deg, rgba(199, 20, 55, 0.76) 0%, rgba(95, 11, 160, 0.66) 100%)",
|
||||
"linear-gradient(40deg, rgba(24, 20, 199, 0.76) 0%, rgba(23, 173, 65, 0.66) 100%)",
|
||||
"radial-gradient(circle, rgba(20, 199, 178, 0.76) 32%, rgba(3, 120, 57, 0.66) 100%)",
|
||||
"radial-gradient(circle, rgba(13, 15, 145, 0.76) 12%, rgba(103, 3, 120, 0.66) 100%)",
|
||||
"linear-gradient(20deg, rgb(230, 21, 21) 0%, rgb(230, 109, 21) 12%, rgb(230, 34, 21) 26%, rgb(230, 21, 21) 39%, rgb(230, 84, 21) 48%, rgb(230, 34, 21) 58%, rgb(230, 96, 21) 69%, rgb(230, 34, 21) 80%, rgb(230, 71, 21) 89%, rgb(230, 21, 21) 100%)",
|
||||
"rgba(114, 1, 170, 0.89)",
|
||||
"rgba(93, 135, 63, 0.89)",
|
||||
"rgba(4, 4, 138, 0.77)",
|
||||
"rgba(21, 20, 20, 0.89)",
|
||||
"linear-gradient(340deg, rgb(205, 74, 82) 18%, rgba(132, 8, 8, 0.89) 46%, rgb(204, 78, 85) 72%)",
|
||||
"radial-gradient(circle, rgb(74, 205, 158) 0%, rgba(8, 72, 132, 0.89) 99%)",
|
||||
"rgba(17, 94, 89, 1)",
|
||||
"rgba(30, 64, 175, 0.89)",
|
||||
"rgba(134, 25, 143, 1)",
|
||||
"rgba(14, 165, 233, 0.9)",
|
||||
]
|
||||
|
||||
interface PickerProps {
|
||||
customOnChange?: (color: string) => void
|
||||
customState?: string
|
||||
savePresets?: boolean
|
||||
}
|
||||
|
||||
export default function Picker({
|
||||
customOnChange,
|
||||
customState,
|
||||
savePresets = true,
|
||||
}: PickerProps) {
|
||||
const [customThemeColor, setCustomThemeColor] = useState<string | null>()
|
||||
const [presets, setPresets] = useState<string[]>()
|
||||
|
||||
const latestValuesRef = useRef({ customThemeColor, customOnChange, savePresets, presets });
|
||||
|
||||
useEffect(() => {
|
||||
if (customState !== undefined && customState !== null) {
|
||||
setCustomThemeColor(customState)
|
||||
} else {
|
||||
setCustomThemeColor(settingsState.selectedColor ?? null)
|
||||
}
|
||||
|
||||
if (presets === undefined) {
|
||||
const savedPresets = localStorage.getItem("colorPickerPresets")
|
||||
setPresets(savedPresets ? JSON.parse(savedPresets) : defaultPresets)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
latestValuesRef.current = { customThemeColor, customOnChange, savePresets, presets };
|
||||
}, [customThemeColor, customOnChange, savePresets, presets]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
const { customThemeColor, customOnChange, savePresets, presets } = latestValuesRef.current;
|
||||
if (!(customThemeColor && !customOnChange && savePresets && presets)) return;
|
||||
|
||||
// Only proceed if presets are different (avoid unnecessary updates)
|
||||
const existingIndex = presets.indexOf(customThemeColor);
|
||||
let updatedPresets;
|
||||
|
||||
if (existingIndex === 0) {
|
||||
// No need to update if the selected color is already the first element
|
||||
return;
|
||||
} else if (existingIndex > -1) {
|
||||
updatedPresets = [
|
||||
customThemeColor,
|
||||
...presets.slice(0, existingIndex),
|
||||
...presets.slice(existingIndex + 1),
|
||||
];
|
||||
} else {
|
||||
updatedPresets = [customThemeColor, ...presets].slice(0, 18);
|
||||
}
|
||||
|
||||
localStorage.setItem("colorPickerPresets", JSON.stringify(updatedPresets));
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (customThemeColor && !customOnChange) {
|
||||
settingsState.selectedColor = customThemeColor
|
||||
}
|
||||
}, [customThemeColor, customOnChange])
|
||||
|
||||
return (
|
||||
<ColorPicker
|
||||
disableDarkMode={true}
|
||||
presets={presets}
|
||||
hideInputs={true}
|
||||
value={customThemeColor ?? ""}
|
||||
onChange={(color: string) => {
|
||||
if (customOnChange) {
|
||||
customOnChange(color)
|
||||
setCustomThemeColor(color)
|
||||
} else {
|
||||
setCustomThemeColor(color)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, createEventDispatcher } from 'svelte';
|
||||
import { animate as motionAnimate, spring } from 'motion';
|
||||
|
||||
let { initial, animate, exit, transition, children, class: className } = $props<{
|
||||
initial?: any,
|
||||
animate?: any,
|
||||
exit?: any,
|
||||
transition?: any,
|
||||
children?: any,
|
||||
class?: string
|
||||
}>();
|
||||
|
||||
let divElement: HTMLElement;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const playAnimation = (keyframe: any) => {
|
||||
if (divElement && keyframe) {
|
||||
let animationOptions = transition;
|
||||
let finalKeyframe = { ...keyframe };
|
||||
|
||||
if (finalKeyframe.height === 'auto') {
|
||||
const prevHeight = divElement.style.height;
|
||||
const prevVisibility = divElement.style.visibility;
|
||||
|
||||
divElement.style.height = 'auto';
|
||||
divElement.style.visibility = 'hidden';
|
||||
divElement.style.position = 'absolute';
|
||||
|
||||
const autoHeight = divElement.offsetHeight;
|
||||
|
||||
divElement.style.height = prevHeight;
|
||||
divElement.style.visibility = prevVisibility;
|
||||
divElement.style.position = '';
|
||||
|
||||
finalKeyframe.height = `${autoHeight}px`;
|
||||
}
|
||||
|
||||
if (!transition || transition.type === 'spring') {
|
||||
const springConfig = transition?.config || { stiffness: 250, damping: 25 };
|
||||
animationOptions = {
|
||||
...transition,
|
||||
easing: spring(springConfig)
|
||||
};
|
||||
}
|
||||
|
||||
const animation = motionAnimate(divElement, finalKeyframe, animationOptions);
|
||||
return animation.finished;
|
||||
}
|
||||
return Promise.resolve();
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
if (initial) {
|
||||
Object.assign(divElement.style, initial);
|
||||
await playAnimation(animate || {});
|
||||
} else if (animate) {
|
||||
await playAnimation(animate);
|
||||
}
|
||||
|
||||
dispatch('animationend');
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (animate) {
|
||||
playAnimation(animate);
|
||||
}
|
||||
|
||||
dispatch('animationend');
|
||||
});
|
||||
|
||||
onDestroy(async () => {
|
||||
if (exit) {
|
||||
await playAnimation(exit);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class={className} bind:this={divElement} style="will-change: transform, opacity;">
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { settingsState } from '@/seqta/utils/listeners/SettingsState'
|
||||
|
||||
let { onClick } = $props<{ onClick: () => void }>();
|
||||
</script>
|
||||
|
||||
<button
|
||||
onclick={onClick}
|
||||
style="background: {$settingsState.selectedColor}"
|
||||
class="w-16 h-8 rounded-md"
|
||||
></button>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script lang="ts">
|
||||
let { state, onChange, options } = $props<{
|
||||
state: string,
|
||||
onChange: (newState: string) => void,
|
||||
options: Array<{ value: string, label: string }>
|
||||
}>();
|
||||
|
||||
let select: HTMLSelectElement;
|
||||
</script>
|
||||
|
||||
<select
|
||||
bind:this={select}
|
||||
value={state}
|
||||
onchange={() => onChange(select.value)}
|
||||
class="px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md w-full"
|
||||
>
|
||||
{#each options as option}
|
||||
<option value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
@@ -0,0 +1,5 @@
|
||||
<script lang="ts">
|
||||
let { width, height} = $props<{width?: string, height?: string}>()
|
||||
</script>
|
||||
|
||||
<div style="width: {width ? width : '100%'}; height: {height ? height : '100%'}; background: #e0e0e0;" class="animate-pulse"></div>
|
||||
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
let { state, onChange } = $props<{ state: number, onChange: (value: number) => void }>();
|
||||
let percentage = $derived((state / 100) * 100);
|
||||
</script>
|
||||
|
||||
<div class="relative w-full max-w-lg mx-auto">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
bind:value={state}
|
||||
style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
|
||||
onchange={(e) => onChange(Number(e.currentTarget.value))}
|
||||
class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
let { size = 'md', color = 'currentColor' } = $props();
|
||||
|
||||
const sizeMap = {
|
||||
sm: '1rem',
|
||||
md: '2rem',
|
||||
lg: '3rem',
|
||||
};
|
||||
|
||||
let dimensions = $derived(sizeMap[size as keyof typeof sizeMap] || size);
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
width={dimensions}
|
||||
height={dimensions}
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke={color}
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill={color}
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
@@ -0,0 +1,4 @@
|
||||
.dark .switch[data-ison="true"],
|
||||
.switch[data-ison="true"] {
|
||||
background-color: #30D259;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
<script lang="ts">
|
||||
import { animate, spring } from 'motion';
|
||||
import { standalone } from '../utils/standalone.svelte'
|
||||
|
||||
let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
|
||||
let handle: HTMLElement | null = null;
|
||||
|
||||
const springParams = {
|
||||
stiffness: 600,
|
||||
damping: 30,
|
||||
};
|
||||
|
||||
const animateSwitch = (enabled: boolean) => {
|
||||
if (!handle) return;
|
||||
animate(
|
||||
handle,
|
||||
{
|
||||
x: enabled ? (standalone.standalone ? 24 : 20) : 0,
|
||||
},
|
||||
{
|
||||
easing: spring(springParams),
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
// Trigger animation whenever state changes
|
||||
$effect(() => animateSwitch(state));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch select-none"
|
||||
data-ison={state}
|
||||
onclick={() => onChange(!state)}
|
||||
onkeydown={(e) => e.key === "Enter" && onChange(!state)}
|
||||
role="switch"
|
||||
aria-checked={state}
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
bind:this={handle}
|
||||
class="w-6 h-6 bg-white dark:bg-[#FEFEFE] rounded-full drop-shadow-md"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.switch[data-ison="true"] {
|
||||
background-color: #30D259;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,3 @@
|
||||
.tab-width {
|
||||
width: var(--tab-width);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<script lang="ts">
|
||||
import MotionDiv from './MotionDiv.svelte';
|
||||
import './TabbedContainer.css';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let { tabs } = $props<{ tabs: { title: string, Content: any, props?: any }[] }>();
|
||||
let activeTab = $state(0);
|
||||
let hoveredTab = $state<number | null>(null);
|
||||
let containerRef: HTMLElement | null = null;
|
||||
let tabWidth = $state(0);
|
||||
|
||||
const springTransition = { type: 'spring', stiffness: 250, damping: 25 };
|
||||
|
||||
const updateTabWidth = () => {
|
||||
tabWidth = tabs.length > 0 ? 100 / tabs.length : 0;
|
||||
if (!containerRef) return;
|
||||
containerRef.style.setProperty('--tab-width', `${tabWidth}%`);
|
||||
};
|
||||
|
||||
const calcXPos = (index: number | null) => {
|
||||
if (containerRef) {
|
||||
return tabWidth * (index !== null ? index : activeTab) * containerRef.getBoundingClientRect().width / 100;
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
$effect(() => {
|
||||
calcXPos(hoveredTab);
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
updateTabWidth();
|
||||
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
if (event.data === "popupClosed") {
|
||||
activeTab = 0;
|
||||
}
|
||||
};
|
||||
window.addEventListener("message", handleMessage);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("message", handleMessage);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col h-full">
|
||||
<div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
|
||||
<div class="relative flex">
|
||||
<MotionDiv
|
||||
class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"
|
||||
animate={{ x: calcXPos(hoveredTab) }}
|
||||
transition={springTransition}
|
||||
/>
|
||||
{#each tabs as { title }, index}
|
||||
<button
|
||||
class="relative z-10 flex-1 px-4 py-2 focus-visible:outline-none"
|
||||
onclick={() => activeTab = index}
|
||||
onmouseenter={() => hoveredTab = index}
|
||||
onmouseleave={() => hoveredTab = null}
|
||||
>
|
||||
{title}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full px-4 overflow-hidden">
|
||||
<MotionDiv
|
||||
class="h-full"
|
||||
animate={{ x: `${-activeTab * 100}%` }}
|
||||
transition={springTransition}
|
||||
>
|
||||
<div class="flex">
|
||||
{#each tabs as { Content, props }, index}
|
||||
<div class="absolute focus:outline-none w-full transition-opacity duration-300 overflow-y-scroll no-scrollbar h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
|
||||
style="left: {index * 100}%;">
|
||||
<Content {...props} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</MotionDiv>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,323 @@
|
||||
<script lang="ts">
|
||||
import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader';
|
||||
import { setTheme } from '@/seqta/ui/themes/setTheme';
|
||||
import Spinner from '../Spinner.svelte';
|
||||
import { settingsState } from '@/seqta/utils/listeners/SettingsState'
|
||||
import Fuse from 'fuse.js';
|
||||
import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
|
||||
|
||||
type Background = { id: string; category: string; type: string; lowResUrl: string; highResUrl: string; name: string; description: string; featured?: boolean };
|
||||
let { searchTerm } = $props<{ searchTerm: string }>();
|
||||
|
||||
// Existing states
|
||||
let backgrounds = $state<Background[]>([]);
|
||||
let selectedCategory = $state<string>('All');
|
||||
let error = $state<string | null>(null);
|
||||
let selectedBackground = $state<string | null>(null);
|
||||
let isLoading = $state<boolean>(true);
|
||||
let savedBackgrounds = $state<string[]>([]);
|
||||
let installingBackgrounds = $state<Set<string>>(new Set());
|
||||
let debugInfo = $state<string>('');
|
||||
|
||||
// New state variables
|
||||
let activeTab = $state<'all' | 'installed' | 'photos' | 'videos'>('all');
|
||||
let sortBy = $state<'newest' | 'popular' | 'name'>('newest');
|
||||
|
||||
// Add Fuse.js options
|
||||
const fuseOptions = {
|
||||
keys: ['name', 'description'],
|
||||
threshold: 0.4,
|
||||
ignoreLocation: true
|
||||
};
|
||||
let fuse: Fuse<Background>;
|
||||
|
||||
// Existing functions
|
||||
const loadStore = async () => {
|
||||
try {
|
||||
debugInfo = 'Fetching backgrounds...';
|
||||
const response = await fetch('https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Themes/main/store/backgrounds.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
backgrounds = data.backgrounds;
|
||||
fuse = new Fuse(backgrounds, fuseOptions);
|
||||
debugInfo = `Loaded ${backgrounds.length} backgrounds`;
|
||||
await loadSavedBackgrounds();
|
||||
} catch (e) {
|
||||
error = 'Failed to load background store';
|
||||
debugInfo = `Error: ${e instanceof Error ? e.message : 'Unknown error'}`;
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
async function loadSavedBackgrounds(): Promise<void> {
|
||||
try {
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB.");
|
||||
}
|
||||
await openDatabase();
|
||||
const data = await readAllData();
|
||||
savedBackgrounds = data.map(item => item.id);
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Unknown error occurred';
|
||||
}
|
||||
}
|
||||
|
||||
// Load data on mount
|
||||
loadStore();
|
||||
|
||||
// Derived states
|
||||
let filteredBackgrounds = $derived((() => {
|
||||
let filtered = backgrounds;
|
||||
|
||||
// Use Fuse.js search if there's a search term
|
||||
if (searchTerm.trim()) {
|
||||
// @ts-ignore
|
||||
if (fuse) {
|
||||
filtered = fuse.search(searchTerm).map((result: any) => result.item) ?? [];
|
||||
} else {
|
||||
filtered = backgrounds.filter(bg => bg.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
}
|
||||
}
|
||||
|
||||
// Apply category filtering
|
||||
filtered = filtered.filter((bg: Background) => {
|
||||
return selectedCategory === 'All'
|
||||
? true
|
||||
: selectedCategory === 'Featured'
|
||||
? bg.featured
|
||||
: bg.category === selectedCategory;
|
||||
});
|
||||
|
||||
// Apply sorting
|
||||
filtered.sort((a: Background, b: Background) => {
|
||||
switch (sortBy) {
|
||||
case 'name':
|
||||
return a.name.localeCompare(b.name);
|
||||
case 'newest':
|
||||
return -1;
|
||||
case 'popular':
|
||||
return -1;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
return filtered;
|
||||
})());
|
||||
|
||||
let categories = $derived([...new Set(backgrounds.map(bg => bg.category))]);
|
||||
|
||||
// Background management functions
|
||||
async function saveBackgroundFromUrl(url: string, id: string, fileType: string): Promise<void> {
|
||||
try {
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB.");
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
const blob = await response.blob();
|
||||
const hasSpace = await hasEnoughStorageSpace(blob.size);
|
||||
|
||||
if (!hasSpace) {
|
||||
throw new Error("Not enough storage space.");
|
||||
}
|
||||
|
||||
await writeData(id, fileType, blob);
|
||||
savedBackgrounds = [...savedBackgrounds, id];
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Unknown error occurred';
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteBackground(fileId: string): Promise<void> {
|
||||
installingBackgrounds = new Set(installingBackgrounds).add(fileId);
|
||||
try {
|
||||
await deleteData(fileId);
|
||||
savedBackgrounds = savedBackgrounds.filter(id => id !== fileId);
|
||||
|
||||
if (selectedBackground === fileId) {
|
||||
selectNoBackground();
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? `Failed to delete background: ${e.message}` : 'Unknown error occurred';
|
||||
} finally {
|
||||
installingBackgrounds = new Set(installingBackgrounds);
|
||||
installingBackgrounds.delete(fileId);
|
||||
}
|
||||
}
|
||||
|
||||
async function installBackground(background: Background) {
|
||||
installingBackgrounds = new Set(installingBackgrounds).add(background.id);
|
||||
try {
|
||||
await saveBackgroundFromUrl(background.highResUrl, background.id, background.type);
|
||||
backgroundUpdates.triggerUpdate();
|
||||
} finally {
|
||||
installingBackgrounds = new Set(installingBackgrounds);
|
||||
installingBackgrounds.delete(background.id);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleBackgroundInstallation(background: Background) {
|
||||
if (savedBackgrounds.includes(background.id)) {
|
||||
await deleteBackground(background.id);
|
||||
} else {
|
||||
await installBackground(background);
|
||||
}
|
||||
}
|
||||
|
||||
function selectNoBackground() {
|
||||
selectedBackground = null;
|
||||
setTheme('');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full">
|
||||
<!-- Sidebar -->
|
||||
<div class="w-64 h-full p-4 border-r border-zinc-200 dark:border-zinc-700">
|
||||
<div class="mb-8">
|
||||
<h2 class="mb-4 text-lg font-semibold">Categories</h2>
|
||||
<nav class="space-y-2">
|
||||
<button
|
||||
class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'All' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
|
||||
onclick={() => selectedCategory = 'All'}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === 'Featured' ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
|
||||
onclick={() => selectedCategory = 'Featured'}
|
||||
>
|
||||
Featured
|
||||
</button>
|
||||
|
||||
<div class="my-2 border-b border-zinc-200 dark:border-zinc-700"></div>
|
||||
|
||||
{#each categories as category}
|
||||
<button
|
||||
class={`w-full px-4 py-2 text-left bg-transparent rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition ${selectedCategory === category ? 'bg-blue-100 dark:bg-zinc-800' : ''}`}
|
||||
onclick={() => selectedCategory = category}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 z-10 p-4 bg-white border-b dark:bg-zinc-900 dark:border-zinc-700">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h1 class="text-2xl font-bold">Explore Backgrounds {searchTerm ? `- "${searchTerm}"` : ''}</h1>
|
||||
<div class="flex items-center gap-4">
|
||||
<select
|
||||
bind:value={sortBy}
|
||||
class="p-2 border rounded-lg border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800"
|
||||
>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="popular">Most Popular</option>
|
||||
<option value="name">Name</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="flex gap-2">
|
||||
{#each ['All', 'Installed', 'Photos', 'Videos'] as tab}
|
||||
<button
|
||||
class={`px-4 py-2 text-sm font-medium transition-colors rounded-full
|
||||
${activeTab === tab.toLowerCase() ? 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' :
|
||||
'bg-zinc-100 dark:bg-transparent dark:outline dark:outline-1 dark:outline-zinc-700 hover:bg-zinc-200 dark:hover:bg-zinc-700/20'}`}
|
||||
onclick={() => activeTab = tab.toLowerCase() as typeof activeTab}
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Background Grid -->
|
||||
<div class="p-4">
|
||||
{#if isLoading}
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each Array(9) as _}
|
||||
<div class="relative overflow-hidden rounded-lg animate-pulse">
|
||||
<!-- Image placeholder -->
|
||||
<div class="w-full h-48 bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
<!-- Gradient overlay -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-zinc-300 dark:from-zinc-700 to-transparent">
|
||||
<!-- Title placeholder -->
|
||||
<div class="absolute bottom-2 left-2 right-2">
|
||||
<div class="w-2/3 h-4 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
<div class="w-1/2 h-3 mt-2 rounded-full bg-zinc-200 dark:bg-zinc-800"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="p-4 text-red-500 bg-red-100 rounded-lg">
|
||||
Error: {error}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each filteredBackgrounds.filter((bg: Background) => {
|
||||
if (activeTab === 'installed') return savedBackgrounds.includes(bg.id);
|
||||
if (activeTab === 'photos') return bg.type === 'image';
|
||||
if (activeTab === 'videos') return bg.type !== 'image';
|
||||
return true;
|
||||
}) as background (background.id)}
|
||||
<div
|
||||
class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer group"
|
||||
onclick={() => toggleBackgroundInstallation(background)}
|
||||
onkeydown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
toggleBackgroundInstallation(background);
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
{#if background.type === 'image'}
|
||||
<img src={background.lowResUrl} alt={background.name} class="object-cover w-full h-48 transition-all duration-300 group-hover:scale-105" />
|
||||
{:else}
|
||||
<video src={background.lowResUrl} class="object-cover w-full h-48" muted loop autoplay></video>
|
||||
{/if}
|
||||
<div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100">
|
||||
{#if installingBackgrounds.has(background.id)}
|
||||
<Spinner />
|
||||
{:else if savedBackgrounds.includes(background.id)}
|
||||
<span class="flex items-center text-white">
|
||||
<span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true"></span>
|
||||
<span class="text-sm font-semibold">Remove</span>
|
||||
</span>
|
||||
{:else}
|
||||
<span class="flex items-center text-white">
|
||||
<span class="mr-2 text-2xl not-italic font-IconFamily" aria-hidden="true"></span>
|
||||
<span class="text-sm font-semibold">Install</span>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if settingsState.devMode}
|
||||
<div class="p-4 mt-8 rounded bg-zinc-100 dark:bg-zinc-800">
|
||||
<h3 class="mb-2 font-bold">Debug Info:</h3>
|
||||
<p>{debugInfo}</p>
|
||||
<p>Total backgrounds: {backgrounds.length}</p>
|
||||
<p>Categories: {categories.join(', ') || '<empty>'}</p>
|
||||
<p>Active Tab: {activeTab}</p>
|
||||
<p>Selected Category: {selectedCategory}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import type { Theme } from '@/interface/types/Theme';
|
||||
import { register, type SwiperContainer } from 'swiper/element/bundle';
|
||||
|
||||
let { coverThemes, setDisplayTheme } = $props<{ coverThemes: Theme[], setDisplayTheme: (theme: Theme) => void }>();
|
||||
let swiperEl = $state<SwiperContainer | undefined>();
|
||||
|
||||
|
||||
const slidePrev = () => swiperEl?.swiper.slidePrev();
|
||||
const slideNext = () => swiperEl?.swiper.slideNext();
|
||||
|
||||
onMount(() => {
|
||||
register();
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if coverThemes.length > 0}
|
||||
<div class="relative w-full transition-opacity rounded-xl overflow-clip" transition:fade>
|
||||
<swiper-container bind:this={swiperEl} slides-per-view="1" space-between="20" loop="true" autoplay="true" disable-on-interaction="false" pause-on-mouse-enter="true" class="w-full aspect-[8/3]">
|
||||
{#each coverThemes as theme, index (index)}
|
||||
<swiper-slide
|
||||
onkeydown={(e: any) => { if (e.key === 'Enter') setDisplayTheme(theme) }}
|
||||
onclick={() => setDisplayTheme(theme)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
class="relative cursor-pointer rounded-xl overflow-clip"
|
||||
>
|
||||
<img src={theme.marqueeImage} alt="Theme Preview" class="object-cover w-full h-full" />
|
||||
<div class='absolute bottom-0 left-0 p-8 z-[1]'>
|
||||
<h2 class='text-4xl font-bold text-white'>{theme.name}</h2>
|
||||
<p class='text-lg text-white'>{theme.description}</p>
|
||||
</div>
|
||||
<div class='absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black/80 to-transparent'></div>
|
||||
</swiper-slide>
|
||||
{/each}
|
||||
</swiper-container>
|
||||
|
||||
<!-- Pagination buttons -->
|
||||
<div class='absolute z-10 flex gap-2 bottom-2 right-2'>
|
||||
<button onclick={slidePrev} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 19.5-7.5-7.5 7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick={slideNext} class='flex items-center justify-center w-8 h-8 text-white bg-black bg-opacity-50 rounded-full dark:bg-zinc-800 dark:bg-opacity-50'>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,63 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Background } from './types';
|
||||
|
||||
export let filteredBackgrounds: Background[];
|
||||
|
||||
let dispatch = createEventDispatcher();
|
||||
|
||||
let filters = $state({
|
||||
type: [] as string[],
|
||||
color: [] as string[],
|
||||
resolution: [] as string[],
|
||||
orientation: [] as string[]
|
||||
});
|
||||
|
||||
$: {
|
||||
dispatch('filter', filters);
|
||||
}
|
||||
|
||||
function toggleFilter(category: keyof typeof filters, value: string) {
|
||||
if (filters[category].includes(value)) {
|
||||
filters[category] = filters[category].filter(v => v !== value);
|
||||
} else {
|
||||
filters[category] = [...filters[category], value];
|
||||
}
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
filters = {
|
||||
type: [],
|
||||
color: [],
|
||||
resolution: [],
|
||||
orientation: []
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
||||
<h2 class="mb-4 text-xl font-semibold">Filters</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<h3 class="mb-2 font-medium">Type</h3>
|
||||
<div class="space-y-2">
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" checked={filters.type.includes('image')} on:change={() => toggleFilter('type', 'image')}>
|
||||
<span class="ml-2">Image</span>
|
||||
</label>
|
||||
<label class="flex items-center">
|
||||
<input type="checkbox" checked={filters.type.includes('video')} on:change={() => toggleFilter('type', 'video')}>
|
||||
<span class="ml-2">Video</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add similar sections for color, resolution, and orientation -->
|
||||
|
||||
<button
|
||||
class="px-4 py-2 mt-4 text-white bg-red-500 rounded hover:bg-red-600"
|
||||
on:click={clearFilters}
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script lang="ts">
|
||||
import logo from '@/resources/icons/betterseqta-dark-full.png';
|
||||
import logoDark from '@/resources/icons/betterseqta-light-full.png';
|
||||
import { closeStore } from '@/seqta/ui/renderStore'
|
||||
import browser from 'webextension-polyfill';
|
||||
|
||||
// Props
|
||||
let { searchTerm, setSearchTerm, darkMode, activeTab, setActiveTab } = $props<{
|
||||
searchTerm: string,
|
||||
setSearchTerm: (term: string) => void,
|
||||
darkMode: boolean,
|
||||
activeTab: string,
|
||||
setActiveTab: (tab: string) => void
|
||||
}>();
|
||||
|
||||
// Clear search input function
|
||||
const clearSearch = () => {
|
||||
setSearchTerm('');
|
||||
};
|
||||
</script>
|
||||
|
||||
<header class="fixed top-0 z-50 w-full h-[4.25rem] bg-white border-b shadow-md border-b-white/10 dark:bg-zinc-950/90 backdrop-blur-xl dark:text-white">
|
||||
<div class="flex items-center justify-between px-4 py-1">
|
||||
<div class="flex gap-4 cursor-pointer place-items-center" onkeydown={(e) => { if (e.key === 'Enter') clearSearch() }} onclick={clearSearch} role="button" tabindex="0">
|
||||
<img src={browser.runtime.getURL(logo)} class="h-14 {darkMode ? 'hidden' : ''}" alt="Logo" />
|
||||
<img src={browser.runtime.getURL(logoDark)} class="h-14 {darkMode ? '' : 'hidden'}" alt="Dark Logo" />
|
||||
|
||||
<div class="w-[1px] h-10 my-auto bg-zinc-400 dark:bg-zinc-600"></div>
|
||||
|
||||
<button
|
||||
class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'themes' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
|
||||
onclick={() => setActiveTab('themes')}
|
||||
>
|
||||
Themes
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 font-semibold text-lg transition-colors duration-200 {activeTab === 'backgrounds' ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400'}"
|
||||
onclick={() => setActiveTab('backgrounds')}
|
||||
>
|
||||
Backgrounds
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search themes..."
|
||||
value={searchTerm}
|
||||
oninput={(e: any) => setSearchTerm(e.target.value)}
|
||||
class="px-4 py-2 pl-10 text-lg transition bg-gray-100/80 rounded-lg ring-0 focus:bg-gray-100/0 dark:focus:bg-zinc-700/50 focus:ring-[1px] ring-zinc-200 dark:ring-zinc-600 dark:bg-zinc-700/80 dark:text-gray-100 focus:outline-none focus:border-transparent" />
|
||||
<svg
|
||||
class="absolute w-5 h-5 text-gray-400 transform -translate-y-1/2 left-3 top-1/2 dark:text-gray-200"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
|
||||
<!-- Close Button -->
|
||||
<button
|
||||
onclick={closeStore}
|
||||
class="p-1 px-3"
|
||||
>
|
||||
<span class="text-2xl font-IconFamily"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script lang="ts">
|
||||
let { theme, onClick } = $props<{ theme: Theme; onClick: () => void }>();
|
||||
|
||||
import { fade } from 'svelte/transition';
|
||||
</script>
|
||||
|
||||
<div class="w-full cursor-pointer" role="button" tabindex="-1" onkeydown={onClick} onclick={onClick}>
|
||||
<div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border" transition:fade>
|
||||
<div class="absolute z-10 mb-1 text-xl font-bold text-white bottom-1 left-3">
|
||||
{theme.name}
|
||||
</div>
|
||||
<div class='absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent'></div>
|
||||
<div class='w-full'>
|
||||
<img src={theme.coverImage} alt="Theme Preview" class="object-cover w-full h-48 rounded-md" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
import type { Theme } from '@/interface/types/Theme'
|
||||
import ThemeCard from './ThemeCard.svelte';
|
||||
|
||||
let { themes, searchTerm, setDisplayTheme } = $props<{ themes: Theme[]; searchTerm: string, setDisplayTheme: (theme: Theme) => void }>();
|
||||
|
||||
let filteredThemes = $derived(themes.filter((theme: Theme) =>
|
||||
theme.name.toLowerCase().includes(searchTerm.toLowerCase()) || theme.description.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
));
|
||||
</script>
|
||||
|
||||
<div class="relative" >
|
||||
<div class="grid grid-cols-1 gap-4 py-12 mx-auto sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each filteredThemes as theme (theme.id)}
|
||||
<ThemeCard theme={theme} onClick={() => setDisplayTheme(theme)} />
|
||||
{/each}
|
||||
|
||||
{#if filteredThemes.length !== 0}
|
||||
<a href="https://betterseqta.gitbook.io/betterseqta-docs" class='w-full cursor-pointer'>
|
||||
<div class="bg-zinc-50 h-48 w-full transition-all hover:scale-105 duration-500 relative justify-center items-center group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] rounded-xl overflow-clip border">
|
||||
<div class="text-2xl font-IconFamily">{'\uecb3'}</div>
|
||||
<div class="text-xl font-bold text-center transition-all duration-500 dark:text-white">
|
||||
Got a Theme Idea?
|
||||
<p class="text-lg font-light subtitle">Transform it into a stunning theme!</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
{#if filteredThemes.length === 0}
|
||||
<div class="absolute top-0 flex flex-col items-center justify-center w-full text-center h-96">
|
||||
<h1 class="mt-4 text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 sm:text-5xl">That doesn't exist! 😭😭😭</h1>
|
||||
<p class="mt-6 text-lg leading-7 text-zinc-600 dark:text-zinc-300">Sorry, we couldn't find the theme you're looking for. Maybe... you could create it?</p>
|
||||
<a href="https://betterseqta.gitbook.io/betterseqta-docs" class='p-2 px-3 mt-4 transition rounded-md cursor-pointer dark:text-white bg-zinc-500/10 hover:scale-105'>
|
||||
Show me how!
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,118 @@
|
||||
<script lang="ts">
|
||||
import type { Theme } from '@/interface/types/Theme'
|
||||
import { fade } from 'svelte/transition';
|
||||
import { animate, spring } from 'motion';
|
||||
|
||||
let { theme, currentThemes, setDisplayTheme, onInstall, onRemove, allThemes, displayTheme } = $props<{
|
||||
theme: Theme | null;
|
||||
currentThemes: string[];
|
||||
setDisplayTheme: (theme: Theme | null) => void;
|
||||
onInstall: (themeId: string) => void;
|
||||
onRemove: (themeId: string) => void;
|
||||
allThemes: Theme[];
|
||||
displayTheme: Theme | null;
|
||||
}>();
|
||||
let installing = $state(false);
|
||||
let modalElement: HTMLElement;
|
||||
|
||||
// Function to get related themes
|
||||
function getRelatedThemes() {
|
||||
return allThemes
|
||||
.filter((t: Theme) => t.id !== theme.id)
|
||||
.sort((a: Theme, b: Theme) => a.name.localeCompare(theme.name) - b.name.localeCompare(theme.name))
|
||||
.slice(0, 4);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (displayTheme) {
|
||||
animate(
|
||||
modalElement,
|
||||
{ y: [500, 0], opacity: [0, 1] },
|
||||
{ easing: spring({ stiffness: 150, damping: 20 }) }
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const hideModal = (relatedTheme?: Theme | null) => {
|
||||
animate(
|
||||
modalElement,
|
||||
{ y: [10, 500], opacity: [1, 0] },
|
||||
{ easing: spring({ stiffness: 150, damping: 20 }) }
|
||||
);
|
||||
setTimeout(() => {
|
||||
setDisplayTheme(relatedTheme ?? null);
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-end justify-center bg-black bg-opacity-70"
|
||||
onclick={(e) => {
|
||||
if (e.target === e.currentTarget) hideModal();
|
||||
}}
|
||||
onkeydown={(e) => {
|
||||
if (e.target === e.currentTarget) hideModal();
|
||||
}}
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
transition:fade
|
||||
>
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
bind:this={modalElement}
|
||||
class="w-full max-w-[600px] h-[95%] p-4 bg-white rounded-t-2xl dark:bg-zinc-800 overflow-scroll no-scrollbar cursor-auto"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div class="relative h-auto">
|
||||
<button class="absolute top-0 right-0 p-2 text-xl font-bold text-gray-600 font-IconFamily dark:text-gray-200" onclick={() => hideModal()}>
|
||||
{'\ued8a'}
|
||||
</button>
|
||||
<h2 class="mb-4 text-2xl font-bold">
|
||||
{theme.name}
|
||||
</h2>
|
||||
<img src={theme.marqueeImage} alt="Theme Cover" class="object-cover w-full mb-4 rounded-md" />
|
||||
<p class="mb-4 text-gray-700 dark:text-gray-300">
|
||||
{theme.description}
|
||||
</p>
|
||||
{#if currentThemes.includes(theme.id)}
|
||||
<button onclick={async () => {installing = true; await onRemove(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
|
||||
{#if installing}
|
||||
<svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="{ installing ? 'opacity-0' : 'opacity-100' }">Remove</span>
|
||||
</button>
|
||||
{:else}
|
||||
<button onclick={async () => {installing = true; await onInstall(theme.id); installing = false}} class="relative flex items-center justify-center w-32 px-4 py-2 mt-4 ml-auto text-black rounded-full dark:text-white bg-zinc-300 dark:bg-zinc-700 dark:hover:bg-zinc-600/50 hover:bg-zinc-200">
|
||||
{#if installing}
|
||||
<svg class="absolute w-4 h-4 { installing ? 'opacity-100' : 'opacity-0' }" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="currentColor" fill="currentColor" class="origin-center animate-spin-fast" d="M2,12A11.2,11.2,0,0,1,13,1.05C12.67,1,12.34,1,12,1a11,11,0,0,0,0,22c.34,0,.67,0,1-.05C6,23,2,17.74,2,12Z"/>
|
||||
</svg>
|
||||
{/if}
|
||||
<span class="{ installing ? 'opacity-0' : 'opacity-100' }">Install</span>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div class="my-8 border-b border-zinc-200 dark:border-zinc-700"></div>
|
||||
|
||||
<h3 class="mb-4 text-lg font-bold">
|
||||
Similar Themes
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{#each getRelatedThemes() as relatedTheme (relatedTheme.id)}
|
||||
<button onclick={() => { hideModal(relatedTheme) }} class="w-full cursor-pointer">
|
||||
<div class="bg-gray-50 w-full transition-all hover:scale-105 duration-500 relative group group/card flex flex-col hover:shadow-2xl dark:hover:shadow-white/[0.1] hover:shadow-white/[0.8] dark:bg-zinc-800 dark:border-white/[0.1] h-auto rounded-xl overflow-clip border">
|
||||
<div class="absolute z-10 mb-1 text-xl font-bold text-white transition-all duration-500 group-hover:-translate-y-0.5 bottom-1 left-3">
|
||||
{relatedTheme.name}
|
||||
</div>
|
||||
<div class="absolute bottom-0 z-0 w-full h-3/4 bg-gradient-to-t from-black/80 to-transparent"></div>
|
||||
<img src={relatedTheme.coverImage} alt="Theme Preview" class="object-cover w-full h-48" />
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
<script lang="ts"></script>
|
||||
|
||||
<div class='w-full h-0.5 my-4 bg-zinc-200 dark:bg-zinc-700'></div>
|
||||
@@ -0,0 +1,38 @@
|
||||
<script lang="ts">
|
||||
interface Background {
|
||||
id: string;
|
||||
type: string;
|
||||
blob: Blob | null;
|
||||
url?: string | undefined;
|
||||
}
|
||||
|
||||
let { bg, isSelected, isEditMode, onClick, onDelete } = $props<{ bg: Background, isSelected: boolean, isEditMode: boolean, onClick: () => void, onDelete: () => void }>();
|
||||
|
||||
</script>
|
||||
|
||||
<div
|
||||
onclick={onClick}
|
||||
onkeydown={onClick}
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
class="relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-zinc-500/50 ring-zinc-300 {isEditMode ? 'animate-shake' : ''} {isSelected ? 'dark:ring-4 ring-4' : 'ring-0'}"
|
||||
>
|
||||
{#if isEditMode}
|
||||
<div
|
||||
tabindex="-1"
|
||||
role="button"
|
||||
class="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
|
||||
onclick={onDelete}
|
||||
onkeydown={onDelete}
|
||||
>
|
||||
<div class="w-4 h-0.5 bg-white"></div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if bg.url}
|
||||
{#if bg.type === 'image'}
|
||||
<img class="object-cover w-full h-full rounded-xl" src={bg.url} alt="swatch" />
|
||||
{:else if bg.type === 'video'}
|
||||
<video muted loop autoplay src={bg.url} class="object-cover w-full h-full rounded-xl"></video>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,235 @@
|
||||
<script lang="ts">
|
||||
import { hasEnoughStorageSpace, isIndexedDBSupported, writeData, openDatabase, readAllData, deleteData } from '@/interface/hooks/BackgroundDataLoader'
|
||||
import BackgroundUploader from './BackgroundUploader.svelte';
|
||||
import BackgroundItem from './BackgroundItem.svelte'
|
||||
import { onMount, onDestroy } from 'svelte'
|
||||
import { loadBackground } from '@/seqta/ui/ImageBackgrounds'
|
||||
import { delay } from 'lodash'
|
||||
import { backgroundUpdates } from '@/interface/hooks/BackgroundUpdates'
|
||||
|
||||
let { isEditMode, selectNoBackground = $bindable(), selectedBackground = $bindable() } = $props<{ isEditMode: boolean, selectNoBackground: () => void, selectedBackground: string | null }>();
|
||||
let backgrounds = $state<{ id: string; type: string; blob: Blob | null; url?: string }[]>([]);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
let imageBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'image'));
|
||||
let videoBackgrounds = $derived(backgrounds.filter(bg => bg.type === 'video'));
|
||||
|
||||
let isVisible = $state(false);
|
||||
let element: HTMLElement;
|
||||
let observer: MutationObserver;
|
||||
let parentElement: HTMLElement | null = null;
|
||||
|
||||
async function getTheme() {
|
||||
return localStorage.getItem('selectedBackground');
|
||||
}
|
||||
|
||||
async function setTheme(theme: string) {
|
||||
localStorage.setItem('selectedBackground', theme);
|
||||
}
|
||||
|
||||
async function handleFileChange(file: File): Promise<void> {
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB. Unable to save backgrounds.");
|
||||
}
|
||||
|
||||
const hasSpace = await hasEnoughStorageSpace(file.size);
|
||||
if (!hasSpace) {
|
||||
throw new Error("Not enough storage space to save this background.");
|
||||
}
|
||||
|
||||
const fileId = `${Date.now()}-${file.name}`;
|
||||
const fileType = file.type.split('/')[0];
|
||||
const blob = new Blob([file], { type: file.type });
|
||||
|
||||
await writeData(fileId, fileType, blob);
|
||||
backgrounds = [...backgrounds, { id: fileId, type: fileType, blob, url: URL.createObjectURL(blob) }];
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
error = e.message;
|
||||
} else {
|
||||
error = 'An unknown error occurred';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBackgroundMetadata(): Promise<void> {
|
||||
try {
|
||||
error = null;
|
||||
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
|
||||
}
|
||||
|
||||
await openDatabase();
|
||||
const data = await readAllData();
|
||||
selectedBackground = await getTheme();
|
||||
|
||||
// Only load metadata (id and type) for placeholders
|
||||
backgrounds = data.map(({ id, type }) => ({ id, type, blob: null }));
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
error = e.message;
|
||||
} else {
|
||||
error = 'An unknown error occurred';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function syncBackgrounds(): Promise<void> {
|
||||
try {
|
||||
error = null;
|
||||
|
||||
if (!isIndexedDBSupported()) {
|
||||
throw new Error("Your browser doesn't support IndexedDB. Unable to load backgrounds.");
|
||||
}
|
||||
|
||||
const dbData = await readAllData();
|
||||
|
||||
// Release existing object URLs to prevent memory leaks
|
||||
backgrounds.forEach(bg => {
|
||||
if (bg.url) URL.revokeObjectURL(bg.url);
|
||||
});
|
||||
|
||||
// Create fresh background objects with new object URLs
|
||||
backgrounds = dbData.map(bg => ({
|
||||
id: bg.id,
|
||||
type: bg.type,
|
||||
blob: bg.blob,
|
||||
url: URL.createObjectURL(bg.blob)
|
||||
}));
|
||||
|
||||
// Check if selected background still exists
|
||||
if (selectedBackground && !backgrounds.some(bg => bg.id === selectedBackground)) {
|
||||
selectNoBackground();
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
error = e.message;
|
||||
} else {
|
||||
error = 'An unknown error occurred';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function selectBackground(fileId: string): void {
|
||||
if (selectedBackground === fileId) {
|
||||
selectNoBackground();
|
||||
return;
|
||||
}
|
||||
|
||||
selectedBackground = fileId;
|
||||
setTheme(fileId);
|
||||
}
|
||||
|
||||
async function deleteBackground(fileId: string): Promise<void> {
|
||||
try {
|
||||
await deleteData(fileId);
|
||||
backgrounds = backgrounds.filter(bg => bg.id !== fileId);
|
||||
|
||||
if (selectedBackground === fileId) {
|
||||
selectNoBackground();
|
||||
}
|
||||
} catch (e) {
|
||||
if (e instanceof Error) {
|
||||
error = `Failed to delete background: ${e.message}`;
|
||||
} else {
|
||||
error = 'An unknown error occurred';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
selectNoBackground = () => {
|
||||
selectedBackground = null;
|
||||
setTheme('');
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
loadBackground();
|
||||
selectedBackground
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
|
||||
function checkActiveClass() {
|
||||
if (parentElement?.classList.contains('active')) {
|
||||
delay(() => {
|
||||
isVisible = true;
|
||||
syncBackgrounds();
|
||||
}, 600);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
loadBackgroundMetadata();
|
||||
backgroundUpdates.addListener(syncBackgrounds);
|
||||
|
||||
parentElement = element.closest('.tab');
|
||||
if (parentElement) {
|
||||
observer = new MutationObserver(checkActiveClass);
|
||||
observer.observe(parentElement, { attributes: true, attributeFilter: ['class'] });
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
backgroundUpdates.removeListener(syncBackgrounds);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (observer) {
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={element} class="relative px-1 { !( isEditMode && imageBackgrounds.length === 0 && videoBackgrounds.length === 0 ) && 'pt-2' }">
|
||||
{#if !(imageBackgrounds.length === 0 && isEditMode)}
|
||||
<h2 class="pb-2 text-lg font-bold">Background Images</h2>
|
||||
<div class="flex flex-wrap gap-4 mb-4">
|
||||
{#if !isEditMode}
|
||||
<BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
|
||||
{/if}
|
||||
{#each imageBackgrounds as bg (bg.id)}
|
||||
{#if isVisible && bg.blob}
|
||||
<BackgroundItem
|
||||
bg={bg}
|
||||
isSelected={selectedBackground === bg.id}
|
||||
isEditMode={isEditMode}
|
||||
onClick={() => selectBackground(bg.id)}
|
||||
onDelete={() => deleteBackground(bg.id)}/>
|
||||
{:else}
|
||||
<div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !(videoBackgrounds.length === 0 && isEditMode)}
|
||||
<h2 class="py-2 text-lg font-bold">Background Videos</h2>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{#if !isEditMode}
|
||||
<BackgroundUploader on:fileChange={e => handleFileChange(e.detail)} />
|
||||
{/if}
|
||||
{#each videoBackgrounds as bg (bg.id)}
|
||||
{#if isVisible && bg.blob}
|
||||
<BackgroundItem
|
||||
bg={bg}
|
||||
isSelected={selectedBackground === bg.id}
|
||||
isEditMode={isEditMode}
|
||||
onClick={() => selectBackground(bg.id)}
|
||||
onDelete={() => deleteBackground(bg.id)}
|
||||
/>
|
||||
{:else}
|
||||
<div class="w-16 h-16 rounded-xl bg-zinc-100 dark:bg-zinc-900 animate-pulse"></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleFileChange(event: Event) {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (file) {
|
||||
dispatch('fileChange', file);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-100 dark:bg-zinc-900">
|
||||
<div class="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
|
||||
<!-- Plus icon -->
|
||||
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*, video/mp4"
|
||||
on:change={handleFileChange}
|
||||
class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
@@ -0,0 +1,210 @@
|
||||
<script lang="ts">
|
||||
import type { CustomTheme, ThemeList } from '@/types/CustomThemes'
|
||||
import { getAvailableThemes } from '@/seqta/ui/themes/getAvailableThemes'
|
||||
import { onDestroy, onMount } from 'svelte'
|
||||
import { OpenThemeCreator } from '@/seqta/ui/ThemeCreator'
|
||||
import shareTheme from '@/seqta/ui/themes/shareTheme'
|
||||
import { InstallTheme } from '@/seqta/ui/themes/downloadTheme'
|
||||
import { disableTheme } from '@/seqta/ui/themes/disableTheme'
|
||||
import { setTheme } from '@/seqta/ui/themes/setTheme'
|
||||
import { deleteTheme } from '@/seqta/ui/themes/deleteTheme'
|
||||
import { OpenStorePage } from '@/seqta/ui/renderStore'
|
||||
import { themeUpdates } from '@/interface/hooks/ThemeUpdates'
|
||||
import { closeExtensionPopup } from '@/SEQTA'
|
||||
|
||||
let themes = $state<ThemeList | null>(null);
|
||||
let { isEditMode } = $props<{ isEditMode: boolean }>();
|
||||
let isDragging = $state(false);
|
||||
let tempTheme = $state(null);
|
||||
|
||||
const handleThemeClick = async (theme: CustomTheme) => {
|
||||
if (isEditMode) return;
|
||||
if (theme.id === themes?.selectedTheme) {
|
||||
await disableTheme();
|
||||
themes.selectedTheme = '';
|
||||
} else {
|
||||
await setTheme(theme.id);
|
||||
if (!themes) return;
|
||||
themes.selectedTheme = theme.id;
|
||||
}
|
||||
}
|
||||
|
||||
const handleThemeDelete = async (themeId: string) => {
|
||||
try {
|
||||
await deleteTheme(themeId);
|
||||
if (!themes) return;
|
||||
|
||||
themes.themes = themes.themes.filter(theme => theme.id !== themeId);
|
||||
if (themeId === themes.selectedTheme) {
|
||||
themes.selectedTheme = '';
|
||||
await disableTheme();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting theme:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const handleShareTheme = async (theme: CustomTheme) => {
|
||||
try {
|
||||
await shareTheme(theme.id);
|
||||
} catch (error) {
|
||||
console.error('Error sharing theme:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const handleDragOver = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
isDragging = true;
|
||||
}
|
||||
|
||||
const handleDragLeave = () => {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
const handleDrop = async (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
isDragging = false;
|
||||
const file = e.dataTransfer?.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (event: ProgressEvent<FileReader>) => {
|
||||
try {
|
||||
const result = JSON.parse(event.target?.result as string);
|
||||
tempTheme = result;
|
||||
await InstallTheme(result);
|
||||
await fetchThemes();
|
||||
} catch (error) {
|
||||
alert('Error parsing file. Please upload a valid JSON theme file.');
|
||||
}
|
||||
tempTheme = null;
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
const fetchThemes = async () => {
|
||||
themes = await getAvailableThemes();
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await fetchThemes();
|
||||
|
||||
themeUpdates.addListener(fetchThemes);
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
themeUpdates.removeListener(fetchThemes);
|
||||
})
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-full pt-5 mb-1"
|
||||
role="list"
|
||||
tabindex="-1"
|
||||
ondragover={handleDragOver}
|
||||
ondragleave={handleDragLeave}
|
||||
ondrop={handleDrop}
|
||||
>
|
||||
<div class="{isDragging ? 'opacity-100' : 'opacity-0'} transition pointer-events-none absolute w-full p-2 z-50">
|
||||
<div class="sticky w-full h-64 bg-white shadow-xl dark:bg-zinc-900 top-5 dark:text-white rounded-xl outline-dashed outline-4 outline-zinc-200 dark:outline-zinc-700">
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg height="48" width="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill="currentColor">
|
||||
<path d="M44,31a1,1,0,0,0-1,1v8a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V32a1,1,0,0,0-2,0v8a5.006,5.006,0,0,0,5,5H40a5.006,5.006,0,0,0,5-5V32A1,1,0,0,0,44,31Z" fill="currentColor"/>
|
||||
<path d="M23.2,33.6a1,1,0,0,0,1.6,0l9-12A1,1,0,0,0,33,20H26V5a2,2,0,0,0-4,0V20H15a1,1,0,0,0-.8,1.6Z" fill="currentColor"/>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="text-lg">Import Theme</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="pb-2 text-lg font-bold">Themes</h2>
|
||||
<div class="flex flex-col gap-2 px-2">
|
||||
{#if themes}
|
||||
{#each themes.themes as theme (theme.id)}
|
||||
<button
|
||||
class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
|
||||
onclick={() => handleThemeClick(theme)}
|
||||
>
|
||||
{#if isEditMode}
|
||||
<div
|
||||
class="absolute z-20 flex w-6 h-6 p-2 text-white bg-red-600 rounded-full opacity-100 right-2 place-items-center top-2"
|
||||
onclick={(event) => { event.stopPropagation(); handleThemeDelete(theme.id) }}
|
||||
onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleThemeDelete(theme.id) }}
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div class="w-4 h-0.5 bg-white"></div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !isEditMode}
|
||||
<div
|
||||
class="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1/4 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2 -translate-y-1/2"
|
||||
onclick={(event) => { event.stopPropagation(); OpenThemeCreator(theme.id); closeExtensionPopup() }}
|
||||
onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') OpenThemeCreator(theme.id); closeExtensionPopup() }}
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span class="text-lg font-IconFamily"></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute z-20 flex w-8 h-8 p-2 text-center transition-all -translate-y-1/2 rounded-full opacity-0 text-white/80 top-1/4 right-12 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-1/2"
|
||||
onclick={(event) => { event.stopPropagation(); handleShareTheme(theme) }}
|
||||
onkeydown={(event) => { if (event.key === 'Enter' || event.key === ' ') handleShareTheme(theme) }}
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span class="text-lg font-IconFamily"></span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="relative top-0 z-10 flex justify-center w-full h-full overflow-hidden transition dark:text-white rounded-xl group place-items-center bg-zinc-100 dark:bg-zinc-900 { isEditMode ? 'animate-shake brightness-90' : ''}">
|
||||
{#if theme.coverImage}
|
||||
<img
|
||||
src={typeof theme.coverImage === 'string' ? theme.coverImage : URL.createObjectURL(theme.coverImage)}
|
||||
alt={theme.name}
|
||||
class="absolute inset-0 z-0 object-cover w-full h-full pointer-events-none"
|
||||
/>
|
||||
{/if}
|
||||
{#if !theme.hideThemeName}
|
||||
<div class="z-10 {theme.coverImage ? 'text-white' : ''}">{theme.name}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if tempTheme}
|
||||
<div class="flex justify-center w-full bg-gray-200 rounded-xl dark:bg-zinc-700/50 place-items-center aspect-theme animate-pulse">
|
||||
<svg class="w-5 h-5 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if themes && themes.themes.length > 0}
|
||||
<div id="divider" class="w-full h-[1px] my-2 bg-zinc-100 dark:bg-zinc-600"></div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
onclick={() => OpenStorePage()}
|
||||
class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
|
||||
>
|
||||
<span class="text-xl font-IconFamily"></span>
|
||||
<span class="ml-2">Theme Store</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onclick={() => { OpenThemeCreator(); closeExtensionPopup() }}
|
||||
class="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
|
||||
>
|
||||
<span class="text-xl font-IconFamily"></span>
|
||||
<span class="ml-2">Create your own</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
|
||||
const e = React.createElement;
|
||||
let container: HTMLDivElement;
|
||||
|
||||
onMount(() => {
|
||||
const { el, children, class: _, ...props } = $$props;
|
||||
try {
|
||||
ReactDOM.render(e(el, props, children), container);
|
||||
} catch (err) {
|
||||
console.warn(`react-adapter failed to mount.`, { err });
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
try {
|
||||
ReactDOM.unmountComponentAtNode(container);
|
||||
} catch (err) {
|
||||
console.warn(`react-adapter failed to unmount.`, { err });
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class={$$props.class}></div>
|
||||
Reference in New Issue
Block a user