[FINNA-2579] & [FINNA-2875] Add file size to LIDO resource and fix resource play buttons for sr

local/languages/finna/en-gb.ini

@@ -894,6 +894,7 @@ place_id_type_mjr = "Ancient Relics Register"
 place_id_type_rpr = "Built Heritage Register"
 Place of Origin = "Place of Origin"
 Place of Storage = "Place of storage"
+Play recording = "Play recording"
 Playing Time = "Playing Time"
 Polytechnic Libraries = "University of applied sciences libraries"
 Post Comment = "to post a comment."

local/languages/finna/fi.ini

@@ -886,6 +886,7 @@ place_id_type_mjr = "muinaisjäännösrekisteri"
 place_id_type_rpr = "rakennusperintörekisteri"
 Place of Origin = "Luontipaikka"
 Place of Storage = "Säilytyspaikka"
+Play recording = "Toista äänite"
 Playing Time = "Kesto"
 Polytechnic Libraries = "AMK-kirjastot"
 Post Comment = "lisätäksesi kommentin."

local/languages/finna/se.ini

@@ -870,6 +870,7 @@ place_id_type_mjr = "dološbázahusregisttar"
 place_id_type_rpr = "huksenárberegisttar"
 Place of Origin = "Vuođđudanbáiki"
 Place of Storage = "Seailluhanbáiki"
+Play recording = "Čuojat jietnabátti"
 Playing Time = "Bistin"
 Polytechnic Libraries = "ÁAS-girjerájut"
 Post Comment = "Iežat kommeantta lasiheami várás."

local/languages/finna/sv.ini

@@ -884,6 +884,7 @@ place_type_id_mjr = "fornminnesregistret"
 place_type_id_rpr = "byggnadsminnesregistret"
 Place of Origin = "Tillkomstort"
 Place of Storage = "Bevarandeplats"
+Play recording = "Spela upp inspelning"
 Playing Time = "Speltid"
 Polytechnic Libraries = "Yrkeshögskolornas bibliotek"
 Post Comment = "att posta kommentar."

module/Finna/src/Finna/RecordDriver/SolrLido.php

@@ -384,7 +384,7 @@ public function getAllImages($language = null)
      *
      * @return array
      */
