6 | Review
7 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/app/components/banner.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | export default function Banner({ children }: { children: React.ReactNode }) {
4 | return (
5 | Before the big move, there's one important last step.
8 |9 | Since your video providers likely charge for moving and storing files, make sure you understand any costs 10 | you'll incur by migrating your videos. 11 |
12 |13 | By using Truckload, you agree that you are responsible for the actions taken on each platform as part of the 14 | migration, including any fees your providers charge. 15 |
16 |Click “Move Videos” in the moving list to start your migration.
17 |
10 |
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/app/inngest/client.ts:
--------------------------------------------------------------------------------
1 | import { encryptionMiddleware } from '@inngest/middleware-encryption';
2 | import { EventSchemas, Inngest } from 'inngest';
3 |
4 | import type { AssetFilter, DestinationPlatform, PlatformCredentials, SourcePlatform, Video } from '@/utils/store';
5 |
6 | type FetchVideo = {
7 | data: {
8 | jobId: string;
9 | encrypted: {
10 | credentials: PlatformCredentials;
11 | video: Video;
12 | };
13 | };
14 | };
15 |
16 | type FetchPage = {
17 | data: {
18 | jobId: string;
19 | encrypted: PlatformCredentials;
20 | page?: number;
21 | };
22 | };
23 |
24 | type ProcessVideo = {
25 | data: {
26 | jobId: string;
27 | encrypted: {
28 | sourcePlatform: SourcePlatform;
29 | destinationPlatform: DestinationPlatform;
30 | video: Video;
31 | };
32 | };
33 | };
34 |
35 | type InitMigration = {
36 | data: {
37 | encrypted: {
38 | sourcePlatform: SourcePlatform;
39 | destinationPlatform: DestinationPlatform;
40 | assetFilter: AssetFilter;
41 | };
42 | };
43 | };
44 |
45 | type Events = {
46 | 'truckload/migration.init': InitMigration;
47 | 'truckload/migration.fetch-page': FetchPage;
48 | 'truckload/video.process': ProcessVideo;
49 | 'truckload/video.fetch': FetchVideo;
50 | 'truckload/video.transfer': ProcessVideo;
51 | 'truckload/cloudflare-stream.check-source-status': FetchVideo;
52 | };
53 |
54 | const mw = encryptionMiddleware({
55 | key: process.env.INNGEST_ENCRYPTION_KEY as string,
56 | });
57 |
58 | export const inngest = new Inngest({
59 | id: 'truckload-video',
60 | middleware: [mw],
61 | schemas: new EventSchemas().fromRecord
11 | Select your videos
12 |
14 |
15 | What exactly do you want to transfer?
13 |
16 |
25 |
33 |
34 |
66 | {title}
67 |
97 | );
98 | }
99 |
--------------------------------------------------------------------------------
/app/inngest/providers/cloudflare-stream/cloudflare-stream.ts:
--------------------------------------------------------------------------------
1 | import { inngest } from '@/inngest/client';
2 | import type { Video } from '@/utils/store';
3 |
4 | import type { CloudflareVideo } from './types';
5 |
6 | export const fetchPage = inngest.createFunction(
7 | { id: 'fetch-page-cloudflare-stream', name: 'Fetch page - Cloudflare Stream', concurrency: 1 },
8 | { event: 'truckload/migration.fetch-page' },
9 | async ({ event, step }) => {
10 | const response = await fetch(
11 | `https://api.cloudflare.com/client/v4/accounts/${event.data.encrypted.publicKey}/stream`,
12 | {
13 | headers: {
14 | Authorization: `Bearer ${event.data.encrypted.secretKey}`,
15 | 'Content-Type': 'application/json',
16 | },
17 | }
18 | );
19 |
20 | const result = await response.json();
21 | const isTruncated = result.range && result.range > 0;
22 |
23 | const videos =
24 | result.result
25 | ?.map((object: CloudflareVideo) => ({ id: object.uid }))
26 | .filter((item: Video): item is Video => !!item.id) || [];
27 |
28 | const payload = { isTruncated, videos, cursor: null };
29 | return payload;
30 | }
31 | );
32 |
33 | export const checkSourceStatus = inngest.createFunction(
34 | { id: 'check-source-status-cloudflare-stream', name: 'Check source status Cloudflare Steam', concurrency: 10 },
35 | { event: 'truckload/cloudflare-stream.check-source-status' },
36 | async ({ event, step }): Promise<{ url: string }> => {
37 | let isReady = false;
38 | let url = '';
39 |
40 | while (!isReady) {
41 | const result = await step.run('check-cloudflare-stream-status', async () => {
42 | const response = await fetch(
43 | `https://api.cloudflare.com/client/v4/accounts/${event.data.encrypted.credentials.publicKey}/stream/${event.data.encrypted.video.id}/downloads`,
44 | {
45 | method: 'GET',
46 | headers: {
47 | Authorization: `Bearer ${event.data.encrypted.credentials.secretKey}`,
48 | 'Content-Type': 'application/json',
49 | },
50 | }
51 | );
52 |
53 | return response.json();
54 | });
55 |
56 | isReady = result.result.default.status === 'ready';
57 | url = result.result.default.url as string;
58 |
59 | // sleep for 1 second
60 | await step.sleep('wait-before-rechecking-cloudflare-stream', '5s');
61 | }
62 |
63 | const payload = { url };
64 | return payload;
65 | }
66 | );
67 |
68 | export const fetchVideo = inngest.createFunction(
69 | { id: 'fetch-video-cloudflare-stream', name: 'Fetch video - Cloudflare Stream', concurrency: 10 },
70 | { event: 'truckload/video.fetch' },
71 | async ({ event, step }) => {
72 | const response = await fetch(
73 | `https://api.cloudflare.com/client/v4/accounts/${event.data.encrypted.credentials.publicKey}/stream/${event.data.encrypted.video.id}/downloads`,
74 | {
75 | method: 'POST',
76 | headers: {
77 | Authorization: `Bearer ${event.data.encrypted.credentials.secretKey}`,
78 | 'Content-Type': 'application/json',
79 | },
80 | }
81 | );
82 |
83 | const result = await response.json();
84 |
85 | if (result.result.default.status === 'ready') {
86 | return {
87 | id: event.data.encrypted.video.id,
88 | url: result.result.default.url,
89 | };
90 | }
91 |
92 | const { url } = await step.invoke(`check-source-status-cloudflare-stream`, {
93 | function: checkSourceStatus,
94 | data: {
95 | jobId: event.data.jobId,
96 | encrypted: event.data.encrypted,
97 | },
98 | });
99 |
100 | return {
101 | id: event.data.encrypted.video.id,
102 | url,
103 | };
104 | }
105 | );
106 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useEffect } from 'react';
4 | import { Toaster } from 'react-hot-toast';
5 |
6 | import Image from 'next/image';
7 |
8 | import PlatformCredentialsForm from './components/platforms/credentials-form';
9 | import PlatformList from './components/platforms/platform-list';
10 | import VideoFilter from './components/platforms/video-filter';
11 | import ImportSettings from './components/shared/import-settings';
12 | import MigrationStatus from './components/shared/migration-status';
13 | import Review from './components/shared/review';
14 | import Sidebar from './components/sidebar';
15 | import useMigrationStore from './utils/store';
16 |
17 | export default function Page() {
18 | const sourcePlatform = useMigrationStore((state) => state.sourcePlatform);
19 | const destinationPlatform = useMigrationStore((state) => state.destinationPlatform);
20 | const job = useMigrationStore((state) => state.job);
21 | const currentStep = useMigrationStore((state) => state.currentStep);
22 |
23 | // determine what the current step should be on initial load
24 | useEffect(() => {
25 | if (!sourcePlatform) {
26 | useMigrationStore.setState({ currentStep: 'select-source' });
27 | } else if (!sourcePlatform?.credentials) {
28 | useMigrationStore.setState({ currentStep: 'set-source-credentials' });
29 | } else if (sourcePlatform?.credentials && !useMigrationStore.getState().assetFilter) {
30 | useMigrationStore.setState({ currentStep: 'set-video-filter' });
31 | } else if (!destinationPlatform) {
32 | useMigrationStore.setState({ currentStep: 'select-destination' });
33 | } else if (!destinationPlatform?.credentials) {
34 | useMigrationStore.setState({ currentStep: 'set-destination-credentials' });
35 | } else if (destinationPlatform?.credentials && !destinationPlatform?.config) {
36 | useMigrationStore.setState({ currentStep: 'set-import-settings' });
37 | } else if (!job) {
38 | useMigrationStore.setState({ currentStep: 'review' });
39 | } else {
40 | useMigrationStore.setState({ currentStep: 'migration-status' });
41 | }
42 | }, [sourcePlatform, destinationPlatform, job]);
43 |
44 | return (
45 | <>
46 | {description}
68 | 69 |
70 | {platforms.map((platform) => (
71 |
96 | {
79 | const platformWithType = { ...platform, type };
80 | if (type === 'source') {
81 | setPlatform('source', platformWithType as SourcePlatform);
82 | } else {
83 | setPlatform('destination', platformWithType as DestinationPlatform);
84 | }
85 | setCurrentStep(isSource ? 'set-source-credentials' : 'set-destination-credentials');
86 | }}
87 | >
88 |
94 | ))}
95 |
89 |
91 | {platform.name}
92 | {/*{platform.description}
*/} 93 |
47 |
82 |
48 |
49 |
52 |
53 |
54 |
49 |
52 |
55 |
68 |
69 |
58 | {currentStep === 'select-source' &&
67 |
70 |
71 | An{' '}
72 |
73 | open-source
74 | {' '}
75 | project by{' '}
76 |
77 | Mux
78 |
79 |
80 |
81 |
50 | Migration Status
51 | {/* {job?.status} */}
52 |
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/app/inngest/functions.ts:
--------------------------------------------------------------------------------
1 | import type { GetEvents } from 'inngest';
2 |
3 | import { updateJobStatus } from '@/utils/job';
4 | import type { Video } from '@/utils/store';
5 | import type { VideoWithMigrationStatus } from '@/utils/store';
6 |
7 | import { inngest } from './client';
8 | import providerFns from './providers';
9 |
10 | type Events = GetEvents53 | Note: this page will only update if you've correctly configured status webhooks. 54 |
55 | 56 |
57 |
58 |
59 |
102 |
103 |
104 |
107 | | 61 | Video 62 | | 63 |64 | Progress 65 | | 66 |67 | Status 68 | | 69 |
|---|---|---|
| 81 | {video.title || video.id} 82 | | 83 |{video.progress}% | 84 |85 | 94 | {video.status} 95 | 96 | | 97 |
2 |
3 | # Truckload
4 |
5 | Migrate your video collection to a new platform with ease.
6 |
7 | ## Getting started
8 |
9 | First, clone the repository and install dependencies:
10 |
11 | ```bash
12 | git clone https://github.com/muxinc/truckload.git
13 | cd truckload
14 | npm install
15 | ```
16 |
17 | Next, create a `.env.local` file in the root directory with your API keys and other configuration settings:
18 |
19 | ```bash
20 | cp .env.example .env.local
21 | ```
22 |
23 | Finally, start the app:
24 |
25 | ```bash
26 | npm run start:dev
27 | ```
28 |
29 | This will start server instances for the Next.js app, Inngest, PartyKit, and ngrok.
30 |
31 | 
32 |
33 | ### About the Inngest server
34 |
35 | [Inngest](https://www.inngest.com) makes serverless queues, background jobs, and workflows effortless. Truckload uses a [local Inngest development server](https://www.inngest.com/docs/local-development) to facilitate the loading and migrating of each video.
36 |
37 | ### About the PartyKit server
38 |
39 | [PartyKit](https://www.partykit.io/) is a comprehensive solution for real-time sync within your application.
40 |
41 | In this app, we're really only using it to receive status updates from the video migration background jobs and destination webhooks. Truckload uses a local PartyKit server on port `1999` to receive these notifications and pipe them back to the front-end for status updates.
42 |
43 | ## How it works
44 |
45 | Truckload uses a simple workflow to migrate videos from one platform to another. Here's a high-level overview of the process:
46 |
47 | 
48 |
49 | ## Authentication requirements
50 |
51 | When using this app to migrate videos to a new platform, you'll need to authenticate with both the source and destination services to ensure that you have the necessary permissions to perform the desired actions (e.g. fetching video metadata, creating master files, uploading videos, etc.)
52 |
53 | Here's a list of the authentication requirements for each service:
54 |
55 | | Provider | Requirements | Resources |
56 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
57 | | Amazon S3 | [Access Key and Secret](https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-secret-access-keys), bucket name, region | [AWS SDK v3 API docs](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) |
58 | | Api.video | [API Key](https://docs.api.video/reference/basic-authentication) | [API docs](https://docs.api.video/reference) |
59 | | Cloudflare Stream | [API Token](https://dash.cloudflare.com/profile/api-tokens), Account ID | [API docs](https://developers.cloudflare.com/stream/) |
60 | | Vimeo | [Access Token](https://developer.vimeo.com/api/authentication#obtaining-an-access-token) | [API docs](https://developer.vimeo.com/api/) |
61 | | Mux | [Token ID and Secret](https://docs.mux.com/core/make-api-requests#http-basic-auth) | [API docs](https://docs.mux.com/api-reference) |
62 |
63 | ## Handling webhooks
64 |
65 | Some destinations (like [Mux](https://mux.com?utm_source=github&utm_medium=readme&utm_campaign=truckload)) use webhooks to communicate migration progress to your application.
66 |
67 | This presents a challenge when you're running this app locally, as you'll need a public URL that can
68 | be reached by an HTTP request issued by your destination service.
69 |
70 | To solve this, you can stand up a free, publicly-accessible tunnel URL using ngrok. Here's how:
71 |
72 | 1. Visit https://ngrok.com
73 | 2. Sign in with your existing account or with GitHub
74 | 3. Follow the instructions to install and authenticate `ngrok` on your machine
75 | 4. Create an `ngrok` endpoint for your local app by running `ngrok http http://localhost:3000`
76 | 5. Grab the resulting URL for use as your webhook destination, and append `/api/webhooks/mux`:
77 |
78 | 
79 |
--------------------------------------------------------------------------------
/app/components/platforms/credentials-form.tsx:
--------------------------------------------------------------------------------
1 | import toast from 'react-hot-toast';
2 |
3 | import useMigrationStore from '@/utils/store';
4 | import type { PlatformCredentials } from '@/utils/store';
5 |
6 | import Heading from '../heading';
7 |
8 | const PLATFORM_CREDENTIALS = [
9 | {
10 | name: 'Amazon S3',
11 | id: 's3',
12 | values: [
13 | {
14 | label: 'Access Key ID',
15 | name: 'publicKey',
16 | type: 'text',
17 | },
18 | {
19 | label: 'Secret Access Key',
20 | name: 'secretKey',
21 | type: 'text',
22 | },
23 | {
24 | label: 'Region',
25 | name: 'region',
26 | type: 'select',
27 | values: [
28 | 'us-east-1',
29 | 'us-east-2',
30 | 'us-west-1',
31 | 'us-west-2',
32 | 'eu-west-1',
33 | 'eu-central-1',
34 | 'ap-southeast-1',
35 | 'ap-southeast-2',
36 | 'ap-northeast-1',
37 | 'sa-east-1',
38 | ],
39 | },
40 | {
41 | label: 'Bucket name',
42 | name: 'bucket',
43 | type: 'text',
44 | },
45 | ],
46 | },
47 | {
48 | name: 'Api.video',
49 | id: 'api-video',
50 | values: [
51 | {
52 | label: 'Account email',
53 | name: 'publicKey',
54 | type: 'text',
55 | },
56 | {
57 | label: 'API Key',
58 | name: 'secretKey',
59 | type: 'text',
60 | },
61 | {
62 | label: 'Environment',
63 | name: 'environment',
64 | type: 'select',
65 | values: ['sandbox', 'production'],
66 | },
67 | ],
68 | },
69 | {
70 | name: 'Cloudflare Stream',
71 | id: 'cloudflare-stream',
72 | values: [
73 | {
74 | label: 'Account ID',
75 | name: 'publicKey',
76 | type: 'text',
77 | },
78 | {
79 | label: 'API Token',
80 | name: 'secretKey',
81 | type: 'text',
82 | },
83 | ],
84 | },
85 | {
86 | name: 'Vimeo',
87 | id: 'vimeo',
88 | values: [
89 | {
90 | label: 'Access Token',
91 | name: 'secretKey',
92 | type: 'text',
93 | },
94 | ],
95 | },
96 | {
97 | name: 'Mux',
98 | id: 'mux',
99 | values: [
100 | {
101 | label: 'Access Token ID',
102 | name: 'publicKey',
103 | type: 'text',
104 | },
105 | {
106 | label: 'Secret Key',
107 | name: 'secretKey',
108 | type: 'text',
109 | },
110 | ],
111 | },
112 | ];
113 |
114 | export default function PlatformCredentialsForm() {
115 | const { currentStep, setCurrentStep, platform, setPlatform } = useMigrationStore((state) => ({
116 | currentStep: state.currentStep,
117 | setCurrentStep: state.setCurrentStep,
118 | setPlatform: state.setPlatform,
119 | platform: state.currentStep === 'set-source-credentials' ? state.sourcePlatform : state.destinationPlatform,
120 | }));
121 |
122 | if (!platform) {
123 | return null;
124 | }
125 |
126 | const platformCreds = PLATFORM_CREDENTIALS.find((p) => p.id === platform?.id);
127 | if (!platformCreds) {
128 | return null;
129 | }
130 |
131 | const onSubmit = async (e: React.FormEvent
161 | Add your {platform.name} credentials
162 |
212 | );
213 | }
214 |
--------------------------------------------------------------------------------
/app/components/platforms/api-video/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/components/sidebar.tsx:
--------------------------------------------------------------------------------
1 | import toast from 'react-hot-toast';
2 |
3 | import useMigrationStore from '@/utils/store';
4 |
5 | import Heading from './heading';
6 |
7 | export default function Sidebar() {
8 | const sourcePlatform = useMigrationStore((state) => state.sourcePlatform);
9 | const setPlatform = useMigrationStore((state) => state.setPlatform);
10 | const destinationPlatform = useMigrationStore((state) => state.destinationPlatform);
11 | const setCurrentStep = useMigrationStore((state) => state.setCurrentStep);
12 | const currentStep = useMigrationStore((state) => state.currentStep);
13 | const assetFilter = useMigrationStore((state) => state.assetFilter);
14 | const setAssetFilter = useMigrationStore((state) => state.setAssetFilter);
15 |
16 | const state = useMigrationStore.getState();
17 |
18 | console.dir(state);
19 |
20 | const onSubmit = async () => {
21 | console.log({ sourcePlatform, destinationPlatform, assetFilter });
22 | const result = await fetch('/api/job', {
23 | method: 'POST',
24 | body: JSON.stringify({ sourcePlatform, destinationPlatform, assetFilter }),
25 | });
26 |
27 | if (result.status === 201) {
28 | const { id } = await result.json();
29 | useMigrationStore.setState({ job: { id, status: 'pending', progress: 0, videos: {} } });
30 |
31 | setCurrentStep('migration-status');
32 | toast('Migration initiated', { icon: '👍' });
33 | } else {
34 | toast.error('Error initiating migration');
35 | }
36 | };
37 |
38 | return (
39 | Only stored locally. Encrypted in transit.
163 | 164 | 211 |
40 | Moving list
41 |
42 |
178 | );
179 | }
180 |
--------------------------------------------------------------------------------
/app/components/shared/import-settings.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | import useMigrationStore from '@/utils/store';
4 | import type { PlatformConfig } from '@/utils/store';
5 |
6 | import Heading from '../heading';
7 |
8 | interface MuxPlatformConfig {
9 | videoQuality: 'basic' | 'plus' | 'premium';
10 | maxResolutionTier?: '1080p' | '1440p' | '2160p'; // Conditionally available based on videoQuality
11 | autoGenerateCaptions?: boolean;
12 | playbackPolicy?: ('public' | 'signed')[]; // Optional array for multi-checkboxes
13 | }
14 |
15 | interface Field {
16 | label: string;
17 | description: string;
18 | docsUrl: string;
19 | name: string;
20 | type: 'select' | 'checkbox' | 'multi-checkbox' | 'text';
21 | values?: string[] | ((config: any) => string[]);
22 | visible?: (config: PlatformConfig) => boolean;
23 | }
24 |
25 | const PLATFORM_METADATA_FIELDS: { id: string; fields: Field[] }[] = [
26 | {
27 | id: 'mux',
28 | fields: [
29 | {
30 | label: 'Video quality',
31 | description:
32 | 'The video quality level informs the cost, quality, and available platform features for the asset.',
33 | docsUrl: 'https://www.mux.com/docs/guides/use-video-quality-levels',
34 | name: 'videoQuality',
35 | type: 'select',
36 | values: ['basic', 'plus', 'premium'],
37 | },
38 | {
39 | label: 'Max resolution tier',
40 | description:
41 | 'This field controls the maximum resolution that Mux will encode, store, and deliver your media in. Mux does not to automatically ingest content at 4K so that you can avoid unexpectedly high ingest bills',
42 | docsUrl: 'https://docs.mux.com/guides/stream-videos-in-4k',
43 | name: 'maxResolutionTier',
44 | type: 'select',
45 | values: (config) => (config.videoQuality === 'basic' ? ['1080p'] : ['1080p', '1440p', '2160p']),
46 | },
47 | {
48 | label: 'Auto-generate captions',
49 | description: 'Automatically generate captions for your videos',
50 | docsUrl: 'https://docs.mux.com/guides/add-autogenerated-captions-and-use-transcripts',
51 | name: 'autoGenerateCaptions',
52 | type: 'checkbox',
53 | },
54 | {
55 | label: 'Test mode',
56 | description: 'For testing only. Limits asset duration to 10 seconds and adds a watermark to the video',
57 | docsUrl: 'https://www.mux.com/blog/new-test-mux-video-features-for-free',
58 | name: 'testMode',
59 | type: 'checkbox',
60 | },
61 | {
62 | label: 'Playback policy',
63 | description:
64 | 'Playback policies allow you to control the different ways users can view and interact with your content.',
65 | docsUrl: 'https://docs.mux.com/guides/secure-video-playback',
66 | name: 'playbackPolicy',
67 | type: 'multi-checkbox',
68 | values: ['public', 'signed'],
69 | },
70 | ],
71 | },
72 | ];
73 |
74 | export default function DestinationMetadata() {
75 | const destinationPlatform = useMigrationStore((state) => state.destinationPlatform);
76 | const setPlatform = useMigrationStore((state) => state.setPlatform);
77 | const setCurrentStep = useMigrationStore((state) => state.setCurrentStep);
78 | const platform = useMigrationStore((state) =>
79 | state.currentStep === 'set-import-settings' ? state.destinationPlatform : state.sourcePlatform
80 | );
81 | const [config, setConfig] = useState
43 | {!sourcePlatform && (
44 |
167 |
168 | {currentStep === 'review' && (
169 |
176 | )}
177 |
45 | This list will grow as you prepare your move.
46 |
47 | Start over there ➡️
48 | ⬇️
49 |
54 |
70 | )}
71 |
72 | {sourcePlatform?.credentials && (
73 |
55 |
58 |
59 |
69 | Source platform
56 |{sourcePlatform?.name}
57 |
74 |
89 | )}
90 |
91 | {assetFilter !== null && (
92 |
75 |
78 |
79 |
88 | Source credentials
76 |Credentials added
77 |
93 |
108 | )}
109 |
110 | {destinationPlatform && (
111 |
94 |
97 |
98 |
107 | Video selection
95 |Moving all videos
96 |
112 |
127 | )}
128 |
129 | {destinationPlatform?.credentials && (
130 |
113 |
116 |
117 |
126 | Destination platform
114 |{destinationPlatform?.name}
115 |
131 |
146 | )}
147 |
148 | {destinationPlatform?.config && (
149 |
132 |
135 |
136 |
145 | Destination credentials
133 |Credentials added
134 |
150 |
165 | )}
166 |
151 |
154 |
155 |
164 | Import settings
152 |Settings added
153 |