fix: show episode numbers when showing episodes in podcast mode

Akylas · Oct 22, 2024 · 203beec · 203beec
1 parent c764e1a
commit 203beec
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 107 deletions.
diff --git a/app/components/PacksList.svelte b/app/components/PacksList.svelte
@@ -828,8 +828,27 @@
                     type: 'image',
                     image: story.thumbnail,
                     name: story.name,
+                    episode: story.episode,
+                    episodeCount: thePack.extra?.episodeCount,
                     subtitle: formatDuration(story.duration),
-                    story
+                    story,
+                    onDraw: (item, event) => {
+                        if (item.episode && item.episodeCount) {
+                            textPaint.color = colorOnTertiaryContainer;
+                            textPaint.fontWeight = 'bold';
+                            const canvas = event.canvas;
+                            const h = canvas.getHeight();
+                            const w = canvas.getWidth();
+                            const staticLayout = new StaticLayout(` ${item.episode}/${item.episodeCount} `, textPaint, w, LayoutAlignment.ALIGN_NORMAL, 1, 0, false);
+                            const width = staticLayout.getLineWidth(0);
+                            const height = staticLayout.getHeight();
+                            canvas.translate(24, h - height - 10);
+                            textPaint.setColor(colorTertiaryContainer);
+                            canvas.drawRoundRect(-4, -1, width + 4, height + 1, height / 2, height / 2, textPaint);
+                            textPaint.color = colorOnTertiaryContainer;
+                            staticLayout.draw(canvas);
+                        }
+                    }
                 }))
             });
             if (data?.story) {

diff --git a/app/components/common/ListItem.svelte b/app/components/common/ListItem.svelte
@@ -2,7 +2,8 @@
     import { Canvas, CanvasView } from '@nativescript-community/ui-canvas';
     import { createEventDispatcher } from '@shared/utils/svelte/ui';
     import { colors, fontScale, fonts } from '~/variables';
-    $: ({ colorOnSurface, colorOnSurfaceVariant, colorPrimary, colorOutlineVariant } = $colors);
+    import { ListItem } from './ListItem';
+    $: ({ colorOnSurface, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors);
     const dispatch = createEventDispatcher();
     // technique for only specific properties to get updated on store change
     export let showBottomLine: boolean = false;
@@ -11,25 +12,38 @@
     export let fontSize: number = 17;
     export let fontWeight: string | number = 500;
     export let subtitleFontSize: number = 14;
-    export let title: string = null;
-    export let subtitle: string = null;
-    export let leftIcon: string = null;
     export let columns: string = '*';
     export let mainCol = 0;
     export let leftIconFonFamily: string = $fonts.mdi;
-    export let color: string = colorOnSurface;
-    export let subtitleColor: string = null;
-    export let onDraw: (event: { canvas: Canvas; object: CanvasView }) => void = null;
+    // export let color: string = colorOnSurface;
+    // export let subtitleColor: string = null;
+    export let item: ListItem;
+    export let onDraw: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void = null;
 </script>
 
-<canvasview {columns} padding="0 16 0 16" rippleColor={colorPrimary} on:tap={(event) => dispatch('tap', event)} {...$$restProps}>
-    <canvaslabel col={mainCol} color={color || colorOnSurface} on:draw={onDraw}>
-        <cgroup paddingBottom={subtitle ? 10 : 0} verticalAlignment="middle">
-            <cspan fontFamily={leftIconFonFamily} fontSize={iconFontSize * $fontScale} paddingLeft="10" text={leftIcon} visibility={leftIcon ? 'visible' : 'hidden'} width={iconFontSize * 2} />
+<canvasview {columns} padding="0 16 0 16" rippleColor={item.rippleColor || colorPrimary} on:tap={(event) => dispatch('tap', event)} {...$$restProps}>
+    <canvaslabel
+        col={mainCol}
+        color={item.color || colorOnSurface}
+        on:draw={(event) => {
+            (item.onDraw || onDraw)?.(item, event);
+        }}>
+        <cgroup paddingBottom={item.subtitle ? 10 : 0} verticalAlignment="middle">
+            <cspan
+                fontFamily={leftIconFonFamily}
+                fontSize={(item.iconFontSize || iconFontSize) * $fontScale}
+                paddingLeft="10"
+                text={item.icon}
+                visibility={item.icon ? 'visible' : 'hidden'}
+                width={(item.iconFontSize || iconFontSize) * 2} />
         </cgroup>
-        <cgroup paddingLeft={(leftIcon ? iconFontSize * 2 : 0) + extraPaddingLeft} textAlignment="left" verticalAlignment="middle">
-            <cspan fontSize={fontSize * $fontScale} {fontWeight} text={title} />
-            <cspan color={subtitleColor || colorOnSurfaceVariant} fontSize={subtitleFontSize * $fontScale} text={subtitle ? '\n' + subtitle : ''} visibility={subtitle ? 'visible' : 'hidden'} />
+        <cgroup paddingLeft={(item.icon ? iconFontSize * 2 : 0) + extraPaddingLeft} textAlignment="left" verticalAlignment="middle">
+            <cspan fontSize={(item.fontSize || fontSize) * $fontScale} {fontWeight} text={item.title || item.name} />
+            <cspan
+                color={item.subtitleColor || colorOnSurfaceVariant}
+                fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale}
+                text={item.subtitle ? '\n' + item.subtitle : ''}
+                visibility={item.subtitle ? 'visible' : 'hidden'} />
         </cgroup>
     </canvaslabel>
     <slot />

diff --git a/app/components/common/ListItem.ts b/app/components/common/ListItem.ts
@@ -0,0 +1,19 @@
+import { Canvas, CanvasView } from "@nativescript-community/ui-canvas";
+
+export interface ListItem {
+    iconFontSize?: number;
+    subtitleFontSize?: number;
+    rightValue?: string | (() => string);
+    rightValueFontSize?: number;
+    fontSize?: number;
+    html?: any;
+    name?: string;
+    icon?: string;
+    color?: string | Color;
+    rippleColor?: string | Color;
+    title?: string;
+    subtitle?: string;
+    type?: string;
+    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
@@ -1,39 +1,29 @@
 <script context="module" lang="ts">
     import { Canvas, CanvasView, Paint } from '@nativescript-community/ui-canvas';
-    import { createEventDispatcher } from '@shared/utils/svelte/ui';
-    import { conditionalEvent } from '@shared/utils/svelte/ui';
+    import { conditionalEvent, createEventDispatcher } from '@shared/utils/svelte/ui';
     import { colors, fontScale } from '~/variables';
+    import { ListItem } from './ListItem';
     const linePaint = new Paint();
     linePaint.strokeWidth = 1;
 </script>
 
 <script lang="ts">
     const dispatch = createEventDispatcher();
     // technique for only specific properties to get updated on store change
-    let { colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors;
-    $: ({ colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors);
+    let { colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors;
+    $: ({ colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors);
 
     $: linePaint.color = colorOutlineVariant;
     export let showBottomLine: boolean = false;
     // export let iconFontSize: number = 24;
+    export let item: ListItem;
     export let fontSize: number = 17;
     export let fontWeight: any = 'normal';
     export let subtitleFontSize: number = 14;
-    export let title: string = null;
-    export let html: any = null;
-    export let text: any = null;
-    export let titleColor: string = null;
-    export let color: string = null;
-    export let subtitleColor: string = null;
-    export let subtitle: string = null;
-    // export let leftIcon: string = null;
-    export let rightValue: string | Function = null;
-    // const leftColumn = iconFontSize * 1.4 * $fontScale;
     export let columns: string = '*,auto';
-    // export let leftIconFonFamily: string = $fonts.mdi;
     export let mainCol = 0;
     export let onLinkTap: (event) => void = null;
-    export let onDraw: (event: { canvas: Canvas; object: CanvasView }) => void = null;
+    export let onDraw: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void = null;
 
     function draw(event: { canvas: Canvas; object: CanvasView }) {
         const canvas = event.canvas;
@@ -53,10 +43,10 @@
         //     // canvas.drawRect(0,0,leftColumn,  staticLayout.getHeight(), iconPaint);
         //     staticLayout.draw(canvas);
         // }
-        onDraw?.(event);
+        (item.onDraw || onDraw)?.(item, event);
     }
 
-    $: addedPadding = (subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
+    $: addedPadding = (item.subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
 </script>
 
 <!-- <gridlayout>
@@ -83,7 +73,7 @@
 <canvasview
     {columns}
     padding="0 16 0 16"
-    rippleColor={color || colorOnSurface}
+    rippleColor={item.color || colorOnSurface}
     on:tap={(event) => dispatch('tap', event)}
     on:longPress={(event) => dispatch('longPress', event)}
     on:draw={draw}
@@ -98,32 +88,32 @@
         width={iconFontSize * 2} /> -->
     <label
         col={mainCol}
-        color={titleColor || color || colorOnSurface}
+        color={item.titleColor || item.color || colorOnSurface}
         disableCss={true}
         fontSize={fontSize * $fontScale}
         {fontWeight}
-        {html}
+        html={item.html}
         paddingBottom={addedPadding}
         paddingTop={addedPadding}
-        {text}
+        text={item.text}
         textWrap={true}
         verticalTextAlignment="center"
         {...$$restProps?.titleProps}
         use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}>
-        <cspan text={title} />
-        <cspan color={subtitleColor || colorOnSurfaceVariant} fontSize={subtitleFontSize * $fontScale} text={subtitle ? '\n' + subtitle : null} />
+        <cspan text={item.title} />
+        <cspan color={item.subtitleColor || colorOnSurfaceVariant} fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale} text={item.subtitle ? '\n' + item.subtitle : null} />
     </label>
 
     <label
         col={1}
-        color={subtitleColor}
+        color={item.subtitleColor}
         disableCss={true}
-        fontSize={subtitleFontSize * $fontScale}
+        fontSize={(item.rightValueFontSize || subtitleFontSize) * $fontScale}
         marginLeft={16}
-        text={typeof rightValue === 'function' ? rightValue() : rightValue}
+        text={typeof item.rightValue === 'function' ? item.rightValue() : item.rightValue}
         textAlignment="right"
         verticalAlignment="middle"
-        visibility={!!rightValue ? 'visible' : 'collapse'}
+        visibility={!!item.rightValue ? 'visible' : 'collapse'}
         on:tap={(event) => dispatch('rightIconTap', event)} />
     <slot />
 </canvasview>
diff --git a/app/components/common/ListItemAutoSizeFull.svelte b/app/components/common/ListItemAutoSizeFull.svelte
@@ -1,39 +1,31 @@
 <script context="module" lang="ts">
     import { Canvas, CanvasView, Paint } from '@nativescript-community/ui-canvas';
-    import { createEventDispatcher } from '@shared/utils/svelte/ui';
-    import { conditionalEvent } from '@shared/utils/svelte/ui';
+    import { conditionalEvent, createEventDispatcher } from '@shared/utils/svelte/ui';
     import { colors, fontScale } from '~/variables';
+    import { ListItem } from './ListItem';
     const linePaint = new Paint();
     linePaint.strokeWidth = 1;
 </script>
 
 <script lang="ts">
     const dispatch = createEventDispatcher();
     // technique for only specific properties to get updated on store change
-    let { colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors;
-    $: ({ colorOutlineVariant, colorOnSurfaceVariant, colorPrimary, colorOnSurface, colorOnSurfaceDisabled } = $colors);
+    let { colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors;
+    $: ({ colorOnSurface, colorOnSurfaceDisabled, colorOnSurfaceVariant, colorOutlineVariant, colorPrimary } = $colors);
 
     $: linePaint.color = colorOutlineVariant;
     export let showBottomLine: boolean = false;
     // export let iconFontSize: number = 24;
     export let fontSize: number = 17;
     export let fontWeight: any = 'normal';
     export let subtitleFontSize: number = 14;
-    export let title: string = null;
-    export let html: any = null;
-    export let text: any = null;
     export let titleColor: string = null;
-    export let color: string = null;
     export let subtitleColor: string = null;
-    export let subtitle: string = null;
-    // export let leftIcon: string = null;
-    export let rightValue: string | Function = null;
-    // const leftColumn = iconFontSize * 1.4 * $fontScale;
     export let columns: string = '*,auto';
-    // export let leftIconFonFamily: string = $fonts.mdi;
     export let mainCol = 0;
+    export let item: ListItem;
     export let onLinkTap: (event) => void = null;
-    export let onDraw: (event: { canvas: Canvas; object: CanvasView }) => void = null;
+    export let onDraw: (item: ListItem, event: { canvas: Canvas; object: CanvasView }) => void = null;
 
     function draw(event: { canvas: Canvas; object: CanvasView }) {
         const canvas = event.canvas;
@@ -43,20 +35,10 @@
         if (showBottomLine) {
             event.canvas.drawLine(20, h - 1, w, h - 1, linePaint);
         }
-        // if (leftIcon) {
-        //     const fontSize = iconFontSize * $fontScale;
-        //     iconPaint.textSize = fontSize;
-        //     iconPaint.color = titleColor || color || colorOnSurface;
-        //     iconPaint.fontFamily = leftIconFonFamily;
-        //     const staticLayout = new StaticLayout(leftIcon, iconPaint, leftColumn, LayoutAlignment.ALIGN_CENTER, 1, 0, true);
-        //     canvas.translate(6, h / 2 - staticLayout.getHeight() / 2);
-        //     // canvas.drawRect(0,0,leftColumn,  staticLayout.getHeight(), iconPaint);
-        //     staticLayout.draw(canvas);
-        // }
-        onDraw?.(event);
+        (item.onDraw || onDraw)?.(item, event);
     }
 
-    $: addedPadding = (subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
+    $: addedPadding = (item.subtitle?.length > 0 ? 6 : 10) + (__ANDROID__ ? 8 : 12);
 </script>
 
 <!-- <gridlayout>
@@ -83,7 +65,7 @@
 <canvasview
     {columns}
     padding="0 16 0 16"
-    rippleColor={color || colorOnSurface}
+    rippleColor={item.rippleColor || item.color || colorOnSurface}
     on:tap={(event) => dispatch('tap', event)}
     on:longPress={(event) => dispatch('longPress', event)}
     on:draw={draw}
@@ -98,37 +80,37 @@
         width={iconFontSize * 2} /> -->
     <stacklayout col={mainCol} paddingBottom={addedPadding} paddingTop={addedPadding} verticalAlignment="center" {...$$restProps?.titleHolderProps}>
         <label
-            color={titleColor || color || colorOnSurface}
+            color={item.titleColor || item.color || titleColor || colorOnSurface}
             disableCss={true}
-            fontSize={fontSize * $fontScale}
+            fontSize={(item.fontSize || fontSize) * $fontScale}
             {fontWeight}
-            {html}
-            text={text || title}
+            html={item.html}
+            text={item.text || item.title || item.name}
             textWrap={true}
             {...$$restProps?.titleProps}
             use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}>
         </label>
         <label
-            color={subtitleColor || colorOnSurfaceVariant}
+            color={item.subtitleColor || subtitleColor || colorOnSurfaceVariant}
             disableCss={true}
-            fontSize={subtitleFontSize * $fontScale}
-            text={subtitle}
+            fontSize={(item.subtitleFontSize || subtitleFontSize) * $fontScale}
+            text={item.subtitle}
             textWrap={true}
             use:conditionalEvent={{ condition: !!onLinkTap, event: 'linkTap', callback: onLinkTap }}
             {...$$restProps.subtitleProps || {}}>
         </label>
     </stacklayout>
 
-    <label
+    <!-- <label
         col={1}
         color={subtitleColor}
         disableCss={true}
         fontSize={subtitleFontSize * $fontScale}
         marginLeft={16}
-        text={typeof rightValue === 'function' ? rightValue() : rightValue}
+        text={typeof item.rightValue === 'function' ? item.rightValue() : item.rightValue}
         textAlignment="right"
         verticalAlignment="middle"
-        visibility={!!rightValue ? 'visible' : 'collapse'}
-        on:tap={(event) => dispatch('rightIconTap', event)} />
+        visibility={!!item.rightValue ? 'visible' : 'collapse'}
+        on:tap={(event) => dispatch('rightIconTap', event)} /> -->
     <slot />
 </canvasview>