44965: Failed test: Player - Video: show

components/ILIAS/UI/src/Component/Player/Video.php

@@ -1,7 +1,5 @@
 <?php
 
-declare(strict_types=1);
-
 /**
  * This file is part of ILIAS, a powerful learning management system
  * published by ILIAS open source e-Learning e.V.
@@ -18,6 +16,8 @@
  *
  *********************************************************************/
 
+declare(strict_types=1);
+
 namespace ILIAS\UI\Component\Player;
 
 use ILIAS\UI\Component\JavaScriptBindable;
@@ -33,14 +33,20 @@ interface Video extends Player
      * @param string $lang_key two letter lang key, e.g. "de", "en"
      * @param string $subtitle_file relative web root path of a vtt file
      */
-    public function withAdditionalSubtitleFile(string $lang_key, string $subtitle_file): \ILIAS\UI\Component\Player\Video;
+    public function withAdditionalSubtitleFile(string $lang_key, string $subtitle_file, string $label): \ILIAS\UI\Component\Player\Video;
 
     /**
      * Get subtitle files
      * @return array<string,string>
      */
     public function getSubtitleFiles(): array;
 
+    /**
+     * Get subtitle labels
+     * @return array<string,string>
+     */
+    public function getSubtitleLabels(): array;
+
     /**
      * Set initially shown poster image
      * @param string $poster relative web root path of an image file, URL of an external image resource (png,jpg,svg,gif)

components/ILIAS/UI/src/Implementation/Component/Player/Renderer.php

@@ -128,10 +128,12 @@ public function renderNative(
 
         $id = $this->bindJavaScript($component);
 
+        $labels = $component->getSubtitleLabels();
         foreach ($component->getSubtitleFiles() as $lang_key => $file) {
             $tpl->setCurrentBlock("track");
             $tpl->setVariable("TRACK_SOURCE", $file);
             $tpl->setVariable("TRACK_LANG", $lang_key);
+            $tpl->setVariable("TRACK_LABEL", $labels[$lang_key] ?? "");
             $tpl->parseCurrentBlock();
         }
 

components/ILIAS/UI/src/Implementation/Component/Player/Video.php

@@ -1,7 +1,5 @@
 <?php
 
-declare(strict_types=1);
-
 /**
  * This file is part of ILIAS, a powerful learning management system
  * published by ILIAS open source e-Learning e.V.
@@ -18,6 +16,8 @@
  *
  *********************************************************************/
 
+declare(strict_types=1);
+
 namespace ILIAS\UI\Implementation\Component\Player;
 
 use ILIAS\UI\Component as C;
@@ -34,11 +34,13 @@ class Video extends Player implements C\Player\Video
     private string $src = "";
     private string $poster = "";
     private array $subtitle_files = [];
+    private array $subtitle_labels = [];
 
-    public function withAdditionalSubtitleFile(string $lang_key, string $subtitle_file): C\Player\Video
+    public function withAdditionalSubtitleFile(string $lang_key, string $subtitle_file, string $label): C\Player\Video
     {
         $clone = clone $this;
         $clone->subtitle_files[$lang_key] = $subtitle_file;
+        $clone->subtitle_labels[$lang_key] = $label;
         return $clone;
     }
 
@@ -47,6 +49,11 @@ public function getSubtitleFiles(): array
         return $this->subtitle_files;
     }
 
+    public function getSubtitleLabels(): array
+    {
+        return $this->subtitle_labels;
+    }
+
     public function withPoster(string $poster): C\Player\Video
     {
         $clone = clone $this;

components/ILIAS/UI/src/examples/Player/Video/video_mp4.php

@@ -11,9 +11,9 @@
  *
  * expected output: >
  *   ILIAS shows a rendered video player with a start screen. On the left side you will see a Start/Stop symbol,
- *   followed by a time bar and on the right side a symbol for subtitles (CC), volume control and for the the full screen.
+ *   followed by a time bar and on the right side a symbol for subtitles (CC) (depends on browser), volume control and for the the full screen.
  *   A big start symbol is shown in the middle of the start screen. While hovering over the subtitles symbol a list of all
- *   available languages appears. If a language gets selected you can find the text at the bottom of the full screen.
+ *   available languages appears. If a language gets selected you can find the text above the time bar.
  *
  *   In addition following functions have to be tested:
  *   - The video starts playing if clicking the start/stop symbol in the middle of the image. The video stops after another click.
@@ -28,8 +28,8 @@ function video_mp4(): string
     $f = $DIC->ui()->factory();
 
     $video = $f->player()->video("https://files.ilias.de/ks/ILIAS-Video.mp4");
-    $video = $video->withAdditionalSubtitleFile("en", "./assets/ui-examples/misc/subtitles_en.vtt");
-    $video = $video->withAdditionalSubtitleFile("de", "./assets/ui-examples/misc/subtitles_de.vtt");
+    $video = $video->withAdditionalSubtitleFile("en", "./assets/ui-examples/misc/subtitles_en.vtt", "English");
+    $video = $video->withAdditionalSubtitleFile("de", "./assets/ui-examples/misc/subtitles_de.vtt", "Deutsch");
 
     return $renderer->render($video);
 }

components/ILIAS/UI/src/templates/default/Player/tpl.video.html

@@ -1,5 +1,5 @@
 <div class="il-video-container">
     <video controls class="il-video-player" id="{ID}" src="{SOURCE}" preload="metadata" <!-- BEGIN poster -->poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image:url('{POSTER_SOURCE}')"<!-- END poster -->>
-        <!-- BEGIN track --><track kind="subtitles" src="{TRACK_SOURCE}" srclang="{TRACK_LANG}" /><!-- END track -->
+        <!-- BEGIN track --><track kind="subtitles" src="{TRACK_SOURCE}" srclang="{TRACK_LANG}" label="{TRACK_LABEL}" /><!-- END track -->
     </video>
 </div>

components/ILIAS/UI/tests/Component/Player/PlayerVideoTest.php

@@ -93,9 +93,10 @@ public function testGetTitleGetSubtitleFile(): void
     {
         $f = $this->getFactory();
 
-        $video = $f->video("/foo")->withAdditionalSubtitleFile("en", "subtitles.vtt");
+        $video = $f->video("/foo")->withAdditionalSubtitleFile("en", "subtitles.vtt", "English");
 
         $this->assertEquals(["en" => "subtitles.vtt"], $video->getSubtitleFiles());
+        $this->assertEquals(["en" => "English"], $video->getSubtitleLabels());
     }
 
     public function testRenderVideo(): void
@@ -143,13 +144,13 @@ public function testRenderWithSubtitles(): void
         $f = $this->getFactory();
         $r = $this->getDefaultRenderer();
 
-        $video = $f->video("/foo")->withAdditionalSubtitleFile("en", "subtitles.vtt");
+        $video = $f->video("/foo")->withAdditionalSubtitleFile("en", "subtitles.vtt", "English");
 
         $html = $r->render($video);
         $expected = <<<EOT
 <div class="il-video-container">
     <video controls class="il-video-player" id="" src="/foo" preload="metadata" >
-        <track kind="subtitles" src="subtitles.vtt" srclang="en" />
+        <track kind="subtitles" src="subtitles.vtt" srclang="en" label="English" />
     </video>
 </div>
 EOT;