Prevent spacebar playback if unfocused, Cursor Height CSS, cursor null checks (#43)

* Set cursor height via CSS also
Often img elements have their height set to auto (or something else) which overrides the height HTML attribute and causes the cursor to not be rendered properly. (seen in Wordpress primarily).

* Cursor null check

* Spacebar only works when button is focused
Spacebar will not trigger playback unless the play/pause button has focus

* Cursor: add further null check for y value

Co-authored-by: Justin Litten <justinlitten77@gmail.com>
Co-authored-by: sschmidTU <s.schmid@phonicscore.com>
except for last commit (y value null check) all commits by fredmeister77.

src/OpenSheetMusicDisplay/Cursor.ts

@@ -220,9 +220,10 @@ export class Cursor implements IPlaybackListener {
           // sort them by x position and take the leftmost entry
           const gse: VexFlowStaffEntry =
                 gseArr.sort((a, b) => a?.PositionAndShape?.AbsolutePosition?.x <= b?.PositionAndShape?.AbsolutePosition?.x ? -1 : 1 )[0];
-          x = gse.PositionAndShape.AbsolutePosition.x;
-          musicSystem = gse.parentMeasure.ParentMusicSystem;
-
+          if(gse){
+            x = gse.PositionAndShape.AbsolutePosition.x;
+            musicSystem = gse.parentMeasure.ParentMusicSystem;
+          }
           // debug: change color of notes under cursor (needs re-render)
           // for (const gve of gse.graphicalVoiceEntries) {
           //   for (const note of gve.notes) {
@@ -235,7 +236,7 @@ export class Cursor implements IPlaybackListener {
     }
 
     // y is common for both multirest and non-multirest, given the MusicSystem
-    y = musicSystem.PositionAndShape.AbsolutePosition.y + musicSystem.StaffLines[0].PositionAndShape.RelativePosition.y;
+    y = musicSystem.PositionAndShape.AbsolutePosition.y + musicSystem.StaffLines[0].PositionAndShape.RelativePosition.y ?? 0;
     const bottomStaffline: StaffLine = musicSystem.StaffLines[musicSystem.StaffLines.length - 1];
     const endY: number = musicSystem.PositionAndShape.AbsolutePosition.y +
     bottomStaffline.PositionAndShape.RelativePosition.y + bottomStaffline.StaffHeight;
@@ -261,35 +262,46 @@ export class Cursor implements IPlaybackListener {
   public updateWidthAndStyle(measurePositionAndShape: BoundingBox, x: number, y: number, height: number): void {
     const cursorElement: HTMLImageElement = this.cursorElement;
     let newWidth: number = 0;
+    let heightCalc: number = height;
     switch (this.cursorOptions.type) {
       case 1:
         cursorElement.style.top = (y * 10.0 * this.openSheetMusicDisplay.zoom) + "px";
         cursorElement.style.left = ((x - 1.5) * 10.0 * this.openSheetMusicDisplay.zoom) + "px";
-        cursorElement.height = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        heightCalc = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        cursorElement.height = heightCalc;
+        cursorElement.style.height = heightCalc + "px";
         newWidth = 5 * this.openSheetMusicDisplay.zoom;
         break;
       case 2:
         cursorElement.style.top = ((y-2.5) * 10.0 * this.openSheetMusicDisplay.zoom) + "px";
         cursorElement.style.left = (x * 10.0 * this.openSheetMusicDisplay.zoom) + "px";
-        cursorElement.height = (1.5 * 10.0 * this.openSheetMusicDisplay.zoom);
+        heightCalc = (1.5 * 10.0 * this.openSheetMusicDisplay.zoom);
+        cursorElement.height = heightCalc;
+        cursorElement.style.height = heightCalc + "px";
         newWidth = 5 * this.openSheetMusicDisplay.zoom;
         break;
       case 3:
         cursorElement.style.top = measurePositionAndShape.AbsolutePosition.y * 10.0 * this.openSheetMusicDisplay.zoom +"px";
         cursorElement.style.left = measurePositionAndShape.AbsolutePosition.x * 10.0 * this.openSheetMusicDisplay.zoom +"px";
-        cursorElement.height = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        heightCalc = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        cursorElement.height = heightCalc;
+        cursorElement.style.height = heightCalc + "px";
         newWidth = measurePositionAndShape.Size.width * 10 * this.openSheetMusicDisplay.zoom;
         break;
       case 4:
         cursorElement.style.top = measurePositionAndShape.AbsolutePosition.y * 10.0 * this.openSheetMusicDisplay.zoom +"px";
         cursorElement.style.left = measurePositionAndShape.AbsolutePosition.x * 10.0 * this.openSheetMusicDisplay.zoom +"px";
-        cursorElement.height = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        heightCalc = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        cursorElement.height = heightCalc;
+        cursorElement.style.height = heightCalc + "px";
         newWidth = (x-measurePositionAndShape.AbsolutePosition.x) * 10 * this.openSheetMusicDisplay.zoom;
         break;
         default:
         cursorElement.style.top = (y * 10.0 * this.openSheetMusicDisplay.zoom) + "px";
         cursorElement.style.left = ((x - 1.5) * 10.0 * this.openSheetMusicDisplay.zoom) + "px";
-        cursorElement.height = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        heightCalc = (height * 10.0 * this.openSheetMusicDisplay.zoom);
+        cursorElement.height = heightCalc;
+        cursorElement.style.height = heightCalc + "px";
         newWidth = 3 * 10.0 * this.openSheetMusicDisplay.zoom;
         break;
     }

src/Playback/UIComponents/ControlPanel/PlayPauseButton.ts

@@ -15,10 +15,12 @@ export class PlayPauseButton {
     });
     document.addEventListener("keydown", (event: KeyboardEvent) => {
       if (event.code === "Space") {
-        event.preventDefault();
-        this.toggleState();
-        for (const listener of this.listeners) {
-          listener(this.state);
+        if(document.activeElement === this.el){
+          event.preventDefault();
+          this.toggleState();
+          for (const listener of this.listeners) {
+            listener(this.state);
+          }
         }
       }
     });