add Feedback buttons to submit to TIDB

src/assets/locales/en.json

@@ -977,7 +977,60 @@
     "skipTime": {
       "intro": "Skip Intro",
       "recap": "Skip Recap",
-      "credits": "Skip Credits"
+      "credits": "Skip Credits",
+      "feedback": {
+        "title": "Was this skip correct?",
+        "modal": {
+          "title": "Submit Timestamps to TheIntroDB",
+          "description": "Contribute to TheIntroDB by submitting accurate segment timestamps. All submissions are accepted by the community before being published.",
+          "segmentType": "Segment Type",
+          "types": {
+            "intro": "Intro",
+            "recap": "Recap",
+            "credits": "Credits"
+          },
+          "startTimeLabel": "Start (s)",
+          "endTimeLabel": "End (s)",
+          "placeholders": {
+            "start": {
+              "intro": "2:30 or 150 (leave empty for start at beginning)",
+              "recap": "2:30 or 150 (leave empty for start at beginning)",
+              "credits": "2:30 or 150 (required)"
+            },
+            "end": {
+              "intro": "3:30 or 210 (required)",
+              "recap": "3:30 or 210 (required)",
+              "credits": "3:30 or 210 (leave empty for end of media)"
+            }
+          },
+          "whenToTitle": "Timestamps guide:",
+          "whenToDesc": "Enter timestamps in seconds (e.g. 150), mm:ss format (e.g. 2:30), or hh:mm:ss format (e.g. 1:42:20). We'll automatically convert the format for you.",
+          "guide": {
+            "startLabel": "Start:",
+            "startDesc": "Required - when credits begin rolling",
+            "endLabel": "End:",
+            "endDesc": "Optional - empty if extends to end",
+            "durationLabel": "Duration:",
+            "durationDesc": "Min 5s if end provided",
+            "excludeLabel": "Exclude:",
+            "excludeDesc": "Post-credits scenes"
+          },
+          "cancel": "Cancel",
+          "submit": "Submit",
+          "submitting": "Submitting...",
+          "error": {
+            "tidbKey": "TIDB API key is not set",
+            "mediaInfo": "Media information is not available",
+            "endTime": "End time is required",
+            "startTime": "Start time is required",
+            "submission": "Error submitting timestamps",
+            "segment": "No segment selected"
+          },
+          "success": {
+            "title": "Submission Successful! Thanks!"
+          }
+        }
+      }
     }
   },
   "support": {
@@ -1203,6 +1256,10 @@
           "title": "Proxy TMDB",
           "description": "Only needed if you can't access TheMovieDB directly, such as if your ISP blocks it. It is recomended to disable the Discover section to improve performance with this."
         }
