fix: make pause at end of page work with any translation (#579)

We were excluding sentences that had both class .translation and class
.sentence__translation from the list of sentences to figure how which is
the last sentence in a page, but we should exclude any sentence with
either of those classes, or with do-no-align=true.

Depending on how translations are added to a read-along, we don't always set
both classes, so let's filter out anything that might be a translation when we
are playing in the web-component.

Fixes #578

Author: joanise

packages/web-component/src/components/read-along-component/read-along.tsx

@@ -1125,7 +1125,8 @@ export class ReadAlongComponent {
             const sentences = paragraphs[
               paragraphs.length - 1
             ].querySelectorAll(
-              "s:not(.translation), s:not(.sentence__translation)",
+              // chain the not statements so they are ANDed: exclude sentences matching any of these criteria
+              's:not(.translation):not(.sentence__translation):not([do-not-align="true"])',
             ); //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