Skip to content

Commit

Permalink
fix: include review-recommended fixes
Browse files Browse the repository at this point in the history 
	- Update $ style for rxjs variables
	- Add inner folder for zip
	- Use timestamps for filenames
	- Remove indentation for readme
	- Added explicit version for unpkg import
	- Added error handling for zip download promise
  • Loading branch information
@roedoejet
roedoejet committed Mar 18, 2024
1 parent ef8fa1c commit f194def
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 74 deletions.
59 changes: 38 additions & 21 deletions packages/studio-web/src/app/demo/demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,17 @@ export class DemoComponent implements OnDestroy, OnInit {
xmlSerializer = new XMLSerializer();
readmeFile = new Blob(
[
`
Web Development Guide
`Web Deployment Guide
This bundle has everything you need to host your ReadAlong on your own server.
Your audio, (optional) image, and alignment (.readalong) assets are stored in the assets folder.
The plain text used to create your ReadAlong is also stored here along with an example index.html file.
Your index.html file demonstrates the snippet and imports needed to host the ReadAlong on your server.
Please host all assets on your server, include the font and package imports defined in the index.html
in your website's imports, and include the corresponding <readalong> snippet everywhere you would like
your ReadAlong to be displayed.
This bundle has everything you need to host your ReadAlong on your own server.
Your audio, (optional) image, and alignment (.readalong) assets are stored in the assets folder.
The plain text used to create your ReadAlong is also stored here along with an example index.html file.
Your index.html file demonstrates the snippet and imports needed to host the ReadAlong on your server.
Please host all assets on your server, include the font and package imports defined in the index.html in your website's imports, and include the corresponding <readalong> snippet everywhere you would like your ReadAlong to be displayed.
`,
],
{
Expand Down Expand Up @@ -154,7 +155,8 @@ export class DemoComponent implements OnDestroy, OnInit {

async updateImages(
doc: Document,
b64Embed = true
b64Embed = true,
imagePrefix = "image"
): Promise<boolean | Image[]> {
const images = await this.readalong.getImages();
const page_nodes = doc.querySelectorAll("div[type=page]");
Expand All @@ -177,7 +179,7 @@ export class DemoComponent implements OnDestroy, OnInit {
// or return a list of blobs and use the filename here
} else {
const extension = mime.getExtension(blob.type);
const path = `image-${i}.${extension}`;
const path = `${imagePrefix}-${i}.${extension}`;
imageBlobs.push({ blob: blob, path: path });
graphic.setAttribute("url", `${path}`);
}
Expand Down Expand Up @@ -231,14 +233,18 @@ export class DemoComponent implements OnDestroy, OnInit {
);
element.href = window.URL.createObjectURL(blob);
element.download = "readalong.html";
console.log(element);
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
this.registerDownloadEvent();
} else if (this.selectedOutputFormat === "zip") {
let zipFile = new JSZip();
const assetsFolder = zipFile.folder("assets");
const basename = "output";
// Create inner folder
const innerFolder = zipFile.folder("readalong");
const assetsFolder = innerFolder?.folder("assets");
const timestamp = Date.now();
const basename = `readalong-${timestamp}`;
// - add audio file
if (this.uploadService.$currentAudio.value !== null) {
// Recorded audio is always mp3
Expand All @@ -256,13 +262,20 @@ export class DemoComponent implements OnDestroy, OnInit {
}
// - add images
// @ts-ignore
const images: Image[] = await this.updateImages(ras, false);
const images: Image[] = await this.updateImages(
ras,
false,
`image-${timestamp}`
);
for (let image of images) {
assetsFolder?.file(image.path, image.blob);
}
// - add plain text file
if (this.uploadService.$currentText.value !== null) {
zipFile.file(`${basename}.txt`, this.uploadService.$currentText.value);
innerFolder?.file(
`${basename}.txt`,
this.uploadService.$currentText.value
);
}
// - add .readalong file
this.updateTranslations(ras);
Expand Down Expand Up @@ -292,17 +305,21 @@ export class DemoComponent implements OnDestroy, OnInit {
</body>
<!-- The last step needed is to import the package -->
<script type="module" src='https://unpkg.com/@readalongs/web-component@^1.0.0/dist/web-component/web-component.esm.js'></script>
<script type="module" src='https://unpkg.com/@readalongs/web-component@^${environment.packageJson.singleFileBundleVersion}/dist/web-component/web-component.esm.js'></script>
</html>
`;
const indexHtmlFile = new Blob([sampleHtml], { type: "text/html" });
zipFile.file("index.html", indexHtmlFile);
innerFolder?.file("index.html", indexHtmlFile);
// - add plain text readme
zipFile.file("README.txt", this.readmeFile);
innerFolder?.file("README.txt", this.readmeFile);
// - write zip
zipFile
.generateAsync({ type: "blob" })
.then((content) => saveAs(content, `${basename}.zip`));
zipFile.generateAsync({ type: "blob" }).then(
(content) => saveAs(content, `${basename}.zip`),
(err: HttpErrorResponse) =>
this.toastr.error(err.error.detail, $localize`Download failed.`, {
timeOut: 30000,
})
);
} else {
let audio: HTMLAudioElement = new Audio(this.b64Inputs[0]);
this.rasService
Expand Down
10 changes: 5 additions & 5 deletions packages/studio-web/src/app/studio/studio.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,9 @@ export class StudioComponent implements OnDestroy, OnInit {

formIsDirty() {
return (
this.upload?.audioControl.value !== null ||
this.upload?.textControl.value !== null ||
this.upload?.textInput
this.upload?.audioControl$.value !== null ||
this.upload?.textControl$.value !== null ||
this.upload?.$textInput
);
}

Expand Down Expand Up @@ -200,9 +200,9 @@ export class StudioComponent implements OnDestroy, OnInit {
.pipe(takeUntil(this.unsubscribe$))
.subscribe((audioFile) => {
if (!(audioFile instanceof HttpErrorResponse) && this.upload) {
this.upload.textInput.next("Hello world!");
this.upload.$textInput.next("Hello world!");
this.upload.inputMethod.text = "edit";
this.upload.audioControl.setValue(audioFile);
this.upload.audioControl$.setValue(audioFile);
this.upload?.nextStep();
this.stepper.animationDone.pipe(take(1)).subscribe(() => {
// We can only attach to the shadow dom once it's been created, so unfortunately we need to define the steps like this.
Expand Down
20 changes: 10 additions & 10 deletions packages/studio-web/src/app/upload/upload.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ <h1 i18n="Title for text box" class="title">Text</h1>
<button
i18n="Text download button"
mat-button
[disabled]="!(textInput | async)"
[disabled]="!($textInput | async)"
(click)="downloadText()"
aria-label="Text download button"
class="pr-0"
Expand All @@ -90,8 +90,8 @@ <h1 i18n="Title for text box" class="title">Text</h1>
<div class="row">
<mat-form-field class="col-12 p-0 b-0">
<textarea
[ngModel]="textInput | async"
(ngModelChange)="textInput.next($event)"
[ngModel]="$textInput | async"
(ngModelChange)="$textInput.next($event)"
id="textInput"
class="border rounded b-0 p-0 bg-light"
matInput
Expand Down Expand Up @@ -163,12 +163,12 @@ <h2 i18n="Title for record box" class="subtitle">
<mat-icon class="mat-icon-lg">mic</mat-icon>
<span
i18n="Audio re-record button"
*ngIf="audioControl.value !== null && !this.recording"
*ngIf="audioControl$.value !== null && !this.recording"
>Delete and re-record</span
>
<span
i18n="Audio record button"
*ngIf="audioControl.value === null && !this.recording"
*ngIf="audioControl$.value === null && !this.recording"
>Record</span
>
<span i18n="Audio recording button" *ngIf="this.recording"
Expand All @@ -195,7 +195,7 @@ <h2 i18n="Title for record box" class="subtitle">
i18n="Audio play button"
class="audioControl"
(click)="playRecording()"
*ngIf="!recording && audioControl.value !== null && !playing"
*ngIf="!recording && audioControl$.value !== null && !playing"
mat-button
color="primary"
aria-label="Play button"
Expand All @@ -208,7 +208,7 @@ <h2 i18n="Title for record box" class="subtitle">
class="audioControl"
color="warn"
(click)="stopPlayback()"
*ngIf="!recording && audioControl.value !== null && playing"
*ngIf="!recording && audioControl$.value !== null && playing"
mat-button
aria-label="Stop button"
>
Expand All @@ -222,7 +222,7 @@ <h2 i18n="Title for record box" class="subtitle">
class="audioControl"
color="primary"
(click)="downloadRecording()"
*ngIf="!recording && audioControl.value !== null"
*ngIf="!recording && audioControl$.value !== null"
mat-button
color="primary"
aria-label="Audio save button"
Expand All @@ -236,7 +236,7 @@ <h2 i18n="Title for record box" class="subtitle">
i18n="Audio delete button"
class="audioControl"
(click)="deleteRecording()"
*ngIf="!recording && audioControl.value !== null"
*ngIf="!recording && audioControl$.value !== null"
mat-button
color="warn"
aria-label="Delete button"
Expand Down Expand Up @@ -320,7 +320,7 @@ <h1 i18n="Title for language box" class="title">
>Select Language</mat-label
>
<mat-select
[formControl]="langControl"
[formControl]="langControl$"
required
[disabled]="langMode !== 'specific'"
>
Expand Down
Loading

0 comments on commit f194def

Please sign in to comment.