Skip to content

Commit

Permalink
Merge pull request #269 from ReadAlongs/dev.del/gear-menu
Browse files Browse the repository at this point in the history 
feat: created a settings dialog
  • Loading branch information
@joanise
joanise committed May 8, 2024
2 parents 3bbad6b + a517f65 commit 4ff7b01
Show file tree
Hide file tree
Showing 16 changed files with 599 additions and 57 deletions.
38 changes: 20 additions & 18 deletions packages/studio-web/src/app/shared/download/download.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,46 +317,48 @@ Please host all assets on your server, include the font and package imports defi
const indexHtmlFile = new Blob([sampleHtml], { type: "text/html" });
innerFolder?.file("index.html", indexHtmlFile);
//snippet for WP deployment
const today = new Date();
const month =
today.getMonth() < 9
? `0${today.getMonth() + 1}`
: `${today.getMonth() + 1}`;
const WP_UPLOAD_FOLDER = `/wp-content/uploads/${today.getFullYear()}/${month}/`;
const WP_deployment_readme = new Blob([
this.readmeFile,
`
WordPress Deployment Guide
Setup the plugin (do this once)
Install and activate our plugin 'wp-read-along-web-app-loader' on your WordPress site.
Install and activate our plugin 'wp-read-along-web-app-loader' on your WordPress site.
See https://github.com/ReadAlongs/Studio-Web/tree/main/packages/web-component/wordpress-plugin for more information.
Deploy the read-along
Upload the ${basename}.readalong and ${basename}.${audioExtension} to your Media Library of your WordPress site.
Deploy the read-along
Use the text editor to paste the snippet below in your WordPress page
Upload the images, ${basename}.readalong and ${basename}.mp3 to your Media Library of your WordPress site.
Replace assets/ with the path from your Media Library
Use the text editor to paste the snippet below in your WordPress page:
---- WordPress Deployment SNIPPET ----
<!-- Here is how you declare the Web Component. Supported languages: en, fr -->
[read_along_web_app_loader image-asset-folder="./" version="^${environment.packageJson.singleFileBundleVersion}"]
<read-along href="assets/${basename}.readalong" audio="assets/${basename}.${audioExtension}" theme="light" language="en" image-assets-folder="assets/">
<!-- wp:html -->
[read_along_web_app_loader version="^${environment.packageJson.singleFileBundleVersion}"]
<read-along href="${WP_UPLOAD_FOLDER}${basename}.readalong" audio="${WP_UPLOAD_FOLDER}${basename}.mp3" theme="light" language="eng" image-assets-folder="${WP_UPLOAD_FOLDER}">
<span slot='read-along-header'>${slots.title}</span>
<span slot='read-along-subheader'>${slots.subtitle}</span>
</read-along>
[/read_along_web_app_loader]
<!-- /wp:html -->
----- END OF SNIPPET----
`,
`,
]);

// - add plain text readme
// TODO: switch to this when the WP installation instructions are added
// innerFolder?.file("README.txt", WP_deployment_readme);
innerFolder?.file("README.txt", this.readmeFile);
// - add plain text readme with regular and WordPress installation instructions
innerFolder?.file("readme.txt", WP_deployment_readme);
// - write zip
zipFile.generateAsync({ type: "blob" }).then(
(content) => saveAs(content, `${basename}.zip`),
Expand Down
91 changes: 91 additions & 0 deletions packages/web-component/cypress/e2e/settings.cy.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
context("Testing end user enabled settings", () => {
beforeEach(() => {
cy.intercept(/\.readalong/).as("text");
cy.intercept(/\.m4a/).as("audio");

cy.visit("/ej-fra/");
cy.wait("@text");
cy.wait("@audio");
});
it("can open the settings", () => {
cy.readalong().within(() => {
cy.get("[data-test-id=settings-button]").click();
cy.get("[data-test-id=settings]").should("be.visible");
});
});
it("can close the settings", () => {
cy.readalong().within(() => {
cy.get("[data-test-id=settings-button]").click();
cy.get("[data-test-id=settings]").should("be.visible");
cy.get("[data-test-id=settings-close-button]").click();
cy.get("[data-test-id=settings]").should("not.exist");
});
});
it("can change page animation settings", () => {
cy.readalong().within(() => {
cy.get("[data-test-id=settings-button]").click();
cy.get("[data-test-id=settings]").should("be.visible");
cy.get("[data-test-id=settings-scroll-behavior]").should(
"have.text",
"check_box",
);
cy.get("[data-test-id=settings-scroll-behavior]").click();
cy.get("[data-test-id=settings-scroll-behavior]").should(
"have.text",
"check_box_outline_blank",
);
cy.get("[data-test-id=settings-close-button]").click();
cy.get("[data-test-id=settings]").should("not.exist");
});
});
it("can change page turn settings", () => {
cy.readalong().within(() => {
cy.get("[data-test-id=settings-button]").click();
cy.get("[data-test-id=settings]").should("be.visible");
cy.get("[data-test-id=settings-auto-pause]").should(
"have.text",
"check_box_outline_blank",
);
cy.get("[data-test-id=settings-auto-pause]").click();
cy.get("[data-test-id=settings-auto-pause]").should(
"have.text",
"check_box",
);
cy.get("[data-test-id=settings-pause-timeout]").should("not.exist");
cy.get("[data-test-id=settings-close-button]").click();
cy.get("[data-test-id=settings]").should("not.exist");
cy.get("[data-cy=play-button]").click();
cy.wait(7000); //6740 timestamp of the first word on second page
cy.get("#t0b0d1p0s0w0").should("not.be.visible");

cy.get("[data-cy=play-button]").should("be.visible");
});
});
it("can save user preference", () => {
cy.readalong().within(() => {
cy.get("[data-test-id=settings-button]").click();
cy.get("[data-test-id=settings]").should("be.visible");
cy.get("[data-test-id=settings-auto-pause]").should(
"have.text",
"check_box_outline_blank",
);
cy.get("[data-test-id=settings-save").should("be.disabled");
cy.get("[data-test-id=settings-auto-pause]").click();
cy.get("[data-test-id=settings-auto-pause]").should(
"have.text",
"check_box",
);
cy.get("[data-test-id=settings-save").should("be.enabled").click();
cy.get("[data-test-id=settings-close-button]").click();
cy.reload();
cy.get("[data-test-id=settings-button]").click();
cy.get("[data-test-id=settings-auto-pause]").should(
"have.text",
"check_box",
);

//reset back to default
cy.getAllLocalStorage();
});
});
});
8 changes: 4 additions & 4 deletions packages/web-component/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
* It contains typing information for all components that exist in this project.
*/
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
import { Alignment, InterfaceLanguage, ReadAlongMode } from "./index.d";
import { Alignment, InterfaceLanguage, ReadAlongMode, ScrollBehaviour } from "./index.d";
import { Subject } from "rxjs";
import { Element } from "@stencil/core";
export { Alignment, InterfaceLanguage, ReadAlongMode } from "./index.d";
export { Alignment, InterfaceLanguage, ReadAlongMode, ScrollBehaviour } from "./index.d";
export { Subject } from "rxjs";
export { Element } from "@stencil/core";
export namespace Components {
Expand Down Expand Up @@ -80,7 +80,7 @@ export namespace Components {
/**
* Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive)
*/
"scrollBehaviour": "smooth" | "auto";
"scrollBehaviour": ScrollBehaviour;
/**
* Overlay This is an SVG overlay to place over the progress bar
*/
Expand Down Expand Up @@ -155,7 +155,7 @@ declare namespace LocalJSX {
/**
* Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive)
*/
"scrollBehaviour"?: "smooth" | "auto";
"scrollBehaviour"?: ScrollBehaviour;
/**
* Overlay This is an SVG overlay to place over the progress bar
*/
Expand Down
Loading

0 comments on commit 4ff7b01

Please sign in to comment.