Skip to content

Commit

Permalink
fix(assets)!: get rid of useAssetsFolder boolean and replace with ima…
Browse files Browse the repository at this point in the history 
…geAssetsFolder string

BREAKING CHANGE: useAssetsFolder is no longer valid.

The equivalent is imageAssetsFolder='assets/' which is the default.
  • Loading branch information
@roedoejet
roedoejet committed Mar 19, 2024
1 parent c4bad4f commit 6416c8d
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 34 deletions.
4 changes: 2 additions & 2 deletions packages/studio-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,6 @@
"tslib": "^2.3.0",
"zone.js": "^0.11.8"
},
"singleFileBundleVersion": "1.1.0",
"singleFileBundleTimestamp": "2023-10-23+21-05-11"
"singleFileBundleVersion": "1.1.1",
"singleFileBundleTimestamp": "2024-03-18+17-36-42"
}
4 changes: 2 additions & 2 deletions packages/studio-web/src/app/demo/demo.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ Please host all assets on your server, include the font and package imports defi
<script src="${this.b64Inputs[2][0]}" version="${environment.packageJson.singleFileBundleVersion}" timestamp="${environment.packageJson.singleFileBundleTimestamp}"></script>
</head>
<body>
<read-along href="data:application/readalong+xml;base64,${b64ras}" audio="${this.b64Inputs[0]}" use-assets-folder="false">
<read-along href="data:application/readalong+xml;base64,${b64ras}" audio="${this.b64Inputs[0]}" image-assets-folder="">
<span slot="read-along-header">${this.slots.title}</span>
<span slot="read-along-subheader">${this.slots.subtitle}</span>
</read-along>
Expand Down Expand Up @@ -300,7 +300,7 @@ Please host all assets on your server, include the font and package imports defi
<body>
<!-- Here is how you declare the Web Component. Supported languages: en, fr -->
<read-along href="assets/${basename}.readalong" audio="assets/${basename}.mp3" theme="light" language="en">
<read-along href="assets/${basename}.readalong" audio="assets/${basename}.mp3" theme="light" language="en" image-assets-folder="assets/">
<span slot='read-along-header'>${this.slots.title}</span>
<span slot='read-along-subheader'>${this.slots.subtitle}</span>
</read-along>
Expand Down
2 changes: 1 addition & 1 deletion packages/studio-web/src/assets/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/web-component/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@readalongs/web-component",
"version": "1.1.1",
"version": "1.2.0",
"description": "ReadAlong Web Component",
"main": "dist/index.cjs.js",
"module": "dist/index.js",
Expand Down
16 changes: 8 additions & 8 deletions packages/web-component/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,10 @@ export namespace Components {
* URL of the aligned text as readalong XML
*/
"href": string;
/**
* Toggle the use of an assets folder. All image paths will be prefixed with this. Defaults to 'assets'. .readalong files should just contain base filenames not the full paths to the images.
*/
"imageAssetsFolder": string;
/**
* Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish)
*/
Expand Down Expand Up @@ -64,10 +68,6 @@ export namespace Components {
* Theme to use: ['light', 'dark'] defaults to 'dark'
*/
"theme": string;
/**
* Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility
*/
"useAssetsFolder": boolean;
}
}
declare global {
Expand Down Expand Up @@ -99,6 +99,10 @@ declare namespace LocalJSX {
* URL of the aligned text as readalong XML
*/
"href"?: string;
/**
* Toggle the use of an assets folder. All image paths will be prefixed with this. Defaults to 'assets'. .readalong files should just contain base filenames not the full paths to the images.
*/
"imageAssetsFolder"?: string;
/**
* Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish)
*/
Expand Down Expand Up @@ -127,10 +131,6 @@ declare namespace LocalJSX {
* Theme to use: ['light', 'dark'] defaults to 'dark'
*/
"theme"?: string;
/**
* Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility
*/
"useAssetsFolder"?: boolean;
}
interface IntrinsicElements {
"read-along": ReadAlong;
Expand Down
15 changes: 9 additions & 6 deletions 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 @@ -96,11 +96,13 @@ export class ReadAlongComponent {
@Prop() cssUrl?: string;

/**
* Toggle the use of assets folder for resolving urls. Defaults to on
* to maintain backwards compatibility
* Toggle the use of an assets folder. All image paths
* will be prefixed with this. Defaults to 'assets'.
* .readalong files should just contain base filenames
* not the full paths to the images.
*/

@Prop() useAssetsFolder: boolean = true;
@Prop() imageAssetsFolder: string = "assets/";

/**
* Toggles the page scrolling from horizontal to vertical. Defaults to horizontal
Expand Down Expand Up @@ -208,11 +210,12 @@ export class ReadAlongComponent {
*/
private urlTransform(path: string): string {
if (
this.useAssetsFolder &&
this.imageAssetsFolder &&
looksLikeRelativePath(path) &&
!path.startsWith("blob")
)
return "assets/" + path;
) {
return this.imageAssetsFolder + path;
}
return path;

function looksLikeRelativePath(path: string): boolean {
Expand Down
28 changes: 14 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,20 @@

## 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` |
| `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` |
| `imageAssetsFolder` | `image-assets-folder` | Toggle the use of an assets folder. All image paths will be prefixed with this. Defaults to 'assets'. .readalong files should just contain base filenames not the full paths to the images. | `string` | `"assets/"` |
| `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"` |


## Methods
Expand Down

0 comments on commit 6416c8d

Please sign in to comment.