chore: regression fix after refactor

Akylas · Oct 22, 2024 · 716aca7 · 716aca7
1 parent d8983c8
commit 716aca7
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 87 deletions.
diff --git a/app/components/PlaylistView.svelte b/app/components/PlaylistView.svelte
@@ -60,11 +60,13 @@
                     {fontSize}
                     {fontWeight}
                     {iconFontSize}
+                    item={{
+                        rightValue: item.rightValue,
+                        title: item.pack?.title || item.story.name,
+                        subtitle: item.story ? formatDuration(item.story.duration) : null
+                    }}
                     mainCol={1}
-                    rightValue={item.rightValue}
                     showBottomLine={showBorders}
-                    subtitle={item.story ? formatDuration(item.story.duration) : null}
-                    title={item.pack?.title || item.story.name}
                     on:tap={(event) => onTap(item, event)}>
                     <image borderRadius={4} col={0} height={45} marginRight={10} src={item.story?.thumbnail || (item.pack || item.story.pack).getThumbnail()} />
                     <label

diff --git a/app/components/common/ListItem.ts b/app/components/common/ListItem.ts
@@ -1,6 +1,7 @@
 import { Canvas, CanvasView } from "@nativescript-community/ui-canvas";
 
 export interface ListItem {
+    showBottomLine?: boolean;
     iconFontSize?: number;
     subtitleFontSize?: number;
     rightValue?: string | (() => string);
@@ -14,6 +15,7 @@ export interface ListItem {
     title?: string;
     subtitle?: string;
     type?: string;
+    onLinkTap?: (event) => void;
     onDraw?: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void;
     [k: string]: any;
 }
diff --git a/app/components/common/ListItemAutoSize.svelte b/app/components/common/ListItemAutoSize.svelte
@@ -30,7 +30,7 @@
         const h = canvas.getHeight();
         const w = canvas.getWidth();
 
-        if (showBottomLine) {
+        if (item.showBottomLine || showBottomLine) {
             event.canvas.drawLine(20, h - 1, w, h - 1, linePaint);
         }
         // if (leftIcon) {
@@ -98,8 +98,8 @@
         text={item.text}
         textWrap={true}
         verticalTextAlignment="center"
-        {...$$restProps?.titleProps}
-        use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}>
+        {...item.titleProps || $$restProps?.titleProps}
+        use:conditionalEvent={{ condition: !!(item.onLinkTap || onLinkTap), event: 'linkTap', callback: item.onLinkTap || onLinkTap }}>
         <cspan text={item.title} />
         <cspan color={item.subtitleColor || colorOnSurfaceVariant} fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale} text={item.subtitle ? '\n' + item.subtitle : null} />
     </label>

diff --git a/app/components/common/ListItemAutoSizeFull.svelte b/app/components/common/ListItemAutoSizeFull.svelte
@@ -32,7 +32,7 @@
         const h = canvas.getHeight();
         const w = canvas.getWidth();
 
-        if (showBottomLine) {
+        if (item.showBottomLine || showBottomLine) {
             event.canvas.drawLine(20, h - 1, w, h - 1, linePaint);
         }
         (item.onDraw || onDraw)?.(item, event);
@@ -87,17 +87,17 @@
             html={item.html}
             text={item.text || item.title || item.name}
             textWrap={true}
-            {...$$restProps?.titleProps}
-            use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}>
+            {...item.titleProps || $$restProps?.titleProps}
+            use:conditionalEvent={{ condition: !!(item.onLinkTap || onLinkTap), event: 'linkTap', callback: item.onLinkTap || onLinkTap }}>
         </label>
         <label
             color={item.subtitleColor || subtitleColor || colorOnSurfaceVariant}
             disableCss={true}
             fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale}
             text={item.subtitle}
             textWrap={true}
-            use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}
-            {...$$restProps.subtitleProps || {}}>
+            use:conditionalEvent={{ condition: !!(item.onLinkTap || onLinkTap), event: 'linkTap', callback: item.onLinkTap || onLinkTap }}
+            {...item.subtitleProps || $$restProps?.subtitleProps || {}}>
         </label>
     </stacklayout>
 

diff --git a/app/components/settings/Settings.svelte b/app/components/settings/Settings.svelte
@@ -843,110 +843,43 @@
                 <label class="sectionHeader" {...item.additionalProps || {}} text={item.title} />
             </Template>
             <Template key="switch" let:item>
-                <ListItemAutoSize
-                    fontSize={20}
-                    html={item.html}
-                    leftIcon={item.icon}
-                    onLinkTap={item.onLinkTap}
-                    showBottomLine={item.showBottomLine}
-                    subtitle={getDescription(item)}
-                    title={item.title}
-                    titleProps={item.titleProps}
-                    on:tap={(event) => onTap(item, event)}>
+                <ListItemAutoSize fontSize={20} item={{ ...item, subtitle: getDescription(item) }} on:tap={(event) => onTap(item, event)}>
                     <switch id="checkbox" checked={item.value} col={1} marginLeft={10} on:checkedChange={(e) => onCheckBox(item, e)} />
                 </ListItemAutoSize>
             </Template>
             <Template key="checkbox" let:item>
-                <ListItemAutoSize
-                    fontSize={20}
-                    html={item.html}
-                    leftIcon={item.icon}
-                    onLinkTap={item.onLinkTap}
-                    showBottomLine={item.showBottomLine}
-                    subtitle={getDescription(item)}
-                    title={item.title}
-                    titleProps={item.titleProps}
-                    on:tap={(event) => onTap(item, event)}>
+                <ListItemAutoSize fontSize={20} item={{ ...item, subtitle: getDescription(item) }} on:tap={(event) => onTap(item, event)}>
                     <checkbox id="checkbox" checked={item.value} col={1} marginLeft={10} on:checkedChange={(e) => onCheckBox(item, e)} />
                 </ListItemAutoSize>
             </Template>
             <Template key="rightIcon" let:item>
