starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-27 03:05:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

container2: remove old code, make sure she builds

Browse Source
This commit is contained in:
Aleksi Lassila
2025-08-20 17:43:31 +03:00
parent 9d04587c35
commit 7148ebe188
11 changed files with 51 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/lib/components/ComponentStack/ComponentStack.svelte
View File

@@ -1,40 +0,0 @@
<script lang="ts">
import { type ComponentStackStore } from '$lib/stores/component-stack.store';
import classNames from 'classnames';
import { derived } from 'svelte/store';
import ComponentStackItem from './ComponentStackItem.svelte';
export let componentStack: ComponentStackStore;
const top = derived(
componentStack,
($componentStack) => $componentStack[$componentStack.length - 1]
);
</script>
<div class={classNames('relative', $$restProps.class)}>
<ComponentStackItem {componentStack} {top} />
<!-- {#each $componentStack as component (component.id)}
{@const hidden = $top?.group === component.group && $top?.id !== component.id}
<Container
disabled={hidden}
focusOnMount={!hidden}
trapFocus
class="fixed inset-0 z-10 overflow-x-hidden overflow-y-auto"
>
<svelte:component
this={component.component}
{...component.props}
modalId={component.id}
{hidden}
groupId={component.group}
modal={component}
/>
</Container>
{/each} -->
<!-- {#each $componentStack as component, index (component.id)}
{@const hidden = $top?.group === component.group && $top?.id !== component.id}
<ComponentStackItem2 {index} {component} {hidden} {context} />
{/each} -->
</div>

32
frontend/src/lib/components/ComponentStack/ComponentStackContainer.svelte
View File

@@ -1,28 +1,32 @@
<!-- The purpose of this component is to make contexts available to ComponentStack children. -->
<script lang="ts">
import { getContext, type ComponentProps } from 'svelte';
import type { Readable } from 'svelte/store';
import Container from '../Container.svelte';
import ComponentStackItem from './ComponentStackItem.svelte';
import type { ComponentStackStore } from '$lib/stores/component-stack.store';
import classNames from 'classnames';
import { getContext, setContext } from 'svelte';
import Container from '../Container.svelte';
const componentStackIndex = getContext<number>('component-stack-index');
const { top, ...componentStack } = getContext<ComponentStackStore>('component-stack');
$: nextComponent = $componentStack[componentStackIndex + 1];
$: hidden =
$top?.group !== $componentStack[componentStackIndex]?.group &&
$top?.id !== $componentStack[componentStackIndex]?.id;
export let trapFocus = false;
export let hideSidebar = false;
const props = getContext<Readable<ComponentProps<ComponentStackItem> & { hidden: boolean }>>(
'component-stack-container'
);
setContext('component-stack-index', componentStackIndex + 1);
</script>
<Container
disabled={$props.hidden}
focusOnMount={!$props.hidden}
disabled={hidden}
focusOnMount={!hidden}
{trapFocus}
class={classNames(
'fixed inset-0 overflow-x-hidden overflow-y-auto scrollbar-hide',
{
'z-[21]': hideSidebar,
'opacity-0': $props.hidden
'opacity-0': hidden
},
$$restProps.class
)}
@@ -31,4 +35,8 @@
<slot />
</Container>
<ComponentStackItem {...$props} />
{#if nextComponent}
<svelte:component this={nextComponent.component} {...nextComponent.props} />
{/if}
<!-- <ComponentStackItem {...$props} /> -->

48
frontend/src/lib/components/ComponentStack/ComponentStackContainer2.svelte
View File

@@ -1,48 +0,0 @@
<script lang="ts">
import { getContext, setContext, type ComponentProps } from 'svelte';
import { get, type Readable } from 'svelte/store';
import Container from '../Container.svelte';
import ComponentStackItem from './ComponentStackItem.svelte';
import classNames from 'classnames';
import type { ComponentStackStore } from '$lib/stores/component-stack.store';
const componentStackIndex = getContext<number>('component-stack-index');
const { top, ...componentStack } = getContext<ComponentStackStore>('component-stack');
$: nextComponent = $componentStack[componentStackIndex + 1];
$: hidden =
$top?.group !== $componentStack[componentStackIndex]?.group &&
$top?.id !== $componentStack[componentStackIndex]?.id;
export let trapFocus = false;
export let hideSidebar = false;
// const props = getContext<Readable<ComponentProps<ComponentStackItem> & { hidden: boolean }>>(
// 'component-stack-container'
// );
setContext('component-stack-index', componentStackIndex + 1);
</script>
<Container
disabled={hidden}
focusOnMount={!hidden}
{trapFocus}
class={classNames(
'fixed inset-0 overflow-x-hidden overflow-y-auto scrollbar-hide',
{
'z-[21]': hideSidebar,
'opacity-0': hidden
},
$$restProps.class
)}
style="backface-visibility: hidden"
>
<slot />
</Container>
{#if nextComponent}
<svelte:component this={nextComponent.component} {...nextComponent.props} />
{/if}
<!-- <ComponentStackItem {...$props} /> -->

34
frontend/src/lib/components/ComponentStack/ComponentStackItem.svelte
View File

@@ -1,34 +0,0 @@
<script lang="ts">
import type { ComponentPage, ComponentStackStore } from '$lib/stores/component-stack.store';
import { setContext } from 'svelte';
import { derived, type Readable } from 'svelte/store';
export let index = 0;
export let componentStack: ComponentStackStore;
export let top: Readable<ComponentPage | undefined>;
$: component = $componentStack[index];
const hidden = derived(
top,
($top) => $top?.group === component?.group && $top?.id !== component?.id
);
const componentStackContainerContext = derived(
[componentStack, top],
([$componentStack, $top]) => {
return {
index: index + 1,
componentStack,
top,
hidden:
$top?.group !== $componentStack[index]?.group && $top?.id !== $componentStack[index]?.id
};
}
);
setContext('component-stack-container', componentStackContainerContext);
</script>
{#if component}
<svelte:component this={component.component} {...component.props} />
{/if}

4
frontend/src/lib/components/ComponentStack/TestComp.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { getContext, hasContext, setContext } from 'svelte';
import ComponentStackContainer2 from './ComponentStackContainer2.svelte';
import ComponentStackContainer2 from './ComponentStackContainer.svelte';
import type { ComponentStackStore } from '$lib/stores/component-stack.store';
import TestComp2 from './TestComp2.svelte';
@@ -12,7 +12,7 @@
<ComponentStackContainer2>
<div>Test Component {test}</div>
<button on:click={() => componentStack.create(TestComp2, {})}>
<button on:click={() => componentStack.push({ component: TestComp2, props: {} })}>
Another oneAnother oneAnother oneAnother one
</button>
<button on:click={() => componentStack.pop()}>

6
frontend/src/lib/components/ComponentStack/TestComp2.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { getContext, hasContext, setContext } from 'svelte';
import ComponentStackContainer2 from './ComponentStackContainer2.svelte';
import ComponentStackContainer2 from './ComponentStackContainer.svelte';
import type { ComponentStackStore } from '$lib/stores/component-stack.store';
import TestComp from './TestComp.svelte';
@@ -12,5 +12,7 @@
<ComponentStackContainer2>
<div>Test Component {test}</div>
<button on:click={() => componentStack.create(TestComp, {})}>Another one</button>
<button on:click={() => componentStack.push({ component: TestComp, props: {} })}>
ANOTHER ONE
</button>
</ComponentStackContainer2>

4
frontend/src/lib/components/ComponentStack/index.ts
View File

@@ -1,2 +1,2 @@
export * from './ComponentStack.svelte';
export * from './ComponentStackContainer2.svelte';
export * from './ComponentStackProvider.svelte';
export * from './ComponentStackContainer.svelte';

4
frontend/src/lib/components/DynamicMenu/MediaSourceMenuModal.svelte
View File

@@ -1,6 +1,5 @@
<script lang="ts">
import Container from '$components/Container.svelte';
import ComponentStack from '$lib/components/ComponentStack/ComponentStack.svelte';
import DynamicListView from '$lib/components/Menu/ListMenu.svelte';
import { reiverrApi, user } from '$lib/stores/user.store';
import { capitalize } from '$lib/utils';
@@ -9,6 +8,7 @@
import type { MediaSourceDto, ViewProviderDto } from '../../apis/reiverr/reiverr.openapi';
import { mediaSourceContext } from '../../pages/TitlePages/media-source.context';
import Modal from '../Modal/Modal.svelte';
import ComponentStackProvider from '../ComponentStack/ComponentStackProvider.svelte';
type ViewItem = {
label: string;
@@ -110,7 +110,7 @@
{/each}
{/await}
{:else}
<ComponentStack {componentStack} />
<ComponentStackProvider {componentStack} />
{/if}
</Container>
</Modal>

6
frontend/src/lib/pages/TitlePages/MoviePage/MoviePage.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import ComponentStack from '$lib/components/ComponentStack/ComponentStack.svelte';
import ComponentStackProvider from '$lib/components/ComponentStack/ComponentStackProvider.svelte';
import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
import { movieUserDataContext } from '$lib/stores/user-data/title-user-data.store';
import { onDestroy } from 'svelte';
@@ -12,7 +12,7 @@
const { tmdbMovie, unsubscribe } = movieUserDataContext.createContext(id);
const { componentStack } = titlePageContext.createContext();
componentStack.create(MoviePageDetails, {});
componentStack.push({ component: MoviePageDetails, props: {} });
$tmdbMovie.then(async (movie) => {
const backgrounds =
@@ -39,4 +39,4 @@
});
</script>
<ComponentStack {componentStack} />
<ComponentStackProvider {componentStack} />

13
frontend/src/lib/pages/TitlePages/SeriesPage/SeriesPage.svelte
View File

@@ -1,14 +1,11 @@
<script lang="ts">
import ComponentStack from '$lib/components/ComponentStack/ComponentStack.svelte';
import {
createBackgroundPage,
topBackground
} from '$lib/components/GlobalBackground/BackgroundStack';
import ComponentStackProvider from '$lib/components/ComponentStack/ComponentStackProvider.svelte';
import { createBackgroundPage } from '$lib/components/GlobalBackground/BackgroundStack';
import { TMDB_BACKDROP_SMALLEST } from '$lib/constants';
import { seriesUserDataContext as seriesDataContext } from '$lib/stores/user-data/title-user-data.store';
import { onDestroy } from 'svelte';
import { titlePageContext } from '../ActionsPage/actions-page';
import SeriesPageDetails from './SeriesPageDetails.svelte';
import { TMDB_BACKDROP_SMALLEST } from '$lib/constants';
export let id: string;
@@ -16,7 +13,7 @@
const { tmdbSeries, unsubscribe } = seriesDataContext.createContext(id);
const { componentStack } = titlePageContext.createContext();
componentStack.create(SeriesPageDetails, {});
componentStack.push({ component: SeriesPageDetails, props: {} });
$tmdbSeries.then((series) => {
const backgrounds =
@@ -58,4 +55,4 @@
/>
{/if}
<ComponentStack {componentStack} />
<ComponentStackProvider {componentStack} />

82
frontend/src/lib/stores/component-stack.store.ts
View File

@@ -1,4 +1,3 @@
import { createStoreContext } from '$lib/utils';
import { type ComponentProps, type ComponentType, type SvelteComponentTyped } from 'svelte';
import { derived, get, writable } from 'svelte/store';
@@ -20,7 +19,11 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
const top = derived(items, ($items) => $items[$items.length - 1]);
if (initial) {
create(initial.component, initial.props, initial.group);
push({
component: initial.component,
props: initial.props,
group: initial.group
});
}
function close(symbol: symbol) {
@@ -31,11 +34,13 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
items.update((prev) => prev.filter((i) => i.group !== group));
}
function create<P extends Record<string, unknown>>(
component: ComponentType<SvelteComponentTyped<P>>,
props: P,
group: symbol | undefined = undefined
) {
function push<P extends Record<string, unknown>>(opts: {
component: ComponentType<SvelteComponentTyped<P>>;
props: P;
group?: symbol;
}) {
const { component, props, group } = opts;
const id = Symbol();
const item = { id, component, props, group: group || id };
items.update((prev) => [...prev, item]);
@@ -58,7 +63,7 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
top: {
subscribe: top.subscribe
},
create,
push,
close,
closeGroup,
closeTopmost,
@@ -66,64 +71,3 @@ export function useComponentStack<P extends Record<string, unknown>>(initial?: {
reset
};
}
/** @deprecated */
export type ComponentStackContext = ReturnType<typeof useComponentStackContext>;
/** @deprecated */
type ContextProvider = ReturnType<ComponentStackContext['getContextProvider']>;
/** @deprecated */
export function useComponentStackContext() {
const contexts: Record<string, { index: number; context: unknown }[]> = {};
function getContextProvider(index: number) {
function setContext<T = any>(key: string, context: T) {
if (!contexts[key]) {
contexts[key] = [];
}
const prev = contexts[key].find((ctx) => ctx.index === index);
if (prev) {
prev.context = context;
} else {
contexts[key].push({ index, context });
}
}
function hasContext(key: string) {
return !!contexts[key];
}
function getContext<T = any>(key: string): T;
function getContext(key: string) {
const context = contexts[key] || [];
for (let i = context.length - 1; i >= 0; i--) {
const ctx = context[i];
if (!ctx) continue;
if (ctx.index <= index) {
return ctx.context;
}
}
}
return {
setContext,
getContext,
hasContext
};
}
return { getContextProvider };
}
/** @deprecated */
export const componentStackContextProvider = createStoreContext(
'component-stack-context',
(context: ComponentStackContext, index: number) => context.getContextProvider(index),
{ required: true }
);