feat: connect studio tour to editor tour

packages/studio-web/src/app/app.component.html

@@ -13,6 +13,7 @@
       Studio
     </button>
     <button
+      id="goToEditor"
       class="nav__button plausible-event-name=Editor"
       mat-button
       [color]="currentURL === '/editor' ? 'accent' : ''"

packages/studio-web/src/app/editor/editor.component.ts

@@ -114,6 +114,10 @@ export class EditorComponent implements OnDestroy, OnInit, AfterViewInit {
       e.stopPropagation();
       segment.play();
     });
+
+    if (window.location.hash.endsWith("startTour=yes")) {
+      this.startTour();
+    }
   }
 
   ngOnInit(): void {}

packages/studio-web/src/app/shepherd.steps.ts

@@ -1,6 +1,5 @@
-import { title } from "process";
 import { environment } from "../environments/environment";
-import { text } from "stream/consumers";
+import Tour from "shepherd.js/src/types/tour";
 
 export const intro_step: any = {
   title: $localize`Welcome to ReadAlong Studio`,
@@ -385,10 +384,11 @@ export const readalong_go_back_step: any = {
       text: $localize`Back`,
       type: "back",
     },
+
     {
       classes: "shepherd-button-primary",
-      text: $localize`Finish`,
-      type: "cancel",
+      text: $localize`Next`,
+      type: "next",
     },
   ],
   id: "readalong-back",
@@ -549,3 +549,32 @@ export const readalong_add_annotations_step: any = {
   ],
   id: "readalong-add-annotation",
 };
+
+export const readalong_go_to_editor: any = {
+  title: $localize`Go to the Editor`,
+  text: $localize`Once you've downloaded your ReadAlong, you can reload it into the Editor to continue editing it.`,
+  attachTo: {
+    element: "#goToEditor",
+    on: "bottom",
+  },
+  buttons: [
+    {
+      classes: "shepherd-button-primary",
+      text: $localize`Back`,
+      type: "back",
+    },
+    {
+      classes: "shepherd-button-primary",
+      text: $localize`Finish`,
+      type: "cancel",
+    },
+    {
+      classes: "shepherd-button-warning",
+      text: $localize`Editor`,
+      action: function () {
+        if (this) (this as unknown as Tour).complete();
+        window.location.hash = "#/editor?startTour=yes";
+      },
+    },
+  ],
+};

packages/studio-web/src/app/studio/studio.component.ts

@@ -33,6 +33,7 @@ import {
   text_file_step,
   text_write_step,
   readalong_add_annotations_step,
+  readalong_go_to_editor,
 } from "../shepherd.steps";
 import { DemoComponent } from "../demo/demo.component";
 import { UploadComponent } from "../upload/upload.component";
@@ -248,6 +249,7 @@ export class StudioComponent implements OnDestroy, OnInit {
                   ?.shadowRoot?.querySelector("#title__slot__container"),
                 on: "bottom",
               };
+
               this.shepherdService.next();
               // Strangely, adding steps actually removes all previous steps so we need to start the tour again here.
               this.shepherdService.addSteps([
@@ -260,6 +262,7 @@ export class StudioComponent implements OnDestroy, OnInit {
                 readalong_add_annotations_step,
                 readalong_export_step,
                 readalong_go_back_step,
+                readalong_go_to_editor,
               ]);
               this.shepherdService.start();
             });

packages/studio-web/src/i18n/messages.es.json

@@ -75,7 +75,6 @@
     "668489750030842261": "Pero tenga cuidado, regresar al paso anterior quiere decir que perderá sus traducciones y sus imágenes.",
     "3430021493872613524": "Advertencia: Utilizar la fecha de atrás del buscador hace que usted salga de la app y puede que también borre todo su texto y su audio así que se debe evitar usar este botón. ",
     "5849788734463744687": "En su lugar, use el botón «Paso 1» para regresar y cambiar su texto o audio.",
-    "65984904390749158": "Terminar",
     "5175388690035905510": "Editor para su ReadAlong exportados",
     "5831797882771509684": "Este editor le permite modificar su ReadAlong exportado. Tenga en cuenta que esta herramienta solo acepta el formato HTML offline.",
     "5429481539069429354": "Seleccione un fichero",
@@ -90,6 +89,10 @@
     "2773189193481434399": "Puede corregir errores de ortografía haciendo clic en una palabra y editándola.",
     "521889729172032768": "Agregar otras anotaciones",
     "8356749373768982906": "Para agregar anotaciones lingüísticas o de otro tipo a su ReadAlong, defina las capas de anotación haciendo clic aquí. Si más tarde quiere borrar la capa, haga clic en el icono 🗑️ después de haber borrado todos los datos en esa capa.",
