Skip to content

Commit

Permalink
feat: auto-pause at the of each page. Activated via attribute `auto-p…
Browse files Browse the repository at this point in the history 
…ause-at-end-of-page`

chore: streamlined sprite emit event loop
  • Loading branch information
@deltork
deltork committed Mar 25, 2024
1 parent 3dd284b commit a830a24
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 32 deletions.
14 changes: 14 additions & 0 deletions packages/web-component/cypress/e2e/customizations.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,18 @@ context("Testing creator enabled settings", () => {
cy.get("[data-cy=translation-toggle]").should("be.visible");
});
});

it("testing creator enabling auto pause ", function () {
cy.visit("/ej-fra/index-with-auto-pause.html");
cy.wait("@text");
cy.wait("@audio");
cy.readalong().within(() => {
cy.get("[data-cy=play-button]").click();
cy.wait(12000); //wait for the last word of the first page (at 6.4) + ~5 sec

cy.get("#t0b0d0p0s2w15")
.should("be.visible")
.should("have.class", "reading"); //check the last word is still highlighted
});
});
});
29 changes: 15 additions & 14 deletions packages/web-component/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,21 @@ you make to `/src` will be automatically shown in the browser.

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
| `audio` | `audio` | URL of the audio file | `string` | `undefined` |
| `cssUrl` | `css-url` | Optional custom Stylesheet to override defaults | `string` | `undefined` |
| `displayTranslation` | `display-translation` | Show text translation on at load time | `boolean` | `true` |
| `href` | `href` | URL of the aligned text as readalong XML | `string` | `undefined` |
| `language` | `language` | Language of the interface. In 639-3 code Options are - "eng" for English - "fra" for French | `"eng" \| "fra"` | `'eng'` |
| `mode` | `mode` | Choose mode of ReadAlong - either view (default) or edit | `"EDIT" \| "VIEW"` | `"VIEW"` |
| `pageScrolling` | `page-scrolling` | Toggles the page scrolling from horizontal to vertical. Defaults to horizontal | `"horizontal" \| "vertical"` | `"horizontal"` |
| `playbackRateRange` | `playback-rate-range` | Control the range of the playback rate: allow speeds from 100 - playback-rate-range to 100 + playback-rate-range. | `number` | `15` |
| `scrollBehaviour` | `scroll-behaviour` | Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive) | `"auto" \| "smooth"` | `"smooth"` |
| `svgOverlay` | `svg-overlay` | Overlay This is an SVG overlay to place over the progress bar | `string` | `undefined` |
| `theme` | `theme` | Theme to use: ['light', 'dark'] defaults to 'dark' | `string` | `'light'` |
| `useAssetsFolder` | `use-assets-folder` | Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility | `boolean` | `true` |
| Property | Attribute | Description | Type | Default |
| ---------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
| `audio` | `audio` | URL of the audio file | `string` | `undefined` |
| `cssUrl` | `css-url` | Optional custom Stylesheet to override defaults | `string` | `undefined` |
| `displayTranslation` | `display-translation` | Show text translation on at load time | `boolean` | `true` |
| `href` | `href` | URL of the aligned text as readalong XML | `string` | `undefined` |
| `language` | `language` | Language of the interface. In 639-3 code Options are - "eng" for English - "fra" for French | `"eng" \| "fra"` | `'eng'` |
| `mode` | `mode` | Choose mode of ReadAlong - either view (default) or edit | `"EDIT" \| "VIEW"` | `"VIEW"` |
| `pageScrolling` | `page-scrolling` | Toggles the page scrolling from horizontal to vertical. Defaults to horizontal | `"horizontal" \| "vertical"` | `"horizontal"` |
| `playbackRateRange` | `playback-rate-range` | Control the range of the playback rate: allow speeds from 100 - playback-rate-range to 100 + playback-rate-range. | `number` | `15` |
| `scrollBehaviour` | `scroll-behaviour` | Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive) | `"auto" \| "smooth"` | `"smooth"` |
| `svgOverlay` | `svg-overlay` | Overlay This is an SVG overlay to place over the progress bar | `string` | `undefined` |
| `theme` | `theme` | Theme to use: ['light', 'dark'] defaults to 'dark' | `string` | `'light'` |
| `useAssetsFolder` | `use-assets-folder` | Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility | `boolean` | `true` |
| `autoPauseAtEndOfPage` | `auto-pause-at-end-of-page` | Activate the automatic pausing of the audio at the end of the page | `boolean` | `false` |

#### IMAGES

