Add import and export functions for settings to JSON

package.json

@@ -68,6 +68,7 @@
     "semver": "^7.5.4",
     "slugify": "^1.6.6",
     "subsrt-ts": "^2.1.2",
+    "zod": "^3.22.4",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -138,6 +138,9 @@ dependencies:
   subsrt-ts:
     specifier: ^2.1.2
     version: 2.1.2
+  zod:
+    specifier: ^3.22.4
+    version: 3.22.4
   zustand:
     specifier: ^4.4.7
     version: 4.4.7(@types/react@18.2.45)(immer@10.0.3)(react@18.2.0)
@@ -7370,7 +7373,6 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
-    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0
@@ -7527,6 +7529,10 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
+  /zod@3.22.4:
+    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+    dev: false
+
   /zustand@4.4.7(@types/react@18.2.45)(immer@10.0.3)(react@18.2.0):
     resolution: {integrity: sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==}
     engines: {node: '>=12.7.0'}

src/assets/locales/en.json

@@ -100,7 +100,8 @@
       "onboarding": "Setup",
       "pagetitle": "{{title}} - movie-web",
       "register": "Register",
-      "settings": "Settings"
+      "settings": "Settings",
+      "migration": "Migration"
     }
   },
   "home": {
@@ -153,6 +154,27 @@
       "show": "Show"
     }
   },
