VA-523 Implement changes after design review (#78)

* VA-453 Align icons of audio and video play buttons

* VA-523 Scroll video modal into view when opened

* VA-523 Make video modal more compact when space is limited

* VA-523 Prevent warped button caused audio option `fitToWrapper`

* VA-523 Add a little bit of padding to compact modals' content

Author: Languafe

src/scripts/h5p-multi-media-choice-option.js

@@ -123,6 +123,7 @@ export class MultiMediaChoiceOption {
 
         modal.setAttribute('tabindex', '0');
         modal.focus();
+        modal.scrollIntoView({ behavior: 'smooth', block: 'center' });
         event.stopPropagation();
       });
 
@@ -209,8 +210,8 @@ export class MultiMediaChoiceOption {
    */
   createVideoPlayer(lastFocus) {
     const modal = createElement({type: 'div', classList: ['h5p-multi-media-modal'], attributes: {'aria-modal': 'true'}});
-    const modalContainer = createElement({type: 'div', classList: ['modal-container']});
-    const modalContent = createElement({type: 'div', classList: ['modal-content']});
+    const modalContainer = createElement({type: 'div', classList: ['h5p-multi-media-choice-modal-container']});
+    const modalContent = createElement({type: 'div', classList: ['h5p-multi-media-choice-modal-content']});
     const closeButton = createElement({type: 'button', classList: ['modal-close-button'], attributes: {'aria-label': this.closeModalText}});
     const cross = createElement({type: 'div', classList: ['icon-cross']});
 

src/scripts/h5p-multi-media-choice.js

@@ -23,6 +23,13 @@ export default class MultiMediaChoice extends H5P.Question {
     // Default values are extended
     this.params = Util.extendParams(params);
 
+    // Override subcontent params
+    for (const option of this.params.options) {
+      if (option.media?.library?.includes('H5P.Audio')) {
+        option.media.params.fitToWrapper = false; // VA-523: prevent warped button
+      }
+    }
+
     this.content = new MultiMediaChoiceContent(
       this.params,
       contentId,

src/styles/_sizes.scss

@@ -9,3 +9,4 @@ $option-icon: 2.8em;
 $minimum-auto-scaling-size: 901px;
 $scaling-interval: 300px;
 $button-size: 4rem;
+$button-size-small: 2.5rem;

src/styles/h5p-multi-media-choice.scss

@@ -208,16 +208,18 @@
     align-items: center;
     justify-content: center;
 
-    .modal-container {
+    .h5p-multi-media-choice-modal-container {
       position: relative;
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       max-width: 100%;
       max-height: 100%;
+      container-name: h5p-mmc-modal-container;
+      container-type: inline-size;
 
-      .modal-content {
+      .h5p-multi-media-choice-modal-content {
         position: relative;
         background-color: white;
         padding: 1.2rem;
@@ -229,6 +231,12 @@
         box-shadow: none;
         max-height: 100%;
 
+        @container h5p-mmc-modal-container (width < 480px) {
+          padding: 3px;
+          width: 100%;
+          max-width: 100%;
+        }
+
         .modal-close-button {
           background-color: #ffffff;
           position: absolute;
@@ -245,13 +253,25 @@
           justify-content: center;
           align-items: center;
 
+          @container h5p-mmc-modal-container (width < 480px) {
+            right: 0;
+            height: $button-size-small;
+            width: $button-size-small;
+          }
+
           .icon-cross {
-            width: 4rem;
-            height: 4rem;
+            width: $button-size;
+            height: $button-size;
             background-size: 3.5rem;
             background-image: url(../../assets/x-close.svg);
             background-repeat: no-repeat;
-            background-position: -0.1rem 0.2rem;
+            background-position: center;
+
+            @container h5p-mmc-modal-container (width < 480px) {
+              height: $button-size-small;
+              width: $button-size-small;
+              background-size: 2rem;
+            }
           }
         }
       }
@@ -282,7 +302,7 @@
     right: 0;
     margin: 0.5em;
     z-index: 1;
-    
+
     .h5p-audio-minimal-button {
       width: $button-size;
       height: $button-size;
@@ -298,6 +318,13 @@
     .h5p-audio-minimal-button::before {
       font-size: math.div($button-size, 2);
     }
+
+    /* Make H5P.Audio's play button icon match our video play button's icon */
+    .h5p-audio-minimal-play-paused::before {
+      position: relative;
+      left: 3px;
+      font-size: 2.125rem;
+    }
   }
 
   .h5p-multi-media-content-media-button-centered {