+      },
+      "tidb": {
+        "description": "Contribute to TheIntroDB by leaving feedback on intro, recap, and credits segments. <0>Learn more.</0>",
+        "tokenLabel": "API Key"
       }
     },
     "preferences": {

src/components/player/TIDBSubmissionForm.tsx

@@ -0,0 +1,354 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/buttons/Button";
+import { Dropdown } from "@/components/form/Dropdown";
+import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
+import { SegmentData } from "@/components/player/hooks/useSkipTime";
+import { AuthInputBox } from "@/components/text-inputs/AuthInputBox";
+import { Heading3, Paragraph } from "@/components/utils/Text";
+import { usePlayerStore } from "@/stores/player/store";
+import { usePreferencesStore } from "@/stores/preferences";
+import { submitIntro } from "@/utils/tidb";
+
+type SegmentType = "intro" | "recap" | "credits";
+
+// Helper function to parse time format (hh:mm:ss, mm:ss, or seconds)
+// Returns null if empty string, NaN if invalid, or number if valid
+function parseTimeToSeconds(timeStr: string): number | null {
+  if (!timeStr.trim()) return null;
+
+  // Check if it's in hh:mm:ss format
+  const hhmmssMatch = timeStr.match(/^(\d{1,2}):([0-5]?\d):([0-5]?\d)$/);
+  if (hhmmssMatch) {
+    const hours = parseInt(hhmmssMatch[1], 10);
+    const minutes = parseInt(hhmmssMatch[2], 10);
+    const seconds = parseInt(hhmmssMatch[3], 10);
+
+    // Validate reasonable bounds (max 99 hours, minutes/seconds 0-59)
+    if (hours > 99 || minutes > 59 || seconds > 59) {
+      return NaN; // Invalid format
+    }
+
+    return hours * 3600 + minutes * 60 + seconds;
+  }
+
+  // Check if it's in mm:ss format
+  const mmssMatch = timeStr.match(/^(\d{1,3}):([0-5]?\d)$/);
+  if (mmssMatch) {
+    const minutes = parseInt(mmssMatch[1], 10);
+    const seconds = parseInt(mmssMatch[2], 10);
+
+    // Validate reasonable bounds (max 999 minutes, seconds 0-59)
+    if (minutes > 999 || seconds > 59) {
+      return NaN; // Invalid format
+    }
+
+    return minutes * 60 + seconds;
+  }
+
+  // Otherwise, treat as plain seconds (but only if no colons in input)
+  if (timeStr.includes(":")) {
+    return NaN; // Invalid time format - has colons but didn't match time patterns
+  }
+  const parsed = parseFloat(timeStr);
+  if (
+    Number.isNaN(parsed) ||
+    !Number.isFinite(parsed) ||
+    parsed < 0 ||
+    parsed > 20000000
+  ) {
+    return NaN; // Invalid input
+  }
+
+  return parsed;
+}
+
+interface SubmissionFormProps {
+  segment: SegmentData;
+  onSuccess?: () => void;
+  onCancel?: () => void;
+}
+
+export function SubmissionForm({
+  segment,
+  onSuccess,
+  onCancel,
+}: SubmissionFormProps) {
+  const { t } = useTranslation();
+  const meta = usePlayerStore((s) => s.meta);
+  const tidbKey = usePreferencesStore((s) => s.tidbKey);
+  const submissionModal = useModal("tidb-submission");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [formData, setFormData] = useState<{
+    segment: SegmentType;
+    start: string;
+    end: string;
+  }>({
+    segment: segment.type as SegmentType,
+    start: "",
+    end: "",
+  });
+
+  // Pre-fill the form with current segment data
+  useEffect(() => {
+    if (segment) {
+      setFormData({
+        segment: segment.type as SegmentType,
+        start: segment.start_ms ? (segment.start_ms / 1000).toString() : "",
+        end: segment.end_ms ? (segment.end_ms / 1000).toString() : "",
+      });
+    }
+  }, [segment]);
+
+  // Show modal when component mounts
+  useEffect(() => {
+    submissionModal.show();
+  }, [submissionModal]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Check if form is valid
+    if (!formData.segment) {
+      // eslint-disable-next-line no-alert
+      alert(t("player.skipTime.feedback.modal.error.segment"));
+      return;
+    }
+
+    if (!tidbKey) {
+      // eslint-disable-next-line no-alert
+      alert(t("player.skipTime.feedback.modal.error.tidbKey"));
+      return;
+    }
+    if (!meta) {
+      // eslint-disable-next-line no-alert
+      alert(t("player.skipTime.feedback.modal.error.mediaInfo"));
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const startSeconds = parseTimeToSeconds(formData.start);
+      const endSeconds = parseTimeToSeconds(formData.end);
+
+      // Basic validation
+      if (formData.segment === "intro" || formData.segment === "recap") {
+        if (endSeconds === null || Number.isNaN(endSeconds)) {
+          // eslint-disable-next-line no-alert
+          alert(t("player.skipTime.feedback.modal.error.endTime"));
+          setIsSubmitting(false);
+          return;
+        }
+      } else if (formData.segment === "credits") {
+        if (startSeconds === null || Number.isNaN(startSeconds)) {
+          // eslint-disable-next-line no-alert
+          alert(t("player.skipTime.feedback.modal.error.startTime"));
+          setIsSubmitting(false);
+          return;
+        }
+      }
+
+      // Prepare submission data
+      const submissionData: any = {
+        tmdb_id: parseInt(meta.tmdbId.toString(), 10),
+        type: meta.type === "show" ? "tv" : "movie",
+        segment: formData.segment,
+      };
+
+      // Add season/episode for TV shows
+      if (meta.type === "show" && meta.season && meta.episode) {
+        submissionData.season = meta.season.number;
+        submissionData.episode = meta.episode.number;
+      }
+
+      // Set start_sec and end_sec based on segment type
+      if (formData.segment === "intro" || formData.segment === "recap") {
+        submissionData.start_sec = startSeconds !== null ? startSeconds : null;
+        submissionData.end_sec = endSeconds!;
+      } else if (formData.segment === "credits") {
+        submissionData.start_sec = startSeconds!;
+        submissionData.end_sec = endSeconds !== null ? endSeconds : null;
+      }
+
+      await submitIntro(submissionData, tidbKey);
+
+      // Success
+      submissionModal.hide();
+      if (onSuccess) onSuccess();
+    } catch (error) {
+      console.error("Error submitting:", error);
+      // eslint-disable-next-line no-alert
+      alert(
+        `${t("player.skipTime.feedback.modal.error.submission")}: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal id={submissionModal.id}>
+      <ModalCard className="!max-w-4xl max-h-[80vh] overflow-y-auto">
+        <Heading3 className="!mt-0 !mb-4">
+          {t("player.skipTime.feedback.modal.title")}
+        </Heading3>
+        <Paragraph className="!mt-1 !mb-6">
+          {t("player.skipTime.feedback.modal.description")}
+        </Paragraph>
+
+        <div className="space-y-4 mt-4">
+          {/* Section: Segment timestamps */}
+          <div>
+            <label
+              htmlFor="segment"
+              className="block text-sm font-medium text-white mb-1"
+            >
+              {t("player.skipTime.feedback.modal.segmentType")}
+              <span className="text-red-500 ml-1">*</span>
+            </label>
+            <Dropdown
+              options={[
+                {
+                  id: "intro",
+                  name: t("player.skipTime.feedback.modal.types.intro"),
+                },
+                {
+                  id: "recap",
+                  name: t("player.skipTime.feedback.modal.types.recap"),
+                },
+                {
+                  id: "credits",
+                  name: t("player.skipTime.feedback.modal.types.credits"),
+                },
+              ]}
+              selectedItem={{
+                id: formData.segment,
+                name:
+                  formData.segment === "intro"
+                    ? t("player.skipTime.feedback.modal.types.intro")
+                    : formData.segment === "recap"
+                      ? t("player.skipTime.feedback.modal.types.recap")
+                      : t("player.skipTime.feedback.modal.types.credits"),
+              }}
+              setSelectedItem={(item) =>
+                setFormData({ ...formData, segment: item.id as SegmentType })
+              }
+            />
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label
+                  htmlFor="start"
+                  className="block text-sm font-medium text-white mb-1"
+                >
+                  {t("player.skipTime.feedback.modal.startTimeLabel")}
+                  {formData.segment === "credits" ? (
+                    <span className="text-red-500 ml-1">*</span>
+                  ) : null}
+                </label>
+                <AuthInputBox
+                  value={formData.start}
+                  onChange={(value) =>
+                    setFormData({ ...formData, start: value })
+                  }
+                  placeholder={t(
+                    `player.skipTime.feedback.modal.placeholders.start.${formData.segment}`,
+                  )}
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="end"
+                  className="block text-sm font-medium text-white mb-1"
+                >
+                  {t("player.skipTime.feedback.modal.endTimeLabel")}
+                  {formData.segment === "intro" ||
+                  formData.segment === "recap" ? (
+                    <span className="text-red-500 ml-1">*</span>
+                  ) : null}
+                </label>
+                <AuthInputBox
+                  value={formData.end}
+                  onChange={(value) => setFormData({ ...formData, end: value })}
+                  placeholder={t(
+                    `player.skipTime.feedback.modal.placeholders.end.${formData.segment}`,
+                  )}
+                />
+              </div>
+            </div>
+
+            {/* Timing Guidance Section */}
+            <div className="mt-6 p-4 bg-pill-background rounded-lg">
+              <h3 className="font-semibold text-white mb-3">
+                {t("player.skipTime.feedback.modal.whenToTitle")}
+              </h3>
+
+              <p className="text-sm text-gray-300">
+                {t("player.skipTime.feedback.modal.whenToDesc")}
+              </p>
+
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 my-4">
+                <div>
+                  <h4 className="font-medium mb-1">
+                    {t("player.skipTime.feedback.modal.guide.startLabel")}
+                  </h4>
+                  <p className="text-xs">
+                    {t("player.skipTime.feedback.modal.guide.startDesc")}
+                  </p>
+                </div>
+                <div>
+                  <h4 className="font-medium mb-1">
+                    {t("player.skipTime.feedback.modal.guide.endLabel")}
+                  </h4>
+                  <p className="text-xs">
+                    {t("player.skipTime.feedback.modal.guide.endDesc")}
+                  </p>
+                </div>
+                <div>
+                  <h4 className="font-medium mb-1">
+                    {t("player.skipTime.feedback.modal.guide.durationLabel")}
+                  </h4>
+                  <p className="text-xs">
+                    {t("player.skipTime.feedback.modal.guide.durationDesc")}
+                  </p>
+                </div>
+                <div>
+                  <h4 className="font-medium mb-1">
+                    {t("player.skipTime.feedback.modal.guide.excludeLabel")}
+                  </h4>
+                  <p className="text-xs">
+                    {t("player.skipTime.feedback.modal.guide.excludeDesc")}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex gap-2 pt-4 justify-between">
+              <Button
+                theme="secondary"
+                onClick={() => {
+                  submissionModal.hide();
+                  if (onCancel) onCancel();
+                }}
+                disabled={isSubmitting}
+              >
+                {t("player.skipTime.feedback.modal.cancel")}
+              </Button>
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="bg-buttons-purple hover:bg-buttons-purpleHover disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded font-medium transition-colors pointer-events-auto"
+              >
+                {isSubmitting
+                  ? t("player.skipTime.feedback.modal.submitting")
+                  : t("player.skipTime.feedback.modal.submit")}
+              </button>
+            </div>
+          </form>
+        </div>
+      </ModalCard>
+    </Modal>
+  );
+}

src/components/player/atoms/SkipSegmentButton.tsx

@@ -76,6 +76,7 @@ function SkipSegmentButton(props: {
   segments: SegmentData[];
   inControl: boolean;
   onChangeMeta?: (meta: PlayerMeta) => void;
+  onSkipTriggered?: (segment: SegmentData, skipTime: number) => void;
 }) {
   const { t } = useTranslation();
   const time = usePlayerStore((s) => s.progress.time);
@@ -134,10 +135,15 @@ function SkipSegmentButton(props: {
           : undefined,
       });
 
+      // Notify parent that skip was triggered
+      if (props.onSkipTriggered) {
+        props.onSkipTriggered(segment, targetTime);
+      }
+
       // eslint-disable-next-line no-console
       console.log(`Skip ${segment.type} button used: ${skipDuration}s total`);
     },
-    [display, time, _duration, addSkipEvent, meta],
+    [display, time, _duration, addSkipEvent, meta, props],
   );
 
   // Show NextEpisodeButton instead of credits skip button for TV shows when credits end at video end

src/components/player/atoms/TIDBSubmissionSuccessPopout.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from "react-i18next";
+
+import { Icon, Icons } from "@/components/Icon";
+import { Flare } from "@/components/utils/Flare";
+import { Transition } from "@/components/utils/Transition";
+import { useOverlayStack } from "@/stores/interface/overlayStack";
+
+export function TIDBSubmissionSuccessPopout() {
+  const { t } = useTranslation();
+  const currentOverlay = useOverlayStack((s) => s.currentOverlay);
+
+  return (
+    <Transition
+      animation="slide-down"
+      show={currentOverlay === "tidb-submission-success"}
+      className="absolute inset-x-0 top-4 flex justify-center pointer-events-none"
+    >
+      <Flare.Base className="hover:flare-enabled pointer-events-auto bg-video-context-background pl-4 pr-6 py-3 group w-80 h-full rounded-lg transition-colors text-video-context-type-main">
+        <Flare.Light
+          enabled
+          flareSize={200}
+          cssColorVar="--colors-video-context-light"
+          backgroundClass="bg-video-context-background duration-100"
+          className="rounded-lg"
+        />
+        <Flare.Child className="flex items-center gap-3 pointer-events-auto relative transition-transform">
+          <Icon className="text-green-500" icon={Icons.CHECKMARK} />
+          <span className="font-medium">
+            {t("player.skipTime.feedback.modal.success.title")}
+          </span>
+        </Flare.Child>
+      </Flare.Base>
+    </Transition>
+  );
+}

src/components/player/atoms/ThumbsFeedback.tsx

@@ -0,0 +1,164 @@
+import classNames from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Icon, Icons } from "@/components/Icon";
+import { SegmentData } from "@/components/player/hooks/useSkipTime";
+import { SubmissionForm } from "@/components/player/TIDBSubmissionForm";
+import { Transition } from "@/components/utils/Transition";
+import { useOverlayStack } from "@/stores/interface/overlayStack";
+import { usePlayerStore } from "@/stores/player/store";
+import { usePreferencesStore } from "@/stores/preferences";
+
+interface ThumbsFeedbackProps {
+  controlsShowing: boolean;
+  feedbackData?: {
+    segment: SegmentData;
+    skipTime: number;
+  } | null;
+  onAction?: () => void;
+}
+
+export function ThumbsFeedback({
+  controlsShowing,
+  feedbackData,
+  onAction,
+}: ThumbsFeedbackProps) {
+  const { t } = useTranslation();
+  const time = usePlayerStore((s) => s.progress.time);
+  const tidbKey = usePreferencesStore((s) => s.tidbKey);
+
+  // State for feedback
+  const [showSubmissionModal, setShowSubmissionModal] = useState(false);
+  const feedbackTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (feedbackTimeoutRef.current) {
+        clearTimeout(feedbackTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Handle feedback data changes
+  useEffect(() => {
+    if (feedbackData) {
+      // Clear any existing timeout
+      if (feedbackTimeoutRef.current) {
+        clearTimeout(feedbackTimeoutRef.current);
+        feedbackTimeoutRef.current = null;
+      }
+
+      // Hide feedback after 5 seconds
+      feedbackTimeoutRef.current = setTimeout(() => {
+        onAction?.();
+      }, 5000);
+    }
+  }, [feedbackData, onAction]);
+
+  const handleThumbsUp = useCallback(() => {
+    if (feedbackTimeoutRef.current) {
+      clearTimeout(feedbackTimeoutRef.current);
+      feedbackTimeoutRef.current = null;
+    }
+    onAction?.();
+  }, [onAction]);
+
+  const handleThumbsDown = useCallback(() => {
+    if (feedbackTimeoutRef.current) {
+      clearTimeout(feedbackTimeoutRef.current);
+      feedbackTimeoutRef.current = null;
+    }
+    setShowSubmissionModal(true);
+  }, []);
+
+  const setCurrentOverlay = useOverlayStack((s) => s.setCurrentOverlay);
+
+  const handleSubmissionSuccess = useCallback(() => {
+    setShowSubmissionModal(false);
+    setCurrentOverlay("tidb-submission-success");
+    onAction?.();
+  }, [onAction, setCurrentOverlay]);
+
+  const handleSubmissionCancel = useCallback(() => {
+    setShowSubmissionModal(false);
+    onAction?.();
+  }, [onAction]);
+
+  // Don't show thumbs feedback if TIDB API key is not set
+  if (!tidbKey || tidbKey.trim() === "") {
+    return null;
+  }
+
+  // Only show feedback if we're within the 5-second window after skip
+  const shouldShowFeedback = !!(
+    feedbackData &&
+    time >= feedbackData.skipTime + 0.1 &&
+    time <= feedbackData.skipTime + 5
+  );
+
+  if (!shouldShowFeedback && !showSubmissionModal) return null;
+
+  let bottom = "bottom-[calc(6rem+env(safe-area-inset-bottom))]";
+  if (!controlsShowing) {
+    bottom = "bottom-[calc(3rem+env(safe-area-inset-bottom))]";
+  }
+
+  return (
+    <>
+      <div className="absolute right-[calc(3rem+env(safe-area-inset-right))] bottom-0 pointer-events-none">
+        <Transition
+          animation="fade"
+          show={shouldShowFeedback}
+          className="absolute right-0"
+        >
+          <div
+            className={classNames(
+              "absolute bottom-0 right-0 transition-[bottom] duration-200 flex flex-col items-end space-y-2",
+              bottom,
+            )}
+          >
+            <div className="text-sm font-medium text-white whitespace-nowrap">
+              {t("player.skipTime.feedback.title")}
+            </div>
+            <div className="flex items-center space-x-3 pointer-events-auto">
+              <button
+                type="button"
+                onClick={handleThumbsUp}
+                className={classNames(
+                  "h-10 w-10 rounded-full flex items-center justify-center pointer-events-auto",
+                  "bg-buttons-primary hover:bg-buttons-primaryHover text-buttons-primaryText",
+                  "scale-95 hover:scale-100 transition-all duration-200",
+                )}
+                aria-label="Thumbs up"
+              >
+                <Icon className="text-xl" icon={Icons.THUMBS_UP} />
+              </button>
+              <button
+                type="button"
+                onClick={handleThumbsDown}
+                className={classNames(
+                  "h-10 w-10 rounded-full flex items-center justify-center pointer-events-auto",
+                  "bg-buttons-primary hover:bg-buttons-primaryHover text-buttons-primaryText",
+                  "scale-95 hover:scale-100 transition-all duration-200",
+                )}
+                aria-label="Thumbs down"
+              >
+                <Icon className="text-xl" icon={Icons.THUMBS_DOWN} />
+              </button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+
+      {showSubmissionModal && feedbackData && (
+        <SubmissionForm
+          segment={feedbackData.segment}
+          onSuccess={handleSubmissionSuccess}
+          onCancel={handleSubmissionCancel}
+        />
+      )}
+    </>
+  );
+}

src/components/player/atoms/index.ts

@@ -19,3 +19,4 @@ export * from "./Chromecast";
 export * from "./CastingNotification";
 export * from "./Captions";
 export * from "./SpeedChangedPopout";
+export * from "./TIDBSubmissionSuccessPopout";

src/hooks/useSettingsState.ts

@@ -48,6 +48,7 @@ export function useSettingsState(
   febboxKey: string | null,
   debridToken: string | null,
   debridService: string,
+  tidbKey: string | null,
   profile:
     | {
         colorA: string;
@@ -98,6 +99,8 @@ export function useSettingsState(
     _resetdebridService,
     debridServiceChanged,
   ] = useDerived(debridService);
+  const [tidbKeyState, setTIDBKey, resetTIDBKey, tidbKeyChanged] =
+    useDerived(tidbKey);
   const [themeState, setTheme, resetTheme, themeChanged] = useDerived(theme);
   const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
   const resetPreviewTheme = useCallback(
@@ -272,6 +275,7 @@ export function useSettingsState(
     resetBackendUrl();
     resetFebboxKey();
     resetdebridToken();
+    resetTIDBKey();
     resetDeviceName();
     resetNickname();
     resetProfile();
@@ -312,6 +316,7 @@ export function useSettingsState(
     febboxKeyChanged ||
     debridTokenChanged ||
     debridServiceChanged ||
+    tidbKeyChanged ||
     profileChanged ||
     enableThumbnailsChanged ||
     enableAutoplayChanged ||
@@ -391,6 +396,11 @@ export function useSettingsState(
       set: setdebridService,
       changed: debridServiceChanged,
     },
+    tidbKey: {
+      state: tidbKeyState,
+      set: setTIDBKey,
+      changed: tidbKeyChanged,
+    },
     profile: {
       state: profileState,
       set: setProfileState,

src/pages/Settings.tsx

@@ -385,6 +385,9 @@ export function SettingsPage() {
   const debridService = usePreferencesStore((s) => s.debridService);
   const setdebridService = usePreferencesStore((s) => s.setdebridService);
 
+  const tidbKey = usePreferencesStore((s) => s.tidbKey);
+  const setTIDBKey = usePreferencesStore((s) => s.setTIDBKey);
+
   const enableThumbnails = usePreferencesStore((s) => s.enableThumbnails);
   const setEnableThumbnails = usePreferencesStore((s) => s.setEnableThumbnails);
 
@@ -551,6 +554,7 @@ export function SettingsPage() {
     febboxKey,
     debridToken,
     debridService,
+    tidbKey,
     account ? account.profile : undefined,
     enableThumbnails,
     enableAutoplay,
@@ -718,6 +722,7 @@ export function SettingsPage() {
     setFebboxKey(state.febboxKey.state);
     setdebridToken(state.debridToken.state);
     setdebridService(state.debridService.state);
+    setTIDBKey(state.tidbKey.state);
     setProxyTmdb(state.proxyTmdb.state);
     setEnableCarouselView(state.enableCarouselView.state);
     setEnableMinimalCards(state.enableMinimalCards.state);
@@ -761,6 +766,7 @@ export function SettingsPage() {
     setFebboxKey,
     setdebridToken,
     setdebridService,
+    setTIDBKey,
     setEnableAutoplay,
     setEnableSkipCredits,
     setEnableDiscover,
@@ -929,6 +935,8 @@ export function SettingsPage() {
               setdebridToken={state.debridToken.set}
               debridService={state.debridService.state}
               setdebridService={state.debridService.set}
+              tidbKey={state.tidbKey.state}
+              setTIDBKey={state.tidbKey.set}
               proxyTmdb={state.proxyTmdb.state}
               setProxyTmdb={state.proxyTmdb.set}
             />

src/pages/parts/player/PlayerPart.tsx

@@ -1,13 +1,17 @@
-import { ReactNode, useRef, useState } from "react";
+import { ReactNode, useCallback, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { BrandPill } from "@/components/layout/BrandPill";
 import { Player } from "@/components/player";
 import { SkipSegmentButton } from "@/components/player/atoms/SkipSegmentButton";
+import { ThumbsFeedback } from "@/components/player/atoms/ThumbsFeedback";
 import { UnreleasedEpisodeOverlay } from "@/components/player/atoms/UnreleasedEpisodeOverlay";
 import { WatchPartyStatus } from "@/components/player/atoms/WatchPartyStatus";
 import { useShouldShowControls } from "@/components/player/hooks/useShouldShowControls";
-import { useSkipTime } from "@/components/player/hooks/useSkipTime";
+import {
+  SegmentData,
+  useSkipTime,
+} from "@/components/player/hooks/useSkipTime";
 import { useIsMobile } from "@/hooks/useIsMobile";
 import { PlayerMeta, playerStatus } from "@/stores/player/slices/source";
 import { usePlayerStore } from "@/stores/player/store";
@@ -74,8 +78,25 @@ export function PlayerPart(props: PlayerPartProps) {
     }, 1000);
   };
 
+  // State for thumbs feedback
+  const [thumbsFeedbackData, setThumbsFeedbackData] = useState<{
+    segment: SegmentData;
+    skipTime: number;
+  } | null>(null);
+
   const segments = useSkipTime();
 
+  const handleSkipTriggered = useCallback(
+    (segment: SegmentData, skipTime: number) => {
+      setThumbsFeedbackData({ segment, skipTime });
+    },
+    [],
+  );
+
+  const handleThumbsFeedback = useCallback(() => {
+    setThumbsFeedbackData(null);
+  }, []);
+
   return (
     <Player.Container onLoad={props.onLoad} showingControls={showTargets}>
       {props.children}
@@ -238,6 +259,7 @@ export function PlayerPart(props: PlayerPartProps) {
       <Player.VolumeChangedPopout />
       <Player.SubtitleDelayPopout />
       <Player.SpeedChangedPopout />
+      <Player.TIDBSubmissionSuccessPopout />
       <UnreleasedEpisodeOverlay />
 
       <Player.NextEpisodeButton
@@ -251,6 +273,13 @@ export function PlayerPart(props: PlayerPartProps) {
         segments={segments}
         inControl={inControl}
         onChangeMeta={props.onMetaChange}
+        onSkipTriggered={handleSkipTriggered}
+      />
+
+      <ThumbsFeedback
+        controlsShowing={showTargets}
+        feedbackData={thumbsFeedbackData}
+        onAction={handleThumbsFeedback}
       />
     </Player.Container>
   );

src/pages/parts/settings/ConnectionsPart.tsx

@@ -3,6 +3,7 @@ import {
   SetStateAction,
   useCallback,
   useEffect,
+  useRef,
   useState,
 } from "react";
 import { Trans, useTranslation } from "react-i18next";
@@ -62,6 +63,11 @@ interface DebridProps {
   mode?: "onboarding" | "settings";
 }
 
+interface TIDBKeyProps {
+  tidbKey: string | null;
+  setTIDBKey: (value: string | null) => void;
+}
+
 function ProxyEdit({
   proxyUrls,
   setProxyUrls,
@@ -725,8 +731,53 @@ export function DebridEdit({
   return null;
 }
 
+export function TIDBEdit({ tidbKey, setTIDBKey }: TIDBKeyProps) {
+  const { t } = useTranslation();
+  const preferences = usePreferencesStore();
+  const initializedRef = useRef(false);
+
+  // Enable TIDB key when component loads
+  useEffect(() => {
+    if (!initializedRef.current && tidbKey === null && preferences.tidbKey) {
+      initializedRef.current = true;
+      setTIDBKey(preferences.tidbKey);
+    }
+  }, [tidbKey, preferences.tidbKey, setTIDBKey]);
+
+  return (
+    <SettingsCard>
+      <div className="my-3">
+        <p className="text-white font-bold mb-3">TheIntroDB</p>
+        <p className="max-w-[40rem] font-medium mb-6">
+          <Trans i18nKey="settings.connections.tidb.description">
+            <MwLink to="https://theintrodb.org/" />
+          </Trans>
+        </p>
+        <p className="text-white font-bold mb-3">
+          {t("settings.connections.tidb.tokenLabel")}
+        </p>
+        <div className="flex items-center w-full">
+          <AuthInputBox
+            onChange={(newToken) => {
+              setTIDBKey(newToken);
+            }}
+            value={tidbKey ?? ""}
+            placeholder="theintrodb:user..."
+            passwordToggleable
+            className="flex-grow"
+          />
+        </div>
+      </div>
+    </SettingsCard>
+  );
+}
+
 export function ConnectionsPart(
-  props: BackendEditProps & ProxyEditProps & FebboxKeyProps & DebridProps,
+  props: BackendEditProps &
+    ProxyEditProps &
+    FebboxKeyProps &
+    DebridProps &
+    TIDBKeyProps,
 ) {
   const { t } = useTranslation();
   return (
@@ -756,6 +807,7 @@ export function ConnectionsPart(
           setdebridService={props.setdebridService}
           mode="settings"
         />
+        <TIDBEdit tidbKey={props.tidbKey} setTIDBKey={props.setTIDBKey} />
       </div>
     </div>
   );

src/stores/interface/overlayStack.ts

@@ -3,7 +3,12 @@ import { useLocation } from "react-router-dom";
 import { create } from "zustand";
 import { immer } from "zustand/middleware/immer";
 
-type OverlayType = "volume" | "subtitle" | "speed" | null;
+type OverlayType =
+  | "volume"
+  | "subtitle"
+  | "speed"
+  | "tidb-submission-success"
+  | null;
 
 interface ModalData {
   id: number;

src/stores/preferences/index.tsx

@@ -29,6 +29,7 @@ export interface PreferencesStore {
   febboxUseMp4: boolean;
   debridToken: string | null;
   debridService: string;
+  tidbKey: string | null;
   enableLowPerformanceMode: boolean;
   enableNativeSubtitles: boolean;
   enableHoldToBoost: boolean;
@@ -59,6 +60,7 @@ export interface PreferencesStore {
   setFebboxUseMp4(v: boolean): void;
   setdebridToken(v: string | null): void;
   setdebridService(v: string): void;
+  setTIDBKey(v: string | null): void;
   setEnableLowPerformanceMode(v: boolean): void;
   setEnableNativeSubtitles(v: boolean): void;
   setEnableHoldToBoost(v: boolean): void;
@@ -93,6 +95,7 @@ export const usePreferencesStore = create(
       febboxUseMp4: false,
       debridToken: null,
       debridService: "realdebrid",
+      tidbKey: null,
       enableLowPerformanceMode: false,
       enableNativeSubtitles: false,
       enableHoldToBoost: true,
@@ -206,6 +209,11 @@ export const usePreferencesStore = create(
           s.debridService = v;
         });
       },
+      setTIDBKey(v) {
+        set((s) => {
+          s.tidbKey = v;
+        });
+      },
       setEnableLowPerformanceMode(v) {
         set((s) => {
           s.enableLowPerformanceMode = v;

src/utils/tidb.ts

@@ -0,0 +1,83 @@
+export type SegmentType = "intro" | "recap" | "credits";
+
+export interface SubmissionRequest {
+  tmdb_id: number;
+  type: "movie" | "tv";
+  segment: SegmentType;
+  season?: number;
+  episode?: number;
+  start_sec?: number | null;
+  end_sec?: number | null;
+  start_ms?: number | null;
+  end_ms?: number | null;
+  tvdb_id?: number;
+  imdb_id?: string;
+}
+
+export interface SubmissionResponse {
+  ok: boolean;
+  submission?: {
+    id: string;
+    tmdbId: number;
+    type: "movie" | "tv";
+    segment: SegmentType;
+    season?: number;
+    episode?: number;
+    startMs?: number | null;
+    endMs?: number | null;
+    status: "pending" | "accepted" | "rejected";
+    weight: number;
+  };
+}
+
+export interface ErrorResponse {
+  error: string;
+  details?: string;
+}
+
+export class TIDBError extends Error {
+  constructor(
+    message: string,
+    public statusCode?: number,
+    public details?: string,
+  ) {
+    super(message);
+    this.name = "TIDBError";
+  }
+}
+
+/**
+ * Submit segment timestamps to TheIntroDB API
+ */
+export async function submitIntro(
+  submission: SubmissionRequest,
+  apiKey: string,
+): Promise<SubmissionResponse> {
+  const response = await fetch("https://api.theintrodb.org/v1/submit", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify(submission),
+  });
+
+  if (!response.ok) {
+    let errorMessage = `HTTP ${response.status}`;
+    let details: string | undefined;
+
+    try {
+      const errorData: ErrorResponse = await response.json();
+      errorMessage = errorData.error;
+      details = errorData.details;
+    } catch {
+      // If we can't parse the error response, use the status text
+      errorMessage = response.statusText || errorMessage;
+    }
+
+    throw new TIDBError(errorMessage, response.status, details);
+  }
+
+  const data: SubmissionResponse = await response.json();
+  return data;
+}