Expand Down
8 changes: 8 additions & 0 deletions packages/web-component/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ export namespace Components {
* URL of the audio file
*/
"audio": string;
/**
* Auto Pause at end of every page
*/
"autoPauseAtEndOfPage"?: boolean;
/**
* Change theme
*/
Expand Down Expand Up @@ -87,6 +91,10 @@ declare namespace LocalJSX {
* URL of the audio file
*/
"audio"?: string;
/**
* Auto Pause at end of every page
*/
"autoPauseAtEndOfPage"?: boolean;
/**
* Optional custom Stylesheet to override defaults
*/
Expand Down
38 changes: 37 additions & 1 deletion packages/web-component/src/components/read-along-component/read-along.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,11 @@ export class ReadAlongComponent {
*/
@Prop() playbackRateRange: number = 15;

/**
* Auto Pause at end of every page
*/
@Prop() autoPauseAtEndOfPage? = false;

/************
* STATES *
************/
Expand Down Expand Up @@ -172,7 +177,9 @@ export class ReadAlongComponent {
this.isScrolling = false;
}, 125);
}

autoPauseTimer: any;
endOfPageTags: Alignment = {};
finalTaggedWord: string;
/************
* LISTENERS *
************/
Expand Down Expand Up @@ -877,6 +884,22 @@ export class ReadAlongComponent {
} else {
this.images[i] = null;
}
//get the ids for the last word on each the page
if ("paragraphs" in page) {
try {
const paragraphs = (page as Page).paragraphs;
const sentences = paragraphs[
paragraphs.length - 1
].querySelectorAll("s:not(.translation)"); //get non-translation sentences in the last paragraph
const word =
sentences[sentences.length - 1].querySelector("w:last-of-type"); //get the last word of the last sentence
this.endOfPageTags[word.id] = [
parseFloat(word.getAttribute("time")), //in seconds
parseFloat(word.getAttribute("dur")) * 1000, // in milliseconds
];
this.finalTaggedWord = word.id; // do not pause on the last word of the read-along
} catch (err) {}
}
}
// this.parsed_text.map((page, i) => page.img ? [i, page.img] : [i, null])

Expand Down Expand Up @@ -938,6 +961,19 @@ export class ReadAlongComponent {
.subscribe((el_tag) => {
// Only highlight when playing
if (this.playing) {
//if auto pause is active and not on last word of the read along pause the audio
if (
this.autoPauseAtEndOfPage &&
el_tag in this.endOfPageTags &&
this.finalTaggedWord !== el_tag
) {
//clear previous timeout if active
if (this.autoPauseTimer) window.clearTimeout(this.autoPauseTimer);
//pause 25ms before end of word
this.autoPauseTimer = window.setTimeout(() => {
this.pause();
}, this.endOfPageTags[el_tag][1] - 25);
}
// Turn tag to query
let query = this.tagToQuery(el_tag);
// select the element with that tag
Expand Down
29 changes: 15 additions & 14 deletions packages/web-component/src/components/read-along-component/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,21 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
| `audio` | `audio` | URL of the audio file | `string` | `undefined` |
| `cssUrl` | `css-url` | Optional custom Stylesheet to override defaults | `string` | `undefined` |
| `displayTranslation` | `display-translation` | Show text translation on at load time | `boolean` | `true` |
| `href` | `href` | URL of the aligned text as readalong XML | `string` | `undefined` |
| `language` | `language` | Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish) | `"eng" \| "fra" \| "spa"` | `"eng"` |
| `mode` | `mode` | Choose mode of ReadAlong - either view (default) or edit | `"EDIT" \| "VIEW"` | `"VIEW"` |
| `pageScrolling` | `page-scrolling` | Toggles the page scrolling from horizontal to vertical. Defaults to horizontal | `"horizontal" \| "vertical"` | `"horizontal"` |
| `playbackRateRange` | `playback-rate-range` | Control the range of the playback rate: allow speeds from 100 - playback-rate-range to 100 + playback-rate-range. | `number` | `15` |
| `scrollBehaviour` | `scroll-behaviour` | Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive) | `"auto" \| "smooth"` | `"smooth"` |
| `svgOverlay` | `svg-overlay` | Overlay This is an SVG overlay to place over the progress bar | `string` | `undefined` |
| `theme` | `theme` | Theme to use: ['light', 'dark'] defaults to 'dark' | `string` | `"light"` |
| `useAssetsFolder` | `use-assets-folder` | Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility | `boolean` | `true` |
| Property | Attribute | Description | Type | Default |
| ---------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- |
| `audio` | `audio` | URL of the audio file | `string` | `undefined` |
| `autoPauseAtEndOfPage` | `auto-pause-at-end-of-page` | Auto Pause at end of every page | `boolean` | `false` |
| `cssUrl` | `css-url` | Optional custom Stylesheet to override defaults | `string` | `undefined` |
| `displayTranslation` | `display-translation` | Show text translation on at load time | `boolean` | `true` |
| `href` | `href` | URL of the aligned text as readalong XML | `string` | `undefined` |
| `language` | `language` | Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish) | `"eng" \| "fra" \| "spa"` | `"eng"` |
| `mode` | `mode` | Choose mode of ReadAlong - either view (default) or edit | `"EDIT" \| "VIEW"` | `"VIEW"` |
| `pageScrolling` | `page-scrolling` | Toggles the page scrolling from horizontal to vertical. Defaults to horizontal | `"horizontal" \| "vertical"` | `"horizontal"` |
| `playbackRateRange` | `playback-rate-range` | Control the range of the playback rate: allow speeds from 100 - playback-rate-range to 100 + playback-rate-range. | `number` | `15` |
| `scrollBehaviour` | `scroll-behaviour` | Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive) | `"auto" \| "smooth"` | `"smooth"` |
| `svgOverlay` | `svg-overlay` | Overlay This is an SVG overlay to place over the progress bar | `string` | `undefined` |
| `theme` | `theme` | Theme to use: ['light', 'dark'] defaults to 'dark' | `string` | `"light"` |
| `useAssetsFolder` | `use-assets-folder` | Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility | `boolean` | `true` |


## Methods
Expand Down
Loading

0 comments on commit a830a24

Please sign in to comment.