Skip to content

Commit 4f20983

Browse files
hensmi-amazonhensmi-amazon
authored
Migrate browser demo to vite (#3165)
1 parent 2462ccc commit 4f20983

24 files changed

Lines changed: 2130 additions & 6549 deletions

‎CHANGELOG.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1919
- Updated to Typescript 5.x and node >= 20
2020
- Refactored Encoded Transform management into it's own component for better support of non-redundant audio transforms.
2121
- Add scalability mode fallback when SVC is enabled. Limit SVC for content share to AV1 temporal scalability only.
22-
- Completed migration to mocha tests
22+
- Completed migration to mocha tests.
2323
- Enable VideoPriorityBasedPolicy by default when SVC or simulcast is enabled.
2424
- Deprecate simulcast in favor of scalable video coding.
2525

‎demos/browser/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
/debug.js
2+
/public/

‎demos/browser/README.md‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,12 @@ For messaging session, make sure your role policy contains `chime:Connect` and `
5151
1. Navigate to the `demos/browser` folder: `cd demos/browser`
5252

5353
2. Start the demo application: `npm run start`
54-
> Note: Once the demo is run for the first time, you can run the application in hot reload mode by calling `npm run start:hot`.
5554

5655
3. Open http://localhost:8080 in your browser.
5756

5857
The meeting created with a local server is only available within your browser.
5958

60-
Changes to `meetingV2.html` and `meetingV2.ts` will be hot-reloaded. To force changes to the library itself to be hot-reloaded, run `npm run tsc:watch` in the SDK repository root.
59+
Changes to demo source files (`.ts`, `.scss`, `.html`) will trigger an automatic page reload. To also pick up changes to the SDK source, run `npm run tsc:watch` in the SDK repository root and use `npm run start:watch` instead of `start:fast`.
6160

6261
### Demo applications
6362

@@ -74,9 +73,9 @@ npm run start --app=<app>
7473
```
7574

7675
For example,
77-
1. To run the `meeting` demo, run:
76+
1. To run the `meetingV2` demo, run:
7877
```
79-
npm run start --app=meeting
78+
npm run start --app=meetingV2
8079
```
8180
2. To run the `meetingReadinessChecker` demo, run:
8281
```
@@ -89,15 +88,6 @@ For example,
8988
9089
If you don't specify the `--app` option, it will run the `meetingV2` demo.
9190
92-
When using npm v7 or higher, use `--env` instead of `--app`:
93-
94-
```
95-
npm run start:hot -- --env app=meetingReadinessChecker
96-
npm run build -- --env app=meetingV2
97-
```
98-
99-
`start:fast` is not currently supported for apps other than `meetingV2` with npm v7.
100-
10191
After running `start` the first time, you can speed things up on subsequent iterations by using `start:fast`, e.g.
10292
10393
```

demos/browser/server.js renamed to demos/browser/api-server.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,14 @@ const indexPagePath = `dist/${app}.html`;
2020

2121
console.info('Using index path', indexPagePath);
2222

23-
const indexPage = fs.readFileSync(indexPagePath);
23+
let indexPage;
24+
try {
25+
indexPage = fs.readFileSync(indexPagePath);
26+
} catch {
27+
// dist may not exist when running via the Vite dev server — that's fine,
28+
// Vite serves the HTML directly and proxies API requests here.
29+
indexPage = '';
30+
}
2431

2532
const currentRegion = process.env.REGION || 'us-east-1';
2633

‎demos/browser/app/meetingReadinessChecker/meetingReadinessChecker.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
</head>
1010

1111
<body>
12+
<script type="module" src="./meetingReadinessChecker.ts"></script>
1213

1314
<!-- Amazon Device Checker landing page -->
1415

‎demos/browser/app/meetingReadinessChecker/meetingReadinessChecker.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ import {
3232
Versioning,
3333
} from 'amazon-chime-sdk-js';
3434

35-
// eslint-disable-next-line @typescript-eslint/no-var-requires
36-
const { v4: uuidv4 } = require('uuid');
35+
import { v4 as uuidv4 } from 'uuid';
36+
import markdownit from 'markdown-it';
3737

3838
class SwappableLogger implements Logger {
3939
constructor(public inner: Logger) {}
@@ -91,8 +91,7 @@ export class DemoMeetingApp {
9191
enableWebAudio = false;
9292
enableSimulcast = false;
9393

94-
// eslint-disable-next-line @typescript-eslint/no-var-requires
95-
markdown = require('markdown-it')({ linkify: true });
94+
markdown = markdownit({ linkify: true });
9695
lastMessageSender: string | null = null;
9796
lastReceivedMessageTimestamp = 0;
9897
analyserNodeCallback: () => void;

‎demos/browser/app/meetingV2/meetingV2.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
66
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
77
<title>Meeting Demo</title>
8+
<link rel="stylesheet" href="./styleV2.scss">
89
</head>
910
<body>
11+
<script type="module" src="./meetingV2.ts"></script>
1012

1113
<div id="flow-fatal" class="flow">
1214
<div style="vertical-align: middle; text-align: left; width: 40%; margin: 10em 30% 10em 30%;">
@@ -187,7 +189,7 @@ <h5 class="modal-title" id="additional-options-modal-label">Additional Options</
187189
<option value="h264MainProfile">H.264 Main Profile</option>
188190
<option value="h264HighProfile">H.264 High Profile</option>
189191
<option value="vp9Profile0" id="vp9Profile0-content-codec">VP9 Profile 0</option>
190-
<option value="av1Main"id="av1Main-content-codec">AV1 Main Profile</option>
192+
<option value="av1Main" id="av1Main-content-codec">AV1 Main Profile</option>
191193
</select>
192194
<label for="videoFeature" id="videoFeatureTitle" style="text-align: left;">Meeting Maximum Camera Video Resolution:</label>
193195
<select name="videoFeature" class="form-select" id="videoFeatureSelect">

‎demos/browser/app/meetingV2/meetingV2.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,9 @@ import {
101101
} from './util/mediastreamprovider/DemoMediaStreamProviders';
102102

103103
import { BackgroundImageEncoding } from './util/BackgroundImage';
104+
import markdownit from 'markdown-it';
104105

105-
MeetingToast; // Make sure this file is included in webpack
106+
MeetingToast; // Make sure this file is included in the bundle
106107

107108
let SHOULD_EARLY_CONNECT = (() => {
108109
return document.location.search.includes('earlyConnect=1');
@@ -369,7 +370,7 @@ export class DemoMeetingApp
369370
noWordSeparatorForTranscription = false;
370371
enableMaxContentShare = false;
371372

372-
markdown = require('markdown-it')({ linkify: true });
373+
markdown = markdownit({ linkify: true });
373374
lastMessageSender: string | null = null;
374375
lastReceivedMessageTimestamp = 0;
375376
lastPacketsSent = 0;
@@ -3704,7 +3705,7 @@ export class DemoMeetingApp
37043705
// @ts-ignore
37053706
window.app_meetingV2 = undefined;
37063707
// @ts-ignore
3707-
window.webpackHotUpdateapp_meetingV2 = undefined;
3708+
window.hotUpdateapp_meetingV2 = undefined;
37083709
document.getElementsByTagName('body')[0].innerHTML = '<b>Gone</b>';
37093710
this.removeFatalHandlers();
37103711
}, 2000);

‎demos/browser/app/meetingV2/video/VideoTile.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33

4+
import cogSvg from '../../../node_modules/open-iconic/svg/cog.svg?raw';
5+
46
export class DemoVideoTile extends HTMLElement {
57
innerHTMLToInject = `
68
<video class="video-tile-video"></video>
@@ -223,7 +225,7 @@ export class DemoVideoTile extends HTMLElement {
223225

224226
async connectedCallback() {
225227
this.innerHTML = this.innerHTMLToInject;
226-
(this.querySelector('.button-video-tile-config-drop') as HTMLElement).innerHTML = require('../../../node_modules/open-iconic/svg/cog.svg');
228+
(this.querySelector('.button-video-tile-config-drop') as HTMLElement).innerHTML = cogSvg;
227229
this.className = 'video-tile';
228230
}
229231
}

‎demos/browser/app/meetingV2/video/VideoTileCollection.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313

1414
import RemoteVideoManager from './RemoteVideoManager';
1515
import PaginationManager from './PaginationManager';
16-
import { DemoVideoTile } from './VideoTile'; DemoVideoTile; // Make sure this file is included in webpack
16+
import { DemoVideoTile } from './VideoTile'; DemoVideoTile; // Make sure this file is included in the bundle
1717

1818
// We use the same config options for multiple settings when configuring
1919
// video tiles, regardless of what they map to internally

0 commit comments

Comments
 (0)