Service Order: thumbnails, auto video times, and row-based drag & drop (#415)

- Rows show real media thumbnails: provider links are fetched fresh each
  page load (Dropbox links expire) and matched by providerContentPath or
  label; videos render a first frame via <video preload="metadata">
- Videos at 0:00 automatically get their measured duration saved on load;
  images stay at 0 (operator advances them) but display an italic ~5:00
  planning estimate that schedule math includes
- Drag & drop reworked: drag by handle only, every row is a drop target
  with a blue insertion line (no more layout-shifting drop boxes), drop
  onto a section header to add into that section, window edge auto-scroll
- ActionDialog trusts the file-name extension over URL sniffing so .mp4
  previews use the video player (provider links carry no extension)
- Add @stripe/* devDependencies (optional peer deps of apphelper that
  Vite 8 fails hard on during a fresh install)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: mbyrdLCS

package.json

@@ -46,6 +46,8 @@
     "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.59.1",
     "@rolldown/plugin-babel": "^0.2.3",
+    "@stripe/react-stripe-js": "^6.6.0",
+    "@stripe/stripe-js": "^9.8.0",
     "@tanstack/react-query-devtools": "^5.100.9",
     "@types/babel__core": "^7.20.5",
     "@types/react": "^19.2.14",

src/components/DraggableWrapper.tsx

@@ -8,17 +8,20 @@ type Props = {
   data: any;
   onDoubleClick?: () => void;
   draggingCallback?: (isDragging: boolean) => void;
+  /** When set, only the first descendant with this class starts a drag (the whole
+   * element still renders as the drag preview). Without it, the whole element drags. */
+  handleClassName?: string;
 };
 
 export function DraggableWrapper(props: Props) {
-  const { dndType, data, draggingCallback, onDoubleClick, children } = props;
+  const { dndType, data, draggingCallback, onDoubleClick, children, handleClassName } = props;
   const callbackRef = React.useRef(draggingCallback);
 
   useEffect(() => {
     callbackRef.current = draggingCallback;
   }, [draggingCallback]);
 
-  const [{ isDragging }, drag] = useDrag(
+  const [{ isDragging }, drag, preview] = useDrag(
     () => ({
       type: dndType,
       item: { data },
@@ -41,8 +44,16 @@ export function DraggableWrapper(props: Props) {
 
   return (
     <div
-      ref={(node) => { drag(node); }}
-      style={{ opacity, transition: "opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)", cursor: isDragging ? "grabbing" : "grab" }}
+      ref={(node) => {
+        if (handleClassName) {
+          preview(node);
+          const handle = node?.querySelector("." + handleClassName) as HTMLElement | null;
+          drag(handle || node);
+        } else {
+          drag(node);
+        }
+      }}
+      style={{ opacity, transition: "opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1)", ...(handleClassName ? {} : { cursor: isDragging ? "grabbing" : "grab" }) }}
       className="dragButton"
       onDoubleClick={onDoubleClick}
       data-testid="draggable-wrapper"

src/serving/components/ActionDialog.tsx

@@ -29,6 +29,13 @@ export const ActionDialog: React.FC<Props> = (props) => {
     fallbackUrl: props.downloadUrl
   });
 
+  // Provider download links often carry no file extension, so URL sniffing wrongly
+  // defaults videos to "image". The item name still has the extension — trust it.
+  const nameSaysVideo = /\.(mp4|webm|mov|m4v|avi|mkv)\s*$/i.test(props.contentName || "");
+  const effectiveMediaType = nameSaysVideo && (!content?.mediaType || content.mediaType === "image")
+    ? "video"
+    : content?.mediaType;
+
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       if (typeof event.data?.height === "number") {
@@ -48,7 +55,7 @@ export const ActionDialog: React.FC<Props> = (props) => {
       <DialogContent sx={{ p: 0, overflow: "hidden" }}>
         <ContentRenderer
           url={content?.url}
-          mediaType={content?.mediaType}
+          mediaType={effectiveMediaType}
           title={props.contentName}
           description={content?.description}
           loading={loading}

src/serving/components/LessonPreview.tsx

@@ -4,6 +4,7 @@ import { Locale } from "@churchapps/apphelper";
 import { type PlanItemInterface } from "../../helpers";
 import { getSectionDuration } from "./PlanUtils";
 import { PlanItem } from "./PlanItem";
+import { type ProviderMediaInfo } from "./planItemUtils";
 
 interface Props {
   lessonItems: PlanItemInterface[];
@@ -12,6 +13,7 @@ interface Props {
   associatedProviderId?: string;
   associatedContentPath?: string;
   ministryId?: string;
+  mediaLookup?: Record<string, ProviderMediaInfo>;
 }
 
 export const LessonPreview = memo((props: Props) => {
@@ -34,6 +36,7 @@ export const LessonPreview = memo((props: Props) => {
           associatedProviderId={props.associatedProviderId}
           associatedContentPath={props.associatedContentPath}
           ministryId={props.ministryId}
+          mediaLookup={props.mediaLookup}
         />
       );
       cumulativeTime += getSectionDuration(item);

src/serving/components/PlanItem.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { Box, Menu, MenuItem } from "@mui/material";
+import { Menu, MenuItem } from "@mui/material";
 import { FormatListBulleted as FormatListBulletedIcon, MenuBook as MenuBookIcon, MusicNote as MusicNoteIcon } from "@mui/icons-material";
 import { type PlanItemInterface } from "../../helpers";
 import { DraggableWrapper } from "../../components/DraggableWrapper";
-import { DroppableWrapper } from "../../components/DroppableWrapper";
+import { RowDropZone } from "./RowDropZone";
 import { type TimeInterface, type PlanItemTimeInterface } from "@churchapps/helpers";
 import { ApiHelper, Locale } from "@churchapps/apphelper";
 import { SongDialog } from "./SongDialog";
 import { LessonDialog } from "./LessonDialog";
-import { getNextChildSort } from "./planItemUtils";
+import { getNextChildSort, estimateSeconds, type ProviderMediaInfo } from "./planItemUtils";
 import { ActionDialog } from "./ActionDialog";
 import { ActionSelector } from "./ActionSelector";
 import { PlanItemHeader, PlanItemRow } from "./planItem/index";
@@ -29,6 +29,7 @@ interface Props {
   exclusions?: PlanItemTimeInterface[];
   selectedServiceTimeId?: string;
   excluded?: boolean;
+  mediaLookup?: Record<string, ProviderMediaInfo>;
 }
 
 export const PlanItem = React.memo((props: Props) => {
@@ -123,63 +124,34 @@ export const PlanItem = React.memo((props: Props) => {
     props.planItem.children?.forEach((c, index) => {
       const childStartTime = cumulativeTime;
       const childExcluded = c.itemType !== "header" && isChildExcluded(c.id || "");
+      const childPlanItem = (
+        <PlanItem key={c.id} planItem={c} setEditPlanItem={props.setEditPlanItem} readOnly={props.readOnly} showItemDrop={props.showItemDrop} onDragChange={props.onDragChange} onChange={props.onChange} startTime={childStartTime} associatedContentPath={props.associatedContentPath} associatedProviderId={props.associatedProviderId} ministryId={props.ministryId} serviceTime={props.serviceTime} exclusions={props.exclusions} selectedServiceTimeId={props.selectedServiceTimeId} excluded={childExcluded} mediaLookup={props.mediaLookup} />
+      );
       result.push(
         <React.Fragment key={c.id || `child-${index}`}>
-          {props.showItemDrop && (
-            <DroppableWrapper
+          {props.readOnly ? (
+            childPlanItem
+          ) : (
+            <RowDropZone
               accept="planItem"
-              onDrop={(item) => {
-                handleDrop(item, index + 0.5);
+              onDrop={(item, position) => {
+                handleDrop(item, index + (position === "before" ? 0.5 : 1.5));
               }}>
-              <Box
-                sx={{
-                  height: "30px",
-                  border: "2px dashed",
-                  borderColor: "primary.main",
-                  borderRadius: 1,
-                  backgroundColor: "primary.light",
-                  opacity: 0.3,
-                  mb: 0.5
-                }}
-              />
-            </DroppableWrapper>
+              <DraggableWrapper
+                dndType="planItem"
+                data={c}
+                handleClassName="dragHandle"
+                draggingCallback={(isDragging) => {
+                  if (props.onDragChange) props.onDragChange(isDragging);
+                }}>
+                {childPlanItem}
+              </DraggableWrapper>
+            </RowDropZone>
           )}
-
-          <DraggableWrapper
-            dndType="planItem"
-            data={c}
-            draggingCallback={(isDragging) => {
-              if (props.onDragChange) props.onDragChange(isDragging);
-            }}>
-            <PlanItem key={c.id} planItem={c} setEditPlanItem={props.setEditPlanItem} readOnly={props.readOnly} showItemDrop={props.showItemDrop} onDragChange={props.onDragChange} onChange={props.onChange} startTime={childStartTime} associatedContentPath={props.associatedContentPath} associatedProviderId={props.associatedProviderId} ministryId={props.ministryId} serviceTime={props.serviceTime} exclusions={props.exclusions} selectedServiceTimeId={props.selectedServiceTimeId} excluded={childExcluded} />
-          </DraggableWrapper>
         </React.Fragment>
       );
-      if (!childExcluded) cumulativeTime += c.seconds || 0;
+      if (!childExcluded) cumulativeTime += estimateSeconds(c, props.mediaLookup);
     });
-    if (props.showItemDrop) {
-      result.push(
-        <React.Fragment key="trailing-drop-zone">
-          <DroppableWrapper
-            accept="planItem"
-            onDrop={(item) => {
-              handleDrop(item, getNextChildSort(props.planItem.children));
-            }}>
-            <Box
-              sx={{
-                height: 30,
-                border: "2px dashed",
-                borderColor: "primary.main",
-                borderRadius: 1,
-                backgroundColor: "primary.light",
-                opacity: 0.3,
-                mb: 0.5
-              }}
-            />
-          </DroppableWrapper>
-        </React.Fragment>
-      );
-    }
     return result;
   };
 
@@ -191,6 +163,16 @@ export const PlanItem = React.memo((props: Props) => {
       readOnly={props.readOnly}
       onAddClick={(e) => setAnchorEl(e.currentTarget)}
       onEditClick={() => props.setEditPlanItem(props.planItem)}
+      wrapRow={props.readOnly ? undefined : (row) => (
+        <RowDropZone
+          accept="planItem"
+          mode="into"
+          onDrop={(item) => {
+            handleDrop(item, 0.5);
+          }}>
+          {row}
+        </RowDropZone>
+      )}
     >
       {getChildren()}
     </PlanItemHeader>
@@ -205,6 +187,7 @@ export const PlanItem = React.memo((props: Props) => {
       readOnly={props.readOnly}
       onLabelClick={onLabelClick}
       onEditClick={() => props.setEditPlanItem(props.planItem)}
+      mediaLookup={props.mediaLookup}
     />
   );
 

src/serving/components/RowDropZone.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { useDrop } from "react-dnd";
+
+interface Props {
+  accept: string;
+  /** "reorder": drop above/below based on cursor half, shown as an insertion line.
+   *  "into": whole child is one target (e.g. a section header = add to that section). */
+  mode?: "reorder" | "into";
+  onDrop: (data: any, position: "before" | "after") => void;
+  children: React.ReactNode;
+}
+
+/**
+ * Makes its child row a drop target for plan item drags. Unlike separate drop-zone
+ * boxes, rows are always targets, so nothing shifts or appears when a drag starts —
+ * a blue insertion line previews exactly where the item will land.
+ */
+export const RowDropZone: React.FC<Props> = ({ accept, mode = "reorder", onDrop, children }) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [hoverHalf, setHoverHalf] = React.useState<"before" | "after">("before");
+
+  const getHalf = (monitor: { getClientOffset: () => { y: number } | null }): "before" | "after" => {
+    const rect = ref.current?.getBoundingClientRect();
+    const y = monitor.getClientOffset()?.y;
+    if (!rect || y == null) return "after";
+    return y < rect.top + rect.height / 2 ? "before" : "after";
+  };
+
+  const [{ isOver }, drop] = useDrop(() => ({
+    accept,
+    hover: (_item: any, monitor: any) => {
+      if (mode === "reorder") setHoverHalf(getHalf(monitor));
+    },
+    drop: (item: any, monitor: any) => {
+      onDrop(item, mode === "reorder" ? getHalf(monitor) : "after");
+    },
+    collect: (monitor) => ({ isOver: !!monitor.isOver({ shallow: true }) })
+  }), [accept, mode, onDrop]);
+
+  drop(ref);
+
+  return (
+    <div
+      ref={ref}
+      style={{
+        position: "relative",
+        ...(mode === "into" && isOver
+          ? { outline: "2px solid var(--c1)", outlineOffset: -2, borderRadius: 4, background: "rgba(21, 101, 192, 0.06)" }
+          : {})
+      }}
+    >
+      {children}
+      {isOver && mode === "reorder" && (
+        <div
+          style={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            [hoverHalf === "before" ? "top" : "bottom"]: -2,
+            height: 4,
+            background: "var(--c1)",
+            borderRadius: 2,
+            zIndex: 10,
+            pointerEvents: "none",
+            boxShadow: "0 0 4px rgba(21, 101, 192, 0.6)"
+          }}
+        />
+      )}
+    </div>
+  );
+};