-                <ListItemAutoSize
-                    fontSize={20}
-                    onLinkTap={item.onLinkTap}
-                    showBottomLine={item.showBottomLine}
-                    subtitle={getDescription(item)}
-                    title={item.title}
-                    titleProps={item.titleProps}
-                    on:tap={(event) => onTap(item, event)}>
+                <ListItemAutoSize fontSize={20} item={{ ...item, subtitle: getDescription(item) }} on:tap={(event) => onTap(item, event)}>
                     <IconButton col={1} text={item.rightBtnIcon} on:tap={(event) => onRightIconTap(item, event)} />
                 </ListItemAutoSize>
             </Template>
             <Template key="button" let:item>
-                <ListItemAutoSize
-                    columns="50,*,auto"
-                    fontSize={20}
-                    html={item.html}
-                    mainCol={1}
-                    onLinkTap={item.onLinkTap}
-                    showBottomLine={item.showBottomLine}
-                    subtitle={getDescription(item)}
-                    text={item.text}
-                    title={item.title}
-                    titleProps={item.titleProps}
-                    on:tap={(event) => onTap(item, event)}>
+                <ListItemAutoSize columns="50,*,auto" fontSize={20} item={{ ...item, subtitle: getDescription(item) }} mainCol={1} on:tap={(event) => onTap(item, event)}>
                     <image height={45} marginRight={4} marginTop={15} src={item.image()} verticalAlignment="top" width={45} />
                     <mdbutton col={2} marginTop={20} text={item.buttonText} verticalAlignment="top" on:tap={(event) => onButtonTap(item, event)} />
                 </ListItemAutoSize>
             </Template>
             <Template key="leftIcon" let:item>
-                <ListItemAutoSize
-                    columns="auto,*,auto"
-                    fontSize={20}
-                    html={item.html}
-                    leftIcon={item.icon}
-                    mainCol={1}
-                    onLinkTap={item.onLinkTap}
-                    rightValue={item.rightValue}
-                    showBottomLine={item.showBottomLine}
-                    subtitle={getDescription(item)}
-                    title={item.title}
-                    titleProps={item.titleProps}
-                    on:tap={(event) => onTap(item, event)}>
+                <ListItemAutoSize columns="auto,*,auto" fontSize={20} item={{ ...item, subtitle: getDescription(item) }} mainCol={1} on:tap={(event) => onTap(item, event)}>
                     <label col={0} fontFamily={$fonts.mdi} fontSize={24} padding="0 10 0 0" text={item.icon} verticalAlignment="center" />
                 </ListItemAutoSize>
             </Template>
             <Template key="imageLeft" let:item>
-                <ListItemAutoSize
-                    columns="50,*,auto"
-                    html={item.html}
-                    mainCol={1}
-                    onLinkTap={item.onLinkTap}
-                    showBottomLine={item.showBottomLine}
-                    subtitle={getDescription(item)}
-                    title={item.title}
-                    titleProps={item.titleProps}
-                    on:tap={(event) => onTap(item, event)}>
+                <ListItemAutoSize columns="50,*,auto" item={{ ...item, subtitle: getDescription(item) }} mainCol={1} on:tap={(event) => onTap(item, event)}>
                     <image height={45} marginRight={10} marginTop={15} src={item.image()} verticalAlignment="top" visibility={!!item.image ? 'visible' : 'hidden'} />
                 </ListItemAutoSize>
             </Template>
             <Template key="image" let:item>
-                <ListItemAutoSize fontSize={20} html={item.html} showBottomLine={item.showBottomLine} subtitle={getDescription(item)} title={item.title} on:tap={(event) => onTap(item, event)}>
+                <ListItemAutoSize fontSize={20} item={{ ...item, subtitle: getDescription(item) }} on:tap={(event) => onTap(item, event)}>
                     <image col={1} height={45} src={item.image()} />
                 </ListItemAutoSize>
             </Template>
             <Template let:item>
-                <ListItemAutoSize
-                    fontSize={20}
-                    html={item.html}
-                    onLinkTap={item.onLinkTap}
-                    rightValue={item.rightValue}
-                    showBottomLine={item.showBottomLine}
-                    subtitle={getDescription(item)}
-                    title={item.title}
-                    titleProps={item.titleProps}
-                    on:tap={(event) => onTap(item, event)}>
-                </ListItemAutoSize>
+                <ListItemAutoSize fontSize={20} item={{ ...item, subtitle: getDescription(item) }} on:tap={(event) => onTap(item, event)}></ListItemAutoSize>
             </Template>
         </collectionview>
         <CActionBar canGoBack title={title || $slc('settings.title')}>

diff --git a/app/components/settings/ThirdPartySoftwareBottomSheet.svelte b/app/components/settings/ThirdPartySoftwareBottomSheet.svelte
@@ -27,7 +27,7 @@
 <gesturerootview height="300">
     <collectionView id="scrollView" ios:contentInsetAdjustmentBehavior={2} itemIdGenerator={(item, i) => i} {items}>
         <Template let:item>
-            <ListItemAutoSize subtitle={item.moduleUrl} title={item.moduleName} on:tap={() => onTap(item)} />
+            <ListItemAutoSize item={{ title: item.moduleName, subtitle: item.moduleUrl }} on:tap={() => onTap(item)} />
         </Template>
     </collectionView>
 </gesturerootview>