feat: added version information in the interface and outputs

ReadAlongs · May 29, 2024 · dcf30f0 · dcf30f0
1 parent 42541a8
commit dcf30f0
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ www
 .nx
 .python-version
 *~
+**/version.ts
diff --git a/README.md b/README.md
@@ -21,17 +21,29 @@ This mono repo, formerly called Web-Component, now called Studio-Web, combines f
 ## Table of Contents
 
 - [ReadAlongs Web App Suite](#readalongs-web-app-suite)
+  - [Table of Contents](#table-of-contents)
   - [For maintainers and developers](#for-maintainers-and-developers)
     - [Cloning](#cloning)
     - [Installing dependencies](#installing-dependencies)
     - [Serving/Development](#servingdevelopment)
+      - [Web-Component](#web-component)
+      - [Studio-Web](#studio-web)
+      - [Understanding where the components come from when you run locally](#understanding-where-the-components-come-from-when-you-run-locally)
     - [Testing](#testing)
-    - [Build and Publish](#build--publish)
+      - [Web-Component](#web-component-1)
+      - [Studio-Web](#studio-web-1)
+    - [Internationalization (i18n) and localization (l10n)](#internationalization-i18n-and-localization-l10n)
+    - [Build \& Publish](#build--publish)
+      - [Preparing to publish the Web Component \& Angular Wrapper](#preparing-to-publish-the-web-component--angular-wrapper)
+      - [Web Component \& Angular Wrapper - via a tag push](#web-component--angular-wrapper---via-a-tag-push)
+      - [Web Component \& Angular Wrapper - manually - please don't do this!](#web-component--angular-wrapper---manually---please-dont-do-this)
+      - [Studio-Web](#studio-web-2)
   - [Maintainers](#maintainers)
   - [Contributing](#contributing)
   - [Acknowledgements](#acknowledgements)
+    - [Northeastern University collaboration](#northeastern-university-collaboration)
   - [Citing](#citing)
-  - [License](#license)
+- [License](#license)
 
 ## TL;DR Spinning up the Studio Web App locally
 
@@ -100,11 +112,11 @@ If you are only developing the web-component you can run the following to start
 
 Then, in another terminal, run the following to serve the web-component:
 
-    npx nx serve web-component
+    npx nx dev-build web-component
 
 Alternatively run together as:
 
-    npx nx run-many --targets=serve-test-data,serve --projects=web-component
+    npx nx dev web-component
 
 #### Studio-Web
 

diff --git a/packages/studio-web/project.json b/packages/studio-web/project.json
@@ -104,7 +104,8 @@
           "port": 4204
         }
       },
-      "defaultConfiguration": "development-en"
+      "defaultConfiguration": "development-en",
+      "dependsOn": ["update-version-file"]
     },
     "serve-es": {
       "executor": "@angular-builders/custom-webpack:dev-server",

diff --git a/packages/studio-web/src/app/app.component.html b/packages/studio-web/src/app/app.component.html
@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<div class="version">&#64;readalongs/studio-web version: {{ version }}</div>
diff --git a/packages/studio-web/src/app/app.component.sass b/packages/studio-web/src/app/app.component.sass
@@ -0,0 +1,9 @@
+.version
+  font-size: 0.9em
+  color: #aaa
+  display: flex
+  flex-direction: column
+  flex-wrap: no-wrap
+  align-items: center
+  justify-content: space-between
+  align-content:space-around
diff --git a/packages/studio-web/src/app/app.component.ts b/packages/studio-web/src/app/app.component.ts
@@ -1,14 +1,15 @@
 import { Subject } from "rxjs";
 
 import { Component, OnDestroy, OnInit } from "@angular/core";
-
+import { environment } from "../environments/environment";
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.sass"],
 })
 export class AppComponent implements OnDestroy, OnInit {
   unsubscribe$ = new Subject<void>();
+  version = environment.packageJson.singleFileBundleVersion;
   constructor() {}
   ngOnInit(): void {}
 

diff --git a/packages/studio-web/src/app/shared/download/download.service.ts b/packages/studio-web/src/app/shared/download/download.service.ts
@@ -175,12 +175,13 @@ Please host all assets on your server, include the font and package imports defi
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
+        <meta name="generator" content="@readalongs/studio-web ${environment.packageJson.singleFileBundleVersion}">
         <title>${slots.title}</title>
         <link rel="stylesheet" href="${this.b64Service.jsAndFontsBundle$.value[1]}">
         <script src="${this.b64Service.jsAndFontsBundle$.value[0]}" version="${environment.packageJson.singleFileBundleVersion}" timestamp="${environment.packageJson.singleFileBundleTimestamp}"></script>
       </head>
       <body>
-          <read-along href="data:application/readalong+xml;base64,${rasB64}" audio="${b64Audio}" image-assets-folder="">
+          <read-along version="${environment.packageJson.singleFileBundleVersion}"  href="data:application/readalong+xml;base64,${rasB64}" audio="${b64Audio}" image-assets-folder="">
           <span slot="read-along-header">${slots.title}</span>
           <span slot="read-along-subheader">${slots.subtitle}</span>
           </read-along>
@@ -298,6 +299,8 @@ Please host all assets on your server, include the font and package imports defi
             <head>
                 <meta charset="UTF-8">
                 <title>${slots.title}</title>
+                <meta name="generator" content="@readalongs/studio-web ${environment.packageJson.singleFileBundleVersion}">
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
                 <!-- Import fonts. Material Icons are needed by the web component -->
                 <link href="https://fonts.googleapis.com/css?family=Lato%7CMaterial+Icons%7CMaterial+Icons+Outlined" rel="stylesheet">
             </head>

diff --git a/packages/web-component/cypress/e2e/basic.cy.js b/packages/web-component/cypress/e2e/basic.cy.js
@@ -32,7 +32,11 @@ context("The Readalong Component", () => {
   it("should play a single word when clicked", () => {
     cy.wait(["@text", "@audio"]);
 
-    cy.readalong().contains("technologies").click();
+    cy.readalong().within(() => {
+      //wait for initialization process to be completed
+      cy.get("[data-cy=play-button]").should("be.enabled");
+      cy.get("span").contains("technologies").click();
+    });
   });
 
   describe("the progress bar", () => {

diff --git a/packages/web-component/cypress/e2e/customizations.cy.js b/packages/web-component/cypress/e2e/customizations.cy.js
@@ -36,4 +36,24 @@ context("Testing creator enabled settings", () => {
         .should("have.class", "reading"); //check the last word is still highlighted
     });
   });
+
+  it("testing creator enabling one-column-page-layout ", function () {
+    cy.intercept(/\.png/).as("image");
+    cy.visit("/ej-fra/index-one-column.html");
+    cy.wait(["@text", "@audio", "@image"]);
+    cy.readalong().within(() => {
+      //is image above the text
+      cy.get(".page")
+        .first()
+        .within(() => {
+          cy.get(".image__container").then((imgContainer) => {
+            cy.get(".page__col__text").then((textElement) => {
+              expect(
+                imgContainer[0].getBoundingClientRect().top,
+              ).to.be.lessThan(textElement[0].getBoundingClientRect().top);
+            });
+          });
+        });
+    });
+  });
 });
diff --git a/packages/web-component/cypress/e2e/settings.cy.js b/packages/web-component/cypress/e2e/settings.cy.js
@@ -87,4 +87,17 @@ context("Testing end user enabled settings", () => {
       cy.getAllLocalStorage();
     });
   });
+  it("has version information", () => {
+    cy.readalong().within(() => {
+      cy.get("[data-test-id=settings-button]").click();
+      cy.get("[data-test-id=settings]")
+        .should("be.visible")
+        .within(() => {
+          //check version is semantic
+          cy.get(".version")
+            .invoke("text")
+            .should("match", /\d+\.\d+\.\d+$/);
+        });
+    });
+  });
 });
diff --git a/packages/web-component/package.json b/packages/web-component/package.json
@@ -15,7 +15,7 @@
     "dist/"
   ],
   "scripts": {
-    "bundle": "node b64Fonts.js && webpack --config webpack.config.js; packageVersion=$(npm view ../../node_modules/@readalongs/web-component version); timestamp=$(date \"+%Y-%m-%d+%H-%M-%S\") && cd ../studio-web && npm pkg set singleFileBundleVersion=\"${packageVersion}\" && npm pkg set singleFileBundleTimestamp=\"${timestamp}\"",
+    "bundle": "npm run update-version-file && node b64Fonts.js && webpack --config webpack.config.js; packageVersion=$(npm view ../../node_modules/@readalongs/web-component version); timestamp=$(date \"+%Y-%m-%d+%H-%M-%S\") && cd ../studio-web && npm pkg set singleFileBundleVersion=\"${packageVersion}\" && npm pkg set singleFileBundleTimestamp=\"${timestamp}\"",
     "cy:run": "cypress run",
     "test:full-pipeline": "npm run serve-test-data & nx run serve & npm run wait-for-test-server && npm run test:once",
     "test:once": "cypress run",

diff --git a/packages/web-component/project.json b/packages/web-component/project.json
@@ -23,6 +23,7 @@
     "build": {
       "executor": "@nxext/stencil:build",
       "outputs": ["{options.outputPath}"],
+      "dependsOn": ["update-version-file"],
       "options": {
         "projectType": "library",
         "tsConfig": "packages/web-component/tsconfig.lib.json",
@@ -47,8 +48,9 @@
       }
     },
     "e2e": {
-      "executor": "@nxext/stencil:e2e",
+      "executor": "@nxext/cypress:cypress",
       "outputs": ["{options.outputPath}"],
+      "dependsOn": ["build"],
       "options": {
         "projectType": "library",
         "tsConfig": "packages/web-component/tsconfig.lib.json",
@@ -62,6 +64,36 @@
       "options": {
         "lintFilePatterns": "packages/web-component/**/*.{ts,tsx}"
       }
+    },
+    "update-version-file": {
+      "command": "node -p \"'export const PACKAGE_VERSION = ' + JSON.stringify(require('./packages/web-component/package.json').version) + ';'\"> packages/web-component/src/version.ts"
+    },
+    "serve-test-data": {
+      "command": "sirv --dev --cors --port 8941 ./packages/web-component/test-data/"
+    },
+    "dev-build": {
+      "executor": "@nxext/stencil:build",
+      "outputs": ["{options.outputPath}"],
+      "dependsOn": ["update-version-file"],
+      "options": {
+        "projectType": "library",
+        "tsConfig": "packages/web-component/tsconfig.lib.json",
+        "configPath": "packages/web-component/stencil.config.ts",
+        "outputPath": "dist/packages/web-component",
+        "dev": true,
+        "watch": true,
+        "serve": true
+      }
+    },
+    "dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "npx nx serve-test-data web-component",
+          "npx nx dev-build web-component"
+        ],
+        "parallel": true
+      }
     }
   }
 }
diff --git a/packages/web-component/src/components/read-along-component/read-along.tsx b/packages/web-component/src/components/read-along-component/read-along.tsx
@@ -34,7 +34,7 @@ import {
 import { web_component as eng_strings } from "../../i18n/messages.eng.json";
 import { web_component as fra_strings } from "../../i18n/messages.fra.json";
 import { web_component as spa_strings } from "../../i18n/messages.spa.json";
-
+import { PACKAGE_VERSION } from "../../version";
 const LOADING = 0;
 const LOADED = 1;
 const ERROR_PARSING = 2;
@@ -2027,7 +2027,9 @@ export class ReadAlongComponent {
         </button>
         {this.getI18nString("auto-pause")}
       </p>
-
+      <p class="version">
+        @readalongs/web-component version: {PACKAGE_VERSION}
+      </p>
       <div class="footer">
         <button
           type="button"
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,3 +7,4 @@ www @@
     .nx
     .python-version
     *~
+    **/version.ts
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		<router-outlet></router-outlet>
		<div class="version">@readalongs/studio-web version: {{ version }}</div>