Ability to import/export settings

common/anki/index.ts

@@ -0,0 +1 @@
+export * from './src/anki';

common/src/anki.ts → common/anki/src/anki.ts

@@ -1,10 +1,10 @@
-import AudioClip from './audio-clip';
-import Image from './image';
-import { HttpFetcher, Fetcher } from './fetcher';
-import { AnkiSettings } from './settings';
+import { AudioClip } from '@project/common/audio-clip';
+import { Image } from '@project/common';
+import { HttpFetcher, Fetcher } from '@project/common';
+import { AnkiSettings } from '@project/common';
 import sanitize from 'sanitize-filename';
-import { AudioModel, ImageModel, SubtitleModel } from './model';
-import { extractText } from './util';
+import { AudioModel, ImageModel, SubtitleModel } from '@project/common';
+import { extractText } from '@project/common';
 
 const ankiQuerySpecialCharacters = ['"', '*', '_', '\\', ':'];
 

common/app/src/components/App.tsx

@@ -3,8 +3,6 @@ import { makeStyles, Theme } from '@material-ui/core/styles';
 import ThemeProvider from '@material-ui/styles/ThemeProvider';
 import { useWindowSize } from '../hooks/use-window-size';
 import {
-    Anki,
-    AudioClip,
     Image,
     humanReadableTime,
     AnkiDialogSliderContext,
@@ -23,6 +21,8 @@ import {
     CopyHistoryItem,
     Fetcher,
 } from '@project/common';
+import { AudioClip } from '@project/common/audio-clip';
+import { Anki, AnkiExportMode } from '@project/common/anki';
 import { SubtitleReader } from '@project/common/subtitle-reader';
 import { v4 as uuidv4 } from 'uuid';
 import clsx from 'clsx';
@@ -39,7 +39,6 @@ import Player, { AnkiDialogFinishedRequest, MediaSources } from './Player';
 import SettingsDialog from './SettingsDialog';
 import VideoPlayer, { SeekRequest } from './VideoPlayer';
 import { Color } from '@material-ui/lab';
-import { AnkiExportMode } from '@project/common';
 import { DefaultKeyBinder } from '@project/common/key-binder';
 import AppKeyBinder from '../services/app-key-binder';
 import VideoChannel from '../services/video-channel';
@@ -288,7 +287,7 @@ interface Props {
     settings: AsbplayerSettings;
     extension: ChromeExtension;
     fetcher: Fetcher;
-    onSettingsChanged: <K extends keyof AsbplayerSettings>(key: K, value: AsbplayerSettings[K]) => void;
+    onSettingsChanged: (settings: Partial<AsbplayerSettings>) => void;
 }
 
 function App({ origin, logoUrl, settings, extension, fetcher, onSettingsChanged }: Props) {

common/app/src/components/RootApp.tsx

@@ -19,10 +19,10 @@ const RootApp = ({ origin, logoUrl, settingsStorage, fetcher }: Props) => {
     }, [settingsProvider]);
 
     const handleSettingsChanged = useCallback(
-        async <K extends keyof AsbplayerSettings>(key: K, value: AsbplayerSettings[K]) => {
-            setSettings((s) => ({ ...s!, [key]: value }));
+        async (settings: Partial<AsbplayerSettings>) => {
+            setSettings((s) => ({ ...s!, ...settings }));
 
-            await settingsProvider.set({ [key]: value });
+            await settingsProvider.set(settings);
 
             if (extension.installed) {
                 extension.notifySettingsUpdated();

common/app/src/components/SettingsDialog.tsx

@@ -6,10 +6,11 @@ import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { Anki, AsbplayerSettings } from '@project/common';
 import ChromeExtension from '../services/chrome-extension';
 import { SettingsForm } from '../../../components';
 import { useLocalFontFamilies } from '../../../hooks';
+import { Anki } from '../../../anki';
+import { AsbplayerSettings } from '../../..';
 
 const useStyles = makeStyles({
     root: {
@@ -28,7 +29,7 @@ interface Props {
     open: boolean;
     settings: AsbplayerSettings;
     scrollToId?: string;
-    onSettingsChanged: <K extends keyof AsbplayerSettings>(key: K, value: AsbplayerSettings[K]) => void;
+    onSettingsChanged: (settings: Partial<AsbplayerSettings>) => void;
     onClose: () => void;
 }
 

common/audio-clip/index.ts

@@ -0,0 +1,2 @@
+export { default as AudioClip } from './src/audio-clip';
+export { default as Mp3Encoder } from './src/mp3-encoder';

common/src/audio-clip.ts → common/audio-clip/src/audio-clip.ts

@@ -2,7 +2,7 @@ import Mp3Encoder from './mp3-encoder';
 // eslint-disable-next-line
 // @ts-ignore
 import Worker from 'worker-loader!./mp3-encoder-worker.js';
-import { download } from './util';
+import { download } from '@project/common';
 const defaultMp3WorkerFactory = () => new Worker();
 
 interface ExperimentalAudioElement extends HTMLAudioElement {

common/components/src/AnkiDialog.tsx

@@ -3,9 +3,7 @@ import { useTranslation } from 'react-i18next';
 import makeStyles from '@material-ui/core/styles/makeStyles';
 import withStyles from '@material-ui/core/styles/withStyles';
 import {
-    Anki,
     AnkiDialogSliderContext,
-    AudioClip,
     Image,
     humanReadableTime,
     AnkiSettings,
@@ -14,6 +12,7 @@ import {
     subtitleIntersectsTimeInterval,
     joinSubtitles,
 } from '@project/common';
+import { AudioClip } from '@project/common/audio-clip';
 import Button from '@material-ui/core/Button';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
 import TextField from '@material-ui/core/TextField';
@@ -38,7 +37,7 @@ import ZoomInIcon from '@material-ui/icons/ZoomIn';
 import ZoomOutIcon from '@material-ui/icons/ZoomOut';
 import SubtitleTextImage from './SubtitleTextImage';
 import TagsTextField from './TagsTextField';
-import { AnkiExportMode } from '@project/common';
+import { Anki, AnkiExportMode } from '../../anki';
 
 const useStyles = makeStyles((theme) => ({
     root: {