feat: play the next video automatically when one ends

A toggle under Playback in Settings, off by default and remembered.

Verified offline with forced offline mode on: a downloaded video ran to
its end and the next one started by itself, 6/51 to 7/51, with no
network.

It follows the same list the Next button does, which already steps to
the next *playable* video — offline that is the next download, so it
plays through what is on the Mac one after another. Online it will
stream the next video, and the Settings text says so: a toggle that
quietly does nothing outside one hidden condition is how the subtitle
preference went wrong three times.

The last video in the list simply stops; there is nowhere to go and
Next is already absent there.

src/components/Settings.tsx

@@ -30,6 +30,8 @@ interface Props {
   onSubLang: (l: string) => void;
   hideShorts: boolean;
   onHideShorts: (v: boolean) => void;
+  autoplayNext: boolean;
+  onAutoplayNext: (v: boolean) => void;
   browser: string;
   onBrowser: (b: string) => void;
   onError: (message: string) => void;
@@ -58,6 +60,7 @@ export default function Settings({
   onClose, onImported, appearance, onAppearance, quality, onQuality,
   bulkLimit, onBulkLimit,
   streamQuality, onStreamQuality, subLang, onSubLang, hideShorts, onHideShorts,
+  autoplayNext, onAutoplayNext,
   browser, onBrowser, onError,
 }: Props) {
   const [prereqs, setPrereqs] = useState<Prereqs | null>(null);
@@ -301,6 +304,24 @@ export default function Settings({
               </p>
             </section>
 
+            <section className="border-b border-slate-200 px-5 py-4 dark:border-slate-800">
+              <SectionHeading>Playback</SectionHeading>
+              <label className="mt-2 flex cursor-pointer items-center justify-between gap-3">
+                <span className={LABEL}>Play next automatically</span>
+                <input
+                  type="checkbox"
+                  checked={autoplayNext}
+                  onChange={(e) => onAutoplayNext(e.target.checked)}
+                  className="size-4 cursor-pointer accent-sky-500"
+                />
+              </label>
+              <p className={`mt-2 ${HELP}`}>
+                When a video ends, the next one in the list starts on its own. Meant for
+                offline viewing, where it plays through your downloads one after another;
+                online it will stream the next video, and it stops at the end of the list.
+              </p>
+            </section>
+
             <section className="border-b border-slate-200 px-5 py-4 dark:border-slate-800">
               <SectionHeading>Sign in to YouTube</SectionHeading>
               <p className={`mt-1.5 ${HELP}`}>