+  "migration": {
+    "start": {
+      "title": "Migrate your data",
+      "explainer": "If you wish to migrate or backup your data, you can do so using the options below. This will allow you to keep your data when you switch backend servers.",
+      "options": {
+        "or": "or",
+        "direct": {
+          "description": "This will directly migrate your data to the new server. This is the fastest option. <br /><br />This option allows you to keep your passphrase the same!",
+          "title": "Direct migration",
+          "quality": "Easiest and fastest",
+          "action": "Transfer data"
+        },
+        "download": {
+          "description": "This will download your data to your device. You can then upload it to the new server or just keep it for safekeeping.",
+          "title": "Download data",
+          "quality": "More technical",
+          "action": "Download data"
+        }
+      }
+    }
+  },
   "navigation": {
     "banner": {
       "offline": "Check your internet connection"
@@ -216,6 +238,7 @@
     "start": {
       "explainer": "To get the best streams possible, you will need to choose which streaming method you want to use.",
       "options": {
+        "or": "or",
         "default": {
           "text": "I don't want good quality streams,<0 /> <1>use the default setup</1>"
         },

src/backend/accounts/crypto.ts

@@ -21,9 +21,7 @@ export function verifyValidMnemonic(mnemonic: string) {
   return validateMnemonic(mnemonic, wordlist);
 }
 
-export async function keysFromMnemonic(mnemonic: string): Promise<Keys> {
-  const seed = await seedFromMnemonic(mnemonic);
-
+export async function keysFromSeed(seed: Uint8Array): Promise<Keys> {
   const { privateKey, publicKey } = forge.pki.ed25519.generateKeyPair({
     seed,
   });
@@ -35,6 +33,12 @@ export async function keysFromMnemonic(mnemonic: string): Promise<Keys> {
   };
 }
 
+export async function keysFromMnemonic(mnemonic: string): Promise<Keys> {
+  const seed = await seedFromMnemonic(mnemonic);
+
+  return keysFromSeed(seed);
+}
+
 export function genMnemonic(): string {
   return generateMnemonic(wordlist);
 }

src/components/Icon.tsx

@@ -64,6 +64,8 @@ export enum Icons {
   DONATION = "donation",
   CIRCLE_QUESTION = "circle_question",
   BRUSH = "brush",
+  CLOUD_ARROW_UP = "cloud_arrow_up",
+  FILE_ARROW_DOWN = "file_arrow_down",
 }
 
 export interface IconProps {
@@ -134,6 +136,8 @@ const iconList: Record<Icons, string> = {
   donation: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="currentColor" d="M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z"/></svg>`,
   circle_question: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="currentColor" d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
   brush: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M162.4 6c-1.5-3.6-5-6-8.9-6h-19c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6H48C21.5 0 0 21.5 0 48V224v22.4V256H9.6 374.4 384v-9.6V224 48c0-26.5-21.5-48-48-48H230.5c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 288v32c0 35.3 28.7 64 64 64h64v64c0 35.3 28.7 64 64 64s64-28.7 64-64V384h64c35.3 0 64-28.7 64-64V288H0zM192 432a16 16 0 1 1 0 32 16 16 0 1 1 0-32z" fill="currentColor"/></svg>`,
+  cloud_arrow_up: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-217c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l39-39V392c0 13.3 10.7 24 24 24s24-10.7 24-24V257.9l39 39c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0l-80 80z" fill="currentColor"/></svg>`,
+  file_arrow_down: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM216 232V334.1l31-31c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-72 72c-9.4 9.4-24.6 9.4-33.9 0l-72-72c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l31 31V232c0-13.3 10.7-24 24-24s24 10.7 24 24z" fill="currentColor"/></svg>`,
 };
 
 function ChromeCastButton() {

src/components/layout/VerticalLine.tsx

@@ -0,0 +1,9 @@
+import classNames from "classnames";
+
+export function VerticalLine(props: { className?: string }) {
+  return (
+    <div className={classNames("w-full grid justify-center", props.className)}>
+      <div className="w-px h-10 bg-onboarding-divider" />
+    </div>
+  );
+}

src/hooks/auth/useMigration.ts

@@ -0,0 +1,125 @@
+import { useCallback } from "react";
+
+import { SessionResponse } from "@/backend/accounts/auth";
+import { bookmarkMediaToInput } from "@/backend/accounts/bookmarks";
+import {
+  base64ToBuffer,
+  bytesToBase64,
+  bytesToBase64Url,
+  encryptData,
+  keysFromMnemonic,
+  keysFromSeed,
+  signChallenge,
+} from "@/backend/accounts/crypto";
+import { importBookmarks, importProgress } from "@/backend/accounts/import";
+import { getLoginChallengeToken, loginAccount } from "@/backend/accounts/login";
+import { progressMediaItemToInputs } from "@/backend/accounts/progress";
+import {
+  getRegisterChallengeToken,
+  registerAccount,
+} from "@/backend/accounts/register";
+import { removeSession } from "@/backend/accounts/sessions";
+import { getSettings } from "@/backend/accounts/settings";
+import {
+  UserResponse,
+  getBookmarks,
+  getProgress,
+  getUser,
+} from "@/backend/accounts/user";
+import { useAuthData } from "@/hooks/auth/useAuthData";
+import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
+import { AccountWithToken, useAuthStore } from "@/stores/auth";
+import { BookmarkMediaItem, useBookmarkStore } from "@/stores/bookmarks";
+import { ProgressMediaItem, useProgressStore } from "@/stores/progress";
+
+export interface RegistrationData {
+  recaptchaToken?: string;
+  mnemonic: string;
+  userData: {
+    device: string;
+    profile: {
+      colorA: string;
+      colorB: string;
+      icon: string;
+    };
+  };
+}
+
+export interface LoginData {
+  mnemonic: string;
+  userData: {
+    device: string;
+  };
+}
+
+export function useMigration() {
+  const currentAccount = useAuthStore((s) => s.account);
+  const progress = useProgressStore((s) => s.items);
+  const bookmarks = useBookmarkStore((s) => s.bookmarks);
+  const { login: userDataLogin } = useAuthData();
+
+  const importData = async (
+    backendUrl: string,
+    account: AccountWithToken,
+    progressItems: Record<string, ProgressMediaItem>,
+    bookmarkItems: Record<string, BookmarkMediaItem>,
+  ) => {
+    if (
+      Object.keys(progressItems).length === 0 &&
+      Object.keys(bookmarkItems).length === 0
+    ) {
+      return;
+    }
+
+    const progressInputs = Object.entries(progressItems).flatMap(
+      ([tmdbId, item]) => progressMediaItemToInputs(tmdbId, item),
+    );
+
+    const bookmarkInputs = Object.entries(bookmarkItems).map(([tmdbId, item]) =>
+      bookmarkMediaToInput(tmdbId, item),
+    );
+
+    await Promise.all([
+      importProgress(backendUrl, account, progressInputs),
+      importBookmarks(backendUrl, account, bookmarkInputs),
+    ]);
+  };
+
+  const migrate = useCallback(
+    async (backendUrl: string, recaptchaToken: string) => {
+      if (!currentAccount) return;
+
+      const { challenge } = await getRegisterChallengeToken(
+        backendUrl,
+        recaptchaToken,
+      );
+      const keys = await keysFromSeed(base64ToBuffer(currentAccount.seed));
+      const signature = await signChallenge(keys, challenge);
+      const registerResult = await registerAccount(backendUrl, {
+        challenge: {
+          code: challenge,
+          signature,
+        },
+        publicKey: bytesToBase64Url(keys.publicKey),
+        device: await encryptData(currentAccount.deviceName, keys.seed),
+        profile: currentAccount.profile,
+      });
+
+      const account = await userDataLogin(
+        registerResult,
+        registerResult.user,
+        registerResult.session,
+        bytesToBase64(keys.seed),
+      );
+
+      await importData(backendUrl, account, progress, bookmarks);
+
+      return account;
+    },
+    [currentAccount, userDataLogin, bookmarks, progress],
+  );
+
+  return {
+    migrate,
+  };
+}

src/hooks/useSettingsExport.ts

@@ -0,0 +1,103 @@
+import { useCallback } from "react";
+
+import { Settings } from "@/hooks/useSettingsImport";
+import { useAuthStore } from "@/stores/auth";
+import { useBookmarkStore } from "@/stores/bookmarks";
+import { useLanguageStore } from "@/stores/language";
+import { usePreferencesStore } from "@/stores/preferences";
+import { useProgressStore } from "@/stores/progress";
+import { useQualityStore } from "@/stores/quality";
+import { useSubtitleStore } from "@/stores/subtitles";
+import { useThemeStore } from "@/stores/theme";
+import { useVolumeStore } from "@/stores/volume";
+
+export function useSettingsExport() {
+  const authStore = useAuthStore();
+  const bookmarksStore = useBookmarkStore();
+  const languageStore = useLanguageStore();
+  const preferencesStore = usePreferencesStore();
+  const progressStore = useProgressStore();
+  const qualityStore = useQualityStore();
+  const subtitleStore = useSubtitleStore();
+  const themeStore = useThemeStore();
+  const volumeStore = useVolumeStore();
+
+  const collect = useCallback(
+    (includeAuth: boolean): Settings => {
+      return {
+        auth: {
+          account: includeAuth ? authStore.account : undefined,
+          backendUrl: authStore.backendUrl,
+          proxySet: authStore.proxySet,
+        },
+        bookmarks: {
+          bookmarks: bookmarksStore.bookmarks,
+        },
+        language: {
+          language: languageStore.language,
+        },
+        preferences: {
+          enableThumbnails: preferencesStore.enableThumbnails,
+        },
+        progress: {
+          items: progressStore.items,
+        },
+        quality: {
+          quality: {
+            automaticQuality: qualityStore.quality.automaticQuality,
+            lastChosenQuality: qualityStore.quality.lastChosenQuality,
+          },
+        },
+        subtitles: {
+          lastSelectedLanguage: subtitleStore.lastSelectedLanguage,
+          styling: {
+            backgroundBlur: subtitleStore.styling.backgroundBlur,
+            backgroundOpacity: subtitleStore.styling.backgroundOpacity,
+            color: subtitleStore.styling.color,
+            size: subtitleStore.styling.size,
+          },
+          overrideCasing: subtitleStore.overrideCasing,
+          delay: subtitleStore.delay,
+        },
+        theme: {
+          theme: themeStore.theme,
+        },
+        volume: {
+          volume: volumeStore.volume,
+        },
+      };
+    },
+    [
+      authStore,
+      bookmarksStore,
+      languageStore,
+      preferencesStore,
+      progressStore,
+      qualityStore,
+      subtitleStore,
+      themeStore,
+      volumeStore,
+    ],
+  );
+
+  const exportSettings = useCallback(
+    (includeAuth: boolean) => {
+      const output = JSON.stringify(collect(includeAuth), null, 2);
+
+      const blob = new Blob([output], { type: "application/json" });
+      const elem = window.document.createElement("a");
+      elem.href = window.URL.createObjectURL(blob);
+
+      const date = new Date();
+      elem.download = `movie-web settings - ${
+        date.toISOString().split("T")[0]
+      }.json`;
+      document.body.appendChild(elem);
+      elem.click();
+      document.body.removeChild(elem);
+    },
+    [collect],
+  );
+
+  return exportSettings;
+}

src/hooks/useSettingsImport.ts

@@ -0,0 +1,234 @@
+import { useCallback } from "react";
+import { z } from "zod";
+
+import { useAuthStore } from "@/stores/auth";
+import { useBookmarkStore } from "@/stores/bookmarks";
+import { useLanguageStore } from "@/stores/language";
+import { usePreferencesStore } from "@/stores/preferences";
+import { useProgressStore } from "@/stores/progress";
+import { useQualityStore } from "@/stores/quality";
+import { useSubtitleStore } from "@/stores/subtitles";
+import { useThemeStore } from "@/stores/theme";
+import { useVolumeStore } from "@/stores/volume";
+
+const settingsSchema = z.object({
+  auth: z.object({
+    account: z
+      .object({
+        profile: z.object({
+          colorA: z.string(),
+          colorB: z.string(),
+          icon: z.string(),
+        }),
+        sessionId: z.string(),
+        userId: z.string(),
+        token: z.string(),
+        seed: z.string(),
+        deviceName: z.string(),
+      })
+      .nullish(),
+    backendUrl: z.string().nullable(),
+    proxySet: z.array(z.string()).nullable(),
+  }),
+  bookmarks: z.object({
+    bookmarks: z.record(
+      z.object({
+        title: z.string(),
+        year: z.number().optional(),
+        poster: z.string().optional(),
+        type: z.enum(["show", "movie"]),
+        updatedAt: z.number(),
+      }),
+    ),
+  }),
+  language: z.object({
+    language: z.string(),
+  }),
+  preferences: z.object({
+    enableThumbnails: z.boolean(),
+  }),
+  progress: z.object({
+    items: z.record(
+      z.object({
+        title: z.string(),
+        year: z.number().optional(),
+        poster: z.string().optional(),
+        type: z.enum(["show", "movie"]),
+        updatedAt: z.number(),
+        progress: z
+          .object({
+            watched: z.number(),
+            duration: z.number(),
+          })
+          .optional(),
+        seasons: z.record(
+          z.object({
+            title: z.string(),
+            number: z.number(),
+            id: z.string(),
+          }),
+        ),
+        episodes: z.record(
+          z.object({
+            title: z.string(),
+            number: z.number(),
+            id: z.string(),
+            seasonId: z.string(),
+            updatedAt: z.number(),
+            progress: z.object({
+              watched: z.number(),
+              duration: z.number(),
+            }),
+          }),
+        ),
+      }),
+    ),
+  }),
+  quality: z.object({
+    quality: z.object({
+      automaticQuality: z.boolean(),
+      lastChosenQuality: z
+        .enum(["unknown", "360", "480", "720", "1080", "4k"])
+        .nullable(),
+    }),
+  }),
+  subtitles: z.object({
+    lastSelectedLanguage: z.string().nullable(),
+    styling: z.object({
+      backgroundBlur: z.number(),
+      backgroundOpacity: z.number(),
+      color: z.string(),
+      size: z.number(),
+    }),
+    overrideCasing: z.boolean(),
+    delay: z.number(),
+  }),
+  theme: z.object({
+    theme: z.string().nullable(),
+  }),
+  volume: z.object({
+    volume: z.number(),
+  }),
+});
+
+const settingsPartialSchema = settingsSchema.partial();
+
+export type Settings = z.infer<typeof settingsSchema>;
+
+export function useSettingsImport() {
+  const authStore = useAuthStore();
+  const bookmarksStore = useBookmarkStore();
+  const languageStore = useLanguageStore();
+  const preferencesStore = usePreferencesStore();
+  const progressStore = useProgressStore();
+  const qualityStore = useQualityStore();
+  const subtitleStore = useSubtitleStore();
+  const themeStore = useThemeStore();
+  const volumeStore = useVolumeStore();
+
+  const importSettings = useCallback(
+    async (file: File) => {
+      const text = await file.text();
+
+      const data = settingsPartialSchema.parse(JSON.parse(text));
+      if (data.auth?.account) authStore.setAccount(data.auth.account);
+      if (data.auth?.backendUrl) authStore.setBackendUrl(data.auth.backendUrl);
+      if (data.auth?.proxySet) authStore.setProxySet(data.auth.proxySet);
+      if (data.bookmarks) {
+        for (const [id, item] of Object.entries(data.bookmarks.bookmarks)) {
+          bookmarksStore.setBookmark(id, {
+            title: item.title,
+            type: item.type,
+            year: item.year,
+            poster: item.poster,
+            updatedAt: item.updatedAt,
+          });
+        }
+      }
+      if (data.language) languageStore.setLanguage(data.language.language);
+      if (data.preferences) {
+        preferencesStore.setEnableThumbnails(data.preferences.enableThumbnails);
+      }
+      if (data.quality) {
+        qualityStore.setAutomaticQuality(data.quality.quality.automaticQuality);
+        qualityStore.setLastChosenQuality(
+          data.quality.quality.lastChosenQuality,
+        );
+      }
+      if (data.subtitles) {
+        subtitleStore.setLanguage(data.subtitles.lastSelectedLanguage);
+        subtitleStore.updateStyling(data.subtitles.styling);
+        subtitleStore.setOverrideCasing(data.subtitles.overrideCasing);
+        subtitleStore.setDelay(data.subtitles.delay);
+      }
+      if (data.theme) themeStore.setTheme(data.theme.theme);
+      if (data.volume) volumeStore.setVolume(data.volume.volume);
+
+      if (data.progress) {
+        for (const [id, item] of Object.entries(data.progress.items)) {
+          if (!progressStore.items[id]) {
+            progressStore.setItem(id, item);
+          }
+
+          // We want to preserve existing progress so we take the max of the updatedAt and the progress
+          const storeItem = progressStore.items[id];
+          storeItem.updatedAt = Math.max(storeItem.updatedAt, item.updatedAt);
+          storeItem.title = item.title;
+          storeItem.year = item.year;
+          storeItem.poster = item.poster;
+          storeItem.type = item.type;
+          storeItem.progress = item.progress
+            ? {
+                duration: item.progress.duration,
+                watched: Math.max(
+                  storeItem.progress?.watched ?? 0,
+                  item.progress.watched,
+                ),
+              }
+            : undefined;
+
+          for (const [seasonId, season] of Object.entries(item.seasons)) {
+            storeItem.seasons[seasonId] = season;
+          }
+
+          for (const [episodeId, episode] of Object.entries(item.episodes)) {
+            if (!storeItem.episodes[episodeId]) {
+              storeItem.episodes[episodeId] = episode;
+            }
+
+            const storeEpisode = storeItem.episodes[episodeId];
+            storeEpisode.updatedAt = Math.max(
+              storeEpisode.updatedAt,
+              episode.updatedAt,
+            );
+            storeEpisode.title = episode.title;
+            storeEpisode.number = episode.number;
+            storeEpisode.seasonId = episode.seasonId;
+            storeEpisode.progress = {
+              duration: episode.progress.duration,
+              watched: Math.max(
+                storeEpisode.progress.watched,
+                episode.progress.watched,
+              ),
+            };
+          }
+
+          progressStore.setItem(id, storeItem);
+        }
+      }
+    },
+    [
+      authStore,
+      bookmarksStore,
+      languageStore,
+      preferencesStore,
+      progressStore,
+      qualityStore,
+      subtitleStore,
+      themeStore,
+      volumeStore,
+    ],
+  );
+
+  return importSettings;
+}

src/pages/migration/Migration.tsx

@@ -0,0 +1,65 @@
+import { Trans, useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+
+import { Icons } from "@/components/Icon";
+import { Stepper } from "@/components/layout/Stepper";
+import { CenterContainer } from "@/components/layout/ThinContainer";
+import { VerticalLine } from "@/components/layout/VerticalLine";
+import { Heading2, Paragraph } from "@/components/utils/Text";
+import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
+import { Card, CardContent, Link } from "@/pages/migration/utils";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
+
+export function MigrationPage() {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  return (
+    <MinimalPageLayout>
+      <PageTitle subpage k="global.pages.migration" />
+      <CenterContainer>
+        <Stepper steps={2} current={1} className="mb-12" />
+        <Heading2 className="!mt-0 !text-3xl max-w-[435px]">
+          {t("migration.start.title")}
+        </Heading2>
+        <Paragraph className="max-w-[320px]">
+          {t("migration.start.explainer")}
+        </Paragraph>
+
+        <div className="w-full flex flex-col md:flex-row gap-3">
+          <Card onClick={() => navigate("/migration/direct")}>
+            <CardContent
+              colorClass="!text-onboarding-best"
+              title={t("migration.start.options.direct.title")}
+              subtitle={t("migration.start.options.direct.quality")}
+              description={
+                <Trans i18nKey="migration.start.options.direct.description" />
+              }
+              icon={Icons.CLOUD_ARROW_UP}
+            >
+              <Link>{t("migration.start.options.direct.action")}</Link>
+            </CardContent>
+          </Card>
+          <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
+            <VerticalLine className="items-end" />
+            <span className="text-xs uppercase font-bold">
+              {t("migration.start.options.or")}
+            </span>
+            <VerticalLine />
+          </div>
+          <Card onClick={() => navigate("/migration/download")}>
+            <CardContent
+              colorClass="!text-migration-good"
+              title={t("migration.start.options.download.title")}
+              subtitle={t("migration.start.options.download.quality")}
+              description={t("migration.start.options.download.description")}
+              icon={Icons.FILE_ARROW_DOWN}
+            >
+              <Link>{t("migration.start.options.download.action")}</Link>
+            </CardContent>
+          </Card>
+        </div>
+      </CenterContainer>
+    </MinimalPageLayout>
+  );
+}

src/pages/migration/MigrationDirect.tsx

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+
+import { CenterContainer } from "@/components/layout/ThinContainer";
+import { useSettingsExport } from "@/hooks/useSettingsExport";
+import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
+import { PageTitle } from "@/pages/parts/util/PageTitle";
+
+export function MigrationDirectPage() {
+  const exportSettings = useSettingsExport();
+
+  const doDownload = useCallback(() => {
+    const data = exportSettings(false);
+    console.log(data);
+  }, [exportSettings]);
+
+  return (
+    <MinimalPageLayout>
+      <PageTitle subpage k="global.pages.migration" />
+      <CenterContainer>
+        <button onClick={doDownload} type="button">
+          Hello
+        </button>
+      </CenterContainer>
+    </MinimalPageLayout>
+  );
+}

src/pages/migration/utils.tsx

@@ -0,0 +1,92 @@
+import classNames from "classnames";
+import { ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { Icon, Icons } from "@/components/Icon";
+import { Heading2, Heading3, Paragraph } from "@/components/utils/Text";
+
+export function Card(props: {
+  children?: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+}) {
+  return (
+    <div
+      className={classNames(
+        {
+          "bg-onboarding-card duration-300 border border-onboarding-border rounded-lg p-7":
+            true,
+          "hover:bg-onboarding-cardHover transition-colors cursor-pointer":
+            !!props.onClick,
+        },
+        props.className,
+      )}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export function CardContent(props: {
+  title: ReactNode;
+  description: ReactNode;
+  subtitle: ReactNode;
+  colorClass: string;
+  children?: React.ReactNode;
+  icon: Icons;
+}) {
+  return (
+    <div className="grid grid-rows-[1fr,auto] h-full">
+      <div>
+        <Icon
+          icon={props.icon}
+          className={classNames("text-4xl mb-8 block", props.colorClass)}
+        />
+        <Heading3
+          className={classNames(
+            "!mt-0 !mb-0 !text-xs uppercase",
+            props.colorClass,
+          )}
+        >
+          {props.subtitle}
+        </Heading3>
+        <Heading2 className="!mb-0 !mt-1 !text-base">{props.title}</Heading2>
+        <Paragraph className="max-w-[320px] !my-4">
+          {props.description}
+        </Paragraph>
+      </div>
+      <div>{props.children}</div>
+    </div>
+  );
+}
+
+export function Link(props: {
+  children?: React.ReactNode;
+  to?: string;
+  href?: string;
+  className?: string;
+  target?: "_blank";
+}) {
+  const navigate = useNavigate();
+  return (
+    <a
+      onClick={() => {
+        if (props.to) navigate(props.to);
+      }}
+      href={props.href}
+      target={props.target}
+      className={classNames(
+        "text-onboarding-link cursor-pointer inline-flex gap-2 items-center group hover:opacity-75 transition-opacity",
+        props.className,
+      )}
+      rel="noreferrer"
+    >
+      {props.children}
+      <Icon
+        icon={Icons.ARROW_RIGHT}
+        className="group-hover:translate-x-0.5 transition-transform text-xl group-active:translate-x-0"
+      />
+    </a>
+  );
+}

src/pages/onboarding/Onboarding.tsx

@@ -1,9 +1,9 @@
-import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
 
 import { Button } from "@/components/buttons/Button";
 import { Stepper } from "@/components/layout/Stepper";
 import { CenterContainer } from "@/components/layout/ThinContainer";
+import { VerticalLine } from "@/components/layout/VerticalLine";
 import { Modal, ModalCard, useModal } from "@/components/overlays/Modal";
 import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
 import { MinimalPageLayout } from "@/pages/layouts/MinimalPageLayout";
@@ -15,14 +15,6 @@ import { Card, CardContent, Link } from "@/pages/onboarding/utils";
 import { PageTitle } from "@/pages/parts/util/PageTitle";
 import { getProxyUrls } from "@/utils/proxyUrls";
 
-function VerticalLine(props: { className?: string }) {
-  return (
-    <div className={classNames("w-full grid justify-center", props.className)}>
-      <div className="w-px h-10 bg-onboarding-divider" />
-    </div>
-  );
-}
-
 export function OnboardingPage() {
   const navigate = useNavigateOnboarding();
   const skipModal = useModal("skip");
@@ -73,7 +65,9 @@ export function OnboardingPage() {
           </Card>
           <div className="hidden md:grid grid-rows-[1fr,auto,1fr] justify-center gap-4">
             <VerticalLine className="items-end" />
-            <span className="text-xs uppercase font-bold">or</span>
+            <span className="text-xs uppercase font-bold">
+              {t("onboarding.start.options.or")}
+            </span>
             <VerticalLine />
           </div>
           <Card onClick={() => navigate("/onboarding/proxy")}>

src/setup/App.tsx

@@ -19,6 +19,8 @@ import { DmcaPage, shouldHaveDmcaPage } from "@/pages/Dmca";
 import { NotFoundPage } from "@/pages/errors/NotFoundPage";
 import { HomePage } from "@/pages/HomePage";
 import { LoginPage } from "@/pages/Login";
+import { MigrationPage } from "@/pages/migration/Migration";
+import { MigrationDirectPage } from "@/pages/migration/MigrationDirect";
 import { OnboardingPage } from "@/pages/onboarding/Onboarding";
 import { OnboardingExtensionPage } from "@/pages/onboarding/OnboardingExtension";
 import { OnboardingProxyPage } from "@/pages/onboarding/OnboardingProxy";
@@ -129,6 +131,9 @@ function App() {
         />
         <Route path="/onboarding/proxy" element={<OnboardingProxyPage />} />
 
+        <Route path="/migration" element={<MigrationPage />} />
+        <Route path="/migration/direct" element={<MigrationDirectPage />} />
+
         {shouldHaveDmcaPage() ? (
           <Route path="/dmca" element={<DmcaPage />} />
         ) : null}

src/stores/bookmarks/index.ts

@@ -26,6 +26,7 @@ export interface BookmarkStore {
   bookmarks: Record<string, BookmarkMediaItem>;
   updateQueue: BookmarkUpdateItem[];
   addBookmark(meta: PlayerMeta): void;
+  setBookmark(id: string, item: BookmarkMediaItem): void;
   removeBookmark(id: string): void;
   replaceBookmarks(items: Record<string, BookmarkMediaItem>): void;
   clear(): void;
@@ -94,6 +95,11 @@ export const useBookmarkStore = create(
           s.updateQueue = [...s.updateQueue.filter((v) => v.id !== id)];
         });
       },
+      setBookmark(id, item) {
+        set((s) => {
+          s.bookmarks[id] = item;
+        });
+      },
     })),
     {
       name: "__MW::bookmarks",

src/stores/progress/index.ts

@@ -64,6 +64,7 @@ export interface ProgressStore {
   clear(): void;
   clearUpdateQueue(): void;
   removeUpdateItem(id: string): void;
+  setItem(id: string, item: ProgressMediaItem): void;
 }
 
 let updateId = 0;
@@ -173,6 +174,11 @@ export const useProgressStore = create(
           s.updateQueue = [...s.updateQueue.filter((v) => v.id !== id)];
         });
       },
+      setItem(id, item) {
+        set((s) => {
+          s.items[id] = item;
+        });
+      },
     })),
     {
       name: "__MW::progress",