KS: 41633: Video Player not working

components/ILIAS/UI/src/Implementation/Component/Player/Renderer.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\Implementation\Render\AbstractComponentRenderer;
@@ -45,9 +45,6 @@ public function renderAudio(Component\Component $component, RendererInterface $d
     {
         $tpl = $this->getTemplate("tpl.audio.html", true, true);
 
-        $component = $component->withAdditionalOnLoadCode(function ($id) {
-            return "$('#$id').mediaelementplayer({stretching: 'responsive'});";
-        });
         $id = $this->bindJavaScript($component);
 
         if ($component->getTranscription() != "") {
@@ -75,11 +72,60 @@ public function renderVideo(
         Component\Component $component,
         RendererInterface $default_renderer
     ): string {
+        if ($this->isVimeo($component)) {
+            return $this->renderVimeo(
+                $component,
+                $default_renderer
+            );
+        } elseif ($this->isYoutube($component)) {
+            return $this->renderYoutube(
+                $component,
+                $default_renderer
+            );
+        }
+        return $this->renderNative(
+            $component,
+            $default_renderer
+        );
+    }
+
+    public function renderVimeo(
+        Component\Component $component,
+        RendererInterface $default_renderer
+    ): string {
+
+        $tpl = $this->getTemplate("tpl.video_vimeo.html", true, true);
+
+        $id = $this->bindJavaScript($component);
+
+        $tpl->setVariable("ID", $id);
+        $tpl->setVariable("SOURCE", $component->getSource());
+
+        return $tpl->get();
+    }
+
+    public function renderYoutube(
+        Component\Component $component,
+        RendererInterface $default_renderer
+    ): string {
+
+        $tpl = $this->getTemplate("tpl.video_youtube.html", true, true);
+
+        $id = $this->bindJavaScript($component);
+
+        $tpl->setVariable("ID", $id);
+        $tpl->setVariable("SOURCE", $component->getSource());
+
+        return $tpl->get();
+    }
+
+    public function renderNative(
+        Component\Component $component,
+        RendererInterface $default_renderer
+    ): string {
+
         $tpl = $this->getTemplate("tpl.video.html", true, true);
 
-        $component = $component->withAdditionalOnLoadCode(function ($id) {
-            return "$('#$id').mediaelementplayer();";
-        });
         $id = $this->bindJavaScript($component);
 
         foreach ($component->getSubtitleFiles() as $lang_key => $file) {
@@ -101,11 +147,21 @@ public function renderVideo(
         return $tpl->get();
     }
 
-    public function registerResources(\ILIAS\UI\Implementation\Render\ResourceRegistry $registry): void
-    {
-        parent::registerResources($registry);
-        $registry->register('./assets/js/mediaelement-and-player.min.js');
-        $registry->register('./assets/css/mediaelementplayer.min.css');
-        $registry->register('./assets/js/vimeo.min.js');
+    protected function isVimeo(
+        Component\Component $component
+    ): bool {
+        if (is_int(strpos($component->getSource(), 'vimeo.com'))) {
+            return true;
+        }
+        return false;
+    }
+
+    protected function isYoutube(
+        Component\Component $component
+    ): bool {
+        if (is_int(strpos($component->getSource(), 'youtube.com'))) {
+            return true;
+        }
+        return false;
     }
 }

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

@@ -27,7 +27,7 @@ function video_vimeo(): string
     $renderer = $DIC->ui()->renderer();
     $f = $DIC->ui()->factory();
 
-    $video = $f->player()->video("https://vimeo.com/669475821?controls=0");
+    $video = $f->player()->video("https://player.vimeo.com/video/669475821");
 
     return $renderer->render($video);
 }

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

@@ -28,7 +28,7 @@ function video_youtube(): string
     $renderer = $DIC->ui()->renderer();
     $f = $DIC->ui()->factory();
 
-    $video = $f->player()->video("https://www.youtube.com/watch?v=YSN2osYbshQ");
+    $video = $f->player()->video("https://www.youtube.com/embed/YSN2osYbshQ");
 
     return $renderer->render($video);
 }

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

@@ -1,5 +1,5 @@
 <div class="il-audio-container">
-    <audio class="il-audio-player" id="{ID}" src="{SOURCE}" preload="metadata"></audio>
+    <audio controls="controls" class="il-audio-player" id="{ID}" src="{SOURCE}" preload="metadata"></audio>
     <!-- BEGIN transcription -->
     {BUTTON_AND_MODAL}
     <!-- END transcription -->

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

@@ -1,5 +1,5 @@
 <div class="il-video-container">
-    <video class="il-video-player" id="{ID}" src="{SOURCE}" style="max-width: 100%;" preload="metadata" <!-- BEGIN poster -->poster="{POSTER_SOURCE}"<!-- END poster -->>
+    <video controls="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 -->
     </video>
 </div>

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

@@ -0,0 +1,3 @@
+<div class="il-video-container">
+    <iframe id="{ID}" src="{SOURCE}" allow="fullscreen; autoplay; picture-in-picture;" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="il-video-container">
+    <iframe id="{ID}" src="{SOURCE}" allow="fullscreen; autoplay; picture-in-picture;" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>

components/ILIAS/UI/tests/Component/Item/ItemTest.php

@@ -638,11 +638,12 @@ public function testRenderAudioPlayer(): void
         $c = $f->standard("title")->withAudioPlayer($audio);
 
         $html = $r->render($c);
+
         $expected = <<<EOT
 <div class="il-item il-std-item ">
     <h4 class="il-item-title">title</h4>
     <div class="il-item-audio"><div class="il-audio-container">
-    <audio class="il-audio-player" id="id_1" src="src" preload="metadata"></audio>
+    <audio controls="controls" class="il-audio-player" id="" src="src" preload="metadata"></audio>
 </div></div>
 </div>
 EOT;

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

@@ -100,7 +100,7 @@ public function testRenderAudio(): void
 
         $expected = <<<EOT
 <div class="il-audio-container">
-    <audio class="il-audio-player" id="id_1" src="/foo" preload="metadata"></audio>
+    <audio controls="controls" class="il-audio-player" id="" src="/foo" preload="metadata"></audio>
 </div>
 EOT;
         $this->assertHTMLEquals(

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

@@ -108,7 +108,7 @@ public function testRenderVideo(): void
         $html = $r->render($video);
         $expected = <<<EOT
 <div class="il-video-container">
-    <video class="il-video-player" id="id_1" src="/foo" style="max-width: 100%;" preload="metadata" >
+    <video controls="controls" class="il-video-player" id="" src="/foo" preload="metadata" >
     </video>
 </div>
 EOT;
@@ -126,10 +126,9 @@ public function testRenderWithPoster(): void
         $video = $f->video("/foo")->withPoster("bar.jpg");
 
         $html = $r->render($video);
-
         $expected = <<<EOT
 <div class="il-video-container">
-    <video class="il-video-player" id="id_1" src="/foo" style="max-width: 100%;" preload="metadata" poster="bar.jpg">
+    <video controls="controls" class="il-video-player" id="" src="/foo" preload="metadata" poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="background-image:url('bar.jpg')">
     </video>
 </div>
 EOT;
@@ -149,10 +148,50 @@ public function testRenderWithSubtitles(): void
         $html = $r->render($video);
         $expected = <<<EOT
 <div class="il-video-container">
-    <video class="il-video-player" id="id_1" src="/foo" style="max-width: 100%;" preload="metadata" >
+    <video controls="controls" class="il-video-player" id="" src="/foo" preload="metadata" >
         <track kind="subtitles" src="subtitles.vtt" srclang="en" />
     </video>
 </div>
+EOT;
+        $this->assertHTMLEquals(
+            $this->brutallyTrimHTML($expected),
+            $this->brutallyTrimHTML($html)
+        );
+    }
+
+    public function testRenderYoutube(): void
+    {
+        $f = $this->getFactory();
+        $r = $this->getDefaultRenderer();
+
+        $video = $f->video("https://www.youtube.com/embed/YSN2osYbshQ");
+
+        $html = $r->render($video);
+
+        $expected = <<<EOT
+<div class="il-video-container">
+    <iframe id="" src="https://www.youtube.com/embed/YSN2osYbshQ" allow="fullscreen; autoplay; picture-in-picture;" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
+EOT;
+        $this->assertHTMLEquals(
+            $this->brutallyTrimHTML($expected),
+            $this->brutallyTrimHTML($html)
+        );
+    }
+
+    public function testRenderVimeo(): void
+    {
+        $f = $this->getFactory();
+        $r = $this->getDefaultRenderer();
+
+        $video = $f->video("https://player.vimeo.com/video/669475821");
+
+        $html = $r->render($video);
+
+        $expected = <<<EOT
+<div class="il-video-container">
+    <iframe id="" src="https://player.vimeo.com/video/669475821" allow="fullscreen; autoplay; picture-in-picture;" referrerpolicy="strict-origin-when-cross-origin"></iframe>
+</div>
 EOT;
         $this->assertHTMLEquals(
             $this->brutallyTrimHTML($expected),

templates/default/070-components/UI-framework/Player/_ui-component_player.scss

@@ -2,6 +2,7 @@
 
 //== Player
 $il-player-audio-width: 100%;
+$il-player-audio-height: 30px;
 
 // audio
 .il-audio-container {
@@ -10,5 +11,20 @@ $il-player-audio-width: 100%;
   }
 }
 .il-audio-player {
-  background: $il-neutral-color;
+  background: transparent;
+  height: $il-player-audio-height;
+  width: $il-player-audio-width;
+}
+.il-video-container {
+  video {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width:100%;
+  }
+  iframe {
+    width:100%;
+    aspect-ratio: 16/9;
+    border:0;
+  }
 }