+    "4796729421526127263": "Ir al Editor",
+    "1630288581226787121": "Después de haber descargado su ReadAlong, puede volver a abrirlo en el Editor para continuar editándolo.",
+    "65984904390749158": "Terminar",
+    "3742657416068781599": "Al editor",
     "8428348909593474745": "Paso 1",
     "3614618598824071164": " Esta es una herramienta diseñada para ayudarlo a crear su propio 'readalong' que resalta las palabras a medida que se pronuncian. Puede ver {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} este ejemplo en el idioma cree oriental{$CLOSE_LINK} para tener una mejor idea de qué es un 'readalong'. ",
     "5224223351795929492": "Para empezar a crear su propio 'readalong' siga el tour del sitio haciendo clic en el botón «Siga el tour» y siguiendo los pasos descritos aquí debajo.",

packages/studio-web/src/i18n/messages.fr.json

@@ -75,7 +75,6 @@
     "668489750030842261": "Mais attention, retourner en arrière vous fera perdre vos traductions et vos images.",
     "3430021493872613524": "Attention: si vous utilisez le bouton de retour de votre navigateur, vous quitterez l'appli au complet et perdrez probablement aussi tout votre texte et votre audio. ",
     "5849788734463744687": "Utilisez plutôt le bouton \"Étape 1\" pour retourner modifier votre texte ou votre audio.",
-    "65984904390749158": "Terminer",
     "5175388690035905510": "Éditeur pour votre ReadAlong",
     "5831797882771509684": "Cet outil vous permet de modifier votre ReadAlong. Notez que cet outil n'accepte que le format HTML hors réseau.",
     "5429481539069429354": "Choisir un fichier",
@@ -90,6 +89,10 @@
     "2773189193481434399": "Pour corriger une faute d'orthographe, cliquez sur un mot et modifiez-le.",
     "521889729172032768": "Ajouter d'autres annotations",
     "8356749373768982906": "Pour ajouter des annotations linguistiques ou autres à votre ReadAlong, definissez les couches d'annotations en cliquant ici. Si vous voulez plus tard enlever une couche, cliquez sur l'icône 🗑️ après avoir effacé toutes les données de cette couche.",
+    "4796729421526127263": "Passer à l'éditeur",
+    "1630288581226787121": "Après avoir téléchargé votre ReadAlong, vous pouvez le rouvrir dans l'Éditeur pour continuer à le modifier.",
+    "65984904390749158": "Terminer",
+    "3742657416068781599": "À l'éditeur",
     "8428348909593474745": "Étape 1",
     "3614618598824071164": " Cet outil vous aidera à créer une page interactive de lecture accompagnée, sur laquelle les mots sont surlignés lorsqu'ils sont lus à voix haute. Jetez un coup d'œil à {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} cet exemple en cri de l'Est{$CLOSE_LINK} pour mieux comprendre le concept. ",
     "5224223351795929492": "Avant de commencer à en faire vous-même faites une visite guidée en cliquant sur le bouton « Visite guidée » puis suivez les étapes ci-dessous.",

packages/studio-web/src/i18n/messages.json

@@ -75,7 +75,6 @@
     "668489750030842261": "But be careful, going back to the previous step will mean you will lose all of your translations and images.",
     "3430021493872613524": "Warning: Using the browser's back button will leave the app and might also erase all your text and audio data, so it should be avoided. ",
     "5849788734463744687": "Instead, use the \"Step 1\" button to go back and change your text or audio.",
-    "65984904390749158": "Finish",
     "5175388690035905510": "Editor for your exported ReadAlong",
     "5831797882771509684": "This tool allows you to modify your exported ReadAlong. Note that this tool only accepts the Offline HTML format.",
     "5429481539069429354": "Choose File",
@@ -90,6 +89,10 @@
     "2773189193481434399": "You can also fix spelling errors by clicking on a word and editing it.",
     "521889729172032768": "Annotating your ReadAlong",
     "8356749373768982906": "If you need to add information tiers/layers/annotation to each sentence of your ReadAlong, define the tiers by clicking on the icon here. If you later want to remove the tier, click on the 🗑️ icon after you have deleted all data in that tier.",
+    "4796729421526127263": "Go to the Editor",
+    "1630288581226787121": "Once you've downloaded your ReadAlong, you can reload it into the Editor to continue editing it.",
+    "65984904390749158": "Finish",
+    "3742657416068781599": "Editor",
     "8428348909593474745": "Step 1",
     "3614618598824071164": " This is a tool to help you make your own interactive 'readalong' that highlights words as they are spoken. Have a look at {$START_LINK}{$START_TAG_MAT_ICON}launch{$CLOSE_TAG_MAT_ICON} this example in East Cree{$CLOSE_LINK} to get a better idea of what these are. ",
     "5224223351795929492": " To get started making your own, click on the tour button below, and follow the steps. ",