-    protected function formatImageMeasurements(
+    protected function formatResourceMeasurements(
         \SimpleXmlElement $measurements
     ): array {
         $results = [];
@@ -639,14 +639,28 @@ protected function getRepresentations(string $language): array
 
                 // Representation is a 3d model
                 if (in_array($type, $modelTypeKeys)) {
-                    if ($model = $this->getModel($url, $format, $type)) {
+                    if (
+                        $model = $this->getModel(
+                            $url,
+                            $format,
+                            $type,
+                            $representation->resourceMeasurementsSet
+                        )
+                    ) {
                         $modelUrls[] = $model;
                     }
                     continue;
                 }
                 // Representation is an audio
                 if (in_array($type, $audioTypeKeys)) {
-                    if ($audio = $this->getAudio($url, $format, $description)) {
+                    if (
+                        $audio = $this->getAudio(
+                            $url,
+                            $format,
+                            $description,
+                            $representation->resourceMeasurementsSet
+                        )
+                    ) {
                         $audioUrls = array_merge($audioUrls, $audio);
                         if ($extraDetails = $this->getExtraDetails($resourceSet, $language)) {
                             $audioUrls = array_merge($audioUrls, $extraDetails);
@@ -656,7 +670,14 @@ protected function getRepresentations(string $language): array
                 }
                 // Representation is a video
                 if (in_array($type, $videoTypeKeys)) {
-                    if ($video = $this->getVideo($url, $format, $description)) {
+                    if (
+                        $video = $this->getVideo(
+                            $url,
+                            $format,
+                            $description,
+                            $representation->resourceMeasurementsSet
+                        )
+                    ) {
                         $videoUrls = array_merge($videoUrls, $video);
                         if ($extraDetails = $this->getExtraDetails($resourceSet, $language)) {
                             $videoUrls = array_merge($videoUrls, $extraDetails);
@@ -815,27 +836,33 @@ protected function getExtraDetails(
      *   - type Model type preview_3d or provided_3d as key
      *          url to model as value
      *
-     * @param string $url    Model url
-     * @param string $format Model format
-     * @param string $type   Model type
+     * @param string             $url          Model url
+     * @param string             $format       Model format
+     * @param string             $type         Model type
+     * @param ?\SimpleXmlElement $measurements Measurements
      *
      * @return array
      */
     protected function getModel(
         string $url,
         string $format,
         string $type,
+        ?\SimpleXmlElement $measurements
     ): array {
         $type = $this->modelTypes[$type];
         $format = strtolower($format);
         if ('preview' !== $type || !in_array($format, $this->displayableModelFormats)) {
             return [];
         }
-        return [
+        $model = [
             'url' => $url,
             'format' => $format,
             'type' => $type,
         ];
+        if ($measurements) {
+            $model['data'] = $this->formatResourceMeasurements($measurements);
+        }
+        return $model;
     }
 
     /**
@@ -882,7 +909,7 @@ protected function getImage(
         $highResolution = [];
         if (in_array($size, ['master', 'original'])) {
             $currentHiRes = [
-                'data' => $this->formatImageMeasurements(
+                'data' => $this->formatResourceMeasurements(
                     $measurements
                 ),
                 'url' => $url,
@@ -905,25 +932,31 @@ protected function getImage(
      * - type   Type what type is the audio file
      * - embed  Type of embed is audio
      *
-     * @param string $url         Url of the audio
-     * @param string $format      Format of the audio
-     * @param string $description Description of the audio
+     * @param string             $url          Url of the audio
+     * @param string             $format       Format of the audio
+     * @param string             $description  Description of the audio
+     * @param ?\SimpleXmlElement $measurements Measurements
      *
      * @return array
      */
     protected function getAudio(
         string $url,
         string $format,
-        string $description
+        string $description,
+        ?\SimpleXmlElement $measurements
     ): array {
         if ($codec = $this->supportedAudioFormats[$format] ?? false) {
-            return [
+            $audio = [
                 'desc' => $description ?: false,
                 'url' => $url,
                 'codec' => $format,
                 'type' => 'audio',
                 'embed' => 'audio',
             ];
+            if ($measurements) {
+                $audio['data'] = $this->formatResourceMeasurements($measurements);
+            }
+            return $audio;
         }
         return [];
     }
@@ -937,19 +970,21 @@ protected function getAudio(
      *  - src           Different sources for the video
      *  - type          Codec type
      *
-     * @param string $url         Url of the video
-     * @param string $format      Format of the video
-     * @param string $description Description of the video
+     * @param string             $url          Url of the video
+     * @param string             $format       Format of the video
+     * @param string             $description  Description of the video
+     * @param ?\SimpleXmlElement $measurements Measurements
      *
      * @return array
      */
     protected function getVideo(
         string $url,
         string $format,
-        string $description
+        string $description,
+        ?\SimpleXmlElement $measurements
     ): array {
         $mediaType = $this->supportedVideoFormats[$format] ?? false;
-        return match ($mediaType) {
+        $video = match ($mediaType) {
             'text/html' => [
                 'desc' => $description ?: false,
                 'url' => $url,
@@ -968,6 +1003,10 @@ protected function getVideo(
                 ],
             ],
         };
+        if ($video && $measurements) {
+            $video['data'] = $this->formatResourceMeasurements($measurements);
+        }
+        return $video;
     }
 
     /**

module/Finna/tests/fixtures/lido/lido_test.xml

@@ -359,6 +359,13 @@
         <resourceSet>
           <resourceRepresentation type="preview_3D">
             <linkResource formatResource="glTF">https://gltfmalli.gltf</linkResource>
+            <resourceMeasurementsSet>
+              <measurementType lang="fi">koko</measurementType>
+              <measurementType lang="en">size</measurementType>
+              <measurementUnit lang="fi">tavua</measurementUnit>
+              <measurementUnit lang="en">bytes</measurementUnit>
+              <measurementValue>60840000</measurementValue>
+            </resourceMeasurementsSet>
           </resourceRepresentation>
           <resourceRepresentation type="preview_3D">
             <linkResource formatResource="glb">https://glbmalli.glb</linkResource>
@@ -383,6 +390,15 @@
           <resourceDescription type="displayLink">VideoTesti.mp4</resourceDescription>
           <resourceRepresentation type="preview_video">
             <linkResource formatResource="mp4">https://linkkivideoon.fi</linkResource>
+            <resourceMeasurementsSet>
+              <measurementType lang="fi">koko</measurementType>
+              <measurementType lang="en">size</measurementType>
+              <measurementType lang="sv">storlek</measurementType>
+              <measurementUnit lang="fi">tavua</measurementUnit>
+              <measurementUnit lang="en">byte</measurementUnit>
+              <measurementUnit lang="sv">byte</measurementUnit>
+              <measurementValue>74576596</measurementValue>
+            </resourceMeasurementsSet>
           </resourceRepresentation>
         </resourceSet>
         <resourceSet>

module/Finna/tests/unit-tests/src/FinnaTest/RecordDriver/SolrLidoTest.php

@@ -63,6 +63,12 @@ public static function getRepresentationsData(): array
                                 'url' => 'https://gltfmalli.gltf',
                                 'format' => 'gltf',
                                 'type' => 'preview',
+                                'data' => [
+                                    'size' => [
+                                        'unit' => 'byte',
+                                        'value' => '60840000',
+                                    ],
+                                ],
                             ],
                             [
                                 'url' => 'https://glbmalli.glb',
@@ -213,6 +219,12 @@ public static function getRepresentationsData(): array
                             'type' => 'video/mp4',
                         ],
                         'resourceName' => 'VideoTesti.mp4',
+                        'data' => [
+                            'size' => [
+                                'unit' => 'byte',
+                                'value' => '74576596',
+                            ],
+                        ],
                     ],
                 ],
             ],

themes/finna2/js/finna-layout.js

@@ -681,9 +681,22 @@ finna.layout = (function finnaLayout() {
               function onVideoJsInited() {}
             );
             play.remove();
+            self.find('.vjs-play-control').focus();
           }
         );
       });
+      play.on('keydown', function onKeyDown(e) {
+        if (e.which === 13 || e.which === 32) {
+          e.preventDefault();
+          play.trigger('click');
+        }
+      });
+    });
+    $('finna-video').on('keydown', function onKeyDown(e) {
+      if (e.which === 13 || e.which === 32) {
+        e.preventDefault();
+        $(this).trigger('click');
+      }
     });
   }
 

themes/finna2/scss/finna/audio-player.scss

@@ -11,6 +11,9 @@
   .open-link:not(.download-audio) {
     font-size: $font-size-small;
   }
+  .open-link a:focus-visible {
+    outline: 2px solid $action-link-color;
+  }
 }
 
 .audio-accordion {
@@ -61,6 +64,9 @@
   .play {
     font-size: 35px;
     color: $action-link-color;
+    &:focus-visible {
+      outline: 2px solid $action-link-color;
+    }
   }
 }
 
@@ -119,6 +125,9 @@
       height: 3em;
       position: absolute;
     }
+    > button:focus-visible {
+      outline: 2px solid $action-link-color;
+    }
   }
 
   .vjs-play-control {

themes/finna2/scss/finna/record.scss

@@ -215,7 +215,7 @@ a.authority {
   }
 }
 
-.image-link {
+.image-link, .model-link {
   display: flex;
   align-items: center;
   font-size: 1em;
@@ -230,7 +230,7 @@ a.authority {
   .dropdown {
     position: initial;
   }
-  .image-dimensions, .image-size {
+  .image-dimensions, .image-size, .dropdown-menu .file-size {
     font-size: 0.8em;
     text-transform: initial;
   }
@@ -498,7 +498,7 @@ a.authority {
   }
 }
 
-.open-link, .save-record-link, .record-link {
+.open-link, .save-record-link, .record-link, .model-link .download-link {
   text-align: left;
   margin-top: 5px;
   color: $action-link-color;
@@ -516,8 +516,8 @@ a.authority {
     color: $gray-mid-light;
     font-size: .8em;
   }
-  > span.file-size {
-    color: $gray-slightly-lighter;
+  .file-size {
+    color: $gray-mid-light;
   }
 }
 

themes/finna2/templates/RecordDriver/DefaultRecord/audio-information.phtml

@@ -1,8 +1,13 @@
 <!-- START of: finna - RecordDriver/DefaultRecord/audio-information.phtml -->
+<?php
+    if ($fileSize = $url['data']['size'] ?? '') {
+        $fileSize = !empty($fileSize['value']) ? '(' . $this->fileSize(preg_replace('/[^0-9]/', '', $fileSize['value'])) . ')' : '';
+    }
+?>
 <div class="open-link download-audio">
     <a href="<?=$url['url'] ?>" target="_blank" rel="nofollow" download>
         <?=$this->icon('download') ?> <?=$this->transEsc('Download recording') ?>
-    </a>
+    </a> <span class="file-size"><?=$fileSize?></span>
 </div>
 <?php if (!empty($url['identifier'])): ?>
     <div class="audio-details-container text-left" data-img-index="<?=$ind?>">