etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(connection): Happ TV connect renders through the active block style (all 4)

Browse Source 
The TV quick-connect was rendered as standalone cards inserted between two
sliced block lists, which broke the panel's chosen style (e.g. split the
timeline rail) and dropped a step. Now it renders THROUGH the active renderer:

- Blocks gain an optional customNode; every renderer (cards/timeline/accordion/
  minimal) drops it into the block body, so it inherits that exact style.
- InstallationGuide renders the FULL block list in the active style and injects
  the TV connect widget as customNode on the "add subscription" step (no more
  slicing / dropped steps) — only for the Happ Android TV app.
- TvQuickConnect is now content-only (no one-off cards/titles); the block step is
  the wrapper. Buttons already use the shared blockButtonClass.
This commit is contained in:
c0mrade
2026-06-03 16:09:49 +03:00
parent ca54cb4732
commit c91c9e0441
8 changed files with 104 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/connection/InstallationGuide.tsx
View File

@@ -10,7 +10,7 @@ import type {
} from '@/types';
import { useTheme } from '@/hooks/useTheme';
import { CardsBlock, TimelineBlock, AccordionBlock, MinimalBlock, BlockButtons } from './blocks';
import type { BlockRendererProps } from './blocks';
import type { BlockRendererProps, RenderBlock } from './blocks';
import TvQuickConnect from './TvQuickConnect';
import { BackIcon, BookOpenIcon, ChevronIcon } from '@/components/icons';
@@ -194,6 +194,21 @@ export default function InstallationGuide({
const blockType = appConfig.uiConfig?.installationGuidesBlockType || 'cards';
const Renderer = RENDERERS[blockType] || CardsBlock;
// For the Happ Android TV app, inject the TV connect widget into a step as
// customNode so it renders THROUGH the active block style (cards/timeline/
// accordion/minimal) instead of as separate clashing cards that break it.
const showTvConnect = Boolean(
selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl,
);
let renderBlocks: RenderBlock[] = selectedApp?.blocks ?? [];
if (selectedApp && showTvConnect && appConfig.subscriptionUrl) {
// install → add-subscription → connect: attach to the add step (index 1);
// fall back to the last block for shorter configs.
const idx = selectedApp.blocks.length >= 3 ? 1 : Math.max(0, selectedApp.blocks.length - 1);
const widget = <TvQuickConnect subscriptionUrl={appConfig.subscriptionUrl} isLight={isLight} />;
renderBlocks = selectedApp.blocks.map((b, i) => (i === idx ? { ...b, customNode: widget } : b));
}
return (
<div className="space-y-6 pb-6">
{/* Header + platform dropdown */}
@@ -321,13 +336,12 @@ export default function InstallationGuide({
</a>
)}
{/* Blocks — for the Happ TV app: first block, Quick Connect, last block.
Other apps (or non-TV) render their blocks normally. */}
{selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl ? (
<>
{selectedApp.blocks.length > 0 && (
{/* Blocks rendered in the panel's active style. For the Happ Android TV
app the TV connect widget is injected into a step (customNode), so it
adapts to that style instead of breaking it. */}
{selectedApp && (
<Renderer
blocks={selectedApp.blocks.slice(0, 1)}
blocks={renderBlocks}
isMobile={isMobile}
isLight={isLight}
getLocalizedText={getLocalizedText}
@@ -335,28 +349,6 @@ export default function InstallationGuide({
renderBlockButtons={renderBlockButtons}
/>
)}
<TvQuickConnect subscriptionUrl={appConfig.subscriptionUrl} isLight={isLight} />
{selectedApp.blocks.length > 1 && (
<Renderer
blocks={selectedApp.blocks.slice(-1)}
isMobile={isMobile}
isLight={isLight}
getLocalizedText={getLocalizedText}
getSvgHtml={getSvgHtml}
renderBlockButtons={renderBlockButtons}
/>
)}
</>
) : selectedApp ? (
<Renderer
blocks={selectedApp.blocks}
isMobile={isMobile}
isLight={isLight}
getLocalizedText={getLocalizedText}
getSvgHtml={getSvgHtml}
renderBlockButtons={renderBlockButtons}
/>
) : null}
</div>
);
}

79
src/components/connection/TvQuickConnect.tsx
View File

@@ -191,10 +191,6 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
}
}, [tgNative, sendToTV, showToast, onScanDecoded, t]);
const cardClass = isLight
? 'rounded-2xl border border-dark-700/60 bg-white/80 shadow-sm p-4 sm:p-5'
: 'rounded-2xl border border-dark-700/50 bg-dark-800/50 p-4 sm:p-5';
const inputClass = isLight
? 'w-full rounded-xl border border-dark-700/60 bg-white px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500'
: 'w-full rounded-xl border border-dark-700 bg-dark-900/50 px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500';
@@ -204,34 +200,14 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
const actionBtnClass = `${blockButtonClass('light', isLight)} flex w-full items-center justify-center`;
return (
<div className="space-y-3">
{/* Code input */}
<div className={cardClass}>
<div className="flex items-start gap-3">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-accent-500/20 to-accent-600/10">
<svg
className="h-5 w-5 text-accent-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
/>
</svg>
</div>
<div className="min-w-0 flex-1">
<h3 className="font-semibold text-dark-100">
<div className="mt-3 space-y-4">
{/* Code import — the block step (timeline/cards/accordion/minimal) is the
wrapper; here we only render the interactive controls so the widget
inherits whatever style the panel config produced. */}
<div className="space-y-2">
<p className="text-sm font-medium text-dark-200">
{t('subscription.tvQuickConnect.title')}
</h3>
<p className="mt-1 text-sm text-dark-400">
{t('subscription.tvQuickConnect.description')}
</p>
<div className="mt-3 space-y-2">
<input
type="text"
maxLength={5}
@@ -248,49 +224,20 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
className={`${actionBtnClass} disabled:opacity-50`}
>
{sending ? (
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
<div className="h-5 w-5 animate-spin rounded-full border-2 border-accent-500/30 border-t-accent-500" />
) : (
t('subscription.tvQuickConnect.sendBtn')
)}
</button>
</div>
</div>
</div>
</div>
{/* QR Scanner */}
<div className={cardClass}>
<div className="flex items-start gap-3">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-accent-500/20 to-accent-600/10">
<svg
className="h-5 w-5 text-accent-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={1.5}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
/>
</svg>
</div>
<div className="min-w-0 flex-1">
<h3 className="font-semibold text-dark-100">
{/* QR scan */}
<div className="space-y-2">
<p className="text-sm font-medium text-dark-200">
{t('subscription.tvQuickConnect.scanTitle')}
</h3>
<p className="mt-1 text-sm text-dark-400">
{t('subscription.tvQuickConnect.scanDescription')}
</p>
{!scanning && (
<button onClick={startScan} className={`${actionBtnClass} mt-3`}>
<button onClick={startScan} className={actionBtnClass}>
<svg
className="mr-2 h-5 w-5"
fill="none"
@@ -312,7 +259,7 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
{t('subscription.tvQuickConnect.scanBtn')}
</button>
)}
<div className={scanning ? 'mt-3 space-y-2' : 'hidden'}>
<div className={scanning ? 'space-y-2' : 'hidden'}>
<div id="tv-qr-reader" className="overflow-hidden rounded-xl" />
{scanning && (
<button onClick={stopScan} className={actionBtnClass}>
@@ -321,8 +268,6 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
)}
</div>
</div>
</div>
</div>
{/* Toast */}
{toast && (

7
src/components/connection/blocks/AccordionBlock.tsx
View File

@@ -15,7 +15,11 @@ export function AccordionBlock({
const [openIndex, setOpenIndex] = useState<number | null>(0);
const visibleBlocks = blocks.filter(
(b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
(b) =>
getLocalizedText(b.title) ||
getLocalizedText(b.description) ||
b.buttons?.length ||
b.customNode,
);
if (!visibleBlocks.length) return null;
@@ -68,6 +72,7 @@ export function AccordionBlock({
{getLocalizedText(block.description)}
</p>
{renderBlockButtons(block.buttons, 'light')}
{block.customNode}
</div>
</div>
</div>

7
src/components/connection/blocks/CardsBlock.tsx
View File

@@ -11,7 +11,11 @@ export function CardsBlock({
renderBlockButtons,
}: BlockRendererProps) {
const visibleBlocks = blocks.filter(
(b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
(b) =>
getLocalizedText(b.title) ||
getLocalizedText(b.description) ||
b.buttons?.length ||
b.customNode,
);
if (!visibleBlocks.length) return null;
@@ -43,6 +47,7 @@ export function CardsBlock({
{getLocalizedText(block.description)}
</p>
{renderBlockButtons(block.buttons, 'light')}
{block.customNode}
</div>
</div>
</div>

7
src/components/connection/blocks/MinimalBlock.tsx
View File

@@ -11,7 +11,11 @@ export function MinimalBlock({
renderBlockButtons,
}: BlockRendererProps) {
const visibleBlocks = blocks.filter(
(b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
(b) =>
getLocalizedText(b.title) ||
getLocalizedText(b.description) ||
b.buttons?.length ||
b.customNode,
);
if (!visibleBlocks.length) return null;
@@ -44,6 +48,7 @@ export function MinimalBlock({
{getLocalizedText(block.description)}
</p>
{renderBlockButtons(block.buttons, 'subtle')}
{block.customNode}
</div>
);
})}

7
src/components/connection/blocks/TimelineBlock.tsx
View File

@@ -11,7 +11,11 @@ export function TimelineBlock({
renderBlockButtons,
}: BlockRendererProps) {
const visibleBlocks = blocks.filter(
(b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
(b) =>
getLocalizedText(b.title) ||
getLocalizedText(b.description) ||
b.buttons?.length ||
b.customNode,
);
if (!visibleBlocks.length) return null;
@@ -43,6 +47,7 @@ export function TimelineBlock({
{getLocalizedText(block.description)}
</p>
{renderBlockButtons(block.buttons, 'light')}
{block.customNode}
</div>
</div>
);

2
src/components/connection/blocks/index.ts
View File

@@ -3,4 +3,4 @@ export { TimelineBlock } from './TimelineBlock';
export { AccordionBlock } from './AccordionBlock';
export { MinimalBlock } from './MinimalBlock';
export { BlockButtons } from './BlockButtons';
export type { BlockRendererProps } from './types';
export type { BlockRendererProps, RenderBlock } from './types';

11
src/components/connection/blocks/types.ts
View File

@@ -1,7 +1,16 @@
import type { ReactNode } from 'react';
import type { RemnawaveBlockClient, RemnawaveButtonClient, LocalizedText } from '@/types';
/**
* A block to render. Beyond the panel's data (title/description/buttons), it may
* carry `customNode` — extra interactive content (e.g. the Happ TV connect
* widget) that every renderer drops into the block body, so it inherits the
* active style (cards/timeline/accordion/minimal) instead of clashing with it.
*/
export type RenderBlock = RemnawaveBlockClient & { customNode?: ReactNode };
export interface BlockRendererProps {
blocks: RemnawaveBlockClient[];
blocks: RenderBlock[];
isMobile: boolean;
isLight: boolean;
getLocalizedText: (text: LocalizedText | undefined) => string;